Add "How it works" section
Add the "How it works" section to the landing page, including images for text, audio, receipt, dashboard, and calendar.
This commit is contained in:
gpt-engineer-app[bot]
parent
52ba4b115a
commit
fb94c571d3
@ -10,7 +10,12 @@ import {
|
|||||||
ArrowRight,
|
ArrowRight,
|
||||||
TrendingUp,
|
TrendingUp,
|
||||||
Shield,
|
Shield,
|
||||||
Clock
|
Clock,
|
||||||
|
MessageCircle,
|
||||||
|
Mic,
|
||||||
|
Receipt,
|
||||||
|
BarChart3,
|
||||||
|
Calendar
|
||||||
} from 'lucide-react';
|
} from 'lucide-react';
|
||||||
|
|
||||||
const Landing = () => {
|
const Landing = () => {
|
||||||
@ -46,6 +51,48 @@ const Landing = () => {
|
|||||||
"100% seguro e privado"
|
"100% seguro e privado"
|
||||||
];
|
];
|
||||||
|
|
||||||
|
const howItWorksSteps = [
|
||||||
|
{
|
||||||
|
step: "1",
|
||||||
|
title: "Envie pelo WhatsApp",
|
||||||
|
description: "Mande suas transações de forma simples",
|
||||||
|
methods: [
|
||||||
|
{
|
||||||
|
icon: <MessageCircle className="h-6 w-6" />,
|
||||||
|
title: "Texto",
|
||||||
|
description: "Digite: 'Comprei pão R$ 5,50'",
|
||||||
|
image: "/whatsapp-text-message.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Mic className="h-6 w-6" />,
|
||||||
|
title: "Áudio",
|
||||||
|
description: "Grave um áudio contando o gasto",
|
||||||
|
image: "/whatsapp-audio-message.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
icon: <Receipt className="h-6 w-6" />,
|
||||||
|
title: "Comprovante",
|
||||||
|
description: "Tire foto do recibo ou nota fiscal",
|
||||||
|
image: "/whatsapp-receipt-message.png"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
step: "2",
|
||||||
|
title: "Visualize no Dashboard",
|
||||||
|
description: "Acompanhe seus gastos em tempo real com gráficos e relatórios automáticos",
|
||||||
|
icon: <BarChart3 className="h-8 w-8" />,
|
||||||
|
image: "/dashboard-screenshot.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
step: "3",
|
||||||
|
title: "Organize no Calendário",
|
||||||
|
description: "Veja todas suas transações organizadas por data e periodo",
|
||||||
|
icon: <Calendar className="h-8 w-8" />,
|
||||||
|
image: "/calendar-screenshot.png"
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900">
|
<div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900">
|
||||||
{/* Header */}
|
{/* Header */}
|
||||||
@ -112,6 +159,92 @@ const Landing = () => {
|
|||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
|
|
||||||
|
{/* How it Works Section */}
|
||||||
|
<section className="py-20 bg-slate-800/30">
|
||||||
|
<div className="container mx-auto px-4">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<h2 className="text-4xl font-bold text-white mb-4">
|
||||||
|
Como funciona?
|
||||||
|
</h2>
|
||||||
|
<p className="text-xl text-slate-300 max-w-2xl mx-auto">
|
||||||
|
Apenas 3 passos simples para ter controle total das suas finanças
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="max-w-6xl mx-auto space-y-20">
|
||||||
|
{/* Step 1 - WhatsApp Methods */}
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="inline-flex items-center justify-center w-12 h-12 bg-green-500 text-white rounded-full text-xl font-bold mb-6">
|
||||||
|
{howItWorksSteps[0].step}
|
||||||
|
</div>
|
||||||
|
<h3 className="text-3xl font-bold text-white mb-4">{howItWorksSteps[0].title}</h3>
|
||||||
|
<p className="text-lg text-slate-300 mb-12">{howItWorksSteps[0].description}</p>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||||
|
{howItWorksSteps[0].methods.map((method, index) => (
|
||||||
|
<div key={index} className="bg-slate-700/50 p-6 rounded-xl border border-slate-600 hover:border-green-500 transition-all duration-300">
|
||||||
|
<div className="bg-green-500/20 p-3 rounded-lg w-fit mx-auto mb-4 text-green-400">
|
||||||
|
{method.icon}
|
||||||
|
</div>
|
||||||
|
<h4 className="text-xl font-semibold text-white mb-2">{method.title}</h4>
|
||||||
|
<p className="text-slate-300 mb-4">{method.description}</p>
|
||||||
|
<div className="aspect-video bg-slate-800 rounded-lg flex items-center justify-center">
|
||||||
|
<img
|
||||||
|
src={method.image}
|
||||||
|
alt={`Exemplo ${method.title}`}
|
||||||
|
className="max-w-full max-h-full object-contain rounded-lg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step 2 - Dashboard */}
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="inline-flex items-center justify-center w-12 h-12 bg-blue-500 text-white rounded-full text-xl font-bold mb-6">
|
||||||
|
{howItWorksSteps[1].step}
|
||||||
|
</div>
|
||||||
|
<h3 className="text-3xl font-bold text-white mb-4">{howItWorksSteps[1].title}</h3>
|
||||||
|
<p className="text-lg text-slate-300 mb-8">{howItWorksSteps[1].description}</p>
|
||||||
|
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
<div className="bg-slate-700/50 p-6 rounded-xl border border-slate-600">
|
||||||
|
<div className="aspect-video bg-slate-800 rounded-lg flex items-center justify-center">
|
||||||
|
<img
|
||||||
|
src={howItWorksSteps[1].image}
|
||||||
|
alt="Dashboard do sistema"
|
||||||
|
className="max-w-full max-h-full object-contain rounded-lg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Step 3 - Calendar */}
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="inline-flex items-center justify-center w-12 h-12 bg-purple-500 text-white rounded-full text-xl font-bold mb-6">
|
||||||
|
{howItWorksSteps[2].step}
|
||||||
|
</div>
|
||||||
|
<h3 className="text-3xl font-bold text-white mb-4">{howItWorksSteps[2].title}</h3>
|
||||||
|
<p className="text-lg text-slate-300 mb-8">{howItWorksSteps[2].description}</p>
|
||||||
|
|
||||||
|
<div className="max-w-4xl mx-auto">
|
||||||
|
<div className="bg-slate-700/50 p-6 rounded-xl border border-slate-600">
|
||||||
|
<div className="aspect-video bg-slate-800 rounded-lg flex items-center justify-center">
|
||||||
|
<img
|
||||||
|
src={howItWorksSteps[2].image}
|
||||||
|
alt="Calendário do sistema"
|
||||||
|
className="max-w-full max-h-full object-contain rounded-lg"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
{/* Features Section */}
|
{/* Features Section */}
|
||||||
<section className="py-20 bg-slate-800/50">
|
<section className="py-20 bg-slate-800/50">
|
||||||
<div className="container mx-auto px-4">
|
<div className="container mx-auto px-4">
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user