feat: Ajustando EducationalForParents

This commit is contained in:
Lucas Santana 2025-01-11 10:08:15 -03:00
parent 6398e2ac81
commit a45ebd2719

View File

@ -1,425 +1,265 @@
import React from 'react'; import React from 'react';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import { import {
ArrowRight, Wand2, Shield, Star, BookOpen, ArrowRight,
Brain, Target, Users, Award, CheckCircle, Brain,
Clock, Heart, Sparkles, ScrollText, Lock, X, BookOpen,
Facebook, Instagram, Twitter, Youtube Target,
Wand2,
Star,
Shield,
Sparkles,
ScrollText,
Lock,
Heart,
Facebook,
Instagram,
Twitter,
Youtube,
CheckCircle,
LineChart,
Clock
} from 'lucide-react'; } from 'lucide-react';
import { Footer } from '@/components/ui/footer';
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';
import { PlanForParents } from '@/components/ui/plan-for-parents'; import { PlanForParents } from '@/components/ui/plan-for-parents';
import { FAQ } from '@/components/ui/faq'; import { FAQ } from '@/components/ui/faq';
import { Footer } from '@/components/ui/footer';
export function EducationalForParents(): JSX.Element { export function EducationalForParents() {
const navigate = useNavigate();
return ( return (
<div className="min-h-screen"> <div className="min-h-screen bg-white">
{/* 1. Hero Section */} {/* Hero Section */}
<section className="relative overflow-hidden bg-gradient-to-b from-purple-50 via-white to-purple-50"> <div className="relative isolate overflow-hidden bg-gradient-to-b from-purple-100/20">
<div className="absolute inset-0 bg-[url('/patterns/magic.svg')] opacity-5" /> <div className="mx-auto max-w-7xl px-6 pb-24 pt-10 sm:pb-32 lg:flex lg:px-8 lg:py-40">
<div className="px-4 py-24 mx-auto max-w-7xl relative"> <div className="mx-auto max-w-2xl lg:mx-0 flex-shrink-0 lg:pt-8">
{/* Reading Time */} <div className="absolute right-4 top-4 text-gray-600 flex items-center gap-2">
<div className="absolute top-8 right-8 flex items-center gap-2 text-sm text-gray-500"> <Clock className="w-4 h-4" />
<Clock className="h-4 w-4" /> <span className="text-sm">Tempo de leitura: 5 minutos</span>
<span>Tempo de leitura: 5 minutos</span>
</div> </div>
<div className="flex flex-col md:flex-row items-center gap-16"> <h1 className="mt-10 text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
<div className="flex-1 space-y-8"> Transforme o<br />
<h1 className="text-6xl font-bold text-gray-900 leading-tight"> Aprendizado em<br />
Transforme o Aprendizado em Uma Uma <span className="text-purple-600">Aventura Mágica</span>
<span className="block bg-gradient-to-r from-purple-600 to-blue-500 bg-clip-text text-transparent">
Aventura Mágica
</span>
</h1> </h1>
<p className="text-xl text-gray-600 leading-relaxed"> <p className="mt-6 text-lg leading-8 text-gray-600 max-w-xl">
Histórias educativas personalizadas que encantam e ensinam, criadas especialmente Histórias educativas personalizadas que encantam e ensinam,
para o desenvolvimento único do seu filho. criadas especialmente para o desenvolvimento único do seu filho.
</p> </p>
<div className="flex gap-4"> <div className="mt-10">
<button <button
onClick={() => navigate('/register/parent')} onClick={() => window.location.href = '/cadastro'}
className="group px-8 py-4 bg-gradient-to-r from-purple-600 to-blue-500 className="rounded-xl bg-purple-600 px-8 py-4 text-base font-semibold text-white shadow-sm hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-600 flex items-center gap-2"
text-white rounded-xl hover:from-purple-700 hover:to-blue-600
transform hover:scale-105 transition-all shadow-lg"
> >
Comece Sua Aventura Mágica Grátis Comece Sua Aventura Mágica Grátis
<ArrowRight className="inline-block ml-2 h-5 w-5 <ArrowRight className="w-5 h-5" />
group-hover:translate-x-1 transition-transform" />
</button> </button>
</div> </div>
{/* Social Proof */} <div className="mt-10 flex items-center gap-x-8 text-sm text-gray-600">
<div className="flex gap-8 text-sm text-gray-600"> <div className="flex items-center gap-x-2">
<div className="flex items-center gap-2"> <BookOpen className="w-5 h-5 text-purple-600" />
<BookOpen className="h-5 w-5 text-purple-600" />
<span>Mais de 10.000 histórias mágicas criadas</span> <span>Mais de 10.000 histórias mágicas criadas</span>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-x-2">
<Users className="h-5 w-5 text-blue-500" /> <Target className="w-5 h-5 text-purple-600" />
<span>5.000 pequenos leitores encantados</span> <span>5.000 pequenos leitores encantados</span>
</div> </div>
</div> </div>
</div> </div>
<div className="flex-1"> <div className="mx-auto mt-16 flex max-w-2xl sm:mt-24 lg:ml-10 lg:mr-0 lg:mt-0 lg:max-w-none lg:flex-none xl:ml-32">
<div className="relative"> <div className="max-w-3xl flex-none sm:max-w-5xl lg:max-w-none">
<div className="absolute -inset-4 bg-gradient-to-r from-purple-600 to-blue-500
rounded-2xl blur-lg opacity-20" />
<img <img
src="/images/magic-book.webp" src="/images/hero-image.webp"
alt="Crianças mergulhadas em um livro mágico" alt="Crianças mergulhadas em um livro mágico"
className="relative rounded-2xl shadow-2xl transform hover:scale-[1.02] className="w-[76rem] rounded-md bg-white/5 shadow-2xl ring-1 ring-white/10"
transition-transform"
/> />
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</section>
{/* 2. Problema & Solução */} {/* Challenges Section */}
<section className="px-4 py-24 bg-white"> <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24">
<div className="mx-auto max-w-7xl"> <div className="text-center">
<h2 className="text-4xl font-bold text-center text-gray-900 mb-16"> <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Desafios que Todo Pai Enfrenta Desafios da Educação Moderna
</h2> </h2>
<p className="mt-4 text-lg leading-8 text-gray-600">
<div className="grid md:grid-cols-3 gap-8 mb-16"> Entendemos os obstáculos que pais e educadores enfrentam no desenvolvimento da leitura.
</p>
</div>
<div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
{challenges.map((challenge, index) => ( {challenges.map((challenge, index) => (
<div key={index} className="p-6 bg-purple-50 rounded-xl"> <InfoCard
<challenge.icon className="h-12 w-12 text-purple-600 mb-4" />
<h3 className="text-xl font-bold text-gray-900 mb-2">
{challenge.title}
</h3>
<p className="text-gray-600">{challenge.description}</p>
</div>
))}
</div>
<div className="grid md:grid-cols-4 gap-8">
{benefits.map((benefit, index) => (
<div key={index} className="text-center">
<div className="mx-auto w-16 h-16 flex items-center justify-center
bg-gradient-to-r from-purple-600 to-blue-500 rounded-full mb-4">
<benefit.icon className="h-8 w-8 text-white" />
</div>
<h4 className="font-bold text-gray-900 mb-2">{benefit.title}</h4>
<p className="text-sm text-gray-600">{benefit.description}</p>
</div>
))}
</div>
</div>
</section>
{/* 3. Como a Magia Acontece */}
<section className="px-4 py-24 bg-gradient-to-br from-purple-50 to-blue-50">
<div className="mx-auto max-w-7xl">
<h2 className="text-4xl font-bold text-center text-gray-900 mb-16">
Como a Magia Acontece
</h2>
<div className="grid md:grid-cols-2 gap-12 items-center">
<div className="space-y-12">
{magicSteps.map((step, index) => (
<div key={index} className="flex gap-6">
<div className="flex-shrink-0 w-12 h-12 bg-gradient-to-r from-purple-600
to-blue-500 text-white rounded-full flex items-center justify-center
text-xl font-bold">
{index + 1}
</div>
<div>
<h3 className="text-xl font-bold text-gray-900 mb-2">
{step.title}
</h3>
<p className="text-gray-600">{step.description}</p>
</div>
</div>
))}
</div>
<div className="relative">
<div className="aspect-video rounded-xl overflow-hidden shadow-xl">
<video
className="w-full h-full object-cover"
autoPlay
muted
loop
playsInline
poster="/images/demo-poster.webp"
>
<source src="/videos/demo.mp4" type="video/mp4" />
</video>
</div>
<div className="absolute -bottom-6 -right-6 bg-white p-4 rounded-lg shadow-lg">
<div className="flex items-center gap-2 text-sm text-purple-600 font-medium">
<Sparkles className="h-4 w-4" />
<span>Veja a mágica acontecer!</span>
</div>
</div>
</div>
</div>
</div>
</section>
{/* 4. Comparação */}
<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">
A Magia da Transformação
</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>
{comparisonData.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>
{comparisonData.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>
{/* 5. Benefícios Mágicos Detalhados */}
<section className="px-4 py-24 bg-gradient-to-br from-purple-50 to-blue-50">
<div className="mx-auto max-w-7xl">
<h2 className="text-4xl font-bold text-center text-gray-900 mb-16">
Benefícios Mágicos Detalhados
</h2>
<div className="grid lg:grid-cols-5 gap-8 mb-16">
{detailedBenefits.map((benefit, index) => (
<div
key={index} key={index}
className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md icon={challenge.icon}
transform hover:scale-105 transition-all" title={challenge.title}
> description={challenge.description}
<div className="flex flex-col items-center text-center gap-4"> />
<div className="w-16 h-16 flex items-center justify-center
bg-gradient-to-r from-purple-600 to-blue-500 rounded-full">
<benefit.icon className="h-8 w-8 text-white" />
</div>
<h3 className="text-xl font-bold text-gray-900">{benefit.title}</h3>
<p className="text-gray-600">{benefit.description}</p>
</div>
</div>
))} ))}
</div> </div>
{/* Preview do Portal */}
<div className="relative mt-20">
<div className="absolute -inset-4 bg-gradient-to-r from-purple-600 to-blue-500
rounded-2xl blur-lg opacity-20" />
<div className="relative bg-white p-8 rounded-xl shadow-xl">
<div className="grid md:grid-cols-2 gap-12 items-center">
<div>
<h3 className="text-2xl font-bold text-gray-900 mb-6">
Portal dos Pais: Acompanhamento em Tempo Real
</h3>
<ul className="space-y-4">
<li className="flex items-start gap-3">
<CheckCircle className="h-6 w-6 text-green-500 flex-shrink-0 mt-1" />
<span className="text-gray-600">
Métricas detalhadas de progresso e desenvolvimento
</span>
</li>
<li className="flex items-start gap-3">
<CheckCircle className="h-6 w-6 text-green-500 flex-shrink-0 mt-1" />
<span className="text-gray-600">
Relatórios semanais personalizados
</span>
</li>
<li className="flex items-start gap-3">
<CheckCircle className="h-6 w-6 text-green-500 flex-shrink-0 mt-1" />
<span className="text-gray-600">
Recomendações pedagógicas baseadas em dados
</span>
</li>
<li className="flex items-start gap-3">
<CheckCircle className="h-6 w-6 text-green-500 flex-shrink-0 mt-1" />
<span className="text-gray-600">
Histórico completo de leituras e conquistas
</span>
</li>
</ul>
</div> </div>
<div className="relative">
<img {/* Magic Process Section */}
src="/images/dashboard-preview.webp" <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 bg-gradient-to-b from-purple-50">
alt="Portal dos Pais" <div className="text-center">
className="rounded-xl shadow-2xl" <h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Como Funciona a Magia
</h2>
<p className="mt-4 text-lg leading-8 text-gray-600">
Um processo simples e eficaz para transformar a leitura em uma aventura inesquecível.
</p>
</div>
<div className="mt-16 space-y-12">
{magicSteps.map((step, index) => (
<ProcessStep
key={index}
number={index + 1}
title={step.title}
description={step.description}
/> />
<div className="absolute -bottom-6 -right-6 bg-white p-4 rounded-lg shadow-lg"> ))}
<div className="flex items-center gap-2 text-sm text-purple-600 font-medium">
<Lock className="h-4 w-4" />
<span>Ambiente 100% seguro e monitorado</span>
</div> </div>
</div> </div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* 6. Testimoniais */} {/* Comparison Section */}
<section className="px-4 py-24 bg-white"> <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24">
<div className="mx-auto max-w-7xl"> <ComparisonSection
<h2 className="text-4xl font-bold text-center text-gray-900 mb-16"> title="A Magia da Transformação"
items={comparisonData}
/>
</div>
{/* Benefits Section */}
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 bg-gradient-to-b from-purple-50">
<div className="text-center">
<h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Benefícios Mágicos
</h2>
<p className="mt-4 text-lg leading-8 text-gray-600">
Descubra todas as vantagens que nossa plataforma oferece para o desenvolvimento do seu filho.
</p>
</div>
<div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
{detailedBenefits.map((benefit, index) => (
<FeatureCard
key={index}
icon={benefit.icon}
title={benefit.title}
description={benefit.description}
/>
))}
</div>
</div>
{/* Results Section */}
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24">
<div className="text-center">
<h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Resultados Comprovados
</h2>
<p className="mt-4 text-lg leading-8 text-gray-600">
Números que demonstram o impacto do Histórias Mágicas no aprendizado.
</p>
</div>
<div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
<StatCard
icon={LineChart}
title="Fluência de Leitura"
value="95%"
description="de melhora na velocidade e compreensão"
/>
<StatCard
icon={Clock}
title="Tempo de Leitura"
value="3x"
description="mais tempo dedicado à leitura diária"
/>
<StatCard
icon={Star}
title="Satisfação"
value="98%"
description="dos pais recomendam a plataforma"
/>
<StatCard
icon={BookOpen}
title="Histórias Lidas"
value="50+"
description="histórias por aluno em média"
/>
</div>
</div>
{/* Testimonials Section */}
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 bg-gradient-to-b from-purple-50">
<div className="text-center">
<h2 className="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">
Histórias de Transformação Histórias de Transformação
</h2> </h2>
<p className="mt-4 text-lg leading-8 text-gray-600">
<div className="grid md:grid-cols-3 gap-8"> Veja como o Histórias Mágicas está transformando a vida de famílias por todo o Brasil.
{testimonials.map((testimonial, index) => (
<div key={index} className="bg-gradient-to-br from-purple-50 to-blue-50
p-6 rounded-xl shadow-sm">
<div className="relative mb-8">
<img
src={testimonial.image}
alt={`Família de ${testimonial.name}`}
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="text-gray-600 mb-4 italic">"{testimonial.text}"</p>
<div>
<p className="font-bold text-gray-900">{testimonial.name}</p>
<p className="text-sm text-gray-500">{testimonial.role}</p>
</div>
<div className="mt-4 p-3 bg-white rounded-lg">
<p className="text-sm text-purple-600 font-medium">
Momento mágico: {testimonial.magicMoment}
</p> </p>
</div> </div>
</div> <div className="mt-16 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
{testimonials.map((testimonial, index) => (
<TestimonialCard
key={index}
text={testimonial.text}
name={testimonial.name}
role={testimonial.role}
image={testimonial.image}
magicMoment={testimonial.magicMoment}
/>
))} ))}
</div> </div>
</div> </div>
</section>
{/* 7. Planos */} {/* Pricing Section */}
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24">
<PlanForParents /> <PlanForParents />
</div>
{/* 8. FAQ */} {/* FAQ Section */}
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 bg-gradient-to-b from-purple-50">
<FAQ <FAQ
title="Dúvidas Frequentes dos Educadores" title="Dúvidas Frequentes"
description="Tire suas dúvidas sobre como o Histórias Mágicas pode transformar sua sala de aula" description="Encontre respostas para as perguntas mais comuns sobre nossa plataforma."
items={[ items={faqItems}
{
question: "Como a plataforma auxilia no trabalho do professor?",
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."
},
{
question: "A plataforma se integra ao currículo escolar?",
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."
},
{
question: "Como acompanhar o progresso da turma?",
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."
},
{
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."
}
]}
/> />
</div>
{/* 9. CTA Final */} {/* Final CTA */}
<section className="px-4 py-24 bg-gradient-to-br from-purple-600 to-blue-500 text-white"> <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24">
<div className="mx-auto max-w-3xl text-center"> <div className="rounded-3xl bg-purple-600 px-8 py-16">
<h2 className="text-4xl font-bold mb-8"> <div className="mx-auto max-w-2xl text-center">
<h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
Comece a Jornada Mágica Hoje Comece a Jornada Mágica Hoje
</h2> </h2>
<p className="mx-auto mt-6 max-w-xl text-lg leading-8 text-white/90">
<p className="text-xl opacity-90 mb-12"> Junte-se a milhares de famílias que descobriram o poder da leitura personalizada.
Transforme a educação do seu filho em uma aventura inesquecível
</p> </p>
<div className="mt-10 flex items-center justify-center gap-x-6">
<div className="bg-white/10 p-6 rounded-xl mb-8">
<p className="font-medium mb-2">
Oferta por tempo limitado!
</p>
<p className="text-sm opacity-90">
7 dias grátis + Bônus especial de boas-vindas
</p>
</div>
<button <button
onClick={() => navigate('/register/parent')} onClick={() => window.location.href = '/cadastro'}
className="px-12 py-6 bg-white text-purple-600 rounded-xl text-xl font-bold className="rounded-xl bg-white px-3.5 py-2.5 text-sm font-semibold text-purple-600 shadow-sm hover:bg-purple-50"
hover:bg-gray-100 transform hover:scale-105 transition-all shadow-lg"
> >
Criar Conta Gratuita Começar Gratuitamente
<ArrowRight className="inline-block ml-2 h-6 w-6" />
</button> </button>
<p className="mt-6 text-sm opacity-75">
Garantia de 30 dias ou seu dinheiro de volta
</p>
</div> </div>
</section> </div>
</div>
</div>
{/* Footer */}
<Footer /> <Footer />
</div> </div>
); );
@ -428,18 +268,18 @@ export function EducationalForParents(): JSX.Element {
const challenges = [ const challenges = [
{ {
icon: Brain, icon: Brain,
title: "Manter as crianças interessadas em aprender", title: 'Dificuldade de Concentração',
description: "É difícil competir com jogos e vídeos para capturar a atenção das crianças." description: 'Crianças têm dificuldade em manter o foco em métodos tradicionais de leitura.'
}, },
{ {
icon: BookOpen, icon: BookOpen,
title: "Encontrar conteúdo educativo de qualidade", title: 'Falta de Engajamento',
description: "Muito conteúdo disponível, mas pouco realmente educativo e envolvente." description: 'Livros convencionais nem sempre capturam a imaginação das crianças modernas.'
}, },
{ {
icon: Target, icon: Target,
title: "Acompanhar o desenvolvimento da criança", title: 'Progresso Lento',
description: "Falta de ferramentas para monitorar o progresso de forma clara e objetiva." description: 'Pais têm dificuldade em acompanhar e estimular o desenvolvimento da leitura.'
} }
]; ];
@ -468,67 +308,67 @@ const benefits = [
const magicSteps = [ const magicSteps = [
{ {
title: "Escolha o tema da aventura", title: 'Escolha do Tema',
description: "Selecione entre diversos temas educativos alinhados com a BNCC e adequados à idade." description: 'Selecione entre diversos temas educativos que despertam o interesse do seu filho.'
}, },
{ {
title: "Personalize os personagens", title: 'Personalização Mágica',
description: "Crie personagens que seu filho vai adorar, com características únicas e cativantes." description: 'Crie personagens que se conectam com a realidade e interesses da criança.'
}, },
{ {
title: "A IA cria a história mágica", title: 'Geração da História',
description: "Nossa IA educacional gera uma história personalizada em segundos." description: 'Nossa IA cria uma narrativa única, adaptada ao nível de leitura do seu filho.'
}, },
{ {
title: "A aventura educativa começa", title: 'Aventura Educativa',
description: "Seu filho mergulha em uma jornada mágica de aprendizado e diversão." description: 'Acompanhe o progresso enquanto seu filho se diverte aprendendo.'
} }
]; ];
const comparisonData = [ const comparisonData = [
{ {
title: "Tempo & Diversão", title: 'Tempo & Diversão',
without: [ without: [
"Horas procurando conteúdo educativo adequado", 'Horas procurando conteúdo educativo adequado',
"Crianças entediadas com leituras tradicionais", 'Crianças entediadas com leituras tradicionais',
"Histórias que não capturam a imaginação", 'Histórias que não capturam a imaginação',
"Dificuldade em acompanhar o progresso" 'Dificuldade em acompanhar o progresso'
], ],
with: [ with: [
"Histórias mágicas personalizadas em minutos", 'Histórias mágicas personalizadas em minutos',
"Crianças fascinadas por aventuras únicas", 'Crianças fascinadas por aventuras únicas',
"Mundos mágicos que educam e encantam", 'Mundos mágicos que educam e encantam',
"Portal mágico de acompanhamento do progresso" 'Portal mágico de acompanhamento do progresso'
] ]
}, },
{ {
title: "Qualidade do Aprendizado", title: 'Qualidade do Aprendizado',
without: [ without: [
"Conteúdo genérico e previsível", 'Conteúdo genérico e previsível',
"Falta de conexão emocional com a leitura", 'Falta de conexão emocional com a leitura',
"Dificuldade em manter o interesse", 'Dificuldade em manter o interesse',
"Aprendizado fragmentado" 'Aprendizado fragmentado'
], ],
with: [ with: [
"Histórias que evoluem com cada criança", 'Histórias que evoluem com cada criança',
"Conexão emocional com personagens únicos", 'Conexão emocional com personagens únicos',
"Aventuras que mesclam diversão e educação", 'Aventuras que mesclam diversão e educação',
"Jornada de aprendizado mágica e integrada" 'Jornada de aprendizado mágica e integrada'
] ]
}, },
{ {
title: "Resultados", title: 'Resultados',
without: [ without: [
"Progresso lento e desmotivador", 'Progresso lento e desmotivador',
"Resistência à leitura e aprendizado", 'Resistência à leitura e aprendizado',
"Rotina de estudos cansativa", 'Rotina de estudos cansativa',
"Pais preocupados com desenvolvimento" 'Pais preocupados com desenvolvimento'
], ],
with: [ with: [
"Evolução visível e empolgante", 'Evolução visível e empolgante',
"Amor natural pela leitura e conhecimento", 'Amor natural pela leitura e conhecimento',
"Aventuras diárias de aprendizado", 'Aventuras diárias de aprendizado',
"Pais confiantes no desenvolvimento mágico" 'Pais confiantes no desenvolvimento mágico'
] ]
} }
]; ];
@ -536,79 +376,84 @@ const comparisonData = [
const detailedBenefits = [ const detailedBenefits = [
{ {
icon: Wand2, icon: Wand2,
title: "Aprendizado Através de Aventuras", title: 'Histórias Personalizadas',
description: "Histórias que se adaptam ao nível e interesses do seu filho, tornando o aprendizado natural e divertido." description: 'Narrativas únicas que se adaptam aos interesses e nível de leitura do seu filho.'
}, },
{ {
icon: ScrollText, icon: Star,
title: "Portal dos Pais", title: 'Aprendizado Divertido',
description: "Acompanhe em tempo real o progresso de leitura, compreensão e desenvolvimento do seu filho." description: 'Transformamos o processo de leitura em uma aventura mágica e envolvente.'
}, },
{ {
icon: Shield, icon: Shield,
title: "Proteção Mágica", title: 'Ambiente Seguro',
description: "Conteúdo 100% seguro e adequado, com moderação constante e controles parentais." description: 'Conteúdo apropriado para a idade e monitoramento constante do progresso.'
}, },
{ {
icon: BookOpen, icon: Sparkles,
title: "Alinhamento com BNCC", title: 'Recompensas Mágicas',
description: "Histórias criadas seguindo as diretrizes da Base Nacional Comum Curricular." description: 'Sistema de conquistas que motiva e celebra o progresso da criança.'
}, },
{ {
icon: Brain, icon: ScrollText,
title: "IA Educacional", title: 'Relatórios Detalhados',
description: "Nossa inteligência artificial analisa o perfil do seu filho para criar histórias personalizadas e adaptativas." description: 'Acompanhe o desenvolvimento da leitura com métricas claras e insights valiosos.'
},
{
icon: Lock,
title: 'Controle Parental',
description: 'Defina limites, monitore o uso e mantenha-se informado sobre o progresso.'
} }
]; ];
const testimonials = [ const testimonials = [
{ {
text: "Minha filha sempre teve dificuldade com leitura, mas desde que começamos a usar o Histórias Mágicas, ela não para de pedir para ler mais uma história!",
name: "Ana Clara Silva",
role: "Mãe da Sofia, 8 anos",
image: "/images/testimonial-1.webp", image: "/images/testimonial-1.webp",
text: "Minha filha passou de resistente à leitura para não querer parar de ler! As histórias personalizadas fizeram toda a diferença.", magicMoment: "Sofia leu sua primeira história sozinha após 2 semanas"
name: "Ana Silva",
role: "Mãe da Maria, 8 anos",
magicMoment: "Primeira história completa lida sozinha"
}, },
{ {
text: "As histórias personalizadas fizeram toda a diferença. Ver meu filho como protagonista das aventuras tornou a leitura muito mais envolvente.",
name: "Pedro Henrique Santos",
role: "Pai do Lucas, 7 anos",
image: "/images/testimonial-2.webp", image: "/images/testimonial-2.webp",
text: "Como pai, é incrível ver o progresso do Pedro. O portal dos pais me ajuda a entender exatamente onde ele precisa de apoio.", magicMoment: "Lucas aumentou seu vocabulário em 40% em 3 meses"
name: "Carlos Santos",
role: "Pai do Pedro, 10 anos",
magicMoment: "Superou a dificuldade com palavras complexas"
}, },
{ {
text: "O progresso que vimos em apenas algumas semanas foi incrível. A autoconfiança da minha filha na leitura cresceu enormemente.",
name: "Mariana Costa",
role: "Mãe da Laura, 9 anos",
image: "/images/testimonial-3.webp", image: "/images/testimonial-3.webp",
text: "As histórias são tão envolventes que meu filho pede para ler mais uma toda noite. O aprendizado acontece naturalmente!", magicMoment: "Laura passou de leitora básica para avançada"
name: "Juliana Costa",
role: "Mãe do Lucas, 7 anos",
magicMoment: "Começou a criar suas próprias histórias"
} }
]; ];
const faqItems = [ const faqItems = [
{ {
question: "Como a magia da IA funciona?", question: "Como a plataforma auxilia no trabalho do professor?",
answer: "Nossa IA educacional analisa o perfil do seu filho, incluindo idade, interesses e nível de leitura, para criar histórias únicas que combinam diversão com aprendizado personalizado." 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."
}, },
{ {
question: "Como garantimos histórias seguras?", question: "A plataforma se integra ao currículo escolar?",
answer: "Todas as histórias passam por múltiplas camadas de verificação, incluindo filtros de IA e revisão humana, garantindo conteúdo 100% adequado e seguro." 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."
}, },
{ {
question: "Como acompanhar a evolução mágica?", question: "Como acompanhar o progresso da turma?",
answer: "Através do Portal dos Pais, você tem acesso a relatórios detalhados sobre fluência, compreensão, vocabulário e muito mais, com visualizações claras do progresso." 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."
}, },
{ {
question: "Qual é a política de cancelamento?", question: "Vocês oferecem treinamento para os professores?",
answer: "Você pode cancelar sua assinatura a qualquer momento, sem multas. Oferecemos garantia de 30 dias - se não estiver satisfeito, devolvemos seu dinheiro." 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: "Quantas histórias mágicas por mês?", question: "Como a plataforma lida com diferentes níveis de leitura na mesma turma?",
answer: "O número de histórias varia conforme o plano escolhido, desde 5 histórias mensais no plano básico até histórias ilimitadas no plano Grão-Mestre." 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: "Como funciona o suporte aos pais?", question: "Quais recursos estão disponíveis para planejamento de aulas?",
answer: "Oferecemos suporte via chat, email e telefone, com especialistas em educação prontos para ajudar. Planos premium incluem acesso a pedagogos." 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."
} }
]; ];