"use client" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { CheckCircle, Shield, Star, Heart, Users, BookOpen, Unlock, Brain, UserCheck, GraduationCap, MicIcon as Microphone, HandHeart, Lock, Medal, FlameIcon as Fire, LockOpen, ArrowRight, ChevronDown, ChevronUp, BadgeCheck, Zap, } from "lucide-react" import { useState, useEffect, useRef } from "react" import Countdown from "react-countdown" export default function CodigoDeFugaLanding() { const [openFaq, setOpenFaq] = useState<number | null>(0) const [badgePulse, setBadgePulse] = useState(true) const [isSticky, setIsSticky] = useState(false) const ctaRef = useRef<HTMLDivElement>(null) const offerExpiryDate = Date.now() + 5 * 60 * 60 * 1000 + 32 * 60 * 1000 + 47 * 1000 useEffect(() => { // Badge pulse alternado const badgeTimer = setInterval(() => { setBadgePulse((prev) => !prev) }, 4000) // Sticky CTA observer const observer = new IntersectionObserver( ([entry]) => { setIsSticky(!entry.isIntersecting) }, { threshold: [0] } ) if (ctaRef.current) { observer.observe(ctaRef.current) } return () => { clearInterval(badgeTimer) if (ctaRef.current) { observer.unobserve(ctaRef.current) } } }, []) const toggleFaq = (index: number) => { setOpenFaq(openFaq === index ? null : index) } const faqData = [ { question: "Como recebo o material após a compra?", answer: "Imediatamente após a confirmação do pagamento, você receberá um e-mail com acesso à área de membros, onde poderá baixar o e-book em PDF e os materiais complementares. Não precisa esperar!", }, { question: "Preciso ter conhecimento em psicologia ou religião?", answer: "Não! O método foi desenvolvido para ser aplicado por qualquer pessoa, independente de formação ou crença religiosa. As técnicas são práticas e as reflexões espirituais são apresentadas de forma universal e acessível.", }, { question: "Quanto tempo leva para ver resultados?", answer: "A maioria dos alunos reporta melhoras significativas já na primeira semana de aplicação das técnicas. Em 30 dias, você já terá ferramentas para lidar com 90% das situações sociais que antes eram desafiadoras.", }, { question: "E se o método não funcionar para mim?", answer: "Oferecemos uma garantia incondicional de 7 dias. Se por qualquer motivo você não ficar satisfeito, basta nos enviar um e-mail e devolveremos 100% do seu investimento, sem questionamentos.", }, { question: "Posso comprar se moro fora do Brasil?", answer: "Sim! O produto é digital e pode ser acessado de qualquer lugar do mundo. O pagamento será convertido automaticamente para a moeda local através dos meios de pagamento internacionais.", }, ] const countdownRenderer = ({ hours, minutes, seconds, completed }: any) => { if (completed) { return <span className="text-red-600 font-bold">OFERTA EXPIRADA!</span> } else { return ( <div className="flex justify-center space-x-4 md:space-x-6"> <div className="text-center"> <div className="text-3xl md:text-4xl font-bold text-[#A52A2A] bg-white/10 py-3 px-4 rounded-lg"> {hours.toString().padStart(2, "0")} </div> <div className="text-sm opacity-80 text-white mt-2">Horas</div> </div> <div className="text-center"> <div className="text-3xl md:text-4xl font-bold text-[#A52A2A] bg-white/10 py-3 px-4 rounded-lg"> {minutes.toString().padStart(2, "0")} </div> <div className="text-sm opacity-80 text-white mt-2">Minutos</div> </div> <div className="text-center"> <div className="text-3xl md:text-4xl font-bold text-[#A52A2A] bg-white/10 py-3 px-4 rounded-lg"> {seconds.toString().padStart(2, "0")} </div> <div className="text-sm opacity-80 text-white mt-2">Segundos</div> </div> </div> ) } } return ( <div className="min-h-screen bg-[#0D0D0D] text-[#FAFAFA] overflow-x-hidden"> {/* Sticky CTA Bar */} {isSticky && ( <div className="fixed top-0 left-0 right-0 bg-gradient-to-r from-[#A52A2A] to-[#8B0000] py-3 z-50 shadow-lg"> <div className="container mx-auto px-4 flex justify-between items-center"> <div className="flex items-center"> <Zap className="text-yellow-300 mr-2 animate-pulse" /> <span className="font-bold"> <span className="text-yellow-300">ÚLTIMAS VAGAS:</span> Liberte sua voz por apenas R$37! </span> </div> <Button className="bg-gradient-to-br from-[#FFBF00] to-[#D4AF37] text-[#0D0D0D] font-bold px-4 py-2 rounded-full shadow-lg hover:scale-105 transition-transform" asChild > <a href="#oferta">QUERO DESTRAVAR AGORA</a> </Button> </div> </div> )} {/* Hero Section Redesenhada */} <section className="relative min-h-screen flex items-center overflow-hidden bg-gradient-to-br from-[#0D0D0D]/95 to-[#1E1E1E]/95 pt-16"> {/* Elementos decorativos */} <div className="absolute top-[15%] left-[5%] w-24 h-24 border-2 border-[#D4AF37] rounded-full opacity-20 z-0"></div> <div className="absolute bottom-[20%] right-[15%] w-36 h-36 border-3 border-[#A52A2A] rounded-full opacity-15 z-0"></div> <div className="absolute top-[40%] right-[30%] w-16 h-16 bg-[#FFBF00] rounded-full blur-[20px] opacity-10 z-0"></div> {/* Overlay com gradientes radiais */} <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_30%,rgba(212,175,55,0.1)_0%,transparent_40%),radial-gradient(circle_at_80%_70%,rgba(165,42,42,0.1)_0%,transparent_40%)] z-[1]"></div> <div className="container mx-auto px-4 relative z-10"> <div className="max-w-4xl mx-auto space-y-8"> {/* Badge */} <div className={`inline-block bg-gradient-to-r from-[#A52A2A] to-[#FFBF00] text-[#FAFAFA] px-6 py-3 rounded-full font-bold text-lg uppercase tracking-[1.5px] shadow-[0_5px_15px_rgba(165,42,42,0.4)] ${ badgePulse ? "animate-pulse" : "" }`} > <Fire className="inline w-5 h-5 mr-2" /> Método Comprovado </div> {/* Título Principal */} <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold leading-tight uppercase"> TRAVA AO FALAR?<br /> <span className="text-[#FFCC00] relative inline-block mt-2"> LIBERTE SUA VOZ COM O PODER DIVINO <div className="absolute bottom-1 left-0 w-full h-1.5 bg-gradient-to-r from-[#A52A2A] to-transparent -z-10"></div> </span> </h1> {/* Subtítulo */} <p className="text-xl md:text-2xl leading-relaxed max-w-3xl"> Descubra o <span className="font-bold text-[#FFCC00]">código espiritual</span> que já libertou mais de 15.000 pessoas da ansiedade social e da timidez paralisante — mesmo que você tenha acreditado por anos que "nasceu assim". </p> {/* Lista de Benefícios */} <div className="space-y-3 max-w-xl"> <div className="flex items-center"> <CheckCircle className="w-5 h-5 text-[#FFCC00] mr-3" /> <span>Destrave sua voz em situações sociais</span> </div> <div className="flex items-center"> <CheckCircle className="w-5 h-5 text-[#FFCC00] mr-3" /> <span>Supere a timidez com técnicas comprovadas</span> </div> <div className="flex items-center"> <CheckCircle className="w-5 h-5 text-[#FFCC00] mr-3" /> <span>Transforme sua comunicação em 30 dias</span> </div> </div> {/* CTA Principal */} <Button size="lg" className="relative bg-gradient-to-br from-[#FFBF00] to-[#D4AF37] text-[#0D0D0D] font-black text-base px-8 py-6 rounded-full shadow-[0_10px_30px_rgba(255,191,0,0.4)] hover:shadow-[0_15px_40px_rgba(255,191,0,0.6)] hover:-translate-y-1 transition-all duration-400 uppercase tracking-[1.5px] overflow-hidden group mt-6" > <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-500"></div> <LockOpen className="w-5 h-5 mr-2" /> DESTRAVAR MINHA COMUNICAÇÃO AGORA </Button> {/* Prova Social */} <div className="flex flex-wrap gap-6 pt-6"> <div className="flex items-center gap-3 bg-[#A52A2A]/20 px-4 py-2 rounded-full"> <UserCheck className="w-5 h-5 text-[#D4AF37]" /> <span className="font-medium">+15.347 pessoas transformadas</span> </div> <div className="flex items-center gap-3 bg-[#A52A2A]/20 px-4 py-2 rounded-full"> <Star className="w-5 h-5 text-[#D4AF37]" /> <span className="font-medium">4.9/5 (2.481 avaliações)</span> </div> </div> </div> </div> </section> {/* Problem Section - Redesenhada */} <section className="py-16 bg-[#0D0D0D] relative"> <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPgogIDxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiMwZDBkMGQiLz4KICA8cGF0aCBkPSJNMCAwIEwxMDAgMTAwIE0xMDAgMCBMMCAxMDAiIHN0cm9rZT0iI2E1MmEyYSIgc3Ryb2tlLXdpZHRoPSIwLjUiIG9wYWNpdHk9IjAuMSIvPgo8L3N2Zz4=')] opacity-10"></div> <div className="container mx-auto px-4 max-w-5xl"> <div className="space-y-10"> <div className="text-center"> <h2 className="text-3xl md:text-4xl font-bold relative inline-block"> Você se identifica com isso? <div className="absolute -bottom-2 left-0 w-full h-1 bg-[#A52A2A] rounded"></div> </h2> <p className="mt-4 text-lg text-[#FAFAFA]/80 max-w-2xl mx-auto"> Milhares de pessoas sofrem com esses problemas diariamente. Você não está sozinho! </p> </div> <div className="grid md:grid-cols-2 gap-6"> {[ { title: "Ansiedade Paralisante", description: "Coração acelerado, mãos suando e mente em branco quando precisa falar", icon: <Heart className="w-8 h-8 text-[#A52A2A]" /> }, { title: "Timidez Extrema", description: "Medo de ser julgado que impede você de se expressar livremente", icon: <Lock className="w-8 h-8 text-[#A52A2A]" /> }, { title: "Insegurança Social", description: "Sensação de que todos estão te observando e julgando", icon: <Users className="w-8 h-8 text-[#A52A2A]" /> }, { title: "Oportunidades Perdidas", description: "Promoções, relacionamentos e conexões que passaram por causa do medo", icon: <Medal className="w-8 h-8 text-[#A52A2A]" /> }, ].map((problem, index) => ( <Card key={index} className="bg-[#1A1A1A]/70 border border-[#A52A2A]/30 hover:border-[#A52A2A] transition-colors"> <CardContent className="p-6 flex items-start"> <div className="mr-4 mt-1">{problem.icon}</div> <div> <h3 className="text-xl font-bold text-white mb-2">{problem.title}</h3> <p className="text-[#FAFAFA]/80">{problem.description}</p> </div> </CardContent> </Card> ))} </div> <div className="text-center mt-10"> <p className="text-xl font-bold text-[#FFCC00] max-w-2xl mx-auto"> "Mas existe um caminho para transformar esse medo em força. Um método que já libertou milhares de pessoas!" </p> </div> </div> </div> </section> {/* Solution Section - Redesenhada */} <section className="py-20 bg-gradient-to-b from-[#0D0D0D] to-[#1A1A1A]"> <div className="container mx-auto px-4 max-w-6xl"> <div className="text-center space-y-16"> <div> <h2 className="text-3xl md:text-4xl font-bold relative inline-block"> O Método Que Vai Transformar Sua Vida Social <div className="absolute -bottom-2 left-0 w-full h-1 bg-[#A52A2A] rounded"></div> </h2> <p className="mt-4 text-lg text-[#FAFAFA]/80 max-w-2xl mx-auto"> Uma abordagem única que combina ciência e espiritualidade para resultados rápidos </p> </div> <div className="grid md:grid-cols-3 gap-8"> {[ { title: "Destravamento Imediato", description: "Técnicas práticas para aplicar no momento da ansiedade, neutralizando sintomas em segundos", icon: <Unlock className="w-10 h-10 text-[#FAFAFA]" />, color: "from-[#A52A2A] to-[#8B0000]" }, { title: "Reprogramação Mental", description: "Exercícios diários para eliminar crenças limitantes e padrões negativos", icon: <Brain className="w-10 h-10 text-[#FAFAFA]" />, color: "from-[#A52A2A] to-[#6B0000]" }, { title: "Conexão Espiritual", description: "Reflexões profundas que conectam seu crescimento com a força divina", icon: <Heart className="w-10 h-10 text-[#FAFAFA]" />, color: "from-[#A52A2A] to-[#4B0000]" }, ].map((solution, index) => ( <div key={index} className="group"> <div className="relative h-full"> <div className={`absolute inset-0 bg-gradient-to-br ${solution.color} rounded-xl transform group-hover:scale-105 transition-all duration-300`}></div> <Card className="relative bg-transparent border-none h-full"> <CardContent className="p-8 text-center flex flex-col items-center"> <div className="w-20 h-20 rounded-full bg-[#0D0D0D]/70 flex items-center justify-center mb-6 border-2 border-[#FAFAFA]/20 group-hover:border-[#FFCC00] transition-colors"> {solution.icon} </div> <h3 className="text-xl font-bold text-white mb-4">{solution.title}</h3> <p className="text-[#FAFAFA]/80 leading-relaxed">{solution.description}</p> </CardContent> </Card> </div> </div> ))} </div> <div className="mt-10"> <Button size="lg" className="bg-gradient-to-br from-[#FFBF00] to-[#D4AF37] text-[#0D0D0D] font-bold px-8 py-6 rounded-full shadow-lg hover:scale-105 transition-transform" > <LockOpen className="w-5 h-5 mr-2" /> QUERO EXPERIMENTAR O MÉTODO </Button> </div> </div> </div> </section> {/* Testimonials Section - Redesenhada */} <section className="py-20 bg-[#FAFAFA] text-[#0D0D0D]"> <div className="container mx-auto px-4 max-w-6xl"> <div className="text-center space-y-16"> <div> <h2 className="text-3xl md:text-4xl font-bold relative inline-block"> Histórias Reais de Transformação <div className="absolute -bottom-2 left-0 w-full h-1 bg-[#A52A2A] rounded"></div> </h2> <p className="mt-4 text-lg text-gray-700 max-w-2xl mx-auto"> Veja o que nossos alunos estão dizendo sobre suas jornadas de libertação </p> </div> <div className="grid md:grid-cols-3 gap-8"> {[ { name: "Carolina M., 24 anos", role: "Estudante de Direito", testimonial: "Antes do Código de Fuga, eu tremia só de pensar em falar com um desconhecido. Hoje, apresento projetos para plateias de 200 pessoas! Foi como renascer socialmente.", before: "Timidez incapacitante", after: "Palestrante confiante" }, { name: "Rafael T., 19 anos", role: "Universitário", testimonial: "Sempre fui o 'tímido' da turma. Após 3 semanas aplicando o método, fiz uma palestra na faculdade e recebi aplausos de pé. Meus pais nem acreditaram!", before: "Gagueira em situações sociais", after: "Comunicação fluida" }, { name: "Juliana S., 29 anos", role: "Designer", testimonial: "A parte espiritual do método fez toda diferença. Percebi que minha insegurança vinha de não me sentir digno. Hoje sei que Deus me equipou para todas as situações.", before: "Medo de julgamento", after: "Autoconfiança divina" }, ].map((testimonial, index) => ( <Card key={index} className="border-2 border-[#A52A2A] hover:shadow-xl transition-all duration-300 h-full flex flex-col"> <CardContent className="p-8 relative flex-grow flex flex-col"> <div className="absolute top-4 left-4 text-6xl text-[#A52A2A]/20 font-serif">"</div> <div className="relative z-10 mt-6 flex-grow"> <p className="italic text-lg mb-6 leading-relaxed">{testimonial.testimonial}</p> <div className="mt-auto"> <div className="flex items-center space-x-4"> <div className="w-14 h-14 bg-[#A52A2A] rounded-full flex items-center justify-center"> <span className="text-[#FAFAFA] font-bold">{testimonial.name.charAt(0)}</span> </div> <div> <p className="font-bold">{testimonial.name}</p> <p className="text-gray-600">{testimonial.role}</p> </div> </div> <div className="mt-4 pt-4 border-t border-gray-200"> <div className="flex justify-between text-sm"> <div className="text-red-600 font-medium">{testimonial.before}</div> <ArrowRight className="text-[#A52A2A]" /> <div className="text-green-600 font-medium">{testimonial.after}</div> </div> </div> </div> </div> </CardContent> </Card> ))} </div> </div> </div> </section> {/* Authority Section - Redesenhada */} <section className="py-20 bg-gradient-to-b from-[#1A1A1A] to-[#0D0D0D]"> <div className="container mx-auto px-4 max-w-6xl"> <div className="space-y-16"> <div className="text-center"> <h2 className="text-3xl md:text-4xl font-bold relative inline-block"> Conheça Eli Warren <div className="absolute -bottom-2 left-0 w-full h-1 bg-[#A52A2A] rounded"></div> </h2> <p className="mt-4 text-lg text-[#FAFAFA]/80 max-w-2xl mx-auto"> Especialista em Destravamento Social e Comunicação Consciente </p> </div> <div className="flex flex-col md:flex-row items-center gap-10 bg-[#1A1A1A]/70 p-8 rounded-xl border border-[#A52A2A]/30"> <div className="flex-shrink-0"> <div className="bg-gradient-to-br from-[#A52A2A] to-[#8B0000] w-64 h-64 rounded-full flex items-center justify-center text-white text-center p-4 border-4 border-[#D4AF37]/50"> <div> <div className="text-lg font-bold mb-2">Eli Warren</div> <div className="text-sm">Especialista em Comunicação Consciente</div> </div> </div> </div> <div className="space-y-6"> <div className="space-y-4"> <p> Com mais de <span className="text-[#FFCC00] font-bold">12 anos de experiência</span> em desenvolvimento pessoal e coaching, Eli Warren já transformou a vida de mais de <span className="text-[#FFCC00] font-bold">15.000 pessoas</span> através de seus métodos inovadores que unem psicologia moderna e espiritualidade prática. </p> <p> Formado em Psicologia com especialização em Terapia Cognitivo-Comportamental, Eli desenvolveu o "Código de Fuga com Deus Pai" após superar sua própria luta contra a ansiedade social severa, que quase o impediu de concluir seus estudos. </p> </div> <div className="grid grid-cols-2 gap-4"> {[ { icon: <GraduationCap className="w-5 h-5" />, text: "Mestre em Psicologia Social" }, { icon: <BookOpen className="w-5 h-5" />, text: "Autor de 3 best-sellers" }, { icon: <Microphone className="w-5 h-5" />, text: "Palestrante internacional" }, { icon: <BadgeCheck className="w-5 h-5" />, text: "Certificado internacional" }, ].map((item, index) => ( <div key={index} className="flex items-start gap-2"> <div className="text-[#FFCC00] mt-0.5">{item.icon}</div> <span className="text-sm">{item.text}</span> </div> ))} </div> <div className="pt-4"> <Button className="bg-gradient-to-br from-[#FFBF00] to-[#D4AF37] text-[#0D0D0D] font-bold" asChild > <a href="#oferta"> CONHECER O MÉTODO COMPLETO <ArrowRight className="ml-2 w-4 h-4" /> </a> </Button> </div> </div> </div> </div> </div> </section> {/* Offer Section - Redesenhada */} <section className="py-20 bg-[#0D0D0D]" id="oferta"> <div ref={ctaRef} className="container mx-auto px-4 max-w-4xl"> <div className="text-center space-y-12"> <div> <h2 className="text-3xl md:text-4xl font-bold relative inline-block"> Sua Liberdade Social Começa Hoje <div className="absolute -bottom-2 left-0 w-full h-1 bg-[#A52A2A] rounded"></div> </h2> <p className="mt-4 text-lg text-[#FAFAFA]/80 max-w-2xl mx-auto"> Oferta exclusiva por tempo limitado - Garanta sua transformação! </p> </div> <div className="relative"> <div className="absolute -inset-4 bg-gradient-to-r from-[#A52A2A] to-[#8B0000] rounded-2xl blur-lg opacity-50"></div> <Card className="bg-gradient-to-b from-[#1A1A1A] to-[#0D0D0D] border-2 border-[#A52A2A] relative z-10"> <CardContent className="p-8 md:p-12"> <div className="space-y-8"> <div className="inline-block bg-[#A52A2A] text-white px-4 py-2 rounded-full text-sm font-bold uppercase"> OFERTA RELÂMPAGO </div> <div className="flex flex-col items-center justify-center gap-4"> <div className="text-2xl font-bold text-white line-through opacity-70">De R$297</div> <div className="text-4xl md:text-5xl font-bold text-[#FFCC00]">Por apenas R$37</div> <div className="text-lg text-white">ou 12x de R$3,08</div> </div> <div className="bg-[#1A1A1A] p-4 rounded-lg border border-[#A52A2A]"> <div className="text-center font-bold text-white mb-4">OFERTA EXPIRA EM:</div> <Countdown date={offerExpiryDate} renderer={countdownRenderer} /> </div> <div className="space-y-4"> <div className="bg-[#1A1A1A]/50 p-4 rounded-lg border border-[#A52A2A]/30"> <h3 className="font-bold text-white mb-2 flex items-center"> <Zap className="text-yellow-400 mr-2" /> BÔNUS EXCLUSIVO </h3> <p className="text-white"> Guia de Orações para Destravar (valor R$97) - Coleção de orações poderosas para momentos de ansiedade social </p> </div> <div className="bg-[#1A1A1A]/50 p-4 rounded-lg border border-[#A52A2A]/30 flex items-start"> <Shield className="text-green-400 mr-3 flex-shrink-0 mt-1" /> <div> <h3 className="font-bold text-white mb-1">Garantia de 7 Dias</h3> <p className="text-white"> Se em 7 dias você não estiver satisfeito, devolvemos 100% do seu dinheiro sem perguntas. </p> </div> </div> </div> <Button size="lg" className="w-full bg-gradient-to-br from-[#FFBF00] to-[#D4AF37] text-[#0D0D0D] font-black text-base px-8 py-6 rounded-full shadow-[0_10px_30px_rgba(255,191,0,0.4)] hover:shadow-[0_15px_40px_rgba(255,191,0,0.6)] hover:-translate-y-1 transition-all duration-300 uppercase tracking-[1.5px] overflow-hidden group mt-4" > <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent -translate-x-full group-hover:translate-x-full transition-transform duration-500"></div> <LockOpen className="w-5 h-5 mr-2" /> SIM, QUERO DESTRAVAR MINHA VOZ! </Button> </div> </CardContent> </Card> </div> </div> </div> </section> {/* FAQ Section - Redesenhada */} <section className="py-20 bg-[#1A1A1A]"> <div className="container mx-auto px-4 max-w-4xl"> <div className="space-y-16"> <div className="text-center"> <h2 className="text-3xl md:text-4xl font-bold relative inline-block"> Perguntas Frequentes <div className="absolute -bottom-2 left-0 w-full h-1 bg-[#A52A2A] rounded"></div> </h2> <p className="mt-4 text-lg text-[#FAFAFA]/80 max-w-2xl mx-auto"> Tudo que você precisa saber antes de dar o primeiro passo </p> </div> <div className="space-y-4"> {faqData.map((faq, index) => ( <Card key={index} className="border border-[#A52A2A]/30 overflow-hidden bg-[#0D0D0D]"> <button className="w-full p-6 text-left font-semibold flex justify-between items-center hover:bg-[#1A1A1A] transition-colors text-white" onClick={() => toggleFaq(index)} > <span>{faq.question}</span> {openFaq === index ? ( <ChevronUp className="text-[#A52A2A]" /> ) : ( <ChevronDown className="text-[#A52A2A]" /> )} </button> {openFaq === index && ( <div className="px-6 pb-6 bg-[#0D0D0D] text-white"> <p className="leading-relaxed">{faq.answer}</p> </div> )} </Card> ))} </div> </div> </div> </section> {/* Closing CTA - Redesenhada */} <section className="py-20 bg-gradient-to-r from-[#A52A2A] to-[#8B0000] relative overflow-hidden"> <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPgogIDxyZWN0IHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9IiNhNTJhMmEiIGZpbGwtb3BhY2l0eT0iMC4xIi8+CiAgPHBhdGggZD0iTTAgMCBMMTAwIDEwMCBNMTAwIDAgTDAgMTAwIiBzdHJva2U9IiNmZmNjMDAiIHN0cm9rZS13aWR0aD0iMSIgb3BhY2l0eT0iMC4xIi8+Cjwvc3ZnPg==')]"></div> <div className="container mx-auto px-4 max-w-4xl text-center space-y-8 relative z-10"> <h2 className="text-3xl md:text-4xl font-bold text-white"> Liberte-se das Prisões Invisíveis da Timidez </h2> <p className="text-xl max-w-3xl mx-auto leading-relaxed text-white/90"> Chegou a hora de transformar a ansiedade em autoconfiança, o silêncio em expressão autêntica e a insegurança em força espiritual. O caminho para sua liberdade social está a um clique de distância. </p> <div className="flex flex-col sm:flex-row justify-center gap-4"> <Button size="lg" className="bg-[#FAFAFA] text-[#A52A2A] hover:bg-gray-100 font-bold text-xl px-12 py-6 rounded-full shadow-2xl transform hover:scale-105 transition-all duration-300 flex-1 max-w-md" > DESTRAVAR MINHA VIDA SOCIAL AGORA </Button> <Button size="lg" variant="outline" className="bg-transparent border-2 border-white text-white hover:bg-white/10 font-bold text-xl px-12 py-6 rounded-full shadow-2xl transform hover:scale-105 transition-all duration-300 flex-1 max-w-md" > FALAR COM UM CONSULTOR </Button> </div> <div className="pt-6 flex justify-center"> <div className="flex items-center bg-black/20 px-6 py-3 rounded-full"> <Shield className="w-6 h-6 text-green-400 mr-3" /> <span className="text-white font-medium">Garantia de 7 Dias | Compra 100% Segura</span> </div> </div> </div> </section> {/* Footer */} <footer className="py-12 bg-[#0D0D0D] border-t border-[#A52A2A]/30"> <div className="container mx-auto px-4 max-w-6xl"> <div className="text-center space-y-8"> <div className="flex justify-center flex-wrap gap-4"> {[ { icon: <Lock className="w-5 h-5" />, text: "Compra 100% Segura" }, { icon: <Shield className="w-5 h-5" />, text: "Dados Protegidos" }, { icon: <Medal className="w-5 h-5" />, text: "Garantia de Satisfação" }, ].map((item, index) => ( <div key={index} className="flex items-center gap-2 bg-[#A52A2A]/20 px-4 py-2 rounded"> {item.icon} <span>{item.text}</span> </div> ))} </div> <div className="flex justify-center flex-wrap gap-6 text-sm opacity-80"> <a href="#" className="hover:opacity-100 transition-opacity hover:text-[#FFCC00]"> Termos de Uso </a> <a href="#" className="hover:opacity-100 transition-opacity hover:text-[#FFCC00]"> Política de Privacidade </a> <a href="#" className="hover:opacity-100 transition-opacity hover:text-[#FFCC00]"> Contato </a> <a href="#" className="hover:opacity-100 transition-opacity hover:text-[#FFCC00]"> Perguntas Frequentes </a> </div> <p className="text-xs opacity-60 max-w-4xl mx-auto leading-relaxed"> © 2025 Código de Fuga com Deus Pai - Todos os direitos reservados. Este site não é afiliado ao Facebook ou a qualquer entidade do Facebook. Depois que você sair do Facebook, a responsabilidade não é deles e sim do nosso site. Fazemos todos os esforços para indicar claramente e mostrar todas as provas do produto e usamos resultados reais. Nós não vendemos o seu e-mail ou qualquer informação para terceiros. Jamais fazemos nenhum tipo de spam. </p> </div> </div> </footer> </div> ) }