237 lines
12 KiB
TypeScript
237 lines
12 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Button } from '@/components/ui/button'
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from '@/components/ui/dialog'
|
|
import { Factory, Users, TrendingUp, Award, ArrowRight, CheckCircle, Gauge, Globe, Play } from 'lucide-react'
|
|
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
import { motion } from 'framer-motion'
|
|
|
|
export default function ManufacturingSection() {
|
|
const [isVideoOpen, setIsVideoOpen] = useState(false)
|
|
const facilities = [
|
|
{
|
|
icon: Factory,
|
|
title: "Advanced Rice Milling",
|
|
description: "Modern rice milling facility with precision technology for perfect grain separation and quality",
|
|
value: "100+ MT/Day",
|
|
label: "Rice Processing"
|
|
},
|
|
{
|
|
icon: CheckCircle,
|
|
title: "Rice Quality Assurance",
|
|
description: "Multi-stage quality checks ensuring every rice grain meets export quality standards",
|
|
value: "99.9%",
|
|
label: "Pure Rice Quality"
|
|
},
|
|
{
|
|
icon: Globe,
|
|
title: "Basmati Export Hub",
|
|
description: "Specialized facility for Basmati rice aging, processing and international export",
|
|
value: "25+",
|
|
label: "Countries Export"
|
|
},
|
|
{
|
|
icon: Users,
|
|
title: "Rice Processing Experts",
|
|
description: "Skilled team with traditional knowledge and modern techniques in rice processing",
|
|
value: "100+",
|
|
label: "Rice Specialists"
|
|
}
|
|
]
|
|
|
|
const processSteps = [
|
|
{
|
|
step: "01",
|
|
title: "Premium Paddy Sourcing",
|
|
description: "Direct procurement from Punjab & Haryana's best rice growing regions",
|
|
image: "/farmer.png"
|
|
},
|
|
{
|
|
step: "02",
|
|
title: "Traditional Rice Aging",
|
|
description: "Natural aging process for Basmati rice to develop characteristic aroma and length",
|
|
image: "/factory.png"
|
|
},
|
|
{
|
|
step: "03",
|
|
title: "Rice Quality Laboratory",
|
|
description: "Comprehensive testing for grain length, aroma, moisture and purity standards",
|
|
image: "/lab.png"
|
|
},
|
|
{
|
|
step: "04",
|
|
title: "Premium Rice Packaging",
|
|
description: "Food-grade packaging with moisture control for long-lasting rice freshness",
|
|
image: "/rice_bags.png"
|
|
}
|
|
]
|
|
|
|
return (
|
|
<section className="relative py-16 lg:py-24 overflow-hidden">
|
|
{/* Background */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-amber-50 via-yellow-50 to-orange-50/30"></div>
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_30%,rgba(245,158,11,0.05),transparent_50%)]"></div>
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_70%,rgba(251,191,36,0.05),transparent_50%)]"></div>
|
|
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
{/* Section Header */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6 }}
|
|
className="text-center mb-16"
|
|
>
|
|
<div className="inline-flex items-center gap-2 bg-amber-100/50 backdrop-blur-sm px-4 py-2 rounded-full mb-6">
|
|
<Factory className="w-4 h-4 text-amber-600" />
|
|
<span className="text-amber-700 font-medium text-sm">Rice Processing Excellence</span>
|
|
</div>
|
|
<h2 className="text-3xl md:text-4xl lg:text-5xl font-bold text-slate-900 mb-6">
|
|
From Paddy Fields to
|
|
<span className="text-transparent bg-gradient-to-r from-amber-600 via-yellow-500 to-orange-500 bg-clip-text"> Premium Rice</span>
|
|
</h2>
|
|
<p className="text-xl text-slate-600 max-w-3xl mx-auto leading-relaxed">
|
|
State-of-the-art rice processing facilities ensuring every grain of Basmati and Sella rice meets international quality standards
|
|
</p>
|
|
|
|
{/* Video Button */}
|
|
<div className="mt-8">
|
|
<Dialog open={isVideoOpen} onOpenChange={setIsVideoOpen}>
|
|
<DialogTrigger asChild>
|
|
<Button
|
|
size="lg"
|
|
className="bg-gradient-to-r from-amber-600 to-orange-600 hover:from-amber-700 hover:to-orange-700 text-white px-8 py-4 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 group"
|
|
>
|
|
<Play className="w-5 h-5 mr-2 group-hover:scale-110 transition-transform" />
|
|
Watch Video
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="max-w-4xl w-full p-0 bg-black border-0">
|
|
<DialogHeader className="sr-only">
|
|
<DialogTitle>Rice Processing Video</DialogTitle>
|
|
<DialogDescription>
|
|
Watch our complete rice processing journey from paddy to premium rice
|
|
</DialogDescription>
|
|
</DialogHeader>
|
|
<div className="relative w-full h-0 pb-[56.25%]"> {/* 16:9 aspect ratio */}
|
|
<video
|
|
className="absolute inset-0 w-full h-full"
|
|
controls
|
|
autoPlay
|
|
preload="metadata"
|
|
poster="/factory.png" // You can add a poster image
|
|
>
|
|
<source src="https://4m5m4tx28rtva30c.public.blob.vercel-storage.com/media/2025-09-07/rice-processing" type="video/mp4" />
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Facilities Stats Grid */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-20">
|
|
{facilities.map((facility, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: index * 0.1 }}
|
|
className="bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-100 group hover:border-amber-200"
|
|
>
|
|
<div className="flex items-center justify-between mb-4">
|
|
<div className="w-12 h-12 bg-gradient-to-br from-amber-100 to-yellow-200 rounded-xl flex items-center justify-center group-hover:scale-110 transition-transform duration-300">
|
|
<facility.icon className="w-6 h-6 text-amber-600" />
|
|
</div>
|
|
<div className="text-right">
|
|
<div className="text-2xl font-bold text-amber-600">{facility.value}</div>
|
|
<div className="text-xs text-slate-500 font-medium">{facility.label}</div>
|
|
</div>
|
|
</div>
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-2">{facility.title}</h3>
|
|
<p className="text-slate-600 text-sm leading-relaxed">{facility.description}</p>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Process Flow */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8 }}
|
|
className="bg-white rounded-3xl shadow-2xl p-8 lg:p-12 border border-gray-100"
|
|
>
|
|
<div className="text-center mb-12">
|
|
<h3 className="text-2xl md:text-3xl font-bold text-slate-900 mb-4">
|
|
Our Quality Process
|
|
</h3>
|
|
<p className="text-lg text-slate-600 max-w-2xl mx-auto">
|
|
Every step carefully monitored to deliver premium quality rice that exceeds expectations
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{processSteps.map((step, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, x: -20 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: index * 0.2 }}
|
|
className="relative text-center group"
|
|
>
|
|
{/* Step Number */}
|
|
<div className="inline-flex items-center justify-center w-12 h-12 bg-gradient-to-r from-emerald-600 to-emerald-700 text-white rounded-full font-bold text-lg mb-6 group-hover:scale-110 transition-transform duration-300">
|
|
{step.step}
|
|
</div>
|
|
|
|
{/* Image */}
|
|
<div className="relative w-24 h-24 mx-auto mb-6 rounded-2xl overflow-hidden shadow-lg group-hover:shadow-xl transition-shadow duration-300">
|
|
<Image
|
|
src={step.image}
|
|
alt={step.title}
|
|
fill
|
|
className="object-cover group-hover:scale-110 transition-transform duration-500"
|
|
/>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<h4 className="text-lg font-semibold text-slate-900 mb-3">{step.title}</h4>
|
|
<p className="text-slate-600 text-sm leading-relaxed">{step.description}</p>
|
|
|
|
{/* Connector Line */}
|
|
{index < processSteps.length - 1 && (
|
|
<div className="hidden lg:block absolute top-6 left-full w-full h-0.5 bg-gradient-to-r from-emerald-200 to-emerald-300 transform translate-x-4"></div>
|
|
)}
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
{/* CTA */}
|
|
<div className="text-center mt-12">
|
|
<Button asChild size="lg" className="bg-gradient-to-r from-emerald-600 to-emerald-700 hover:from-emerald-700 hover:to-emerald-800 text-white px-8 py-4 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 group">
|
|
<Link href="/about" className="inline-flex items-center">
|
|
Visit Our Facility
|
|
<ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|