init

src/components/Features.jsx

@@ -0,0 +1,38 @@
+import { useTranslation } from 'react-i18next';
+import { Shield, Globe2, BarChart3, Blocks, Mail, Tag, Users, Layers, Zap } from 'lucide-react';
+
+const Icons = { Shield, Globe2, BarChart3, Blocks, Mail, Tag, Users, Layers, Zap };
+
+export default function Features() {
+  const { t } = useTranslation();
+
+  return (
+    <section className="pb-32 pt-12 bg-white text-gray-900">
+      <div className="max-w-6xl mx-auto px-6">
+        <div className="text-center mb-20">
+          <h2 className="text-4xl md:text-6xl font-black mb-4">
+            {t('features.title')}
+          </h2>
+          <p className="text-2xl md:text-3xl font-bold text-red-700">
+            {t('features.subtitle')}
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {t('features.items', { returnObjects: true }).map((feature, i) => {
+            const Icon = Icons[feature.icon];
+            return (
+              <div key={i} className="card-hover bg-gray-100 rounded-2xl p-8 border border-gray-200">
+                <div className="w-14 h-14 bg-red-700 rounded-xl flex items-center justify-center mb-6">
+                  <Icon size={28} className="text-white" />
+                </div>
+                <h3 className="text-xl font-bold mb-3">{feature.title}</h3>
+                <p className="text-gray-600 leading-relaxed">{feature.desc}</p>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}