itsamejms
65 lines
2.3 KiB
TypeScript
65 lines
2.3 KiB
TypeScript
import { UserPlus, Play, Image, Search } from 'lucide-react';
|
|
|
|
const HowItWorks = () => {
|
|
const steps = [
|
|
{
|
|
num: "01",
|
|
title: "Sign Up",
|
|
desc: "Create your free account in seconds. Add your dog's profile and you're ready to go.",
|
|
icon: UserPlus
|
|
},
|
|
{
|
|
num: "02",
|
|
title: "Start Recording",
|
|
desc: "Hit record when you head out. The app tracks your route, distance, and time automatically.",
|
|
icon: Play
|
|
},
|
|
{
|
|
num: "03",
|
|
title: "Share & Tag",
|
|
desc: "Add photos, labels, and notes. Share with the community or keep it for yourself.",
|
|
icon: Image
|
|
},
|
|
{
|
|
num: "04",
|
|
title: "Discover & Connect",
|
|
desc: "Explore routes shared by others. Find dog-friendly spots and make walking buddies.",
|
|
icon: Search
|
|
}
|
|
];
|
|
|
|
return (
|
|
<section id="how-it-works" className="py-20 relative overflow-hidden scroll-mt-18">
|
|
<div className="max-w-7xl mx-auto px-6">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl md:text-5xl font-display font-bold mb-4 text-text-primary">Start Your Adventure in Minutes</h2>
|
|
<p className="text-text-secondary font-medium">Getting started with TailTrails is as easy as going for a walk.</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-4 gap-8">
|
|
{steps.map((step, i) => (
|
|
<div key={i} className="relative group">
|
|
<div className="mb-6 flex items-end gap-4">
|
|
<span className="text-6xl font-display font-black text-white/10 group-hover:text-brand/30 transition-colors duration-500 leading-none">
|
|
{step.num}
|
|
</span>
|
|
<div className="w-12 h-12 glass rounded-xl flex items-center justify-center mb-1 border-accent-secondary/20">
|
|
<step.icon className="text-brand w-6 h-6" />
|
|
</div>
|
|
</div>
|
|
<h4 className="text-xl font-bold mb-2 text-text-primary">{step.title}</h4>
|
|
<p className="text-text-primary/70 leading-relaxed">{step.desc}</p>
|
|
|
|
{i < steps.length - 1 && (
|
|
<div className="hidden md:block absolute top-12 -right-4 w-8 h-[1px] bg-white/10" />
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default HowItWorks;
|