318 lines
14 KiB
TypeScript
318 lines
14 KiB
TypeScript
'use client'
|
|
|
|
import { motion } from 'framer-motion'
|
|
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { MapPin, Phone, Mail, Clock, Send, ChevronRight } from 'lucide-react'
|
|
import PageHero from '@/components/sections/PageHero'
|
|
import ContactForm from '@/components/forms/ContactForm'
|
|
|
|
export default function ContactPage() {
|
|
const contactInfo = [
|
|
{
|
|
icon: MapPin,
|
|
title: 'Manufacturing Unit',
|
|
details: 'Morabba No. 03, Firozpur Road',
|
|
subtitle: 'Kaithal Siwan, Haryana',
|
|
highlight: 'Production Facility'
|
|
},
|
|
{
|
|
icon: MapPin,
|
|
title: 'Corporate Office',
|
|
details: '11B/79 Vrindavan Yojna',
|
|
subtitle: 'Raibareli Road, Lucknow, India',
|
|
highlight: 'Business Operations'
|
|
}
|
|
]
|
|
|
|
const businessInfo = [
|
|
{
|
|
icon: Phone,
|
|
title: 'Business Phone',
|
|
details: '+91 94757 58817',
|
|
subtitle: 'Direct line to our sales team',
|
|
highlight: 'Mon-Sat 9AM-6PM IST'
|
|
},
|
|
{
|
|
icon: Mail,
|
|
title: 'Business Email',
|
|
details: 'info@padmajarice.com',
|
|
subtitle: 'For inquiries and partnerships',
|
|
highlight: 'Quick Response'
|
|
},
|
|
{
|
|
icon: Clock,
|
|
title: 'Business Hours',
|
|
details: 'Always Open',
|
|
subtitle: '24 x 7 x 375',
|
|
highlight: 'Always Welcome'
|
|
}
|
|
]
|
|
|
|
return (
|
|
<div className="min-h-screen">
|
|
{/* Hero Section */}
|
|
<PageHero
|
|
title=""
|
|
subtitle="Contact Us"
|
|
description="Partner with India's premium Basmati rice manufacturer. Connect with us for wholesale opportunities, bulk orders, and business partnerships."
|
|
badge={{
|
|
text: "Professional • Reliable • Trusted"
|
|
}}
|
|
backgroundGradient="from-blue-600/10 to-emerald-600/10"
|
|
titleGradient="from-blue-600 to-emerald-600"
|
|
/>
|
|
|
|
{/* Main Content */}
|
|
<div className="bg-white">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20">
|
|
|
|
{/* Professional Contact Info Cards */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.1 }}
|
|
className="mb-20"
|
|
>
|
|
{/* Addresses Section */}
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl font-bold text-gray-900 mb-4">Our Locations</h2>
|
|
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
|
|
Visit our manufacturing facility and corporate office for business partnerships and quality assurance.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-16">
|
|
{contactInfo.map((info, index) => (
|
|
<motion.div
|
|
key={info.title}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.2 + index * 0.1 }}
|
|
whileHover={{ y: -8 }}
|
|
className="group"
|
|
>
|
|
<Card className="h-full hover:shadow-2xl transition-all duration-300 border-0 shadow-lg bg-gradient-to-br from-white to-gray-50 group-hover:from-blue-50 group-hover:to-white">
|
|
<CardContent className="p-8 text-center">
|
|
<div className="w-20 h-20 bg-gradient-to-br from-blue-100 to-blue-200 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:from-blue-500 group-hover:to-blue-600 transition-all duration-300">
|
|
<info.icon className="h-10 w-10 text-blue-600 group-hover:text-white transition-colors duration-300" />
|
|
</div>
|
|
<h3 className="text-xl font-bold text-gray-900 mb-3">
|
|
{info.title}
|
|
</h3>
|
|
<p className="text-gray-900 font-semibold mb-2 text-lg">
|
|
{info.details}
|
|
</p>
|
|
<p className="text-sm text-gray-600 mb-2">
|
|
{info.subtitle}
|
|
</p>
|
|
<div className="mt-3 pt-3 border-t border-gray-200">
|
|
<Badge variant="outline" className="text-xs font-medium bg-blue-50 text-blue-700 border-blue-200">
|
|
{info.highlight}
|
|
</Badge>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Business Contact Section */}
|
|
<div className="text-center mb-12">
|
|
<h2 className="text-3xl font-bold text-gray-900 mb-4">Business Contact</h2>
|
|
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
|
|
Get in touch with our professional team for business inquiries and partnerships.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
{businessInfo.map((info, index) => (
|
|
<motion.div
|
|
key={info.title}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.2 + index * 0.1 }}
|
|
whileHover={{ y: -8 }}
|
|
className="group"
|
|
>
|
|
<Card className="h-full hover:shadow-2xl transition-all duration-300 border-0 shadow-lg bg-gradient-to-br from-white to-gray-50 group-hover:from-emerald-50 group-hover:to-white">
|
|
<CardContent className="p-8 text-center">
|
|
<div className="w-20 h-20 bg-gradient-to-br from-emerald-100 to-emerald-200 rounded-2xl flex items-center justify-center mx-auto mb-6 group-hover:from-emerald-500 group-hover:to-emerald-600 transition-all duration-300">
|
|
<info.icon className="h-10 w-10 text-emerald-600 group-hover:text-white transition-colors duration-300" />
|
|
</div>
|
|
<h3 className="text-xl font-bold text-gray-900 mb-3">
|
|
{info.title}
|
|
</h3>
|
|
<p className="text-gray-900 font-semibold mb-2 text-lg">
|
|
{info.details}
|
|
</p>
|
|
<p className="text-sm text-gray-600 mb-2">
|
|
{info.subtitle}
|
|
</p>
|
|
<div className="mt-3 pt-3 border-t border-gray-200">
|
|
<Badge variant="outline" className="text-xs font-medium bg-emerald-50 text-emerald-700 border-emerald-200">
|
|
{info.highlight}
|
|
</Badge>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Business Partnership CTA */}
|
|
{/* <motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.5 }}
|
|
className="mb-16 bg-gradient-to-r from-blue-600 to-blue-700 rounded-2xl p-8 md:p-12 text-white"
|
|
>
|
|
<div className="text-center">
|
|
<h3 className="text-2xl md:text-3xl font-bold mb-4">Ready to Partner with Us?</h3>
|
|
<p className="text-blue-100 text-lg mb-6 max-w-3xl mx-auto">
|
|
Join India's leading Basmati rice manufacturer. We offer competitive wholesale pricing,
|
|
premium quality assurance, and reliable supply chain solutions for your business.
|
|
</p>
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-8">
|
|
<div className="text-center">
|
|
<div className="text-3xl font-bold text-blue-100">200+ CR</div>
|
|
<div className="text-blue-200 text-sm">Annual Revenue</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-3xl font-bold text-blue-100">FSSAI</div>
|
|
<div className="text-blue-200 text-sm">Certified Quality</div>
|
|
</div>
|
|
<div className="text-center">
|
|
<div className="text-3xl font-bold text-blue-100">24/7</div>
|
|
<div className="text-blue-200 text-sm">Quality Focus</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div> */}
|
|
|
|
{/* Professional Contact Form & Information */}
|
|
<section className="py-20 bg-gray-50">
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="text-center mb-16">
|
|
<h2 className="text-4xl font-bold text-gray-900 mb-4">Contact Us</h2>
|
|
<p className="text-lg text-gray-600 max-w-2xl mx-auto">
|
|
Ready to partner with us? Get in touch with our team for business inquiries and partnerships.
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
|
|
{/* Modern Minimal Contact Form */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.2 }}
|
|
className="order-2 lg:order-1"
|
|
>
|
|
<div className="bg-white rounded-2xl border border-gray-100 shadow-sm hover:shadow-md transition-shadow duration-300">
|
|
<div className="p-8">
|
|
<div className="mb-8">
|
|
<h2 className="text-2xl font-bold text-gray-900 mb-2">Get in touch</h2>
|
|
<p className="text-gray-600">
|
|
Connect with our team for business partnerships and bulk orders.
|
|
</p>
|
|
</div>
|
|
|
|
<ContactForm />
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Business Information - Clean Masonry Layout */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.6, delay: 0.3 }}
|
|
className="order-1 lg:order-2"
|
|
>
|
|
{/* Masonry Grid Layout */}
|
|
<div className="grid grid-cols-1 gap-6 auto-rows-max">
|
|
|
|
{/* Google Maps - Simplified */}
|
|
<div className="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
|
|
<div className="p-4 border-b border-gray-100">
|
|
<div className="flex items-center text-gray-900 font-medium">
|
|
<MapPin className="h-4 w-4 text-orange-600 mr-2" />
|
|
Office Location
|
|
</div>
|
|
</div>
|
|
<div className="relative h-48 w-full">
|
|
<iframe
|
|
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3559.6756662889756!2d80.94482677549088!3d26.780273676736253!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x399bfb07d4460727%3A0xdd3f66282f88d3ce!2s11-B%2F79%2C%20Brij%20Vihar%2C%20Sector%2011%2C%20Vrindavan%20Colony%2C%20Lucknow%2C%20Uttar%20Pradesh%20226029!5e0!3m2!1sen!2sin!4v1697000000000!5m2!1sen!2sin"
|
|
width="100%"
|
|
height="100%"
|
|
style={{ border: 0 }}
|
|
allowFullScreen={true}
|
|
loading="lazy"
|
|
referrerPolicy="no-referrer-when-downgrade"
|
|
></iframe>
|
|
</div>
|
|
<div className="p-4 bg-gray-50">
|
|
<p className="text-sm font-medium text-gray-900">11B/79</p>
|
|
<p className="text-sm text-gray-600">Vrindavan Yojna, Lucknow - 226029</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Quick Stats - Minimal Grid */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="bg-orange-50 rounded-xl border border-orange-100 p-4 text-center">
|
|
<div className="text-2xl font-bold text-orange-600 mb-1">200+ CR</div>
|
|
<div className="text-xs text-gray-600">Annual Revenue</div>
|
|
</div>
|
|
<div className="bg-green-50 rounded-xl border border-green-100 p-4 text-center">
|
|
<div className="text-2xl font-bold text-green-600 mb-1">FSSAI</div>
|
|
<div className="text-xs text-gray-600">Certified</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
{/* FAQ - Minimal Accordion */}
|
|
<div className="bg-white rounded-2xl border border-gray-100 shadow-sm p-6">
|
|
<h3 className="font-semibold text-gray-900 mb-4">Quick FAQ</h3>
|
|
<Accordion type="single" collapsible className="w-full space-y-2">
|
|
<AccordionItem value="item-1" className="border-b border-gray-100 pb-2">
|
|
<AccordionTrigger className="text-left text-sm font-medium py-2 hover:no-underline">
|
|
Minimum order quantity?
|
|
</AccordionTrigger>
|
|
<AccordionContent className="text-sm text-gray-600 pb-2">
|
|
1000 kg minimum for premium Basmati rice.
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
|
|
<AccordionItem value="item-2" className="border-b border-gray-100 pb-2">
|
|
<AccordionTrigger className="text-left text-sm font-medium py-2 hover:no-underline">
|
|
Do you provide samples?
|
|
</AccordionTrigger>
|
|
<AccordionContent className="text-sm text-gray-600 pb-2">
|
|
Yes, free samples up to 1 kg for evaluation.
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
|
|
<AccordionItem value="item-3" className="border-none">
|
|
<AccordionTrigger className="text-left text-sm font-medium py-2 hover:no-underline">
|
|
Payment terms?
|
|
</AccordionTrigger>
|
|
<AccordionContent className="text-sm text-gray-600">
|
|
Flexible terms with advance discounts available.
|
|
</AccordionContent>
|
|
</AccordionItem>
|
|
</Accordion>
|
|
</div>
|
|
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|