93 lines
4.0 KiB
TypeScript
93 lines
4.0 KiB
TypeScript
"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>
|
|
);
|
|
}
|