wip

2026-01-19 20:15:14 +01:00
parent 4abcc3fdf5
commit 6adf97a096
26 changed files with 475 additions and 898 deletions
--- a/components/blog/ComparisonGrid.tsx
+++ b/components/blog/ComparisonGrid.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+
+interface ComparisonGridItem {
+  label: string;
+  leftValue: string;
+  rightValue: string;
+}
+
+interface ComparisonGridProps {
+  title?: string;
+  leftLabel: string;
+  rightLabel: string;
+  items: ComparisonGridItem[];
+}
+
+export default function ComparisonGrid({ title, leftLabel, rightLabel, items }: ComparisonGridProps) {
+  return (
+    <div className="my-16 not-prose">
+      {title && (
+        <h3 className="text-2xl font-bold text-text-primary mb-8">
+          {title}
+        </h3>
+      )}
+      <div className="border border-neutral-200 rounded-3xl overflow-hidden shadow-sm bg-white">
+        <div className="grid grid-cols-3 bg-neutral-50 border-b border-neutral-200">
+          <div className="p-4 md:p-6"></div>
+          <div className="p-4 md:p-6 text-center font-bold text-primary uppercase tracking-widest border-l border-neutral-200 text-xs md:text-sm">
+            {leftLabel}
+          </div>
+          <div className="p-4 md:p-6 text-center font-bold text-primary uppercase tracking-widest border-l border-neutral-200 text-xs md:text-sm">
+            {rightLabel}
+          </div>
+        </div>
+        {items.map((item, index) => (
+          <div key={index} className="grid grid-cols-3 border-b border-neutral-200 last:border-0 hover:bg-neutral-50 transition-colors group">
+            <div className="p-4 md:p-6 font-bold text-text-primary flex items-center text-sm md:text-base">
+              {item.label}
+            </div>
+            <div className="p-4 md:p-6 text-center text-text-secondary border-l border-neutral-200 flex items-center justify-center group-hover:text-text-primary transition-colors text-sm md:text-base">
+              {item.leftValue}
+            </div>
+            <div className="p-4 md:p-6 text-center text-text-secondary border-l border-neutral-200 flex items-center justify-center group-hover:text-text-primary transition-colors text-sm md:text-base">
+              {item.rightValue}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}