mirror of
https://github.com/lucasrcsantana/story-generator.git
synced 2025-12-17 05:47:52 +00:00
feat: redesign da landing page com novas seções
- Adiciona hero section com demo e social proof - Implementa grid de features com ícones - Adiciona seção 'Como Funciona' - Inclui testimonials de usuários - Implementa pricing table - Adiciona CTA final e footer - Melhora UX/UI geral da página
This commit is contained in:
Lucas Santana
parent
4cc6ab641e
commit
abf0033590
@ -1,5 +1,5 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { BookOpen, Users, Shield, Sparkles, ArrowRight, School, BookCheck } from 'lucide-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';
|
||||||
|
|
||||||
export function HomePage() {
|
export function HomePage() {
|
||||||
@ -121,121 +121,212 @@ export function HomePage() {
|
|||||||
<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">
|
||||||
Tudo que você precisa em um só lugar
|
Tecnologia e Educação em Harmonia
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-gray-600 max-w-2xl mx-auto">
|
<p className="text-gray-600 max-w-2xl mx-auto">
|
||||||
Uma plataforma completa para criar, gerenciar e compartilhar histórias educativas
|
Uma plataforma completa que une o poder da IA com as melhores práticas pedagógicas
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<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={<School />}
|
icon={<Brain />}
|
||||||
title="Gestão Escolar"
|
title="IA Adaptativa"
|
||||||
description="Gerencie turmas, professores e alunos de forma simples e eficiente"
|
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="Crie e compartilhe histórias educativas personalizadas"
|
description="Narrativas envolventes que tornam o aprendizado mais divertido e eficaz"
|
||||||
|
/>
|
||||||
|
<FeatureCard
|
||||||
|
icon={<BarChart />}
|
||||||
|
title="Analytics Avançado"
|
||||||
|
description="Insights detalhados sobre o progresso e engajamento dos alunos"
|
||||||
/>
|
/>
|
||||||
<FeatureCard
|
<FeatureCard
|
||||||
icon={<Users />}
|
icon={<Users />}
|
||||||
title="Colaboração"
|
title="Colaboração"
|
||||||
description="Trabalhe em conjunto com outros professores e compartilhe 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 crianças"
|
description="Proteção de dados e conteúdo adequado para todas as idades"
|
||||||
/>
|
/>
|
||||||
<FeatureCard
|
<FeatureCard
|
||||||
icon={<Sparkles />}
|
icon={<GraduationCap />}
|
||||||
title="Personalização"
|
title="Suporte Pedagógico"
|
||||||
description="Adapte o conteúdo ao perfil e necessidades de cada aluno"
|
description="Recursos e orientações para maximizar o potencial de aprendizagem"
|
||||||
/>
|
|
||||||
<FeatureCard
|
|
||||||
icon={<BookCheck />}
|
|
||||||
title="Acompanhamento"
|
|
||||||
description="Monitore o progresso e engajamento dos alunos"
|
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Stats Section */}
|
{/* How it Works */}
|
||||||
<div className="bg-purple-600 py-20 text-white">
|
<div className="py-20 bg-gray-50">
|
||||||
<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="grid grid-cols-1 md:grid-cols-3 gap-8 text-center">
|
<div className="text-center mb-16">
|
||||||
<StatCard number="1000+" label="Escolas" />
|
<h2 className="text-3xl font-bold text-gray-900 mb-4">
|
||||||
<StatCard number="5000+" label="Professores" />
|
Como Funciona
|
||||||
<StatCard number="50000+" label="Histórias Criadas" />
|
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* CTA Section */}
|
{/* Testimonials */}
|
||||||
|
<div className="py-20 bg-white">
|
||||||
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-3xl font-bold text-gray-900 mb-4">
|
||||||
|
O Que Dizem Sobre Nós
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-600 max-w-2xl mx-auto">
|
||||||
|
Histórias reais de escolas que transformaram sua educação
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-3 gap-8">
|
||||||
|
<TestimonialCard
|
||||||
|
quote="A plataforma revolucionou nossa forma de ensinar. Os alunos estão mais engajados do que nunca."
|
||||||
|
author="Maria Silva"
|
||||||
|
role="Diretora Pedagógica"
|
||||||
|
image="/testimonials/1.jpg"
|
||||||
|
/>
|
||||||
|
<TestimonialCard
|
||||||
|
quote="O suporte da IA nos ajuda a personalizar o ensino de forma que antes era impossível."
|
||||||
|
author="João Santos"
|
||||||
|
role="Professor de História"
|
||||||
|
image="/testimonials/2.jpg"
|
||||||
|
/>
|
||||||
|
<TestimonialCard
|
||||||
|
quote="Nossos índices de engajamento aumentaram 300% desde que começamos a usar."
|
||||||
|
author="Ana Oliveira"
|
||||||
|
role="Coordenadora"
|
||||||
|
image="/testimonials/3.jpg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Pricing */}
|
||||||
|
<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">
|
||||||
|
Planos para Cada Necessidade
|
||||||
|
</h2>
|
||||||
|
<p className="text-gray-600 max-w-2xl mx-auto">
|
||||||
|
Escolha o plano ideal para sua escola
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid md:grid-cols-3 gap-8">
|
||||||
|
<PriceCard
|
||||||
|
plan="Básico"
|
||||||
|
price="497"
|
||||||
|
description="Ideal para escolas pequenas"
|
||||||
|
features={[
|
||||||
|
"Até 200 alunos",
|
||||||
|
"Histórias básicas",
|
||||||
|
"Suporte por email"
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
<PriceCard
|
||||||
|
plan="Profissional"
|
||||||
|
price="997"
|
||||||
|
description="Para escolas em crescimento"
|
||||||
|
features={[
|
||||||
|
"Até 1000 alunos",
|
||||||
|
"Histórias personalizadas",
|
||||||
|
"Suporte prioritário",
|
||||||
|
"Analytics avançado"
|
||||||
|
]}
|
||||||
|
highlighted
|
||||||
|
/>
|
||||||
|
<PriceCard
|
||||||
|
plan="Enterprise"
|
||||||
|
price="Consulte"
|
||||||
|
description="Para redes de ensino"
|
||||||
|
features={[
|
||||||
|
"Alunos ilimitados",
|
||||||
|
"Customização completa",
|
||||||
|
"Suporte 24/7",
|
||||||
|
"API dedicada"
|
||||||
|
]}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Final CTA */}
|
||||||
<div className="py-20">
|
<div className="py-20">
|
||||||
<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="bg-gradient-to-r from-purple-600 to-indigo-600 rounded-2xl p-8 md:p-16 text-center text-white">
|
<div className="bg-gradient-to-r from-purple-600 to-indigo-600 rounded-2xl p-8 md:p-16 text-center text-white">
|
||||||
<h2 className="text-3xl md:text-4xl font-bold mb-4">
|
<h2 className="text-3xl md:text-4xl font-bold mb-4">
|
||||||
Comece sua jornada hoje
|
Pronto para Transformar sua Escola?
|
||||||
</h2>
|
</h2>
|
||||||
<p className="text-lg mb-8 max-w-2xl mx-auto">
|
<p className="text-lg mb-8 max-w-2xl mx-auto">
|
||||||
Transforme a educação em sua escola com histórias interativas
|
Junte-se a mais de 1000 escolas que já estão revolucionando a educação
|
||||||
</p>
|
</p>
|
||||||
<button
|
<button
|
||||||
onClick={handleSchoolRegister}
|
onClick={handleSchoolRegister}
|
||||||
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-4 rounded-xl hover:bg-purple-50 transition text-lg font-semibold"
|
||||||
>
|
>
|
||||||
Cadastrar Escola Gratuitamente
|
Começar Gratuitamente
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Footer */}
|
{/* Footer */}
|
||||||
<footer className="bg-gray-50 border-t border-gray-200">
|
<footer className="bg-gray-900 text-white py-12">
|
||||||
<div className="max-w-7xl mx-auto py-12 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="grid grid-cols-2 md:grid-cols-4 gap-8">
|
<div className="grid md:grid-cols-4 gap-8">
|
||||||
<div>
|
<div>
|
||||||
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider">Produto</h3>
|
<div className="flex items-center gap-2 mb-4">
|
||||||
<ul className="mt-4 space-y-4">
|
<BookOpen className="h-8 w-8" />
|
||||||
<li><a href="#" className="text-base text-gray-600 hover:text-gray-900">Recursos</a></li>
|
<span className="text-xl font-bold">Histórias Mágicas</span>
|
||||||
<li><a href="#" className="text-base text-gray-600 hover:text-gray-900">Preços</a></li>
|
|
||||||
<li><a href="#" className="text-base text-gray-600 hover:text-gray-900">Demonstração</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<p className="text-gray-400">
|
||||||
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider">Suporte</h3>
|
Transformando a educação através de histórias interativas
|
||||||
<ul className="mt-4 space-y-4">
|
|
||||||
<li><a href="#" className="text-base text-gray-600 hover:text-gray-900">Documentação</a></li>
|
|
||||||
<li><a href="#" className="text-base text-gray-600 hover:text-gray-900">Tutoriais</a></li>
|
|
||||||
<li><a href="#" className="text-base text-gray-600 hover:text-gray-900">FAQ</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider">Empresa</h3>
|
|
||||||
<ul className="mt-4 space-y-4">
|
|
||||||
<li><a href="#" className="text-base text-gray-600 hover:text-gray-900">Sobre</a></li>
|
|
||||||
<li><a href="#" className="text-base text-gray-600 hover:text-gray-900">Blog</a></li>
|
|
||||||
<li><a href="#" className="text-base text-gray-600 hover:text-gray-900">Carreiras</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h3 className="text-sm font-semibold text-gray-400 uppercase tracking-wider">Legal</h3>
|
|
||||||
<ul className="mt-4 space-y-4">
|
|
||||||
<li><a href="#" className="text-base text-gray-600 hover:text-gray-900">Privacidade</a></li>
|
|
||||||
<li><a href="#" className="text-base text-gray-600 hover:text-gray-900">Termos</a></li>
|
|
||||||
<li><a href="#" className="text-base text-gray-600 hover:text-gray-900">Segurança</a></li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="mt-8 border-t border-gray-200 pt-8 text-center">
|
|
||||||
<p className="text-base text-gray-400">
|
|
||||||
© 2024 Histórias Mágicas. Todos os direitos reservados.
|
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
{/* Adicione mais seções do footer conforme necessário */}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user