@olwiba/ui 0.1.8 → 0.1.9

package/dist/index.d.ts

@@ -715,9 +715,13 @@ interface FooterProps {
         icon: ReactNode;
     }>;
     legal?: string;
+    status?: {
+        label: string;
+        operational?: boolean;
+    };
     renderLink?: AppShellRenderLink;
 }
-declare function Footer({ brand, navLinks, socialLinks, legal, renderLink, }: FooterProps): react_jsx_runtime.JSX.Element;
+declare function Footer({ brand, navLinks, socialLinks, legal, status, renderLink, }: FooterProps): react_jsx_runtime.JSX.Element;
 
 interface LogoStripProps {
     logos: Array<{

package/dist/index.js

@@ -2,10 +2,10 @@ import { cn } from './chunk-AMWLSHD6.js';
 export { MdxContent, cn } from './chunk-AMWLSHD6.js';
 import * as React29 from 'react';
 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, 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';
+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, MapPin, MessageSquare, Send, Menu, Search, TrendingUp, TrendingDown, Sun, Moon, Palette, AlertTriangle, Loader2, Layers, LayoutGrid, ShieldCheck, Building2, MoreVerticalIcon, CreditCardIcon, BellIcon, LogOutIcon } from 'lucide-react';
+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';
 
 var OlwibaUIContext = React29.createContext({
   isMobile: false,
@@ -1289,8 +1289,7 @@ function FeatureMarqueeSection({
       /* @__PURE__ */ jsx("div", { className: "space-y-3", children: rows.map((row, i) => {
         const direction = row.direction ?? (i % 2 === 0 ? "left" : "right");
         const reversed = direction === "right";
-        const source = reversed ? [...row.items].reverse() : row.items;
-        const set = Array.from({ length: 4 }, () => source).flat();
+        const set = Array.from({ length: 4 }, () => row.items).flat();
         const items = [...set, ...set];
         return /* @__PURE__ */ jsx(
           "div",
@@ -1308,7 +1307,7 @@ function FeatureMarqueeSection({
                   pauseOnHover && "group-hover:[animation-play-state:paused]"
                 ),
                 style: {
-                  animation: `feature-marquee-left ${duration} linear infinite`
+                  animation: `${reversed ? "feature-marquee-right" : "feature-marquee-left"} ${duration} linear infinite`
                 },
                 children: items.map((item, j) => {
                   const Icon = item.icon;
@@ -1336,6 +1335,10 @@ function FeatureMarqueeSection({
           from { transform: translateX(0); }
           to { transform: translateX(-50%); }
         }
+        @keyframes feature-marquee-right {
+          from { transform: translateX(-50%); }
+          to { transform: translateX(0); }
+        }
       ` })
   ] });
 }
@@ -1996,9 +1999,13 @@ function NewsletterSection({
     ] })
   ] }) });
 }
-var defaultContactInfoResolved = [
-  { icon: Mail, label: "Email", value: "hello@olwiba.com" },
-  { icon: MapPin, label: "Base", value: "Aotearoa New Zealand" }
+var PHONE_PREFIXES = [
+  { label: "US +1", value: "+1-US" },
+  { label: "NZ +64", value: "+64-NZ" },
+  { label: "AU +61", value: "+61-AU" },
+  { label: "UK +44", value: "+44-UK" },
+  { label: "CA +1", value: "+1-CA" },
+  { label: "EU", value: "+0-EU" }
 ];
 var defaults2 = {
   badge: "Contact",
@@ -2012,7 +2019,7 @@ function ContactSection({
   badge = defaults2.badge,
   title = defaults2.title,
   description = defaults2.description,
-  contactInfo = defaultContactInfoResolved,
+  contactInfo,
   privacyHref,
   successTitle = defaults2.successTitle,
   successDescription = defaults2.successDescription,
@@ -2025,104 +2032,178 @@ function ContactSection({
     await onSubmit?.(e);
     setSubmitted(true);
   }
-  return /* @__PURE__ */ jsx("section", { className: "overflow-hidden rounded-2xl border bg-card", children: /* @__PURE__ */ jsxs("div", { className: "grid lg:grid-cols-[1fr_1.4fr]", children: [
-    /* @__PURE__ */ jsxs("div", { className: "relative overflow-hidden bg-primary px-8 py-12 text-primary-foreground", children: [
-      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_top_right,hsl(var(--primary-foreground)/0.12),transparent_55%)]" }),
-      /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-[radial-gradient(circle_at_bottom_left,hsl(var(--primary-foreground)/0.06),transparent_60%)]" }),
-      /* @__PURE__ */ jsxs("div", { className: "relative flex h-full flex-col gap-8", children: [
+  return /* @__PURE__ */ jsx("section", { className: "overflow-hidden rounded-2xl border bg-card", children: /* @__PURE__ */ jsxs("div", { className: "px-6 py-14 sm:px-10 sm:py-20", children: [
+    /* @__PURE__ */ jsxs("div", { className: "mx-auto max-w-2xl text-center", children: [
+      badge && /* @__PURE__ */ jsx("div", { className: "mb-4 flex justify-center", children: /* @__PURE__ */ jsx(Badge$1, { variant: "secondary", children: badge }) }),
+      /* @__PURE__ */ jsx("h2", { className: "text-balance text-4xl font-semibold tracking-tight sm:text-5xl", children: title }),
+      /* @__PURE__ */ jsx("p", { className: "mt-4 text-lg text-muted-foreground", children: description }),
+      contactInfo && contactInfo.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-8 flex flex-wrap justify-center gap-6", children: contactInfo.map(({ icon: Icon = Mail, label, value }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+        /* @__PURE__ */ jsx(Icon, { className: "size-4 shrink-0" }),
+        /* @__PURE__ */ jsx("span", { children: value })
+      ] }, label)) })
+    ] }),
+    submitted ? /* @__PURE__ */ jsxs("div", { className: "mx-auto mt-16 max-w-xl text-center", children: [
+      /* @__PURE__ */ jsx("div", { className: "mx-auto flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(MessageSquare, { className: "size-6" }) }),
+      /* @__PURE__ */ jsx("h3", { className: "mt-5 text-lg font-semibold", children: successTitle }),
+      /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm text-muted-foreground", children: successDescription }),
+      /* @__PURE__ */ jsx(Button$1, { variant: "outline", size: "sm", className: "mt-6", onClick: () => setSubmitted(false), children: sendAnotherLabel })
+    ] }) : /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "mx-auto mt-16 max-w-xl sm:mt-20", children: [
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          name: "_hp",
+          tabIndex: -1,
+          autoComplete: "off",
+          "aria-hidden": "true",
+          className: "hidden"
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 gap-x-8 gap-y-6 sm:grid-cols-2", children: [
         /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx(
-            Badge$1,
+          /* @__PURE__ */ jsx(Label, { htmlFor: "contact-first", className: "block text-sm/6 font-semibold", children: "First name" }),
+          /* @__PURE__ */ jsx("div", { className: "mt-2.5", children: /* @__PURE__ */ jsx(
+            Input$1,
             {
-              variant: "secondary",
-              className: "mb-4 bg-primary-foreground/15 text-primary-foreground hover:bg-primary-foreground/20",
-              children: badge
+              id: "contact-first",
+              name: "firstName",
+              autoComplete: "given-name",
+              placeholder: "First",
+              required: true
             }
-          ),
-          /* @__PURE__ */ jsx("h2", { className: "text-3xl font-semibold leading-tight", children: title }),
-          /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm leading-relaxed text-primary-foreground/70", children: description })
+          ) })
         ] }),
-        /* @__PURE__ */ jsx(Separator, { className: "bg-primary-foreground/20" }),
-        /* @__PURE__ */ jsx("div", { className: "space-y-5", children: contactInfo.map(({ icon: Icon = Mail, label, value }) => /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-          /* @__PURE__ */ jsx("div", { className: "mt-0.5 flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-primary-foreground/10", children: /* @__PURE__ */ jsx(Icon, { className: "size-4" }) }),
-          /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx("div", { className: "text-xs font-medium uppercase tracking-wider text-primary-foreground/50", children: label }),
-            /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-sm font-medium", children: value })
-          ] })
-        ] }, label)) }),
-        /* @__PURE__ */ jsx("div", { className: "mt-auto", children: /* @__PURE__ */ jsx("p", { className: "text-xs text-primary-foreground/40", children: "Response within one business day." }) })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsx("div", { className: "p-8 sm:p-10", children: submitted ? /* @__PURE__ */ jsxs("div", { className: "flex h-full min-h-[360px] flex-col items-center justify-center gap-5 text-center", children: [
-      /* @__PURE__ */ jsx("div", { className: "flex h-14 w-14 items-center justify-center rounded-2xl bg-primary/10 text-primary", children: /* @__PURE__ */ jsx(MessageSquare, { className: "size-6" }) }),
-      /* @__PURE__ */ jsxs("div", { children: [
-        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold", children: successTitle }),
-        /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-sm text-muted-foreground", children: successDescription })
-      ] }),
-      /* @__PURE__ */ jsx(Button$1, { variant: "outline", size: "sm", onClick: () => setSubmitted(false), children: sendAnotherLabel })
-    ] }) : /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: "space-y-5", children: [
-      /* @__PURE__ */ jsx("input", { type: "text", name: "_hp", tabIndex: -1, autoComplete: "off", "aria-hidden": "true", className: "hidden" }),
-      /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "contact-first", children: "First name" }),
-          /* @__PURE__ */ jsx(Input$1, { id: "contact-first", name: "firstName", placeholder: "Olivia", required: true })
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "contact-last", className: "block text-sm/6 font-semibold", children: "Last name" }),
+          /* @__PURE__ */ jsx("div", { className: "mt-2.5", children: /* @__PURE__ */ jsx(
+            Input$1,
+            {
+              id: "contact-last",
+              name: "lastName",
+              autoComplete: "family-name",
+              placeholder: "Last",
+              required: true
+            }
+          ) })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsx(Label, { htmlFor: "contact-last", children: "Last name" }),
-          /* @__PURE__ */ jsx(Input$1, { id: "contact-last", name: "lastName", placeholder: "Reed", required: true })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "grid gap-4 sm:grid-cols-2", children: [
-        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsxs(Label, { htmlFor: "contact-company", className: "flex gap-1", children: [
+        /* @__PURE__ */ jsxs("div", { className: "sm:col-span-2", children: [
+          /* @__PURE__ */ jsxs(Label, { htmlFor: "contact-company", className: "block text-sm/6 font-semibold", children: [
             "Company",
-            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "(optional)" })
+            " ",
+            /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: "(optional)" })
           ] }),
-          /* @__PURE__ */ jsx(Input$1, { id: "contact-company", name: "company", placeholder: "Acme Inc." })
+          /* @__PURE__ */ jsx("div", { className: "mt-2.5", children: /* @__PURE__ */ jsx(
+            Input$1,
+            {
+              id: "contact-company",
+              name: "company",
+              autoComplete: "organization",
+              placeholder: "Acme Inc."
+            }
+          ) })
         ] }),
-        /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-          /* @__PURE__ */ jsxs(Label, { htmlFor: "contact-phone", className: "flex gap-1", children: [
-            "Phone",
-            /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "(optional)" })
+        /* @__PURE__ */ jsxs("div", { className: "sm:col-span-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "contact-email", className: "block text-sm/6 font-semibold", children: "Email" }),
+          /* @__PURE__ */ jsx("div", { className: "mt-2.5", children: /* @__PURE__ */ jsx(
+            Input$1,
+            {
+              id: "contact-email",
+              name: "email",
+              type: "email",
+              autoComplete: "email",
+              placeholder: "you@company.com",
+              required: true
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "sm:col-span-2", children: [
+          /* @__PURE__ */ jsxs(Label, { htmlFor: "contact-phone", className: "block text-sm/6 font-semibold", children: [
+            "Phone number",
+            " ",
+            /* @__PURE__ */ jsx("span", { className: "font-normal text-muted-foreground", children: "(optional)" })
           ] }),
-          /* @__PURE__ */ jsx(Input$1, { id: "contact-phone", name: "phone", type: "tel", placeholder: "+1 (555) 000-0000" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ jsx(Label, { htmlFor: "contact-email", children: "Work email" }),
-        /* @__PURE__ */ jsx(Input$1, { id: "contact-email", name: "email", type: "email", placeholder: "olivia@company.com", required: true })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ jsx(Label, { htmlFor: "contact-subject", children: "Subject" }),
-        /* @__PURE__ */ jsx(Input$1, { id: "contact-subject", name: "subject", placeholder: "How can we help?", required: true })
-      ] }),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
-        /* @__PURE__ */ jsx(Label, { htmlFor: "contact-message", children: "Message" }),
-        /* @__PURE__ */ jsx(
-          Textarea$1,
-          {
-            id: "contact-message",
-            name: "message",
-            placeholder: "Tell us what you're working on...",
-            className: "min-h-32 resize-none",
-            required: true
-          }
-        )
-      ] }),
-      privacyHref && /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-        /* @__PURE__ */ jsx(Checkbox$1, { id: "contact-privacy", name: "privacy", required: true, className: "mt-0.5" }),
-        /* @__PURE__ */ jsxs(Label, { htmlFor: "contact-privacy", className: "text-sm font-normal leading-snug text-muted-foreground", children: [
-          "By submitting this form you agree to our",
-          " ",
-          /* @__PURE__ */ jsx("a", { href: privacyHref, className: "font-medium text-foreground underline-offset-2 hover:underline", children: "privacy policy" }),
-          "."
+          /* @__PURE__ */ jsxs("div", { className: "mt-2.5 flex overflow-hidden rounded-md border border-input bg-background focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2", children: [
+            /* @__PURE__ */ jsxs("div", { className: "relative flex shrink-0 items-center border-r border-input", children: [
+              /* @__PURE__ */ jsx(
+                "select",
+                {
+                  name: "countryCode",
+                  "aria-label": "Country code",
+                  defaultValue: "+1-US",
+                  className: "h-full appearance-none bg-transparent py-2 pl-3 pr-7 text-sm text-foreground focus:outline-none",
+                  children: PHONE_PREFIXES.map(({ label, value }) => /* @__PURE__ */ jsx("option", { value, children: label }, value))
+                }
+              ),
+              /* @__PURE__ */ jsx(ChevronDown, { className: "pointer-events-none absolute right-1.5 size-3.5 shrink-0 text-muted-foreground" })
+            ] }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: "contact-phone",
+                name: "phone",
+                type: "tel",
+                placeholder: "123-456-7890",
+                className: "min-w-0 grow bg-transparent px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "sm:col-span-2", children: [
+          /* @__PURE__ */ jsx(Label, { htmlFor: "contact-message", className: "block text-sm/6 font-semibold", children: "Message" }),
+          /* @__PURE__ */ jsx("div", { className: "mt-2.5", children: /* @__PURE__ */ jsx(
+            Textarea$1,
+            {
+              id: "contact-message",
+              name: "message",
+              rows: 4,
+              placeholder: "Tell us what you're working on...",
+              className: "resize-none",
+              required: true
+            }
+          ) })
+        ] }),
+        privacyHref && /* @__PURE__ */ jsxs("div", { className: "flex gap-x-4 sm:col-span-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "flex h-6 items-center", children: /* @__PURE__ */ jsxs("div", { className: "group relative inline-flex h-5 w-8 shrink-0 cursor-pointer rounded-full border border-input bg-muted p-px transition-colors duration-200 ease-in-out focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 has-[:checked]:border-primary has-[:checked]:bg-primary", children: [
+            /* @__PURE__ */ jsx("span", { className: "size-4 rounded-full bg-background shadow-sm transition-transform duration-200 ease-in-out group-has-[:checked]:translate-x-3" }),
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: "contact-privacy",
+                name: "privacy",
+                type: "checkbox",
+                required: true,
+                "aria-label": "Agree to privacy policy",
+                className: "absolute inset-0 size-full cursor-pointer appearance-none focus:outline-none"
+              }
+            )
+          ] }) }),
+          /* @__PURE__ */ jsxs(
+            Label,
+            {
+              htmlFor: "contact-privacy",
+              className: "cursor-pointer text-sm font-normal leading-snug text-muted-foreground",
+              children: [
+                "By selecting this, you agree to our",
+                " ",
+                /* @__PURE__ */ jsx(
+                  "a",
+                  {
+                    href: privacyHref,
+                    className: "font-medium text-foreground underline-offset-2 hover:underline",
+                    children: "privacy policy"
+                  }
+                ),
+                "."
+              ]
+            }
+          )
         ] })
       ] }),
-      /* @__PURE__ */ jsxs(Button$1, { type: "submit", className: "w-full", children: [
-        "Send message",
+      /* @__PURE__ */ jsx("div", { className: "mt-10", children: /* @__PURE__ */ jsxs(Button$1, { type: "submit", className: "w-full", children: [
+        "Let's talk",
         /* @__PURE__ */ jsx(Send, { className: "ml-2 size-4" })
-      ] })
-    ] }) })
+      ] }) })
+    ] })
   ] }) });
 }
 function ComparisonSection({
@@ -2144,8 +2225,8 @@ function ComparisonSection({
       "div",
       {
         className: cn$1(
-          "flex flex-col rounded-2xl border p-6",
-          col.highlighted ? "border-foreground bg-foreground text-background" : "border-border bg-muted/40"
+          "flex h-full flex-col rounded-2xl border p-6",
+          col.highlighted ? "border-primary bg-primary/10 ring-1 ring-primary/20" : "border-border bg-muted/40"
         ),
         children: [
           /* @__PURE__ */ jsxs("div", { className: "mb-6", children: [
@@ -2154,40 +2235,22 @@ function ComparisonSection({
               {
                 className: cn$1(
                   "text-xs font-semibold uppercase tracking-widest",
-                  col.highlighted ? "text-background/60" : "text-muted-foreground"
+                  col.highlighted ? "text-primary/80" : "text-muted-foreground"
                 ),
                 children: col.label
               }
             ),
-            /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: cn$1(
-                  "mt-2 text-2xl font-bold tracking-tight",
-                  col.highlighted ? "text-background" : "text-foreground"
-                ),
-                children: col.cost
-              }
-            ),
-            col.costDetail && /* @__PURE__ */ jsx(
-              "p",
-              {
-                className: cn$1(
-                  "mt-1 text-sm",
-                  col.highlighted ? "text-background/60" : "text-muted-foreground"
-                ),
-                children: col.costDetail
-              }
-            )
+            /* @__PURE__ */ jsx("p", { className: "mt-2 text-2xl font-bold tracking-tight text-foreground", children: col.cost }),
+            col.costDetail && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: col.costDetail })
           ] }),
           /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-3", children: col.items.map((item) => /* @__PURE__ */ jsxs("li", { className: "flex items-start gap-2.5", children: [
-            col.highlighted ? /* @__PURE__ */ jsx(Check, { className: "mt-0.5 size-4 shrink-0 text-background/70" }) : /* @__PURE__ */ jsx(Minus, { className: "mt-0.5 size-4 shrink-0 text-muted-foreground/50" }),
+            col.highlighted ? /* @__PURE__ */ jsx("span", { className: "mt-0.5 shrink-0 text-sm leading-none", children: "\u26A1" }) : /* @__PURE__ */ jsx("span", { className: "mt-0.5 shrink-0 text-sm leading-none", children: "\u274C" }),
             /* @__PURE__ */ jsx(
               "span",
               {
                 className: cn$1(
                   "text-sm leading-snug",
-                  col.highlighted ? "text-background/90" : "text-muted-foreground"
+                  col.highlighted ? "text-foreground" : "text-muted-foreground"
                 ),
                 children: item
               }
@@ -2330,6 +2393,7 @@ function Footer({
   navLinks,
   socialLinks,
   legal,
+  status,
   renderLink = defaultRenderLink9
 }) {
   const brandHref = brand.href ?? "/";
@@ -2358,7 +2422,16 @@ function Footer({
       },
       label
     )) }),
-    /* @__PURE__ */ jsx("p", { className: "mt-10 text-center text-sm/6 text-muted-foreground/70", children: copyrightText })
+    /* @__PURE__ */ jsx("p", { className: "mt-10 text-center text-sm/6 text-muted-foreground/70", children: copyrightText }),
+    status && /* @__PURE__ */ jsx("div", { className: "mt-4 flex justify-center", children: /* @__PURE__ */ jsx("div", { className: "inline-flex items-center rounded-full border bg-muted/40 px-3 py-1 text-xs text-muted-foreground", children: /* @__PURE__ */ jsx(
+      StatusIndicator,
+      {
+        pulse: status.operational !== false,
+        dotClassName: status.operational !== false ? "text-emerald-500" : "text-destructive",
+        size: "sm",
+        children: status.label
+      }
+    ) }) })
   ] }) });
 }
 var speedDuration2 = {