mirror of
https://github.com/lucasrcsantana/story-generator.git
synced 2025-12-17 05:47:52 +00:00
Consolidando estilos
This commit is contained in:
Lucas Santana
parent
0ccea7c7b9
commit
6398e2ac81
@ -4,54 +4,17 @@ import {
|
|||||||
BookOpen, ArrowRight, School, Users, Shield,
|
BookOpen, ArrowRight, School, Users, Shield,
|
||||||
Sparkles, BookCheck, Play, CheckCircle, Star,
|
Sparkles, BookCheck, Play, CheckCircle, Star,
|
||||||
GraduationCap, BarChart, Brain, X, Check,
|
GraduationCap, BarChart, Brain, X, Check,
|
||||||
Pencil,
|
Pencil, Wand, Mic, Share2
|
||||||
Wand,
|
|
||||||
Mic,
|
|
||||||
Share2
|
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
import { Footer } from '@/components/ui/footer';
|
import { Footer } from '@/components/ui/footer';
|
||||||
import { PlanForSchools } from '@/components/ui/plan-for-schools';
|
import { PlanForSchools } from '@/components/ui/plan-for-schools';
|
||||||
import { FAQ } from '@/components/ui/faq';
|
import { FAQ } from '@/components/ui/faq';
|
||||||
|
import { StatCard } from '@/components/ui/stat-card';
|
||||||
// Components
|
import { TestimonialCard } from '@/components/ui/testimonial-card';
|
||||||
const FeatureCard = ({ icon, title, description }: {
|
import { FeatureCard } from '@/components/ui/feature-card';
|
||||||
icon: React.ReactNode;
|
import { ProcessStep } from '@/components/ui/process-step';
|
||||||
title: string;
|
import { InfoCard } from '@/components/ui/info-card';
|
||||||
description: string;
|
import { ComparisonSection } from '@/components/ui/comparison-section';
|
||||||
}) => (
|
|
||||||
<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>
|
|
||||||
);
|
|
||||||
|
|
||||||
const navigation = [
|
const navigation = [
|
||||||
{ name: 'Início', href: '/' },
|
{ name: 'Início', href: '/' },
|
||||||
@ -131,7 +94,7 @@ export function HomePage() {
|
|||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
{/* Hero Section */}
|
{/* 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="max-w-7xl mx-auto">
|
||||||
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
<div>
|
<div>
|
||||||
@ -201,7 +164,7 @@ export function HomePage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Student Journey Section */}
|
{/* 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="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<div className="text-center mb-16">
|
<div className="text-center mb-16">
|
||||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">
|
<h2 className="text-3xl font-bold text-gray-900 mb-4">
|
||||||
@ -212,136 +175,77 @@ export function HomePage() {
|
|||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="relative">
|
<div className="space-y-12">
|
||||||
{/* Timeline Line */}
|
<ProcessStep
|
||||||
<div className="hidden md:block absolute left-1/2 transform -translate-x-1/2 h-full w-0.5 bg-purple-200" />
|
number={1}
|
||||||
|
title="Escolha o tema da aventura"
|
||||||
|
description="Selecione entre diversos temas educativos alinhados com a BNCC e adequados à idade."
|
||||||
|
/>
|
||||||
|
|
||||||
{/* Timeline Items */}
|
<ProcessStep
|
||||||
{[
|
number={2}
|
||||||
{
|
title="Personalize os personagens"
|
||||||
icon: <Pencil className="w-6 h-6" />,
|
description="Crie personagens que seu filho vai adorar, com características únicas e cativantes."
|
||||||
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>
|
|
||||||
|
|
||||||
{/* Timeline Marker */}
|
<ProcessStep
|
||||||
<div className="hidden md:flex items-center justify-center">
|
number={3}
|
||||||
<div className="w-12 h-12 rounded-full bg-purple-600 text-white flex items-center justify-center font-bold">
|
title="A IA cria a história mágica"
|
||||||
{index + 1}
|
description="Nossa IA educacional gera uma história personalizada em segundos."
|
||||||
</div>
|
/>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Image Side */}
|
<ProcessStep
|
||||||
<div className="flex-1 hidden md:block">
|
number={4}
|
||||||
<img
|
title="A aventura educativa começa"
|
||||||
src={item.image}
|
description="Seu filho mergulha em uma jornada mágica de aprendizado e diversão."
|
||||||
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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Features Grid */}
|
{/* Results Summary */}
|
||||||
<div className="py-20 bg-white">
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
<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-16">
|
<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">
|
<h2 className="text-3xl font-bold text-gray-900 mb-4">
|
||||||
Tecnologia e Educação em Harmonia
|
Tecnologia e Educação em Harmonia
|
||||||
</h2>
|
</h2>
|
||||||
@ -352,179 +256,151 @@ export function HomePage() {
|
|||||||
|
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
||||||
<FeatureCard
|
<FeatureCard
|
||||||
icon={<Brain />}
|
icon={Brain}
|
||||||
title="IA Adaptativa"
|
title="IA Adaptativa"
|
||||||
description="Conteúdo que se adapta ao ritmo e estilo de aprendizagem de cada aluno"
|
description="Conteúdo que se adapta ao ritmo e estilo de aprendizagem de cada aluno"
|
||||||
/>
|
/>
|
||||||
<FeatureCard
|
<FeatureCard
|
||||||
icon={<BookOpen />}
|
icon={BookOpen}
|
||||||
title="Histórias Interativas"
|
title="Histórias Interativas"
|
||||||
description="Narrativas envolventes que tornam o aprendizado mais divertido e eficaz"
|
description="Narrativas envolventes que tornam o aprendizado mais divertido e eficaz"
|
||||||
/>
|
/>
|
||||||
<FeatureCard
|
<FeatureCard
|
||||||
icon={<BarChart />}
|
icon={BarChart}
|
||||||
title="Analytics Avançado"
|
title="Analytics Avançado"
|
||||||
description="Insights detalhados sobre o progresso e engajamento dos alunos"
|
description="Insights detalhados sobre o progresso e engajamento dos alunos"
|
||||||
/>
|
/>
|
||||||
<FeatureCard
|
<FeatureCard
|
||||||
icon={<Users />}
|
icon={Users}
|
||||||
title="Colaboração"
|
title="Colaboração"
|
||||||
description="Ferramentas para professores trabalharem juntos e compartilharem recursos"
|
description="Ferramentas para professores trabalharem juntos e compartilharem recursos"
|
||||||
/>
|
/>
|
||||||
<FeatureCard
|
<FeatureCard
|
||||||
icon={<Shield />}
|
icon={Shield}
|
||||||
title="Ambiente Seguro"
|
title="Ambiente Seguro"
|
||||||
description="Proteção de dados e conteúdo adequado para todas as idades"
|
description="Proteção de dados e conteúdo adequado para todas as idades"
|
||||||
/>
|
/>
|
||||||
<FeatureCard
|
<FeatureCard
|
||||||
icon={<GraduationCap />}
|
icon={GraduationCap}
|
||||||
title="Suporte Pedagógico"
|
title="Suporte Pedagógico"
|
||||||
description="Recursos e orientações para maximizar o potencial de aprendizagem"
|
description="Recursos e orientações para maximizar o potencial de aprendizagem"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Before & After Section */}
|
{/* Before & After Section */}
|
||||||
<div className="py-20 bg-white">
|
<div className="mt-24">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<ComparisonSection
|
||||||
<div className="text-center mb-16">
|
title="Compare a Transformação"
|
||||||
<h2 className="text-3xl font-bold text-gray-900 mb-4">
|
items={[
|
||||||
Transforme a Experiência de Aprendizagem
|
{
|
||||||
</h2>
|
title: "Personalização",
|
||||||
<p className="text-gray-600 max-w-2xl mx-auto">
|
without: [
|
||||||
Veja como o Histórias Mágicas revoluciona o ensino
|
"Conteúdo padronizado que não atende necessidades individuais",
|
||||||
</p>
|
"Material didático tradicional e pouco envolvente",
|
||||||
</div>
|
"Mesma abordagem para todos os alunos"
|
||||||
|
],
|
||||||
<div className="grid md:grid-cols-2 gap-16">
|
with: [
|
||||||
{/* Before */}
|
"Histórias adaptativas que evoluem com cada aluno",
|
||||||
<div className="rounded-2xl bg-red-50 p-8">
|
"Conteúdo personalizado e envolvente",
|
||||||
<div className="flex items-center gap-3 mb-6">
|
"Experiência única para cada estudante"
|
||||||
<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>
|
title: "Engajamento",
|
||||||
</div>
|
without: [
|
||||||
<ul className="space-y-4">
|
"Alunos desmotivados com atividades repetitivas",
|
||||||
{[
|
"Baixo interesse nas atividades de leitura",
|
||||||
'Conteúdo padronizado que não atende necessidades individuais',
|
"Dificuldade em manter a atenção dos alunos"
|
||||||
'Alunos desmotivados com material didático tradicional',
|
],
|
||||||
'Professores sobrecarregados com correções manuais',
|
with: [
|
||||||
'Dificuldade em acompanhar o progresso individual',
|
"Estudantes engajados e participativos",
|
||||||
'Baixo engajamento nas atividades de leitura e escrita',
|
"Aumento de 300% no engajamento com leitura",
|
||||||
'Falta de dados para tomada de decisão pedagógica'
|
"Alunos ansiosos pela próxima atividade"
|
||||||
].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" />
|
title: "Acompanhamento",
|
||||||
</div>
|
without: [
|
||||||
<span className="text-gray-600">{item}</span>
|
"Professores sobrecarregados com correções manuais",
|
||||||
</li>
|
"Dificuldade em acompanhar o progresso individual",
|
||||||
))}
|
"Falta de dados para decisões pedagógicas"
|
||||||
</ul>
|
],
|
||||||
</div>
|
with: [
|
||||||
|
"Correção automática com feedback instantâneo",
|
||||||
{/* After */}
|
"Dashboard em tempo real do progresso individual",
|
||||||
<div className="rounded-2xl bg-green-50 p-8">
|
"Insights precisos para intervenções pedagógicas"
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Pricing */}
|
{/* Testimonials */}
|
||||||
<div className="py-20 bg-gray-50">
|
<div className="mt-24 grid md:grid-cols-2 gap-8">
|
||||||
<PlanForSchools />
|
<TestimonialCard
|
||||||
</div>
|
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 */}
|
{/* Pricing Section */}
|
||||||
<FAQ
|
<div className="mt-24">
|
||||||
title="Dúvidas Frequentes"
|
<PlanForSchools />
|
||||||
description="Tire suas dúvidas sobre como o Histórias Mágicas pode transformar sua escola"
|
</div>
|
||||||
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 */}
|
{/* FAQ Section */}
|
||||||
<div className="py-20">
|
<div className="mt-24">
|
||||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
<FAQ
|
||||||
<div className="bg-gradient-to-r from-purple-600 to-indigo-600 rounded-2xl p-8 md:p-16 text-center text-white">
|
title="Dúvidas Frequentes"
|
||||||
<h2 className="text-3xl md:text-4xl font-bold mb-4">
|
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?
|
Pronto para Transformar sua Escola?
|
||||||
</h2>
|
</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
|
Junte-se a mais de 1000 escolas que já estão revolucionando a educação
|
||||||
</p>
|
</p>
|
||||||
<button
|
<button
|
||||||
onClick={handleSchoolRegister}
|
onClick={() => navigate('/register')}
|
||||||
className="bg-white text-purple-600 px-8 py-4 rounded-xl hover:bg-purple-50 transition text-lg font-semibold"
|
className="bg-white text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-purple-50 transition"
|
||||||
>
|
>
|
||||||
Começar Gratuitamente
|
Começar Gratuitamente
|
||||||
</button>
|
</button>
|
||||||
@ -537,3 +413,5 @@ export function HomePage() {
|
|||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export default HomePage;
|
||||||
81
src/components/ui/comparison-section.tsx
Normal file
81
src/components/ui/comparison-section.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
41
src/components/ui/feature-card.tsx
Normal file
41
src/components/ui/feature-card.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
67
src/components/ui/info-card.tsx
Normal file
67
src/components/ui/info-card.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
34
src/components/ui/process-step.tsx
Normal file
34
src/components/ui/process-step.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
33
src/components/ui/stat-card.tsx
Normal file
33
src/components/ui/stat-card.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
67
src/components/ui/testimonial-card.tsx
Normal file
67
src/components/ui/testimonial-card.tsx
Normal file
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user