import { useState } from "react"
import { CheckCircle2, Quote, AlertCircle, TrendingDown, Calculator, Target, TrendingUp, Shield, Truck, Trophy, Sparkles, Building2, Users, Award, ArrowRight, ChevronDown } from "lucide-react"
const Button = ({ children, className = "", onClick, ...props }: any) => (
<button
onClick={onClick}
className={`inline-flex items-center justify-center rounded-lg bg-orange-500 text-white hover:bg-orange-600 active:bg-orange-700 transition-colors ${className}`}
{...props}
>
{children}
</button>
)
const Card = ({ children, className = "", ...props }: any) => (
<div
className={`rounded-lg border border-gray-200 bg-white shadow-sm ${className}`}
{...props}
>
{children}
</div>
)
const Accordion = ({ children, type = "single", ...props }: any) => {
return <div className="space-y-4" {...props}>{children}</div>
}
const AccordionItem = ({ children, value, className = "", ...props }: any) => {
const [isOpen, setIsOpen] = useState(false)
return (
<div className={`border rounded-lg ${className}`} {...props}>
{children && children.map((child: any) => {
if (child.type === AccordionTrigger) {
return <div key="trigger" onClick={() => setIsOpen(!isOpen)}>{child}</div>
}
if (child.type === AccordionContent) {
return isOpen ? <div key="content">{child}</div> : null
}
return child
})}
</div>
)
}
const AccordionTrigger = ({ children, className = "", ...props }: any) => (
<div className={`cursor-pointer p-4 ${className}`} {...props}>
<div className="flex items-center justify-between">
<span>{children}</span>
<ChevronDown className="h-5 w-5" />
</div>
</div>
)
const AccordionContent = ({ children, className = "", ...props }: any) => (
<div className={`px-4 pb-4 ${className}`} {...props}>
{children}
</div>
)
const CTAButton = ({ children, size = "lg", className = "", onClick }: any) => {
const handleClick = () => {
console.log('CTA clicked - Purchase flow would start')
onClick?.()
}
return (
<Button
className={`font-semibold w-full md:w-auto ${size === "lg" ? "px-8 md:px-12 py-5 md:py-6 text-lg md:text-xl" : "px-6 md:px-8 py-4 text-base md:text-lg"} ${className}`}
onClick={handleClick}
>
<span className="flex items-center justify-center gap-2">
{children}
<ArrowRight className="h-5 w-5 flex-shrink-0" />
</span>
</Button>
)
}
const HeroSection = () => {
return (
<section className="relative bg-gradient-to-br from-orange-50 via-white to-orange-50 py-12 md:py-20 lg:py-32">
<div className="container mx-auto px-4 md:px-6 max-w-7xl">
<div className="grid lg:grid-cols-2 gap-8 md:gap-12 items-center">
<div className="space-y-4 md:space-y-6">
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight">
Descubra o preço certo que faz o seu e-commerce{" "}
<span className="text-orange-500">lucrar de verdade</span>
</h1>
<p className="text-base md:text-lg lg:text-xl text-gray-600 leading-relaxed">
Aprenda a precificar seus produtos com clareza, segurança e estratégia — usando ferramentas práticas que mostram onde você ganha e onde está perdendo dinheiro.
</p>
<div className="space-y-2 md:space-y-3 pt-3 md:pt-4">
<div className="flex items-start gap-2 md:gap-3">
<CheckCircle2 className="h-5 w-5 md:h-6 md:w-6 text-orange-500 mt-0.5 flex-shrink-0" />
<p className="text-sm md:text-base lg:text-lg">
<strong>Aula completa</strong> com Gabriel Bochio, especialista em e-commerce e fundador da Velocity Digital
</p>
</div>
<div className="flex items-start gap-2 md:gap-3">
<CheckCircle2 className="h-5 w-5 md:h-6 md:w-6 text-orange-500 mt-0.5 flex-shrink-0" />
<p className="text-sm md:text-base lg:text-lg">
<strong>Inclui planilha inteligente</strong> + acesso ao Precificador da Academ.ia
</p>
</div>
<div className="flex items-start gap-2 md:gap-3">
<CheckCircle2 className="h-5 w-5 md:h-6 md:w-6 text-orange-500 mt-0.5 flex-shrink-0" />
<p className="text-sm md:text-base lg:text-lg">
Garanta agora seu acesso e <strong>nunca mais cobre "no achismo"</strong>
</p>
</div>
</div>
<div className="pt-4 md:pt-6">
<CTAButton>QUERO APRENDER A PRECIFICAR CERTO</CTAButton>
</div>
</div>
<div className="relative order-first lg:order-last">
<div className="rounded-lg md:rounded-xl overflow-hidden shadow-xl md:shadow-2xl bg-gray-200 aspect-video flex items-center justify-center">
<p className="text-gray-500">Imagem do Gabriel ensinando</p>
</div>
</div>
</div>
</div>
</section>
)
}
const TestimonialsSection = () => {
const testimonials = [
{
quote: "Eu achava que precificação era só multiplicar por 2. Depois dessa aula, entendi que estava queimando margem sem perceber.",
author: "Luiza Campos"
},
{
quote: "Só o cálculo do frete grátis que o Gabriel mostrou já pagou o valor da aula. Economizei mais de R$ 3 mil em um mês.",
author: "Felipe Rocha"
},
{
quote: "Eu saí da aula com uma planilha pronta e clareza sobre o que posso investir em tráfego sem perder lucro. É surreal.",
author: "Camila Torres"
}
]
return (
<section className="py-12 md:py-16 lg:py-20 bg-gray-50">
<div className="container mx-auto px-4 md:px-6 max-w-6xl">
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-center mb-8 md:mb-12">
O que quem já fez a aula está dizendo
</h2>
<div className="grid sm:grid-cols-2 md:grid-cols-3 gap-4 md:gap-6">
{testimonials.map((testimonial, index) => (
<Card key={index} className="p-4 md:p-6 hover:shadow-md transition-shadow">
<Quote className="h-6 w-6 md:h-8 md:w-8 text-orange-500 mb-3 md:mb-4" />
<p className="text-base md:text-lg mb-3 md:mb-4 leading-relaxed">
"{testimonial.quote}"
</p>
<p className="text-sm md:text-base font-semibold text-gray-600">
— {testimonial.author}
</p>
</Card>
))}
</div>
</div>
</section>
)
}
const PainPointSection = () => {
return (
<section className="py-12 md:py-16 lg:py-20">
<div className="container mx-auto px-4 md:px-6 max-w-5xl">
<div className="text-center space-y-4 md:space-y-6">
<h2 className="text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold text-red-600 leading-tight">
Você tem certeza de que está lucrando de verdade?
</h2>
<p className="text-xl sm:text-2xl md:text-3xl text-gray-700 font-medium leading-tight">
Ou está vendendo cada vez mais e vendo o caixa continuar no vermelho?
</p>
<div className="pt-6 md:pt-8 space-y-3 md:space-y-4 text-left max-w-3xl mx-auto">
<p className="text-base md:text-lg lg:text-xl leading-relaxed">
A maioria dos e-commerces não quebra por falta de venda, mas por <strong>precificação errada</strong>.
</p>
<div className="bg-red-50 border border-red-200 rounded-lg p-4 md:p-6 space-y-2 md:space-y-3">
<div className="flex items-start gap-2 md:gap-3">
<AlertCircle className="h-5 w-5 md:h-6 md:w-6 text-red-600 mt-0.5 flex-shrink-0" />
<p className="text-sm md:text-base lg:text-lg">
<strong>Descontos mal calculados</strong>
</p>
</div>
<div className="flex items-start gap-2 md:gap-3">
<AlertCircle className="h-5 w-5 md:h-6 md:w-6 text-red-600 mt-0.5 flex-shrink-0" />
<p className="text-sm md:text-base lg:text-lg">
<strong>Frete grátis sem margem</strong>
</p>
</div>
<div className="flex items-start gap-2 md:gap-3">
<AlertCircle className="h-5 w-5 md:h-6 md:w-6 text-red-600 mt-0.5 flex-shrink-0" />
<p className="text-sm md:text-base lg:text-lg">
<strong>Preços "copiados da concorrência"</strong>
</p>
</div>
<p className="text-base md:text-lg font-bold text-red-600 pt-1 md:pt-2">
São os maiores vilões do lucro.
</p>
</div>
</div>
</div>
</div>
</section>
)
}
const SolutionSection = () => {
const steps = [
{
icon: Calculator,
title: "Entenda todos os custos que impactam o seu preço",
description: "Mapeie cada elemento que influencia sua margem"
},
{
icon: Target,
title: "Descubra o markup ideal para o seu segmento",
description: "Aprenda a calcular o multiplicador certo"
},
{
icon: TrendingUp,
title: "Veja como ajustar preço, desconto e frete",
description: "Sem 'matar' sua margem no processo"
},
{
icon: Shield,
title: "Use o Precificador Inteligente da Academ.ia",
description: "Ferramenta que calcula tudo automaticamente"
},
{
icon: Truck,
title: "Monte uma política de frete sustentável",
description: "Frete grátis ou fixo sem perder dinheiro"
},
{
icon: Trophy,
title: "Aprenda o jogo de longo prazo no e-commerce",
description: "Estratégias para crescer com lucro real"
}
]
return (
<section className="py-12 md:py-16 lg:py-20 bg-orange-50">
<div className="container mx-auto px-4 md:px-6 max-w-6xl">
<div className="text-center space-y-3 md:space-y-4 mb-8 md:mb-12">
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold">
A boa notícia é que precificar do jeito certo não é complicado
</h2>
<p className="text-base md:text-lg lg:text-xl text-gray-600 max-w-3xl mx-auto">
Você só precisa de um método validado e ferramentas inteligentes que fazem o cálculo por você.
</p>
</div>
<div className="mb-8 md:mb-12 rounded-lg md:rounded-xl overflow-hidden shadow-lg bg-gray-200 aspect-video flex items-center justify-center">
<p className="text-gray-500">Imagem da planilha</p>
</div>
<h3 className="text-xl sm:text-2xl md:text-3xl font-bold text-center mb-6 md:mb-8">
O que você vai aprender:
</h3>
<div className="grid sm:grid-cols-2 gap-4 md:gap-6">
{steps.map((step, index) => {
const Icon = step.icon
return (
<Card key={index} className="p-4 md:p-6 hover:shadow-md transition-shadow">
<div className="flex gap-3 md:gap-4">
<div className="flex-shrink-0">
<div className="w-10 h-10 md:w-12 md:h-12 rounded-lg bg-orange-100 flex items-center justify-center">
<Icon className="h-5 w-5 md:h-6 md:w-6 text-orange-500" />
</div>
</div>
<div className="space-y-1 md:space-y-2">
<h4 className="font-bold text-base md:text-lg">{step.title}</h4>
<p className="text-sm md:text-base text-gray-600">{step.description}</p>
</div>
</div>
</Card>
)
})}
</div>
</div>
</section>
)
}
const OfferSection = () => {
const mainOffer = [
"Aula completa 'Precificação na Prática'",
"Planilha de Precificação Inteligente",
"Acesso ao Precificador da Academ.ia",
"Checklist e Templates prontos"
]
const bonuses = [
"Mini planilha 'Ticket de Frete Grátis por Região'",
"Guia 'Como comunicar ofertas de preço sem perder autoridade'"
]
return (
<section className="py-12 md:py-16 lg:py-20">
<div className="container mx-auto px-4 md:px-6 max-w-5xl">
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-center mb-8 md:mb-12">
Tudo que você vai receber
</h2>
<div className="grid md:grid-cols-2 gap-4 md:gap-6">
<Card className="p-6 md:p-8 space-y-3 md:space-y-4">
<h3 className="text-xl md:text-2xl font-bold mb-4 md:mb-6">Você recebe:</h3>
{mainOffer.map((item, index) => (
<div key={index} className="flex items-start gap-2 md:gap-3">
<CheckCircle2 className="h-5 w-5 md:h-6 md:w-6 text-orange-500 mt-0.5 flex-shrink-0" />
<p className="text-base md:text-lg">{item}</p>
</div>
))}
</Card>
<Card className="p-6 md:p-8 space-y-3 md:space-y-4 bg-orange-50 border-orange-200">
<div className="flex items-center gap-2 mb-4 md:mb-6">
<Sparkles className="h-5 w-5 md:h-6 md:w-6 text-orange-500 flex-shrink-0" />
<h3 className="text-xl md:text-2xl font-bold">Bônus exclusivo:</h3>
</div>
{bonuses.map((item, index) => (
<div key={index} className="flex items-start gap-2 md:gap-3">
<CheckCircle2 className="h-5 w-5 md:h-6 md:w-6 text-orange-500 mt-0.5 flex-shrink-0" />
<p className="text-base md:text-lg">{item}</p>
</div>
))}
</Card>
</div>
<div className="mt-8 md:mt-12 bg-orange-50 rounded-lg p-6 md:p-8">
<h3 className="text-xl md:text-2xl font-bold mb-4 md:mb-6 text-center">Esta oferta é para você se:</h3>
<div className="grid sm:grid-cols-2 gap-3 md:gap-4">
<div className="flex items-start gap-2 md:gap-3">
<CheckCircle2 className="h-5 w-5 md:h-6 md:w-6 text-orange-500 mt-0.5 flex-shrink-0" />
<p className="text-sm md:text-base">Vende online e quer entender onde perde lucro</p>
</div>
<div className="flex items-start gap-2 md:gap-3">
<CheckCircle2 className="h-5 w-5 md:h-6 md:w-6 text-orange-500 mt-0.5 flex-shrink-0" />
<p className="text-sm md:text-base">Está começando e quer precificar certo desde o início</p>
</div>
<div className="flex items-start gap-2 md:gap-3">
<CheckCircle2 className="h-5 w-5 md:h-6 md:w-6 text-orange-500 mt-0.5 flex-shrink-0" />
<p className="text-sm md:text-base">Já tem vendas, mas quer escalar com margem</p>
</div>
<div className="flex items-start gap-2 md:gap-3">
<CheckCircle2 className="h-5 w-5 md:h-6 md:w-6 text-orange-500 mt-0.5 flex-shrink-0" />
<p className="text-sm md:text-base">Quer profissionalizar o financeiro do seu e-commerce</p>
</div>
</div>
</div>
</div>
</section>
)
}
const PriceAnchoringSection = () => {
return (
<section className="py-12 md:py-16 lg:py-20 bg-gradient-to-br from-orange-50 to-orange-100">
<div className="container mx-auto px-4 md:px-6 max-w-4xl">
<div className="text-center space-y-6 md:space-y-8">
<div className="space-y-3 md:space-y-4">
<p className="text-base sm:text-lg md:text-xl lg:text-2xl text-gray-600">
Se você contratasse um consultor para montar sua precificação, pagaria facilmente
</p>
<div className="relative inline-block">
<p className="text-3xl sm:text-4xl md:text-5xl font-bold text-gray-400 line-through opacity-50">
R$ 1.500 a R$ 3.000
</p>
</div>
</div>
<div className="flex flex-col sm:flex-row items-center justify-center gap-2 md:gap-3 py-3 md:py-4">
<TrendingDown className="h-6 w-6 md:h-8 md:w-8 text-orange-500 flex-shrink-0" />
<p className="text-lg sm:text-xl md:text-2xl lg:text-3xl font-bold text-center">
Aqui, você tem o mesmo método, planilha e raciocínio estratégico...
</p>
</div>
<div className="bg-white rounded-xl md:rounded-2xl p-6 md:p-8 lg:p-12 shadow-2xl border-2 border-orange-500">
<p className="text-lg sm:text-xl md:text-2xl mb-3 md:mb-4 text-gray-600">
Acesso imediato por apenas
</p>
<div className="text-5xl sm:text-6xl md:text-7xl font-extrabold text-orange-500 mb-2">
R$ 97,00
</div>
<p className="text-base sm:text-lg md:text-xl text-gray-600 mb-4 md:mb-6">
Pagamento único | Acesso vitalício | Materiais inclusos
</p>
<p className="text-xl sm:text-2xl md:text-3xl font-bold mb-6 md:mb-8">
Por menos de 1% do preço de um consultor
</p>
<CTAButton>QUERO COMEÇAR AGORA</CTAButton>
</div>
</div>
</div>
</section>
)
}
const AuthoritySection = () => {
return (
<section className="py-12 md:py-16 lg:py-20">
<div className="container mx-auto px-4 md:px-6 max-w-6xl">
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-center mb-8 md:mb-12">
Quem é Gabriel Bochio
</h2>
<div className="grid lg:grid-cols-2 gap-8 md:gap-12 items-center">
<div className="flex justify-center">
<div className="w-64 h-64 sm:w-72 sm:h-72 md:w-80 md:h-80 rounded-xl md:rounded-2xl overflow-hidden shadow-xl md:shadow-2xl bg-gray-200 flex items-center justify-center">
<p className="text-gray-500">Foto Gabriel</p>
</div>
</div>
<div className="space-y-4 md:space-y-6">
<p className="text-lg md:text-xl lg:text-2xl leading-relaxed">
Gabriel Bochio é <strong>especialista em e-commerce</strong>, fundador da <strong>Velocity Digital</strong>, empresa que já ajudou mais de <span className="text-orange-500 font-bold">85 lojas virtuais</span> a venderem com lucro real.
</p>
<p className="text-base md:text-lg lg:text-xl text-gray-600 leading-relaxed">
Criador da <strong>Academ.ia</strong>, programa de capacitação prática para lojistas que querem crescer com dados e estratégia.
</p>
<div className="grid grid-cols-3 gap-3 md:gap-4 pt-4 md:pt-6">
<Card className="p-4 md:p-6 text-center hover:shadow-md transition-shadow">
<Users className="h-6 w-6 md:h-8 md:w-8 text-orange-500 mx-auto mb-2 md:mb-3" />
<div className="text-2xl md:text-3xl font-bold text-orange-500">85+</div>
<p className="text-xs md:text-sm text-gray-600 mt-1 md:mt-2">Lojas Atendidas</p>
</Card>
<Card className="p-4 md:p-6 text-center hover:shadow-md transition-shadow">
<Building2 className="h-6 w-6 md:h-8 md:w-8 text-orange-500 mx-auto mb-2 md:mb-3" />
<div className="text-lg md:text-2xl font-bold leading-tight">Velocity Digital</div>
<p className="text-xs md:text-sm text-gray-600 mt-1 md:mt-2">Fundador</p>
</Card>
<Card className="p-4 md:p-6 text-center hover:shadow-md transition-shadow">
<Award className="h-6 w-6 md:h-8 md:w-8 text-orange-500 mx-auto mb-2 md:mb-3" />
<div className="text-lg md:text-2xl font-bold leading-tight">Academ.ia</div>
<p className="text-xs md:text-sm text-gray-600 mt-1 md:mt-2">Criador</p>
</Card>
</div>
</div>
</div>
</div>
</section>
)
}
const FAQSection = () => {
const faqs = [
{
question: "Preciso ter loja online?",
answer: "Não necessariamente. O método funciona para qualquer negócio que precisa precificar produtos, seja loja virtual, física ou marketplace."
},
{
question: "A planilha funciona no celular?",
answer: "Sim, no Google Sheets. Você pode acessar e editar de qualquer dispositivo com internet."
},
{
question: "Serve para qualquer produto?",
answer: "Sim, é ajustável. A metodologia se aplica a qualquer categoria de produto, você só precisa adaptar os custos específicos do seu negócio."
},
{
question: "A aula é ao vivo?",
answer: "Não, é gravada. Você tem acesso imediato e pode assistir quantas vezes quiser, no seu próprio ritmo."
},
{
question: "Terei suporte?",
answer: "Sim, com a equipe da Academ.ia. Você terá suporte para tirar dúvidas sobre o conteúdo e as ferramentas."
},
{
question: "Mas será que eu vou entender mesmo?",
answer: "Sim. A aula é prática e guiada passo a passo. Não é necessário conhecimento avançado em finanças ou matemática."
},
{
question: "E se eu não tiver lucro no início?",
answer: "É normal, e você vai aprender a planejar o retorno. A aula mostra exatamente como estruturar seus preços para chegar no lucro desejado."
},
{
question: "Não tenho tempo agora.",
answer: "O acesso é vitalício, assista quando quiser. Você não perde nada e pode começar quando for o melhor momento para você."
}
]
return (
<section className="py-12 md:py-16 lg:py-20 bg-gray-50">
<div className="container mx-auto px-4 md:px-6 max-w-4xl">
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold text-center mb-8 md:mb-12">
Perguntas Frequentes
</h2>
<Accordion type="single">
{faqs.map((faq, index) => (
<AccordionItem key={index} value={`item-${index}`} className="px-4 md:px-6">
<AccordionTrigger className="text-left text-base md:text-lg font-semibold py-4">
{faq.question}
</AccordionTrigger>
<AccordionContent className="text-sm md:text-base text-gray-600 pt-2 pb-4">
{faq.answer}
</AccordionContent>
</AccordionItem>
))}
</Accordion>
</div>
</section>
)
}
const Footer = () => {
return (
<footer className="bg-gray-50 border-t">
<div className="container mx-auto px-4 md:px-6 max-w-6xl">
<div className="py-12 md:py-16 text-center space-y-6 md:space-y-8">
<h2 className="text-xl sm:text-2xl md:text-3xl font-bold">
Pronto para descobrir o preço certo?
</h2>
<p className="text-base md:text-lg text-gray-600 max-w-2xl mx-auto px-4">
Acesso imediato por R$ 97,00 | Inclui planilha + inteligência de precificação + bônus exclusivos
</p>
<CTAButton>QUERO APRENDER A PRECIFICAR CERTO</CTAButton>
</div>
<div className="border-t py-6 md:py-8">
<div className="grid sm:grid-cols-2 md:grid-cols-3 gap-6 md:gap-8 text-center md:text-left">
<div>
<h3 className="font-bold text-base md:text-lg mb-2 md:mb-3">Velocity Digital</h3>
<p className="text-xs md:text-sm text-gray-600">
São Paulo, Brasil
</p>
</div>
<div>
<h3 className="font-bold text-base md:text-lg mb-2 md:mb-3">Contato</h3>
<p className="text-xs md:text-sm text-gray-600 break-all">
contato@velocitydigital.com.br
</p>
</div>
<div className="sm:col-span-2 md:col-span-1">
<h3 className="font-bold text-base md:text-lg mb-2 md:mb-3">Legal</h3>
<div className="space-y-2">
<a href="#" className="block text-sm text-gray-600 hover:text-orange-500">
Política de Privacidade
</a>
<a href="#" className="block text-sm text-gray-600 hover:text-orange-500">
Termos de Uso
</a>
</div>
</div>
</div>
<div className="mt-6 md:mt-8 pt-6 md:pt-8 border-t text-center text-xs md:text-sm text-gray-600">
© 2025 Velocity Digital – Todos os direitos reservados
</div>
</div>
</div>
</footer>
)
}
export default function LandingPage() {
return (
<div className="min-h-screen bg-white">
<HeroSection />
<TestimonialsSection />
<PainPointSection />
<SolutionSection />
<OfferSection />
<PriceAnchoringSection />
<AuthoritySection />
<FAQSection />
<Footer />
</div>
)
}