mirror of
https://github.com/lucasrcsantana/story-generator.git
synced 2025-12-17 05:47:52 +00:00
417 lines
17 KiB
TypeScript
417 lines
17 KiB
TypeScript
import React, { useState } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import {
|
|
BookOpen, ArrowRight, School, Users, Shield,
|
|
Sparkles, BookCheck, Play, CheckCircle, Star,
|
|
GraduationCap, BarChart, Brain, X, Check,
|
|
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';
|
|
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: '/' },
|
|
{ name: 'Para Pais', href: '/para-pais' },
|
|
{ name: 'Evidências', href: '/evidencias' },
|
|
{ name: 'Para Educadores', href: '/para-educadores' },
|
|
];
|
|
|
|
export function HomePage() {
|
|
const navigate = useNavigate();
|
|
const [showUserOptions, setShowUserOptions] = useState(false);
|
|
const [activeTab, setActiveTab] = useState('schools');
|
|
const [showFaq, setShowFaq] = useState<number | null>(null);
|
|
|
|
// Navigation handlers
|
|
const handleLoginClick = () => setShowUserOptions(!showUserOptions);
|
|
const handleSchoolLogin = () => navigate('/login/school');
|
|
const handleTeacherLogin = () => navigate('/login/teacher');
|
|
const handleStudentLogin = () => navigate('/login/student');
|
|
const handleSchoolRegister = () => {
|
|
navigate('/register');
|
|
};
|
|
const handleDemo = () => navigate('/demo');
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gradient-to-b from-purple-50 to-white">
|
|
{/* Header/Nav */}
|
|
<nav className="bg-white/80 backdrop-blur-md fixed w-full z-50 shadow-sm">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex justify-between items-center h-16">
|
|
<div className="flex items-center">
|
|
<BookOpen className="h-8 w-8 text-purple-600" />
|
|
<span className="ml-2 text-xl font-bold text-gray-900">Histórias Mágicas</span>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<div className="relative">
|
|
<button
|
|
onClick={handleLoginClick}
|
|
className="text-gray-600 hover:text-gray-900 px-3 py-2"
|
|
>
|
|
Entrar
|
|
</button>
|
|
{showUserOptions && (
|
|
<div className="absolute right-0 mt-2 w-48 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
|
|
<div className="py-1" role="menu">
|
|
<button
|
|
onClick={handleSchoolLogin}
|
|
className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-purple-50"
|
|
>
|
|
Entrar como Escola
|
|
</button>
|
|
<button
|
|
onClick={handleTeacherLogin}
|
|
className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-purple-50"
|
|
>
|
|
Entrar como Professor
|
|
</button>
|
|
<button
|
|
onClick={handleStudentLogin}
|
|
className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-purple-50"
|
|
>
|
|
Entrar como Aluno
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<button
|
|
onClick={handleSchoolRegister}
|
|
className="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition"
|
|
>
|
|
Cadastrar Escola
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
{/* Hero Section */}
|
|
<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>
|
|
<div className="inline-block px-4 py-1 rounded-full bg-purple-100 text-purple-600 font-medium text-sm mb-6">
|
|
Potencializado por IA 🚀
|
|
</div>
|
|
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-gray-900 mb-6">
|
|
Transforme a educação com
|
|
<span className="text-purple-600"> histórias inteligentes</span>
|
|
</h1>
|
|
<p className="text-xl text-gray-600 mb-8">
|
|
Uma plataforma educacional que usa IA para criar experiências de
|
|
aprendizado personalizadas através de histórias interativas.
|
|
</p>
|
|
<div className="flex flex-col sm:flex-row gap-4">
|
|
<button
|
|
onClick={handleSchoolRegister}
|
|
className="bg-purple-600 text-white px-8 py-4 rounded-xl hover:bg-purple-700 transition flex items-center justify-center gap-2 text-lg font-semibold"
|
|
>
|
|
Começar Gratuitamente
|
|
<ArrowRight className="w-5 h-5" />
|
|
</button>
|
|
<button
|
|
onClick={handleDemo}
|
|
className="border-2 border-purple-600 text-purple-600 px-8 py-4 rounded-xl hover:bg-purple-50 transition text-lg font-semibold flex items-center justify-center gap-2"
|
|
>
|
|
<Play className="w-5 h-5" />
|
|
Ver Demo
|
|
</button>
|
|
</div>
|
|
<div className="mt-8 flex items-center gap-4">
|
|
<div className="flex -space-x-2">
|
|
{[1,2,3,4].map((i) => (
|
|
<img
|
|
key={i}
|
|
src={`/avatars/${i}.jpg`}
|
|
alt=""
|
|
className="w-8 h-8 rounded-full border-2 border-white"
|
|
/>
|
|
))}
|
|
</div>
|
|
<div className="text-sm text-gray-600">
|
|
<span className="text-purple-600 font-semibold">+1000 escolas</span> já
|
|
transformaram sua educação
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="relative">
|
|
<div className="aspect-video rounded-xl overflow-hidden shadow-2xl">
|
|
<img
|
|
src="/demo-platform.png"
|
|
alt="Platform demo"
|
|
className="w-full h-full object-cover"
|
|
/>
|
|
<button
|
|
onClick={handleDemo}
|
|
className="absolute inset-0 flex items-center justify-center bg-black/30 hover:bg-black/40 transition group"
|
|
>
|
|
<div className="w-16 h-16 rounded-full bg-white/90 flex items-center justify-center">
|
|
<Play className="w-8 h-8 text-purple-600 group-hover:scale-110 transition" />
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Student Journey Section */}
|
|
<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">
|
|
Jornada do Aluno
|
|
</h2>
|
|
<p className="text-gray-600 max-w-2xl mx-auto">
|
|
Um processo inteligente e envolvente de aprendizado
|
|
</p>
|
|
</div>
|
|
|
|
<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."
|
|
/>
|
|
|
|
<ProcessStep
|
|
number={2}
|
|
title="Personalize os personagens"
|
|
description="Crie personagens que seu filho vai adorar, com características únicas e cativantes."
|
|
/>
|
|
|
|
<ProcessStep
|
|
number={3}
|
|
title="A IA cria a história mágica"
|
|
description="Nossa IA educacional gera uma história personalizada em segundos."
|
|
/>
|
|
|
|
<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>
|
|
|
|
{/* 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>
|
|
<p className="text-gray-600 max-w-2xl mx-auto">
|
|
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={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="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="Ferramentas para professores trabalharem juntos e compartilharem recursos"
|
|
/>
|
|
<FeatureCard
|
|
icon={Shield}
|
|
title="Ambiente Seguro"
|
|
description="Proteção de dados e conteúdo adequado para todas as idades"
|
|
/>
|
|
<FeatureCard
|
|
icon={GraduationCap}
|
|
title="Suporte Pedagógico"
|
|
description="Recursos e orientações para maximizar o potencial de aprendizagem"
|
|
/>
|
|
</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>
|
|
|
|
{/* 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>
|
|
|
|
{/* Pricing Section */}
|
|
<div className="mt-24">
|
|
<PlanForSchools />
|
|
</div>
|
|
|
|
{/* 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-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={() => 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>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Footer */}
|
|
<Footer />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default HomePage;
|