language text full complated

components/how-it-works.tsx

@@ -0,0 +1,60 @@
+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 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="flex-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>
+  );
+}