From 5f746ec1a91ab02344c33e816a517872b167be25 Mon Sep 17 00:00:00 2001
From: kleap-admin <admin@kleap.co>
Date: Sun, 18 Jan 2026 14:07:05 +0000
Subject: [PATCH] Update components/hero.tsx

---
 components/hero.tsx | 79 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 components/hero.tsx

diff --git a/components/hero.tsx b/components/hero.tsx
new file mode 100644
index 0000000..a507524
--- /dev/null
+++ b/components/hero.tsx
@@ -0,0 +1,79 @@
+"use client";
+import { Container } from "@/components/container";
+import { Button } from "@/components/ui/button";
+import { motion } from "framer-motion";
+import { ArrowRight, Phone } from "lucide-react";
+
+export function Hero() {
+  return (
+    <section className="relative min-h-[90vh] flex items-center justify-center overflow-hidden bg-gradient-to-br from-[#7A1F2B] via-[#5a1620] to-[#3a0e14]">
+      {/* Background Pattern */}
+      <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmZmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDE2YzAtMi4yMSAxLjc5LTQgNC00czQgMS43OSA0IDQtMS43OSA0LTQgNC00LTEuNzktNC00em0wIDI0YzAtMi4yMSAxLjc5LTQgNC00czQgMS43OSA0IDQtMS43OSA0LTQgNC00LTEuNzktNC00ek0xMiAxNmMwLTIuMjEgMS43OS00IDQtNHM0IDEuNzkgNCA0LTEuNzkgNC00IDQtNC0xLjc5LTQtNHptMCAyNGMwLTIuMjEgMS43OS00IDQtNHM0IDEuNzkgNCA0LTEuNzkgNC00IDQtNC0xLjc5LTQtNHoiLz48L2c+PC9nPjwvc3ZnPg==')] opacity-30"></div>
+      
+      <Container className="relative z-10 py-20">
+        <motion.div
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.6 }}
+          className="text-center max-w-5xl mx-auto"
+        >
+          {/* Bangla Headline */}
+          <h1 className="text-3xl md:text-5xl lg:text-6xl font-bold text-white mb-4 leading-tight">
+            বিদেশে যেতে চান, কিন্তু skill না থাকায় <br className="hidden md:block" />
+            সুযোগ হারাচ্ছেন? এখন আর না ❌
+          </h1>
+          
+          {/* English Headline */}
+          <h2 className="text-xl md:text-3xl lg:text-4xl font-semibold text-white/90 mb-6">
+            Start Your Global Career with Skill, Confidence & Proper Guidance
+          </h2>
+          
+          {/* Subheading */}
+          <p className="text-lg md:text-xl text-white/80 mb-10 max-w-3xl mx-auto">
+            International Skill Training • Job Assistance • Visa Assurance Program
+          </p>
+          
+          {/* CTA Buttons */}
+          <div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
+            <Button 
+              size="lg" 
+              className="bg-white text-[#7A1F2B] hover:bg-white/90 text-lg px-8 py-6 font-semibold group"
+              onClick={() => document.getElementById('lead-form')?.scrollIntoView({ behavior: 'smooth' })}
+            >
+              Apply Now
+              <ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
+            </Button>
+            <Button 
+              size="lg" 
+              variant="outline" 
+              className="bg-transparent border-2 border-white text-white hover:bg-white hover:text-[#7A1F2B] text-lg px-8 py-6 font-semibold"
+              onClick={() => window.open('https://wa.me/8801334935472', '_blank')}
+            >
+              <Phone className="mr-2 h-5 w-5" />
+              Free Consultation
+            </Button>
+          </div>
+          
+          {/* Trust Badge */}
+          <motion.div
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+            transition={{ delay: 0.4, duration: 0.6 }}
+            className="mt-12 inline-block bg-white/10 backdrop-blur-sm border border-white/20 rounded-full px-6 py-3"
+          >
+            <p className="text-white/90 text-sm md:text-base font-medium">
+              🏢 A Concern of <span className="font-bold">Enam Group</span> - Your Trusted Partner
+            </p>
+          </motion.div>
+        </motion.div>
+      </Container>
+      
+      {/* Bottom Wave */}
+      <div className="absolute bottom-0 left-0 right-0">
+        <svg viewBox="0 0 1440 120" fill="none" xmlns="http://www.w3.org/2000/svg" className="w-full">
+          <path d="M0 120L60 105C120 90 240 60 360 45C480 30 600 30 720 37.5C840 45 960 60 1080 67.5C1200 75 1320 75 1380 75L1440 75V120H1380C1320 120 1200 120 1080 120C960 120 840 120 720 120C600 120 480 120 360 120C240 120 120 120 60 120H0Z" fill="white"/>
+        </svg>
+      </div>
+    </section>
+  );
+}