Bob AI: Populate src/pages/PricingPage.tsx (snippet builder, 2 sections)
This commit is contained in:
kudinDmitriyUp
@@ -1,104 +1,31 @@
|
||||
import React from 'react';
|
||||
import { routes } from '@/routes';
|
||||
import NavbarCentered from '@/components/ui/NavbarCentered';
|
||||
import HeroBrand from '@/components/sections/hero/HeroBrand';
|
||||
import PricingHighlightedCards from '@/components/sections/pricing/PricingHighlightedCards';
|
||||
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
||||
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 className="min-h-screen bg-background text-foreground flex flex-col">
|
||||
<NavbarCentered
|
||||
logo="Webild"
|
||||
navItems={routes.map((r) => ({ name: r.label, href: r.path }))}
|
||||
ctaButton={{ text: "Começar", href: "/contact" }}
|
||||
/>
|
||||
|
||||
<main className="flex-grow">
|
||||
<HeroBrand
|
||||
brand="Planos Transparentes"
|
||||
description="Escolha o plano ideal para o seu negócio. Sem taxas ocultas, cancele quando quiser e escale conforme a sua necessidade."
|
||||
primaryButton={{ text: "Ver Planos", href: "#planos" }}
|
||||
secondaryButton={{ text: "Falar com Vendas", href: "/contact" }}
|
||||
/>
|
||||
|
||||
<div id="planos">
|
||||
<PricingHighlightedCards
|
||||
tag="PREÇOS"
|
||||
title="Investimento que cabe no seu bolso"
|
||||
description="Nossos planos foram desenhados para escalar junto com a sua empresa. Comece pequeno e cresça sem limites."
|
||||
plans={[
|
||||
{
|
||||
tag: "Básico",
|
||||
price: "R$ 49/mês",
|
||||
description: "Ideal para freelancers e pequenos projetos que estão dando os primeiros passos.",
|
||||
features: [
|
||||
"1 Usuário",
|
||||
"Suporte por email",
|
||||
"Recursos essenciais",
|
||||
"Relatórios básicos"
|
||||
],
|
||||
buttonText: "Assinar Básico",
|
||||
buttonHref: "#"
|
||||
},
|
||||
{
|
||||
tag: "Profissional",
|
||||
price: "R$ 149/mês",
|
||||
description: "A escolha perfeita para equipes em crescimento que precisam de mais poder e agilidade.",
|
||||
features: [
|
||||
"Até 10 Usuários",
|
||||
"Suporte prioritário 24/7",
|
||||
"Recursos avançados",
|
||||
"Integrações premium",
|
||||
"API de acesso"
|
||||
],
|
||||
highlighted: true,
|
||||
buttonText: "Começar Teste Grátis",
|
||||
buttonHref: "#"
|
||||
},
|
||||
{
|
||||
tag: "Empresarial",
|
||||
price: "Personalizado",
|
||||
description: "Soluções sob medida para grandes operações com necessidades complexas e alta demanda.",
|
||||
features: [
|
||||
"Usuários ilimitados",
|
||||
"Gerente de conta dedicado",
|
||||
"SLA de 99.9% garantido",
|
||||
"Treinamento in-loco",
|
||||
"Auditoria de segurança"
|
||||
],
|
||||
buttonText: "Falar com Vendas",
|
||||
buttonHref: "/contact"
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<FooterSimple
|
||||
brand="Webild"
|
||||
copyright="© 2024 Webild. Todos os direitos reservados."
|
||||
columns={[
|
||||
{
|
||||
title: "Produto",
|
||||
items: [
|
||||
{ label: "Recursos", href: "#" },
|
||||
{ label: "Preços", href: "/pricing" }
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Empresa",
|
||||
items: [
|
||||
{ label: "Sobre", href: "/about" },
|
||||
{ label: "Contato", href: "/contact" }
|
||||
]
|
||||
}
|
||||
]}
|
||||
links={[
|
||||
{ label: "Termos de Uso", href: "#" },
|
||||
{ label: "Privacidade", href: "#" }
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<>
|
||||
<div data-webild-section="HeroBrand"><section aria-label="Hero section" className="relative w-full h-svh overflow-hidden flex flex-col justify-end mb-20"><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="py-20"><div className="flex flex-col gap-8 md:gap-10"><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 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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user