246 lines
14 KiB
TypeScript
246 lines
14 KiB
TypeScript
'use client'
|
|
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Leaf, Heart, Droplets, Recycle, Users, Globe, ArrowRight, TreePine } from 'lucide-react'
|
|
import Image from 'next/image'
|
|
import Link from 'next/link'
|
|
import { motion } from 'framer-motion'
|
|
|
|
export default function SustainabilitySection() {
|
|
const initiatives = [
|
|
{
|
|
icon: Leaf,
|
|
title: "Organic Farming Support",
|
|
description: "Supporting farmers in transitioning to organic farming practices for sustainable agriculture",
|
|
impact: "500+ Farmers",
|
|
color: "from-green-500 to-emerald-500"
|
|
},
|
|
{
|
|
icon: Droplets,
|
|
title: "Water Conservation",
|
|
description: "Implementing water-efficient processing techniques and rainwater harvesting systems",
|
|
impact: "30% Water Saved",
|
|
color: "from-blue-500 to-cyan-500"
|
|
},
|
|
{
|
|
icon: Recycle,
|
|
title: "Zero Waste Processing",
|
|
description: "Converting rice husk and by-products into renewable energy and organic fertilizers",
|
|
impact: "95% Waste Recycled",
|
|
color: "from-purple-500 to-violet-500"
|
|
},
|
|
{
|
|
icon: TreePine,
|
|
title: "Carbon Neutral Goals",
|
|
description: "Working towards carbon-neutral operations through renewable energy adoption",
|
|
impact: "50% Renewable Energy",
|
|
color: "from-emerald-500 to-green-500"
|
|
}
|
|
]
|
|
|
|
const csrPrograms = [
|
|
{
|
|
title: "Farmer Welfare Program",
|
|
description: "Direct support to rice farmers through fair pricing, agricultural training, and modern farming techniques",
|
|
image: "/farmer.png",
|
|
beneficiaries: "5000+ Farmers",
|
|
focus: "Education & Support"
|
|
},
|
|
{
|
|
title: "Community Development",
|
|
description: "Healthcare, education and infrastructure development in rural farming communities",
|
|
image: "https://images.unsplash.com/photo-1559027615-cd4628902d4a?w=600&h=400&fit=crop&q=80",
|
|
beneficiaries: "50+ Villages",
|
|
focus: "Rural Development"
|
|
},
|
|
{
|
|
title: "Food Security Initiative",
|
|
description: "Ensuring food security through grain donation programs and nutritional awareness campaigns",
|
|
image: "https://images.unsplash.com/photo-1593113598332-cd288d649433?w=600&h=400&fit=crop&q=80",
|
|
beneficiaries: "10,000+ Meals",
|
|
focus: "Food Security"
|
|
}
|
|
]
|
|
|
|
const certifications = [
|
|
{ name: "ISO 14001", desc: "Environmental Management" },
|
|
{ name: "FSSAI", desc: "Food Safety Standards" },
|
|
{ name: "HACCP", desc: "Hazard Analysis" },
|
|
{ name: "Organic", desc: "Certified Organic" }
|
|
]
|
|
|
|
return (
|
|
<section className="relative py-16 lg:py-24 overflow-hidden">
|
|
{/* Background */}
|
|
<div className="absolute inset-0 bg-gradient-to-br from-green-50 via-emerald-50 to-white"></div>
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_30%,rgba(34,197,94,0.1),transparent_50%)]"></div>
|
|
<div className="absolute inset-0 bg-[radial-gradient(circle_at_80%_70%,rgba(16,185,129,0.1),transparent_50%)]"></div>
|
|
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
|
|
{/* Environmental Initiatives */}
|
|
<div className="mb-20">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
{initiatives.map((initiative, index) => (
|
|
<motion.div
|
|
key={index}
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: index * 0.1 }}
|
|
className="group"
|
|
>
|
|
<div className="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 p-6 border border-gray-100 group-hover:border-green-200 h-full">
|
|
{/* Icon */}
|
|
<div className={`w-16 h-16 bg-gradient-to-br ${initiative.color} rounded-2xl flex items-center justify-center mb-6 group-hover:scale-110 transition-transform duration-300`}>
|
|
<initiative.icon className="w-8 h-8 text-white" />
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<h3 className="text-lg font-semibold text-slate-900 mb-3">{initiative.title}</h3>
|
|
<p className="text-slate-600 text-sm leading-relaxed mb-4">{initiative.description}</p>
|
|
|
|
{/* Impact */}
|
|
<div className="inline-block bg-green-100 text-green-700 px-3 py-1 rounded-full text-xs font-semibold">
|
|
{initiative.impact}
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* CSR Programs */}
|
|
<motion.div
|
|
initial={{ opacity: 0, y: 30 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.8 }}
|
|
className="mb-20"
|
|
>
|
|
<div className="text-center mb-12">
|
|
<div className="inline-flex items-center gap-2 bg-blue-100/50 backdrop-blur-sm px-4 py-2 rounded-full mb-6">
|
|
<Heart className="w-4 h-4 text-blue-600" />
|
|
<span className="text-blue-700 font-medium text-sm">Social Impact</span>
|
|
</div>
|
|
<h3 className="text-2xl md:text-3xl font-bold text-slate-900 mb-4">
|
|
Community Development Programs
|
|
</h3>
|
|
<p className="text-lg text-slate-600 max-w-2xl mx-auto">
|
|
Creating positive impact in farming communities through targeted social initiatives
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
{csrPrograms.map((program, 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.2 }}
|
|
className="group"
|
|
>
|
|
<div className="bg-white rounded-2xl shadow-lg hover:shadow-2xl transition-all duration-500 overflow-hidden border border-gray-100 group-hover:border-blue-200">
|
|
{/* Image */}
|
|
<div className="relative h-48 overflow-hidden">
|
|
<Image
|
|
src={program.image}
|
|
alt={program.title}
|
|
fill
|
|
className="object-cover group-hover:scale-110 transition-transform duration-700"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
|
|
|
|
{/* Impact Badge */}
|
|
<div className="absolute top-4 right-4 bg-white/90 backdrop-blur-sm text-slate-700 px-3 py-1 rounded-full text-xs font-semibold">
|
|
{program.beneficiaries}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="p-6">
|
|
<div className="flex items-center gap-2 mb-3">
|
|
<span className="text-xs bg-blue-100 text-blue-700 px-2 py-1 rounded-full font-medium">
|
|
{program.focus}
|
|
</span>
|
|
</div>
|
|
<h4 className="text-lg font-semibold text-slate-900 mb-3">{program.title}</h4>
|
|
<p className="text-slate-600 text-sm leading-relaxed">{program.description}</p>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</motion.div>
|
|
|
|
{/* Certifications & Commitments */}
|
|
<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="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
{/* Left Content */}
|
|
<div>
|
|
<div className="inline-flex items-center gap-2 bg-emerald-100/50 backdrop-blur-sm px-4 py-2 rounded-full mb-6">
|
|
<Globe className="w-4 h-4 text-emerald-600" />
|
|
<span className="text-emerald-700 font-medium text-sm">Global Standards</span>
|
|
</div>
|
|
<h3 className="text-2xl md:text-3xl font-bold text-slate-900 mb-6">
|
|
Certified for Excellence
|
|
</h3>
|
|
<p className="text-lg text-slate-600 leading-relaxed mb-8">
|
|
Our commitment to quality and sustainability is validated by international certifications and industry recognition.
|
|
</p>
|
|
|
|
{/* Certifications Grid */}
|
|
<div className="grid grid-cols-2 gap-4 mb-8">
|
|
{certifications.map((cert, index) => (
|
|
<div key={index} className="text-center p-4 bg-gray-50 rounded-xl">
|
|
<div className="text-lg font-bold text-emerald-600 mb-1">{cert.name}</div>
|
|
<div className="text-xs text-slate-600">{cert.desc}</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<Button asChild size="lg" className="bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 text-white px-8 py-4 rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 group">
|
|
<Link href="/about/certifications" className="inline-flex items-center">
|
|
View All Certifications
|
|
<ArrowRight className="ml-2 h-5 w-5 group-hover:translate-x-1 transition-transform" />
|
|
</Link>
|
|
</Button>
|
|
</div>
|
|
|
|
{/* Right Visual */}
|
|
<div className="relative">
|
|
<div className="relative w-full h-80 rounded-2xl overflow-hidden shadow-2xl">
|
|
<Image
|
|
src="https://images.unsplash.com/photo-1560493676-04071c5f467b?w=600&h=400&fit=crop&q=80"
|
|
alt="Sustainable farming"
|
|
fill
|
|
className="object-cover"
|
|
/>
|
|
<div className="absolute inset-0 bg-gradient-to-t from-green-900/40 to-transparent"></div>
|
|
</div>
|
|
|
|
{/* Floating Stats */}
|
|
<div className="absolute -bottom-6 -left-6 bg-white rounded-2xl shadow-xl p-6 border border-gray-100">
|
|
<div className="text-2xl font-bold text-green-600">Carbon</div>
|
|
<div className="text-sm text-slate-600">Neutral by 2030</div>
|
|
</div>
|
|
|
|
<div className="absolute -top-6 -right-6 bg-white rounded-2xl shadow-xl p-6 border border-gray-100">
|
|
<div className="text-2xl font-bold text-blue-600">Zero</div>
|
|
<div className="text-sm text-slate-600">Waste Goal</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|