Consolidando estilos

src/components/home/HomePage.tsx

@@ -4,54 +4,17 @@ import {
   BookOpen, ArrowRight, School, Users, Shield, 
   Sparkles, BookCheck, Play, CheckCircle, Star,
   GraduationCap, BarChart, Brain, X, Check,
-  Pencil,
-  Wand,
-  Mic,
-  Share2
+  Pencil, Wand, Mic, Share2
 } from 'lucide-react';
 import { Footer } from '@/components/ui/footer';
 import { PlanForSchools } from '@/components/ui/plan-for-schools';
 import { FAQ } from '@/components/ui/faq';
-
-// Components
-const FeatureCard = ({ icon, title, description }: { 
-  icon: React.ReactNode; 
-  title: string; 
-  description: string; 
-}) => (
-  <div className="p-6 rounded-xl border border-gray-200 hover:shadow-lg transition bg-white">
-    <div className="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center mb-4">
-      <div className="text-purple-600">{icon}</div>
-    </div>
-    <h3 className="text-xl font-semibold text-gray-900 mb-2">{title}</h3>
-    <p className="text-gray-600">{description}</p>
-  </div>
-);
-
-const StatCard = ({ number, label }: { number: string; label: string }) => (
-  <div className="p-6">
-    <div className="text-4xl font-bold mb-2">{number}</div>
-    <div className="text-purple-200">{label}</div>
-  </div>
-);
-
-const TestimonialCard = ({ quote, author, role, image }: {
-  quote: string;
-  author: string;
-  role: string;
-  image: string;
-}) => (
-  <div className="p-6 rounded-xl bg-white shadow-md">
-    <div className="flex items-center gap-4 mb-4">
-      <img src={image} alt={author} className="w-12 h-12 rounded-full" />
-      <div>
-        <div className="font-semibold text-gray-900">{author}</div>
-        <div className="text-sm text-gray-600">{role}</div>
-      </div>
-    </div>
-    <p className="text-gray-600 italic">"{quote}"</p>
-  </div>
-);
+import { StatCard } from '@/components/ui/stat-card';
+import { TestimonialCard } from '@/components/ui/testimonial-card';
+import { FeatureCard } from '@/components/ui/feature-card';
+import { ProcessStep } from '@/components/ui/process-step';
+import { InfoCard } from '@/components/ui/info-card';
+import { ComparisonSection } from '@/components/ui/comparison-section';
 
 const navigation = [
   { name: 'Início', href: '/' },
@@ -131,7 +94,7 @@ export function HomePage() {
       </nav>
 
       {/* Hero Section */}
-      <div className="pt-32 pb-20 px-4 sm:px-6 lg:px-8">
+      <div className="pt-32 pb-24 px-4 sm:px-6 lg:px-8">
         <div className="max-w-7xl mx-auto">
           <div className="grid lg:grid-cols-2 gap-12 items-center">
             <div>
@@ -201,7 +164,7 @@ export function HomePage() {
       </div>
 
       {/* Student Journey Section */}
-      <div className="py-20 bg-gradient-to-b from-purple-50 to-white">
+      <div className="py-24 bg-gradient-to-b from-purple-50 to-white">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
           <div className="text-center mb-16">
             <h2 className="text-3xl font-bold text-gray-900 mb-4">
@@ -212,136 +175,77 @@ export function HomePage() {
             </p>
           </div>
 
-          <div className="relative">
-            {/* Timeline Line */}
-            <div className="hidden md:block absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-purple-200" />
+          <div className="space-y-12">
+            <ProcessStep
+              number={1}
+              title="Escolha o tema da aventura"
+              description="Selecione entre diversos temas educativos alinhados com a BNCC e adequados à idade."
+            />
 
-            {/* Timeline Items */}
-            {[
-              {
-                icon: <Pencil className="w-6 h-6" />,
-                title: "Criação Personalizada",
-                description: "O aluno cria uma história baseada em seus interesses e características pessoais",
-                image: "/journey/create-story.png"
-              },
-              {
-                icon: <Wand className="w-6 h-6" />,
-                title: "Geração por IA",
-                description: "Nossa IA avançada gera uma história única e personalizada",
-                image: "/journey/ai-generation.png"
-              },
-              {
-                icon: <Mic className="w-6 h-6" />,
-                title: "Gravação de Áudio",
-                description: "O aluno grava sua voz lendo a história criada",
-                image: "/journey/audio-recording.png"
-              },
-              {
-                icon: <BarChart className="w-6 h-6" />,
-                title: "Análise de Leitura",
-                description: "A IA analisa a leitura e fornece feedback detalhado sobre o desempenho",
-                image: "/journey/reading-analysis.png"
-              },
-              {
-                icon: <Share2 className="w-6 h-6" />,
-                title: "Compartilhamento de Resultados",
-                description: "Dados e insights são compartilhados com pais, professores e escola",
-                image: "/journey/share-results.png"
-              }
-            ].map((item, index) => (
-              <div key={index} className={`mb-12 md:mb-24 relative ${
-                index % 2 === 0 ? 'md:text-right' : ''
-              }`}>
-                <div className={`flex items-center gap-8 ${
-                  index % 2 === 0 ? 'md:flex-row-reverse' : ''
-                }`}>
-                  {/* Content Side */}
-                  <div className="flex-1">
-                    <div className={`bg-white rounded-xl shadow-lg p-6 transform transition-all duration-300 hover:scale-105 ${
-                      index % 2 === 0 ? 'md:ml-auto' : ''
-                    }`}>
-                      <div className="flex items-center gap-4 mb-4">
-                        <div className="w-12 h-12 rounded-full bg-purple-100 flex items-center justify-center text-purple-600">
-                          {item.icon}
-                        </div>
-                        <h3 className="text-xl font-semibold text-gray-900">
-                          {item.title}
-                        </h3>
-                      </div>
-                      <p className="text-gray-600">
-                        {item.description}
-                      </p>
-                    </div>
-                  </div>
+            <ProcessStep
+              number={2}
+              title="Personalize os personagens"
+              description="Crie personagens que seu filho vai adorar, com características únicas e cativantes."
+            />
 
-                  {/* Timeline Marker */}
-                  <div className="hidden md:flex items-center justify-center">
-                    <div className="w-12 h-12 rounded-full bg-purple-600 text-white flex items-center justify-center font-bold">
-                      {index + 1}
-                    </div>
-                  </div>
+            <ProcessStep
+              number={3}
+              title="A IA cria a história mágica"
+              description="Nossa IA educacional gera uma história personalizada em segundos."
+            />
 
-                  {/* Image Side */}
-                  <div className="flex-1 hidden md:block">
-                    <img 
-                      src={item.image} 
-                      alt={item.title}
-                      className="rounded-xl shadow-lg w-full max-w-md mx-auto"
-                    />
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-
-          {/* Results Summary */}
-          <div className="mt-16 bg-white rounded-xl shadow-lg p-8">
-            <div className="text-center mb-8">
-              <h3 className="text-2xl font-bold text-gray-900 mb-2">
-                Resultados Comprovados
-              </h3>
-              <p className="text-gray-600">
-                Nossa abordagem inovadora tem transformado a experiência de leitura
-              </p>
-            </div>
-
-            <div className="grid md:grid-cols-4 gap-8">
-              {[
-                {
-                  number: "95%",
-                  label: "Melhoria na fluência de leitura"
-                },
-                {
-                  number: "87%",
-                  label: "Aumento no engajamento"
-                },
-                {
-                  number: "92%",
-                  label: "Satisfação dos pais"
-                },
-                {
-                  number: "3x",
-                  label: "Mais histórias lidas por aluno"
-                }
-              ].map((stat, index) => (
-                <div key={index} className="text-center">
-                  <div className="text-3xl font-bold text-purple-600 mb-2">
-                    {stat.number}
-                  </div>
-                  <p className="text-gray-600 text-sm">
-                    {stat.label}
-                  </p>
-                </div>
-              ))}
-            </div>
+            <ProcessStep
+              number={4}
+              title="A aventura educativa começa"
+              description="Seu filho mergulha em uma jornada mágica de aprendizado e diversão."
+            />
           </div>
         </div>
       </div>
 
-      {/* Features Grid */}
-      <div className="py-20 bg-white">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-16">
+      {/* Results Summary */}
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="mt-24 bg-white rounded-xl shadow-lg p-8">
+          <div className="text-center mb-8">
+            <h3 className="text-2xl font-bold text-gray-900 mb-2">
+              Resultados Comprovados
+            </h3>
+            <p className="text-gray-600">
+              Nossa abordagem inovadora tem transformado a experiência de leitura
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-4 gap-8">
+            <StatCard
+              icon={Star}
+              title="Fluência de Leitura"
+              value="95%"
+              description="Melhoria na fluência de leitura dos alunos"
+            />
+            <StatCard
+              icon={Sparkles}
+              title="Engajamento"
+              value="87%"
+              description="Aumento no engajamento com a leitura"
+            />
+            <StatCard
+              icon={CheckCircle}
+              title="Satisfação"
+              value="92%"
+              description="Satisfação dos pais com o progresso"
+            />
+            <StatCard
+              icon={BookOpen}
+              title="Leitura"
+              value="3x"
+              description="Mais histórias lidas por aluno"
+            />
+          </div>
+        </div>
+
+        {/* Features Grid */}
+        <div className="mt-24">
+          <div className="text-center mb-12">
             <h2 className="text-3xl font-bold text-gray-900 mb-4">
               Tecnologia e Educação em Harmonia
             </h2>
@@ -351,180 +255,152 @@ export function HomePage() {
           </div>
           
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
-            <FeatureCard 
-              icon={<Brain />}
+            <FeatureCard
+              icon={Brain}
               title="IA Adaptativa"
               description="Conteúdo que se adapta ao ritmo e estilo de aprendizagem de cada aluno"
             />
-            <FeatureCard 
-              icon={<BookOpen />}
+            <FeatureCard
+              icon={BookOpen}
               title="Histórias Interativas"
               description="Narrativas envolventes que tornam o aprendizado mais divertido e eficaz"
             />
-            <FeatureCard 
-              icon={<BarChart />}
+            <FeatureCard
+              icon={BarChart}
               title="Analytics Avançado"
               description="Insights detalhados sobre o progresso e engajamento dos alunos"
             />
-            <FeatureCard 
-              icon={<Users />}
+            <FeatureCard
+              icon={Users}
               title="Colaboração"
               description="Ferramentas para professores trabalharem juntos e compartilharem recursos"
             />
-            <FeatureCard 
-              icon={<Shield />}
+            <FeatureCard
+              icon={Shield}
               title="Ambiente Seguro"
               description="Proteção de dados e conteúdo adequado para todas as idades"
             />
-            <FeatureCard 
-              icon={<GraduationCap />}
+            <FeatureCard
+              icon={GraduationCap}
               title="Suporte Pedagógico"
               description="Recursos e orientações para maximizar o potencial de aprendizagem"
             />
           </div>
         </div>
-      </div>
 
-      {/* Before & After Section */}
-      <div className="py-20 bg-white">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="text-center mb-16">
-            <h2 className="text-3xl font-bold text-gray-900 mb-4">
-              Transforme a Experiência de Aprendizagem
-            </h2>
-            <p className="text-gray-600 max-w-2xl mx-auto">
-              Veja como o Histórias Mágicas revoluciona o ensino
-            </p>
-          </div>
-
-          <div className="grid md:grid-cols-2 gap-16">
-            {/* Before */}
-            <div className="rounded-2xl bg-red-50 p-8">
-              <div className="flex items-center gap-3 mb-6">
-                <div className="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center">
-                  <X className="w-6 h-6 text-red-600" />
-                </div>
-                <h3 className="text-2xl font-semibold text-gray-900">Antes</h3>
-              </div>
-              <ul className="space-y-4">
-                {[
-                  'Conteúdo padronizado que não atende necessidades individuais',
-                  'Alunos desmotivados com material didático tradicional',
-                  'Professores sobrecarregados com correções manuais',
-                  'Dificuldade em acompanhar o progresso individual',
-                  'Baixo engajamento nas atividades de leitura e escrita',
-                  'Falta de dados para tomada de decisão pedagógica'
-                ].map((item, index) => (
-                  <li key={index} className="flex items-start gap-3">
-                    <div className="mt-1">
-                      <X className="w-5 h-5 text-red-600" />
-                    </div>
-                    <span className="text-gray-600">{item}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-
-            {/* After */}
-            <div className="rounded-2xl bg-green-50 p-8">
-              <div className="flex items-center gap-3 mb-6">
-                <div className="w-12 h-12 rounded-full bg-green-100 flex items-center justify-center">
-                  <Check className="w-6 h-6 text-green-600" />
-                </div>
-                <h3 className="text-2xl font-semibold text-gray-900">Depois</h3>
-              </div>
-              <ul className="space-y-4">
-                {[
-                  'Histórias adaptativas que evoluem com cada aluno',
-                  'Estudantes engajados com conteúdo personalizado',
-                  'Correção automática com feedback instantâneo',
-                  'Dashboard em tempo real do progresso individual',
-                  'Aumento de 300% no engajamento com leitura',
-                  'Insights precisos para intervenções pedagógicas'
-                ].map((item, index) => (
-                  <li key={index} className="flex items-start gap-3">
-                    <div className="mt-1">
-                      <Check className="w-5 h-5 text-green-600" />
-                    </div>
-                    <span className="text-gray-600">{item}</span>
-                  </li>
-                ))}
-              </ul>
-            </div>
-
-            {/* Results Preview */}
-            <div className="md:col-span-2 mt-8">
-              <div className="bg-white rounded-xl shadow-lg p-8">
-                <div className="grid md:grid-cols-3 gap-8 text-center">
-                  <div>
-                    <div className="text-4xl font-bold text-purple-600 mb-2">300%</div>
-                    <p className="text-gray-600">Aumento no engajamento</p>
-                  </div>
-                  <div>
-                    <div className="text-4xl font-bold text-purple-600 mb-2">85%</div>
-                    <p className="text-gray-600">Melhoria no desempenho</p>
-                  </div>
-                  <div>
-                    <div className="text-4xl font-bold text-purple-600 mb-2">50%</div>
-                    <p className="text-gray-600">Redução da carga dos professores</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
+        {/* Before & After Section */}
+        <div className="mt-24">
+          <ComparisonSection
+            title="Compare a Transformação"
+            items={[
+              {
+                title: "Personalização",
+                without: [
+                  "Conteúdo padronizado que não atende necessidades individuais",
+                  "Material didático tradicional e pouco envolvente",
+                  "Mesma abordagem para todos os alunos"
+                ],
+                with: [
+                  "Histórias adaptativas que evoluem com cada aluno",
+                  "Conteúdo personalizado e envolvente",
+                  "Experiência única para cada estudante"
+                ]
+              },
+              {
+                title: "Engajamento",
+                without: [
+                  "Alunos desmotivados com atividades repetitivas",
+                  "Baixo interesse nas atividades de leitura",
+                  "Dificuldade em manter a atenção dos alunos"
+                ],
+                with: [
+                  "Estudantes engajados e participativos",
+                  "Aumento de 300% no engajamento com leitura",
+                  "Alunos ansiosos pela próxima atividade"
+                ]
+              },
+              {
+                title: "Acompanhamento",
+                without: [
+                  "Professores sobrecarregados com correções manuais",
+                  "Dificuldade em acompanhar o progresso individual",
+                  "Falta de dados para decisões pedagógicas"
+                ],
+                with: [
+                  "Correção automática com feedback instantâneo",
+                  "Dashboard em tempo real do progresso individual",
+                  "Insights precisos para intervenções pedagógicas"
+                ]
+              }
+            ]}
+          />
         </div>
-      </div>
 
-      {/* Pricing */}
-      <div className="py-20 bg-gray-50">
-        <PlanForSchools />
-      </div>
+        {/* Testimonials */}
+        <div className="mt-24 grid md:grid-cols-2 gap-8">
+          <TestimonialCard
+            quote="A transformação que vimos em nossa escola foi incrível. Alunos que mal conseguiam juntar letras agora estão lendo com fluência e, mais importante, com prazer."
+            author="Maria Silva"
+            role="Diretora Pedagógica"
+          />
+          <TestimonialCard
+            quote="Como professora há 15 anos, nunca vi um método tão eficaz e envolvente. A plataforma me ajuda a personalizar o ensino para cada aluno."
+            author="Ana Paula Santos"
+            role="Professora"
+          />
+        </div>
 
-      {/* FAQ */}
-      <FAQ
-        title="Dúvidas Frequentes"
-        description="Tire suas dúvidas sobre como o Histórias Mágicas pode transformar sua escola"
-        items={[
-          {
-            question: "Como o Histórias Mágicas se integra ao currículo escolar?",
-            answer: "Nossa plataforma foi desenvolvida em alinhamento com a BNCC e pode ser facilmente integrada ao planejamento pedagógico. Oferecemos suporte personalizado para adaptar as atividades ao programa de ensino e objetivos específicos de cada escola."
-          },
-          {
-            question: "Qual é o processo de implementação na escola?",
-            answer: "Oferecemos um processo completo de onboarding que inclui treinamento para professores, suporte técnico, e consultoria pedagógica. Nossa equipe acompanha cada etapa para garantir uma transição suave e eficiente."
-          },
-          {
-            question: "Como funciona o acompanhamento do progresso dos alunos?",
-            answer: "Através de dashboards intuitivos, professores e coordenadores têm acesso a análises detalhadas do progresso individual e coletivo, incluindo métricas de fluência, compreensão e engajamento, permitindo intervenções pedagógicas precisas."
-          },
-          {
-            question: "Quais são os requisitos técnicos necessários?",
-            answer: "A plataforma é acessível via navegador web em qualquer dispositivo (computadores, tablets, smartphones). Recomendamos uma conexão estável à internet e fones de ouvido para as atividades de leitura."
-          },
-          {
-            question: "Como é feita a proteção dos dados dos alunos?",
-            answer: "Seguimos rigorosos protocolos de segurança e privacidade, em conformidade com a LGPD. Todos os dados são criptografados e armazenados de forma segura, com acesso restrito e controlado."
-          },
-          {
-            question: "Vocês oferecem suporte contínuo?",
-            answer: "Sim, disponibilizamos suporte técnico e pedagógico contínuo através de diversos canais (chat, email, telefone). Também realizamos atualizações regulares e workshops para manter a equipe escolar sempre atualizada."
-          }
-        ]}
-      />
+        {/* Pricing Section */}
+        <div className="mt-24">
+          <PlanForSchools />
+        </div>
 
-      {/* Final CTA */}
-      <div className="py-20">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="bg-gradient-to-r from-purple-600 to-indigo-600 rounded-2xl p-8 md:p-16 text-center text-white">
-            <h2 className="text-3xl md:text-4xl font-bold mb-4">
+        {/* FAQ Section */}
+        <div className="mt-24">
+          <FAQ
+            title="Dúvidas Frequentes"
+            description="Tire suas dúvidas sobre a implementação do Histórias Mágicas em sua escola"
+            items={[
+              {
+                question: "Como o Histórias Mágicas se integra ao currículo escolar?",
+                answer: "Nossa plataforma foi desenvolvida para complementar e enriquecer o currículo existente. Oferecemos conteúdo alinhado à BNCC e ferramentas de personalização que permitem adaptar as atividades aos objetivos pedagógicos específicos de cada escola."
+              },
+              {
+                question: "Quanto tempo leva para implementar a plataforma?",
+                answer: "O processo de implementação é personalizado e gradual, levando em média 2-3 semanas. Iniciamos com uma fase piloto, oferecemos treinamento completo para a equipe e fornecemos suporte contínuo durante todo o processo."
+              },
+              {
+                question: "Como posso acompanhar o progresso dos alunos?",
+                answer: "Disponibilizamos um dashboard intuitivo com métricas em tempo real, relatórios detalhados e insights sobre o desempenho individual e coletivo. Professores e coordenadores podem monitorar o progresso, identificar áreas de melhoria e personalizar intervenções."
+              },
+              {
+                question: "Quais são os requisitos técnicos?",
+                answer: "A plataforma é acessível via navegador web em qualquer dispositivo (computadores, tablets, smartphones). Recomendamos uma conexão estável à internet e o uso de fones de ouvido para melhor experiência nas atividades de áudio."
+              },
+              {
+                question: "Como vocês protegem os dados dos alunos?",
+                answer: "Seguimos rigorosos protocolos de segurança em conformidade com a LGPD. Todos os dados são criptografados, o acesso é controlado e realizamos auditorias regulares de segurança."
+              },
+              {
+                question: "Que tipo de suporte vocês oferecem?",
+                answer: "Oferecemos suporte técnico e pedagógico através de múltiplos canais (chat, email, telefone), além de atualizações regulares da plataforma e workshops para capacitação contínua da equipe escolar."
+              }
+            ]}
+          />
+        </div>
+
+        {/* Final CTA */}
+        <div className="mt-24 pb-24">
+          <div className="bg-purple-600 rounded-3xl px-8 py-16 text-center">
+            <h2 className="text-4xl font-bold text-white mb-4">
               Pronto para Transformar sua Escola?
             </h2>
-            <p className="text-lg mb-8 max-w-2xl mx-auto">
+            <p className="text-white/90 mb-8 max-w-2xl mx-auto text-lg">
               Junte-se a mais de 1000 escolas que já estão revolucionando a educação
             </p>
-            <button 
-              onClick={handleSchoolRegister}
-              className="bg-white text-purple-600 px-8 py-4 rounded-xl hover:bg-purple-50 transition text-lg font-semibold"
+            <button
+              onClick={() => navigate('/register')}
+              className="bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-purple-50 transition"
             >
               Começar Gratuitamente
             </button>
@@ -536,4 +412,6 @@ export function HomePage() {
       <Footer />
     </div>
   );
-} 
+}
+
+export default HomePage; 

src/components/ui/comparison-section.tsx

@@ -0,0 +1,81 @@
+import React from 'react';
+import { X, CheckCircle } from 'lucide-react';
+
+interface ComparisonItem {
+  title: string;
+  without: string[];
+  with: string[];
+}
+
+interface ComparisonSectionProps {
+  title: string;
+  items: ComparisonItem[];
+}
+
+export function ComparisonSection({ title, items }: ComparisonSectionProps) {
+  return (
+    <section className="px-4 py-24 bg-white">
+      <div className="mx-auto max-w-7xl">
+        <h2 className="text-4xl font-bold text-center text-gray-900 mb-16">
+          {title}
+        </h2>
+
+        <div className="grid md:grid-cols-2 gap-8">
+          {/* Sem Histórias Mágicas */}
+          <div className="p-8 bg-gray-50 rounded-xl border border-gray-200">
+            <div className="flex items-center gap-3 mb-8">
+              <div className="w-12 h-12 bg-red-100 rounded-full flex items-center justify-center">
+                <X className="h-6 w-6 text-red-500" />
+              </div>
+              <h3 className="text-xl font-bold text-gray-900">
+                Sem Histórias Mágicas
+              </h3>
+            </div>
+
+            {items.map((category, index) => (
+              <div key={index} className="mb-8 last:mb-0">
+                <h4 className="font-bold text-gray-900 mb-4">{category.title}</h4>
+                <ul className="space-y-3">
+                  {category.without.map((item, idx) => (
+                    <li key={idx} className="flex items-start gap-2">
+                      <X className="h-5 w-5 text-red-500 flex-shrink-0 mt-1" />
+                      <span className="text-gray-600">{item}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+
+          {/* Com Histórias Mágicas */}
+          <div className="p-8 bg-gradient-to-br from-purple-50 to-blue-50 rounded-xl 
+            border-2 border-purple-200 transform hover:scale-[1.02] transition-transform">
+            <div className="flex items-center gap-3 mb-8">
+              <div className="w-12 h-12 bg-gradient-to-r from-purple-600 to-blue-500 
+                rounded-full flex items-center justify-center">
+                <CheckCircle className="h-6 w-6 text-white" />
+              </div>
+              <h3 className="text-xl font-bold text-gray-900">
+                Com Histórias Mágicas
+              </h3>
+            </div>
+
+            {items.map((category, index) => (
+              <div key={index} className="mb-8 last:mb-0">
+                <h4 className="font-bold text-gray-900 mb-4">{category.title}</h4>
+                <ul className="space-y-3">
+                  {category.with.map((item, idx) => (
+                    <li key={idx} className="flex items-start gap-2">
+                      <CheckCircle className="h-5 w-5 text-green-500 flex-shrink-0 mt-1" />
+                      <span className="text-gray-600">{item}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+} 

src/components/ui/feature-card.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface FeatureCardProps {
+  icon: LucideIcon;
+  title: string;
+  items?: string[];
+  description?: string;
+  borderColor?: string;
+  iconColor?: string;
+}
+
+export function FeatureCard({
+  icon: Icon,
+  title,
+  items,
+  description,
+  borderColor = 'border-purple-200',
+  iconColor = 'text-purple-600'
+}: FeatureCardProps) {
+  return (
+    <div className="p-6 rounded-xl border border-gray-200 hover:shadow-lg transition-all duration-300 bg-white">
+      <div className="w-12 h-12 rounded-lg bg-purple-100 flex items-center justify-center mb-4">
+        <Icon className={`w-6 h-6 ${iconColor}`} />
+      </div>
+      <h3 className="text-xl font-semibold text-gray-900 mb-2">{title}</h3>
+      {description && (
+        <p className="text-gray-600 mb-4">{description}</p>
+      )}
+      {items && items.length > 0 && (
+        <ul className="space-y-2">
+          {items.map((item, index) => (
+            <li key={index} className="text-gray-600">
+              {item}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+} 

src/components/ui/info-card.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface InfoCardProps {
+  title: string;
+  description?: string;
+  result?: string;
+  icon?: LucideIcon;
+  items?: string[];
+  bgColor?: string;
+  titleColor?: string;
+  textColor?: string;
+  resultColor?: string;
+  iconColor?: string;
+}
+
+export function InfoCard({
+  title,
+  description,
+  result,
+  icon: Icon,
+  items,
+  bgColor = 'bg-white',
+  titleColor = 'text-gray-900',
+  textColor = 'text-gray-600',
+  resultColor = 'text-purple-600',
+  iconColor = 'text-purple-600',
+}: InfoCardProps) {
+  return (
+    <div className={`${bgColor} p-8 rounded-2xl shadow-sm`}>
+      {/* Icon */}
+      {Icon && (
+        <div className="mb-6">
+          <div className="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center">
+            <Icon className={`w-8 h-8 ${iconColor}`} />
+          </div>
+        </div>
+      )}
+
+      {/* Title */}
+      <h3 className={`text-2xl font-bold ${titleColor} mb-3`}>{title}</h3>
+
+      {/* Description */}
+      {description && (
+        <p className={`${textColor} text-lg mb-6`}>{description}</p>
+      )}
+
+      {/* Result */}
+      {result && (
+        <div className="bg-purple-50 rounded-xl p-4">
+          <p className={`${resultColor} text-lg font-medium`}>
+            Resultado: {result}
+          </p>
+        </div>
+      )}
+
+      {/* Items List */}
+      {items && items.length > 0 && (
+        <ul className={`list-disc pl-6 space-y-2 mt-6 ${textColor}`}>
+          {items.map((item, index) => (
+            <li key={index}>{item}</li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+} 

src/components/ui/process-step.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+interface ProcessStepProps {
+  number: number;
+  title: string;
+  description: string;
+}
+
+export function ProcessStep({
+  number,
+  title,
+  description,
+}: ProcessStepProps) {
+  return (
+    <div className="flex items-start gap-6">
+      {/* Número */}
+      <div className="flex-shrink-0">
+        <div className="w-14 h-14 rounded-full bg-purple-600 flex items-center justify-center text-white text-2xl font-bold">
+          {number}
+        </div>
+      </div>
+
+      {/* Conteúdo */}
+      <div className="flex-1">
+        <h3 className="text-2xl font-bold text-gray-900 mb-3">
+          {title}
+        </h3>
+        <p className="text-lg text-gray-600">
+          {description}
+        </p>
+      </div>
+    </div>
+  );
+} 

src/components/ui/stat-card.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { LucideIcon } from 'lucide-react';
+
+interface StatCardProps {
+  icon: LucideIcon;
+  title: string;
+  value: string;
+  description: string;
+  valueColor?: string;
+  iconBgColor?: string;
+  iconColor?: string;
+}
+
+export function StatCard({
+  icon: Icon,
+  title,
+  value,
+  description,
+  valueColor = 'text-purple-600',
+  iconBgColor = 'bg-purple-600',
+  iconColor = 'text-white',
+}: StatCardProps) {
+  return (
+    <div className="bg-white shadow-lg rounded-xl p-6">
+      <div className={`flex items-center justify-center h-12 w-12 rounded-md ${iconBgColor} ${iconColor} mb-4`}>
+        <Icon className="h-6 w-6" />
+      </div>
+      <h3 className="text-lg font-bold text-gray-900">{title}</h3>
+      <p className={`mt-2 text-4xl font-bold ${valueColor}`}>{value}</p>
+      <p className="mt-2 text-gray-600">{description}</p>
+    </div>
+  );
+} 

src/components/ui/testimonial-card.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import { Heart } from 'lucide-react';
+
+interface TestimonialCardProps {
+  quote: string;
+  author: string;
+  role: string;
+  image?: string;
+  magicMoment?: string;
+  result?: string;
+  borderColor?: string;
+  quoteColor?: string;
+  authorColor?: string;
+}
+
+export function TestimonialCard({
+  quote,
+  author,
+  role,
+  image,
+  magicMoment,
+  result,
+  borderColor = 'border-purple-200',
+  quoteColor = 'text-gray-600',
+  authorColor = 'text-gray-900'
+}: TestimonialCardProps) {
+  return (
+    <div className="bg-gradient-to-br from-purple-50 to-blue-50 p-6 rounded-xl shadow-sm">
+      {image && (
+        <div className="relative mb-8">
+          <img
+            src={image}
+            alt={`Foto de ${author}`}
+            className="w-full h-48 object-cover rounded-lg"
+          />
+          <div className="absolute -bottom-4 -right-4 bg-white p-2 rounded-full shadow-lg">
+            <Heart className="h-6 w-6 text-red-500" />
+          </div>
+        </div>
+      )}
+      
+      <p className={`${quoteColor} mb-4 italic`}>"{quote}"</p>
+      
+      <div className="flex items-center gap-4">
+        {image && (
+          <img
+            src={image}
+            alt={author}
+            className="w-12 h-12 rounded-full object-cover"
+          />
+        )}
+        <div>
+          <p className={`font-bold ${authorColor}`}>{author}</p>
+          <p className="text-sm text-gray-500">{role}</p>
+        </div>
+      </div>
+
+      {(magicMoment || result) && (
+        <div className="mt-4 p-3 bg-white rounded-lg">
+          <p className="text-sm text-purple-600 font-medium">
+            {magicMoment ? `✨ Momento mágico: ${magicMoment}` : `🎯 Resultado: ${result}`}
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}