feat(blog): complete blog experience overhaul

- Implemented minimalist vertical teaser list (MediumCard)
- Consolidated and refined 20 engineering-focused blog posts
- Rebuilt blog overview with narrow, centered layout (max-w-3xl)
- Introduced BlogCommandBar for integrated search and tag filtering
- Consolidated tags to 6-8 core technical categories
- Redesigned blog detail pages with industrial 'Technical Frame' layout
- Added SectionHeader component for consistent industrial titling
- Optimized vertical space by removing redundant PageHeaders

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

@@ -2,8 +2,10 @@ import * as React from "react";
 import { ArrowRight } from "lucide-react";
 import { Reveal } from "../Reveal";
 import { Label, H3, LeadText } from "../Typography";
+import { cn } from "../../utils/cn";
 
 interface ComparisonRowProps {
+  description?: string;
   negativeLabel: string;
   negativeText: React.ReactNode;
   positiveLabel: string;
@@ -13,6 +15,7 @@ interface ComparisonRowProps {
 }
 
 export const ComparisonRow: React.FC<ComparisonRowProps> = ({
+  description,
   negativeLabel,
   negativeText,
   positiveLabel,
@@ -22,27 +25,40 @@ export const ComparisonRow: React.FC<ComparisonRowProps> = ({
 }) => {
   return (
     <Reveal delay={delay}>
-      <div
-        className={`flex flex-col ${reverse ? "md:flex-row-reverse" : "md:flex-row"} gap-8 md:gap-12 items-center`}
-      >
-        <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 line-through decoration-red-500">
-            {negativeLabel}
+      <div className="space-y-4">
+        {description && (
+          <Label className="text-slate-400 text-[10px] tracking-[0.2em] uppercase">
+            {description}
           </Label>
-          <LeadText className="line-through decoration-red-500 leading-snug">
-            {negativeText}
-          </LeadText>
-        </div>
+        )}
+        <div
+          className={cn(
+            "flex flex-col gap-8 md:gap-12 items-center",
+            reverse ? "md:flex-row-reverse" : "md:flex-row",
+          )}
+        >
+          <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 line-through decoration-red-500">
+              {negativeLabel}
+            </Label>
+            <LeadText className="line-through decoration-red-500 leading-snug">
+              {negativeText}
+            </LeadText>
+          </div>
 
-        <div className="shrink-0">
-          <ArrowRight
-            className={`w-6 h-6 text-slate-200 hidden md:block ${reverse ? "rotate-180" : ""}`}
-          />
-        </div>
+          <div className="shrink-0">
+            <ArrowRight
+              className={cn(
+                "w-6 h-6 text-slate-200 hidden md:block",
+                reverse ? "rotate-180" : "",
+              )}
+            />
+          </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>
+          <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>
+          </div>
         </div>
       </div>
     </Reveal>