Update components/career-flow.tsx

components/career-flow.tsx

@@ -0,0 +1,92 @@
+"use client";
+import { Container } from "@/components/container";
+import { motion } from "framer-motion";
+import { ArrowRight } from "lucide-react";
+
+export function CareerFlow() {
+  const steps = [
+    {
+      number: "01",
+      titleBn: "স্কিল ট্রেনিং",
+      titleEn: "Skill Training",
+      descriptionBn: "আন্তর্জাতিক মানের প্রশিক্ষণ",
+      descriptionEn: "International standard training"
+    },
+    {
+      number: "02",
+      titleBn: "চাকরি-ভিত্তিক কাজ",
+      titleEn: "Job-Oriented Work",
+      descriptionBn: "বাস্তব অভিজ্ঞতা অর্জন",
+      descriptionEn: "Gain practical experience"
+    },
+    {
+      number: "03",
+      titleBn: "গ্লোবাল ক্যারিয়ার",
+      titleEn: "Global Career Placement",
+      descriptionBn: "বিদেশে চাকরি নিশ্চিতকরণ",
+      descriptionEn: "Secure overseas employment"
+    }
+  ];
+
+  return (
+    <section className="py-20 bg-gradient-to-br from-[#7A1F2B] to-[#5a1620] relative overflow-hidden">
+      {/* Background Pattern */}
+      <div className="absolute inset-0 opacity-10">
+        <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMSI+PHBhdGggZD0iTTM2IDE2YzAtMi4yMSAxLjc5LTQgNC00czQgMS43OSA0IDQtMS43OSA0LTQgNC00LTEuNzktNC00em0wIDI0YzAtMi4yMSAxLjc5LTQgNC00czQgMS43OSA0IDQtMS43OSA0LTQgNC00LTEuNzktNC00ek0xMiAxNmMwLTIuMjEgMS43OS00IDQtNHM0IDEuNzkgNCA0LTEuNzkgNC00IDQtNC0xLjc5LTQtNHptMCAyNGMwLTIuMjEgMS43OS00IDQtNHM0IDEuNzkgNCA0LTEuNzkgNC00IDQtNC0xLjc5LTQtNHoiLz48L2c+PC9nPjwvc3ZnPg==')] "></div>
+      </div>
+      
+      <Container className="relative z-10">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6 }}
+          className="text-center mb-16"
+        >
+          <h2 className="text-3xl md:text-5xl font-bold text-white mb-4">
+            আপনার ক্যারিয়ার যাত্রা
+          </h2>
+          <h3 className="text-2xl md:text-3xl font-semibold text-white/90">
+            Your Career Journey
+          </h3>
+        </motion.div>
+        
+        <div className="max-w-5xl mx-auto">
+          <div className="grid md:grid-cols-3 gap-8 md:gap-4">
+            {steps.map((step, index) => (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ delay: index * 0.2, duration: 0.5 }}
+                className="relative"
+              >
+                <div className="bg-white/10 backdrop-blur-sm border border-white/20 rounded-2xl p-8 text-center h-full hover:bg-white/20 transition-all duration-300">
+                  <div className="text-6xl font-bold text-white/30 mb-4">
+                    {step.number}
+                  </div>
+                  <h4 className="text-2xl font-bold text-white mb-2">
+                    {step.titleBn}
+                  </h4>
+                  <h5 className="text-lg font-semibold text-white/90 mb-3">
+                    {step.titleEn}
+                  </h5>
+                  <p className="text-white/80 mb-2">{step.descriptionBn}</p>
+                  <p className="text-white/70 text-sm">{step.descriptionEn}</p>
+                </div>
+                
+                {/* Arrow between steps */}
+                {index < steps.length - 1 && (
+                  <div className="hidden md:block absolute top-1/2 -right-6 transform -translate-y-1/2 z-20">
+                    <ArrowRight className="w-8 h-8 text-white" />
+                  </div>
+                )}
+              </motion.div>
+            ))}
+          </div>
+        </div>
+      </Container>
+    </section>
+  );
+}