mirror of
https://github.com/lucasrcsantana/story-generator.git
synced 2025-12-17 05:47:52 +00:00
feat: Ajustando EducationalForParents
This commit is contained in:
Lucas Santana
parent
6398e2ac81
commit
a45ebd2719
@ -1,425 +1,265 @@
|
||||
import React from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import {
|
||||
ArrowRight, Wand2, Shield, Star, BookOpen,
|
||||
Brain, Target, Users, Award, CheckCircle,
|
||||
Clock, Heart, Sparkles, ScrollText, Lock, X,
|
||||
Facebook, Instagram, Twitter, Youtube
|
||||
import {
|
||||
ArrowRight,
|
||||
Brain,
|
||||
BookOpen,
|
||||
Target,
|
||||
Wand2,
|
||||
Star,
|
||||
Shield,
|
||||
Sparkles,
|
||||
ScrollText,
|
||||
Lock,
|
||||
Heart,
|
||||
Facebook,
|
||||
Instagram,
|
||||
Twitter,
|
||||
Youtube,
|
||||
CheckCircle,
|
||||
LineChart,
|
||||
Clock
|
||||
} 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 { FAQ } from '@/components/ui/faq';
|
||||
import { Footer } from '@/components/ui/footer';
|
||||
|
||||
export function EducationalForParents(): JSX.Element {
|
||||
const navigate = useNavigate();
|
||||
|
||||
export function EducationalForParents() {
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
{/* 1. Hero Section */}
|
||||
<section className="relative overflow-hidden bg-gradient-to-b from-purple-50 via-white to-purple-50">
|
||||
<div className="absolute inset-0 bg-[url('/patterns/magic.svg')] opacity-5" />
|
||||
<div className="px-4 py-24 mx-auto max-w-7xl relative">
|
||||
{/* Reading Time */}
|
||||
<div className="absolute top-8 right-8 flex items-center gap-2 text-sm text-gray-500">
|
||||
<Clock className="h-4 w-4" />
|
||||
<span>Tempo de leitura: 5 minutos</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col md:flex-row items-center gap-16">
|
||||
<div className="flex-1 space-y-8">
|
||||
<h1 className="text-6xl font-bold text-gray-900 leading-tight">
|
||||
Transforme o Aprendizado em Uma
|
||||
<span className="block bg-gradient-to-r from-purple-600 to-blue-500 bg-clip-text text-transparent">
|
||||
Aventura Mágica
|
||||
</span>
|
||||
</h1>
|
||||
|
||||
<p className="text-xl text-gray-600 leading-relaxed">
|
||||
Histórias educativas personalizadas que encantam e ensinam, criadas especialmente
|
||||
para o desenvolvimento único do seu filho.
|
||||
</p>
|
||||
|
||||
<div className="flex gap-4">
|
||||
<button
|
||||
onClick={() => navigate('/register/parent')}
|
||||
className="group px-8 py-4 bg-gradient-to-r from-purple-600 to-blue-500
|
||||
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
|
||||
<ArrowRight className="inline-block ml-2 h-5 w-5
|
||||
group-hover:translate-x-1 transition-transform" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Social Proof */}
|
||||
<div className="flex gap-8 text-sm text-gray-600">
|
||||
<div className="flex items-center gap-2">
|
||||
<BookOpen className="h-5 w-5 text-purple-600" />
|
||||
<span>Mais de 10.000 histórias mágicas criadas</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Users className="h-5 w-5 text-blue-500" />
|
||||
<span>5.000 pequenos leitores encantados</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="min-h-screen bg-white">
|
||||
{/* Hero Section */}
|
||||
<div className="relative isolate overflow-hidden bg-gradient-to-b from-purple-100/20">
|
||||
<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="mx-auto max-w-2xl lg:mx-0 flex-shrink-0 lg:pt-8">
|
||||
<div className="absolute right-4 top-4 text-gray-600 flex items-center gap-2">
|
||||
<Clock className="w-4 h-4" />
|
||||
<span className="text-sm">Tempo de leitura: 5 minutos</span>
|
||||
</div>
|
||||
|
||||
<div className="flex-1">
|
||||
<div className="relative">
|
||||
<div className="absolute -inset-4 bg-gradient-to-r from-purple-600 to-blue-500
|
||||
rounded-2xl blur-lg opacity-20" />
|
||||
<img
|
||||
src="/images/magic-book.webp"
|
||||
alt="Crianças mergulhadas em um livro mágico"
|
||||
className="relative rounded-2xl shadow-2xl transform hover:scale-[1.02]
|
||||
transition-transform"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 2. Problema & Soluçã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">
|
||||
Desafios que Todo Pai Enfrenta
|
||||
</h2>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-16">
|
||||
{challenges.map((challenge, index) => (
|
||||
<div key={index} className="p-6 bg-purple-50 rounded-xl">
|
||||
<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}
|
||||
className="bg-white p-6 rounded-xl shadow-sm hover:shadow-md
|
||||
transform hover:scale-105 transition-all"
|
||||
|
||||
<h1 className="mt-10 text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
|
||||
Transforme o<br />
|
||||
Aprendizado em<br />
|
||||
Uma <span className="text-purple-600">Aventura Mágica</span>
|
||||
</h1>
|
||||
|
||||
<p className="mt-6 text-lg leading-8 text-gray-600 max-w-xl">
|
||||
Histórias educativas personalizadas que encantam e ensinam,
|
||||
criadas especialmente para o desenvolvimento único do seu filho.
|
||||
</p>
|
||||
|
||||
<div className="mt-10">
|
||||
<button
|
||||
onClick={() => window.location.href = '/cadastro'}
|
||||
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"
|
||||
>
|
||||
<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>
|
||||
Comece Sua Aventura Mágica Grátis
|
||||
<ArrowRight className="w-5 h-5" />
|
||||
</button>
|
||||
</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 className="relative">
|
||||
<img
|
||||
src="/images/dashboard-preview.webp"
|
||||
alt="Portal dos Pais"
|
||||
className="rounded-xl shadow-2xl"
|
||||
/>
|
||||
<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 className="mt-10 flex items-center gap-x-8 text-sm text-gray-600">
|
||||
<div className="flex items-center gap-x-2">
|
||||
<BookOpen className="w-5 h-5 text-purple-600" />
|
||||
<span>Mais de 10.000 histórias mágicas criadas</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-x-2">
|
||||
<Target className="w-5 h-5 text-purple-600" />
|
||||
<span>5.000 pequenos leitores encantados</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 6. Testimoniais */}
|
||||
<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">
|
||||
<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="max-w-3xl flex-none sm:max-w-5xl lg:max-w-none">
|
||||
<img
|
||||
src="/images/hero-image.webp"
|
||||
alt="Crianças mergulhadas em um livro mágico"
|
||||
className="w-[76rem] rounded-md bg-white/5 shadow-2xl ring-1 ring-white/10"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Challenges 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">
|
||||
Desafios da Educação Moderna
|
||||
</h2>
|
||||
<p className="mt-4 text-lg leading-8 text-gray-600">
|
||||
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) => (
|
||||
<InfoCard
|
||||
key={index}
|
||||
icon={challenge.icon}
|
||||
title={challenge.title}
|
||||
description={challenge.description}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Magic Process 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">
|
||||
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>
|
||||
</div>
|
||||
|
||||
{/* Comparison Section */}
|
||||
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24">
|
||||
<ComparisonSection
|
||||
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
|
||||
</h2>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{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>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 7. Planos */}
|
||||
<PlanForParents />
|
||||
|
||||
{/* 8. FAQ */}
|
||||
<FAQ
|
||||
title="Dúvidas Frequentes dos Educadores"
|
||||
description="Tire suas dúvidas sobre como o Histórias Mágicas pode transformar sua sala de aula"
|
||||
items={[
|
||||
{
|
||||
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."
|
||||
}
|
||||
]}
|
||||
/>
|
||||
|
||||
{/* 9. CTA Final */}
|
||||
<section className="px-4 py-24 bg-gradient-to-br from-purple-600 to-blue-500 text-white">
|
||||
<div className="mx-auto max-w-3xl text-center">
|
||||
<h2 className="text-4xl font-bold mb-8">
|
||||
Comece a Jornada Mágica Hoje
|
||||
</h2>
|
||||
|
||||
<p className="text-xl opacity-90 mb-12">
|
||||
Transforme a educação do seu filho em uma aventura inesquecível
|
||||
</p>
|
||||
|
||||
<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
|
||||
onClick={() => navigate('/register/parent')}
|
||||
className="px-12 py-6 bg-white text-purple-600 rounded-xl text-xl font-bold
|
||||
hover:bg-gray-100 transform hover:scale-105 transition-all shadow-lg"
|
||||
>
|
||||
Criar Conta Gratuita
|
||||
<ArrowRight className="inline-block ml-2 h-6 w-6" />
|
||||
</button>
|
||||
|
||||
<p className="mt-6 text-sm opacity-75">
|
||||
Garantia de 30 dias ou seu dinheiro de volta
|
||||
<p className="mt-4 text-lg leading-8 text-gray-600">
|
||||
Veja como o Histórias Mágicas está transformando a vida de famílias por todo o Brasil.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<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>
|
||||
|
||||
{/* Pricing Section */}
|
||||
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24">
|
||||
<PlanForParents />
|
||||
</div>
|
||||
|
||||
{/* 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
|
||||
title="Dúvidas Frequentes"
|
||||
description="Encontre respostas para as perguntas mais comuns sobre nossa plataforma."
|
||||
items={faqItems}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Final CTA */}
|
||||
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24">
|
||||
<div className="rounded-3xl bg-purple-600 px-8 py-16">
|
||||
<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
|
||||
</h2>
|
||||
<p className="mx-auto mt-6 max-w-xl text-lg leading-8 text-white/90">
|
||||
Junte-se a milhares de famílias que já descobriram o poder da leitura personalizada.
|
||||
</p>
|
||||
<div className="mt-10 flex items-center justify-center gap-x-6">
|
||||
<button
|
||||
onClick={() => window.location.href = '/cadastro'}
|
||||
className="rounded-xl bg-white px-3.5 py-2.5 text-sm font-semibold text-purple-600 shadow-sm hover:bg-purple-50"
|
||||
>
|
||||
Começar Gratuitamente
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
@ -428,18 +268,18 @@ export function EducationalForParents(): JSX.Element {
|
||||
const challenges = [
|
||||
{
|
||||
icon: Brain,
|
||||
title: "Manter as crianças interessadas em aprender",
|
||||
description: "É difícil competir com jogos e vídeos para capturar a atenção das crianças."
|
||||
title: 'Dificuldade de Concentração',
|
||||
description: 'Crianças têm dificuldade em manter o foco em métodos tradicionais de leitura.'
|
||||
},
|
||||
{
|
||||
icon: BookOpen,
|
||||
title: "Encontrar conteúdo educativo de qualidade",
|
||||
description: "Muito conteúdo disponível, mas pouco realmente educativo e envolvente."
|
||||
title: 'Falta de Engajamento',
|
||||
description: 'Livros convencionais nem sempre capturam a imaginação das crianças modernas.'
|
||||
},
|
||||
{
|
||||
icon: Target,
|
||||
title: "Acompanhar o desenvolvimento da criança",
|
||||
description: "Falta de ferramentas para monitorar o progresso de forma clara e objetiva."
|
||||
title: 'Progresso Lento',
|
||||
description: 'Pais têm dificuldade em acompanhar e estimular o desenvolvimento da leitura.'
|
||||
}
|
||||
];
|
||||
|
||||
@ -468,147 +308,152 @@ const benefits = [
|
||||
|
||||
const magicSteps = [
|
||||
{
|
||||
title: "Escolha o tema da aventura",
|
||||
description: "Selecione entre diversos temas educativos alinhados com a BNCC e adequados à idade."
|
||||
title: 'Escolha do Tema',
|
||||
description: 'Selecione entre diversos temas educativos que despertam o interesse do seu filho.'
|
||||
},
|
||||
{
|
||||
title: "Personalize os personagens",
|
||||
description: "Crie personagens que seu filho vai adorar, com características únicas e cativantes."
|
||||
title: 'Personalização Mágica',
|
||||
description: 'Crie personagens que se conectam com a realidade e interesses da criança.'
|
||||
},
|
||||
{
|
||||
title: "A IA cria a história mágica",
|
||||
description: "Nossa IA educacional gera uma história personalizada em segundos."
|
||||
title: 'Geração da História',
|
||||
description: 'Nossa IA cria uma narrativa única, adaptada ao nível de leitura do seu filho.'
|
||||
},
|
||||
{
|
||||
title: "A aventura educativa começa",
|
||||
description: "Seu filho mergulha em uma jornada mágica de aprendizado e diversão."
|
||||
title: 'Aventura Educativa',
|
||||
description: 'Acompanhe o progresso enquanto seu filho se diverte aprendendo.'
|
||||
}
|
||||
];
|
||||
|
||||
const comparisonData = [
|
||||
{
|
||||
title: "Tempo & Diversão",
|
||||
title: 'Tempo & Diversão',
|
||||
without: [
|
||||
"Horas procurando conteúdo educativo adequado",
|
||||
"Crianças entediadas com leituras tradicionais",
|
||||
"Histórias que não capturam a imaginação",
|
||||
"Dificuldade em acompanhar o progresso"
|
||||
'Horas procurando conteúdo educativo adequado',
|
||||
'Crianças entediadas com leituras tradicionais',
|
||||
'Histórias que não capturam a imaginação',
|
||||
'Dificuldade em acompanhar o progresso'
|
||||
],
|
||||
with: [
|
||||
"Histórias mágicas personalizadas em minutos",
|
||||
"Crianças fascinadas por aventuras únicas",
|
||||
"Mundos mágicos que educam e encantam",
|
||||
"Portal mágico de acompanhamento do progresso"
|
||||
'Histórias mágicas personalizadas em minutos',
|
||||
'Crianças fascinadas por aventuras únicas',
|
||||
'Mundos mágicos que educam e encantam',
|
||||
'Portal mágico de acompanhamento do progresso'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Qualidade do Aprendizado",
|
||||
title: 'Qualidade do Aprendizado',
|
||||
without: [
|
||||
"Conteúdo genérico e previsível",
|
||||
"Falta de conexão emocional com a leitura",
|
||||
"Dificuldade em manter o interesse",
|
||||
"Aprendizado fragmentado"
|
||||
'Conteúdo genérico e previsível',
|
||||
'Falta de conexão emocional com a leitura',
|
||||
'Dificuldade em manter o interesse',
|
||||
'Aprendizado fragmentado'
|
||||
],
|
||||
with: [
|
||||
"Histórias que evoluem com cada criança",
|
||||
"Conexão emocional com personagens únicos",
|
||||
"Aventuras que mesclam diversão e educação",
|
||||
"Jornada de aprendizado mágica e integrada"
|
||||
'Histórias que evoluem com cada criança',
|
||||
'Conexão emocional com personagens únicos',
|
||||
'Aventuras que mesclam diversão e educação',
|
||||
'Jornada de aprendizado mágica e integrada'
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Resultados",
|
||||
title: 'Resultados',
|
||||
without: [
|
||||
"Progresso lento e desmotivador",
|
||||
"Resistência à leitura e aprendizado",
|
||||
"Rotina de estudos cansativa",
|
||||
"Pais preocupados com desenvolvimento"
|
||||
'Progresso lento e desmotivador',
|
||||
'Resistência à leitura e aprendizado',
|
||||
'Rotina de estudos cansativa',
|
||||
'Pais preocupados com desenvolvimento'
|
||||
],
|
||||
with: [
|
||||
"Evolução visível e empolgante",
|
||||
"Amor natural pela leitura e conhecimento",
|
||||
"Aventuras diárias de aprendizado",
|
||||
"Pais confiantes no desenvolvimento mágico"
|
||||
'Evolução visível e empolgante',
|
||||
'Amor natural pela leitura e conhecimento',
|
||||
'Aventuras diárias de aprendizado',
|
||||
'Pais confiantes no desenvolvimento mágico'
|
||||
]
|
||||
}
|
||||
];
|
||||
];
|
||||
|
||||
const detailedBenefits = [
|
||||
{
|
||||
icon: Wand2,
|
||||
title: "Aprendizado Através de Aventuras",
|
||||
description: "Histórias que se adaptam ao nível e interesses do seu filho, tornando o aprendizado natural e divertido."
|
||||
title: 'Histórias Personalizadas',
|
||||
description: 'Narrativas únicas que se adaptam aos interesses e nível de leitura do seu filho.'
|
||||
},
|
||||
{
|
||||
icon: ScrollText,
|
||||
title: "Portal dos Pais",
|
||||
description: "Acompanhe em tempo real o progresso de leitura, compreensão e desenvolvimento do seu filho."
|
||||
icon: Star,
|
||||
title: 'Aprendizado Divertido',
|
||||
description: 'Transformamos o processo de leitura em uma aventura mágica e envolvente.'
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Proteção Mágica",
|
||||
description: "Conteúdo 100% seguro e adequado, com moderação constante e controles parentais."
|
||||
title: 'Ambiente Seguro',
|
||||
description: 'Conteúdo apropriado para a idade e monitoramento constante do progresso.'
|
||||
},
|
||||
{
|
||||
icon: BookOpen,
|
||||
title: "Alinhamento com BNCC",
|
||||
description: "Histórias criadas seguindo as diretrizes da Base Nacional Comum Curricular."
|
||||
icon: Sparkles,
|
||||
title: 'Recompensas Mágicas',
|
||||
description: 'Sistema de conquistas que motiva e celebra o progresso da criança.'
|
||||
},
|
||||
{
|
||||
icon: Brain,
|
||||
title: "IA Educacional",
|
||||
description: "Nossa inteligência artificial analisa o perfil do seu filho para criar histórias personalizadas e adaptativas."
|
||||
icon: ScrollText,
|
||||
title: 'Relatórios Detalhados',
|
||||
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 = [
|
||||
{
|
||||
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",
|
||||
text: "Minha filha passou de resistente à leitura para não querer parar de ler! As histórias personalizadas fizeram toda a diferença.",
|
||||
name: "Ana Silva",
|
||||
role: "Mãe da Maria, 8 anos",
|
||||
magicMoment: "Primeira história completa lida sozinha"
|
||||
magicMoment: "Sofia leu sua primeira história sozinha após 2 semanas"
|
||||
},
|
||||
{
|
||||
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",
|
||||
text: "Como pai, é incrível ver o progresso do Pedro. O portal dos pais me ajuda a entender exatamente onde ele precisa de apoio.",
|
||||
name: "Carlos Santos",
|
||||
role: "Pai do Pedro, 10 anos",
|
||||
magicMoment: "Superou a dificuldade com palavras complexas"
|
||||
magicMoment: "Lucas aumentou seu vocabulário em 40% em 3 meses"
|
||||
},
|
||||
{
|
||||
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",
|
||||
text: "As histórias são tão envolventes que meu filho pede para ler mais uma toda noite. O aprendizado acontece naturalmente!",
|
||||
name: "Juliana Costa",
|
||||
role: "Mãe do Lucas, 7 anos",
|
||||
magicMoment: "Começou a criar suas próprias histórias"
|
||||
magicMoment: "Laura passou de leitora básica para avançada"
|
||||
}
|
||||
];
|
||||
|
||||
const faqItems = [
|
||||
{
|
||||
question: "Como a magia da IA funciona?",
|
||||
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."
|
||||
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: "Como garantimos histórias seguras?",
|
||||
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."
|
||||
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 a evolução mágica?",
|
||||
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."
|
||||
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: "Qual é a política de cancelamento?",
|
||||
answer: "Você pode cancelar sua assinatura a qualquer momento, sem multas. Oferecemos garantia de 30 dias - se não estiver satisfeito, devolvemos seu dinheiro."
|
||||
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: "Quantas histórias mágicas por mês?",
|
||||
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."
|
||||
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: "Como funciona o suporte aos pais?",
|
||||
answer: "Oferecemos suporte via chat, email e telefone, com especialistas em educação prontos para ajudar. Planos premium incluem acesso a pedagogos."
|
||||
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."
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user