@bearmenu/ui 0.8.9 → 0.8.10

package/src/components/concept-compare.tsx

@@ -1,34 +1,64 @@
-import { MessageSquare, Star } from "lucide-react";
+import { ArrowDown, MapPin, Star } from "lucide-react";
 import { cn } from "../lib/utils";
-import { MenuField } from "./menu-field";
-import { MenuItem, type MenuItemLabels } from "./menu-item";
+import { PHOTO_GROUND, PhotoGround } from "./photo-ground";
+import { Separator } from "./separator";
+import { Skeleton } from "./skeleton";
+import { ConceptCompareRail } from "./concept-compare-rail";
 import type { MenuConceptPreview, MenuLinkComponent, MenuLinkProps } from "./menu-types";
 
 /**
- * ConceptCompare — one dish or drink across every kitchen that makes it, under
- * whatever name each of them uses.
+ * ConceptCompare — one dish or drink across the kitchens that make it, under
+ * whatever name each of them uses. No surfaces at all.
  *
  * The keystone module: a single menu can list papanași, only a catalogue can
- * say that seventy kitchens make them under fifty different names between 8 and
- * 44 lei. The alias column is what makes it honest — these are not the same row
- * seventy times, they are seventy differently-named rows we matched, and
- * showing each kitchen's own wording is the evidence for that.
+ * say that forty-five kitchens make them under eight names between 29 and 52
+ * lei. Each kitchen's own wording is the evidence that these are matched rows
+ * rather than one row repeated.
  *
- * ## The row is place-led
+ * ## The card IS the rooms
  *
- * Each row leads with the VENUE PHOTOGRAPH, which is real and licensed. It
- * replaced a price bar, and the trade is not close: the bar measured the one
- * value already printed beside it in words, while the thing a reader is
- * actually choosing between — the restaurant — had no image at all. Five
- * restaurants that disagree about a name is the story; five bars of similar
- * length is not.
+ * Every panel is gone. Each room is a VENUE photograph — real and licensed
+ * where an item's would be generated — with the kitchen's line floating over
+ * it, and the three readable things sit on glass: the identity in a band
+ * across the top, each kitchen's line over its own photograph, the foot along
+ * the bottom.
  *
- * ## Two layouts, one component
+ * ## Read across on desktop, one at a time on the phone
  *
- * From `lg` the row is a table: rank, venue, alias, mentions, price. Below it,
- * the rows become the production `<MenuItem>` — the alias as the name, the
- * venue underneath — because a five-column table does not survive 390px and
- * the item row already solves this exact shape everywhere else in the app.
+ * From `lg` the rooms stand side by side — four kitchens, each with its own
+ * name for the dish and its own price, so comparing is a horizontal glance —
+ * and the head and foot are ABSOLUTE glass bands over them, so the photographs
+ * run the full height of the card beneath both. The head's glass fades out
+ * downward on the same curve as its mask; the foot's fades out upward the same
+ * way. It was the ink stopping short of the mask that drew a line where a band
+ * ended.
+ *
+ * Below `lg` four rooms in a 2×2 was too much happening in one card, so the
+ * rooms become a `SnapRail`: one room per swipe, page dots under it, the head
+ * and foot static on the card's ground above and below. The dots are the
+ * rail's own — the same object the hub's other rails use.
+ *
+ * ## The dark overlay, and the hover that lifts it
+ *
+ * Four busy interiors are four competing subjects, and type over them had
+ * nothing to sit on but its own local scrim — the eye could not settle. Every
+ * photograph carries a uniform dark overlay so the words lead and the picture
+ * supports; hovering a room lifts the overlay off THAT room only, so the reader
+ * can look at the place they are about to open.
+ *
+ * ## Light and dark
+ *
+ * There is nothing in it to theme. Photographs and their scrims are identical
+ * in both, because text over an image needs the same treatment either way —
+ * the content is `.dark`-scoped for exactly that. What adapts is the card's
+ * EDGE: a soft shadow and hairline on light, a deeper shadow and a light
+ * hairline on dark. The edge lives on the outer wrapper, outside the scope.
+ *
+ * ## No room here is a room that does not serve it
+ *
+ * The earlier card led with an AI-generated picture of the dish, and a
+ * generated image at the head of a block whose whole argument is "we counted
+ * real menus" undercut the argument. The rooms are real.
  */
 
 /** @deprecated Alias of `MenuLinkProps`; kept so existing imports keep working. */
@@ -39,52 +69,104 @@ function DefaultLink({ href, ...props }: ConceptCompareLinkProps) {
 }
 
 export type ConceptCompareFigure = {
-  /** Pre-formatted, e.g. "44". */
+  /** Pre-formatted, e.g. "44" or "29–52". */
   value: string;
   label: string;
+  /** Draws the value in amber — the spread, which is the number the card is about. */
+  accent?: boolean;
 };
 
 export type ConceptCompareLabels = {
   /** Small caps kicker, e.g. "DISH CONCEPT". */
   kind: string;
-  /** Column heading over the aliases, e.g. "ON THEIR MENU AS". */
-  alias: string;
-  /** Under each price, e.g. "per portion". */
-  perPortion?: string;
-  /** Badge on the lowest-priced row, e.g. "cheapest shown". */
-  cheapest?: string;
+  /** The badge on the lowest-priced room, e.g. "CHEAPEST". */
+  cheapest: string;
+  /** The badge on every other room, e.g. "#2". Defaults to `#${rank}`. */
+  rank?: (rank: number) => string;
+  /** Beside each price, e.g. "12 mentions". Pluralised by the caller. */
+  mentions: (count: number) => string;
+  /** Accessible name for a room's link, e.g. "Papanași at Casa Maramureșeană". */
+  openRoom: (alias: string, venue: string) => string;
 };
 
 export type ConceptCompareProps = {
   concept: MenuConceptPreview;
   labels: ConceptCompareLabels;
-  /** Passed to the mobile `<MenuItem>` rows. */
-  itemLabels: MenuItemLabels;
+  /** One line under the title, e.g. "45 kitchens make it, and they do not agree on the name". */
+  lede?: string;
   formatPrice: (amount: number) => string;
-  formatCount?: (value: number) => string;
-  /** CSS gradient for the header swatch, when there is no photograph. */
-  gradient: string;
-  /** A real photograph of the concept, when the matched menu row carries one. */
-  imageUrl?: string;
   figures?: ConceptCompareFigure[];
-  /** Destination per row, keyed by place slug. */
+  /** Destination per room, keyed by place slug. A room without one is inert. */
   hrefs?: Record<string, string>;
-  /** The provenance note in the footer. */
+  /** The provenance note in the foot. */
   footnote?: string;
-  /** Actions in the footer — pass rendered links or buttons. */
+  /** The action in the foot — pass a rendered link or button. */
   actions?: React.ReactNode;
   linkComponent?: MenuLinkComponent;
   className?: string;
 };
 
+/** Four rooms across on desktop; the caller decides how many it sends. */
+const MAX_ROOMS = 4;
+
+/** The venue's first letter, for a room with no photograph. */
+const initialOf = (name: string) => (name.match(/\p{L}/u)?.[0] ?? "").toLocaleUpperCase();
+
+/** The card's ground is `PhotoGround`'s — the phone's surface for head and foot too. */
+const GROUND = PHOTO_GROUND;
+
+/*
+ * The layers, bottom to top: the photograph, a DARK OVERLAY on it, the room's
+ * own scrim under its type, and the two glass bands. Written out in full rather
+ * than composed from a shared colour string: Tailwind emits only the classes it
+ * can read verbatim at build time, and a template literal is invisible to it —
+ * the class would be in the DOM and the style would not exist.
+ *
+ * Every layer shares one literal, `oklch(0.16 0.012 55)`, so they read as one
+ * shadow. Not `var(--scrim)`: that token is the app's, not this package's.
+ */
+
+/** `PhotoGround`'s overlay, plus the hover that lifts it off THIS room only. */
+const PHOTO_OVERLAY_HOVER =
+  "transition-opacity duration-300 group-hover/room:opacity-0 motion-reduce:transition-none";
+
+/** Each room's own scrim, rising from its foot under the type. */
+const ROOM_SCRIM =
+  "absolute inset-0 bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0)_0%,oklch(0.16_0.012_55_/_0)_30%,oklch(0.16_0.012_55_/_0.55)_58%,oklch(0.16_0.012_55_/_0.9)_100%)]";
+
+/**
+ * The head band's glass. Mask and ink both run the band's full height and go
+ * to ZERO at its underside on the same curve — a soft edge, not a line.
+ */
+const HEAD_GLASS =
+  "before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:content-[''] before:backdrop-blur-lg before:[mask-image:linear-gradient(to_bottom,black_35%,transparent_100%)] before:bg-[linear-gradient(to_bottom,oklch(0.16_0.012_55_/_0.8)_0%,oklch(0.16_0.012_55_/_0.6)_35%,oklch(0.16_0.012_55_/_0.22)_75%,oklch(0.16_0.012_55_/_0)_100%)]";
+
+/* The foot band's glass lives in `concept-compare-rail.tsx`, with the foot. */
+
+/**
+ * Desktop column templates by room count — literal, for the scanner. The phone
+ * ignores these: there the rail lays the rooms out.
+ */
+const COLUMNS: Record<number, string> = {
+  1: "lg:grid-cols-1",
+  2: "lg:grid-cols-2",
+  3: "lg:grid-cols-3",
+  4: "lg:grid-cols-4",
+};
+
+/**
+ * How far a room's text sits above the card's foot on desktop, where the foot
+ * is an absolute band over the rooms. The band is one line of prose and a
+ * button, ~80px; the padding clears it with room to spare at `lg`, where the
+ * prose can wrap to two lines.
+ */
+const DESKTOP_FOOT_CLEARANCE = "lg:pb-[104px]";
+
 export function ConceptCompare({
   concept,
   labels,
-  itemLabels,
+  lede,
   formatPrice,
-  formatCount,
-  gradient,
-  imageUrl,
   figures,
   hrefs,
   footnote,
@@ -92,185 +174,270 @@ export function ConceptCompare({
   linkComponent: LinkComponent = DefaultLink,
   className,
 }: ConceptCompareProps) {
-  const rows = concept.rows ?? [];
-  // Derived, not passed: the cheapest row is a fact about THIS list, and a
+  const rooms = (concept.rows ?? []).slice(0, MAX_ROOMS);
+  const count = rooms.length;
+  if (count === 0) return null;
+
+  // Derived, not passed: the cheapest room is a fact about THIS list, and a
   // caller computing it separately could disagree with what is rendered.
-  const cheapest = rows.reduce<number | undefined>(
-    (lowest, row) => (lowest === undefined || row.price < lowest ? row.price : lowest),
+  const cheapest = rooms.reduce<number | undefined>(
+    (lowest, room) => (lowest === undefined || room.price < lowest ? room.price : lowest),
     undefined
   );
+  const rankOf = labels.rank ?? ((rank: number) => `#${rank}`);
+  const hasFoot = Boolean(footnote || actions);
 
   return (
-    <div className={cn("overflow-hidden rounded-[18px] border border-border bg-card", className)}>
-      <div className="flex flex-col gap-4 p-4 lg:flex-row lg:items-center lg:gap-6 lg:p-5">
-        {imageUrl ? (
-          // eslint-disable-next-line @next/next/no-img-element
-          <img
-            src={imageUrl}
-            alt=""
-            className="aspect-[16/9] w-full shrink-0 rounded-xl object-cover lg:aspect-auto lg:h-[88px] lg:w-[88px]"
-          />
-        ) : (
-          <MenuField
-            name={concept.title}
-            gradient={gradient}
-            seedKey={concept.slug}
-            className="aspect-[16/9] w-full shrink-0 rounded-xl lg:aspect-auto lg:h-[88px] lg:w-[88px]"
-          />
-        )}
-
-        <div className="min-w-0 flex-1">
-          <span className="text-[9.5px] font-bold uppercase tracking-[0.12em] text-muted-foreground">
-            {labels.kind}
-          </span>
-          <h3 className="mt-1 font-serif text-2xl font-semibold tracking-[-0.02em] lg:text-[30px]">
-            {concept.title}
-          </h3>
-        </div>
-
-        {figures && figures.length > 0 && (
-          <div className="flex shrink-0 gap-6 lg:gap-8">
-            {figures.map((figure) => (
-              <div key={figure.label} className="text-left lg:text-right">
-                <div className="text-xl font-extrabold leading-none tracking-[-0.03em] tabular-nums lg:text-2xl">
-                  {figure.value}
-                </div>
-                <div className="mt-1 text-[10.5px] text-muted-foreground">{figure.label}</div>
-              </div>
-            ))}
+    <div
+      className={cn(
+        /* The edge, OUTSIDE the dark scope — the one thing about this card
+           that belongs to the page it sits on. */
+        "overflow-hidden rounded-[18px] border border-border shadow-[var(--shadow-card)]",
+        className
+      )}
+    >
+      <div className={cn("dark relative isolate flex flex-col text-foreground", GROUND)}>
+        {/* ── The identity ─────────────────────────────────────────────── */}
+        {/* A `div`, not `<header>`. Outside `<article>`/`<section>` a `<header>`
+            is the `banner` landmark and a `<footer>` is `contentinfo`, so each
+            card would have announced itself as the page's own header and
+            footer to a screen reader. */}
+        <div
+          className={cn(
+            "relative isolate flex flex-col gap-3 px-4 pb-5 pt-4",
+            "lg:absolute lg:inset-x-0 lg:top-0 lg:z-10 lg:flex-row lg:items-start lg:justify-between lg:gap-6 lg:px-5 lg:pb-12 lg:pt-5",
+            HEAD_GLASS
+          )}
+        >
+          <div className="min-w-0">
+            <span className="block text-[10.5px] font-extrabold uppercase tracking-[0.13em] text-white/70">
+              {labels.kind}
+            </span>
+            <h3 className="mt-1 font-serif text-[28px] font-semibold leading-tight tracking-[-0.02em] text-white lg:text-[32px]">
+              {concept.title}
+            </h3>
+            {lede && <p className="mt-1 text-[13px] leading-snug text-white/75">{lede}</p>}
           </div>
-        )}
-      </div>
-
-      {/* ── Below `lg`: the production item row ─────────────────────────── */}
-      <ul className="border-t border-border lg:hidden">
-        {rows.map((row) => (
-          <li key={row.place_slug} className="border-b border-border last:border-b-0">
-            <MenuItem
-              item={{
-                id: row.place_slug,
-                slug: row.place_slug,
-                // The kitchen's OWN wording leads the row — that IS the point
-                // of the module.
-                name: row.alias,
-                kind: concept.kind,
-                mentions: row.mentions,
-                sizes_and_prices: [{ size: 0, price: row.price }],
-              }}
-              labels={itemLabels}
-              formatPrice={formatPrice}
-              formatCount={formatCount}
-              venueName={row.place_name}
-              href={hrefs?.[row.place_slug]}
-              linkComponent={LinkComponent}
-              className={cn(row.price === cheapest && "bg-accent-subtle/40")}
-            />
-          </li>
-        ))}
-      </ul>
 
-      {/* ── From `lg`: the comparison table ─────────────────────────────── */}
-      <ol className="hidden border-t border-border lg:block">
-        {rows.map((row, index) => {
-          const isCheapest = row.price === cheapest;
-
-          const content = (
-            <>
-              <span className="w-5 shrink-0 text-center text-xs font-bold tabular-nums text-muted-foreground">
-                {index + 1}
-              </span>
+          {figures && figures.length > 0 && (
+            <dl className="flex shrink-0 flex-wrap gap-x-5 gap-y-2 lg:gap-x-6">
+              {figures.map((figure) => (
+                <div key={figure.label} className="flex flex-col items-start lg:items-center">
+                  <dd
+                    className={cn(
+                      "text-[22px] font-bold leading-none tabular-nums tracking-[-0.02em]",
+                      figure.accent ? "text-[oklch(0.82_0.15_85)]" : "text-white"
+                    )}
+                  >
+                    {figure.value}
+                  </dd>
+                  <dt className="mt-1 text-[11px] text-white/65">{figure.label}</dt>
+                </div>
+              ))}
+            </dl>
+          )}
+        </div>
 
-              <span className="relative h-10 w-10 shrink-0 overflow-hidden rounded-lg bg-[repeating-linear-gradient(135deg,oklch(0.78_0.018_55)_0_8px,oklch(0.84_0.012_58)_8px_16px)]">
-                {row.place_thumbnail_url && (
-                  // eslint-disable-next-line @next/next/no-img-element
-                  <img
-                    src={row.place_thumbnail_url}
-                    alt=""
-                    loading="lazy"
-                    className="h-full w-full object-cover"
-                  />
+        {/* ── The rooms: a rail on the phone, a row from `lg` ──────────── */}
+        {/* The rail also owns the phone's backdrop — the card's ground is the
+            ACTIVE room's photograph, cross-fading on swipe. That is the one
+            piece of state in this card, so it is the one client boundary, and
+            it takes only what can cross one: URLs, initials, rendered rooms. */}
+        <ConceptCompareRail
+          backdrops={rooms.map((room) => ({
+            src: room.place_thumbnail_url,
+            initial: initialOf(room.place_name),
+          }))}
+          railClassName={cn(
+            "lg:grid lg:gap-px lg:overflow-visible lg:[&>*]:w-auto",
+            COLUMNS[count] ?? COLUMNS[4]
+          )}
+          /* The foot's CONTENT; the rail draws the band, because on the phone
+             the page dots belong inside its glass and the dots are the rail's
+             state. */
+          foot={
+            hasFoot ? (
+              <>
+                {footnote && (
+                  <p className="min-w-0 flex-1 text-[12px] leading-relaxed text-white/70">
+                    {footnote}
+                  </p>
                 )}
-                {row.open_now && (
-                  <i
-                    aria-hidden
-                    className="absolute right-0.5 top-0.5 h-[6px] w-[6px] rounded-full bg-[var(--free,currentColor)] ring-2 ring-white/80"
-                  />
+                {actions && (
+                  <div className="flex shrink-0 [&>*]:w-full lg:[&>*]:w-auto">{actions}</div>
                 )}
-              </span>
-
-              <span className="min-w-0 w-[200px] shrink-0">
-                <span className="block truncate text-sm font-bold tracking-[-0.01em]">
-                  {row.place_name}
+              </>
+            ) : undefined
+          }
+        >
+          {rooms.map((room, index) => {
+            const href = hrefs?.[room.place_slug];
+            const isCheapest = room.price === cheapest;
+            const roomClass = cn(
+              /* Transparent on the phone — the card behind it is the room's
+                 photograph — with only its scrim and its line. A photograph of
+                 its own from `lg`, where four stand side by side. */
+              "group/room relative isolate flex aspect-[4/3] flex-col justify-end overflow-hidden p-4",
+              "lg:aspect-auto lg:min-h-[440px] lg:p-4",
+              DESKTOP_FOOT_CLEARANCE
+            );
+            const body = (
+              <>
+                {/* Behind the type: the room's own photograph and its overlay
+                    (desktop only — on the phone the card's ground is the
+                    photograph), and the scrim (both). */}
+                <span aria-hidden className="absolute inset-0 -z-10">
+                  <PhotoGround
+                    className="hidden lg:block"
+                    photos={[room.place_thumbnail_url]}
+                    initials={initialOf(room.place_name)}
+                    mosaicClassName="grid-cols-1"
+                    overlay
+                    overlayClassName={PHOTO_OVERLAY_HOVER}
+                  />
+                  <span className={ROOM_SCRIM} />
                 </span>
-                <span className="mt-px flex items-center gap-1.5 text-[11px] text-muted-foreground">
-                  {row.rating != null && (
-                    <>
-                      <Star className="h-2.5 w-2.5" aria-hidden />
-                      <span className="tabular-nums">{row.rating}</span>
-                    </>
+
+                <span
+                  className={cn(
+                    "inline-flex h-[22px] w-max items-center gap-1 rounded-full px-2 text-[10px] font-extrabold uppercase tracking-[0.08em]",
+                    isCheapest
+                      ? "bg-success text-white"
+                      : "bg-white/15 text-white/85 backdrop-blur-[2px]"
                   )}
-                  {row.place_area && <span className="truncate">{row.place_area}</span>}
+                >
+                  {isCheapest && <ArrowDown className="h-3 w-3 shrink-0" aria-hidden />}
+                  {isCheapest ? labels.cheapest : rankOf(index + 1)}
                 </span>
-              </span>
 
-              <span className="min-w-0 flex-1">
-                <span className="block text-[9.5px] font-bold uppercase tracking-[0.1em] text-muted-foreground">
-                  {labels.alias}
+                {/* Name and rating on one line: the pin leads, the name takes
+                    what is left, the star sits at the end. */}
+                <span className="mt-2.5 flex items-center gap-1.5 text-white">
+                  <MapPin className="h-3.5 w-3.5 shrink-0 text-white/70" aria-hidden />
+                  <b className="min-w-0 flex-1 truncate text-[15px] font-bold leading-tight">
+                    {room.place_name}
+                  </b>
+                  {room.rating !== undefined && (
+                    <span className="flex shrink-0 items-center gap-1 text-[12px] text-white/70">
+                      <Star className="h-3 w-3 shrink-0" aria-hidden />
+                      <span className="tabular-nums">{room.rating}</span>
+                    </span>
+                  )}
                 </span>
-                <span className="block truncate font-serif text-[13px] italic">{row.alias}</span>
-              </span>
+                {room.place_area && (
+                  <span className="mt-0.5 block text-[12px] text-white/70">{room.place_area}</span>
+                )}
 
-              {row.mentions != null && row.mentions > 0 && (
-                <span className="inline-flex shrink-0 items-center gap-1 text-[11px] tabular-nums text-muted-foreground">
-                  <MessageSquare className="h-[11px] w-[11px]" aria-hidden />
-                  {row.mentions}
+                {/* The kitchen's own wording — the evidence that these are
+                    matched rows rather than one row repeated. */}
+                <span className="mt-2 block truncate font-serif text-[14px] italic text-white/90">
+                  {room.alias}
                 </span>
-              )}
 
-              <span className="w-[92px] shrink-0 text-right">
-                <b
-                  className={cn(
-                    "block text-sm font-extrabold tabular-nums",
-                    isCheapest && "text-[var(--free,currentColor)]"
+                {/* The DS rule. `via-white/20` because the dark theme's `--border`
+                    is a 0.32-lightness grey that vanishes on inked photography. */}
+                <Separator className="my-2.5 via-white/20" />
+
+                <span className="flex items-baseline gap-2">
+                  <b
+                    className={cn(
+                      "text-[19px] font-bold leading-none tabular-nums tracking-[-0.02em]",
+                      isCheapest ? "text-success" : "text-white"
+                    )}
+                  >
+                    {formatPrice(room.price)}
+                  </b>
+                  {room.mentions !== undefined && room.mentions > 0 && (
+                    <span className="text-[11.5px] text-white/65">
+                      {labels.mentions(room.mentions)}
+                    </span>
                   )}
-                >
-                  {formatPrice(row.price)}
-                </b>
-                <span className="block text-[10px] text-muted-foreground">
-                  {isCheapest && labels.cheapest ? labels.cheapest : labels.perPortion}
                 </span>
-              </span>
-            </>
-          );
+              </>
+            );
+
+            return href ? (
+              <LinkComponent
+                key={room.place_slug}
+                href={href}
+                aria-label={labels.openRoom(room.alias, room.place_name)}
+                className={cn(
+                  roomClass,
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-white"
+                )}
+              >
+                {body}
+              </LinkComponent>
+            ) : (
+              <div key={room.place_slug} className={roomClass}>
+                {body}
+              </div>
+            );
+          })}
+        </ConceptCompareRail>
+      </div>
+    </div>
+  );
+}
 
-          const rowClasses = "flex items-center gap-4 px-5 py-3";
+// ─── Skeleton ───────────────────────────────────────────────────────────────
 
-          return (
-            <li key={row.place_slug} className="border-b border-border last:border-b-0">
-              {hrefs?.[row.place_slug] ? (
-                <LinkComponent
-                  href={hrefs[row.place_slug]}
-                  className={cn(
-                    rowClasses,
-                    "transition-colors hover:bg-muted/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
-                  )}
-                >
-                  {content}
-                </LinkComponent>
-              ) : (
-                <div className={rowClasses}>{content}</div>
+/**
+ * The card's own loading state, at the card's footprint.
+ *
+ * The ground is the card's own dark surface, so the placeholder is already
+ * what the photographs will land on and nothing flashes from paper to ink.
+ * The phone shape is one room tall with the head above and the foot below;
+ * from `lg` it is the four-room row with the head and foot laid over it.
+ */
+export function ConceptCompareSkeleton({ className }: { className?: string }) {
+  return (
+    <div
+      className={cn(
+        "overflow-hidden rounded-[18px] border border-border shadow-[var(--shadow-card)]",
+        className
+      )}
+      aria-hidden
+    >
+      <div className={cn("dark relative flex flex-col text-foreground", GROUND)}>
+        <div className="flex flex-col gap-3 px-4 pb-5 pt-4 lg:absolute lg:inset-x-0 lg:top-0 lg:z-10 lg:flex-row lg:justify-between lg:px-5 lg:pt-5">
+          <div>
+            <Skeleton className="h-2.5 w-[90px] bg-white/15" />
+            <Skeleton className="mt-2 h-8 w-[160px] bg-white/15" />
+            <Skeleton className="mt-2 h-3.5 w-[240px] bg-white/15" />
+          </div>
+          <div className="flex gap-5">
+            {Array.from({ length: 4 }, (_, index) => (
+              <div key={index} className="flex flex-col items-start gap-1.5 lg:items-center">
+                <Skeleton className="h-6 w-8 bg-white/15" />
+                <Skeleton className="h-2.5 w-12 bg-white/15" />
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-4 lg:gap-px">
+          {Array.from({ length: 4 }, (_, index) => (
+            <div
+              key={index}
+              className={cn(
+                "flex aspect-[4/3] flex-col justify-end p-4 lg:aspect-auto lg:min-h-[440px] lg:pb-[104px]",
+                index > 0 && "hidden lg:flex"
               )}
-            </li>
-          );
-        })}
-      </ol>
+            >
+              <Skeleton className="h-[22px] w-[72px] rounded-full bg-white/15" />
+              <Skeleton className="mt-2.5 h-4 w-[60%] bg-white/15" />
+              <Skeleton className="mt-2 h-3.5 w-[50%] bg-white/15" />
+              <Skeleton className="mt-4 h-5 w-[80px] bg-white/15" />
+            </div>
+          ))}
+        </div>
 
-      {(footnote || actions) && (
-        <div className="flex flex-wrap items-center gap-3 p-4">
-          {footnote && <span className="text-[11.5px] text-muted-foreground">{footnote}</span>}
-          {actions && <div className="ml-auto flex items-center gap-2">{actions}</div>}
+        <div className="flex flex-col gap-3 px-4 pb-4 pt-3 lg:absolute lg:inset-x-0 lg:bottom-0 lg:flex-row lg:items-center lg:gap-5 lg:px-5 lg:pb-4 lg:pt-6">
+          <Skeleton className="h-3 w-full bg-white/15 lg:flex-1" />
+          <Skeleton className="h-10 w-full rounded-full bg-white/15 lg:w-[120px]" />
         </div>
-      )}
+      </div>
     </div>
   );
 }