Update components/services.tsx

components/services.tsx

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