feat: redesign da landing page com novas seções

- Adiciona hero section com demo e social proof
- Implementa grid de features com ícones
- Adiciona seção 'Como Funciona'
- Inclui testimonials de usuários
- Implementa pricing table
- Adiciona CTA final e footer
- Melhora UX/UI geral da página

src/components/home/HomePage.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { BookOpen, Users, Shield, Sparkles, ArrowRight, School, BookCheck } from 'lucide-react';
+import { BookOpen, Users, Shield, Sparkles, ArrowRight, School, BookCheck, Brain, BarChart, GraduationCap } from 'lucide-react';
 import { useNavigate } from 'react-router-dom';
 
 export function HomePage() {
@@ -121,121 +121,212 @@ export function HomePage() {
         <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">
-              Tudo que você precisa em um só lugar
+              Tecnologia e Educação em Harmonia
             </h2>
             <p className="text-gray-600 max-w-2xl mx-auto">
-              Uma plataforma completa para criar, gerenciar e compartilhar histórias educativas
+              Uma plataforma completa que une o poder da IA com as melhores práticas pedagógicas
             </p>
           </div>
           
           <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
             <FeatureCard 
-              icon={<School />}
-              title="Gestão Escolar"
-              description="Gerencie turmas, professores e alunos de forma simples e eficiente"
+              icon={<Brain />}
+              title="IA Adaptativa"
+              description="Conteúdo que se adapta ao ritmo e estilo de aprendizagem de cada aluno"
             />
             <FeatureCard 
               icon={<BookOpen />}
               title="Histórias Interativas"
-              description="Crie e compartilhe histórias educativas personalizadas"
+              description="Narrativas envolventes que tornam o aprendizado mais divertido e eficaz"
+            />
+            <FeatureCard 
+              icon={<BarChart />}
+              title="Analytics Avançado"
+              description="Insights detalhados sobre o progresso e engajamento dos alunos"
             />
             <FeatureCard 
               icon={<Users />}
               title="Colaboração"
-              description="Trabalhe em conjunto com outros professores e compartilhe recursos"
+              description="Ferramentas para professores trabalharem juntos e compartilharem recursos"
             />
             <FeatureCard 
               icon={<Shield />}
               title="Ambiente Seguro"
-              description="Proteção de dados e conteúdo adequado para crianças"
+              description="Proteção de dados e conteúdo adequado para todas as idades"
             />
             <FeatureCard 
-              icon={<Sparkles />}
-              title="Personalização"
-              description="Adapte o conteúdo ao perfil e necessidades de cada aluno"
-            />
-            <FeatureCard 
-              icon={<BookCheck />}
-              title="Acompanhamento"
-              description="Monitore o progresso e engajamento dos alunos"
+              icon={<GraduationCap />}
+              title="Suporte Pedagógico"
+              description="Recursos e orientações para maximizar o potencial de aprendizagem"
             />
           </div>
         </div>
       </div>
 
-      {/* Stats Section */}
-      <div className="bg-purple-600 py-20 text-white">
+      {/* How it Works */}
+      <div className="py-20 bg-gray-50">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
-            <StatCard number="1000+" label="Escolas" />
-            <StatCard number="5000+" label="Professores" />
-            <StatCard number="50000+" label="Histórias Criadas" />
+          <div className="text-center mb-16">
+            <h2 className="text-3xl font-bold text-gray-900 mb-4">
+              Como Funciona
+            </h2>
+            <p className="text-gray-600 max-w-2xl mx-auto">
+              Em apenas três passos, sua escola pode começar a transformar a educação
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-8">
+            {[
+              {
+                step: '01',
+                title: 'Cadastre sua Escola',
+                description: 'Processo simples e rápido de registro institucional'
+              },
+              {
+                step: '02',
+                title: 'Configure as Turmas',
+                description: 'Adicione professores e alunos às suas turmas'
+              },
+              {
+                step: '03',
+                title: 'Comece a Jornada',
+                description: 'Acesse histórias personalizadas e acompanhe o progresso'
+              }
+            ].map((item, index) => (
+              <div key={index} className="relative">
+                <div className="text-4xl font-bold text-purple-200 mb-4">
+                  {item.step}
+                </div>
+                <h3 className="text-xl font-semibold text-gray-900 mb-2">
+                  {item.title}
+                </h3>
+                <p className="text-gray-600">{item.description}</p>
+              </div>
+            ))}
           </div>
         </div>
       </div>
 
-      {/* CTA Section */}
+      {/* Testimonials */}
+      <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">
+              O Que Dizem Sobre Nós
+            </h2>
+            <p className="text-gray-600 max-w-2xl mx-auto">
+              Histórias reais de escolas que transformaram sua educação
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-8">
+            <TestimonialCard
+              quote="A plataforma revolucionou nossa forma de ensinar. Os alunos estão mais engajados do que nunca."
+              author="Maria Silva"
+              role="Diretora Pedagógica"
+              image="/testimonials/1.jpg"
+            />
+            <TestimonialCard
+              quote="O suporte da IA nos ajuda a personalizar o ensino de forma que antes era impossível."
+              author="João Santos"
+              role="Professor de História"
+              image="/testimonials/2.jpg"
+            />
+            <TestimonialCard
+              quote="Nossos índices de engajamento aumentaram 300% desde que começamos a usar."
+              author="Ana Oliveira"
+              role="Coordenadora"
+              image="/testimonials/3.jpg"
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Pricing */}
+      <div className="py-20 bg-gray-50">
+        <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">
+              Planos para Cada Necessidade
+            </h2>
+            <p className="text-gray-600 max-w-2xl mx-auto">
+              Escolha o plano ideal para sua escola
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-3 gap-8">
+            <PriceCard
+              plan="Básico"
+              price="497"
+              description="Ideal para escolas pequenas"
+              features={[
+                "Até 200 alunos",
+                "Histórias básicas",
+                "Suporte por email"
+              ]}
+            />
+            <PriceCard
+              plan="Profissional"
+              price="997"
+              description="Para escolas em crescimento"
+              features={[
+                "Até 1000 alunos",
+                "Histórias personalizadas",
+                "Suporte prioritário",
+                "Analytics avançado"
+              ]}
+              highlighted
+            />
+            <PriceCard
+              plan="Enterprise"
+              price="Consulte"
+              description="Para redes de ensino"
+              features={[
+                "Alunos ilimitados",
+                "Customização completa",
+                "Suporte 24/7",
+                "API dedicada"
+              ]}
+            />
+          </div>
+        </div>
+      </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">
-              Comece sua jornada hoje
+              Pronto para Transformar sua Escola?
             </h2>
             <p className="text-lg mb-8 max-w-2xl mx-auto">
-              Transforme a educação em sua escola com histórias interativas
+              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"
             >
-              Cadastrar Escola Gratuitamente
+              Começar Gratuitamente
             </button>
           </div>
         </div>
       </div>
 
       {/* Footer */}
-      <footer className="bg-gray-50 border-t border-gray-200">
-        <div className="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-8">
+      <footer className="bg-gray-900 text-white py-12">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="grid md:grid-cols-4 gap-8">
             <div>
-              <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider">Produto</h3>
-              <ul className="mt-4 space-y-4">
-                <li><a href="#" className="text-base text-gray-600 hover:text-gray-900">Recursos</a></li>
-                <li><a href="#" className="text-base text-gray-600 hover:text-gray-900">Preços</a></li>
-                <li><a href="#" className="text-base text-gray-600 hover:text-gray-900">Demonstração</a></li>
-              </ul>
+              <div className="flex items-center gap-2 mb-4">
+                <BookOpen className="h-8 w-8" />
+                <span className="text-xl font-bold">Histórias Mágicas</span>
               </div>
-            <div>
-              <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider">Suporte</h3>
-              <ul className="mt-4 space-y-4">
-                <li><a href="#" className="text-base text-gray-600 hover:text-gray-900">Documentação</a></li>
-                <li><a href="#" className="text-base text-gray-600 hover:text-gray-900">Tutoriais</a></li>
-                <li><a href="#" className="text-base text-gray-600 hover:text-gray-900">FAQ</a></li>
-              </ul>
-            </div>
-            <div>
-              <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider">Empresa</h3>
-              <ul className="mt-4 space-y-4">
-                <li><a href="#" className="text-base text-gray-600 hover:text-gray-900">Sobre</a></li>
-                <li><a href="#" className="text-base text-gray-600 hover:text-gray-900">Blog</a></li>
-                <li><a href="#" className="text-base text-gray-600 hover:text-gray-900">Carreiras</a></li>
-              </ul>
-            </div>
-            <div>
-              <h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider">Legal</h3>
-              <ul className="mt-4 space-y-4">
-                <li><a href="#" className="text-base text-gray-600 hover:text-gray-900">Privacidade</a></li>
-                <li><a href="#" className="text-base text-gray-600 hover:text-gray-900">Termos</a></li>
-                <li><a href="#" className="text-base text-gray-600 hover:text-gray-900">Segurança</a></li>
-              </ul>
-            </div>
-          </div>
-          <div className="mt-8 border-t border-gray-200 pt-8 text-center">
-            <p className="text-base text-gray-400">
-              &copy; 2024 Histórias Mágicas. Todos os direitos reservados.
+              <p className="text-gray-400">
+                Transformando a educação através de histórias interativas
               </p>
             </div>
+            {/* Adicione mais seções do footer conforme necessário */}
+          </div>
         </div>
       </footer>
     </div>