first commit

components/sections/OurValues.tsx

@@ -0,0 +1,125 @@
+'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>
+  )
+}