mirror of
https://github.com/lucasrcsantana/story-generator.git
synced 2025-12-17 05:47:52 +00:00
feat: adiciona seção antes e depois na landing page
- Implementa comparação visual do antes/depois - Adiciona lista de benefícios e melhorias - Inclui métricas de resultados - Melhora apresentação visual com ícones e cores - Mantém consistência com design system
This commit is contained in:
Lucas Santana
parent
abf0033590
commit
6f03e72a22
@ -1,35 +1,103 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { BookOpen, Users, Shield, Sparkles, ArrowRight, School, BookCheck, Brain, BarChart, GraduationCap } from 'lucide-react';
|
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
import {
|
||||||
|
BookOpen, ArrowRight, School, Users, Shield,
|
||||||
|
Sparkles, BookCheck, Play, CheckCircle, Star,
|
||||||
|
GraduationCap, BarChart, Brain, Check, X
|
||||||
|
} from 'lucide-react';
|
||||||
|
|
||||||
|
// Components
|
||||||
|
const FeatureCard = ({ icon, title, description }: {
|
||||||
|
icon: React.ReactNode;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
}) => (
|
||||||
|
<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 PriceCard = ({
|
||||||
|
plan,
|
||||||
|
price,
|
||||||
|
description,
|
||||||
|
features,
|
||||||
|
highlighted = false
|
||||||
|
}: {
|
||||||
|
plan: string;
|
||||||
|
price: string;
|
||||||
|
description: string;
|
||||||
|
features: string[];
|
||||||
|
highlighted?: boolean;
|
||||||
|
}) => (
|
||||||
|
<div className={`p-6 rounded-xl border ${
|
||||||
|
highlighted ? 'border-purple-600 shadow-lg' : 'border-gray-200'
|
||||||
|
}`}>
|
||||||
|
<div className="text-xl font-semibold text-gray-900 mb-2">{plan}</div>
|
||||||
|
<div className="text-3xl font-bold text-gray-900 mb-2">
|
||||||
|
R$ {price}<span className="text-sm font-normal text-gray-600">/mês</span>
|
||||||
|
</div>
|
||||||
|
<p className="text-gray-600 mb-6">{description}</p>
|
||||||
|
<ul className="space-y-3 mb-6">
|
||||||
|
{features.map((feature, index) => (
|
||||||
|
<li key={index} className="flex items-center gap-2">
|
||||||
|
<CheckCircle className="w-5 h-5 text-purple-600" />
|
||||||
|
<span className="text-gray-600">{feature}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
<button className={`w-full py-2 px-4 rounded-lg transition ${
|
||||||
|
highlighted
|
||||||
|
? 'bg-purple-600 text-white hover:bg-purple-700'
|
||||||
|
: 'border border-purple-600 text-purple-600 hover:bg-purple-50'
|
||||||
|
}`}>
|
||||||
|
Começar agora
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
export function HomePage() {
|
export function HomePage() {
|
||||||
const navigate = useNavigate();
|
const navigate = useNavigate();
|
||||||
const [showUserOptions, setShowUserOptions] = useState(false);
|
const [showUserOptions, setShowUserOptions] = useState(false);
|
||||||
|
const [activeTab, setActiveTab] = useState('schools');
|
||||||
|
const [showFaq, setShowFaq] = useState<number | null>(null);
|
||||||
|
|
||||||
// Funções de navegação
|
// Navigation handlers
|
||||||
const handleLoginClick = () => {
|
const handleLoginClick = () => setShowUserOptions(!showUserOptions);
|
||||||
setShowUserOptions(true);
|
const handleSchoolLogin = () => navigate('/login/school');
|
||||||
};
|
const handleTeacherLogin = () => navigate('/login/teacher');
|
||||||
|
const handleStudentLogin = () => navigate('/login/student');
|
||||||
const handleSchoolLogin = () => {
|
const handleSchoolRegister = () => navigate('/register/school');
|
||||||
navigate('/login/school');
|
const handleDemo = () => navigate('/demo');
|
||||||
};
|
|
||||||
|
|
||||||
const handleTeacherLogin = () => {
|
|
||||||
navigate('/login/teacher');
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleStudentLogin = () => {
|
|
||||||
navigate('/login/student');
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSchoolRegister = () => {
|
|
||||||
navigate('/register/school');
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDemo = () => {
|
|
||||||
navigate('/demo');
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-b from-purple-50 to-white">
|
<div className="min-h-screen bg-gradient-to-b from-purple-50 to-white">
|
||||||
@ -88,29 +156,68 @@ export function HomePage() {
|
|||||||
{/* Hero Section */}
|
{/* Hero Section */}
|
||||||
<div className="pt-32 pb-20 px-4 sm:px-6 lg:px-8">
|
<div className="pt-32 pb-20 px-4 sm:px-6 lg:px-8">
|
||||||
<div className="max-w-7xl mx-auto">
|
<div className="max-w-7xl mx-auto">
|
||||||
<div className="text-center">
|
<div className="grid lg:grid-cols-2 gap-12 items-center">
|
||||||
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-gray-900 mb-6">
|
<div>
|
||||||
Transforme a Educação com
|
<div className="inline-block px-4 py-1 rounded-full bg-purple-100 text-purple-600 font-medium text-sm mb-6">
|
||||||
<span className="text-purple-600"> Histórias Interativas</span>
|
Potencializado por IA 🚀
|
||||||
</h1>
|
</div>
|
||||||
<p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
|
<h1 className="text-4xl sm:text-5xl md:text-6xl font-bold text-gray-900 mb-6">
|
||||||
Uma plataforma educacional que conecta escolas, professores e alunos através
|
Transforme a educação com
|
||||||
de histórias personalizadas e experiências de aprendizado únicas.
|
<span className="text-purple-600"> histórias inteligentes</span>
|
||||||
</p>
|
</h1>
|
||||||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
<p className="text-xl text-gray-600 mb-8">
|
||||||
<button
|
Uma plataforma educacional que usa IA para criar experiências de
|
||||||
onClick={handleSchoolRegister}
|
aprendizado personalizadas através de histórias interativas.
|
||||||
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"
|
</p>
|
||||||
>
|
<div className="flex flex-col sm:flex-row gap-4">
|
||||||
Cadastrar sua Escola
|
<button
|
||||||
<ArrowRight className="w-5 h-5" />
|
onClick={handleSchoolRegister}
|
||||||
</button>
|
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"
|
||||||
<button
|
>
|
||||||
onClick={handleDemo}
|
Começar Gratuitamente
|
||||||
className="border-2 border-purple-600 text-purple-600 px-8 py-4 rounded-xl hover:bg-purple-50 transition text-lg font-semibold"
|
<ArrowRight className="w-5 h-5" />
|
||||||
>
|
</button>
|
||||||
Ver Demonstração
|
<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>
|
||||||
</div>
|
</div>
|
||||||
@ -163,81 +270,92 @@ export function HomePage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* How it Works */}
|
{/* Before & After Section */}
|
||||||
<div className="py-20 bg-gray-50">
|
|
||||||
<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">
|
|
||||||
Como Funciona
|
|
||||||
</h2>
|
|
||||||
<p className="text-gray-600 max-w-2xl mx-auto">
|
|
||||||
Em apenas três passos, sua escola pode começar a transformar a educação
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid md:grid-cols-3 gap-8">
|
|
||||||
{[
|
|
||||||
{
|
|
||||||
step: '01',
|
|
||||||
title: 'Cadastre sua Escola',
|
|
||||||
description: 'Processo simples e rápido de registro institucional'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
step: '02',
|
|
||||||
title: 'Configure as Turmas',
|
|
||||||
description: 'Adicione professores e alunos às suas turmas'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
step: '03',
|
|
||||||
title: 'Comece a Jornada',
|
|
||||||
description: 'Acesse histórias personalizadas e acompanhe o progresso'
|
|
||||||
}
|
|
||||||
].map((item, index) => (
|
|
||||||
<div key={index} className="relative">
|
|
||||||
<div className="text-4xl font-bold text-purple-200 mb-4">
|
|
||||||
{item.step}
|
|
||||||
</div>
|
|
||||||
<h3 className="text-xl font-semibold text-gray-900 mb-2">
|
|
||||||
{item.title}
|
|
||||||
</h3>
|
|
||||||
<p className="text-gray-600">{item.description}</p>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Testimonials */}
|
|
||||||
<div className="py-20 bg-white">
|
<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="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">
|
||||||
O Que Dizem Sobre Nós
|
Transforme a Experiência de Aprendizagem
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-gray-600 max-w-2xl mx-auto">
|
<p className="text-gray-600 max-w-2xl mx-auto">
|
||||||
Histórias reais de escolas que transformaram sua educação
|
Veja como o Histórias Mágicas revoluciona o ensino
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid md:grid-cols-3 gap-8">
|
<div className="grid md:grid-cols-2 gap-16">
|
||||||
<TestimonialCard
|
{/* Before */}
|
||||||
quote="A plataforma revolucionou nossa forma de ensinar. Os alunos estão mais engajados do que nunca."
|
<div className="rounded-2xl bg-red-50 p-8">
|
||||||
author="Maria Silva"
|
<div className="flex items-center gap-3 mb-6">
|
||||||
role="Diretora Pedagógica"
|
<div className="w-12 h-12 rounded-full bg-red-100 flex items-center justify-center">
|
||||||
image="/testimonials/1.jpg"
|
<X className="w-6 h-6 text-red-600" />
|
||||||
/>
|
</div>
|
||||||
<TestimonialCard
|
<h3 className="text-2xl font-semibold text-gray-900">Antes</h3>
|
||||||
quote="O suporte da IA nos ajuda a personalizar o ensino de forma que antes era impossível."
|
</div>
|
||||||
author="João Santos"
|
<ul className="space-y-4">
|
||||||
role="Professor de História"
|
{[
|
||||||
image="/testimonials/2.jpg"
|
'Conteúdo padronizado que não atende necessidades individuais',
|
||||||
/>
|
'Alunos desmotivados com material didático tradicional',
|
||||||
<TestimonialCard
|
'Professores sobrecarregados com correções manuais',
|
||||||
quote="Nossos índices de engajamento aumentaram 300% desde que começamos a usar."
|
'Dificuldade em acompanhar o progresso individual',
|
||||||
author="Ana Oliveira"
|
'Baixo engajamento nas atividades de leitura e escrita',
|
||||||
role="Coordenadora"
|
'Falta de dados para tomada de decisão pedagógica'
|
||||||
image="/testimonials/3.jpg"
|
].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" />
|
||||||
|
</div>
|
||||||
|
<span className="text-gray-600">{item}</span>
|
||||||
|
</li>
|
||||||
|
))}
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* After */}
|
||||||
|
<div className="rounded-2xl bg-green-50 p-8">
|
||||||
|
<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>
|
||||||
</div>
|
</div>
|
||||||
@ -331,36 +449,4 @@ export function HomePage() {
|
|||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
|
||||||
|
|
||||||
interface FeatureCardProps {
|
|
||||||
icon: React.ReactNode;
|
|
||||||
title: string;
|
|
||||||
description: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
function FeatureCard({ icon, title, description }: FeatureCardProps) {
|
|
||||||
return (
|
|
||||||
<div className="bg-gray-50 p-6 rounded-xl hover:shadow-lg transition">
|
|
||||||
<div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center text-purple-600 mb-4">
|
|
||||||
{icon}
|
|
||||||
</div>
|
|
||||||
<h3 className="text-xl font-semibold text-gray-900 mb-2">{title}</h3>
|
|
||||||
<p className="text-gray-600">{description}</p>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
interface StatCardProps {
|
|
||||||
number: string;
|
|
||||||
label: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
function StatCard({ number, label }: StatCardProps) {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<div className="text-4xl font-bold mb-2">{number}</div>
|
|
||||||
<div className="text-purple-200">{label}</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user