From fb94c571d3f4f2a8727418415332a86d4606b725 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 23 Jun 2025 18:34:34 +0000
Subject: [PATCH] Add "How it works" section

Add the "How it works" section to the landing page, including images for text, audio, receipt, dashboard, and calendar.
---
 src/pages/Landing.tsx | 135 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 134 insertions(+), 1 deletion(-)

diff --git a/src/pages/Landing.tsx b/src/pages/Landing.tsx
index 3eef40d..fb35bf3 100644
--- a/src/pages/Landing.tsx
+++ b/src/pages/Landing.tsx
@@ -10,7 +10,12 @@ import {
   ArrowRight,
   TrendingUp,
   Shield,
-  Clock
+  Clock,
+  MessageCircle,
+  Mic,
+  Receipt,
+  BarChart3,
+  Calendar
 } from 'lucide-react';
 
 const Landing = () => {
@@ -46,6 +51,48 @@ const Landing = () => {
     "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 (
     <div className="min-h-screen bg-gradient-to-b from-slate-900 via-slate-800 to-slate-900">
       {/* Header */}
@@ -112,6 +159,92 @@ const Landing = () => {
         </div>
       </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 */}
       <section className="py-20 bg-slate-800/50">
         <div className="container mx-auto px-4">