118 lines
3.7 KiB
TypeScript
118 lines
3.7 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { CheckCircle, Award, Users, Zap } from "lucide-react";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
export function About() {
|
|
const t = useTranslations();
|
|
|
|
const features = [
|
|
{ icon: Award, labelKey: "Experience", value: "10+ лет" },
|
|
{ icon: Users, labelKey: "Experts", value: "50+" },
|
|
{ icon: Zap, labelKey: "Reliability", value: "99.9%" },
|
|
];
|
|
|
|
const containerVariants = {
|
|
hidden: { opacity: 0 },
|
|
visible: {
|
|
opacity: 1,
|
|
transition: { staggerChildren: 0.2 },
|
|
},
|
|
};
|
|
|
|
const itemVariants = {
|
|
hidden: { opacity: 0, y: 20 },
|
|
visible: { opacity: 1, y: 0 },
|
|
};
|
|
|
|
return (
|
|
<section id="about" 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 }}
|
|
whileInView={{ opacity: 1 }}
|
|
transition={{ duration: 0.6 }}
|
|
viewport={{ once: true }}
|
|
className="text-center mb-16"
|
|
>
|
|
<h2 className="text-4xl font-bold text-gray-900 mb-4">
|
|
{t("about.title")}
|
|
</h2>
|
|
<div className="w-20 h-1 bg-blue-600 mx-auto rounded-full" />
|
|
</motion.div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
|
|
{/* Left - Content */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -50 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<p className="text-lg text-gray-700 leading-relaxed mb-8">
|
|
{t("about.content")}
|
|
</p>
|
|
|
|
<motion.div
|
|
variants={containerVariants}
|
|
initial="hidden"
|
|
whileInView="visible"
|
|
viewport={{ once: true }}
|
|
className="space-y-4"
|
|
>
|
|
{[1, 2, 3].map((idx) => (
|
|
<motion.div
|
|
key={idx}
|
|
variants={itemVariants}
|
|
className="flex items-start gap-3"
|
|
>
|
|
<CheckCircle className="text-blue-600 shrink-0 mt-1" />
|
|
<div>
|
|
<h4 className="font-semibold text-gray-900">
|
|
Benefit {idx}
|
|
</h4>
|
|
<p className="text-gray-600 text-sm">
|
|
Premium quality products with lifetime support
|
|
</p>
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</motion.div>
|
|
</motion.div>
|
|
|
|
{/* Right - Stats */}
|
|
<motion.div
|
|
initial={{ opacity: 0, x: 50 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.6 }}
|
|
viewport={{ once: true }}
|
|
className="grid grid-cols-1 gap-6"
|
|
>
|
|
{features.map((feature, idx) => {
|
|
const Icon = feature.icon;
|
|
return (
|
|
<motion.div
|
|
key={idx}
|
|
whileHover={{ scale: 1.05, y: -5 }}
|
|
className="bg-linear-to-br from-blue-50 to-blue-100 rounded-lg p-6 shadow-md hover:shadow-lg transition-shadow"
|
|
>
|
|
<div className="flex items-center gap-4 mb-2">
|
|
<Icon className="text-blue-600" size={32} />
|
|
<h3 className="text-2xl font-bold text-gray-900">
|
|
{feature.value}
|
|
</h3>
|
|
</div>
|
|
<p className="text-gray-700 font-medium">
|
|
{feature.labelKey}
|
|
</p>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|