Update components/hero.tsx

This commit is contained in:
kleap-admin 2026-01-18 14:07:05 +00:00
parent bac972c57b
commit 5f746ec1a9
1 changed files with 79 additions and 0 deletions

79
components/hero.tsx Normal file
View File

@ -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>
);
}