| 1 | import { ArrowRight } from "lucide-react"; |
| 2 | import { Button } from "@/components/ui/button"; |
| 3 | const steps = [{ |
| 4 | number: "01", |
| 5 | title: "Sign up for free", |
| 6 | description: "Create your account in minutes. All you need is your email address to get started." |
| 7 | }, { |
| 8 | number: "02", |
| 9 | title: "Choose your amount", |
| 10 | description: "Tell us how much you want to send and where. We'll show you our fee upfront—no surprises." |
| 11 | }, { |
| 12 | number: "03", |
| 13 | title: "Add recipient details", |
| 14 | description: "Enter your recipient's bank details. We'll make sure everything is correct." |
| 15 | }, { |
| 16 | number: "04", |
| 17 | title: "Send money", |
| 18 | description: "Pay for your transfer and we'll do the rest. Track your money in real time." |
| 19 | }]; |
| 20 | const HowItWorks = () => { |
| 21 | return <section id="how-it-works" className="py-20 md:py-32 bg-secondary text-secondary-foreground"> |
| 22 | <div className="container"> |
| 23 | <div className="max-w-2xl mb-16"> |
| 24 | <h2 className="text-3xl md:text-5xl font-bold"> |
| 25 | How it works |
| 26 | </h2> |
| 27 | <p className="mt-4 text-lg text-secondary-foreground/70"> |
| 28 | Sending money abroad should be as easy as sending a text. With Wise, it is. |
| 29 | </p> |
| 30 | </div> |
| 31 | |
| 32 | <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8"> |
| 33 | {steps.map((step, index) => <div key={index} className="relative animate-fade-up" style={{ |
| 34 | animationDelay: `${index * 100}ms` |
| 35 | }}> |
| 36 | {/* Connector line */} |
| 37 | {index < steps.length - 1 && <div className="hidden lg:block absolute top-8 left-full w-full h-0.5 bg-primary/30" />} |
| 38 | |
| 39 | <div className="mb-4"> |
| 40 | <span className="text-6xl font-bold text-lime-400">{step.number}</span> |
| 41 | </div> |
| 42 | <h3 className="text-xl font-semibold mb-2">{step.title}</h3> |
| 43 | <p className="text-secondary-foreground/70">{step.description}</p> |
| 44 | </div>)} |
| 45 | </div> |
| 46 | |
| 47 | <div className="mt-16 text-center"> |
| 48 | <Button variant="hero" size="lg"> |
| 49 | Get started now |
| 50 | <ArrowRight className="w-5 h-5" /> |
| 51 | </Button> |
| 52 | </div> |
| 53 | </div> |
| 54 | </section>; |
| 55 | }; |
| 56 | export default HowItWorks; |