main

src/components/Process.tsx

@@ -0,0 +1,41 @@
+import { motion } from 'motion/react';
+import { useLanguage } from '../i18n/LanguageContext';
+
+export default function Process() {
+  const { t, language } = useLanguage();
+
+  return (
+    <section id="process" className="py-24">
+      <div className="max-w-7xl mx-auto px-6">
+        <div className="mb-16">
+          <h2 className="text-sm font-mono text-[#FF5733] tracking-widest mb-2">{t.process.badge.toLocaleUpperCase(language)}</h2>
+          <h3 className="text-4xl md:text-5xl font-display font-bold">{t.process.title}</h3>
+        </div>
+
+        <div className="grid md:grid-cols-4 gap-8 relative">
+          {/* Connecting Line */}
+          <div className="hidden md:block absolute top-12 left-0 w-full h-[1px] bg-white/10" />
+
+          {t.process.items.map((step, index) => (
+            <motion.div
+              key={index}
+              initial={{ opacity: 0, y: 20 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ delay: index * 0.1 }}
+              className="relative"
+            >
+              <div className="w-24 h-24 bg-slate-900 border border-white/10 flex items-center justify-center mb-6 relative z-10 box-glow-hover transition-all">
+                <span className="font-display text-3xl font-bold text-transparent bg-clip-text bg-gradient-to-br from-white to-[#FF5733]">
+                  0{index + 1}
+                </span>
+              </div>
+              <h4 className="text-xl font-bold mb-3">{step.title}</h4>
+              <p className="text-slate-400 text-sm leading-relaxed">{step.desc}</p>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}