bender/f5597ad6-c686-4a06-abaf-547e59eaacf7
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_11_1782156536968 into main #14

Merged
bender merged 3 commits from version_11_1782156536968 into main 2026-06-22 19:31:44 +00:00
Conversation 0 Commits 3 Files Changed 4 +37 -1
4 changed files with 37 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@@ -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>
);

4
src/components/Layout.tsx
View File

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

31
src/pages/PricingPage.tsx Normal file
View File

@@ -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>
</>
);
}

1
src/routes.ts
View File

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