Update src/pages/HomePage.tsx

Merge version_10_1782155667713 into main

src/App.tsx

@@ -2,11 +2,13 @@ import { Routes, Route } from 'react-router-dom';
 import Layout from './components/Layout';
 import HomePage from './pages/HomePage';
 
+import PricingPage from "@/pages/PricingPage";
 export default function App() {
   return (
     <Routes>
       <Route element={<Layout />}>
         <Route path="/" element={<HomePage />} />
+        <Route path="/pricing" element={<PricingPage />} />
       </Route>
     </Routes>
   );

src/components/Layout.tsx

@@ -34,7 +34,9 @@ export default function Layout() {
   {
     "name": "Faq",
     "href": "#faq"
-  }
+  },
+  { name: "Pricing", href: "/pricing" },
+
 ];
 
   return (

src/index.css

@@ -1,19 +1,19 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');
 @import "tailwindcss";
 @import "./styles/masks.css";
 @import "./styles/animations.css";
 
 :root {
   /* @colorThemes/lightTheme/grayNavyBlue */
-  --background: #f7f6f7;
-  --card: #ffffff;
-  --foreground: #0c1325;
-  --primary-cta: #0798ff;
-  --primary-cta-text: #f7f6f7;
-  --secondary-cta: #ffffff;
-  --secondary-cta-text: #0c1325;
-  --accent: #93c7ff;
-  --background-accent: #a8cde8;
+  --background: #0a0a0a;
+  --card: #1a1a1a;
+  --foreground: #f0f8ffe6;
+  --primary-cta: #cee7ff;
+  --primary-cta-text: #0a0a0a;
+  --secondary-cta: #1a1a1a;
+  --secondary-cta-text: #f0f8ffe6;
+  --accent: #737373;
+  --background-accent: #737373;
 
   /* @layout/border-radius/rounded */
   --radius: 0.5rem;
@@ -88,7 +88,7 @@
   --color-background-accent: var(--background-accent);
 
   /* Fonts */
-  --font-sans: 'Roboto', sans-serif;
+  --font-sans: 'Montserrat', sans-serif;
   --font-tight: "Inter Tight", sans-serif;
   --font-mono: monospace;
 
@@ -137,7 +137,7 @@ body {
   margin: 0;
   background-color: var(--background);
   color: var(--foreground);
-  font-family: 'Roboto', sans-serif;
+  font-family: 'Montserrat', sans-serif;
   position: relative;
   min-height: 100vh;
   overscroll-behavior: none;
@@ -150,7 +150,7 @@ h3,
 h4,
 h5,
 h6 {
-  font-family: 'Roboto', sans-serif;
+  font-family: 'Montserrat', sans-serif;
 }
 
 /* Default card/button styles. Template theme.css imports come after this file

src/pages/HomePage.tsx

@@ -15,7 +15,7 @@ export default function HomePage() {
         <SectionErrorBoundary name="hero">
           <HeroOverlay
             tag="Expert Drum Mentorship"
-            title="Your Sound Echoing Into Eternity"
+            title="LEGACY"
             description="Master drums with personalized technique, theory, and passion under João Gabriel Biel—a 20-year professional who's helped hundreds build their musical legacy."
             primaryButton={{
               text: "Start Your Legacy",              href: "#contact"
@@ -23,7 +23,7 @@ export default function HomePage() {
             secondaryButton={{
               text: "View Academy",              href: "#about"
             }}
-            imageSrc="https://storage.googleapis.com/webild/users/user_3FVGMQmgQmMwA34LyIYK2adCPem/uploaded-1782152964172-fsm5cpfp.png"
+            imageSrc="https://storage.googleapis.com/webild/users/user_3FVGMQmgQmMwA34LyIYK2adCPem/uploaded-1782152964169-loub9rgz.jpg"
           />
         </SectionErrorBoundary>
       </div>
@@ -73,8 +73,8 @@ export default function HomePage() {
             description="Structured modules designed for hobbyists, professionals, and young musicians alike."
             items={[
               { title: "For Hobbyists", description: "Structured guidance to find your musical voice.", href: "#contact", imageSrc: "http://img.b2bpic.net/free-photo/man-recording-studio-music-production_1303-20390.jpg" },
-              { title: "Advanced Mastery", description: "High-intensity training for gigging pros.", href: "#contact", imageSrc: "http://img.b2bpic.net/free-photo/man-playing-drums-performance-local-event_23-2149188065.jpg" },
-              { title: "Youth Discovery", description: "Patient, engaging lessons for the young drummer.", href: "#contact", imageSrc: "http://img.b2bpic.net/free-photo/view-tiny-music-boxes-collection_23-2150545648.jpg" },
+              { title: "Advanced Mastery", description: "High-intensity training for gigging pros.", href: "#contact", imageSrc: "https://storage.googleapis.com/webild/users/user_3FVGMQmgQmMwA34LyIYK2adCPem/uploaded-1782152964171-3nrtfv81.jpg" },
+              { title: "Youth Discovery", description: "Patient, engaging lessons for the young drummer.", href: "#contact", imageSrc: "https://storage.googleapis.com/webild/users/user_3FVGMQmgQmMwA34LyIYK2adCPem/uploaded-1782218496599-97h6mns5.gif" },
               { title: "Theory Workshop", description: "Understand the logic behind the rhythm.", href: "#contact", imageSrc: "http://img.b2bpic.net/free-photo/drum-kit-dark-background-with-stage-lighting-copy-space_169016-14046.jpg" },
               { title: "Studio Recording", description: "Preparation for professional studio work.", href: "#contact", imageSrc: "http://img.b2bpic.net/free-photo/man-working-music-studio-with-instruments_52683-110324.jpg" },
               { title: "Stage Craft", description: "Dynamic movement and gear management.", href: "#contact", imageSrc: "http://img.b2bpic.net/free-photo/man-making-instruments-his-workshop_23-2149018573.jpg" },

src/pages/PricingPage.tsx

@@ -0,0 +1,31 @@
+import Button from "@/components/ui/Button";
+import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
+import TextAnimation from "@/components/ui/TextAnimation";
+import ImageOrVideo from "@/components/ui/ImageOrVideo";
+import AutoFillText from "@/components/ui/AutoFillText";
+import { Check } from "lucide-react";
+import GridOrCarousel from "@/components/ui/GridOrCarousel";
+import ScrollReveal from "@/components/ui/ScrollReveal";
+import { cls } from "@/lib/utils";
+
+export default function PricingPage() {
+  return (
+    <>
+      <div data-webild-section="HeroBrand"><section aria-label="Hero section" className="relative w-full h-svh overflow-hidden flex flex-col justify-end"><HeroBackgroundSlot /><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/drum-kit-close-up-drummer-playing-drums-studio_169016-54523.jpg" className="absolute inset-0 w-full h-full object-cover rounded-none" /><div className="absolute z-10 w-full h-[50svh] md:h-[75svh] left-0 bottom-0 backdrop-blur-xl mask-[linear-gradient(to_bottom,transparent,black_60%)]" aria-hidden="true" /><div className="relative z-10 w-content-width mx-auto pb-5"><div className="flex flex-col"><div className="w-full flex flex-col md:flex-row md:justify-between items-start md:items-end gap-3 md:gap-5"><TextAnimation text="Invista no seu talento e transforme sua paixão em um legado sonoro. Escolha o plano ideal para dominar a bateria com técnica, teoria e musicalidade." variant="fade-blur" gradientText={false} tag="p" className="w-full md:w-1/2 text-lg md:text-2xl text-balance font-normal text-white leading-snug" /><div className="w-full md:w-1/2 flex justify-start md:justify-end"><div className="flex flex-wrap gap-3"><Button text="Ver Planos" href="#planos" variant="primary" /><Button text="Falar com o Professor" href="/contato" variant="secondary" animationDelay={0.1} /></div></div></div><AutoFillText className="font-semibold text-white">Legacy Drum Academy</AutoFillText></div></div></section></div>
+      <div data-webild-section="PricingHighlightedCards"><section aria-label="Pricing section" className=""><div className="flex flex-col gap-8"><div className="flex flex-col items-center w-content-width mx-auto gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Investimento</p></div><TextAnimation text="Escolha o seu Legado Musical" variant="slide-up" gradientText={true} tag="h2" className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance" /><TextAnimation text="Planos desenvolvidos para transformar sua paixão pela bateria em técnica, teoria e musicalidade com João Gabriel Biel." variant="slide-up" gradientText={false} tag="p" className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="Falar com Professor" href="#contato" variant="primary" /><Button text="Saiba Mais" variant="secondary" animationDelay={0.1} /></div></div><ScrollReveal variant="fade"><GridOrCarousel><div key="Iniciante" className="flex flex-col h-full"><div className="px-5 py-2 text-base invisible">placeholder</div><div className="flex flex-col items-center gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 flex-1 card text-center rounded"><div className="flex flex-col gap-1"><span className="text-5xl md:text-6xl font-semibold">R$ 250/mês</span><span className="text-base font-medium">Iniciante</span></div><div className="h-px w-full bg-foreground/20" /><div className="flex flex-col gap-3 w-full"><div key="1 aula semanal de 50 min" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">1 aula semanal de 50 min</span></div>
+<div key="Fundamentos da técnica" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Fundamentos da técnica</span></div>
+<div key="Leitura rítmica básica" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Leitura rítmica básica</span></div>
+<div key="Acesso ao grupo de alunos" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Acesso ao grupo de alunos</span></div></div><div className="flex flex-col gap-3 w-full mt-auto"><Button text="Começar Agora" href="#matricula-iniciante" variant="primary" className="w-full" /></div></div></div>
+<div key="Avançado" className="flex flex-col h-full"><div className="px-5 py-2 text-base text-center primary-button rounded-t text-primary-cta-text">Mais Popular</div><div className="flex flex-col items-center gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 flex-1 card text-center rounded-t-none rounded-b"><div className="flex flex-col gap-1"><span className="text-5xl md:text-6xl font-semibold">R$ 400/mês</span><span className="text-base font-medium">Avançado</span></div><div className="h-px w-full bg-foreground/20" /><div className="flex flex-col gap-3 w-full"><div key="1 aula semanal de 60 min" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">1 aula semanal de 60 min</span></div>
+<div key="Técnicas avançadas" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Técnicas avançadas</span></div>
+<div key="Teoria musical aplicada" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Teoria musical aplicada</span></div>
+<div key="Gravação de performance" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Gravação de performance</span></div>
+<div key="Mentoria de carreira" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Mentoria de carreira</span></div></div><div className="flex flex-col gap-3 w-full mt-auto"><Button text="Elevar meu Nível" href="#matricula-avancado" variant="primary" className="w-full" /></div></div></div>
+<div key="Mentoria" className="flex flex-col h-full"><div className="px-5 py-2 text-base invisible">placeholder</div><div className="flex flex-col items-center gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 flex-1 card text-center rounded"><div className="flex flex-col gap-1"><span className="text-5xl md:text-6xl font-semibold">R$ 800/mês</span><span className="text-base font-medium">Mentoria</span></div><div className="h-px w-full bg-foreground/20" /><div className="flex flex-col gap-3 w-full"><div key="2 aulas semanais de 60 min" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">2 aulas semanais de 60 min</span></div>
+<div key="Análise de repertório" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Análise de repertório</span></div>
+<div key="Preparação para shows" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Preparação para shows</span></div>
+<div key="Acesso direto ao professor" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Acesso direto ao professor</span></div>
+<div key="Material exclusivo" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Material exclusivo</span></div></div><div className="flex flex-col gap-3 w-full mt-auto"><Button text="Garantir Vaga" href="#matricula-mentoria" variant="primary" className="w-full" /></div></div></div></GridOrCarousel></ScrollReveal></div></section></div>
+    </>
+  );
+}

src/routes.ts

@@ -6,4 +6,5 @@ export interface Route {
 
 export const routes: Route[] = [
   { path: '/', label: 'Home', pageFile: 'HomePage' },
+  { path: '/pricing', label: 'Pricing', pageFile: 'PricingPage' },
 ];