feat: add Home page with Hero, Features, HowItWorks, Pricing, Contact sections

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/home/FeaturesSection.tsx

@@ -0,0 +1,44 @@
+import { PenTool, FileOutput, FileText, Layers, Zap, Gift } from 'lucide-react';
+import { useLanguage } from '../../contexts/LanguageContext';
+
+const iconMap = [PenTool, FileOutput, FileText, Layers, Zap, Gift];
+
+export default function FeaturesSection() {
+  const { t } = useLanguage();
+  const f = t.marketing.features;
+
+  const items = [
+    { title: f.handwriting, description: f.handwritingDesc },
+    { title: f.multiFormat, description: f.multiFormatDesc },
+    { title: f.pdf, description: f.pdfDesc },
+    { title: f.batch, description: f.batchDesc },
+    { title: f.accuracy, description: f.accuracyDesc },
+    { title: f.free, description: f.freeDesc },
+  ];
+
+  return (
+    <section id="features" className="py-20 bg-white">
+      <div className="max-w-6xl mx-auto px-6">
+        <div className="text-center mb-16">
+          <h2 className="text-3xl font-bold text-gray-900 mb-4">{f.title}</h2>
+          <p className="text-gray-600 text-lg">{f.subtitle}</p>
+        </div>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+          {items.map((item, i) => {
+            const Icon = iconMap[i];
+            return (
+              <div key={i} className="p-6 rounded-xl border border-gray-100 hover:border-blue-100 hover:shadow-lg transition-all group">
+                <div className="w-12 h-12 bg-blue-50 group-hover:bg-blue-100 rounded-lg flex items-center justify-center mb-4 transition-colors">
+                  <Icon size={24} className="text-blue-600" />
+                </div>
+                <h3 className="text-lg font-semibold text-gray-900 mb-2">{item.title}</h3>
+                <p className="text-gray-600 text-sm leading-relaxed">{item.description}</p>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}