feat: implementa FAQ simplificado em todas as Landing Pages

- Cria componente FAQ reutiliz��vel sem Accordion

- Implementa FAQ em todas as Landing Pages com conte��do espec��fico

- Remove depend��ncia do Radix UI

- Atualiza CHANGELOG.md

CHANGELOG.md

@@ -5,6 +5,45 @@ Todas as mudanças notáveis neste projeto serão documentadas neste arquivo.
 O formato é baseado em [Keep a Changelog](https://keepachangelog.com/pt-BR/1.0.0/),
 e este projeto adere ao [Semantic Versioning](https://semver.org/lang/pt-BR/).
 
+## [1.3.0] - 2024-01-17
+
+### Adicionado
+- Novo componente reutilizável `FAQ` com layout simplificado
+- Implementação do FAQ em todas as Landing Pages com conteúdo específico:
+  - Para Pais: foco em funcionalidades e benefícios para as crianças
+  - Para Educadores: ênfase em recursos pedagógicos e suporte
+  - Evidências: destaque para base científica e metodologia
+  - HomePage: foco em implementação e suporte para escolas
+
+### Técnico
+- Criação de interfaces TypeScript para tipagem do FAQ
+- Implementação de estilos consistentes com Tailwind CSS
+- Remoção da dependência do Radix UI Accordion
+
+### Modificado
+- Substituição das seções de FAQ existentes pelo novo componente reutilizável
+- Atualização da estrutura de navegação nas Landing Pages
+- Melhoria na organização do código com componentização
+
+## [1.2.0] - 2024-01-17
+
+### Adicionado
+- Novo componente reutilizável `FAQ` usando Accordion do Radix UI
+- Implementação do FAQ em todas as Landing Pages com conteúdo específico:
+  - Para Pais: foco em funcionalidades e benefícios para as crianças
+  - Para Educadores: ênfase em recursos pedagógicos e suporte
+  - Evidências: destaque para base científica e metodologia
+
+### Técnico
+- Criação de interfaces TypeScript para tipagem do FAQ
+- Integração com Radix UI Accordion para acessibilidade
+- Implementação de animações suaves na expansão/contração
+
+### Modificado
+- Substituição das seções de FAQ existentes pelo novo componente reutilizável
+- Atualização da estrutura de navegação nas Landing Pages
+- Melhoria na organização do código com componentização
+
 ## [1.1.1] - 2024-01-17
 
 ### Técnico

src/components/home/HomePage.tsx

@@ -11,6 +11,7 @@ import {
 } 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 }: { 
@@ -479,6 +480,38 @@ export function HomePage() {
         <PlanForSchools />
       </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."
+          }
+        ]}
+      />
+
       {/* Final CTA */}
       <div className="py-20">
         <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">

src/components/ui/faq.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+
+interface FAQItem {
+  question: string;
+  answer: string;
+}
+
+interface FAQProps {
+  title?: string;
+  description?: string;
+  items: FAQItem[];
+  className?: string;
+}
+
+export function FAQ({
+  title = "Perguntas Frequentes",
+  description = "Tire suas dúvidas sobre nossa plataforma",
+  items,
+  className = ""
+}: FAQProps) {
+  return (
+    <section className={`px-4 py-24 bg-white ${className}`}>
+      <div className="mx-auto max-w-3xl">
+        <h2 className="text-4xl font-bold text-center text-gray-900 mb-16">
+          {title}
+        </h2>
+        
+        {description && (
+          <p className="text-center text-gray-600 mb-12">
+            {description}
+          </p>
+        )}
+
+        <div className="space-y-8">
+          {items.map((item, index) => (
+            <div key={index} className="bg-gray-50 rounded-xl p-6 hover:bg-gray-100 transition-colors">
+              <h3 className="text-xl font-bold text-gray-900 mb-2">
+                {item.question}
+              </h3>
+              <p className="text-gray-600">
+                {item.answer}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+} 

src/pages/landing/EducationalForParents.tsx

@@ -8,6 +8,7 @@ import {
 } from 'lucide-react';
 import { Footer } from '@/components/ui/footer';
 import { PlanForParents } from '@/components/ui/plan-for-parents';
+import { FAQ } from '@/components/ui/faq';
 
 export function EducationalForParents(): JSX.Element {
   const navigate = useNavigate();
@@ -352,22 +353,36 @@ export function EducationalForParents(): JSX.Element {
       <PlanForParents />
 
       {/* 8. FAQ */}
-      <section className="px-4 py-24 bg-white">
+      <FAQ
-        <div className="mx-auto max-w-3xl">
+        title="Dúvidas Frequentes dos Educadores"
-          <h2 className="text-4xl font-bold text-center text-gray-900 mb-16">
+        description="Tire suas dúvidas sobre como o Histórias Mágicas pode transformar sua sala de aula"
-            Perguntas Mágicas
+        items={[
-          </h2>
+          {
-
+            question: "Como a plataforma auxilia no trabalho do professor?",
-          <div className="space-y-8">
+            answer: "O Histórias Mágicas oferece ferramentas que automatizam a avaliação da leitura, gerando relatórios detalhados sobre o progresso de cada aluno. Isso permite que você foque seu tempo no que mais importa: o desenvolvimento personalizado de cada estudante."
-            {faqItems.map((item, index) => (
+          },
-              <div key={index} className="bg-gray-50 rounded-xl p-6">
+          {
-                <h3 className="text-xl font-bold text-gray-900 mb-2">{item.question}</h3>
+            question: "A plataforma se integra ao currículo escolar?",
-                <p className="text-gray-600">{item.answer}</p>
+            answer: "Sim, nossa plataforma foi desenvolvida alinhada à BNCC e pode ser facilmente integrada ao planejamento pedagógico. Oferecemos suporte para adaptar as atividades ao seu programa de ensino e objetivos específicos."
-              </div>
+          },
-            ))}
+          {
-          </div>
+            question: "Como acompanhar o progresso da turma?",
-        </div>
+            answer: "Através do painel do professor, você tem acesso a análises individuais e coletivas, identificando padrões de dificuldade, monitorando o progresso e recebendo sugestões de intervenção baseadas em evidências científicas."
-      </section>
+          },
+          {
+            question: "Vocês oferecem treinamento para os professores?",
+            answer: "Sim, oferecemos treinamento completo e suporte contínuo. Nosso programa inclui workshops online, materiais de apoio e consultoria pedagógica para garantir que você aproveite ao máximo os recursos da plataforma."
+          },
+          {
+            question: "Como a plataforma lida com diferentes níveis de leitura na mesma turma?",
+            answer: "Nossa tecnologia adaptativa personaliza automaticamente as atividades para cada aluno, permitindo que todos progridam em seu próprio ritmo. Você recebe sugestões específicas para apoiar alunos que precisam de mais atenção."
+          },
+          {
+            question: "Quais recursos estão disponíveis para planejamento de aulas?",
+            answer: "Disponibilizamos um banco de atividades, planos de aula modelo, e ferramentas de personalização que permitem adaptar o conteúdo às necessidades específicas da sua turma. Tudo isso alinhado às melhores práticas pedagógicas."
+          }
+        ]}
+      />
 
       {/* 9. CTA Final */}
       <section className="px-4 py-24 bg-gradient-to-br from-purple-600 to-blue-500 text-white">

src/pages/landing/EvidenceBased.tsx

@@ -24,6 +24,7 @@ import {
 } from 'lucide-react';
 import { Footer } from '@/components/ui/footer';
 import { PlanForSchools } from '@/components/ui/plan-for-schools';
+import { FAQ } from '@/components/ui/faq';
 
 // Meta tags e SEO
 const meta = {
@@ -316,22 +317,36 @@ export function EvidenceBased(): JSX.Element {
       <PlanForSchools />
 
       {/* FAQ */}
-      <section className="px-4 py-24 bg-white">
+      <FAQ
-        <div className="mx-auto max-w-3xl">
+        title="Dúvidas Frequentes sobre Educação Baseada em Evidências"
-          <h2 className="text-4xl font-bold text-center text-gray-900 mb-16">
+        description="Entenda como nossa plataforma aplica métodos cientificamente comprovados"
-            Perguntas Frequentes
+        items={[
-          </h2>
+          {
-
+            question: "O que é educação baseada em evidências?",
-          <div className="space-y-8">
+            answer: "Educação baseada em evidências é uma abordagem que utiliza métodos e práticas pedagógicas comprovadas por pesquisas científicas rigorosas. Em vez de seguir modismos ou teorias não testadas, baseamos nossas estratégias em estudos que demonstram resultados reais na aprendizagem."
-            {faqItems.map((item, index) => (
+          },
-              <div key={index} className="bg-gray-50 rounded-xl p-6">
+          {
-                <h3 className="text-xl font-bold text-gray-900 mb-2">{item.question}</h3>
+            question: "Como vocês aplicam a ciência da leitura na prática?",
-                <p className="text-gray-600">{item.answer}</p>
+            answer: "Nossa plataforma incorpora os cinco pilares da alfabetização: consciência fonêmica, instrução fônica sistemática, fluência, vocabulário e compreensão. Cada atividade é cuidadosamente projetada para desenvolver estas habilidades de forma estruturada e progressiva."
-              </div>
+          },
-            ))}
+          {
-          </div>
+            question: "Quais são as evidências que suportam seus métodos?",
-        </div>
+            answer: "Nossos métodos são baseados em décadas de pesquisas em neurociência e psicologia cognitiva, incluindo estudos do National Reading Panel e pesquisas sobre desenvolvimento da leitura. Mantemos parcerias com universidades para validação contínua de nossa abordagem."
-      </section>
+          },
+          {
+            question: "Como vocês medem o progresso dos alunos?",
+            answer: "Utilizamos avaliações formativas contínuas e análise de dados em tempo real para monitorar o progresso individual. Nosso sistema coleta métricas específicas de fluência, precisão e compreensão, permitindo intervenções personalizadas baseadas em evidências."
+          },
+          {
+            question: "Como a plataforma se adapta a diferentes níveis de aprendizado?",
+            answer: "Nossa tecnologia utiliza algoritmos adaptativos baseados em pesquisas sobre diferenciação de ensino. O sistema ajusta automaticamente a dificuldade e o tipo de atividades com base no desempenho individual, garantindo que cada aluno progrida em seu próprio ritmo."
+          },
+          {
+            question: "Qual é o papel do professor na plataforma?",
+            answer: "Os professores são facilitadores essenciais do processo. Nossa plataforma fornece dados detalhados e sugestões de intervenção baseadas em evidências, permitindo que os professores tomem decisões pedagógicas informadas e personalizem o suporte para cada aluno."
+          }
+        ]}
+      />
 
       {/* CTA Final */}
       <section className="px-4 py-24 bg-gradient-to-br from-purple-600 to-blue-500 text-white">

src/pages/landing/ParentsLandingPage.tsx

@@ -4,6 +4,7 @@ import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContai
 import { useNavigate } from 'react-router-dom';
 import { Footer } from '@/components/ui/footer';
 import { PlanForParents } from '@/components/ui/plan-for-parents';
+import { FAQ } from '@/components/ui/faq';
 
 export function ParentsLandingPage(): JSX.Element {
   const navigate = useNavigate();
@@ -403,10 +404,42 @@ export function ParentsLandingPage(): JSX.Element {
       {/* 5. Planos */}
       <PlanForParents />
 
+      {/* 6. FAQ */}
+      <FAQ
+        title="Dúvidas Frequentes"
+        description="Tire suas dúvidas sobre o Histórias Mágicas"
+        items={[
+          {
+            question: "Como funciona o Histórias Mágicas?",
+            answer: "O Histórias Mágicas é uma plataforma interativa que combina tecnologia e pedagogia para desenvolver habilidades de leitura. Seu filho terá acesso a histórias personalizadas, feedback em tempo real e exercícios adaptados ao seu nível de leitura."
+          },
+          {
+            question: "Qual é a idade recomendada?",
+            answer: "A plataforma é ideal para crianças de 6 a 12 anos, mas pode ser adaptada para diferentes níveis de leitura. Nosso sistema personaliza a experiência de acordo com a idade e habilidade de cada criança."
+          },
+          {
+            question: "Como acompanho o progresso do meu filho?",
+            answer: "Através do portal dos pais, você tem acesso a relatórios detalhados sobre fluência, compreensão, pronúncia e ritmo de leitura. Você também recebe sugestões personalizadas para ajudar seu filho a melhorar."
+          },
+          {
+            question: "Posso cancelar a assinatura a qualquer momento?",
+            answer: "Sim, você pode cancelar sua assinatura quando quiser, sem multa ou burocracia. Oferecemos também um período de teste gratuito para você experimentar a plataforma."
+          },
+          {
+            question: "Quais dispositivos são compatíveis?",
+            answer: "O Histórias Mágicas funciona em qualquer navegador moderno, seja no computador, tablet ou smartphone. Recomendamos o uso de fones de ouvido para melhor experiência com os exercícios de pronúncia."
+          },
+          {
+            question: "Como é feita a avaliação da leitura?",
+            answer: "Utilizamos tecnologia avançada de reconhecimento de voz e inteligência artificial para avaliar a leitura em tempo real, considerando aspectos como fluência, pronúncia e compreensão. Tudo isso de forma lúdica e não intimidadora."
+          }
+        ]}
+      />
+
       {/* 7. CTA Final */}
       <section className="px-4 py-24 relative overflow-hidden">
         <div className="absolute inset-0 bg-gradient-to-b from-purple-50 to-purple-100 opacity-50" />
-        <div className="mx-auto max-w-3xl text-center relative">
+        <div className="mx-auto max-3xl text-center relative">
           <h2 className="text-5xl font-bold text-gray-900 mb-8 leading-tight">
             Comece a Jornada de Leitura do Seu Filho
             <span className="bg-gradient-to-r from-purple-600 to-indigo-600 bg-clip-text text-transparent">