Spaces:
Sleeping
Sleeping
File size: 4,080 Bytes
56ea4c7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | import { motion } from "framer-motion";
import { useInView } from "framer-motion";
import { useRef } from "react";
import { Leaf, Users, Award, TrendingUp } from "lucide-react";
const features = [
{
icon: Leaf,
title: "Sustainable Solutions",
description: "Eco-friendly preservation methods that reduce food waste and environmental impact",
},
{
icon: Users,
title: "Expert Team",
description: "Decades of combined experience in agricultural science and food preservation",
},
{
icon: Award,
title: "Proven Results",
description: "Award-winning research published in leading scientific journals",
},
{
icon: TrendingUp,
title: "Innovation First",
description: "Cutting-edge techniques backed by rigorous scientific methodology",
},
];
export default function AboutSection() {
const ref = useRef(null);
const isInView = useInView(ref, { once: true, margin: "-100px" });
return (
<section id="about" className="py-20 bg-white">
<div className="container mx-auto px-4 sm:px-6 lg:px-8">
<motion.div
ref={ref}
initial={{ opacity: 0, y: 50 }}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
transition={{ duration: 0.6 }}
className="text-center mb-16"
>
<div className="flex justify-center mb-6">
<img
src="/chopfreshinternational.png"
alt="ChopFresh International Logo"
width="200"
height="80"
className="object-contain"
/>
</div>
<h2 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
About ChopFresh International Pvt. Ltd.
</h2>
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
Leading the way in produce hibernation research and sustainable food preservation solutions
</p>
</motion.div>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-16">
{features.map((feature, index) => (
<motion.div
key={feature.title}
initial={{ opacity: 0, y: 30 }}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
transition={{ duration: 0.6, delay: index * 0.1 }}
className="bg-gradient-to-br from-green-50 to-emerald-50 p-6 rounded-2xl shadow-sm hover:shadow-md transition-shadow"
>
<div className="bg-green-600 w-14 h-14 rounded-xl flex items-center justify-center mb-4">
<feature.icon className="w-7 h-7 text-white" />
</div>
<h3 className="text-xl font-semibold text-gray-900 mb-2">
{feature.title}
</h3>
<p className="text-gray-600">{feature.description}</p>
</motion.div>
))}
</div>
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 30 }}
transition={{ duration: 0.6, delay: 0.4 }}
className="bg-gradient-to-r from-green-600 to-emerald-600 rounded-3xl p-8 md:p-12 text-white"
>
<div className="max-w-4xl mx-auto">
<h3 className="text-3xl font-bold mb-6">Our Mission</h3>
<p className="text-lg leading-relaxed mb-6">
At ChopFresh International, we're dedicated to revolutionizing how the world preserves and stores fresh produce.
Through innovative hibernation techniques and cutting-edge research, we help reduce food waste,
extend shelf life, and maintain nutritional value.
</p>
<p className="text-lg leading-relaxed">
Our team of agricultural scientists and food preservation experts work tirelessly to develop
sustainable solutions that benefit farmers, distributors, retailers, and consumers alike.
</p>
</div>
</motion.div>
</div>
</section>
);
}
|