Update components/contact.tsx

This commit is contained in:
kleap-admin 2026-01-18 14:07:35 +00:00
parent 74200ca237
commit 19fb1fd5db
1 changed files with 109 additions and 0 deletions

109
components/contact.tsx Normal file
View File

@ -0,0 +1,109 @@
"use client";
import { Container } from "@/components/container";
import { Button } from "@/components/ui/button";
import { motion } from "framer-motion";
import { Phone, MessageCircle, Globe } from "lucide-react";
export function Contact() {
const handleCall = () => {
window.location.href = 'tel:+8801334935472';
};
const handleWhatsApp = () => {
window.open('https://wa.me/8801334935472', '_blank');
};
const handleWebsite = () => {
window.open('https://www.enamgroup.com', '_blank');
};
return (
<section id="contact" className="py-20 bg-white">
<Container>
<motion.div
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
viewport={{ once: true }}
transition={{ duration: 0.6 }}
className="max-w-4xl mx-auto"
>
{/* Section Header */}
<div className="text-center mb-12">
<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">
Contact Us
</h3>
<p className="text-neutral-600">
We're here to help you
</p>
</div>
{/* Contact Card */}
<div className="bg-gradient-to-br from-[#7A1F2B] to-[#5a1620] rounded-3xl p-8 md:p-12 shadow-2xl">
<div className="text-center mb-8">
<div className="inline-flex items-center justify-center w-20 h-20 bg-white/20 rounded-full mb-6">
<Phone className="w-10 h-10 text-white" />
</div>
<h4 className="text-2xl md:text-3xl font-bold text-white mb-2">
/
</h4>
<p className="text-white/80 mb-4">Phone / WhatsApp</p>
<a
href="tel:+8801334935472"
className="text-3xl md:text-4xl font-bold text-white hover:text-white/90 transition-colors"
>
+880 1334 935 472
</a>
</div>
{/* Action Buttons */}
<div className="grid md:grid-cols-3 gap-4 mt-8">
<Button
size="lg"
onClick={handleCall}
className="bg-white text-[#7A1F2B] hover:bg-white/90 font-semibold py-6"
>
<Phone className="mr-2 h-5 w-5" />
Call Now
</Button>
<Button
size="lg"
onClick={handleWhatsApp}
className="bg-[#25D366] text-white hover:bg-[#20BA5A] font-semibold py-6"
>
<MessageCircle className="mr-2 h-5 w-5" />
WhatsApp Us
</Button>
<Button
size="lg"
onClick={handleWebsite}
variant="outline"
className="bg-transparent border-2 border-white text-white hover:bg-white hover:text-[#7A1F2B] font-semibold py-6"
>
<Globe className="mr-2 h-5 w-5" />
Visit Website
</Button>
</div>
{/* Website Info */}
<div className="text-center mt-8 pt-8 border-t border-white/20">
<p className="text-white/80 mb-2"> Website</p>
<a
href="https://www.enamgroup.com"
target="_blank"
rel="noopener noreferrer"
className="text-xl font-semibold text-white hover:text-white/90 transition-colors"
>
www.enamgroup.com
</a>
</div>
</div>
</motion.div>
</Container>
</section>
);
}