fix(blog): optimize component share logic, typography, and modal layouts

apps/web/src/components/Landing/ComparisonRow.tsx

@@ -1,32 +1,110 @@
 import * as React from "react";
-import { ArrowRight } from "lucide-react";
+import { ArrowRight, Check, X } from "lucide-react";
 import { Reveal } from "../Reveal";
 import { Label, H3, LeadText } from "../Typography";
 import { Strikethrough } from "../Strikethrough";
 import { cn } from "../../utils/cn";
+import { ComponentShareButton } from "../ComponentShareButton";
 
 interface ComparisonRowProps {
   description?: string;
-  negativeLabel: string;
-  negativeText: string;
-  positiveLabel: string;
-  positiveText: React.ReactNode;
+  // Legacy props
+  negativeLabel?: string;
+  negativeText?: string;
+  positiveLabel?: string;
+  positiveText?: React.ReactNode;
+
+  // New props for lists
+  leftTitle?: string;
+  leftItems?: string[];
+  rightTitle?: string;
+  rightItems?: string[];
+
   reverse?: boolean;
   delay?: number;
+  showShare?: boolean;
 }
 
 export const ComparisonRow: React.FC<ComparisonRowProps> = ({
   description,
+
   negativeLabel,
   negativeText,
   positiveLabel,
   positiveText,
+
+  leftTitle,
+  leftItems,
+  rightTitle,
+  rightItems,
+
   reverse = false,
   delay = 0,
+  showShare = false,
 }) => {
+  const shareId = `comprow-${React.useId().replace(/:/g, "")}`;
+  // Normalize inputs
+  const labelLeft = leftTitle || negativeLabel;
+  const contentLeft = leftItems || negativeText;
+
+  const labelRight = rightTitle || positiveLabel;
+  const contentRight = rightItems || positiveText;
+
+  // Helper to render left side content (Strikethrough)
+  const renderLeft = () => {
+    if (Array.isArray(contentLeft)) {
+      return (
+        <ul className="space-y-3">
+          {contentLeft.map((item, i) => (
+            <li key={i} className="flex items-start gap-2">
+              <X className="w-4 h-4 text-red-400 mt-1 shrink-0" />
+              <Strikethrough delay={delay + 0.2 + (i * 0.1)} color="rgba(220, 50, 50, 0.6)">
+                {item}
+              </Strikethrough>
+            </li>
+          ))}
+        </ul>
+      );
+    }
+    if (typeof contentLeft === "string") {
+      return (
+        <LeadText className="leading-snug">
+          <Strikethrough delay={delay + 0.3}>{contentLeft}</Strikethrough>
+        </LeadText>
+      );
+    }
+    return null;
+  };
+
+  // Helper to render right side content (Positive)
+  const renderRight = () => {
+    if (Array.isArray(contentRight)) {
+      return (
+        <ul className="space-y-3">
+          {contentRight.map((item, i) => (
+            <li key={i} className="flex items-start gap-2">
+              <Check className="w-4 h-4 text-green-500 mt-1 shrink-0" />
+              <span className="text-slate-700 font-medium">
+                {item}
+              </span>
+            </li>
+          ))}
+        </ul>
+      );
+    }
+    // Default / Legacy positiveText (usually a Node or string)
+    return <H3 className="text-2xl md:text-3xl">{contentRight}</H3>;
+  };
+
   return (
     <Reveal delay={delay}>
-      <div className="not-prose space-y-4">
+      <div id={shareId} className="not-prose space-y-4 my-8 group relative z-10">
+        {showShare && (
+          <div className="absolute top-0 right-0 md:opacity-0 group-hover:opacity-100 transition-opacity duration-500 z-50">
+            <ComponentShareButton targetId={shareId} title={description || "Vergleich"} />
+          </div>
+        )}
+
         {description && (
           <Label className="text-slate-400 text-[10px] tracking-[0.2em] uppercase">
             {description}
@@ -34,20 +112,19 @@ export const ComparisonRow: React.FC<ComparisonRowProps> = ({
         )}
         <div
           className={cn(
-            "flex flex-col gap-8 md:gap-12 items-center",
+            "flex flex-col gap-8 md:gap-12 items-stretch", // altered alignment
             reverse ? "md:flex-row-reverse" : "md:flex-row",
           )}
         >
+          {/* Left / Negative Side */}
           <div className="flex-1 p-8 md:p-10 bg-slate-50/50 rounded-2xl text-slate-400 border border-transparent w-full">
-            <Label className="mb-4">
-              <Strikethrough delay={delay + 0.2}>{negativeLabel}</Strikethrough>
+            <Label className="mb-6 text-red-900/40 font-bold tracking-widest uppercase text-xs">
+              {labelLeft}
             </Label>
-            <LeadText className="leading-snug">
-              <Strikethrough delay={delay + 0.3}>{negativeText}</Strikethrough>
-            </LeadText>
+            {renderLeft()}
           </div>
 
-          <div className="shrink-0">
+          <div className="shrink-0 flex items-center justify-center">
             <ArrowRight
               className={cn(
                 "w-6 h-6 text-slate-200 hidden md:block",
@@ -56,9 +133,15 @@ export const ComparisonRow: React.FC<ComparisonRowProps> = ({
             />
           </div>
 
-          <div className="flex-1 p-8 md:p-10 border border-slate-100 rounded-2xl bg-white hover:border-slate-200 transition-all duration-500 hover:shadow-xl hover:shadow-slate-100/50 w-full">
-            <Label className="text-slate-900 mb-4">{positiveLabel}</Label>
-            <H3 className="text-2xl md:text-3xl">{positiveText}</H3>
+          {/* Right / Positive Side */}
+          <div className="flex-1 p-8 md:p-10 border border-slate-100 rounded-2xl bg-white hover:border-slate-200 transition-all duration-500 hover:shadow-xl hover:shadow-slate-100/50 w-full relative overflow-hidden group">
+            <div className="absolute top-0 right-0 p-4 opacity-10 group-hover:opacity-20 transition-opacity">
+              <Check className="w-12 h-12 text-green-500" />
+            </div>
+            <Label className="mb-6 text-green-600 font-bold tracking-widest uppercase text-xs">
+              {labelRight}
+            </Label>
+            {renderRight()}
           </div>
         </div>
       </div>