@shipsite.dev/components 0.2.28 → 0.2.30

package/dist/blog/BlogIndex.d.ts

@@ -1,10 +1,29 @@
 import React from 'react';
+import { type ImageSource } from '../ui/theme-image';
+interface BlogArticleAuthor {
+    name: string;
+    role: string;
+    image: string;
+}
+interface BlogArticle {
+    slug: string;
+    title: string;
+    excerpt: string;
+    category?: string;
+    date: string;
+    image: ImageSource;
+    readingTime: number;
+    href: string;
+    featured?: boolean;
+    author?: BlogArticleAuthor;
+}
 interface BlogIndexProps {
     id?: string;
     title?: string;
     description?: string;
+    articles?: BlogArticle[];
     children?: React.ReactNode;
 }
-export declare function BlogIndex({ id, title, description, children }: BlogIndexProps): import("react/jsx-runtime").JSX.Element;
+export declare function BlogIndex({ id, title, description, articles, children }: BlogIndexProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=BlogIndex.d.ts.map

package/dist/blog/BlogIndex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlogIndex.d.ts","sourceRoot":"","sources":["../../src/blog/BlogIndex.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,cAAc;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAc7E"}
+{"version":3,"file":"BlogIndex.d.ts","sourceRoot":"","sources":["../../src/blog/BlogIndex.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAc,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEjE,UAAU,iBAAiB;IACzB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,WAAW;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,WAAW,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,CAAC,EAAE,iBAAiB,CAAC;CAC5B;AAED,UAAU,cAAc;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA+DD,wBAAgB,SAAS,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAmCvF"}

package/dist/blog/BlogIndex.js

@@ -1,6 +1,24 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Section } from '../ui/section';
-export function BlogIndex({ id, title, description, children }) {
-    return (_jsx(Section, { id: id, children: _jsxs("div", { className: "container-main", children: [(title || description) && (_jsxs("div", { className: "text-center mb-12", children: [title && _jsx("h2", { className: "text-3xl md:text-4xl font-bold text-foreground mb-4", children: title }), description && _jsx("p", { className: "text-lg text-muted-foreground", children: description })] })), children] }) }));
+import { ThemeImage } from '../ui/theme-image';
+function formatDate(dateStr) {
+    try {
+        return new Date(dateStr).toLocaleDateString(undefined, {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+        });
+    }
+    catch {
+        return dateStr;
+    }
+}
+function ArticleCard({ article }) {
+    return (_jsxs("a", { href: article.href, className: "group block rounded-3xl p-2 -m-2 hover:bg-muted/50 hover:scale-[1.015] transition-all duration-300 ease-out focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring", children: [_jsx("div", { className: "aspect-[3/2] overflow-hidden rounded-2xl", children: _jsx(ThemeImage, { src: article.image, alt: article.title, className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" }) }), _jsxs("div", { className: "pt-4", children: [_jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground mb-2", children: [article.category && (_jsx("span", { className: "font-medium text-primary", children: article.category })), article.date && _jsx("time", { dateTime: article.date, children: formatDate(article.date) })] }), _jsx("h3", { className: "text-lg font-semibold leading-snug text-foreground mb-2 group-hover:text-primary transition-colors", children: article.title }), _jsx("p", { className: "text-base text-muted-foreground line-clamp-2 mb-4", children: article.excerpt }), article.author && (_jsxs("div", { className: "flex items-center gap-3", children: [article.author.image && (_jsx("img", { src: article.author.image, alt: article.author.name, className: "w-10 h-10 rounded-full object-cover" })), _jsxs("div", { children: [_jsx("div", { className: "text-sm font-medium text-foreground", children: article.author.name }), article.author.role && (_jsx("div", { className: "text-xs text-muted-foreground", children: article.author.role }))] })] }))] })] }, article.slug));
+}
+export function BlogIndex({ id, title, description, articles, children }) {
+    const featured = articles?.filter((a) => a.featured) ?? [];
+    const all = articles ?? [];
+    return (_jsx(Section, { id: id, children: _jsxs("div", { className: "container-main", children: [(title || description) && (_jsxs("div", { className: "text-center mb-12", children: [title && _jsx("h2", { className: "text-3xl md:text-4xl font-bold text-foreground mb-4", children: title }), description && _jsx("p", { className: "text-lg text-muted-foreground", children: description })] })), featured.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8 mb-12", children: featured.map((article) => (_jsx(ArticleCard, { article: article }, article.slug))) }), _jsx("hr", { className: "border-border mb-12" }), _jsx("h3", { className: "text-xl font-semibold text-foreground mb-8", children: "All Articles" })] })), all.length > 0 && (_jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8", children: all.map((article) => (_jsx(ArticleCard, { article: article }, article.slug))) })), children] }) }));
 }
 //# sourceMappingURL=BlogIndex.js.map

package/dist/blog/BlogIndex.js.map

@@ -1 +1 @@
-{"version":3,"file":"BlogIndex.js","sourceRoot":"","sources":["../../src/blog/BlogIndex.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AASxC,MAAM,UAAU,SAAS,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAkB;IAC5E,OAAO,CACL,KAAC,OAAO,IAAC,EAAE,EAAE,EAAE,YACb,eAAK,SAAS,EAAC,gBAAgB,aAC5B,CAAC,KAAK,IAAI,WAAW,CAAC,IAAI,CACzB,eAAK,SAAS,EAAC,mBAAmB,aAC/B,KAAK,IAAI,aAAI,SAAS,EAAC,qDAAqD,YAAE,KAAK,GAAM,EACzF,WAAW,IAAI,YAAG,SAAS,EAAC,+BAA+B,YAAE,WAAW,GAAK,IAC1E,CACP,EACA,QAAQ,IACL,GACE,CACX,CAAC;AACJ,CAAC"}
+{"version":3,"file":"BlogIndex.js","sourceRoot":"","sources":["../../src/blog/BlogIndex.tsx"],"names":[],"mappings":"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"}

package/dist/marketing/BentoGrid.d.ts

@@ -4,10 +4,11 @@ interface BentoItemProps {
     title: string;
     description?: string;
     image?: ImageSource;
+    visual?: string;
     span?: 1 | 2;
     children?: React.ReactNode;
 }
-export declare function BentoItem({ title, description, image, span, children }: BentoItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function BentoItem({ title, description, image, visual, span, children }: BentoItemProps): import("react/jsx-runtime").JSX.Element;
 interface BentoGridProps {
     id?: string;
     title?: string;

package/dist/marketing/BentoGrid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BentoGrid.d.ts","sourceRoot":"","sources":["../../src/marketing/BentoGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAc,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEjE,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,IAAQ,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAgB1F;AAED,UAAU,cAAc;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAc7E"}
+{"version":3,"file":"BentoGrid.d.ts","sourceRoot":"","sources":["../../src/marketing/BentoGrid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAc,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAkEjE,UAAU,cAAc;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;IACb,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,SAAS,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,IAAQ,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAwBlG;AAMD,UAAU,cAAc;IACtB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,SAAS,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,cAAc,2CAc7E"}

package/dist/marketing/BentoGrid.js

@@ -2,10 +2,34 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Section } from '../ui/section';
 import { cn } from '../lib/utils';
 import { ThemeImage } from '../ui/theme-image';
-export function BentoItem({ title, description, image, span = 1, children }) {
-    return (_jsxs("div", { className: cn('glass-1 hover:glass-2 rounded-2xl p-6 md:p-8 transition-all overflow-hidden flex flex-col', span === 2 && 'md:col-span-2'), children: [_jsx("h3", { className: "text-lg font-semibold text-foreground mb-2", children: title }), description && _jsx("p", { className: "text-sm text-muted-foreground mb-4 leading-relaxed", children: description }), image && (_jsx("div", { className: "mt-auto -mx-6 -mb-6 md:-mx-8 md:-mb-8", children: _jsx(ThemeImage, { src: image, alt: title, className: "w-full" }) })), children] }));
+/* ---------------------------------------------------------------------------
+ * Abstract visual decorations
+ * Pure CSS, theme-aware (uses `primary`), product-agnostic.
+ * -------------------------------------------------------------------------*/
+function VisualAurora() {
+    return (_jsxs("div", { className: "relative h-32 overflow-hidden rounded-xl", children: [_jsx("div", { className: "absolute -top-10 -left-10 h-36 w-36 rounded-full bg-primary/20 blur-3xl" }), _jsx("div", { className: "absolute -bottom-8 right-4 h-32 w-32 rounded-full bg-primary/30 blur-2xl" }), _jsx("div", { className: "absolute top-2 left-1/3 h-24 w-48 rounded-full bg-primary/10 blur-2xl" })] }));
+}
+function VisualOrbs() {
+    return (_jsxs("div", { className: "relative h-32 overflow-hidden", children: [_jsx("div", { className: "absolute top-1 right-6 h-24 w-24 rounded-full border border-primary/20 bg-primary/5" }), _jsx("div", { className: "absolute -bottom-2 left-10 h-20 w-20 rounded-full border border-primary/15 bg-primary/10" }), _jsx("div", { className: "absolute top-6 left-1/4 h-28 w-28 rounded-full border border-primary/10 bg-primary/5" })] }));
+}
+function VisualRings() {
+    return (_jsxs("div", { className: "relative h-32 flex items-center justify-center overflow-hidden", children: [_jsx("div", { className: "absolute h-44 w-44 rounded-full border border-primary/5" }), _jsx("div", { className: "absolute h-32 w-32 rounded-full border border-primary/10" }), _jsx("div", { className: "absolute h-20 w-20 rounded-full border border-primary/15 bg-primary/5" }), _jsx("div", { className: "absolute h-8 w-8 rounded-full bg-primary/20" })] }));
+}
+function VisualDots() {
+    const opacities = [10, 20, 5, 15, 25, 15, 5, 20, 10, 25, 10, 15, 20, 5, 20];
+    return (_jsx("div", { className: "grid grid-cols-5 gap-3 px-2 py-4", children: opacities.map((op, i) => (_jsx("div", { className: "aspect-square rounded-full bg-primary", style: { opacity: op / 100 } }, i))) }));
+}
+const bentoVisuals = {
+    aurora: VisualAurora,
+    orbs: VisualOrbs,
+    rings: VisualRings,
+    dots: VisualDots,
+};
+export function BentoItem({ title, description, image, visual, span = 1, children }) {
+    const Visual = visual ? bentoVisuals[visual] : null;
+    return (_jsxs("div", { className: cn('glass-1 hover:glass-2 rounded-2xl p-6 md:p-8 transition-all overflow-hidden flex flex-col', 'hover:-translate-y-0.5 hover:shadow-lg', span === 2 && 'md:col-span-2'), children: [_jsx("h3", { className: "text-lg md:text-xl font-semibold text-foreground mb-2", children: title }), description && _jsx("p", { className: "text-sm text-muted-foreground mb-4 leading-relaxed", children: description }), Visual && (_jsx("div", { className: "mt-auto pt-2", children: _jsx(Visual, {}) })), image && (_jsx("div", { className: "mt-auto -mx-6 -mb-6 md:-mx-8 md:-mb-8", children: _jsx(ThemeImage, { src: image, alt: title, className: "w-full" }) })), children] }));
 }
 export function BentoGrid({ id, title, description, children }) {
-    return (_jsx(Section, { id: id, children: _jsxs("div", { className: "container-main", children: [(title || description) && (_jsxs("div", { className: "text-center mb-12", children: [title && _jsx("h2", { className: "text-3xl md:text-4xl font-bold text-foreground mb-4", children: title }), description && _jsx("p", { className: "text-lg text-muted-foreground max-w-2xl mx-auto", children: description })] })), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6 auto-rows-fr", children: children })] }) }));
+    return (_jsx(Section, { id: id, children: _jsxs("div", { className: "container-main", children: [(title || description) && (_jsxs("div", { className: "text-center mb-12", children: [title && _jsx("h2", { className: "text-3xl md:text-4xl font-bold text-foreground mb-4", children: title }), description && _jsx("p", { className: "text-lg text-muted-foreground max-w-2xl mx-auto", children: description })] })), _jsx("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: children })] }) }));
 }
 //# sourceMappingURL=BentoGrid.js.map

package/dist/marketing/BentoGrid.js.map

@@ -1 +1 @@
-{"version":3,"file":"BentoGrid.js","sourceRoot":"","sources":["../../src/marketing/BentoGrid.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,UAAU,EAAoB,MAAM,mBAAmB,CAAC;AAUjE,MAAM,UAAU,SAAS,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,KAAK,EAAE,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAkB;IACzF,OAAO,CACL,eAAK,SAAS,EAAE,EAAE,CAChB,2FAA2F,EAC3F,IAAI,KAAK,CAAC,IAAI,eAAe,CAC9B,aACC,aAAI,SAAS,EAAC,4CAA4C,YAAE,KAAK,GAAM,EACtE,WAAW,IAAI,YAAG,SAAS,EAAC,oDAAoD,YAAE,WAAW,GAAK,EAClG,KAAK,IAAI,CACR,cAAK,SAAS,EAAC,uCAAuC,YACpD,KAAC,UAAU,IAAC,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAC,QAAQ,GAAG,GACrD,CACP,EACA,QAAQ,IACL,CACP,CAAC;AACJ,CAAC;AASD,MAAM,UAAU,SAAS,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAkB;IAC5E,OAAO,CACL,KAAC,OAAO,IAAC,EAAE,EAAE,EAAE,YACb,eAAK,SAAS,EAAC,gBAAgB,aAC5B,CAAC,KAAK,IAAI,WAAW,CAAC,IAAI,CACzB,eAAK,SAAS,EAAC,mBAAmB,aAC/B,KAAK,IAAI,aAAI,SAAS,EAAC,qDAAqD,YAAE,KAAK,GAAM,EACzF,WAAW,IAAI,YAAG,SAAS,EAAC,iDAAiD,YAAE,WAAW,GAAK,IAC5F,CACP,EACD,cAAK,SAAS,EAAC,oDAAoD,YAAE,QAAQ,GAAO,IAChF,GACE,CACX,CAAC;AACJ,CAAC"}
+{"version":3,"file":"BentoGrid.js","sourceRoot":"","sources":["../../src/marketing/BentoGrid.tsx"],"names":[],"mappings":"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"}

package/dist/marketing/PricingSection.d.ts

@@ -30,6 +30,6 @@ interface PricingSectionProps {
     mostPopularLabel?: string;
     children: React.ReactNode;
 }
-export declare function PricingSection({ id, title, description, monthlyLabel, yearlyLabel, mostPopularLabel, children }: PricingSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function PricingSection({ children, ...rest }: PricingSectionProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=PricingSection.d.ts.map

package/dist/marketing/PricingSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PricingSection.d.ts","sourceRoot":"","sources":["../../src/marketing/PricingSection.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6C,MAAM,OAAO,CAAC;AAMlE,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,gBAAgB,QAEnD;AAED,UAAU,kBAAkB;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,CAAC,MAAM,GAAG,OAAO,CAAC,EAAE,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,kBAAkB,QAEvD;AAED,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,uBAAuB,QAEjE;AAED,UAAU,mBAAmB;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,cAAc,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,YAAwB,EAAE,WAAsB,EAAE,gBAAiC,EAAE,QAAQ,EAAE,EAAE,mBAAmB,2CAiG5K"}
+{"version":3,"file":"PricingSection.d.ts","sourceRoot":"","sources":["../../src/marketing/PricingSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAGxD,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,gBAAgB,QAEnD;AAED,UAAU,kBAAkB;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,CAAC,MAAM,GAAG,OAAO,CAAC,EAAE,CAAC;CAC9B;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,kBAAkB,QAEvD;AAED,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,uBAAuB,QAEjE;AAED,UAAU,mBAAmB;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,mBAAmB,2CAYxE"}

package/dist/marketing/PricingSection.js

@@ -1,10 +1,6 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, Children, isValidElement } from 'react';
-import { Check } from 'lucide-react';
-import { cn } from '../lib/utils';
-import { Section } from '../ui/section';
-import { Button } from '../ui/button';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, isValidElement } from 'react';
+import { PricingSectionClient } from './PricingSectionClient';
 export function PricingPlan(_props) {
     return null;
 }
@@ -14,8 +10,7 @@ export function ComparisonRow(_props) {
 export function ComparisonCategory(_props) {
     return null;
 }
-export function PricingSection({ id, title, description, monthlyLabel = 'Monthly', yearlyLabel = 'Yearly', mostPopularLabel = 'Most Popular', children }) {
-    const [isYearly, setIsYearly] = useState(false);
+export function PricingSection({ children, ...rest }) {
     const plans = [];
     const rows = [];
     Children.forEach(children, (child) => {
@@ -28,14 +23,6 @@ export function PricingSection({ id, title, description, monthlyLabel = 'Monthly
         else if (child.type === ComparisonCategory)
             rows.push({ type: 'category', props: child.props });
     });
-    return (_jsx(Section, { id: id, children: _jsxs("div", { className: "container-main", children: [(title || description) && (_jsxs("div", { className: "text-center mb-12", children: [title && _jsx("h2", { className: "text-3xl md:text-4xl font-bold text-foreground mb-4", children: title }), description && _jsx("p", { className: "text-lg text-muted-foreground max-w-2xl mx-auto", children: description })] })), plans.some((p) => p.yearlyPrice) && (_jsxs("div", { className: "flex items-center justify-center gap-3 mb-12", children: [_jsx("span", { className: cn('text-sm font-medium', !isYearly ? 'text-foreground' : 'text-muted-foreground'), children: monthlyLabel }), _jsx("button", { onClick: () => setIsYearly(!isYearly), className: cn('relative w-12 h-6 rounded-full transition-colors', isYearly ? 'bg-primary' : 'bg-muted'), children: _jsx("span", { className: cn('absolute top-0.5 w-5 h-5 bg-background rounded-full shadow transition-transform', isYearly ? 'translate-x-6' : 'translate-x-0.5') }) }), _jsx("span", { className: cn('text-sm font-medium', isYearly ? 'text-foreground' : 'text-muted-foreground'), children: yearlyLabel })] })), _jsx("div", { className: cn('grid grid-cols-1 gap-6 mb-16', plans.length === 2 && 'md:grid-cols-2', plans.length >= 3 && 'md:grid-cols-3'), children: plans.map((plan) => (_jsxs("div", { className: cn('relative rounded-2xl p-8', plan.popular
-                            ? 'glass-4 ring-2 ring-primary shadow-xl'
-                            : 'glass-1'), children: [plan.popular && (_jsx("div", { className: "absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-primary text-primary-foreground text-xs font-medium rounded-full", children: mostPopularLabel })), _jsx("h3", { className: "text-xl font-bold mb-2 text-foreground", children: plan.name }), plan.description && _jsx("p", { className: "text-sm mb-4 text-muted-foreground", children: plan.description }), _jsx("div", { className: "mb-6", children: _jsx("span", { className: "text-4xl font-bold text-foreground", children: isYearly && plan.yearlyPrice ? plan.yearlyPrice : plan.price }) }), _jsx(Button, { asChild: true, className: "w-full", variant: plan.popular ? 'default' : 'glow', children: _jsx("a", { href: plan.cta.href, children: plan.cta.label }) }), _jsx("ul", { className: "mt-6 space-y-3", children: plan.features.map((feature) => (_jsxs("li", { className: "flex items-start gap-2 text-sm text-muted-foreground", children: [_jsx(Check, { className: "w-4 h-4 mt-0.5 shrink-0 text-primary" }), feature] }, feature))) })] }, plan.name))) }), rows.length > 0 && (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border", children: [_jsx("th", { className: "text-left py-4 pr-4 font-medium text-foreground", children: "Feature" }), plans.map((plan) => _jsx("th", { className: "text-center py-4 px-4 font-medium text-foreground", children: plan.name }, plan.name))] }) }), _jsx("tbody", { children: rows.map((row, i) => {
-                                    if (row.type === 'category') {
-                                        return _jsx("tr", { className: "bg-muted", children: _jsx("td", { colSpan: plans.length + 1, className: "py-3 px-4 font-semibold text-foreground", children: row.props.title }) }, i);
-                                    }
-                                    const r = row.props;
-                                    return (_jsxs("tr", { className: "border-b border-border", children: [_jsx("td", { className: "py-3 pr-4 text-muted-foreground", children: r.feature }), r.values.map((val, j) => (_jsx("td", { className: "text-center py-3 px-4", children: typeof val === 'boolean' ? (val ? _jsx(Check, { className: "w-5 h-5 mx-auto text-primary" }) : _jsx("span", { className: "text-muted-foreground/30", children: "\u2014" })) : _jsx("span", { className: "text-muted-foreground", children: val }) }, j)))] }, i));
-                                }) })] }) }))] }) }));
+    return _jsx(PricingSectionClient, { ...rest, plans: plans, rows: rows });
 }
 //# sourceMappingURL=PricingSection.js.map

package/dist/marketing/PricingSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"PricingSection.js","sourceRoot":"","sources":["../../src/marketing/PricingSection.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"PricingSection.js","sourceRoot":"","sources":["../../src/marketing/PricingSection.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAY9D,MAAM,UAAU,WAAW,CAAC,MAAwB;IAClD,OAAO,IAAI,CAAC;AACd,CAAC;AAOD,MAAM,UAAU,aAAa,CAAC,MAA0B;IACtD,OAAO,IAAI,CAAC;AACd,CAAC;AAMD,MAAM,UAAU,kBAAkB,CAAC,MAA+B;IAChE,OAAO,IAAI,CAAC;AACd,CAAC;AAYD,MAAM,UAAU,cAAc,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAuB;IACvE,MAAM,KAAK,GAAuB,EAAE,CAAC;IACrC,MAAM,IAAI,GAAwF,EAAE,CAAC;IAErG,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACnC,IAAI,CAAC,cAAc,CAAC,KAAK,CAAC;YAAE,OAAO;QACnC,IAAI,KAAK,CAAC,IAAI,KAAK,WAAW;YAAE,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,KAAyB,CAAC,CAAC;aACvE,IAAI,KAAK,CAAC,IAAI,KAAK,aAAa;YAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,KAA2B,EAAE,CAAC,CAAC;aACvG,IAAI,KAAK,CAAC,IAAI,KAAK,kBAAkB;YAAE,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,CAAC,KAAgC,EAAE,CAAC,CAAC;IAC7H,CAAC,CAAC,CAAC;IAEH,OAAO,KAAC,oBAAoB,OAAK,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;AACtE,CAAC"}

package/dist/marketing/PricingSectionClient.d.ts

@@ -0,0 +1,35 @@
+interface PricingPlanProps {
+    name: string;
+    price: string;
+    yearlyPrice?: string;
+    description?: string;
+    features: string[];
+    cta: {
+        label: string;
+        href: string;
+    };
+    popular?: boolean;
+}
+interface ComparisonRowProps {
+    feature: string;
+    values: (string | boolean)[];
+}
+interface ComparisonCategoryProps {
+    title: string;
+}
+interface PricingSectionClientProps {
+    id?: string;
+    title?: string;
+    description?: string;
+    monthlyLabel?: string;
+    yearlyLabel?: string;
+    mostPopularLabel?: string;
+    plans: PricingPlanProps[];
+    rows: {
+        type: 'category' | 'row';
+        props: ComparisonRowProps | ComparisonCategoryProps;
+    }[];
+}
+export declare function PricingSectionClient({ id, title, description, monthlyLabel, yearlyLabel, mostPopularLabel, plans, rows }: PricingSectionClientProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=PricingSectionClient.d.ts.map

package/dist/marketing/PricingSectionClient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PricingSectionClient.d.ts","sourceRoot":"","sources":["../../src/marketing/PricingSectionClient.tsx"],"names":[],"mappings":"AASA,UAAU,gBAAgB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,MAAM,EAAE,CAAC;IACnB,GAAG,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,UAAU,kBAAkB;IAC1B,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,CAAC,MAAM,GAAG,OAAO,CAAC,EAAE,CAAC;CAC9B;AAED,UAAU,uBAAuB;IAC/B,KAAK,EAAE,MAAM,CAAC;CACf;AAED,UAAU,yBAAyB;IACjC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,IAAI,EAAE;QAAE,IAAI,EAAE,UAAU,GAAG,KAAK,CAAC;QAAC,KAAK,EAAE,kBAAkB,GAAG,uBAAuB,CAAA;KAAE,EAAE,CAAC;CAC3F;AAED,wBAAgB,oBAAoB,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,YAAwB,EAAE,WAAsB,EAAE,gBAAiC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,yBAAyB,2CAkG3L"}

package/dist/marketing/PricingSectionClient.js

@@ -0,0 +1,21 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Check } from 'lucide-react';
+import { cn } from '../lib/utils';
+import { Section } from '../ui/section';
+import { Button } from '../ui/button';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+export function PricingSectionClient({ id, title, description, monthlyLabel = 'Monthly', yearlyLabel = 'Yearly', mostPopularLabel = 'Most Popular', plans, rows }) {
+    const [isYearly, setIsYearly] = useState(false);
+    return (_jsx(Section, { id: id, children: _jsxs("div", { className: "container-main", children: [(title || description) && (_jsxs("div", { className: "text-center mb-12", children: [title && _jsx("h2", { className: "text-3xl md:text-4xl font-bold text-foreground mb-4", children: title }), description && _jsx("p", { className: "text-lg text-muted-foreground max-w-2xl mx-auto", children: description })] })), plans.some((p) => p.yearlyPrice) && (_jsx("div", { className: "flex justify-center mb-12", children: _jsx(TabsPrimitive.Root, { defaultValue: "monthly", onValueChange: (v) => setIsYearly(v === 'yearly'), children: _jsxs(TabsPrimitive.List, { className: "inline-flex rounded-full glass-1 p-1 gap-1", children: [_jsx(TabsPrimitive.Trigger, { value: "monthly", className: "rounded-full px-5 py-2 text-sm font-medium text-muted-foreground transition-all hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-[state=active]:bg-primary data-[state=active]:text-primary-foreground", children: monthlyLabel }), _jsx(TabsPrimitive.Trigger, { value: "yearly", className: "rounded-full px-5 py-2 text-sm font-medium text-muted-foreground transition-all hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-[state=active]:bg-primary data-[state=active]:text-primary-foreground", children: yearlyLabel })] }) }) })), _jsx("div", { className: cn('grid grid-cols-1 gap-6 mb-16', plans.length === 2 && 'md:grid-cols-2', plans.length >= 3 && 'md:grid-cols-3'), children: plans.map((plan) => (_jsxs("div", { className: cn('relative rounded-2xl p-8', plan.popular
+                            ? 'glass-4 ring-2 ring-primary shadow-xl'
+                            : 'glass-1'), children: [plan.popular && (_jsx("div", { className: "absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-primary text-primary-foreground text-xs font-medium rounded-full", children: mostPopularLabel })), _jsx("h3", { className: "text-xl font-bold mb-2 text-foreground", children: plan.name }), plan.description && _jsx("p", { className: "text-sm mb-4 text-muted-foreground", children: plan.description }), _jsx("div", { className: "mb-6", children: _jsx("span", { className: "text-4xl font-bold text-foreground", children: isYearly && plan.yearlyPrice ? plan.yearlyPrice : plan.price }) }), _jsx(Button, { asChild: true, className: "w-full", variant: plan.popular ? 'default' : 'glow', children: _jsx("a", { href: plan.cta.href, children: plan.cta.label }) }), _jsx("ul", { className: "mt-6 space-y-3", children: plan.features.map((feature) => (_jsxs("li", { className: "flex items-start gap-2 text-sm text-muted-foreground", children: [_jsx(Check, { className: "w-4 h-4 mt-0.5 shrink-0 text-primary" }), feature] }, feature))) })] }, plan.name))) }), rows.length > 0 && (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-sm", children: [_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border", children: [_jsx("th", { className: "text-left py-4 pr-4 font-medium text-foreground", children: "Feature" }), plans.map((plan) => _jsx("th", { className: "text-center py-4 px-4 font-medium text-foreground", children: plan.name }, plan.name))] }) }), _jsx("tbody", { children: rows.map((row, i) => {
+                                    if (row.type === 'category') {
+                                        return _jsx("tr", { className: "bg-muted", children: _jsx("td", { colSpan: plans.length + 1, className: "py-3 px-4 font-semibold text-foreground", children: row.props.title }) }, i);
+                                    }
+                                    const r = row.props;
+                                    return (_jsxs("tr", { className: "border-b border-border", children: [_jsx("td", { className: "py-3 pr-4 text-muted-foreground", children: r.feature }), r.values.map((val, j) => (_jsx("td", { className: "text-center py-3 px-4", children: typeof val === 'boolean' ? (val ? _jsx(Check, { className: "w-5 h-5 mx-auto text-primary" }) : _jsx("span", { className: "text-muted-foreground/30", children: "\u2014" })) : _jsx("span", { className: "text-muted-foreground", children: val }) }, j)))] }, i));
+                                }) })] }) }))] }) }));
+}
+//# sourceMappingURL=PricingSectionClient.js.map

package/dist/marketing/PricingSectionClient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PricingSectionClient.js","sourceRoot":"","sources":["../../src/marketing/PricingSectionClient.tsx"],"names":[],"mappings":"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"}

package/dist/marketing/TabsSection.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { type ImageSource } from '../ui/theme-image';
+import type { ImageSource } from '../ui/theme-image';
 interface TabItemProps {
     label: string;
     title?: string;
@@ -14,6 +14,6 @@ interface TabsSectionProps {
     description?: string;
     children: React.ReactNode;
 }
-export declare function TabsSection({ id, title, description, children }: TabsSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare function TabsSection({ children, ...rest }: TabsSectionProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=TabsSection.d.ts.map

package/dist/marketing/TabsSection.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsSection.d.ts","sourceRoot":"","sources":["../../src/marketing/TabsSection.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAGxC,OAAO,EAAc,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEjE,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,OAAO,CAAC,MAAM,EAAE,YAAY,QAE3C;AAED,UAAU,gBAAgB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CA2DjF"}
+{"version":3,"file":"TabsSection.d.ts","sourceRoot":"","sources":["../../src/marketing/TabsSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmC,MAAM,OAAO,CAAC;AAExD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAErD,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,OAAO,CAAC,MAAM,EAAE,YAAY,QAE3C;AAED,UAAU,gBAAgB;IACxB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,2CASlE"}

package/dist/marketing/TabsSection.js

@@ -1,23 +1,16 @@
-'use client';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useState } from 'react';
-import { Section } from '../ui/section';
-import { cn } from '../lib/utils';
-import { ThemeImage } from '../ui/theme-image';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Children, isValidElement } from 'react';
+import { TabsSectionClient } from './TabsSectionClient';
 export function TabItem(_props) {
     return null;
 }
-export function TabsSection({ id, title, description, children }) {
-    const [activeIndex, setActiveIndex] = useState(0);
+export function TabsSection({ children, ...rest }) {
     const tabs = [];
-    React.Children.forEach(children, (child) => {
-        if (React.isValidElement(child) && child.type === TabItem) {
+    Children.forEach(children, (child) => {
+        if (isValidElement(child) && child.type === TabItem) {
             tabs.push(child.props);
         }
     });
-    const activeTab = tabs[activeIndex];
-    return (_jsx(Section, { id: id, children: _jsxs("div", { className: "container-main", children: [(title || description) && (_jsxs("div", { className: "text-center mb-12", children: [title && _jsx("h2", { className: "text-3xl md:text-4xl font-bold text-foreground mb-4", children: title }), description && _jsx("p", { className: "text-lg text-muted-foreground max-w-2xl mx-auto", children: description })] })), _jsx("div", { className: "flex justify-center mb-8", children: _jsx("div", { className: "inline-flex rounded-full glass-1 p-1 gap-1", children: tabs.map((tab, i) => (_jsx("button", { onClick: () => setActiveIndex(i), className: cn('px-4 py-2 rounded-full text-sm font-medium transition-all', i === activeIndex
-                                ? 'bg-primary text-primary-foreground'
-                                : 'text-muted-foreground hover:text-foreground'), children: tab.label }, i))) }) }), activeTab && (_jsx("div", { className: "glass-1 rounded-2xl p-8 md:p-12", children: _jsxs("div", { className: cn('grid gap-8', activeTab.image && 'md:grid-cols-2 items-center'), children: [_jsxs("div", { children: [activeTab.title && (_jsx("h3", { className: "text-2xl font-bold text-foreground mb-4", children: activeTab.title })), activeTab.description && (_jsx("p", { className: "text-muted-foreground leading-relaxed", children: activeTab.description }))] }), activeTab.image && (_jsx(ThemeImage, { src: activeTab.image, alt: activeTab.title || activeTab.label, className: "w-full rounded-xl" }))] }) }))] }) }));
+    return _jsx(TabsSectionClient, { ...rest, tabs: tabs });
 }
 //# sourceMappingURL=TabsSection.js.map

package/dist/marketing/TabsSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabsSection.js","sourceRoot":"","sources":["../../src/marketing/TabsSection.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,UAAU,EAAoB,MAAM,mBAAmB,CAAC;AAUjE,MAAM,UAAU,OAAO,CAAC,MAAoB;IAC1C,OAAO,IAAI,CAAC;AACd,CAAC;AASD,MAAM,UAAU,WAAW,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAoB;IAChF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAElD,MAAM,IAAI,GAAmB,EAAE,CAAC;IAChC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACzC,IAAI,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YAC1D,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAqB,CAAC,CAAC;QACzC,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC;IAEpC,OAAO,CACL,KAAC,OAAO,IAAC,EAAE,EAAE,EAAE,YACb,eAAK,SAAS,EAAC,gBAAgB,aAC5B,CAAC,KAAK,IAAI,WAAW,CAAC,IAAI,CACzB,eAAK,SAAS,EAAC,mBAAmB,aAC/B,KAAK,IAAI,aAAI,SAAS,EAAC,qDAAqD,YAAE,KAAK,GAAM,EACzF,WAAW,IAAI,YAAG,SAAS,EAAC,iDAAiD,YAAE,WAAW,GAAK,IAC5F,CACP,EACD,cAAK,SAAS,EAAC,0BAA0B,YACvC,cAAK,SAAS,EAAC,4CAA4C,YACxD,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CACpB,iBAEE,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,EAChC,SAAS,EAAE,EAAE,CACX,2DAA2D,EAC3D,CAAC,KAAK,WAAW;gCACf,CAAC,CAAC,oCAAoC;gCACtC,CAAC,CAAC,6CAA6C,CAClD,YAEA,GAAG,CAAC,KAAK,IATL,CAAC,CAUC,CACV,CAAC,GACE,GACF,EACL,SAAS,IAAI,CACZ,cAAK,SAAS,EAAC,iCAAiC,YAC9C,eAAK,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,KAAK,IAAI,6BAA6B,CAAC,aAChF,0BACG,SAAS,CAAC,KAAK,IAAI,CAClB,aAAI,SAAS,EAAC,yCAAyC,YAAE,SAAS,CAAC,KAAK,GAAM,CAC/E,EACA,SAAS,CAAC,WAAW,IAAI,CACxB,YAAG,SAAS,EAAC,uCAAuC,YAAE,SAAS,CAAC,WAAW,GAAK,CACjF,IACG,EACL,SAAS,CAAC,KAAK,IAAI,CAClB,KAAC,UAAU,IAAC,GAAG,EAAE,SAAS,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,EAAE,SAAS,EAAC,mBAAmB,GAAG,CAC5G,IACG,GACF,CACP,IACG,GACE,CACX,CAAC;AACJ,CAAC"}
+{"version":3,"file":"TabsSection.js","sourceRoot":"","sources":["../../src/marketing/TabsSection.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AAWxD,MAAM,UAAU,OAAO,CAAC,MAAoB;IAC1C,OAAO,IAAI,CAAC;AACd,CAAC;AASD,MAAM,UAAU,WAAW,CAAC,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAoB;IACjE,MAAM,IAAI,GAAmB,EAAE,CAAC;IAChC,QAAQ,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;QACnC,IAAI,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,OAAO,EAAE,CAAC;YACpD,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAqB,CAAC,CAAC;QACzC,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,OAAO,KAAC,iBAAiB,OAAK,IAAI,EAAE,IAAI,EAAE,IAAI,GAAI,CAAC;AACrD,CAAC"}

package/dist/marketing/TabsSectionClient.d.ts

@@ -0,0 +1,16 @@
+import { type ImageSource } from '../ui/theme-image';
+interface TabItemProps {
+    label: string;
+    title?: string;
+    description?: string;
+    image?: ImageSource;
+}
+interface TabsSectionClientProps {
+    id?: string;
+    title?: string;
+    description?: string;
+    tabs: TabItemProps[];
+}
+export declare function TabsSectionClient({ id, title, description, tabs }: TabsSectionClientProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TabsSectionClient.d.ts.map

package/dist/marketing/TabsSectionClient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsSectionClient.d.ts","sourceRoot":"","sources":["../../src/marketing/TabsSectionClient.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAc,KAAK,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAEjE,UAAU,YAAY;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,WAAW,CAAC;CACrB;AAED,UAAU,sBAAsB;IAC9B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,YAAY,EAAE,CAAC;CACtB;AAED,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,sBAAsB,2CAoDzF"}

package/dist/marketing/TabsSectionClient.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Section } from '../ui/section';
+import { cn } from '../lib/utils';
+import { ThemeImage } from '../ui/theme-image';
+export function TabsSectionClient({ id, title, description, tabs }) {
+    const [activeIndex, setActiveIndex] = useState(0);
+    const activeTab = tabs[activeIndex];
+    return (_jsx(Section, { id: id, children: _jsxs("div", { className: "container-main", children: [(title || description) && (_jsxs("div", { className: "text-center mb-12", children: [title && _jsx("h2", { className: "text-3xl md:text-4xl font-bold text-foreground mb-4", children: title }), description && _jsx("p", { className: "text-lg text-muted-foreground max-w-2xl mx-auto", children: description })] })), _jsx("div", { className: "flex justify-center mb-8", children: _jsx("div", { className: "inline-flex rounded-full glass-1 p-1 gap-1", children: tabs.map((tab, i) => (_jsx("button", { onClick: () => setActiveIndex(i), className: cn('px-4 py-2 rounded-full text-sm font-medium transition-all', i === activeIndex
+                                ? 'bg-primary text-primary-foreground'
+                                : 'text-muted-foreground hover:text-foreground'), children: tab.label }, i))) }) }), activeTab && (_jsx("div", { className: "glass-1 rounded-2xl p-8 md:p-12", children: _jsxs("div", { className: cn('grid gap-8', activeTab.image && 'md:grid-cols-2 items-center'), children: [_jsxs("div", { children: [activeTab.title && (_jsx("h3", { className: "text-2xl font-bold text-foreground mb-4", children: activeTab.title })), activeTab.description && (_jsx("p", { className: "text-muted-foreground leading-relaxed", children: activeTab.description }))] }), activeTab.image && (_jsx(ThemeImage, { src: activeTab.image, alt: activeTab.title || activeTab.label, className: "w-full rounded-xl" }))] }) }))] }) }));
+}
+//# sourceMappingURL=TabsSectionClient.js.map

package/dist/marketing/TabsSectionClient.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TabsSectionClient.js","sourceRoot":"","sources":["../../src/marketing/TabsSectionClient.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,UAAU,EAAoB,MAAM,mBAAmB,CAAC;AAgBjE,MAAM,UAAU,iBAAiB,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,IAAI,EAA0B;IACxF,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAElD,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,CAAC,CAAC;IAEpC,OAAO,CACL,KAAC,OAAO,IAAC,EAAE,EAAE,EAAE,YACb,eAAK,SAAS,EAAC,gBAAgB,aAC5B,CAAC,KAAK,IAAI,WAAW,CAAC,IAAI,CACzB,eAAK,SAAS,EAAC,mBAAmB,aAC/B,KAAK,IAAI,aAAI,SAAS,EAAC,qDAAqD,YAAE,KAAK,GAAM,EACzF,WAAW,IAAI,YAAG,SAAS,EAAC,iDAAiD,YAAE,WAAW,GAAK,IAC5F,CACP,EACD,cAAK,SAAS,EAAC,0BAA0B,YACvC,cAAK,SAAS,EAAC,4CAA4C,YACxD,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CACpB,iBAEE,OAAO,EAAE,GAAG,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC,EAChC,SAAS,EAAE,EAAE,CACX,2DAA2D,EAC3D,CAAC,KAAK,WAAW;gCACf,CAAC,CAAC,oCAAoC;gCACtC,CAAC,CAAC,6CAA6C,CAClD,YAEA,GAAG,CAAC,KAAK,IATL,CAAC,CAUC,CACV,CAAC,GACE,GACF,EACL,SAAS,IAAI,CACZ,cAAK,SAAS,EAAC,iCAAiC,YAC9C,eAAK,SAAS,EAAE,EAAE,CAAC,YAAY,EAAE,SAAS,CAAC,KAAK,IAAI,6BAA6B,CAAC,aAChF,0BACG,SAAS,CAAC,KAAK,IAAI,CAClB,aAAI,SAAS,EAAC,yCAAyC,YAAE,SAAS,CAAC,KAAK,GAAM,CAC/E,EACA,SAAS,CAAC,WAAW,IAAI,CACxB,YAAG,SAAS,EAAC,uCAAuC,YAAE,SAAS,CAAC,WAAW,GAAK,CACjF,IACG,EACL,SAAS,CAAC,KAAK,IAAI,CAClB,KAAC,UAAU,IAAC,GAAG,EAAE,SAAS,CAAC,KAAK,EAAE,GAAG,EAAE,SAAS,CAAC,KAAK,IAAI,SAAS,CAAC,KAAK,EAAE,SAAS,EAAC,mBAAmB,GAAG,CAC5G,IACG,GACF,CACP,IACG,GACE,CACX,CAAC;AACJ,CAAC"}

package/dist/ui/tabs.d.ts

@@ -0,0 +1,8 @@
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+declare const Tabs: React.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React.RefAttributes<HTMLDivElement>>;
+declare function TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>): import("react/jsx-runtime").JSX.Element;
+declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export { Tabs, TabsContent, TabsList, TabsTrigger };
+//# sourceMappingURL=tabs.d.ts.map

package/dist/ui/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/ui/tabs.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AACtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,QAAA,MAAM,IAAI,gGAAqB,CAAC;AAEhC,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,IAAI,CAAC,2CAQjD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,2CAWpD;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,aAAa,CAAC,OAAO,CAAC,2CAWpD;AAED,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC"}

package/dist/ui/tabs.js

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "../lib/utils";
+const Tabs = TabsPrimitive.Root;
+function TabsList({ className, ...props }) {
+    return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", className: cn("text-muted-foreground flex items-center", className), ...props }));
+}
+function TabsTrigger({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn("data-[state=active]:glass-4 ring-offset-background hover:bg-accent/50 hover:text-accent-foreground focus-visible:ring-ring data-[state=active]:text-foreground flex flex-col gap-3 rounded-md border border-transparent px-5 pt-4 pb-6 text-left text-sm font-medium transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-xl dark:border-b-0", className), ...props }));
+}
+function TabsContent({ className, ...props }) {
+    return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("border-border dark:border-border/20 bg-input/30 ring-offset-background focus-visible:ring-ring dark:bg-card relative overflow-hidden rounded-lg border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", className), ...props }));
+}
+export { Tabs, TabsContent, TabsList, TabsTrigger };
+//# sourceMappingURL=tabs.js.map

package/dist/ui/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.js","sourceRoot":"","sources":["../../src/ui/tabs.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,OAAO,KAAK,aAAa,MAAM,sBAAsB,CAAC;AAGtD,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAElC,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC;AAEhC,SAAS,QAAQ,CAAC,EAChB,SAAS,EACT,GAAG,KAAK,EACwC;IAChD,OAAO,CACL,KAAC,aAAa,CAAC,IAAI,iBACP,WAAW,EACrB,SAAS,EAAE,EAAE,CAAC,yCAAyC,EAAE,SAAS,CAAC,KAC/D,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EAC2C;IACnD,OAAO,CACL,KAAC,aAAa,CAAC,OAAO,iBACV,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,kcAAkc,EAClc,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,SAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EAC2C;IACnD,OAAO,CACL,KAAC,aAAa,CAAC,OAAO,iBACV,cAAc,EACxB,SAAS,EAAE,EAAE,CACX,sOAAsO,EACtO,SAAS,CACV,KACG,KAAK,GACT,CACH,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shipsite.dev/components",
-  "version": "0.2.28",
+  "version": "0.2.30",
   "repository": {
     "type": "git",
     "url": "https://github.com/shipsite/shipsite",
@@ -37,6 +37,7 @@
     "@radix-ui/react-accordion": "^1.2.3",
     "@radix-ui/react-dialog": "^1.1.6",
     "@radix-ui/react-slot": "^1.2.0",
+    "@radix-ui/react-tabs": "^1.1.13",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "lucide-react": "^0.475.0",
@@ -46,10 +47,10 @@
     "tailwind-merge": "^3.0.2"
   },
   "devDependencies": {
-    "typescript": "^5.8.3",
-    "@types/react": "^19",
     "@types/node": "^20",
-    "tailwindcss": "^4"
+    "@types/react": "^19",
+    "tailwindcss": "^4",
+    "typescript": "^5.8.3"
   },
   "peerDependencies": {
     "next": ">=15"

package/src/blog/BlogIndex.tsx

@@ -1,14 +1,99 @@
 import React from 'react';
 import { Section } from '../ui/section';
+import { ThemeImage, type ImageSource } from '../ui/theme-image';
+
+interface BlogArticleAuthor {
+  name: string;
+  role: string;
+  image: string;
+}
+
+interface BlogArticle {
+  slug: string;
+  title: string;
+  excerpt: string;
+  category?: string;
+  date: string;
+  image: ImageSource;
+  readingTime: number;
+  href: string;
+  featured?: boolean;
+  author?: BlogArticleAuthor;
+}
 
 interface BlogIndexProps {
   id?: string;
   title?: string;
   description?: string;
+  articles?: BlogArticle[];
   children?: React.ReactNode;
 }
 
-export function BlogIndex({ id, title, description, children }: BlogIndexProps) {
+function formatDate(dateStr: string): string {
+  try {
+    return new Date(dateStr).toLocaleDateString(undefined, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    });
+  } catch {
+    return dateStr;
+  }
+}
+
+function ArticleCard({ article }: { article: BlogArticle }) {
+  return (
+    <a
+      key={article.slug}
+      href={article.href}
+      className="group block rounded-3xl p-2 -m-2 hover:bg-muted/50 hover:scale-[1.015] transition-all duration-300 ease-out focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring"
+    >
+      <div className="aspect-[3/2] overflow-hidden rounded-2xl">
+        <ThemeImage
+          src={article.image}
+          alt={article.title}
+          className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
+        />
+      </div>
+      <div className="pt-4">
+        <div className="flex items-center justify-between text-sm text-muted-foreground mb-2">
+          {article.category && (
+            <span className="font-medium text-primary">{article.category}</span>
+          )}
+          {article.date && <time dateTime={article.date}>{formatDate(article.date)}</time>}
+        </div>
+        <h3 className="text-lg font-semibold leading-snug text-foreground mb-2 group-hover:text-primary transition-colors">
+          {article.title}
+        </h3>
+        <p className="text-base text-muted-foreground line-clamp-2 mb-4">
+          {article.excerpt}
+        </p>
+        {article.author && (
+          <div className="flex items-center gap-3">
+            {article.author.image && (
+              <img
+                src={article.author.image}
+                alt={article.author.name}
+                className="w-10 h-10 rounded-full object-cover"
+              />
+            )}
+            <div>
+              <div className="text-sm font-medium text-foreground">{article.author.name}</div>
+              {article.author.role && (
+                <div className="text-xs text-muted-foreground">{article.author.role}</div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </a>
+  );
+}
+
+export function BlogIndex({ id, title, description, articles, children }: BlogIndexProps) {
+  const featured = articles?.filter((a) => a.featured) ?? [];
+  const all = articles ?? [];
+
   return (
     <Section id={id}>
       <div className="container-main">
@@ -18,6 +103,24 @@ export function BlogIndex({ id, title, description, children }: BlogIndexProps)
             {description && <p className="text-lg text-muted-foreground">{description}</p>}
           </div>
         )}
+        {featured.length > 0 && (
+          <>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-8 mb-12">
+              {featured.map((article) => (
+                <ArticleCard key={article.slug} article={article} />
+              ))}
+            </div>
+            <hr className="border-border mb-12" />
+            <h3 className="text-xl font-semibold text-foreground mb-8">All Articles</h3>
+          </>
+        )}
+        {all.length > 0 && (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+            {all.map((article) => (
+              <ArticleCard key={article.slug} article={article} />
+            ))}
+          </div>
+        )}
         {children}
       </div>
     </Section>

package/src/marketing/BentoGrid.tsx

@@ -3,22 +3,95 @@ import { Section } from '../ui/section';
 import { cn } from '../lib/utils';
 import { ThemeImage, type ImageSource } from '../ui/theme-image';
 
+/* ---------------------------------------------------------------------------
+ * Abstract visual decorations
+ * Pure CSS, theme-aware (uses `primary`), product-agnostic.
+ * -------------------------------------------------------------------------*/
+
+function VisualAurora() {
+  return (
+    <div className="relative h-32 overflow-hidden rounded-xl">
+      <div className="absolute -top-10 -left-10 h-36 w-36 rounded-full bg-primary/20 blur-3xl" />
+      <div className="absolute -bottom-8 right-4 h-32 w-32 rounded-full bg-primary/30 blur-2xl" />
+      <div className="absolute top-2 left-1/3 h-24 w-48 rounded-full bg-primary/10 blur-2xl" />
+    </div>
+  );
+}
+
+function VisualOrbs() {
+  return (
+    <div className="relative h-32 overflow-hidden">
+      <div className="absolute top-1 right-6 h-24 w-24 rounded-full border border-primary/20 bg-primary/5" />
+      <div className="absolute -bottom-2 left-10 h-20 w-20 rounded-full border border-primary/15 bg-primary/10" />
+      <div className="absolute top-6 left-1/4 h-28 w-28 rounded-full border border-primary/10 bg-primary/5" />
+    </div>
+  );
+}
+
+function VisualRings() {
+  return (
+    <div className="relative h-32 flex items-center justify-center overflow-hidden">
+      <div className="absolute h-44 w-44 rounded-full border border-primary/5" />
+      <div className="absolute h-32 w-32 rounded-full border border-primary/10" />
+      <div className="absolute h-20 w-20 rounded-full border border-primary/15 bg-primary/5" />
+      <div className="absolute h-8 w-8 rounded-full bg-primary/20" />
+    </div>
+  );
+}
+
+function VisualDots() {
+  const opacities = [10, 20, 5, 15, 25, 15, 5, 20, 10, 25, 10, 15, 20, 5, 20];
+  return (
+    <div className="grid grid-cols-5 gap-3 px-2 py-4">
+      {opacities.map((op, i) => (
+        <div
+          key={i}
+          className="aspect-square rounded-full bg-primary"
+          style={{ opacity: op / 100 }}
+        />
+      ))}
+    </div>
+  );
+}
+
+type BentoVisual = 'aurora' | 'orbs' | 'rings' | 'dots';
+
+const bentoVisuals: Record<BentoVisual, React.FC> = {
+  aurora: VisualAurora,
+  orbs: VisualOrbs,
+  rings: VisualRings,
+  dots: VisualDots,
+};
+
+/* ---------------------------------------------------------------------------
+ * BentoItem
+ * -------------------------------------------------------------------------*/
+
 interface BentoItemProps {
   title: string;
   description?: string;
   image?: ImageSource;
+  visual?: string;
   span?: 1 | 2;
   children?: React.ReactNode;
 }
 
-export function BentoItem({ title, description, image, span = 1, children }: BentoItemProps) {
+export function BentoItem({ title, description, image, visual, span = 1, children }: BentoItemProps) {
+  const Visual = visual ? bentoVisuals[visual as BentoVisual] : null;
+
   return (
     <div className={cn(
       'glass-1 hover:glass-2 rounded-2xl p-6 md:p-8 transition-all overflow-hidden flex flex-col',
+      'hover:-translate-y-0.5 hover:shadow-lg',
       span === 2 && 'md:col-span-2',
     )}>
-      <h3 className="text-lg font-semibold text-foreground mb-2">{title}</h3>
+      <h3 className="text-lg md:text-xl font-semibold text-foreground mb-2">{title}</h3>
       {description && <p className="text-sm text-muted-foreground mb-4 leading-relaxed">{description}</p>}
+      {Visual && (
+        <div className="mt-auto pt-2">
+          <Visual />
+        </div>
+      )}
       {image && (
         <div className="mt-auto -mx-6 -mb-6 md:-mx-8 md:-mb-8">
           <ThemeImage src={image} alt={title} className="w-full" />
@@ -29,6 +102,10 @@ export function BentoItem({ title, description, image, span = 1, children }: Ben
   );
 }
 
+/* ---------------------------------------------------------------------------
+ * BentoGrid
+ * -------------------------------------------------------------------------*/
+
 interface BentoGridProps {
   id?: string;
   title?: string;
@@ -46,7 +123,7 @@ export function BentoGrid({ id, title, description, children }: BentoGridProps)
             {description && <p className="text-lg text-muted-foreground max-w-2xl mx-auto">{description}</p>}
           </div>
         )}
-        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 auto-rows-fr">{children}</div>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-4">{children}</div>
       </div>
     </Section>
   );

package/src/marketing/PricingSection.tsx

@@ -1,10 +1,5 @@
-'use client';
-
-import React, { useState, Children, isValidElement } from 'react';
-import { Check } from 'lucide-react';
-import { cn } from '../lib/utils';
-import { Section } from '../ui/section';
-import { Button } from '../ui/button';
+import React, { Children, isValidElement } from 'react';
+import { PricingSectionClient } from './PricingSectionClient';
 
 interface PricingPlanProps {
   name: string;
@@ -47,9 +42,7 @@ interface PricingSectionProps {
   children: React.ReactNode;
 }
 
-export function PricingSection({ id, title, description, monthlyLabel = 'Monthly', yearlyLabel = 'Yearly', mostPopularLabel = 'Most Popular', children }: PricingSectionProps) {
-  const [isYearly, setIsYearly] = useState(false);
-
+export function PricingSection({ children, ...rest }: PricingSectionProps) {
   const plans: PricingPlanProps[] = [];
   const rows: { type: 'category' | 'row'; props: ComparisonRowProps | ComparisonCategoryProps }[] = [];
 
@@ -60,88 +53,5 @@ export function PricingSection({ id, title, description, monthlyLabel = 'Monthly
     else if (child.type === ComparisonCategory) rows.push({ type: 'category', props: child.props as ComparisonCategoryProps });
   });
 
-  return (
-    <Section id={id}>
-      <div className="container-main">
-        {(title || description) && (
-          <div className="text-center mb-12">
-            {title && <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">{title}</h2>}
-            {description && <p className="text-lg text-muted-foreground max-w-2xl mx-auto">{description}</p>}
-          </div>
-        )}
-
-        {plans.some((p) => p.yearlyPrice) && (
-          <div className="flex items-center justify-center gap-3 mb-12">
-            <span className={cn('text-sm font-medium', !isYearly ? 'text-foreground' : 'text-muted-foreground')}>{monthlyLabel}</span>
-            <button onClick={() => setIsYearly(!isYearly)} className={cn('relative w-12 h-6 rounded-full transition-colors', isYearly ? 'bg-primary' : 'bg-muted')}>
-              <span className={cn('absolute top-0.5 w-5 h-5 bg-background rounded-full shadow transition-transform', isYearly ? 'translate-x-6' : 'translate-x-0.5')} />
-            </button>
-            <span className={cn('text-sm font-medium', isYearly ? 'text-foreground' : 'text-muted-foreground')}>{yearlyLabel}</span>
-          </div>
-        )}
-
-        <div className={cn('grid grid-cols-1 gap-6 mb-16', plans.length === 2 && 'md:grid-cols-2', plans.length >= 3 && 'md:grid-cols-3')}>
-          {plans.map((plan) => (
-            <div key={plan.name} className={cn(
-              'relative rounded-2xl p-8',
-              plan.popular
-                ? 'glass-4 ring-2 ring-primary shadow-xl'
-                : 'glass-1'
-            )}>
-              {plan.popular && (
-                <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-primary text-primary-foreground text-xs font-medium rounded-full">{mostPopularLabel}</div>
-              )}
-              <h3 className="text-xl font-bold mb-2 text-foreground">{plan.name}</h3>
-              {plan.description && <p className="text-sm mb-4 text-muted-foreground">{plan.description}</p>}
-              <div className="mb-6">
-                <span className="text-4xl font-bold text-foreground">{isYearly && plan.yearlyPrice ? plan.yearlyPrice : plan.price}</span>
-              </div>
-              <Button asChild className="w-full" variant={plan.popular ? 'default' : 'glow'}>
-                <a href={plan.cta.href}>{plan.cta.label}</a>
-              </Button>
-              <ul className="mt-6 space-y-3">
-                {plan.features.map((feature) => (
-                  <li key={feature} className="flex items-start gap-2 text-sm text-muted-foreground">
-                    <Check className="w-4 h-4 mt-0.5 shrink-0 text-primary" />
-                    {feature}
-                  </li>
-                ))}
-              </ul>
-            </div>
-          ))}
-        </div>
-
-        {rows.length > 0 && (
-          <div className="overflow-x-auto">
-            <table className="w-full text-sm">
-              <thead>
-                <tr className="border-b border-border">
-                  <th className="text-left py-4 pr-4 font-medium text-foreground">Feature</th>
-                  {plans.map((plan) => <th key={plan.name} className="text-center py-4 px-4 font-medium text-foreground">{plan.name}</th>)}
-                </tr>
-              </thead>
-              <tbody>
-                {rows.map((row, i) => {
-                  if (row.type === 'category') {
-                    return <tr key={i} className="bg-muted"><td colSpan={plans.length + 1} className="py-3 px-4 font-semibold text-foreground">{(row.props as ComparisonCategoryProps).title}</td></tr>;
-                  }
-                  const r = row.props as ComparisonRowProps;
-                  return (
-                    <tr key={i} className="border-b border-border">
-                      <td className="py-3 pr-4 text-muted-foreground">{r.feature}</td>
-                      {r.values.map((val, j) => (
-                        <td key={j} className="text-center py-3 px-4">
-                          {typeof val === 'boolean' ? (val ? <Check className="w-5 h-5 mx-auto text-primary" /> : <span className="text-muted-foreground/30">&mdash;</span>) : <span className="text-muted-foreground">{val}</span>}
-                        </td>
-                      ))}
-                    </tr>
-                  );
-                })}
-              </tbody>
-            </table>
-          </div>
-        )}
-      </div>
-    </Section>
-  );
+  return <PricingSectionClient {...rest} plans={plans} rows={rows} />;
 }

package/src/marketing/PricingSectionClient.tsx

@@ -0,0 +1,138 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Check } from 'lucide-react';
+import { cn } from '../lib/utils';
+import { Section } from '../ui/section';
+import { Button } from '../ui/button';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+
+interface PricingPlanProps {
+  name: string;
+  price: string;
+  yearlyPrice?: string;
+  description?: string;
+  features: string[];
+  cta: { label: string; href: string };
+  popular?: boolean;
+}
+
+interface ComparisonRowProps {
+  feature: string;
+  values: (string | boolean)[];
+}
+
+interface ComparisonCategoryProps {
+  title: string;
+}
+
+interface PricingSectionClientProps {
+  id?: string;
+  title?: string;
+  description?: string;
+  monthlyLabel?: string;
+  yearlyLabel?: string;
+  mostPopularLabel?: string;
+  plans: PricingPlanProps[];
+  rows: { type: 'category' | 'row'; props: ComparisonRowProps | ComparisonCategoryProps }[];
+}
+
+export function PricingSectionClient({ id, title, description, monthlyLabel = 'Monthly', yearlyLabel = 'Yearly', mostPopularLabel = 'Most Popular', plans, rows }: PricingSectionClientProps) {
+  const [isYearly, setIsYearly] = useState(false);
+
+  return (
+    <Section id={id}>
+      <div className="container-main">
+        {(title || description) && (
+          <div className="text-center mb-12">
+            {title && <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">{title}</h2>}
+            {description && <p className="text-lg text-muted-foreground max-w-2xl mx-auto">{description}</p>}
+          </div>
+        )}
+
+        {plans.some((p) => p.yearlyPrice) && (
+          <div className="flex justify-center mb-12">
+            <TabsPrimitive.Root defaultValue="monthly" onValueChange={(v) => setIsYearly(v === 'yearly')}>
+              <TabsPrimitive.List className="inline-flex rounded-full glass-1 p-1 gap-1">
+                <TabsPrimitive.Trigger
+                  value="monthly"
+                  className="rounded-full px-5 py-2 text-sm font-medium text-muted-foreground transition-all hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
+                >
+                  {monthlyLabel}
+                </TabsPrimitive.Trigger>
+                <TabsPrimitive.Trigger
+                  value="yearly"
+                  className="rounded-full px-5 py-2 text-sm font-medium text-muted-foreground transition-all hover:text-foreground focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring data-[state=active]:bg-primary data-[state=active]:text-primary-foreground"
+                >
+                  {yearlyLabel}
+                </TabsPrimitive.Trigger>
+              </TabsPrimitive.List>
+            </TabsPrimitive.Root>
+          </div>
+        )}
+
+        <div className={cn('grid grid-cols-1 gap-6 mb-16', plans.length === 2 && 'md:grid-cols-2', plans.length >= 3 && 'md:grid-cols-3')}>
+          {plans.map((plan) => (
+            <div key={plan.name} className={cn(
+              'relative rounded-2xl p-8',
+              plan.popular
+                ? 'glass-4 ring-2 ring-primary shadow-xl'
+                : 'glass-1'
+            )}>
+              {plan.popular && (
+                <div className="absolute -top-3 left-1/2 -translate-x-1/2 px-3 py-1 bg-primary text-primary-foreground text-xs font-medium rounded-full">{mostPopularLabel}</div>
+              )}
+              <h3 className="text-xl font-bold mb-2 text-foreground">{plan.name}</h3>
+              {plan.description && <p className="text-sm mb-4 text-muted-foreground">{plan.description}</p>}
+              <div className="mb-6">
+                <span className="text-4xl font-bold text-foreground">{isYearly && plan.yearlyPrice ? plan.yearlyPrice : plan.price}</span>
+              </div>
+              <Button asChild className="w-full" variant={plan.popular ? 'default' : 'glow'}>
+                <a href={plan.cta.href}>{plan.cta.label}</a>
+              </Button>
+              <ul className="mt-6 space-y-3">
+                {plan.features.map((feature) => (
+                  <li key={feature} className="flex items-start gap-2 text-sm text-muted-foreground">
+                    <Check className="w-4 h-4 mt-0.5 shrink-0 text-primary" />
+                    {feature}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+
+        {rows.length > 0 && (
+          <div className="overflow-x-auto">
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-border">
+                  <th className="text-left py-4 pr-4 font-medium text-foreground">Feature</th>
+                  {plans.map((plan) => <th key={plan.name} className="text-center py-4 px-4 font-medium text-foreground">{plan.name}</th>)}
+                </tr>
+              </thead>
+              <tbody>
+                {rows.map((row, i) => {
+                  if (row.type === 'category') {
+                    return <tr key={i} className="bg-muted"><td colSpan={plans.length + 1} className="py-3 px-4 font-semibold text-foreground">{(row.props as ComparisonCategoryProps).title}</td></tr>;
+                  }
+                  const r = row.props as ComparisonRowProps;
+                  return (
+                    <tr key={i} className="border-b border-border">
+                      <td className="py-3 pr-4 text-muted-foreground">{r.feature}</td>
+                      {r.values.map((val, j) => (
+                        <td key={j} className="text-center py-3 px-4">
+                          {typeof val === 'boolean' ? (val ? <Check className="w-5 h-5 mx-auto text-primary" /> : <span className="text-muted-foreground/30">&mdash;</span>) : <span className="text-muted-foreground">{val}</span>}
+                        </td>
+                      ))}
+                    </tr>
+                  );
+                })}
+              </tbody>
+            </table>
+          </div>
+        )}
+      </div>
+    </Section>
+  );
+}

package/src/marketing/TabsSection.tsx

@@ -1,9 +1,6 @@
-'use client';
-
-import React, { useState } from 'react';
-import { Section } from '../ui/section';
-import { cn } from '../lib/utils';
-import { ThemeImage, type ImageSource } from '../ui/theme-image';
+import React, { Children, isValidElement } from 'react';
+import { TabsSectionClient } from './TabsSectionClient';
+import type { ImageSource } from '../ui/theme-image';
 
 interface TabItemProps {
   label: string;
@@ -24,63 +21,13 @@ interface TabsSectionProps {
   children: React.ReactNode;
 }
 
-export function TabsSection({ id, title, description, children }: TabsSectionProps) {
-  const [activeIndex, setActiveIndex] = useState(0);
-
+export function TabsSection({ children, ...rest }: TabsSectionProps) {
   const tabs: TabItemProps[] = [];
-  React.Children.forEach(children, (child) => {
-    if (React.isValidElement(child) && child.type === TabItem) {
+  Children.forEach(children, (child) => {
+    if (isValidElement(child) && child.type === TabItem) {
       tabs.push(child.props as TabItemProps);
     }
   });
 
-  const activeTab = tabs[activeIndex];
-
-  return (
-    <Section id={id}>
-      <div className="container-main">
-        {(title || description) && (
-          <div className="text-center mb-12">
-            {title && <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">{title}</h2>}
-            {description && <p className="text-lg text-muted-foreground max-w-2xl mx-auto">{description}</p>}
-          </div>
-        )}
-        <div className="flex justify-center mb-8">
-          <div className="inline-flex rounded-full glass-1 p-1 gap-1">
-            {tabs.map((tab, i) => (
-              <button
-                key={i}
-                onClick={() => setActiveIndex(i)}
-                className={cn(
-                  'px-4 py-2 rounded-full text-sm font-medium transition-all',
-                  i === activeIndex
-                    ? 'bg-primary text-primary-foreground'
-                    : 'text-muted-foreground hover:text-foreground',
-                )}
-              >
-                {tab.label}
-              </button>
-            ))}
-          </div>
-        </div>
-        {activeTab && (
-          <div className="glass-1 rounded-2xl p-8 md:p-12">
-            <div className={cn('grid gap-8', activeTab.image && 'md:grid-cols-2 items-center')}>
-              <div>
-                {activeTab.title && (
-                  <h3 className="text-2xl font-bold text-foreground mb-4">{activeTab.title}</h3>
-                )}
-                {activeTab.description && (
-                  <p className="text-muted-foreground leading-relaxed">{activeTab.description}</p>
-                )}
-              </div>
-              {activeTab.image && (
-                <ThemeImage src={activeTab.image} alt={activeTab.title || activeTab.label} className="w-full rounded-xl" />
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-    </Section>
-  );
+  return <TabsSectionClient {...rest} tabs={tabs} />;
 }

package/src/marketing/TabsSectionClient.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import React, { useState } from 'react';
+import { Section } from '../ui/section';
+import { cn } from '../lib/utils';
+import { ThemeImage, type ImageSource } from '../ui/theme-image';
+
+interface TabItemProps {
+  label: string;
+  title?: string;
+  description?: string;
+  image?: ImageSource;
+}
+
+interface TabsSectionClientProps {
+  id?: string;
+  title?: string;
+  description?: string;
+  tabs: TabItemProps[];
+}
+
+export function TabsSectionClient({ id, title, description, tabs }: TabsSectionClientProps) {
+  const [activeIndex, setActiveIndex] = useState(0);
+
+  const activeTab = tabs[activeIndex];
+
+  return (
+    <Section id={id}>
+      <div className="container-main">
+        {(title || description) && (
+          <div className="text-center mb-12">
+            {title && <h2 className="text-3xl md:text-4xl font-bold text-foreground mb-4">{title}</h2>}
+            {description && <p className="text-lg text-muted-foreground max-w-2xl mx-auto">{description}</p>}
+          </div>
+        )}
+        <div className="flex justify-center mb-8">
+          <div className="inline-flex rounded-full glass-1 p-1 gap-1">
+            {tabs.map((tab, i) => (
+              <button
+                key={i}
+                onClick={() => setActiveIndex(i)}
+                className={cn(
+                  'px-4 py-2 rounded-full text-sm font-medium transition-all',
+                  i === activeIndex
+                    ? 'bg-primary text-primary-foreground'
+                    : 'text-muted-foreground hover:text-foreground',
+                )}
+              >
+                {tab.label}
+              </button>
+            ))}
+          </div>
+        </div>
+        {activeTab && (
+          <div className="glass-1 rounded-2xl p-8 md:p-12">
+            <div className={cn('grid gap-8', activeTab.image && 'md:grid-cols-2 items-center')}>
+              <div>
+                {activeTab.title && (
+                  <h3 className="text-2xl font-bold text-foreground mb-4">{activeTab.title}</h3>
+                )}
+                {activeTab.description && (
+                  <p className="text-muted-foreground leading-relaxed">{activeTab.description}</p>
+                )}
+              </div>
+              {activeTab.image && (
+                <ThemeImage src={activeTab.image} alt={activeTab.title || activeTab.label} className="w-full rounded-xl" />
+              )}
+            </div>
+          </div>
+        )}
+      </div>
+    </Section>
+  );
+}

package/src/ui/tabs.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import * as React from "react";
+
+import { cn } from "../lib/utils";
+
+const Tabs = TabsPrimitive.Root;
+
+function TabsList({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List>) {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      className={cn("text-muted-foreground flex items-center", className)}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "data-[state=active]:glass-4 ring-offset-background hover:bg-accent/50 hover:text-accent-foreground focus-visible:ring-ring data-[state=active]:text-foreground flex flex-col gap-3 rounded-md border border-transparent px-5 pt-4 pb-6 text-left text-sm font-medium transition-all focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-xl dark:border-b-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn(
+        "border-border dark:border-border/20 bg-input/30 ring-offset-background focus-visible:ring-ring dark:bg-card relative overflow-hidden rounded-lg border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsContent, TabsList, TabsTrigger };