faq

src/components/marketing/AnswerFirstBlock.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { Card } from '@/components/ui/Card';
+import { Check, X } from 'lucide-react';
+
+interface ComparisonItem {
+    label: string;
+    value: boolean;
+    text?: string;
+}
+
+interface AnswerFirstBlockProps {
+    whatIsIt: string; // 2 sentences: "Was ist das?"
+    whenToUse: string[]; // 3 Bulletpoints: "Wann brauchst du's?"
+    comparison: {
+        leftTitle: string;
+        rightTitle: string;
+        items: ComparisonItem[];
+    };
+    howTo: {
+        steps: string[]; // 3 Steps: "So funktioniert's"
+    };
+    className?: string; // Add className prop
+}
+
+export const AnswerFirstBlock: React.FC<AnswerFirstBlockProps> = ({
+    whatIsIt,
+    whenToUse,
+    comparison,
+    howTo,
+    className,
+}) => {
+    return (
+        <div className={`my-8 space-y-8 ${className || ''}`}>
+            {/* 1. Definition */}
+            <div className="prose max-w-none">
+                <h2 className="text-2xl font-bold text-gray-900 mb-4">Quick Summary</h2>
+                <p className="text-lg text-gray-700 leading-relaxed font-medium">
+                    {whatIsIt}
+                </p>
+            </div>
+
+            <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+                {/* 2. Usage Reasons */}
+                <Card className="p-6 bg-blue-50 border-blue-100">
+                    <h3 className="font-semibold text-lg text-blue-900 mb-4">When to use this?</h3>
+                    <ul className="space-y-3">
+                        {whenToUse.map((item, idx) => (
+                            <li key={idx} className="flex items-start gap-3 text-blue-800">
+                                <span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-blue-500 shrink-0" />
+                                {item}
+                            </li>
+                        ))}
+                    </ul>
+                </Card>
+
+                {/* 3. Mini Comparison */}
+                <Card className="p-6 bg-white border-gray-200">
+                    <h3 className="font-semibold text-lg text-gray-900 mb-4">Comparison</h3>
+                    <div className="space-y-4 text-sm">
+                        <div className="grid grid-cols-3 gap-2 font-medium text-gray-500 text-xs uppercase tracking-wider pb-2 border-b">
+                            <span>Feature</span>
+                            <span className="text-center">{comparison.leftTitle}</span>
+                            <span className="text-center">{comparison.rightTitle}</span>
+                        </div>
+                        {comparison.items.map((item, idx) => (
+                            <div key={idx} className="grid grid-cols-3 gap-2 items-center">
+                                <span className="text-gray-700 font-medium">{item.label}</span>
+                                <div className="flex justify-center">
+                                    {/* Logic for Left Side (usually Static/Free) might be false/X or true/Check based on context. 
+                       But user said "Static vs Dynamic / Free vs Pro". 
+                       Let's assume the comparison object passes explicit logic or we simplify.
+                       For now, assuming ComparisonItem has a single boolean for the 'right' side vs left? 
+                       Actually, let's make it simpler: Items have label, and we show check/x for both columns? 
+                       Wait, the user requirement is "Mini-Vergleich ... (3-5 Zeilen)".
+                       Let's keep it simple: Feature | A | B
+                   */}
+                                    {/* Placeholder logic: Assuming 'value' applies to the Right Side (Pro/Dynamic) usually being better? 
+                       Actually, let's request structure: `leftValue`, `rightValue`.
+                   */}
+                                    {item.text ? <span className="text-gray-600">{item.text}</span> : <X className="w-4 h-4 text-gray-400" />}
+                                </div>
+                                <div className="flex justify-center">
+                                    {item.value ? <Check className="w-4 h-4 text-green-600" /> : <X className="w-4 h-4 text-red-400" />}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </Card>
+
+                {/* 4. How To Steps */}
+                <Card className="p-6 bg-green-50 border-green-100">
+                    <h3 className="font-semibold text-lg text-green-900 mb-4">How it works</h3>
+                    <ol className="space-y-4">
+                        {howTo.steps.map((step, idx) => (
+                            <li key={idx} className="flex gap-3 text-green-800">
+                                <span className="flex-shrink-0 w-6 h-6 rounded-full bg-green-200 text-green-700 flex items-center justify-center text-sm font-bold">
+                                    {idx + 1}
+                                </span>
+                                <span>{step}</span>
+                            </li>
+                        ))}
+                    </ol>
+                </Card>
+            </div>
+        </div>
+    );
+};

src/components/ui/Footer.tsx

@@ -28,7 +28,7 @@ export function Footer({ variant = 'marketing', t }: FooterProps) {
           <div>
             <h3 className={`font-semibold mb-4 ${isDashboard ? 'text-gray-900' : ''}`}>{translations.product}</h3>
             <ul className={`space-y-2 ${isDashboard ? 'text-gray-500' : 'text-gray-400'}`}>
-              <li><Link href="/#features" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.features}</Link></li>
+              <li><Link href="/features" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.features}</Link></li>
               <li><Link href="/#pricing" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.pricing}</Link></li>
               <li><Link href="/qr-code-tracking" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>QR Analytics</Link></li>
               <li><Link href="/faq" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.faq}</Link></li>
@@ -50,6 +50,9 @@ export function Footer({ variant = 'marketing', t }: FooterProps) {
               <li><Link href="/manage-qr-codes" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Manage QR Codes</Link></li>
               <li><Link href="/custom-qr-code-generator" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Custom QR</Link></li>
               <li><Link href="/tools/barcode-generator" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Barcode Generator</Link></li>
+              <li><Link href="/guide/tracking-analytics" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Tracking Guide</Link></li>
+              <li><Link href="/guide/qr-code-best-practices" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Best Practices</Link></li>
+              <li><Link href="/guide/bulk-qr-code-generation" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Bulk Generation Guide</Link></li>
             </ul>
           </div>
 
@@ -57,6 +60,7 @@ export function Footer({ variant = 'marketing', t }: FooterProps) {
             <h3 className={`font-semibold mb-4 ${isDashboard ? 'text-gray-900' : ''}`}>{translations.legal}</h3>
             <ul className={`space-y-2 ${isDashboard ? 'text-gray-500' : 'text-gray-400'}`}>
               <li><Link href="/privacy" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>{translations.privacy_policy}</Link></li>
+              <li><Link href="/contact" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>Contact</Link></li>
               <li><Link href="/qr-code-erstellen" className={isDashboard ? 'hover:text-primary-600' : 'hover:text-white'}>QR Code Erstellen (DE)</Link></li>
             </ul>
           </div>