first commit

This commit is contained in:
2026-01-17 14:17:42 +05:30
commit 0f194eb9e7
328 changed files with 73544 additions and 0 deletions

918
app/(public)/about/page.tsx Normal file
View File

@@ -0,0 +1,918 @@
'use client'
import { motion } from 'framer-motion'
import Image from 'next/image'
import Link from 'next/link'
import { Users, Award, Target, Globe, Leaf, Shield, Heart, Factory, MapPin, Calendar, ArrowRight } from 'lucide-react'
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import ImageSlider from '@/components/ImageSlider'
export default function AboutPage() {
const sliderImages = [
{
src: 'https://images.pexels.com/photos/164504/pexels-photo-164504.jpeg',
alt: 'Rice Fields',
title: 'Premium Basmati Rice Fields'
},
{
src: 'https://images.pexels.com/photos/2804327/pexels-photo-2804327.jpeg',
alt: 'Rice Grains',
title: 'High Quality Rice Grains'
},
{
src: 'https://images.pexels.com/photos/8108170/pexels-photo-8108170.jpeg',
alt: 'Agriculture',
title: 'Modern Agricultural Practices'
},
{
src: '/farmer.png',
alt: 'Farmer',
title: 'Dedicated Farming Excellence'
},
// {
// src: '/lab.png',
// alt: 'Quality Control Lab',
// title: 'Advanced Quality Control Laboratory'
// },
{
src: '/factory.png',
alt: 'Manufacturing Facility',
title: 'Manufacturing Facility'
}
]
const features = [
{
icon: Leaf,
title: 'Premium Basmati Rice',
description: 'We source the finest Basmati rice from Haryana, known as the hub of premium quality Basmati rice.'
},
{
icon: Shield,
title: 'Quality Assurance',
description: 'FSSAI certified facilities with strict quality control measures ensuring food safety and excellence.'
},
{
icon: Heart,
title: 'Traditional Excellence',
description: 'Founded by experienced professionals with deep knowledge of rice processing and quality standards.'
},
{
icon: Factory,
title: 'Modern Processing',
description: 'Our manufacturing unit in Kaithal, Siwan, Haryana uses state-of-the-art technology for processing.'
}
]
const team = [
{
name: 'Rajeev Singh',
role: 'Founder & Director',
image: '/Rajeev Singh.jpg',
description: 'Ex-army professional who founded Padmaaja with extensive experience in real estate since 2018 and now leading FMCG operations.',
background: 'Ex-Army • Real Estate Expert • Visionary Leader'
},
{
name: 'Smt. Padmasha Singh',
role: 'Chairman',
image: '/Padmaja Singh.png',
description: 'Experienced leader providing strategic direction and ensuring the company maintains its commitment to quality and excellence.',
background: 'Strategic Leader • Quality Advocate • Industry Expert'
}
]
const milestones = [
{ year: '2018', title: 'Real Estate Journey', description: 'Started our business journey in real estate sector with successful operations' },
{ year: '2024 Q1', title: 'FMCG Expansion', description: 'Transitioned into FMCG products, focusing on premium Basmati rice processing' },
{ year: '2024 Q2', title: 'Manufacturing Setup', description: 'Established manufacturing unit in Kaithal, Siwan, Haryana - the hub of Basmati rice' },
{ year: '2025', title: 'Brand Launch', description: 'Launched Kashmina Basmati Rice brand with guaranteed quality standards' }
]
return (
<div className="min-h-screen">
{/* Image Slider Section */}
<section className="py-8">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<ImageSlider images={sliderImages} />
</div>
</section>
{/* Navigation Links */}
<section className="sticky top-[95px] z-50 py-4 bg-gray-50/95 backdrop-blur-sm border-b border-gray-200 shadow-sm">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex flex-wrap justify-center gap-3">
<Link href="#who-we-are">
<Button variant="outline" className="hover:bg-orange-50 hover:border-orange-200">
Who We Are
</Button>
</Link>
<Link href="#mission-vision">
<Button variant="outline" className="hover:bg-orange-50 hover:border-orange-200">
Mission & Vision
</Button>
</Link>
<Link href="/about/founder">
<Button variant="outline" className="hover:bg-orange-50 hover:border-orange-200">
Our Founders
</Button>
</Link>
<Link href="#team">
<Button variant="outline" className="hover:bg-orange-50 hover:border-orange-200">
Our Team
</Button>
</Link>
<Link href="#features">
<Button variant="outline" className="hover:bg-orange-50 hover:border-orange-200">
Why Choose Us
</Button>
</Link>
<Link href="#journey">
<Button variant="outline" className="hover:bg-orange-50 hover:border-orange-200">
Our Journey
</Button>
</Link>
<Link href="#process">
<Button variant="outline" className="hover:bg-orange-50 hover:border-orange-200">
Our Process
</Button>
</Link>
</div>
</div>
</section>
{/* Who We Are Section */}
<section id="who-we-are" className="py-16 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="text-center mb-12"
>
<h2 className="text-4xl font-bold text-gray-900 mb-4">
Who We Are
</h2>
</motion.div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
{/* Left Column - Company Info */}
<div className="lg:col-span-2 space-y-6">
<motion.div
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8 }}
className="space-y-6"
>
<div className="flex items-start space-x-3">
<MapPin className="w-6 h-6 text-orange-500 mt-1 flex-shrink-0" />
<div>
<h3 className="text-lg font-semibold text-orange-600 mb-2">
Based in Lucknow, Uttar Pradesh, India
</h3>
<p className="text-gray-700 leading-relaxed">
We are an India-based company headquartered in <strong>Lucknow, Uttar Pradesh</strong>.
Founded by an ex-army professional, <strong>Rajeev Singh (Founder and Director)</strong> and
his wife <strong>Smt. Padmasha Singh (Chairman)</strong>, we bring discipline, quality,
and excellence to everything we do.
</p>
</div>
</div>
<div className="bg-orange-50 rounded-lg p-6 border-l-4 border-orange-500">
<div className="flex items-center space-x-2 mb-4">
<Calendar className="w-5 h-5 text-orange-500" />
<h4 className="font-semibold text-gray-900">Our Journey</h4>
</div>
<div className="space-y-3">
<div className="flex items-center space-x-3">
<span className="bg-orange-500 text-white text-sm font-bold px-2 py-1 rounded">2018</span>
<span className="text-gray-700">Started our business journey in real estate</span>
</div>
<div className="flex items-center space-x-3">
<span className="bg-orange-500 text-white text-sm font-bold px-2 py-1 rounded">2024</span>
<span className="text-gray-700">Expanded into FMCG products, focusing on premium rice</span>
</div>
<div className="flex items-center space-x-3">
<span className="bg-orange-500 text-white text-sm font-bold px-2 py-1 rounded">Present</span>
<span className="text-gray-700">Leading manufacturer of Kashmina Basmati Rice</span>
</div>
</div>
</div>
<p className="text-gray-700 leading-relaxed">
Our manufacturing unit is strategically located in <strong>Kaithal, Siwan, Haryana</strong> -
the renowned hub of Basmati rice production. Haryana is globally recognized for producing
the finest quality Basmati rice, and our brand <strong>Kashmina Basmati Rice</strong>
represents this legacy of excellence.
</p>
<div className="bg-gradient-to-r from-orange-50 to-yellow-50 rounded-lg p-6 border border-orange-200">
<h4 className="font-bold text-gray-900 mb-3 text-lg">Our Promise</h4>
<p className="text-gray-800">
We assure and guarantee the highest quality standards in every grain of rice,
bringing you the authentic taste and aroma that Basmati is known for.
</p>
</div>
</motion.div>
</div>
{/* Right Column - Cards */}
<div className="space-y-6">
<motion.div
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
className="space-y-6"
>
{/* Manufacturing Excellence Card */}
<Card className="border-0 shadow-lg hover:shadow-xl transition-shadow">
<CardHeader className="pb-4">
<CardTitle className="text-xl font-bold text-gray-900 text-center">
Manufacturing Excellence
</CardTitle>
<div className="text-center">
<Badge className="bg-orange-100 text-orange-800 px-3 py-1 text-sm">
Kaithal, Siwan, Haryana
</Badge>
</div>
</CardHeader>
<CardContent className="space-y-3">
<div className="flex items-start space-x-3">
<div className="w-2 h-2 rounded-full bg-orange-500 mt-2 flex-shrink-0"></div>
<p className="text-sm text-gray-700">Located in Haryana - the heart of Basmati rice cultivation</p>
</div>
<div className="flex items-start space-x-3">
<div className="w-2 h-2 rounded-full bg-orange-500 mt-2 flex-shrink-0"></div>
<p className="text-sm text-gray-700">State-of-the-art processing facilities ensuring quality</p>
</div>
<div className="flex items-start space-x-3">
<div className="w-2 h-2 rounded-full bg-orange-500 mt-2 flex-shrink-0"></div>
<p className="text-sm text-gray-700">Advanced quality control laboratory for testing</p>
</div>
<div className="flex items-start space-x-3">
<div className="w-2 h-2 rounded-full bg-orange-500 mt-2 flex-shrink-0"></div>
<p className="text-sm text-gray-700">Hygienic packaging standards maintaining freshness</p>
</div>
</CardContent>
</Card>
{/* Kashmina Rice Card */}
<Card className="border-0 shadow-lg hover:shadow-xl transition-shadow bg-gradient-to-br from-emerald-50 to-orange-50">
<CardContent className="p-6">
<div className="flex items-center">
<div className="relative w-24 h-24 flex-shrink-0">
<Image
src="/rice_bags.png"
alt="Kashmina Basmati Rice"
fill
className="object-contain"
/>
</div>
<div className="flex-1">
<h4 className="font-bold text-xl text-gray-900 mb-3">Kashmina Basmati Rice</h4>
<p className="text-gray-700 leading-relaxed text-sm">
Our flagship brand represents the finest quality Basmati rice,
carefully selected, processed, and packaged to deliver the authentic
aroma, long grains, and exceptional taste that makes every meal special.
</p>
</div>
</div>
</CardContent>
</Card>
</motion.div>
</div>
</div>
</div>
</section>
{/* Mission & Vision Section */}
<section id="mission-vision" className="py-20 bg-gradient-to-br from-slate-50 to-emerald-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
{/* Mission */}
<motion.div
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8 }}
>
<Card className="h-full border-0 shadow-xl">
<CardHeader className="text-center pb-4">
<div className="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4" style={{backgroundColor: '#F5873B20'}}>
<Target className="h-8 w-8" style={{color: '#F5873B'}} />
</div>
<CardTitle className="text-3xl font-bold text-gray-900">Our Mission</CardTitle>
</CardHeader>
<CardContent>
<p className="text-lg text-gray-600 leading-relaxed text-center">
Our mission is very simple - we know that if we provide the best, you will collaborate with us as the best.
We think and work towards prevailing all over India. Our mission is to provide the best quality rice
for everyone at affordable cost, ensuring premium Basmati reaches every Indian kitchen.
</p>
</CardContent>
</Card>
</motion.div>
{/* Vision */}
<motion.div
initial={{ opacity: 0, x: 20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
>
<Card className="h-full border-0 shadow-xl">
<CardHeader className="text-center pb-4">
<div className="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 bg-emerald-100">
<Globe className="h-8 w-8 text-emerald-600" />
</div>
<CardTitle className="text-3xl font-bold text-gray-900">Our Vision</CardTitle>
</CardHeader>
<CardContent>
<p className="text-lg text-gray-600 leading-relaxed text-center">
We know that we are processing what you don&apos;t see, but you eat. Here our responsibility is paramount.
Our vision is to be the best in your eyes and within your budget - delivering exceptional quality
Kashmina Basmati Rice that exceeds expectations while remaining accessible to all.
</p>
</CardContent>
</Card>
</motion.div>
</div>
</div>
</section>
{/* Features Section */}
<section id="features" className="py-20">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="text-center mb-16"
>
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
Why Choose Padmaaja Rasooi?
</h2>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
We&apos;re committed to delivering authentic flavors through traditional recipes
and modern food processing excellence.
</p>
</motion.div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{features.map((feature, index) => (
<motion.div
key={feature.title}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: index * 0.1 }}
>
<Card className="h-full hover:shadow-xl transition-all duration-300 border-0 shadow-lg">
<CardContent className="p-6 text-center">
<div className="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4" style={{backgroundColor: '#F5873B20'}}>
<feature.icon className="h-8 w-8" style={{color: '#F5873B'}} />
</div>
<h3 className="text-xl font-semibold text-gray-900 mb-3">
{feature.title}
</h3>
<p className="text-gray-600">
{feature.description}
</p>
</CardContent>
</Card>
</motion.div>
))}
</div>
</div>
</section>
{/* Leadership Overview Section */}
<section className="py-20 bg-gradient-to-br from-slate-50 to-emerald-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="text-center mb-16"
>
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
Our Leadership
</h2>
<p className="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
Founded by experienced professionals with a vision to bring premium quality
Basmati rice from Haryana to every Indian household.
</p>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
className="bg-white rounded-xl shadow-lg p-8 max-w-4xl mx-auto"
>
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
<div className="space-y-4">
<h3 className="text-2xl font-bold text-gray-900">Meet Our Founders</h3>
<p className="text-gray-700 leading-relaxed">
<strong>Rajeev Singh (Founder & Director)</strong> - Ex-army professional with extensive
experience in real estate since 2018, now leading our FMCG operations with discipline and excellence.
</p>
<p className="text-gray-700 leading-relaxed">
<strong>Smt. Padmasha Singh (Chairman)</strong> - Experienced leader providing strategic
direction and ensuring our commitment to quality and excellence.
</p>
<Link href="/about/founder">
<Button className="bg-orange-500 hover:bg-orange-600 text-white mt-4">
Learn More About Our Founders
<ArrowRight className="ml-2 w-4 h-4" />
</Button>
</Link>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="relative h-40 rounded-lg overflow-hidden">
<Image
src="/Rajeev Singh.jpg"
alt="Rajeev Singh"
fill
className="object-cover"
/>
</div>
<div className="relative h-40 rounded-lg overflow-hidden">
<Image
src="/Padmaja Singh.png"
alt="Smt. Padmasha Singh"
fill
className="object-cover"
/>
</div>
</div>
</div>
</motion.div>
</motion.div>
</div>
</section>
{/* Our Team Section */}
<section id="team" className="py-20 bg-gradient-to-br from-gray-50 via-white to-blue-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="text-center mb-20"
>
<div className="inline-flex items-center bg-orange-100 text-orange-800 px-4 py-2 rounded-full text-sm font-medium mb-6">
<Users className="w-4 h-4 mr-2" />
Meet Our Team
</div>
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-6">
Our Core Team
</h2>
<p className="text-xl text-gray-600 max-w-3xl mx-auto leading-relaxed">
Meet the dedicated professionals who ensure every grain of Kashmina Basmati Rice
meets our exceptional standards of quality and excellence.
</p>
</motion.div>
{/* Team Grid */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6 mb-20">
{[
{
name: "Abhishek Patel",
role: "HR",
department: "Human Resources",
description: "Manages our human resources and ensures smooth workforce operations across all departments.",
icon: "👔",
color: "from-blue-500 to-blue-600",
bgColor: "bg-blue-50",
borderColor: "border-blue-200"
},
{
name: "Atul Sahu",
role: "Account",
department: "Finance & Accounts",
description: "Manages financial operations, accounting, and ensures fiscal responsibility across the organization.",
icon: "💼",
color: "from-emerald-500 to-emerald-600",
bgColor: "bg-emerald-50",
borderColor: "border-emerald-200"
},
{
name: "Rahul Kumar",
role: "Lab",
department: "Quality Control Laboratory",
description: "Oversees all laboratory testing and quality analysis to maintain our premium standards.",
icon: "🔬",
color: "from-orange-500 to-orange-600",
bgColor: "bg-orange-50",
borderColor: "border-orange-200"
},
{
name: "Shivchandra",
role: "Processing Incharge",
department: "Rice Processing",
description: "Supervises rice processing operations and ensures efficient production workflows.",
icon: "🏭",
color: "from-purple-500 to-purple-600",
bgColor: "bg-purple-50",
borderColor: "border-purple-200"
},
{
name: "Sunil Awasthi",
role: "Marketing Head",
department: "Marketing & Sales",
description: "Leads marketing strategies and sales initiatives to expand our market presence.",
icon: "📈",
color: "from-teal-500 to-teal-600",
bgColor: "bg-teal-50",
borderColor: "border-teal-200"
},
{
name: "Sailesh Tiwari",
role: "Head of Operation",
department: "Operations Management",
description: "Manages overall operations and coordinates between different departments for seamless workflow.",
icon: "⚙️",
color: "from-indigo-500 to-indigo-600",
bgColor: "bg-indigo-50",
borderColor: "border-indigo-200"
},
{
name: "Ajad Singh",
role: "Head of Operation",
department: "Operations Management",
description: "Oversees operational excellence and ensures quality standards across all production processes.",
icon: "🎯",
color: "from-rose-500 to-rose-600",
bgColor: "bg-rose-50",
borderColor: "border-rose-200"
}
].map((member, index) => (
<motion.div
key={member.name}
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6, delay: index * 0.1 }}
whileHover={{ y: -8, scale: 1.02 }}
className="group cursor-pointer"
>
<div className={`relative overflow-hidden rounded-2xl bg-white border ${member.borderColor} shadow-lg hover:shadow-2xl transition-all duration-300 h-full`}>
{/* Background Pattern */}
<div className={`absolute top-0 right-0 w-32 h-32 ${member.bgColor} rounded-full -translate-y-16 translate-x-16 opacity-20 group-hover:opacity-30 transition-opacity duration-300`} />
<div className="relative p-6">
{/* Icon */}
<div className={`w-14 h-14 rounded-xl bg-gradient-to-r ${member.color} flex items-center justify-center mb-4 text-white text-xl shadow-lg group-hover:scale-110 transition-transform duration-300`}>
{member.icon}
</div>
{/* Name & Role */}
<h3 className="text-lg font-bold text-gray-900 mb-1 group-hover:text-gray-700 transition-colors">
{member.name}
</h3>
<p className="text-orange-600 font-semibold text-sm mb-1">
{member.role}
</p>
<div className={`inline-block px-2 py-1 ${member.bgColor} text-xs font-medium rounded-full mb-3`}>
{member.department}
</div>
{/* Description */}
<p className="text-gray-600 text-sm leading-relaxed">
{member.description}
</p>
</div>
{/* Hover Effect Gradient */}
<div className={`absolute inset-0 bg-gradient-to-br ${member.color} opacity-0 group-hover:opacity-5 transition-opacity duration-300 rounded-2xl`} />
</div>
</motion.div>
))}
</div>
{/* Team Stats */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.5 }}
className="grid grid-cols-2 md:grid-cols-4 gap-6 mb-16"
>
{[
{ number: "7+", label: "Team Members", icon: "👥" },
{ number: "100%", label: "Dedication", icon: "⭐" },
{ number: "24/7", label: "Quality Focus", icon: "🎯" },
{ number: "200+ CR", label: "Revenue", icon: "💰" },
].map((stat, index) => (
<div key={stat.label} className="text-center">
<div className="bg-white rounded-xl p-6 shadow-lg border border-gray-100 hover:shadow-xl transition-shadow duration-300">
<div className="text-2xl mb-2">{stat.icon}</div>
<div className="text-2xl md:text-3xl font-bold text-orange-600 mb-1">{stat.number}</div>
<div className="text-gray-600 text-sm font-medium">{stat.label}</div>
</div>
</div>
))}
</motion.div>
{/* Banking Partner Banner */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.7 }}
className="relative overflow-hidden bg-gradient-to-r from-blue-600 via-blue-700 to-indigo-700 rounded-2xl p-8 md:p-12 text-white"
>
{/* Background Pattern */}
<div className="absolute inset-0 bg-gradient-to-r from-blue-600/20 to-transparent" />
<div className="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full -translate-y-32 translate-x-32" />
<div className="absolute bottom-0 left-0 w-48 h-48 bg-white/5 rounded-full translate-y-24 -translate-x-24" />
<div className="relative text-center">
<div className="inline-flex items-center justify-center w-16 h-16 bg-white/20 backdrop-blur-sm rounded-full mb-6">
<div className="text-3xl">🏦</div>
</div>
<h3 className="text-2xl md:text-3xl font-bold mb-4">
Trusted Banking Partner
</h3>
<p className="text-xl mb-2 font-semibold text-blue-100">
State Bank of India, Kaithal
</p>
<p className="text-blue-100 max-w-2xl mx-auto leading-relaxed">
Our operations are backed by State Bank of India in Kaithal, Haryana,
ensuring financial stability and trust in all our business operations.
</p>
</div>
</motion.div>
</div>
</section>
{/* Journey & Milestones Section */}
<section id="journey" className="py-20">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="text-center mb-16"
>
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
Our Journey
</h2>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
From a small family kitchen to a trusted brand across India -
here&apos;s how we&apos;ve grown while staying true to our roots.
</p>
</motion.div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{milestones.map((milestone, index) => (
<motion.div
key={milestone.year}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: index * 0.1 }}
>
<Card className="h-full border-0 shadow-lg hover:shadow-xl transition-all duration-300">
<CardContent className="p-6 text-center">
<div className="text-3xl font-bold mb-2" style={{color: '#F5873B'}}>
{milestone.year}
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-3">
{milestone.title}
</h3>
<p className="text-gray-600 text-sm">
{milestone.description}
</p>
</CardContent>
</Card>
</motion.div>
))}
</div>
</div>
</section>
{/* Rice Processing Journey Section */}
<section id="process" className="py-20 bg-white">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="text-center mb-16"
>
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
From Farm to Table
</h2>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
Our meticulous 8-step process ensures every grain of Kashmina Basmati Rice
meets the highest standards of quality, purity, and freshness.
</p>
</motion.div>
<div className="relative">
{/* Process Flow */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
{[
{
step: 1,
title: "Purchase",
description: "Premium paddy sourced directly from trusted farmers in Haryana",
icon: "🌾",
color: "from-green-400 to-green-600"
},
{
step: 2,
title: "Lab Testing",
description: "Rigorous quality checks for moisture, purity, and grain quality",
icon: "🔬",
color: "from-blue-400 to-blue-600"
},
{
step: 3,
title: "Drying Process",
description: "Controlled drying to optimal moisture levels for processing",
icon: "☀️",
color: "from-yellow-400 to-orange-500"
},
{
step: 4,
title: "Steaming",
description: "Traditional steaming process to enhance aroma and texture",
icon: "♨️",
color: "from-purple-400 to-purple-600"
},
{
step: 5,
title: "Sorting",
description: "Advanced sorting to separate premium long grains",
icon: "🔍",
color: "from-teal-400 to-teal-600"
},
{
step: 6,
title: "Quality Check",
description: "Final quality inspection ensuring consistency and excellence",
icon: "✅",
color: "from-emerald-400 to-emerald-600"
},
{
step: 7,
title: "Packaging",
description: "Hygienic packaging in food-grade materials for freshness",
icon: "📦",
color: "from-indigo-400 to-indigo-600"
},
{
step: 8,
title: "Labelling",
description: "Proper labelling with batch details and quality certifications",
icon: "🏷️",
color: "from-rose-400 to-rose-600"
}
].map((process, index) => (
<motion.div
key={process.step}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: index * 0.1 }}
className="relative"
>
{/* Connecting Line for larger screens */}
{index < 7 && (
<div className="hidden lg:block absolute top-16 left-full w-8 h-0.5 bg-gradient-to-r from-orange-300 to-orange-400 z-0" />
)}
<Card className="h-full border-0 shadow-lg hover:shadow-xl transition-all duration-300 relative z-10">
<CardContent className="p-6 text-center">
{/* Step Number */}
<div className={`w-12 h-12 rounded-full bg-gradient-to-r ${process.color} flex items-center justify-center mx-auto mb-4 text-white font-bold text-lg`}>
{process.step}
</div>
{/* Icon */}
<div className="text-4xl mb-3">
{process.icon}
</div>
{/* Title */}
<h3 className="text-xl font-semibold text-gray-900 mb-3">
{process.title}
</h3>
{/* Description */}
<p className="text-gray-600 text-sm leading-relaxed">
{process.description}
</p>
</CardContent>
</Card>
</motion.div>
))}
</div>
{/* Quality Assurance Banner */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.8 }}
className="mt-16 bg-gradient-to-r from-orange-50 to-yellow-50 rounded-xl p-8 border-l-4 border-orange-500"
>
<div className="text-center">
<h3 className="text-2xl font-bold text-gray-900 mb-4">
🏆 Quality Guaranteed at Every Step
</h3>
<p className="text-gray-700 text-lg max-w-4xl mx-auto">
Our FSSAI-certified facility and experienced team ensure that every grain of
Kashmina Basmati Rice maintains the authentic aroma, perfect texture, and
exceptional taste that makes your meals truly special.
</p>
</div>
</motion.div>
</div>
</div>
</section>
{/* Values Section */}
<section className="py-20 bg-gradient-to-br from-slate-50 to-emerald-50">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
className="text-center mb-16"
>
<h2 className="text-3xl md:text-4xl font-bold text-gray-900 mb-4">
Our Core Values
</h2>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
The principles that guide everything we do at Padmaaja Rasooi.
</p>
</motion.div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
>
<Card className="h-full border-0 shadow-lg">
<CardContent className="p-8 text-center">
<div className="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4" style={{backgroundColor: '#F5873B20'}}>
<Shield className="h-8 w-8" style={{color: '#F5873B'}} />
</div>
<h3 className="text-2xl font-semibold text-gray-900 mb-4">
Authenticity
</h3>
<p className="text-gray-600">
We stay true to traditional recipes and cooking methods, ensuring every product
delivers the authentic taste that connects you to India&apos;s rich culinary heritage.
</p>
</CardContent>
</Card>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.1 }}
>
<Card className="h-full border-0 shadow-lg">
<CardContent className="p-8 text-center">
<div className="w-16 h-16 bg-emerald-100 rounded-full flex items-center justify-center mx-auto mb-4">
<Leaf className="h-8 w-8 text-emerald-600" />
</div>
<h3 className="text-2xl font-semibold text-gray-900 mb-4">
Quality
</h3>
<p className="text-gray-600">
From sourcing the finest ingredients to maintaining strict quality controls,
we ensure every product meets the highest standards of safety and excellence.
</p>
</CardContent>
</Card>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
>
<Card className="h-full border-0 shadow-lg">
<CardContent className="p-8 text-center">
<div className="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4" style={{backgroundColor: '#F5873B20'}}>
<Heart className="h-8 w-8" style={{color: '#F5873B'}} />
</div>
<h3 className="text-2xl font-semibold text-gray-900 mb-4">
Family First
</h3>
<p className="text-gray-600">
We believe food brings families together. Every product is crafted with the same
love and care we put into our own family&apos;s meals.
</p>
</CardContent>
</Card>
</motion.div>
</div>
</div>
</section>
</div>
)
}