@olwiba/ui 0.1.12 → 0.1.13

package/dist/index.d.ts

@@ -210,6 +210,7 @@ interface AppShellUser {
     plan?: string;
     onSignOut?: () => void;
     onBilling?: () => void;
+    onNotifications?: () => void;
 }
 interface AppShellBrand {
     name: ReactNode;
@@ -302,6 +303,12 @@ interface EmptyStateProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare function EmptyState({ icon: Icon, title, description, action, className, ...props }: EmptyStateProps): react_jsx_runtime.JSX.Element;
 
+interface ErrorPageLink {
+    label: string;
+    href: string;
+    description?: string;
+    icon?: ReactNode;
+}
 interface ErrorPageProps {
     statusCode?: string;
     title?: string;
@@ -315,9 +322,11 @@ interface ErrorPageProps {
         href?: string;
         onClick?: () => void;
     };
+    /** Optional "maybe you were looking for" links rendered below the actions. */
+    links?: ErrorPageLink[];
     renderLink?: AppShellRenderLink;
 }
-declare function ErrorPage({ statusCode, title, description, action, backAction, renderLink, }: ErrorPageProps): react_jsx_runtime.JSX.Element;
+declare function ErrorPage({ statusCode, title, description, action, backAction, links, renderLink, }: ErrorPageProps): react_jsx_runtime.JSX.Element;
 
 interface UpgradeComparisonRow {
     key?: React.Key;
@@ -366,6 +375,12 @@ interface SectionTitleProps {
 }
 declare function SectionTitle({ title, description, badge, className }: SectionTitleProps): react_jsx_runtime.JSX.Element;
 
+declare const marketingSectionSpacing: {
+    readonly standard: "px-6 py-14 sm:px-10 sm:py-20";
+    readonly hero: "px-6 pb-14 pt-10 sm:px-10 sm:py-20";
+};
+type MarketingSectionSpacing = keyof typeof marketingSectionSpacing;
+
 interface HeroSectionProps {
     heading: string;
     badge?: string;
@@ -1196,6 +1211,11 @@ interface RootErrorFallbackProps {
 }
 declare function RootErrorFallback({ error, reset }: RootErrorFallbackProps): react_jsx_runtime.JSX.Element;
 
+interface PostAuthor {
+    name: string;
+    role?: string;
+    avatar?: string;
+}
 interface PostCardProps {
     title: string;
     description?: string;
@@ -1203,16 +1223,22 @@ interface PostCardProps {
     slug: string;
     image?: string;
     tags?: string[];
+    author?: PostAuthor;
+    hrefPrefix?: string;
+    tagHrefPrefix?: string;
     renderLink?: AppShellRenderLink;
 }
-declare function PostCard({ title, description, date, slug, image, tags, renderLink }: PostCardProps): react_jsx_runtime.JSX.Element;
+declare function PostCard({ title, description, date, slug, image, tags, author, hrefPrefix, tagHrefPrefix, renderLink, }: PostCardProps): react_jsx_runtime.JSX.Element;
 
 interface PostListProps {
     posts: PostCardProps[];
     renderLink?: AppShellRenderLink;
     emptyMessage?: string;
+    /** Max columns at the widest breakpoint. */
+    columns?: 2 | 3;
+    className?: string;
 }
-declare function PostList({ posts, renderLink, emptyMessage }: PostListProps): react_jsx_runtime.JSX.Element;
+declare function PostList({ posts, renderLink, emptyMessage, columns, className, }: PostListProps): react_jsx_runtime.JSX.Element;
 
 type ChangelogReleaseType = 'release' | 'fix' | 'enhancement';
 interface ChangelogHighlight {
@@ -1296,4 +1322,4 @@ interface UsePaginationReturn {
 }
 declare function usePagination(total: number, pageSize: number): UsePaginationReturn;
 
-export { AnimatedPill, type AnimatedPillProps, AppContent, type AppContentProps, AppGrid, AppGridCell, type AppGridCellProps, type AppGridProps, type AppNavItem, AppScreen, AppShell, type AppShellAction, type AppShellBrand, type AppShellProps, type AppShellRenderLink, type AppShellUser, type AuthFormProps, AuthSection, type AuthSectionProps, Badge, type BadgeProps, BrandColorSwitchMinimal, Button, type ButtonProps, Card, type CardProps, CarouselSection, type CarouselSectionProps, ChangelogCard, type ChangelogCardProps, type ChangelogHighlight, ChangelogList, type ChangelogListProps, type ChangelogReleaseType, Checkbox, type CheckboxProps, type ComparisonColumn, ComparisonSection, type ComparisonSectionProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmOptions, type ContactInfoItem, ContactSection, type ContactSectionProps, ContextMenu, type ContextMenuDef, type ContextMenuProps, CountUp, type CountUpProps, CountdownTimer, type CountdownTimerProps, CtaCardSection, type CtaCardSectionProps, CtaSection, type CtaSectionProps, DevBanner, type DevBannerProps, Dock, type DockItem, type DockProps, EmptyState, type EmptyStateProps, ErrorPage, type ErrorPageProps, FadeIn, type FadeInProps, FaqSection, type FaqSectionProps, FeatureCard, type FeatureCardProps, type FeatureMarqueeItem, type FeatureMarqueeRow, FeatureMarqueeSection, type FeatureMarqueeSectionProps, FeaturesSection, type FeaturesSectionProps, FlowBracket, type FlowBracketProps, FlowConnector, type FlowConnectorProps, Footer, type FooterProps, FullPageSpinner, GlassCard, type GlassCardProps, Grid, GridItem, type GridItemProps, type GridProps, type GroupedFeatureGroup, GroupedFeaturesSection, type GroupedFeaturesSectionProps, HeroSection, type HeroSectionProps, type Hotkey, ImageCard, type ImageCardProps, Input, type InputProps, LogoStrip, type LogoStripProps, ModeSwitchMinimal, Navbar, type NavbarProps, NewsletterSection, type NewsletterSectionProps, OlwibaUIProvider, type OlwibaUIProviderProps, Overlay, type OverlayProps, type OverlayVariant, PageHeader, type PageHeaderBackButton, type PageHeaderBreadcrumb, type PageHeaderProps, PageTransition, type PageTransitionProps, PhoneFrame, type PhoneFrameProps, PostCard, type PostCardProps, PostList, type PostListProps, PricingCard, type PricingCardProps, type PricingFeature, type PricingPlan, PricingSection, type PricingSectionProps, PublicPageFrame, type PublicPageFrameProps, type QualificationColumn, QualificationSection, type QualificationSectionProps, RegisterHotkeys, RootErrorFallback, Section, type SectionProps, SectionTitle, type SectionTitleProps, Spotlight, type SpotlightGroup, type SpotlightItem, type SpotlightProps, Stack, type StackProps, StaggerChildren, type StaggerChildrenProps, StatCard, type StatCardProps, StatsSection, type StatsSectionProps, type StepItem, StepsSection, type StepsSectionProps, Suspensed, Switch, type SwitchProps, type TeamMember, TeamSection, type TeamSectionProps, type TechStackItem, TechStackSection, type TechStackSectionProps, TestimonialCard, type TestimonialCardProps, TestimonialsSection, type TestimonialsSectionProps, Textarea, type TextareaProps, ThemeColorUpdater, ThemeSwitchMinimal, type UIMode, Underlay, type UnderlayProps, type UnderlayVariant, type UpgradeComparisonRow, UpgradePrompt, type UpgradePromptProps, type UseConfirmReturn, type UseControlledOpenReturn, type UsePaginationReturn, VersionBanner, cn, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode };
+export { AnimatedPill, type AnimatedPillProps, AppContent, type AppContentProps, AppGrid, AppGridCell, type AppGridCellProps, type AppGridProps, type AppNavItem, AppScreen, AppShell, type AppShellAction, type AppShellBrand, type AppShellProps, type AppShellRenderLink, type AppShellUser, type AuthFormProps, AuthSection, type AuthSectionProps, Badge, type BadgeProps, BrandColorSwitchMinimal, Button, type ButtonProps, Card, type CardProps, CarouselSection, type CarouselSectionProps, ChangelogCard, type ChangelogCardProps, type ChangelogHighlight, ChangelogList, type ChangelogListProps, type ChangelogReleaseType, Checkbox, type CheckboxProps, type ComparisonColumn, ComparisonSection, type ComparisonSectionProps, ConfirmDialog, type ConfirmDialogProps, type ConfirmOptions, type ContactInfoItem, ContactSection, type ContactSectionProps, ContextMenu, type ContextMenuDef, type ContextMenuProps, CountUp, type CountUpProps, CountdownTimer, type CountdownTimerProps, CtaCardSection, type CtaCardSectionProps, CtaSection, type CtaSectionProps, DevBanner, type DevBannerProps, Dock, type DockItem, type DockProps, EmptyState, type EmptyStateProps, ErrorPage, type ErrorPageProps, FadeIn, type FadeInProps, FaqSection, type FaqSectionProps, FeatureCard, type FeatureCardProps, type FeatureMarqueeItem, type FeatureMarqueeRow, FeatureMarqueeSection, type FeatureMarqueeSectionProps, FeaturesSection, type FeaturesSectionProps, FlowBracket, type FlowBracketProps, FlowConnector, type FlowConnectorProps, Footer, type FooterProps, FullPageSpinner, GlassCard, type GlassCardProps, Grid, GridItem, type GridItemProps, type GridProps, type GroupedFeatureGroup, GroupedFeaturesSection, type GroupedFeaturesSectionProps, HeroSection, type HeroSectionProps, type Hotkey, ImageCard, type ImageCardProps, Input, type InputProps, LogoStrip, type LogoStripProps, type MarketingSectionSpacing, ModeSwitchMinimal, Navbar, type NavbarProps, NewsletterSection, type NewsletterSectionProps, OlwibaUIProvider, type OlwibaUIProviderProps, Overlay, type OverlayProps, type OverlayVariant, PageHeader, type PageHeaderBackButton, type PageHeaderBreadcrumb, type PageHeaderProps, PageTransition, type PageTransitionProps, PhoneFrame, type PhoneFrameProps, type PostAuthor, PostCard, type PostCardProps, PostList, type PostListProps, PricingCard, type PricingCardProps, type PricingFeature, type PricingPlan, PricingSection, type PricingSectionProps, PublicPageFrame, type PublicPageFrameProps, type QualificationColumn, QualificationSection, type QualificationSectionProps, RegisterHotkeys, RootErrorFallback, Section, type SectionProps, SectionTitle, type SectionTitleProps, Spotlight, type SpotlightGroup, type SpotlightItem, type SpotlightProps, Stack, type StackProps, StaggerChildren, type StaggerChildrenProps, StatCard, type StatCardProps, StatsSection, type StatsSectionProps, type StepItem, StepsSection, type StepsSectionProps, Suspensed, Switch, type SwitchProps, type TeamMember, TeamSection, type TeamSectionProps, type TechStackItem, TechStackSection, type TechStackSectionProps, TestimonialCard, type TestimonialCardProps, TestimonialsSection, type TestimonialsSectionProps, Textarea, type TextareaProps, ThemeColorUpdater, ThemeSwitchMinimal, type UIMode, Underlay, type UnderlayProps, type UnderlayVariant, type UpgradeComparisonRow, UpgradePrompt, type UpgradePromptProps, type UseConfirmReturn, type UseControlledOpenReturn, type UsePaginationReturn, VersionBanner, cn, marketingSectionSpacing, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode };

package/dist/index.js

@@ -5,7 +5,7 @@ import { useRef, useEffect, useState } from 'react';
 import { Button as Button$1, Card as Card$1, Input as Input$1, Textarea as Textarea$1, Checkbox as Checkbox$1, Switch as Switch$1, useIsMobile, UIVariantProvider, Badge as Badge$1, cn as cn$1, Table, TableHeader, TableRow, TableHead, TableBody, TableCell, Avatar, AvatarImage, AvatarFallback, useUIVariant, Separator, Accordion, AccordionItem, AccordionTrigger, AccordionContent, Label, Sheet, SheetTrigger, SheetContent, StatusIndicator, CommandDialog, CommandInput, CommandList, CommandEmpty, CommandSeparator, CommandGroup, CommandItem, TooltipProvider, Tooltip, TooltipTrigger, TooltipContent, ContextMenu as ContextMenu$1, ContextMenuTrigger, ContextMenuContent, AlertDialog, AlertDialogContent, AlertDialogHeader, AlertDialogTitle, AlertDialogDescription, AlertDialogFooter, AlertDialogCancel, AlertDialogAction, Spinner, Popover, PopoverTrigger, PopoverContent, SidebarProvider, SidebarInset, CardHeader, CardTitle, CardDescription, CardContent, ContextMenuSeparator, ContextMenuLabel, ContextMenuSub, ContextMenuSubTrigger, ContextMenuSubContent, ContextMenuItem, ContextMenuShortcut, Sidebar, SidebarHeader, SidebarMenu, SidebarMenuItem, SidebarMenuButton, SidebarContent, SidebarGroup, SidebarGroupContent, SidebarFooter, SidebarTrigger, useSidebar, DropdownMenu, DropdownMenuTrigger, DropdownMenuContent, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuGroup, DropdownMenuItem } from '@olwiba/cn';
 export { CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@olwiba/cn';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Compass, ArrowLeft, X, ArrowRight, ChevronLeft, ChevronRight, Sparkles, Rocket, Check, Minus, Quote, Star, Twitter, Github, Linkedin, Mail, MessageSquare, ChevronDown, Send, Menu, Search, TrendingUp, TrendingDown, Sun, Moon, Palette, AlertTriangle, Loader2, Layers, LayoutGrid, ShieldCheck, Building2, MoreVerticalIcon, CreditCardIcon, BellIcon, LogOutIcon } from 'lucide-react';
+import { ArrowLeft, ArrowUpRight, X, ArrowRight, ChevronLeft, ChevronRight, Sparkles, Rocket, Check, Minus, Quote, Star, Twitter, Github, Linkedin, Mail, MessageSquare, ChevronDown, Send, Menu, Search, TrendingUp, TrendingDown, Sun, Moon, Palette, AlertTriangle, Loader2, Layers, LayoutGrid, ShieldCheck, Building2, MoreVerticalIcon, CreditCardIcon, BellIcon, LogOutIcon } from 'lucide-react';
 
 var OlwibaUIContext = React29.createContext({
   isMobile: false,
@@ -294,15 +294,17 @@ function NavUser({ user }) {
               /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: user.email })
             ] })
           ] }) }),
-          /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-          /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
-            user.onBilling && /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: user.onBilling, children: [
-              /* @__PURE__ */ jsx(CreditCardIcon, {}),
-              "Billing"
-            ] }),
-            /* @__PURE__ */ jsxs(DropdownMenuItem, { children: [
-              /* @__PURE__ */ jsx(BellIcon, {}),
-              "Notifications"
+          (user.onBilling || user.onNotifications) && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [
+              user.onBilling && /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: user.onBilling, children: [
+                /* @__PURE__ */ jsx(CreditCardIcon, {}),
+                "Billing"
+              ] }),
+              user.onNotifications && /* @__PURE__ */ jsxs(DropdownMenuItem, { onClick: user.onNotifications, children: [
+                /* @__PURE__ */ jsx(BellIcon, {}),
+                "Notifications"
+              ] })
             ] })
           ] }),
           user.onSignOut && /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -606,35 +608,90 @@ 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 = defaultRenderLink3
 }) {
-  return /* @__PURE__ */ jsx("section", { className: "overflow-hidden rounded-2xl border bg-card", children: /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-[560px] flex-col items-center justify-center px-6 py-16 text-center", children: [
-    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_center,hsl(var(--muted)/0.8),transparent_70%)]" }),
-    /* @__PURE__ */ jsxs("div", { className: "relative space-y-6", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx("div", { className: "flex h-16 w-16 items-center justify-center rounded-2xl border bg-muted", children: /* @__PURE__ */ jsx(Compass, { className: "size-8 text-muted-foreground" }) }) }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsx("div", { className: "text-8xl font-bold tracking-tight text-muted-foreground/20", children: statusCode }),
-        /* @__PURE__ */ jsx("h1", { className: "-mt-4 text-2xl font-semibold tracking-tight", children: title }),
-        /* @__PURE__ */ jsx("p", { className: "mx-auto max-w-sm text-sm text-muted-foreground", children: description })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-center gap-3", children: [
-        backAction && (backAction.href ? renderLink({
-          href: backAction.href,
-          children: /* @__PURE__ */ jsxs(Button, { variant: "outline", children: [
-            /* @__PURE__ */ jsx(ArrowLeft, { className: "mr-2 size-4" }),
-            backAction.label
+  const hasLinks = links && links.length > 0;
+  return /* @__PURE__ */ jsxs("section", { className: "relative overflow-hidden rounded-2xl border bg-card", children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        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%)]"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        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"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn$1(
+          "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"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("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", children: [
+            /* @__PURE__ */ jsxs("span", { className: "relative flex size-1.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "absolute inline-flex h-full w-full animate-ping rounded-full bg-primary opacity-60" }),
+              /* @__PURE__ */ jsx("span", { className: "relative inline-flex size-1.5 rounded-full bg-primary" })
+            ] }),
+            "HTTP ",
+            statusCode
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": true,
+              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]",
+              children: statusCode
+            }
+          ),
+          /* @__PURE__ */ jsx("h1", { className: "text-balance text-2xl font-semibold tracking-tight sm:text-3xl", children: title }),
+          /* @__PURE__ */ jsx("p", { className: "mx-auto mt-3 max-w-md text-pretty text-sm leading-6 text-muted-foreground", children: description }),
+          /* @__PURE__ */ jsxs("div", { className: "mt-8 flex flex-wrap items-center justify-center gap-3", children: [
+            backAction && (backAction.href ? renderLink({
+              href: backAction.href,
+              children: /* @__PURE__ */ jsxs(Button, { variant: "outline", children: [
+                /* @__PURE__ */ jsx(ArrowLeft, { className: "mr-2 size-4" }),
+                backAction.label
+              ] })
+            }) : /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: backAction.onClick, children: [
+              /* @__PURE__ */ jsx(ArrowLeft, { className: "mr-2 size-4" }),
+              backAction.label
+            ] })),
+            action && renderLink({
+              href: action.href,
+              children: /* @__PURE__ */ jsx(Button, { children: action.label })
+            })
+          ] }),
+          hasLinks && /* @__PURE__ */ jsxs("div", { className: "mt-14 w-full", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-wider text-muted-foreground", children: "Maybe you were looking for" }),
+            /* @__PURE__ */ jsx("div", { className: "mt-4 grid gap-3 text-left sm:grid-cols-2 lg:grid-cols-3", children: links.map(
+              (link) => renderLink({
+                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: /* @__PURE__ */ jsxs(Fragment, { children: [
+                  link.icon && /* @__PURE__ */ jsx("span", { className: "mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg border bg-muted text-muted-foreground", children: link.icon }),
+                  /* @__PURE__ */ jsxs("span", { className: "min-w-0 grow", children: [
+                    /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1 text-sm font-medium", children: [
+                      link.label,
+                      /* @__PURE__ */ jsx(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" })
+                    ] }),
+                    link.description && /* @__PURE__ */ jsx("span", { className: "mt-0.5 block text-xs leading-5 text-muted-foreground", children: link.description })
+                  ] })
+                ] })
+              })
+            ) })
           ] })
-        }) : /* @__PURE__ */ jsxs(Button, { variant: "outline", onClick: backAction.onClick, children: [
-          /* @__PURE__ */ jsx(ArrowLeft, { className: "mr-2 size-4" }),
-          backAction.label
-        ] })),
-        action && renderLink({
-          href: action.href,
-          children: /* @__PURE__ */ jsx(Button, { children: action.label })
-        })
-      ] })
-    ] })
-  ] }) });
+        ]
+      }
+    )
+  ] });
 }
 function UpgradePrompt({
   variant,
@@ -817,6 +874,12 @@ function SectionTitle({ title, description, badge, className }) {
     description && /* @__PURE__ */ jsx("p", { className: "mx-auto mt-4 max-w-2xl text-pretty text-muted-foreground", children: description })
   ] }) });
 }
+
+// src/marketing/section-spacing.ts
+var marketingSectionSpacing = {
+  standard: "px-6 py-14 sm:px-10 sm:py-20",
+  hero: "px-6 pb-14 pt-10 sm:px-10 sm:py-20"
+};
 var sizes = {
   sm: { outer: "w-44", height: "h-80", notch: "w-16 h-4", border: "rounded-[2rem]", screen: "rounded-[1.75rem]" },
   md: { outer: "w-56", height: "h-[26rem]", notch: "w-20 h-5", border: "rounded-[2.5rem]", screen: "rounded-[2.25rem]" },
@@ -879,7 +942,7 @@ function HeroSection({
   socialProofText,
   renderLink = defaultRenderLink4
 }) {
-  return /* @__PURE__ */ jsx("section", { className: "overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: "px-6 py-14 sm:px-10 sm:py-20", children: [
+  return /* @__PURE__ */ jsx("section", { className: "overflow-hidden", children: /* @__PURE__ */ jsxs("div", { className: marketingSectionSpacing.hero, children: [
     /* @__PURE__ */ jsxs("div", { className: "mx-auto grid max-w-6xl items-center gap-10 lg:grid-cols-2 lg:gap-16", children: [
       /* @__PURE__ */ jsx(FadeIn, { direction: "left", children: /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-6", children: [
         badge && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", children: badge }) }),
@@ -3573,35 +3636,111 @@ function RootErrorFallback({ error, reset }) {
 function formatDate(dateStr) {
   return new Date(dateStr).toLocaleDateString("en-US", {
     year: "numeric",
-    month: "long",
+    month: "short",
     day: "numeric"
   });
 }
-function PostCard({ title, description, date, slug, image, tags, renderLink }) {
-  const href = `/blog/${slug}`;
-  const LinkWrapper = ({ children, className }) => renderLink ? renderLink({ href, children, className }) : /* @__PURE__ */ jsx("a", { href, className, children });
-  return /* @__PURE__ */ jsxs("article", { className: "group flex flex-col gap-3", children: [
-    image && /* @__PURE__ */ jsx(LinkWrapper, { className: "block overflow-hidden rounded-xl", children: /* @__PURE__ */ jsx(
-      "img",
-      {
-        src: image,
-        alt: title,
-        className: "aspect-video w-full object-cover transition-transform duration-300 group-hover:scale-105"
-      }
-    ) }),
-    /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
-      tags && tags.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-1.5", children: tags.map((tag) => /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", className: "text-xs", children: tag }, tag)) }),
-      /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold leading-snug tracking-tight", children: /* @__PURE__ */ jsx(LinkWrapper, { className: "hover:text-primary transition-colors", children: title }) }),
-      description && /* @__PURE__ */ jsx("p", { className: "line-clamp-2 text-sm text-muted-foreground", children: description }),
-      /* @__PURE__ */ jsx("time", { dateTime: date, className: "text-xs text-muted-foreground", children: formatDate(date) })
+function PostCard({
+  title,
+  description,
+  date,
+  slug,
+  image,
+  tags,
+  author,
+  hrefPrefix = "/blog",
+  tagHrefPrefix = "/blog/tag",
+  renderLink
+}) {
+  const href = `${hrefPrefix}/${slug}`;
+  const LinkWrapper = ({
+    href: linkHref,
+    children,
+    className
+  }) => renderLink ? renderLink({ href: linkHref, children, className }) : /* @__PURE__ */ jsx("a", { href: linkHref, className, children });
+  return /* @__PURE__ */ jsxs("article", { className: "group relative flex flex-col items-start", children: [
+    /* @__PURE__ */ jsxs("div", { className: "relative w-full overflow-hidden rounded-2xl bg-muted", children: [
+      image ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          src: image,
+          alt: title,
+          className: "aspect-video w-full object-cover transition-transform duration-500 group-hover:scale-[1.03]"
+        }
+      ) : /* @__PURE__ */ jsx(
+        "div",
+        {
+          "aria-hidden": true,
+          className: "aspect-video w-full bg-gradient-to-br from-primary/15 via-muted to-muted"
+        }
+      ),
+      /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-0 rounded-2xl ring-1 ring-inset ring-foreground/10" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "flex w-full grow flex-col", children: [
+      /* @__PURE__ */ jsxs("div", { className: "mt-6 flex flex-wrap items-center gap-x-3 gap-y-2 text-xs", children: [
+        /* @__PURE__ */ jsx("time", { dateTime: date, className: "text-muted-foreground", children: formatDate(date) }),
+        tags?.map((tag) => /* @__PURE__ */ jsx(
+          LinkWrapper,
+          {
+            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",
+            children: tag
+          },
+          tag
+        ))
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grow", children: [
+        /* @__PURE__ */ jsx("h2", { className: "mt-3 text-lg font-semibold leading-snug tracking-tight transition-colors group-hover:text-primary", children: /* @__PURE__ */ jsxs(LinkWrapper, { href, children: [
+          /* @__PURE__ */ jsx("span", { className: "absolute inset-0", "aria-hidden": true }),
+          title
+        ] }) }),
+        description && /* @__PURE__ */ jsx("p", { className: "mt-3 line-clamp-3 text-sm leading-6 text-muted-foreground", children: description })
+      ] }),
+      author && /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-center gap-x-3", children: [
+        author.avatar ? /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: author.avatar,
+            alt: author.name,
+            className: "size-9 rounded-full bg-muted object-cover"
+          }
+        ) : /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": true,
+            className: "flex size-9 items-center justify-center rounded-full bg-muted text-sm font-semibold text-muted-foreground",
+            children: author.name.charAt(0).toUpperCase()
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "text-sm leading-tight", children: [
+          /* @__PURE__ */ jsx("p", { className: "font-semibold", children: author.name }),
+          author.role && /* @__PURE__ */ jsx("p", { className: "text-muted-foreground", children: author.role })
+        ] })
+      ] })
     ] })
   ] });
 }
-function PostList({ posts, renderLink, emptyMessage = "No posts published yet." }) {
+function PostList({
+  posts,
+  renderLink,
+  emptyMessage = "No posts published yet.",
+  columns = 3,
+  className
+}) {
   if (posts.length === 0) {
     return /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground italic", children: emptyMessage });
   }
-  return /* @__PURE__ */ jsx("div", { className: "grid gap-8 sm:grid-cols-2", children: posts.map((post) => /* @__PURE__ */ jsx(PostCard, { ...post, renderLink }, post.slug)) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn$1(
+        "grid grid-cols-1 gap-x-8 gap-y-14 sm:grid-cols-2",
+        columns === 3 && "lg:grid-cols-3",
+        className
+      ),
+      children: posts.map((post) => /* @__PURE__ */ jsx(PostCard, { ...post, renderLink }, post.slug))
+    }
+  );
 }
 var releaseTypeLabel = {
   release: "Major Release",
@@ -3828,6 +3967,6 @@ function usePagination(total, pageSize) {
   return { page, pageSize, totalPages, offset, hasPrev: page > 1, hasNext: page < totalPages, goTo, next, prev };
 }
 
-export { AnimatedPill, AppContent, AppGrid, AppGridCell, AppScreen, AppShell, AuthSection, Badge, BrandColorSwitchMinimal, Button, Card, CarouselSection, ChangelogCard, ChangelogList, Checkbox, ComparisonSection, ConfirmDialog, ContactSection, ContextMenu, CountUp, CountdownTimer, CtaCardSection, CtaSection, DevBanner, Dock, EmptyState, ErrorPage, FadeIn, FaqSection, FeatureCard, FeatureMarqueeSection, FeaturesSection, FlowBracket, FlowConnector, Footer, FullPageSpinner, GlassCard, Grid, GridItem, GroupedFeaturesSection, HeroSection, ImageCard, Input, LogoStrip, ModeSwitchMinimal, Navbar, NewsletterSection, OlwibaUIProvider, Overlay, PageHeader, PageTransition, PhoneFrame, PostCard, PostList, PricingCard, PricingSection, PublicPageFrame, QualificationSection, RegisterHotkeys, RootErrorFallback, Section, SectionTitle, Spotlight, Stack, StaggerChildren, StatCard, StatsSection, StepsSection, Suspensed, Switch, TeamSection, TechStackSection, TestimonialCard, TestimonialsSection, Textarea, ThemeColorUpdater, ThemeSwitchMinimal, Underlay, UpgradePrompt, VersionBanner, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode };
+export { AnimatedPill, AppContent, AppGrid, AppGridCell, AppScreen, AppShell, AuthSection, Badge, BrandColorSwitchMinimal, Button, Card, CarouselSection, ChangelogCard, ChangelogList, Checkbox, ComparisonSection, ConfirmDialog, ContactSection, ContextMenu, CountUp, CountdownTimer, CtaCardSection, CtaSection, DevBanner, Dock, EmptyState, ErrorPage, FadeIn, FaqSection, FeatureCard, FeatureMarqueeSection, FeaturesSection, FlowBracket, FlowConnector, Footer, FullPageSpinner, GlassCard, Grid, GridItem, GroupedFeaturesSection, HeroSection, ImageCard, Input, LogoStrip, ModeSwitchMinimal, Navbar, NewsletterSection, OlwibaUIProvider, Overlay, PageHeader, PageTransition, PhoneFrame, PostCard, PostList, PricingCard, PricingSection, PublicPageFrame, QualificationSection, RegisterHotkeys, RootErrorFallback, Section, SectionTitle, Spotlight, Stack, StaggerChildren, StatCard, StatsSection, StepsSection, Suspensed, Switch, TeamSection, TechStackSection, TestimonialCard, TestimonialsSection, Textarea, ThemeColorUpdater, ThemeSwitchMinimal, Underlay, UpgradePrompt, VersionBanner, marketingSectionSpacing, useConfirm, useControlledOpen, useCopyToClipboard, useDebounce, useIntersectionObserver, useLocalStorage, useMediaQuery, useMounted, useOlwibaUI, usePagination, useScrolledPast, useUIMode };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map