SEO
This commit is contained in:
Timo Knuth
@@ -1,6 +1,6 @@
|
||||
import React from 'react';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Check, X } from 'lucide-react';
|
||||
import React from 'react';
|
||||
import { Card } from '@/components/ui/Card';
|
||||
import { Check, X } from 'lucide-react';
|
||||
|
||||
interface ComparisonItem {
|
||||
label: string;
|
||||
@@ -22,86 +22,93 @@ interface AnswerFirstBlockProps {
|
||||
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" />
|
||||
export const AnswerFirstBlock: React.FC<AnswerFirstBlockProps> = ({
|
||||
whatIsIt,
|
||||
whenToUse,
|
||||
comparison,
|
||||
howTo,
|
||||
className,
|
||||
}) => {
|
||||
const leftValueFor = (item: ComparisonItem) => item.text ?? 'No';
|
||||
|
||||
return (
|
||||
<section className={`my-8 space-y-8 ${className || ''}`} aria-label="Quick answer">
|
||||
<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">
|
||||
<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">
|
||||
))}
|
||||
</ul>
|
||||
</Card>
|
||||
|
||||
<Card className="p-6 bg-white border-gray-200">
|
||||
<h3 className="font-semibold text-lg text-gray-900 mb-4">Comparison</h3>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b text-xs uppercase tracking-wider text-gray-500">
|
||||
<th scope="col" className="py-2 pr-3 text-left font-medium">Feature</th>
|
||||
<th scope="col" className="px-3 py-2 text-center font-medium">{comparison.leftTitle}</th>
|
||||
<th scope="col" className="pl-3 py-2 text-center font-medium">{comparison.rightTitle}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{comparison.items.map((item, idx) => (
|
||||
<tr key={idx} className="border-b last:border-b-0">
|
||||
<th scope="row" className="py-3 pr-3 text-left font-medium text-gray-700">
|
||||
{item.label}
|
||||
</th>
|
||||
<td className="px-3 py-3 text-center text-gray-600">
|
||||
{leftValueFor(item)}
|
||||
</td>
|
||||
<td className="pl-3 py-3">
|
||||
<div className="flex items-center justify-center text-gray-700">
|
||||
{item.value ? (
|
||||
<>
|
||||
<Check className="w-4 h-4 text-green-600" aria-hidden="true" />
|
||||
<span className="sr-only">Included</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<X className="w-4 h-4 text-red-400" aria-hidden="true" />
|
||||
<span className="sr-only">Not included</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<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>
|
||||
);
|
||||
};
|
||||
</ol>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user