63 lines
3.6 KiB
TypeScript
63 lines
3.6 KiB
TypeScript
'use client'
|
|
|
|
import Link from 'next/link'
|
|
import { motion } from 'framer-motion'
|
|
import { Mail, Phone } from 'lucide-react'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Badge } from '@/components/ui/badge'
|
|
|
|
|
|
|
|
export default function CTA() {
|
|
|
|
return (
|
|
<section className="py-12 sm:py-16 md:py-20 bg-gradient-to-r from-slate-900 to-emerald-900 text-white relative overflow-hidden">
|
|
<div className="absolute inset-0 bg-black/20"></div>
|
|
<div className="relative z-10 max-w-6xl mx-auto px-3 sm:px-6 md:px-8 lg:px-12">
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 40 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.8 }}
|
|
viewport={{ once: true }}
|
|
className="text-center"
|
|
>
|
|
<Badge className="mb-4 sm:mb-6 bg-emerald-600 text-white px-3 sm:px-4 py-1.5 sm:py-2 text-xs sm:text-sm font-medium">Get In Touch</Badge>
|
|
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-6 sm:mb-8 leading-tight">
|
|
Ready to Partner With Us?
|
|
</h2>
|
|
<p className="text-base sm:text-lg text-emerald-100 mb-8 sm:mb-12 max-w-3xl mx-auto leading-relaxed px-2">
|
|
Connect with us for bulk orders, wholesale pricing, and custom solutions.
|
|
Let's build a healthier future together.
|
|
</p>
|
|
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6 mb-8 sm:mb-12 max-w-2xl mx-auto">
|
|
<div className="flex items-center justify-center p-4 sm:p-6 bg-white/10 rounded-lg sm:rounded-xl backdrop-blur-sm hover:bg-white/15 transition-all duration-300">
|
|
<Phone className="h-5 w-5 sm:h-6 sm:w-6 mr-3 sm:mr-4 text-emerald-300 flex-shrink-0" />
|
|
<div className="text-left">
|
|
<div className="text-xs sm:text-sm text-emerald-200 font-medium">Call Us</div>
|
|
<div className="text-base sm:text-lg font-bold">+91 94757 58817</div>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center justify-center p-4 sm:p-6 bg-white/10 rounded-lg sm:rounded-xl backdrop-blur-sm hover:bg-white/15 transition-all duration-300">
|
|
<Mail className="h-5 w-5 sm:h-6 sm:w-6 mr-3 sm:mr-4 text-emerald-300 flex-shrink-0" />
|
|
<div className="text-left">
|
|
<div className="text-xs sm:text-sm text-emerald-200 font-medium">Email Us</div>
|
|
<div className="text-base sm:text-lg font-bold break-all sm:break-normal">info@padmajarice.com</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col sm:flex-row gap-3 sm:gap-4 justify-center items-center max-w-md sm:max-w-none mx-auto">
|
|
<Button size="lg" className="w-full sm:w-auto bg-white text-slate-900 hover:bg-emerald-50 px-6 sm:px-8 py-2.5 sm:py-3 text-base sm:text-lg font-bold rounded-lg sm:rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
|
|
<Link href="/contact">Get in Touch</Link>
|
|
</Button>
|
|
<Button size="lg" variant="outline" className="w-full sm:w-auto border-white bg-transparent hover:bg-white hover:text-slate-900 px-6 sm:px-8 py-2.5 sm:py-3 text-base sm:text-lg font-bold rounded-lg sm:rounded-xl shadow-xl hover:shadow-2xl transition-all duration-300 transform hover:-translate-y-1">
|
|
<Link href="/part-time">Part time Job</Link>
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|