126 lines
4.6 KiB
TypeScript
126 lines
4.6 KiB
TypeScript
'use client'
|
||
|
||
import { motion } from 'framer-motion'
|
||
import { Card, CardContent } from '@/components/ui/card'
|
||
import { Badge } from '@/components/ui/badge'
|
||
import {
|
||
Wheat,
|
||
Shield,
|
||
Award,
|
||
Leaf
|
||
} from 'lucide-react'
|
||
|
||
const values = [
|
||
{
|
||
title: "Rice Purity",
|
||
description: "Every grain of Basmati and Sella rice is carefully selected and tested for maximum purity.",
|
||
icon: Shield
|
||
},
|
||
{
|
||
title: "Farm Fresh Rice",
|
||
description: "Direct sourcing from Punjab & Haryana's finest rice farms ensures authentic quality.",
|
||
icon: Wheat
|
||
},
|
||
{
|
||
title: "Rice Excellence",
|
||
description: "Committed to delivering the finest aged Basmati and premium Sella rice varieties.",
|
||
icon: Award
|
||
},
|
||
{
|
||
title: "Sustainable Rice Farming",
|
||
description: "Supporting eco-friendly rice cultivation practices for healthier communities and environment.",
|
||
icon: Leaf
|
||
}
|
||
]
|
||
|
||
export default function OurValues() {
|
||
return (
|
||
<section className="py-20 bg-gradient-to-br from-amber-50 to-yellow-50">
|
||
<div className="max-w-7xl mx-auto px-3 sm:px-6 lg:px-12">
|
||
{/* Section Header */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6 }}
|
||
viewport={{ once: true }}
|
||
className="text-center space-y-4 mb-16"
|
||
>
|
||
<Badge variant="secondary" className="bg-amber-100 text-amber-800 px-3 py-1 text-sm font-medium">
|
||
Our Rice Values
|
||
</Badge>
|
||
<h2 className="text-3xl md:text-4xl font-bold text-slate-900">
|
||
The Quality of Kashhmna Premium
|
||
</h2>
|
||
<p className="text-slate-600 max-w-2xl mx-auto text-lg">
|
||
Our dedication to rice excellence is built on four core principles that ensure every grain of Basmati and Sella rice meets the highest standards.
|
||
</p>
|
||
</motion.div>
|
||
|
||
{/* Values Grid - 4 columns on desktop */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||
{values.map((value, index) => {
|
||
const IconComponent = value.icon
|
||
return (
|
||
<motion.div
|
||
key={value.title}
|
||
initial={{ opacity: 0, y: 30 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{
|
||
duration: 0.6,
|
||
delay: index * 0.1
|
||
}}
|
||
viewport={{ once: true }}
|
||
whileHover={{ y: -8 }}
|
||
className="group"
|
||
>
|
||
<Card className="h-full bg-white/80 backdrop-blur-sm border-0 shadow-lg hover:shadow-xl transition-all duration-300 group-hover:bg-white">
|
||
<CardContent className="p-8 text-center">
|
||
{/* Icon */}
|
||
<div className="w-16 h-16 bg-gradient-to-br from-amber-500 to-orange-600 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
|
||
<IconComponent className="h-8 w-8 text-white" />
|
||
</div>
|
||
|
||
{/* Title */}
|
||
<h3 className="text-xl font-bold text-slate-900 mb-4 group-hover:text-emerald-700 transition-colors">
|
||
{value.title}
|
||
</h3>
|
||
|
||
{/* Description */}
|
||
<p className="text-slate-600 leading-relaxed">
|
||
{value.description}
|
||
</p>
|
||
</CardContent>
|
||
</Card>
|
||
</motion.div>
|
||
)
|
||
})}
|
||
</div>
|
||
|
||
{/* Bottom CTA */}
|
||
<motion.div
|
||
initial={{ opacity: 0, y: 20 }}
|
||
whileInView={{ opacity: 1, y: 0 }}
|
||
transition={{ duration: 0.6, delay: 0.4 }}
|
||
viewport={{ once: true }}
|
||
className="text-center mt-16"
|
||
>
|
||
<p className="text-slate-600 text-lg mb-6">
|
||
Experience the difference that our values make in every grain
|
||
</p>
|
||
<div className="flex flex-col sm:flex-row gap-4 justify-center">
|
||
<Badge variant="outline" className="text-emerald-700 border-emerald-300 px-4 py-2">
|
||
🌾 Farm to Table
|
||
</Badge>
|
||
<Badge variant="outline" className="text-blue-700 border-blue-300 px-4 py-2">
|
||
🛡️ Quality Certified
|
||
</Badge>
|
||
<Badge variant="outline" className="text-green-700 border-green-300 px-4 py-2">
|
||
🌱 Eco-Friendly
|
||
</Badge>
|
||
</div>
|
||
</motion.div>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|