@kolkrabbi/kol-component 0.6.0 → 0.8.0

package/src/organisms/PortableTextRenderer.jsx

@@ -1,115 +0,0 @@
-import { Fragment } from 'react'
-import CodeBlock from '../molecules/CodeBlock.jsx'
-import ImageBlock from '../molecules/ImageBlock.jsx'
-import VideoBlock from '../molecules/VideoBlock.jsx'
-import Table from './Table.jsx'
-import Divider from '../atoms/Divider.jsx'
-
-/**
- * slugify — heading text → anchor id (lowercase, non-word stripped, spaces to
- * dashes, repeats collapsed). Feeds the h2/h3 `id`s that power in-page anchors
- * / a table of contents. Kept from the source; it is the one bit of real logic.
- */
-export function slugify(text = '') {
-  return String(text)
-    .toLowerCase()
-    .replace(/[^\w\s-]/g, '')
-    .replace(/\s+/g, '-')
-    .replace(/-+/g, '-')
-    .trim()
-}
-
-/* ── Inline marks ──────────────────────────────────────────────────────────
- * A block's `text` is either a plain string or an array of inline nodes:
- *   'plain text'
- *   { mark: 'link', href, text }         → <a> (http* → new tab + noopener)
- *   { mark: 'segmentTitle', text }       → <span class="kol-segment-title">
- */
-function renderInline(text) {
-  if (text == null) return null
-  const nodes = Array.isArray(text) ? text : [text]
-  return nodes.map((node, i) => {
-    if (typeof node === 'string') return <Fragment key={i}>{node}</Fragment>
-    if (node.mark === 'link') {
-      const external = (node.href || '').startsWith('http')
-      return (
-        <a
-          key={i}
-          href={node.href}
-          target={external ? '_blank' : undefined}
-          rel={external ? 'noopener noreferrer' : undefined}
-        >
-          {node.text}
-        </a>
-      )
-    }
-    if (node.mark === 'segmentTitle') {
-      return <span key={i} className="kol-segment-title">{node.text}</span>
-    }
-    return <Fragment key={i}>{node.text}</Fragment>
-  })
-}
-
-const plainText = (text) =>
-  Array.isArray(text) ? text.map((n) => (typeof n === 'string' ? n : n.text)).join('') : String(text ?? '')
-
-/* ── Block registry ────────────────────────────────────────────────────────
- * Maps a plain { type, ... } block to a DS component / prose tag. This is the
- * de-Sanitized counterpart to the app's Portable-Text components map: generic
- * block-type names (`heading`/`quote`/`divider`/`table`/`video`), no CMS
- * schema keys, no @portabletext/react host.
- */
-const BLOCKS = {
-  heading: ({ level = 2, text, id }) => {
-    const Tag = `h${level}`
-    const anchorId = id ?? (level === 2 || level === 3 ? slugify(plainText(text)) : undefined)
-    return <Tag id={anchorId}>{renderInline(text)}</Tag>
-  },
-  paragraph: ({ text }) => <p>{renderInline(text)}</p>,
-  caption: ({ text }) => <p className="caption">{renderInline(text)}</p>,
-  quote: ({ text, cite }) => (
-    <blockquote>
-      <p>{renderInline(text)}</p>
-      {cite && <cite>{cite}</cite>}
-    </blockquote>
-  ),
-  code: ({ language, code }) => <CodeBlock language={language}>{code}</CodeBlock>,
-  divider: () => <Divider className="my-10" />,
-  image: (block) => <ImageBlock {...block} />,
-  video: (block) => <VideoBlock {...block} />,
-  table: ({ columns, rows, caption }) => <Table columns={columns} rows={rows} caption={caption} variant="simple" />,
-  list: ({ style = 'bullet', items = [] }) => {
-    const Tag = style === 'number' ? 'ol' : 'ul'
-    return <Tag>{items.map((item, i) => <li key={i}>{renderInline(item)}</li>)}</Tag>
-  },
-}
-
-/**
- * PortableTextRenderer — turns a plain block array into `.kol-prose`-styled
- * long-form markup via one block-type registry. The design system's CMS
- * renderer (the counterpart to ProseStylesViewer, which only *showcases* the
- * prose styles) — both plug into the same `.kol-prose` stylesheet.
- *
- * The block shape is a simple `{ type, ... }` — NOT Sanity Portable Text and
- * with no `@portabletext/react` host. Custom blocks (`image`/`video`/`table`/
- * `code`/`divider`) resolve to DS components; text blocks render bare tags the
- * `.kol-prose` sheet styles. Inline `link`/`segmentTitle` marks are supported
- * via the array `text` form (see `renderInline`). Unknown types are skipped.
- *
- * All content — headings, paragraphs, captions — is authored as-is; the map
- * applies no `text-transform`.
- *
- * @param {Array<{type:string}>} blocks  the document, in order
- * @param {boolean} prose      wrap output in a `.kol-prose` container (default true)
- * @param {string}  className  extra classes on the wrapper
- */
-export default function PortableTextRenderer({ blocks = [], prose = true, className = '' }) {
-  const rendered = blocks.map((block, i) => {
-    const render = BLOCKS[block?.type]
-    if (!render) return null
-    return <Fragment key={block.key ?? i}>{render(block)}</Fragment>
-  })
-
-  if (!prose) return <>{rendered}</>
-  return <div className={`kol-prose ${className}`.trim()}>{rendered}</div>
-}

package/src/organisms/ProductDetailLayout.jsx

@@ -1,189 +0,0 @@
-import { useState } from 'react'
-import PriceDisplay from '../atoms/PriceDisplay.jsx'
-import Pill from '../atoms/Pill.jsx'
-import Divider from '../atoms/Divider.jsx'
-import QuantityInput from '../atoms/QuantityInput.jsx'
-import SpecList from '../molecules/SpecList.jsx'
-import TabsRow from '../molecules/TabsRow.jsx'
-import Dropdown from '../molecules/Dropdown.jsx'
-
-/**
- * ProductDetailLayout — the pure two-column PDP skeleton: a full-height media
- * gallery beside a scrollable details column (eyebrow + title + tags, a
- * SpecList of key facts, an underline TabsRow with its panel, then a purchase
- * block of price / size / quantity / CTA / fine print / back link).
- *
- * Presentational and commerce-agnostic — the print-store source's PayPal URL,
- * `print.*` reads, Sanity image normalization and route wiring are all dropped.
- * Data enters through props; the DS parts (PriceDisplay, SpecList, TabsRow,
- * QuantityInput, Dropdown) are composed here, everything else is a slot. Size,
- * quantity and the active tab are owned internally (uncontrolled), seeded from
- * props; pass the change callbacks to observe them.
- *
- * @param {ReactNode[]} mediaItems    gallery frames (rendered nodes, e.g. inline SVG); drives the internal big-frame + thumbnail strip
- * @param {ReactNode}   media         single media slot used when `mediaItems` is empty
- * @param {ReactNode}   eyebrow       category caption above the title (authored verbatim)
- * @param {ReactNode}   title         product name — rendered kol-heading-md (author case at the call site)
- * @param {string[]}    tags          optional Pill row
- * @param {Array<{label,value}>} specs key-facts rows → SpecList
- * @param {Array<{id,label,content}>} tabs tab strip (→ TabsRow) + panel content per tab
- * @param {{amount:number,currency?:string,locale?:string,secondary?:ReactNode}} price → PriceDisplay
- * @param {string[]}    sizeOptions   size <select> options → Dropdown (default ['A3'])
- * @param {string}      defaultSize   initially-selected size (default sizeOptions[0])
- * @param {Function}    onSizeChange  (value) => void — fires on size select
- * @param {number}      defaultQuantity initial qty (default 1)
- * @param {number}      minQuantity   qty floor (default 1)
- * @param {number}      maxQuantity   qty ceiling (default 10)
- * @param {Function}    onQuantityChange (value) => void — fires on qty step
- * @param {ReactNode}   actions       CTA slot — pass the "Add to cart" Button
- * @param {ReactNode}   shippingNote  fine-print line under the CTA
- * @param {ReactNode}   backLink      back-to-catalog link slot
- */
-export default function ProductDetailLayout({
-  mediaItems = [],
-  media,
-  eyebrow,
-  title,
-  tags = [],
-  specs = [],
-  tabs = [],
-  price,
-  sizeOptions = ['A3'],
-  defaultSize,
-  onSizeChange,
-  defaultQuantity = 1,
-  minQuantity = 1,
-  maxQuantity = 10,
-  onQuantityChange,
-  actions,
-  shippingNote,
-  backLink,
-}) {
-  const [activeMedia, setActiveMedia] = useState(0)
-  const [size, setSize] = useState(defaultSize ?? sizeOptions[0])
-  const [quantity, setQuantity] = useState(defaultQuantity)
-  const [activeTab, setActiveTab] = useState(tabs[0]?.id)
-
-  const activeTabItem = tabs.find((t) => t.id === activeTab) ?? tabs[0]
-
-  const handleSize = (value) => {
-    setSize(value)
-    onSizeChange?.(value)
-  }
-  const handleQuantity = (value) => {
-    setQuantity(value)
-    onQuantityChange?.(value)
-  }
-
-  return (
-    <main className="min-h-screen w-full overflow-x-hidden bg-surface-primary text-auto">
-      <section className="grid h-dvh w-full gap-0 lg:grid-cols-[minmax(0,1.15fr)_minmax(0,0.85fr)]">
-        {/* Media column */}
-        <div className="relative flex h-dvh bg-surface-secondary">
-          <div className="relative flex-1 flex items-center justify-center px-8 py-24 lg:px-16 lg:py-32 overflow-hidden">
-            {mediaItems.length > 0 ? (
-              <div className="flex max-h-full max-w-full items-center justify-center">
-                {mediaItems[activeMedia] ?? mediaItems[0]}
-              </div>
-            ) : (
-              media
-            )}
-
-            {mediaItems.length > 1 && (
-              <div className="absolute inset-x-0 bottom-0 flex gap-3 overflow-x-auto bg-surface-primary/80 px-6 py-4">
-                {mediaItems.map((item, index) => {
-                  const isActive = index === activeMedia
-                  return (
-                    <button
-                      key={index}
-                      type="button"
-                      aria-label={`View image ${index + 1}`}
-                      aria-pressed={isActive}
-                      onClick={() => setActiveMedia(index)}
-                      className={`h-20 aspect-[4/5] overflow-hidden rounded border-2 transition-all ${
-                        isActive
-                          ? 'border-auto opacity-100'
-                          : 'border-transparent opacity-40 hover:opacity-100'
-                      }`}
-                    >
-                      <span className="flex size-full items-center justify-center overflow-hidden">
-                        {item}
-                      </span>
-                    </button>
-                  )
-                })}
-              </div>
-            )}
-          </div>
-        </div>
-
-        {/* Details column */}
-        <div className="h-dvh flex flex-col text-left px-6 pt-20 pb-8 sm:px-10 lg:px-16 lg:pt-24 lg:pb-12 bg-surface-primary overflow-y-auto">
-          <div className="mx-auto flex flex-1 w-full max-w-[640px] flex-col gap-6">
-            {/* Header */}
-            <header className="space-y-4">
-              {eyebrow != null && <p className="kol-helper-uc-xs text-accent-primary">{eyebrow}</p>}
-              {title != null && <h1 className="kol-heading-md">{title}</h1>}
-              {tags.length > 0 && (
-                <div className="flex flex-wrap gap-2">
-                  {tags.map((tag) => (
-                    <Pill key={tag} variant="subtle" size="sm">
-                      {tag}
-                    </Pill>
-                  ))}
-                </div>
-              )}
-            </header>
-
-            {/* Specs */}
-            {specs.length > 0 && <SpecList items={specs} framed />}
-
-            {/* Tabs */}
-            {tabs.length > 0 && (
-              <div className="space-y-4">
-                <div className="border-b border-auto">
-                  <TabsRow tabs={tabs.map(({ id, label }) => ({ id, label }))} value={activeTab} onChange={setActiveTab} />
-                </div>
-                <div role="tabpanel" className="kol-mono-text text-fg-64 leading-relaxed space-y-4">
-                  {activeTabItem?.content}
-                </div>
-              </div>
-            )}
-
-            {/* Purchase block */}
-            <div className="mt-auto space-y-6 border-t border-auto pt-6">
-              {price != null && <PriceDisplay {...price} />}
-
-              <div className="grid gap-4 sm:grid-cols-2">
-                <div className="space-y-2">
-                  <span className="kol-helper-uc-xs text-fg-48">Size</span>
-                  <Dropdown
-                    options={sizeOptions.map((s) => ({ label: s, value: s }))}
-                    value={size}
-                    onChange={handleSize}
-                    className="w-full"
-                  />
-                </div>
-                <div className="space-y-2">
-                  <span className="kol-helper-uc-xs text-fg-48">Quantity</span>
-                  <QuantityInput
-                    value={quantity}
-                    onChange={handleQuantity}
-                    min={minQuantity}
-                    max={maxQuantity}
-                    className="w-full"
-                  />
-                </div>
-              </div>
-
-              {actions}
-
-              {shippingNote != null && <p className="kol-mono-xs text-fg-48">{shippingNote}</p>}
-              {backLink}
-            </div>
-          </div>
-        </div>
-      </section>
-    </main>
-  )
-}

package/src/organisms/ScrollDriftGallery.jsx

@@ -1,214 +0,0 @@
-import { useEffect, useMemo, useRef } from 'react'
-import { gsap } from 'gsap'
-import { ScrollTrigger } from 'gsap/ScrollTrigger'
-import usePrefersReducedMotion from '../hooks/usePrefersReducedMotion.js'
-
-gsap.registerPlugin(ScrollTrigger)
-
-const DEFAULT_BG_KEYFRAMES = [
-  { backgroundColor: '#000000', duration: 0 },
-  { backgroundColor: '#0a0a08', duration: 0.15 },
-  { backgroundColor: '#1a1812', duration: 0.3 },
-  { backgroundColor: '#f5f0e8', duration: 0.5 }, // warm cream
-  { backgroundColor: '#e8df00', duration: 0.7 }, // acid yellow
-  { backgroundColor: '#c8ff00', duration: 0.85 }, // electric chartreuse
-  { backgroundColor: '#0a0a0a', duration: 1 }, // back to black
-]
-
-// Deterministic per-index layout — depends only on index + count, so it
-// survives without any per-item data.
-function layoutFor(index, cardSpacing) {
-  const seed = (index * 7 + 3) % 24
-  const row = index % 3
-  const baseY = [8, 35, 62][row] // top / middle / bottom (vh %)
-  const y = baseY + ((seed % 7) - 3) * 3 // ± jitter
-  const scale = [0.7, 1, 0.85, 1.15, 0.75, 0.95, 1.1, 0.8][index % 8]
-  const rotation = ((seed % 5) - 2) * 1.5 // -3..+3 deg
-  const parallaxSpeed = [0.6, 0.8, 1, 1.2, 0.7, 0.9, 1.1, 0.85][index % 8]
-  const x = index * cardSpacing + (seed % 3) * 60 // horizontal slot + jitter
-  const width = scale > 1 ? 400 : scale > 0.85 ? 340 : 280
-  return { x, y, scale, rotation, parallaxSpeed, width, index }
-}
-
-/**
- * ScrollDriftGallery — a pinned hero where vertical scroll scrubs a horizontal
- * track ("The Drift"): the section pins and page-scroll drives (1) the track
- * sideways, (2) each floating card at its own parallax speed, (3) a keyframed
- * background-color journey, (4) a slow-parallax vertical title, and (5) a
- * bottom progress bar. Card geometry (y-row, scale, rotation, x-slot, width) is
- * derived deterministically from index + count; content is a `renderCard` slot.
- *
- * Requires GSAP ScrollTrigger (registered here). All tweens live in a
- * gsap.context reverted on cleanup, with invalidateOnRefresh + function-based
- * end/x so pin distance and travel recompute on resize. On
- * `prefers-reduced-motion` the rig is skipped entirely and the cards render in
- * a plain horizontally-scrollable row.
- *
- * @param {any[]}    items       cards; drives layout count + totalWidth
- * @param {(item:any,meta:{scale,rotation,width,index})=>ReactNode} renderCard card slot
- * @param {Function} onCardClick (item, index) => void — click on a card
- * @param {number}   totalWidth  scroll/scrub distance (default items.length*cardSpacing + 800)
- * @param {ReactNode} title      giant vertical wordmark (content — author case at call site)
- * @param {ReactNode} intro      opening breathing-space slot
- * @param {ReactNode} outro      end-CTA slot
- * @param {Array<{backgroundColor,duration}>} bgKeyframes background-color journey (fractional durations 0→1)
- * @param {number}   cardSpacing horizontal slot pitch, px (default 520)
- */
-export default function ScrollDriftGallery({
-  items = [],
-  renderCard,
-  onCardClick,
-  totalWidth,
-  title,
-  intro,
-  outro,
-  bgKeyframes = DEFAULT_BG_KEYFRAMES,
-  cardSpacing = 520,
-}) {
-  const bgRef = useRef(null)
-  const containerRef = useRef(null)
-  const horizontalRef = useRef(null)
-  const titleRef = useRef(null)
-  const reducedMotion = usePrefersReducedMotion()
-
-  const layout = useMemo(
-    () => items.map((_, i) => layoutFor(i, cardSpacing)),
-    [items, cardSpacing],
-  )
-  const resolvedTotalWidth = totalWidth ?? items.length * cardSpacing + 800
-
-  useEffect(() => {
-    if (reducedMotion) return undefined
-
-    const ctx = gsap.context(() => {
-      const trigger = {
-        trigger: containerRef.current,
-        start: 'top top',
-        end: () => `+=${resolvedTotalWidth}`,
-      }
-
-      // (1) Pin + horizontal scrub.
-      gsap.to(horizontalRef.current, {
-        x: () => -(resolvedTotalWidth - window.innerWidth),
-        ease: 'none',
-        scrollTrigger: { ...trigger, scrub: 1, pin: true, anticipatePin: 1, invalidateOnRefresh: true },
-      })
-
-      // (2) Background-color journey.
-      gsap.to(bgRef.current, { scrollTrigger: { ...trigger, scrub: true }, keyframes: bgKeyframes })
-
-      // (3) Title slow-parallax (0.3× the track).
-      gsap.to(titleRef.current, {
-        x: () => -(resolvedTotalWidth - window.innerWidth) * 0.3,
-        ease: 'none',
-        scrollTrigger: { ...trigger, scrub: 1 },
-      })
-
-      // (4) Per-card parallax.
-      const cards = horizontalRef.current?.querySelectorAll('[data-drift-card]')
-      cards?.forEach((card, i) => {
-        const meta = layout[i]
-        if (!meta) return
-        gsap.to(card, {
-          x: (meta.parallaxSpeed - 1) * 300,
-          ease: 'none',
-          scrollTrigger: { ...trigger, scrub: 1 },
-        })
-      })
-
-      // (5) Progress bar.
-      const bar = containerRef.current?.querySelector('[data-drift-progress]')
-      if (bar) gsap.to(bar, { width: '100%', ease: 'none', scrollTrigger: { ...trigger, scrub: true } })
-    }, containerRef)
-
-    return () => ctx.revert()
-  }, [layout, resolvedTotalWidth, bgKeyframes, reducedMotion])
-
-  // Reduced-motion fallback: plain horizontal scroll, no pin, no gsap.
-  if (reducedMotion) {
-    return (
-      <div style={{ backgroundColor: bgKeyframes[bgKeyframes.length - 1]?.backgroundColor || '#0a0a0a' }}>
-        <section className="relative overflow-hidden py-16">
-          {title != null && (
-            <div className="px-6 pb-8" style={{ writingMode: 'horizontal-tb' }}>
-              <span className="text-[12vw] font-bold tracking-[-0.04em] leading-none opacity-[0.06]">{title}</span>
-            </div>
-          )}
-          <div className="flex items-center gap-8 overflow-x-auto px-6 pb-6">
-            {intro != null && <div className="flex-shrink-0">{intro}</div>}
-            {items.map((item, i) => {
-              const meta = layout[i]
-              return (
-                <div
-                  key={i}
-                  className="flex-shrink-0 cursor-pointer"
-                  style={{ width: `${meta.width}px` }}
-                  onClick={() => onCardClick?.(item, i)}
-                >
-                  {renderCard?.(item, meta)}
-                </div>
-              )
-            })}
-            {outro != null && <div className="flex-shrink-0">{outro}</div>}
-          </div>
-        </section>
-      </div>
-    )
-  }
-
-  return (
-    <div ref={bgRef} style={{ backgroundColor: bgKeyframes[0]?.backgroundColor || '#000000' }} className="transition-colors duration-0">
-      <section ref={containerRef} className="relative h-screen overflow-hidden">
-        {/* Vertical title — pinned, slow parallax */}
-        {title != null && (
-          <div
-            ref={titleRef}
-            className="absolute left-8 top-0 h-full flex items-center z-10 pointer-events-none select-none"
-            style={{ writingMode: 'vertical-rl', textOrientation: 'mixed' }}
-          >
-            <span className="text-[20vw] font-bold tracking-[-0.04em] leading-none opacity-[0.06] mix-blend-difference">{title}</span>
-          </div>
-        )}
-
-        {/* Horizontal track */}
-        <div ref={horizontalRef} className="absolute top-0 left-0 h-full flex items-start" style={{ width: `${resolvedTotalWidth}px` }}>
-          {/* Opening breathing space */}
-          {intro != null && (
-            <div className="flex-shrink-0 w-[50vw] h-full flex items-center justify-center">{intro}</div>
-          )}
-
-          {/* Floating cards */}
-          {layout.map((meta, i) => (
-            <div
-              key={i}
-              data-drift-card
-              className="absolute cursor-pointer group"
-              style={{
-                left: `${meta.x + 600}px`, // offset past the opening space
-                top: `${meta.y}%`,
-                width: `${meta.width}px`,
-                transform: `rotate(${meta.rotation}deg) scale(${meta.scale})`,
-                transformOrigin: 'center center',
-              }}
-              onClick={() => onCardClick?.(items[i], i)}
-            >
-              {renderCard?.(items[i], meta)}
-            </div>
-          ))}
-
-          {/* End CTA */}
-          {outro != null && (
-            <div className="absolute top-1/2 -translate-y-1/2 text-center" style={{ left: `${resolvedTotalWidth - 500}px` }}>
-              {outro}
-            </div>
-          )}
-        </div>
-
-        {/* Progress bar */}
-        <div className="absolute bottom-0 left-0 right-0 h-px bg-fg-08">
-          <div data-drift-progress className="h-full bg-accent-primary" style={{ width: '0%' }} />
-        </div>
-      </section>
-    </div>
-  )
-}

package/src/organisms/StackHero.jsx

@@ -1,83 +0,0 @@
-import FullBleedHero from './FullBleedHero.jsx'
-import Image from '../molecules/Image.jsx'
-
-/** Per-variant spacing presets — the only delta between StackHero and the
- *  folded-in StackHeroTall (taller viewport + deeper bottom padding). */
-const VARIANTS = {
-  default: { height: 'min-h-[80vh]', padBottom: 'pb-12' },
-  tall: { height: 'min-h-[90vh]', padBottom: 'pb-32 sm:pb-40 lg:pb-48' },
-}
-
-/**
- * StackHero — full-bleed image hero with a bottom-anchored, centered title +
- * description under a bottom-up scrim. Built ON the DS FullBleedHero: the
- * background Image plus a tokenized gradient scrim are handed in as the hero's
- * media node, and the copy rides in the content slot pinned to the bottom.
- * `StackHeroTall` is folded in as `variant="tall"` — a spacing preset, not a
- * second file.
- *
- * De-branded: no CDN `src`/`srcSet` defaults, no brand-copy title/description
- * defaults, no dead `aspectRatio` prop. The scrim reads `--kol-surface-primary`
- * (theme-aware) instead of the hardcoded dark hex, and `objectFit`/
- * `objectPosition` are inline styles (no JIT-invisible dynamic class). The app
- * `reveal` entrance utility is dropped. Title/description authored as-is.
- *
- * @param {string} title           heading text
- * @param {string} description     sub text
- * @param {string} src             background image src
- * @param {string} srcSet          responsive srcSet
- * @param {string} sizes           `sizes` attribute (default '100vw')
- * @param {string} alt             alt text
- * @param {string} objectFit       CSS object-fit for the image (default 'cover')
- * @param {string} objectPosition  CSS object-position for the image (default 'center')
- * @param {'default'|'tall'} variant  spacing preset (default 'default')
- * @param {string} className       extra classes on the hero section
- */
-export default function StackHero({
-  title,
-  description,
-  src,
-  srcSet,
-  sizes = '100vw',
-  alt = '',
-  objectFit = 'cover',
-  objectPosition = 'center',
-  variant = 'default',
-  className = '',
-}) {
-  const { height, padBottom } = VARIANTS[variant] ?? VARIANTS.default
-
-  const media = (
-    <>
-      <Image
-        src={src}
-        srcSet={srcSet}
-        sizes={sizes}
-        alt={alt}
-        loading="eager"
-        className="kol-full-bleed-hero-media"
-        style={{ objectFit, objectPosition }}
-      />
-      <div
-        aria-hidden="true"
-        className="absolute inset-0 pointer-events-none"
-        style={{ background: 'linear-gradient(to top, var(--kol-surface-primary) 0%, transparent 100%)' }}
-      />
-    </>
-  )
-
-  return (
-    <FullBleedHero
-      media={media}
-      height={height}
-      align="center"
-      className={className}
-      panel={
-        <div className={`self-end w-full max-w-[520px] lg:max-w-[30%] text-center mx-auto lg:mx-0 flex flex-col gap-1 ${padBottom}`}>
-          <h1 className="kol-prose-display text-center">{title}</h1>
-          <p className="kol-mono-14 text-center text-fg-80">{description}</p>
-        </div>
-      }
-    />
-  )
-}