Gabriel Alexander Maxwell

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Gabriel Alexander Maxwell</title> <link href="https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;700&display=swap" rel="stylesheet"> <style> *{ margin:0; padding:0; box-sizing:border-box; } body{ background:#050505; color:white; font-family:'Oswald',sans-serif; } header{ min-height:100vh; display:flex; align-items:center; justify-content:space-between; padding:50px 8%; background:#050505; } .text{ max-width:600px; } .small{ color:#c9a54c; letter-spacing:3px; font-size:1.2rem; margin-bottom:15px; } h1{ font-size:6rem; line-height:0.95; text-transform:uppercase; margin-bottom:25px; } .slogan{ font-size:1.6rem; color:#c9a54c; margin-bottom:35px; } .btn{ display:inline-block; padding:15px 30px; border-radius:50px; text-decoration:none; font-size:1.1rem; font-weight:bold; color:white; background:linear-gradient(90deg,#ff0066,#8338ec); } .photo{ width:500px; height:700px; border-radius:20px; overflow:hidden; box-shadow:0 0 50px rgba(0,0,0,.7); } .photo img{ width:100%; height:100%; object-fit:cover; } section{ padding:80px 8%; } .section-title{ font-size:3rem; margin-bottom:30px; text-transform:uppercase; } .about{ display:grid; grid-template-columns:1fr 1fr; gap:50px; } .about p{ font-size:1.2rem; line-height:1.8; color:#cfcfcf; } .release-card{ background:#111; padding:30px; border-radius:20px; border:1px solid #222; } .release-card h3{ font-size:2.5rem; margin-bottom:20px; color:#c9a54c; } .release-card p{ font-size:1.2rem; margin-bottom:10px; } .instagram{ text-align:center; } .instagram a{ display:inline-block; margin-top:20px; padding:15px 35px; background:linear-gradient(90deg,#ff0066,#8338ec); border-radius:50px; text-decoration:none; color:white; font-size:1.2rem; } .quote{ text-align:center; padding:100px 20px; font-size:1.8rem; color:#c9a54c; } footer{ text-align:center; padding:40px; color:#777; border-top:1px solid #111; } @media(max-width:900px){ header{ flex-direction:column; text-align:center; } .photo{ width:100%; max-width:400px; height:500px; margin-top:40px; } h1{ font-size:4rem; } .about{ grid-template-columns:1fr; } } </style> </head> <body> <header> <div class="text"> <p class="small">RAPPER • HIP-HOP ARTIST</p> <h1> Gabriel<br> Alexander<br> Maxwell </h1> <p class="slogan"> Transformando experiências em música. </p> <a href="https://www.instagram.com/gr3vael" class="btn"> @gr3vael </a> </div> <div class="photo"> <img src="foto.jpg" alt="Gabriel Alexander Maxwell"> </div> </header> <section> <h2 class="section-title">About</h2> <div class="about"> <p> Gabriel Alexander Maxwell é um artista independente de rap e hip-hop que busca transformar experiências, sentimentos e visões do mundo em música. Com influências da cultura hip-hop contemporânea, ele desenvolve uma identidade própria, misturando autenticidade, criatividade e atitude em cada lançamento. </p> <p> Seu primeiro projeto, <strong>Good On It</strong>, está previsto para chegar ao público como single, marcando o início oficial de sua trajetória musical. O lançamento representa o primeiro capítulo de uma carreira construída com produções originais e uma visão artística única. </p> </div> </section> <section> <h2 class="section-title">Upcoming Release</h2> <div class="release-card"> <h3>GOOD ON IT</h3> <p><strong>Type:</strong> Single</p> <p><strong>Status:</strong> Coming Soon</p> <p><strong>Genre:</strong> Rap / Hip-Hop</p> </div> </section> <section class="instagram"> <h2 class="section-title">Instagram</h2> <a href="https://www.instagram.com/gr3vael"> Follow @gr3vael </a> </section> <div class="quote"> “A música é a forma que encontrei de transformar ideias em algo que as pessoas possam sentir.” </div> <footer> © 2026 Gabriel Alexander Maxwell. All Rights Reserved. </footer> </body> </html>

Show full message

8d ago

I'll convert this HTML into a Next.js application. Let me first check the existing project structure and then implement the rapper landing page.

Now I'll update the layout with the Oswald font, update the globals.css with the dark theme colors, and create the landing page components.

I've converted your HTML landing page into a Next.js application for Gabriel Alexander Maxwell's artist website. The page includes:

Hero Section: Full-screen header with the artist name, tagline in Portuguese, and Instagram CTA button with a gradient style
About Section: Two-column grid layout describing the artist's background and upcoming music
Release Section: Card highlighting the upcoming "Good On It" single with release details
Instagram Section: Centered call-to-action to follow on Instagram
Quote Section: Inspirational quote styled in gold accent color
Footer: Copyright notice

The design uses the Oswald font family, a dark theme (#050505 background), and gold accent color (#c9a54c) matching your original HTML. I also generated an artist photo placeholder image for the hero section.

8d ago

gabrielalexandermaxwell.site.je
Esse é meu dominio quero que configure no chat

8d ago

Vou adicionar o domínio ao seu projeto. Primeiro, deixe-me verificar o projeto atual:

8d ago

Run command

8d ago

I'll convert this HTML into a Next.js application. Let me first check the existing project structure and then implement the rapper landing page.

Now I'll update the layout with the Oswald font, update the globals.css with the dark theme colors, and create the landing page components.

I've converted your HTML landing page into a Next.js application for Gabriel Alexander Maxwell's artist website. The page includes:

Hero Section: Full-screen header with the artist name, tagline in Portuguese, and Instagram CTA button with a gradient style
About Section: Two-column grid layout describing the artist's background and upcoming music
Release Section: Card highlighting the upcoming "Good On It" single with release details
Instagram Section: Centered call-to-action to follow on Instagram
Quote Section: Inspirational quote styled in gold accent color
Footer: Copyright notice

8d ago

gabrielalexandermaxwell.site.je
Esse é meu dominio quero que configure no chat

8d ago

Vou adicionar o domínio ao seu projeto. Primeiro, deixe-me verificar o projeto atual:

8d ago