@olwiba/ui 0.1.11 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olwiba/ui",
-  "version": "0.1.11",
+  "version": "0.1.13",
   "private": false,
   "type": "module",
   "sideEffects": false,
@@ -41,7 +41,7 @@
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
-    "@olwiba/dx": "0.0.18",
+    "@olwiba/dx": "0.0.20",
     "@tanstack/react-table": "^8.21.3",
     "clsx": "^2.1.1",
     "lucide-react": "^0.562.0",
@@ -63,8 +63,8 @@
   },
   "devDependencies": {
     "@content-collections/mdx": "^0.2.2",
-    "@olwiba/cn": "0.1.21",
-    "@olwiba/docs": "0.1.29",
+    "@olwiba/cn": "0.1.25",
+    "@olwiba/docs": "0.1.32",
     "@tailwindcss/vite": "^4.1.18",
     "@tanstack/react-router": "1.154.8",
     "@tanstack/react-router-devtools": "1.154.8",

package/src/app/AppShell.tsx

@@ -61,6 +61,7 @@ export interface AppShellUser {
   plan?: string;
   onSignOut?: () => void;
   onBilling?: () => void;
+  onNotifications?: () => void;
 }
 
 export interface AppShellBrand {
@@ -159,19 +160,25 @@ function NavUser({ user }: { user: AppShellUser }) {
                 </div>
               </div>
             </DropdownMenuLabel>
-            <DropdownMenuSeparator />
-            <DropdownMenuGroup>
-              {user.onBilling && (
-                <DropdownMenuItem onClick={user.onBilling}>
-                  <CreditCardIcon />
-                  Billing
-                </DropdownMenuItem>
-              )}
-              <DropdownMenuItem>
-                <BellIcon />
-                Notifications
-              </DropdownMenuItem>
-            </DropdownMenuGroup>
+            {(user.onBilling || user.onNotifications) && (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                  {user.onBilling && (
+                    <DropdownMenuItem onClick={user.onBilling}>
+                      <CreditCardIcon />
+                      Billing
+                    </DropdownMenuItem>
+                  )}
+                  {user.onNotifications && (
+                    <DropdownMenuItem onClick={user.onNotifications}>
+                      <BellIcon />
+                      Notifications
+                    </DropdownMenuItem>
+                  )}
+                </DropdownMenuGroup>
+              </>
+            )}
             {user.onSignOut && (
               <>
                 <DropdownMenuSeparator />

package/src/app/AuthSection.tsx

@@ -113,7 +113,8 @@ function DefaultForm({
   return (
     <Card className="w-full">
       {hasPrefill && (
-        <style>{`@keyframes auth-prefill{0%{box-shadow:0 0 0 0 hsl(var(--primary)/0)}40%{box-shadow:0 0 0 3px hsl(var(--primary)/0.4)}100%{box-shadow:0 0 0 0 hsl(var(--primary)/0)}}`}</style>
+        // Theme tokens hold full color values (oklch), so opacity must come from color-mix, not hsl(var()/a)
+        <style>{`@keyframes auth-prefill{0%{box-shadow:0 0 0 0 transparent}40%{box-shadow:0 0 0 3px color-mix(in oklab,var(--primary) 45%,transparent),0 0 16px 2px color-mix(in oklab,var(--primary) 35%,transparent)}100%{box-shadow:0 0 0 0 transparent}}`}</style>
       )}
       <CardHeader>
         {brand && <div className="mb-2">{brand}</div>}

package/src/app/ErrorPage.tsx

@@ -1,16 +1,26 @@
 'use client';
 
 import type { ReactNode } from 'react';
-import { ArrowLeft, Compass } from 'lucide-react';
+import { ArrowLeft, ArrowUpRight } from 'lucide-react';
+import { cn } from '@olwiba/cn';
 import { Button } from '../primitives/Button';
 import type { AppShellRenderLink } from './AppShell';
 
+export interface ErrorPageLink {
+  label: string;
+  href: string;
+  description?: string;
+  icon?: ReactNode;
+}
+
 export interface ErrorPageProps {
   statusCode?: string;
   title?: string;
   description?: string;
   action?: { label: string; href: string };
   backAction?: { label: string; href?: string; onClick?: () => void };
+  /** Optional "maybe you were looking for" links rendered below the actions. */
+  links?: ErrorPageLink[];
   renderLink?: AppShellRenderLink;
 }
 
@@ -24,54 +34,111 @@ export function ErrorPage({
   description = "The page you're looking for doesn't exist or has been moved. Check the URL or head back home.",
   action = { label: 'Take me home', href: '/' },
   backAction = { label: 'Go back' },
+  links,
   renderLink = defaultRenderLink,
 }: ErrorPageProps) {
+  const hasLinks = links && links.length > 0;
+
   return (
-    <section className="overflow-hidden rounded-2xl border bg-card">
-      <div className="relative flex min-h-[560px] flex-col items-center justify-center px-6 py-16 text-center">
-        <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,hsl(var(--muted)/0.8),transparent_70%)]" />
-        <div className="relative space-y-6">
-          <div className="flex justify-center">
-            <div className="flex h-16 w-16 items-center justify-center rounded-2xl border bg-muted">
-              <Compass className="size-8 text-muted-foreground" />
-            </div>
-          </div>
+    <section className="relative overflow-hidden rounded-2xl border bg-card">
+      {/* Dot grid, faded toward the edges */}
+      <div
+        aria-hidden
+        className="absolute inset-0 bg-[radial-gradient(hsl(var(--border))_1px,transparent_1px)] [background-size:24px_24px] [mask-image:radial-gradient(ellipse_at_center,black_30%,transparent_75%)]"
+      />
+      {/* Soft brand glow behind the numerals */}
+      <div
+        aria-hidden
+        className="absolute left-1/2 top-24 h-64 w-[36rem] max-w-full -translate-x-1/2 rounded-full bg-primary/10 blur-3xl"
+      />
 
-          <div className="space-y-2">
-            <div className="text-8xl font-bold tracking-tight text-muted-foreground/20">{statusCode}</div>
-            <h1 className="-mt-4 text-2xl font-semibold tracking-tight">{title}</h1>
-            <p className="mx-auto max-w-sm text-sm text-muted-foreground">
-              {description}
-            </p>
-          </div>
+      <div
+        className={cn(
+          'relative mx-auto flex max-w-3xl flex-col items-center px-6 pt-20 text-center sm:pt-24',
+          hasLinks ? 'pb-16' : 'pb-24 sm:pb-28',
+        )}
+      >
+        <span className="inline-flex items-center gap-2 rounded-full border bg-background/80 px-3 py-1 font-mono text-xs text-muted-foreground backdrop-blur">
+          <span className="relative flex size-1.5">
+            <span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-60" />
+            <span className="relative inline-flex size-1.5 rounded-full bg-primary" />
+          </span>
+          HTTP {statusCode}
+        </span>
+
+        <div
+          aria-hidden
+          className="pointer-events-none -mb-8 mt-2 select-none bg-gradient-to-b from-foreground/15 via-foreground/[0.06] to-transparent bg-clip-text text-[9rem] font-black leading-none tracking-tighter text-transparent sm:-mb-12 sm:text-[13rem]"
+        >
+          {statusCode}
+        </div>
 
-          <div className="flex flex-wrap items-center justify-center gap-3">
-            {backAction && (
-              backAction.href ? (
+        <h1 className="text-balance text-2xl font-semibold tracking-tight sm:text-3xl">{title}</h1>
+        <p className="mx-auto mt-3 max-w-md text-pretty text-sm leading-6 text-muted-foreground">
+          {description}
+        </p>
+
+        <div className="mt-8 flex flex-wrap items-center justify-center gap-3">
+          {backAction &&
+            (backAction.href ? (
+              renderLink({
+                href: backAction.href,
+                children: (
+                  <Button variant="outline">
+                    <ArrowLeft className="mr-2 size-4" />
+                    {backAction.label}
+                  </Button>
+                ),
+              })
+            ) : (
+              <Button variant="outline" onClick={backAction.onClick}>
+                <ArrowLeft className="mr-2 size-4" />
+                {backAction.label}
+              </Button>
+            ))}
+          {action &&
+            renderLink({
+              href: action.href,
+              children: <Button>{action.label}</Button>,
+            })}
+        </div>
+
+        {hasLinks && (
+          <div className="mt-14 w-full">
+            <p className="text-xs font-medium uppercase tracking-wider text-muted-foreground">
+              Maybe you were looking for
+            </p>
+            <div className="mt-4 grid gap-3 text-left sm:grid-cols-2 lg:grid-cols-3">
+              {links.map((link) =>
                 renderLink({
-                  href: backAction.href,
+                  href: link.href,
+                  className:
+                    'group flex items-start gap-3 rounded-xl border bg-background/60 p-4 backdrop-blur transition-colors hover:border-primary/40 hover:bg-accent',
                   children: (
-                    <Button variant="outline">
-                      <ArrowLeft className="mr-2 size-4" />
-                      {backAction.label}
-                    </Button>
+                    <>
+                      {link.icon && (
+                        <span className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg border bg-muted text-muted-foreground">
+                          {link.icon}
+                        </span>
+                      )}
+                      <span className="min-w-0 grow">
+                        <span className="flex items-center gap-1 text-sm font-medium">
+                          {link.label}
+                          <ArrowUpRight className="size-3.5 text-muted-foreground transition-transform group-hover:-translate-y-0.5 group-hover:translate-x-0.5 group-hover:text-foreground" />
+                        </span>
+                        {link.description && (
+                          <span className="mt-0.5 block text-xs leading-5 text-muted-foreground">
+                            {link.description}
+                          </span>
+                        )}
+                      </span>
+                    </>
                   ),
-                })
-              ) : (
-                <Button variant="outline" onClick={backAction.onClick}>
-                  <ArrowLeft className="mr-2 size-4" />
-                  {backAction.label}
-                </Button>
-              )
-            )}
-            {action && (
-              renderLink({
-                href: action.href,
-                children: <Button>{action.label}</Button>,
-              })
-            )}
+                }),
+              )}
+            </div>
           </div>
-        </div>
+        )}
       </div>
     </section>
   );

package/src/blog/PostCard.tsx

@@ -1,9 +1,14 @@
 'use client';
 
 import * as React from 'react';
-import { Badge, cn } from '@olwiba/cn';
 import type { AppShellRenderLink } from '../app/AppShell';
 
+export interface PostAuthor {
+  name: string;
+  role?: string;
+  avatar?: string;
+}
+
 export interface PostCardProps {
   title: string;
   description?: string;
@@ -11,55 +16,121 @@ export interface PostCardProps {
   slug: string;
   image?: string;
   tags?: string[];
+  author?: PostAuthor;
+  hrefPrefix?: string;
+  tagHrefPrefix?: string;
   renderLink?: AppShellRenderLink;
 }
 
 function formatDate(dateStr: string) {
   return new Date(dateStr).toLocaleDateString('en-US', {
     year: 'numeric',
-    month: 'long',
+    month: 'short',
     day: 'numeric',
   });
 }
 
-export function PostCard({ title, description, date, slug, image, tags, renderLink }: PostCardProps) {
-  const href = `/blog/${slug}`;
+export function PostCard({
+  title,
+  description,
+  date,
+  slug,
+  image,
+  tags,
+  author,
+  hrefPrefix = '/blog',
+  tagHrefPrefix = '/blog/tag',
+  renderLink,
+}: PostCardProps) {
+  const href = `${hrefPrefix}/${slug}`;
 
-  const LinkWrapper = ({ children, className }: { children: React.ReactNode; className?: string }) =>
-    renderLink ? renderLink({ href, children, className }) : <a href={href} className={className}>{children}</a>;
+  const LinkWrapper = ({
+    href: linkHref,
+    children,
+    className,
+  }: {
+    href: string;
+    children: React.ReactNode;
+    className?: string;
+  }) =>
+    renderLink ? (
+      renderLink({ href: linkHref, children, className })
+    ) : (
+      <a href={linkHref} className={className}>
+        {children}
+      </a>
+    );
 
   return (
-    <article className="group flex flex-col gap-3">
-      {image && (
-        <LinkWrapper className="block overflow-hidden rounded-xl">
+    <article className="group relative flex flex-col items-start">
+      <div className="relative w-full overflow-hidden rounded-2xl bg-muted">
+        {image ? (
           <img
             src={image}
             alt={title}
-            className="aspect-video w-full object-cover transition-transform duration-300 group-hover:scale-105"
+            className="aspect-video w-full object-cover transition-transform duration-500 group-hover:scale-[1.03]"
+          />
+        ) : (
+          <div
+            aria-hidden
+            className="aspect-video w-full bg-gradient-to-br from-primary/15 via-muted to-muted"
           />
-        </LinkWrapper>
-      )}
-      <div className="flex flex-col gap-2">
-        {tags && tags.length > 0 && (
-          <div className="flex flex-wrap gap-1.5">
-            {tags.map((tag) => (
-              <Badge key={tag} variant="secondary" className="text-xs">
-                {tag}
-              </Badge>
-            ))}
-          </div>
         )}
-        <h2 className="text-lg font-semibold leading-snug tracking-tight">
-          <LinkWrapper className="hover:text-primary transition-colors">
-            {title}
-          </LinkWrapper>
-        </h2>
-        {description && (
-          <p className="line-clamp-2 text-sm text-muted-foreground">{description}</p>
+        <div className="pointer-events-none absolute inset-0 rounded-2xl ring-1 ring-inset ring-foreground/10" />
+      </div>
+
+      <div className="flex w-full grow flex-col">
+        <div className="mt-6 flex flex-wrap items-center gap-x-3 gap-y-2 text-xs">
+          <time dateTime={date} className="text-muted-foreground">
+            {formatDate(date)}
+          </time>
+          {tags?.map((tag) => (
+            <LinkWrapper
+              key={tag}
+              href={`${tagHrefPrefix}/${encodeURIComponent(tag)}`}
+              className="relative z-10 rounded-full bg-muted px-3 py-1.5 font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+            >
+              {tag}
+            </LinkWrapper>
+          ))}
+        </div>
+
+        <div className="grow">
+          <h2 className="mt-3 text-lg font-semibold leading-snug tracking-tight transition-colors group-hover:text-primary">
+            <LinkWrapper href={href}>
+              <span className="absolute inset-0" aria-hidden />
+              {title}
+            </LinkWrapper>
+          </h2>
+          {description && (
+            <p className="mt-3 line-clamp-3 text-sm leading-6 text-muted-foreground">
+              {description}
+            </p>
+          )}
+        </div>
+
+        {author && (
+          <div className="mt-6 flex items-center gap-x-3">
+            {author.avatar ? (
+              <img
+                src={author.avatar}
+                alt={author.name}
+                className="size-9 rounded-full bg-muted object-cover"
+              />
+            ) : (
+              <span
+                aria-hidden
+                className="flex size-9 items-center justify-center rounded-full bg-muted text-sm font-semibold text-muted-foreground"
+              >
+                {author.name.charAt(0).toUpperCase()}
+              </span>
+            )}
+            <div className="text-sm leading-tight">
+              <p className="font-semibold">{author.name}</p>
+              {author.role && <p className="text-muted-foreground">{author.role}</p>}
+            </div>
+          </div>
         )}
-        <time dateTime={date} className="text-xs text-muted-foreground">
-          {formatDate(date)}
-        </time>
       </div>
     </article>
   );

package/src/blog/PostList.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import * as React from 'react';
+import { cn } from '@olwiba/cn';
 import { PostCard, type PostCardProps } from './PostCard';
 import type { AppShellRenderLink } from '../app/AppShell';
 
@@ -8,9 +9,18 @@ export interface PostListProps {
   posts: PostCardProps[];
   renderLink?: AppShellRenderLink;
   emptyMessage?: string;
+  /** Max columns at the widest breakpoint. */
+  columns?: 2 | 3;
+  className?: string;
 }
 
-export function PostList({ posts, renderLink, emptyMessage = 'No posts published yet.' }: PostListProps) {
+export function PostList({
+  posts,
+  renderLink,
+  emptyMessage = 'No posts published yet.',
+  columns = 3,
+  className,
+}: PostListProps) {
   if (posts.length === 0) {
     return (
       <p className="text-sm text-muted-foreground italic">{emptyMessage}</p>
@@ -18,7 +28,13 @@ export function PostList({ posts, renderLink, emptyMessage = 'No posts published
   }
 
   return (
-    <div className="grid gap-8 sm:grid-cols-2">
+    <div
+      className={cn(
+        'grid grid-cols-1 gap-x-8 gap-y-14 sm:grid-cols-2',
+        columns === 3 && 'lg:grid-cols-3',
+        className,
+      )}
+    >
       {posts.map((post) => (
         <PostCard key={post.slug} {...post} renderLink={renderLink} />
       ))}

package/src/components/BrandColorSwitchMinimal.tsx

@@ -129,7 +129,9 @@ export function BrandColorSwitchMinimal() {
           <span className="relative inline-flex size-4 items-center justify-center">
             <Palette className="size-4" />
             <span
-              className="absolute -bottom-0.5 -right-0.5 size-1.5 rounded-full ring-1 ring-background"
+              className={`absolute -bottom-0.5 -right-0.5 size-1.5 rounded-full ring-1 ring-background${
+                active === 'zinc' ? ' dark:ring-white/25' : ''
+              }`}
               style={{ background: activeHex }}
             />
           </span>
@@ -147,7 +149,11 @@ export function BrandColorSwitchMinimal() {
               className="group flex flex-col items-center gap-1"
             >
               <span
-                className="flex size-7 items-center justify-center rounded-full ring-offset-background transition-all group-hover:scale-110"
+                // Zinc's swatch is near-black — give it a border in dark mode so it
+                // doesn't vanish into the popover background (transparent in light)
+                className={`flex size-7 items-center justify-center rounded-full ring-offset-background transition-all group-hover:scale-110${
+                  color.name === 'zinc' ? ' border border-transparent dark:border-white/25' : ''
+                }`}
                 style={{
                   background: PREVIEW_HEX[color.name],
                   boxShadow:

package/src/components/FlowBracket.tsx

@@ -8,6 +8,10 @@ export interface FlowBracketProps {
    * Defaults to 8 (near the top of the first child).
    */
   anchorTop?: number;
+  /** Per-side override for the top anchor of the left bracket. Falls back to anchorTop. */
+  anchorTopLeft?: number;
+  /** Per-side override for the top anchor of the right bracket. Falls back to anchorTop. */
+  anchorTopRight?: number;
   /**
    * Vertical anchor for the bottom connection as a percentage of the wrapper height (0–100).
    * Defaults to 92 (near the bottom of the last child).
@@ -57,6 +61,8 @@ export interface FlowBracketProps {
  */
 export function FlowBracket({
   anchorTop = 8,
+  anchorTopLeft,
+  anchorTopRight,
   anchorBottom = 92,
   extent = 22,
   arrow = true,
@@ -77,13 +83,15 @@ export function FlowBracket({
 
   const cl = colorLeft ?? color;
   const cr = colorRight ?? color;
+  const aTL = anchorTopLeft ?? anchorTop;
+  const aTR = anchorTopRight ?? anchorTop;
 
   // Left bracket: bottom → top (arrowhead at top, pointing right into genesis)
-  const leftD  = `M 0,${anchorBottom} L ${L},${anchorBottom} L ${L},${anchorTop} L 0,${anchorTop}`;
+  const leftD  = `M 0,${anchorBottom} L ${L},${anchorBottom} L ${L},${aTL} L 0,${aTL}`;
   // Right bracket: reversed = top → bottom (arrowhead at bottom, pointing left into sync)
   const rightD = reverseRight
-    ? `M 1000,${anchorTop} L ${R},${anchorTop} L ${R},${anchorBottom} L 1000,${anchorBottom}`
-    : `M 1000,${anchorBottom} L ${R},${anchorBottom} L ${R},${anchorTop} L 1000,${anchorTop}`;
+    ? `M 1000,${aTR} L ${R},${aTR} L ${R},${anchorBottom} L 1000,${anchorBottom}`
+    : `M 1000,${anchorBottom} L ${R},${anchorBottom} L ${R},${aTR} L 1000,${aTR}`;
 
   // CSS dot: extent as % of container width
   const ep = `${(extent / 10).toFixed(1)}%`;
@@ -92,22 +100,22 @@ export function FlowBracket({
   0%{top:${anchorBottom}%;left:0;opacity:0}
   6%{opacity:1}
   20%{top:${anchorBottom}%;left:-${ep}}
-  80%{top:${anchorTop}%;left:-${ep};opacity:1}
-  94%{top:${anchorTop}%;left:0;opacity:0}
-  100%{top:${anchorTop}%;left:0;opacity:0}
+  80%{top:${aTL}%;left:-${ep};opacity:1}
+  94%{top:${aTL}%;left:0;opacity:0}
+  100%{top:${aTL}%;left:0;opacity:0}
 }
 @keyframes fb-dr{
   0%{top:${anchorBottom}%;left:100%;opacity:0}
   6%{opacity:1}
   20%{top:${anchorBottom}%;left:calc(100% + ${ep})}
-  80%{top:${anchorTop}%;left:calc(100% + ${ep});opacity:1}
-  94%{top:${anchorTop}%;left:100%;opacity:0}
-  100%{top:${anchorTop}%;left:100%;opacity:0}
+  80%{top:${aTR}%;left:calc(100% + ${ep});opacity:1}
+  94%{top:${aTR}%;left:100%;opacity:0}
+  100%{top:${aTR}%;left:100%;opacity:0}
 }
 @keyframes fb-drr{
-  0%{top:${anchorTop}%;left:100%;opacity:0}
+  0%{top:${aTR}%;left:100%;opacity:0}
   6%{opacity:1}
-  20%{top:${anchorTop}%;left:calc(100% + ${ep})}
+  20%{top:${aTR}%;left:calc(100% + ${ep})}
   80%{top:${anchorBottom}%;left:calc(100% + ${ep});opacity:1}
   94%{top:${anchorBottom}%;left:100%;opacity:0}
   100%{top:${anchorBottom}%;left:100%;opacity:0}
@@ -167,7 +175,7 @@ export function FlowBracket({
         <svg
           aria-hidden
           viewBox="0 0 10 8"
-          style={{ ...arrowBase, top: `${anchorTop}%`, left: 0 }}
+          style={{ ...arrowBase, top: `${aTL}%`, left: 0 }}
         >
           <polyline points="1,1 8,4 1,7" style={{ stroke: cl }} {...chevronProps} />
         </svg>
@@ -180,7 +188,7 @@ export function FlowBracket({
           viewBox="0 0 10 8"
           style={{
             ...arrowBase,
-            top: reverseRight ? `${anchorBottom}%` : `${anchorTop}%`,
+            top: reverseRight ? `${anchorBottom}%` : `${aTR}%`,
             left: '100%',
           }}
         >

package/src/index.ts

@@ -52,6 +52,7 @@ export {
 
 // ─── Marketing — page sections ────────────────────────────────────────────────
 export { SectionTitle, type SectionTitleProps } from './marketing/SectionTitle';
+export { marketingSectionSpacing, type MarketingSectionSpacing } from './marketing/section-spacing';
 export { HeroSection, type HeroSectionProps } from './marketing/HeroSection';
 export { FeaturesSection, type FeaturesSectionProps } from './marketing/FeaturesSection';
 export { GroupedFeaturesSection, type GroupedFeaturesSectionProps, type GroupedFeatureGroup } from './marketing/GroupedFeaturesSection';
@@ -124,7 +125,7 @@ export { RegisterHotkeys, type Hotkey } from './components/RegisterHotkeys';
 export { RootErrorFallback } from './components/RootErrorFallback';
 
 // ─── Blog ────────────────────────────────────────────────────────────────────
-export { PostCard, type PostCardProps } from './blog/PostCard';
+export { PostCard, type PostCardProps, type PostAuthor } from './blog/PostCard';
 export { PostList, type PostListProps } from './blog/PostList';
 export { ChangelogList, type ChangelogListProps } from './blog/ChangelogList';
 export { ChangelogCard, type ChangelogCardProps, type ChangelogHighlight, type ChangelogReleaseType } from './blog/ChangelogCard';

package/src/marketing/HeroSection.tsx

@@ -6,6 +6,7 @@ import { Avatar, AvatarFallback, AvatarImage, Badge, Button } from '@olwiba/cn';
 import { FadeIn } from '../motion/FadeIn';
 import { PhoneFrame } from '../components/PhoneFrame';
 import type { AppShellRenderLink } from '../app/AppShell';
+import { marketingSectionSpacing } from './section-spacing';
 
 export interface HeroSectionProps {
   heading: string;
@@ -40,7 +41,7 @@ export function HeroSection({
 }: HeroSectionProps) {
   return (
     <section className="overflow-hidden">
-      <div className="px-6 py-14 sm:px-10 sm:py-20">
+      <div className={marketingSectionSpacing.hero}>
         <div className="mx-auto grid max-w-6xl items-center gap-10 lg:grid-cols-2 lg:gap-16">
           {/* Left - text content */}
           <FadeIn direction="left">