104 lines
4.6 KiB
TypeScript
104 lines
4.6 KiB
TypeScript
"use client";
|
|
import { Container } from "@/components/container";
|
|
import { Card, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
|
import { motion } from "framer-motion";
|
|
import { GraduationCap, Award, Briefcase, FileText, Shield } from "lucide-react";
|
|
|
|
const services = [
|
|
{
|
|
icon: GraduationCap,
|
|
title: "Industry-Based Skill Training",
|
|
titleBn: "ইন্ডাস্ট্রি-ভিত্তিক স্কিল ট্রেনিং",
|
|
description: "Practical, job-oriented training aligned with international demand",
|
|
descriptionBn: "আন্তর্জাতিক চাহিদা অনুযায়ী ব্যবহারিক, চাকরি-ভিত্তিক প্রশিক্ষণ"
|
|
},
|
|
{
|
|
icon: Award,
|
|
title: "International Standard Certificate",
|
|
titleBn: "আন্তর্জাতিক মানের সার্টিফিকেট",
|
|
description: "Globally recognized skill certification",
|
|
descriptionBn: "বিশ্বব্যাপী স্বীকৃত দক্ষতা সার্টিফিকেশন"
|
|
},
|
|
{
|
|
icon: Briefcase,
|
|
title: "Overseas Job Assistance",
|
|
titleBn: "বিদেশে চাকরির সহায়তা",
|
|
description: "Support for job placement in international markets",
|
|
descriptionBn: "আন্তর্জাতিক বাজারে চাকরি প্রাপ্তির সহায়তা"
|
|
},
|
|
{
|
|
icon: FileText,
|
|
title: "Visa Process Guidance & Documentation",
|
|
titleBn: "ভিসা প্রক্রিয়া গাইডেন্স ও ডকুমেন্টেশন",
|
|
description: "Complete visa application and documentation support",
|
|
descriptionBn: "সম্পূর্ণ ভিসা আবেদন এবং ডকুমেন্টেশন সহায়তা"
|
|
},
|
|
{
|
|
icon: Shield,
|
|
title: "Transparent & Ethical Process",
|
|
titleBn: "স্বচ্ছ ও নৈতিক প্রক্রিয়া",
|
|
description: "Trusted, honest consultancy service",
|
|
descriptionBn: "বিশ্বস্ত, সৎ পরামর্শ সেবা"
|
|
}
|
|
];
|
|
|
|
export function Services() {
|
|
return (
|
|
<section id="services" className="py-20 bg-white">
|
|
<Container>
|
|
{/* Section Header */}
|
|
<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-[#7A1F2B] mb-4">
|
|
আমাদের সেবাসমূহ
|
|
</h2>
|
|
<h3 className="text-2xl md:text-3xl font-semibold text-neutral-700 mb-4">
|
|
Our Services
|
|
</h3>
|
|
<p className="text-neutral-600 max-w-2xl mx-auto">
|
|
Comprehensive support for your international career journey
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Services Grid */}
|
|
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
|
{services.map((service, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ delay: index * 0.1, duration: 0.5 }}
|
|
>
|
|
<Card className="h-full hover:shadow-xl transition-all duration-300 border-2 hover:border-[#7A1F2B]/20 group">
|
|
<CardHeader>
|
|
<div className="mb-4 inline-flex items-center justify-center w-14 h-14 bg-[#7A1F2B]/10 rounded-lg group-hover:bg-[#7A1F2B] transition-colors duration-300">
|
|
<service.icon className="w-7 h-7 text-[#7A1F2B] group-hover:text-white transition-colors duration-300" />
|
|
</div>
|
|
<CardTitle className="text-xl mb-2 text-[#7A1F2B]">
|
|
{service.titleBn}
|
|
</CardTitle>
|
|
<CardTitle className="text-lg mb-3 text-neutral-700 font-medium">
|
|
{service.title}
|
|
</CardTitle>
|
|
<CardDescription className="text-neutral-600 leading-relaxed">
|
|
{service.descriptionBn}
|
|
</CardDescription>
|
|
<CardDescription className="text-neutral-500 text-sm mt-2">
|
|
{service.description}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
);
|
|
}
|