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