61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
import { useLanguage } from "@/contexts/language-context";
|
|
|
|
export default function HowItWorks() {
|
|
const { t } = useLanguage();
|
|
const steps = [
|
|
{
|
|
number: "1",
|
|
title: t.howItWorks.steps.step1.title,
|
|
description: t.howItWorks.steps.step1.desc,
|
|
},
|
|
{
|
|
number: "2",
|
|
title: t.howItWorks.steps.step2.title,
|
|
description: t.howItWorks.steps.step2.desc,
|
|
},
|
|
{
|
|
number: "3",
|
|
title: t.howItWorks.steps.step3.title,
|
|
description: t.howItWorks.steps.step3.desc,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section id="secure" className="py-20 md:py-32 px-4 sm:px-6 lg:px-8">
|
|
<div className="max-w-7xl mx-auto">
|
|
<div className="text-center mb-12 md:mb-16">
|
|
<h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">
|
|
{t.howItWorks.title}
|
|
</h2>
|
|
<p className="text-lg text-muted-foreground">
|
|
{t.howItWorks.subtitle}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8 md:gap-4">
|
|
{steps.map((step, index) => (
|
|
<div key={index} className="relative">
|
|
<div className="flex items-start gap-4">
|
|
<div className="shrink-0">
|
|
<div className="flex items-center justify-center h-12 w-12 rounded-lg bg-primary text-white font-bold text-lg">
|
|
{step.number}
|
|
</div>
|
|
</div>
|
|
<div className="flex-1">
|
|
<h3 className="text-xl font-semibold text-foreground mb-2">
|
|
{step.title}
|
|
</h3>
|
|
<p className="text-muted-foreground">{step.description}</p>
|
|
</div>
|
|
</div>
|
|
{index < steps.length - 1 && (
|
|
<div className="hidden md:block absolute top-6 -right-8 w-12 h-0.5 bg-primary/30" />
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|