singularity-components 0.1.195 → 0.1.197

package/dist/components/pages/membership/membership-page.js

@@ -0,0 +1,131 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import {
+  Layout,
+  Heading,
+  Text,
+  TextSpan,
+  Button,
+  Icon,
+  Badge,
+  Separator,
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger
+} from "../../primitives/index.js";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "../../blocks/cards/card.js";
+const plans = [
+  {
+    name: "Free",
+    price: "$0",
+    period: "forever",
+    description: "Everything you need to enjoy the blog.",
+    icon: "BookOpen",
+    featured: false,
+    features: [
+      "Access to all published articles",
+      "Weekly newsletter",
+      "Comment on posts",
+      "Dark mode"
+    ]
+  },
+  {
+    name: "Premium",
+    price: "$8",
+    period: "/month",
+    description: "For readers who want the full experience.",
+    icon: "Crown",
+    featured: true,
+    features: [
+      "Everything in Free",
+      "Early access to new posts",
+      "Exclusive essays & interviews",
+      "Ad-free reading experience"
+    ]
+  },
+  {
+    name: "Patron",
+    price: "$20",
+    period: "/month",
+    description: "Support independent storytelling at its best.",
+    icon: "Gem",
+    featured: false,
+    features: [
+      "Everything in Premium",
+      "Members-only community",
+      "Direct author Q&A sessions",
+      "Patron badge on comments"
+    ]
+  }
+];
+const faqs = [
+  {
+    q: "When will Premium launch?",
+    a: "We're building membership features now. Join our newsletter to be the first to know."
+  },
+  {
+    q: "Can I cancel anytime?",
+    a: "Absolutely. No contracts, no commitments. Cancel with one click whenever you want."
+  },
+  {
+    q: "Will free content go behind a paywall?",
+    a: "Never. All currently free content stays free. Premium adds new content on top."
+  }
+];
+function MembershipPage() {
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: { opacity: 1, y: 20 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.3 },
+      children: [
+        /* @__PURE__ */ jsx("section", { className: "sg:bg-primary/5 sg:border-b sg:border-border", children: /* @__PURE__ */ jsxs("div", { className: "sg:container sg:py-20 sg:max-w-3xl sg:mx-auto sg:text-center", children: [
+          /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "sg:mb-4 sg:uppercase sg:tracking-wider", children: "Coming Soon" }),
+          /* @__PURE__ */ jsx(Heading, { variant: "h1", className: "sg:mb-4", children: "Membership" }),
+          /* @__PURE__ */ jsx(Text, { size: "lg", foreground: "muted-foreground", className: "sg:max-w-xl sg:mx-auto", children: "Support independent storytelling and unlock a richer reading experience." })
+        ] }) }),
+        /* @__PURE__ */ jsx(Layout, { type: "col", className: "sg:py-16", children: /* @__PURE__ */ jsx(Layout.Col1, { hideDiv: true, className: "sg:max-w-5xl", children: /* @__PURE__ */ jsx("div", { className: "sg:grid sg:gap-6 lg:sg:grid-cols-3", children: plans.map((plan) => /* @__PURE__ */ jsxs(
+          Card,
+          {
+            className: plan.featured ? "sg:border-primary sg:shadow-lg sg:ring-1 sg:ring-primary/20 sg:relative" : "",
+            children: [
+              plan.featured && /* @__PURE__ */ jsx("div", { className: "sg:absolute sg:-top-3 sg:left-1/2 sg:-translate-x-1/2", children: /* @__PURE__ */ jsx(Badge, { children: "Most Popular" }) }),
+              /* @__PURE__ */ jsxs(CardHeader, { className: "sg:text-center sg:pb-2", children: [
+                /* @__PURE__ */ jsx("div", { className: "sg:rounded-full sg:bg-primary/10 sg:p-3 sg:inline-flex sg:mx-auto sg:mb-2", children: /* @__PURE__ */ jsx(Icon, { icon: plan.icon, className: "sg:h-6 sg:w-6 sg:text-primary" }) }),
+                /* @__PURE__ */ jsx(CardTitle, { children: plan.name }),
+                /* @__PURE__ */ jsx(CardDescription, { children: plan.description })
+              ] }),
+              /* @__PURE__ */ jsxs(CardContent, { className: "sg:flex sg:flex-col sg:flex-1", children: [
+                /* @__PURE__ */ jsxs("div", { className: "sg:text-center sg:mb-6", children: [
+                  /* @__PURE__ */ jsx(Heading, { variant: "h2", className: "sg:inline", children: plan.price }),
+                  /* @__PURE__ */ jsx(TextSpan, { size: "sm", foreground: "muted-foreground", className: "sg:ml-1", children: plan.period })
+                ] }),
+                /* @__PURE__ */ jsx("ul", { className: "sg:space-y-3 sg:mb-8 sg:flex-1", children: plan.features.map((feature) => /* @__PURE__ */ jsxs("li", { className: "sg:flex sg:items-start sg:gap-2.5", children: [
+                  /* @__PURE__ */ jsx(Icon, { icon: "Check", className: "sg:h-4 sg:w-4 sg:text-primary sg:mt-0.5 sg:shrink-0" }),
+                  /* @__PURE__ */ jsx(Text, { size: "sm", children: feature })
+                ] }, feature)) }),
+                /* @__PURE__ */ jsx(Button, { variant: plan.featured ? "default" : "outline", disabled: true, children: "Coming Soon" })
+              ] })
+            ]
+          },
+          plan.name
+        )) }) }) }),
+        /* @__PURE__ */ jsx(Separator, { className: "sg:max-w-3xl sg:mx-auto" }),
+        /* @__PURE__ */ jsx(Layout, { type: "col", className: "sg:py-16", children: /* @__PURE__ */ jsxs(Layout.Col1, { hideDiv: true, className: "sg:max-w-2xl", children: [
+          /* @__PURE__ */ jsx(Heading, { variant: "h2", className: "sg:mb-6 sg:text-center", children: "FAQ" }),
+          /* @__PURE__ */ jsx(Accordion, { multiple: false, "aria-label": "Membership FAQ", children: faqs.map((faq, i) => /* @__PURE__ */ jsxs(AccordionItem, { value: `faq-${i}`, children: [
+            /* @__PURE__ */ jsx(AccordionTrigger, { children: faq.q }),
+            /* @__PURE__ */ jsx(AccordionContent, { children: faq.a })
+          ] }, faq.q)) })
+        ] }) })
+      ]
+    }
+  );
+}
+export {
+  MembershipPage
+};
+//# sourceMappingURL=membership-page.js.map

package/dist/components/pages/membership/membership-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/pages/membership/membership-page.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { motion } from \"framer-motion\";\r\nimport {\r\n\tLayout,\r\n\tHeading,\r\n\tText,\r\n\tTextSpan,\r\n\tButton,\r\n\tIcon,\r\n\tBadge,\r\n\tSeparator,\r\n\tAccordion,\r\n\tAccordionContent,\r\n\tAccordionItem,\r\n\tAccordionTrigger,\r\n} from \"../../primitives/index\";\r\nimport { Card, CardContent, CardHeader, CardTitle, CardDescription } from \"../../blocks/cards/card\";\r\n\r\nconst plans = [\r\n\t{\r\n\t\tname: \"Free\",\r\n\t\tprice: \"$0\",\r\n\t\tperiod: \"forever\",\r\n\t\tdescription: \"Everything you need to enjoy the blog.\",\r\n\t\ticon: \"BookOpen\" as const,\r\n\t\tfeatured: false,\r\n\t\tfeatures: [\r\n\t\t\t\"Access to all published articles\",\r\n\t\t\t\"Weekly newsletter\",\r\n\t\t\t\"Comment on posts\",\r\n\t\t\t\"Dark mode\",\r\n\t\t],\r\n\t},\r\n\t{\r\n\t\tname: \"Premium\",\r\n\t\tprice: \"$8\",\r\n\t\tperiod: \"/month\",\r\n\t\tdescription: \"For readers who want the full experience.\",\r\n\t\ticon: \"Crown\" as const,\r\n\t\tfeatured: true,\r\n\t\tfeatures: [\r\n\t\t\t\"Everything in Free\",\r\n\t\t\t\"Early access to new posts\",\r\n\t\t\t\"Exclusive essays & interviews\",\r\n\t\t\t\"Ad-free reading experience\",\r\n\t\t],\r\n\t},\r\n\t{\r\n\t\tname: \"Patron\",\r\n\t\tprice: \"$20\",\r\n\t\tperiod: \"/month\",\r\n\t\tdescription: \"Support independent storytelling at its best.\",\r\n\t\ticon: \"Gem\" as const,\r\n\t\tfeatured: false,\r\n\t\tfeatures: [\r\n\t\t\t\"Everything in Premium\",\r\n\t\t\t\"Members-only community\",\r\n\t\t\t\"Direct author Q&A sessions\",\r\n\t\t\t\"Patron badge on comments\",\r\n\t\t],\r\n\t},\r\n];\r\n\r\nconst faqs = [\r\n\t{\r\n\t\tq: \"When will Premium launch?\",\r\n\t\ta: \"We're building membership features now. Join our newsletter to be the first to know.\",\r\n\t},\r\n\t{\r\n\t\tq: \"Can I cancel anytime?\",\r\n\t\ta: \"Absolutely. No contracts, no commitments. Cancel with one click whenever you want.\",\r\n\t},\r\n\t{\r\n\t\tq: \"Will free content go behind a paywall?\",\r\n\t\ta: \"Never. All currently free content stays free. Premium adds new content on top.\",\r\n\t},\r\n];\r\n\r\nexport function MembershipPage() {\r\n\treturn (\r\n\t\t<motion.div\r\n\t\t\tinitial={{ opacity: 1, y: 20 }}\r\n\t\t\tanimate={{ opacity: 1, y: 0 }}\r\n\t\t\ttransition={{ duration: 0.3 }}\r\n\t\t>\r\n\t\t\t<section className=\"sg:bg-primary/5 sg:border-b sg:border-border\">\r\n\t\t\t\t<div className=\"sg:container sg:py-20 sg:max-w-3xl sg:mx-auto sg:text-center\">\r\n\t\t\t\t\t<Badge variant=\"secondary\" className=\"sg:mb-4 sg:uppercase sg:tracking-wider\">\r\n\t\t\t\t\t\tComing Soon\r\n\t\t\t\t\t</Badge>\r\n\t\t\t\t\t<Heading variant=\"h1\" className=\"sg:mb-4\">\r\n\t\t\t\t\t\tMembership\r\n\t\t\t\t\t</Heading>\r\n\t\t\t\t\t<Text size=\"lg\" foreground=\"muted-foreground\" className=\"sg:max-w-xl sg:mx-auto\">\r\n\t\t\t\t\t\tSupport independent storytelling and unlock a richer reading experience.\r\n\t\t\t\t\t</Text>\r\n\t\t\t\t</div>\r\n\t\t\t</section>\r\n\r\n\t\t\t<Layout type=\"col\" className=\"sg:py-16\">\r\n\t\t\t\t<Layout.Col1 hideDiv className=\"sg:max-w-5xl\">\r\n\t\t\t\t\t<div className=\"sg:grid sg:gap-6 lg:sg:grid-cols-3\">\r\n\t\t\t\t\t\t{plans.map((plan) => (\r\n\t\t\t\t\t\t\t<Card\r\n\t\t\t\t\t\t\t\tkey={plan.name}\r\n\t\t\t\t\t\t\t\tclassName={\r\n\t\t\t\t\t\t\t\t\tplan.featured\r\n\t\t\t\t\t\t\t\t\t\t? \"sg:border-primary sg:shadow-lg sg:ring-1 sg:ring-primary/20 sg:relative\"\r\n\t\t\t\t\t\t\t\t\t\t: \"\"\r\n\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t{plan.featured && (\r\n\t\t\t\t\t\t\t\t\t<div className=\"sg:absolute sg:-top-3 sg:left-1/2 sg:-translate-x-1/2\">\r\n\t\t\t\t\t\t\t\t\t\t<Badge>Most Popular</Badge>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t<CardHeader className=\"sg:text-center sg:pb-2\">\r\n\t\t\t\t\t\t\t\t\t<div className=\"sg:rounded-full sg:bg-primary/10 sg:p-3 sg:inline-flex sg:mx-auto sg:mb-2\">\r\n\t\t\t\t\t\t\t\t\t\t<Icon icon={plan.icon} className=\"sg:h-6 sg:w-6 sg:text-primary\" />\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t<CardTitle>{plan.name}</CardTitle>\r\n\t\t\t\t\t\t\t\t\t<CardDescription>{plan.description}</CardDescription>\r\n\t\t\t\t\t\t\t\t</CardHeader>\r\n\t\t\t\t\t\t\t\t<CardContent className=\"sg:flex sg:flex-col sg:flex-1\">\r\n\t\t\t\t\t\t\t\t\t<div className=\"sg:text-center sg:mb-6\">\r\n\t\t\t\t\t\t\t\t\t\t<Heading variant=\"h2\" className=\"sg:inline\">\r\n\t\t\t\t\t\t\t\t\t\t\t{plan.price}\r\n\t\t\t\t\t\t\t\t\t\t</Heading>\r\n\t\t\t\t\t\t\t\t\t\t<TextSpan size=\"sm\" foreground=\"muted-foreground\" className=\"sg:ml-1\">\r\n\t\t\t\t\t\t\t\t\t\t\t{plan.period}\r\n\t\t\t\t\t\t\t\t\t\t</TextSpan>\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t<ul className=\"sg:space-y-3 sg:mb-8 sg:flex-1\">\r\n\t\t\t\t\t\t\t\t\t\t{plan.features.map((feature) => (\r\n\t\t\t\t\t\t\t\t\t\t\t<li key={feature} className=\"sg:flex sg:items-start sg:gap-2.5\">\r\n\t\t\t\t\t\t\t\t\t\t\t\t<Icon icon=\"Check\" className=\"sg:h-4 sg:w-4 sg:text-primary sg:mt-0.5 sg:shrink-0\" />\r\n\t\t\t\t\t\t\t\t\t\t\t\t<Text size=\"sm\">{feature}</Text>\r\n\t\t\t\t\t\t\t\t\t\t\t</li>\r\n\t\t\t\t\t\t\t\t\t\t))}\r\n\t\t\t\t\t\t\t\t\t</ul>\r\n\t\t\t\t\t\t\t\t\t<Button variant={plan.featured ? \"default\" : \"outline\"} disabled>\r\n\t\t\t\t\t\t\t\t\t\tComing Soon\r\n\t\t\t\t\t\t\t\t\t</Button>\r\n\t\t\t\t\t\t\t\t</CardContent>\r\n\t\t\t\t\t\t\t</Card>\r\n\t\t\t\t\t\t))}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</Layout.Col1>\r\n\t\t\t</Layout>\r\n\r\n\t\t\t<Separator className=\"sg:max-w-3xl sg:mx-auto\" />\r\n\r\n\t\t\t<Layout type=\"col\" className=\"sg:py-16\">\r\n\t\t\t\t<Layout.Col1 hideDiv className=\"sg:max-w-2xl\">\r\n\t\t\t\t\t<Heading variant=\"h2\" className=\"sg:mb-6 sg:text-center\">\r\n\t\t\t\t\t\tFAQ\r\n\t\t\t\t\t</Heading>\r\n\t\t\t\t\t<Accordion multiple={false} aria-label=\"Membership FAQ\">\r\n\t\t\t\t\t\t{faqs.map((faq, i) => (\r\n\t\t\t\t\t\t\t<AccordionItem key={faq.q} value={`faq-${i}`}>\r\n\t\t\t\t\t\t\t\t<AccordionTrigger>{faq.q}</AccordionTrigger>\r\n\t\t\t\t\t\t\t\t<AccordionContent>{faq.a}</AccordionContent>\r\n\t\t\t\t\t\t\t</AccordionItem>\r\n\t\t\t\t\t\t))}\r\n\t\t\t\t\t</Accordion>\r\n\t\t\t\t</Layout.Col1>\r\n\t\t\t</Layout>\r\n\t\t</motion.div>\r\n\t);\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/components/pages/mosaic/mosaic-page.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+declare function MosaicPage(): React.JSX.Element;
+
+export { MosaicPage };

package/dist/components/pages/mosaic/mosaic-page.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from "react";
+import { motion } from "framer-motion";
+import { Layout, Heading, Text, UiImage, Link } from "../../primitives/index.js";
+import { posts } from "../../../data/posts.js";
+import {
+  Sheet,
+  SheetContent,
+  SheetTitle
+} from "../../primitives/sheet/sheet.js";
+function MosaicPage() {
+  const [lightbox, setLightbox] = useState(null);
+  const items = useMemo(() => {
+    return posts.flatMap((post) => {
+      const images = post.gallery?.length ? post.gallery : [{ src: post.primaryImage, alt: post.title }];
+      return images.map((img) => ({
+        src: img.src,
+        alt: img.alt || post.title,
+        postSlug: post.slug,
+        postTitle: post.title
+      }));
+    });
+  }, []);
+  return /* @__PURE__ */ jsx(Layout, { type: "col", className: "sg:py-16", children: /* @__PURE__ */ jsxs(Layout.Col1, { hideDiv: true, children: [
+    /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: { opacity: 1, y: 20 },
+        animate: { opacity: 1, y: 0 },
+        transition: { duration: 0.3 },
+        children: [
+          /* @__PURE__ */ jsx(Heading, { variant: "h1", className: "sg:mb-2", children: "Mosaic" }),
+          /* @__PURE__ */ jsx(Text, { foreground: "muted-foreground", className: "sg:mb-10", children: "A visual mosaic of images from our blog posts." }),
+          /* @__PURE__ */ jsx("div", { className: "sg:columns-2 md:sg:columns-3 lg:sg:columns-4 sg:gap-3 sg:space-y-3", children: items.map((item, i) => /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "sg:block sg:w-full sg:mb-3 sg:break-inside-avoid sg:rounded-lg sg:overflow-hidden sg:border-0 sg:p-0 sg:bg-transparent sg:cursor-pointer sg:group",
+              onClick: () => setLightbox(item),
+              children: /* @__PURE__ */ jsx(
+                UiImage,
+                {
+                  src: item.src,
+                  alt: item.alt,
+                  className: "sg:w-full sg:object-cover sg:transition-transform sg:duration-300 sg:group-hover:scale-105",
+                  loading: "lazy"
+                }
+              )
+            },
+            `${item.postSlug}-${i}`
+          )) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Sheet, { open: !!lightbox, onOpenChange: (open) => !open && setLightbox(null), children: /* @__PURE__ */ jsxs(SheetContent, { side: "bottom", className: "sg:max-h-[90vh] sg:p-4", children: [
+      /* @__PURE__ */ jsx(SheetTitle, { className: "sg:sr-only", children: "Image preview" }),
+      lightbox && /* @__PURE__ */ jsxs("div", { className: "sg:space-y-4 sg:mx-auto sg:max-w-4xl", children: [
+        /* @__PURE__ */ jsx(
+          UiImage,
+          {
+            src: lightbox.src,
+            alt: lightbox.alt,
+            className: "sg:w-full sg:max-h-[70vh] sg:object-contain sg:rounded-md"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "sg:flex sg:items-center sg:justify-between sg:gap-4", children: [
+          /* @__PURE__ */ jsxs(Text, { size: "sm", foreground: "muted-foreground", children: [
+            "From: ",
+            lightbox.postTitle
+          ] }),
+          /* @__PURE__ */ jsx(Link, { to: `/posts/${lightbox.postSlug}`, children: "View post" })
+        ] })
+      ] })
+    ] }) })
+  ] }) });
+}
+export {
+  MosaicPage
+};
+//# sourceMappingURL=mosaic-page.js.map

package/dist/components/pages/mosaic/mosaic-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/pages/mosaic/mosaic-page.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useMemo, useState } from \"react\";\r\nimport { motion } from \"framer-motion\";\r\nimport { Layout, Heading, Text, UiImage, Link } from \"../../primitives/index\";\r\nimport { posts } from \"../../../data/posts\";\r\nimport {\r\n\tSheet,\r\n\tSheetContent,\r\n\tSheetTitle,\r\n} from \"../../primitives/sheet/sheet\";\r\n\r\ntype MosaicItem = {\r\n\tsrc: string;\r\n\talt: string;\r\n\tpostSlug: string;\r\n\tpostTitle: string;\r\n};\r\n\r\nexport function MosaicPage() {\r\n\tconst [lightbox, setLightbox] = useState<MosaicItem | null>(null);\r\n\r\n\tconst items = useMemo<MosaicItem[]>(() => {\r\n\t\treturn posts.flatMap((post) => {\r\n\t\t\tconst images = post.gallery?.length\r\n\t\t\t\t? post.gallery\r\n\t\t\t\t: [{ src: post.primaryImage, alt: post.title }];\r\n\t\t\treturn images.map((img) => ({\r\n\t\t\t\tsrc: img.src,\r\n\t\t\t\talt: img.alt || post.title,\r\n\t\t\t\tpostSlug: post.slug,\r\n\t\t\t\tpostTitle: post.title,\r\n\t\t\t}));\r\n\t\t});\r\n\t}, []);\r\n\r\n\treturn (\r\n\t\t<Layout type=\"col\" className=\"sg:py-16\">\r\n\t\t\t<Layout.Col1 hideDiv>\r\n\t\t\t\t<motion.div\r\n\t\t\t\t\tinitial={{ opacity: 1, y: 20 }}\r\n\t\t\t\t\tanimate={{ opacity: 1, y: 0 }}\r\n\t\t\t\t\ttransition={{ duration: 0.3 }}\r\n\t\t\t\t>\r\n\t\t\t\t\t<Heading variant=\"h1\" className=\"sg:mb-2\">\r\n\t\t\t\t\t\tMosaic\r\n\t\t\t\t\t</Heading>\r\n\t\t\t\t\t<Text foreground=\"muted-foreground\" className=\"sg:mb-10\">\r\n\t\t\t\t\t\tA visual mosaic of images from our blog posts.\r\n\t\t\t\t\t</Text>\r\n\r\n\t\t\t\t\t<div className=\"sg:columns-2 md:sg:columns-3 lg:sg:columns-4 sg:gap-3 sg:space-y-3\">\r\n\t\t\t\t\t\t{items.map((item, i) => (\r\n\t\t\t\t\t\t\t<button\r\n\t\t\t\t\t\t\t\tkey={`${item.postSlug}-${i}`}\r\n\t\t\t\t\t\t\t\ttype=\"button\"\r\n\t\t\t\t\t\t\t\tclassName=\"sg:block sg:w-full sg:mb-3 sg:break-inside-avoid sg:rounded-lg sg:overflow-hidden sg:border-0 sg:p-0 sg:bg-transparent sg:cursor-pointer sg:group\"\r\n\t\t\t\t\t\t\t\tonClick={() => setLightbox(item)}\r\n\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t<UiImage\r\n\t\t\t\t\t\t\t\t\tsrc={item.src}\r\n\t\t\t\t\t\t\t\t\talt={item.alt}\r\n\t\t\t\t\t\t\t\t\tclassName=\"sg:w-full sg:object-cover sg:transition-transform sg:duration-300 sg:group-hover:scale-105\"\r\n\t\t\t\t\t\t\t\t\tloading=\"lazy\"\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t</button>\r\n\t\t\t\t\t\t))}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</motion.div>\r\n\r\n\t\t\t\t<Sheet open={!!lightbox} onOpenChange={(open) => !open && setLightbox(null)}>\r\n\t\t\t\t\t<SheetContent side=\"bottom\" className=\"sg:max-h-[90vh] sg:p-4\">\r\n\t\t\t\t\t\t<SheetTitle className=\"sg:sr-only\">Image preview</SheetTitle>\r\n\t\t\t\t\t\t{lightbox && (\r\n\t\t\t\t\t\t\t<div className=\"sg:space-y-4 sg:mx-auto sg:max-w-4xl\">\r\n\t\t\t\t\t\t\t\t<UiImage\r\n\t\t\t\t\t\t\t\t\tsrc={lightbox.src}\r\n\t\t\t\t\t\t\t\t\talt={lightbox.alt}\r\n\t\t\t\t\t\t\t\t\tclassName=\"sg:w-full sg:max-h-[70vh] sg:object-contain sg:rounded-md\"\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t\t<div className=\"sg:flex sg:items-center sg:justify-between sg:gap-4\">\r\n\t\t\t\t\t\t\t\t\t<Text size=\"sm\" foreground=\"muted-foreground\">\r\n\t\t\t\t\t\t\t\t\t\tFrom: {lightbox.postTitle}\r\n\t\t\t\t\t\t\t\t\t</Text>\r\n\t\t\t\t\t\t\t\t\t<Link to={`/posts/${lightbox.postSlug}`}>View post</Link>\r\n\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t)}\r\n\t\t\t\t\t</SheetContent>\r\n\t\t\t\t</Sheet>\r\n\t\t\t</Layout.Col1>\r\n\t\t</Layout>\r\n\t);\r\n}\r\n"],"mappings":";AAuCI,SAKC,KALD;AArCJ,SAAS,SAAS,gBAAgB;AAClC,SAAS,cAAc;AACvB,SAAS,QAAQ,SAAS,MAAM,SAAS,YAAY;AACrD,SAAS,aAAa;AACtB;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,OACM;AASA,SAAS,aAAa;AAC5B,QAAM,CAAC,UAAU,WAAW,IAAI,SAA4B,IAAI;AAEhE,QAAM,QAAQ,QAAsB,MAAM;AACzC,WAAO,MAAM,QAAQ,CAAC,SAAS;AAC9B,YAAM,SAAS,KAAK,SAAS,SAC1B,KAAK,UACL,CAAC,EAAE,KAAK,KAAK,cAAc,KAAK,KAAK,MAAM,CAAC;AAC/C,aAAO,OAAO,IAAI,CAAC,SAAS;AAAA,QAC3B,KAAK,IAAI;AAAA,QACT,KAAK,IAAI,OAAO,KAAK;AAAA,QACrB,UAAU,KAAK;AAAA,QACf,WAAW,KAAK;AAAA,MACjB,EAAE;AAAA,IACH,CAAC;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SACC,oBAAC,UAAO,MAAK,OAAM,WAAU,YAC5B,+BAAC,OAAO,MAAP,EAAY,SAAO,MACnB;AAAA;AAAA,MAAC,OAAO;AAAA,MAAP;AAAA,QACA,SAAS,EAAE,SAAS,GAAG,GAAG,GAAG;AAAA,QAC7B,SAAS,EAAE,SAAS,GAAG,GAAG,EAAE;AAAA,QAC5B,YAAY,EAAE,UAAU,IAAI;AAAA,QAE5B;AAAA,8BAAC,WAAQ,SAAQ,MAAK,WAAU,WAAU,oBAE1C;AAAA,UACA,oBAAC,QAAK,YAAW,oBAAmB,WAAU,YAAW,4DAEzD;AAAA,UAEA,oBAAC,SAAI,WAAU,sEACb,gBAAM,IAAI,CAAC,MAAM,MACjB;AAAA,YAAC;AAAA;AAAA,cAEA,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAAS,MAAM,YAAY,IAAI;AAAA,cAE/B;AAAA,gBAAC;AAAA;AAAA,kBACA,KAAK,KAAK;AAAA,kBACV,KAAK,KAAK;AAAA,kBACV,WAAU;AAAA,kBACV,SAAQ;AAAA;AAAA,cACT;AAAA;AAAA,YAVK,GAAG,KAAK,QAAQ,IAAI,CAAC;AAAA,UAW3B,CACA,GACF;AAAA;AAAA;AAAA,IACD;AAAA,IAEA,oBAAC,SAAM,MAAM,CAAC,CAAC,UAAU,cAAc,CAAC,SAAS,CAAC,QAAQ,YAAY,IAAI,GACzE,+BAAC,gBAAa,MAAK,UAAS,WAAU,0BACrC;AAAA,0BAAC,cAAW,WAAU,cAAa,2BAAa;AAAA,MAC/C,YACA,qBAAC,SAAI,WAAU,wCACd;AAAA;AAAA,UAAC;AAAA;AAAA,YACA,KAAK,SAAS;AAAA,YACd,KAAK,SAAS;AAAA,YACd,WAAU;AAAA;AAAA,QACX;AAAA,QACA,qBAAC,SAAI,WAAU,uDACd;AAAA,+BAAC,QAAK,MAAK,MAAK,YAAW,oBAAmB;AAAA;AAAA,YACtC,SAAS;AAAA,aACjB;AAAA,UACA,oBAAC,QAAK,IAAI,UAAU,SAAS,QAAQ,IAAI,uBAAS;AAAA,WACnD;AAAA,SACD;AAAA,OAEF,GACD;AAAA,KACD,GACD;AAEF;","names":[]}

package/dist/components/pages/newsletter/newsletter-page.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+declare function NewsletterPage(): React.JSX.Element;
+
+export { NewsletterPage };

package/dist/components/pages/newsletter/newsletter-page.js

@@ -0,0 +1,165 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useForm } from "@tanstack/react-form";
+import { useState } from "react";
+import { motion } from "framer-motion";
+import { TanStackInputField } from "../../../lib/forms/tanstack-field.js";
+import {
+  Layout,
+  Heading,
+  Text,
+  Button,
+  Icon,
+  Separator
+} from "../../primitives/index.js";
+import { FieldGroup } from "../../primitives/forms/field.js";
+import {
+  Form,
+  FormActions
+} from "../../primitives/forms/form.js";
+import { Card, CardContent } from "../../blocks/cards/card.js";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage
+} from "../../primitives/avatar/avatar.js";
+import { useToast } from "../../primitives/sonner/use-toast.js";
+import { authors } from "../../../data/authors.js";
+const benefits = [
+  {
+    icon: "BookOpen",
+    title: "Curated Stories",
+    description: "Handpicked articles on slow living, design, and culture \u2014 delivered weekly."
+  },
+  {
+    icon: "Sparkles",
+    title: "Exclusive Content",
+    description: "Subscriber-only essays, interviews, and behind-the-scenes looks."
+  },
+  {
+    icon: "Clock",
+    title: "Early Access",
+    description: "Be the first to read new posts before they go live."
+  }
+];
+function NewsletterPage() {
+  const { toast } = useToast();
+  const [subscribed, setSubscribed] = useState(false);
+  const form = useForm({
+    defaultValues: { email: "" },
+    onSubmit: async ({ formApi }) => {
+      await new Promise((resolve) => setTimeout(resolve, 1200));
+      setSubscribed(true);
+      formApi.reset();
+      toast.message("You're subscribed!", {
+        description: "Check your inbox for a welcome email."
+      });
+    }
+  });
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: { opacity: 1, y: 20 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.3 },
+      children: [
+        /* @__PURE__ */ jsx("section", { className: "sg:bg-primary/5 sg:border-b sg:border-border", children: /* @__PURE__ */ jsxs("div", { className: "sg:container sg:py-20 sg:max-w-3xl sg:mx-auto sg:text-center", children: [
+          /* @__PURE__ */ jsx(Icon, { icon: "Mail", className: "sg:h-12 sg:w-12 sg:text-primary sg:mx-auto sg:mb-5" }),
+          /* @__PURE__ */ jsx(Heading, { variant: "h1", className: "sg:mb-4", children: "Stories Worth Reading, Delivered Weekly" }),
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "lg",
+              foreground: "muted-foreground",
+              className: "sg:max-w-xl sg:mx-auto sg:leading-relaxed",
+              children: "Join a growing community of thoughtful readers. Curated essays on slow living, intentional design, and creative culture \u2014 every Sunday."
+            }
+          ),
+          !subscribed ? /* @__PURE__ */ jsxs(
+            Form,
+            {
+              className: "sg:mt-8 sg:flex-col sm:sg:flex-row sg:gap-3 sg:max-w-md sg:mx-auto",
+              onSubmit: (event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                void form.handleSubmit();
+              },
+              children: [
+                /* @__PURE__ */ jsx(FieldGroup, { className: "sg:flex-1", children: /* @__PURE__ */ jsx(
+                  TanStackInputField,
+                  {
+                    formApi: form,
+                    name: "email",
+                    label: "Email",
+                    labelClassName: "sg:sr-only",
+                    type: "email",
+                    placeholder: "you@example.com",
+                    validators: {
+                      onChange: ({ value }) => {
+                        if (!value.trim() || !value.includes("@")) {
+                          return "Please enter a valid email address";
+                        }
+                        return void 0;
+                      }
+                    }
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(FormActions, { children: /* @__PURE__ */ jsx(
+                  form.Subscribe,
+                  {
+                    selector: (state) => [state.canSubmit, state.isSubmitting],
+                    children: ([canSubmit, isSubmitting]) => /* @__PURE__ */ jsx(
+                      Button,
+                      {
+                        type: "submit",
+                        iconStart: "Mail",
+                        disabled: !canSubmit || isSubmitting,
+                        loading: isSubmitting,
+                        children: "Subscribe"
+                      }
+                    )
+                  }
+                ) })
+              ]
+            }
+          ) : /* @__PURE__ */ jsxs("div", { className: "sg:mt-8 sg:inline-flex sg:items-center sg:gap-2 sg:bg-primary/10 sg:text-primary sg:rounded-full sg:px-5 sg:py-2.5 sg:font-medium", children: [
+            /* @__PURE__ */ jsx(Icon, { icon: "CircleCheck", className: "sg:h-5 sg:w-5" }),
+            "You're subscribed \u2014 welcome aboard!"
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "sg:mt-6 sg:flex sg:items-center sg:justify-center sg:gap-2", children: [
+            /* @__PURE__ */ jsx("div", { className: "sg:flex sg:-space-x-2", children: authors.map((a) => /* @__PURE__ */ jsxs(
+              Avatar,
+              {
+                className: "sg:h-7 sg:w-7 sg:border-2 sg:border-background",
+                children: [
+                  /* @__PURE__ */ jsx(AvatarImage, { src: a.avatar, alt: a.name }),
+                  /* @__PURE__ */ jsx(AvatarFallback, { className: "sg:text-[10px]", children: a.name[0] })
+                ]
+              },
+              a.slug
+            )) }),
+            /* @__PURE__ */ jsxs(Text, { size: "sm", foreground: "muted-foreground", children: [
+              "Join ",
+              /* @__PURE__ */ jsx("span", { className: "sg:font-medium sg:text-foreground", children: "2,400+" }),
+              " readers"
+            ] })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsx(Layout, { type: "col", className: "sg:py-16", children: /* @__PURE__ */ jsxs(Layout.Col1, { hideDiv: true, className: "sg:max-w-4xl", children: [
+          /* @__PURE__ */ jsx(Heading, { variant: "h2", className: "sg:text-center sg:mb-2", children: "What You'll Get" }),
+          /* @__PURE__ */ jsx(Text, { foreground: "muted-foreground", className: "sg:text-center sg:mb-10", children: "Every issue is crafted with the same care as our articles." }),
+          /* @__PURE__ */ jsx("div", { className: "sg:grid sg:gap-6 sm:sg:grid-cols-3", children: benefits.map((b) => /* @__PURE__ */ jsx(Card, { className: "sg:text-center", children: /* @__PURE__ */ jsxs(CardContent, { className: "sg:pt-6", children: [
+            /* @__PURE__ */ jsx("div", { className: "sg:rounded-full sg:bg-primary/10 sg:p-3 sg:inline-flex sg:mb-4", children: /* @__PURE__ */ jsx(Icon, { icon: b.icon, className: "sg:h-6 sg:w-6 sg:text-primary" }) }),
+            /* @__PURE__ */ jsx(Heading, { variant: "h5", className: "sg:mb-1", children: b.title }),
+            /* @__PURE__ */ jsx(Text, { size: "sm", foreground: "muted-foreground", className: "sg:leading-relaxed", children: b.description })
+          ] }) }, b.title)) })
+        ] }) }),
+        /* @__PURE__ */ jsx(Separator, { className: "sg:max-w-4xl sg:mx-auto" })
+      ]
+    }
+  );
+}
+export {
+  NewsletterPage
+};
+//# sourceMappingURL=newsletter-page.js.map

package/dist/components/pages/newsletter/newsletter-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/pages/newsletter/newsletter-page.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { useForm } from \"@tanstack/react-form\";\r\nimport { useState } from \"react\";\r\nimport { motion } from \"framer-motion\";\r\nimport { TanStackInputField } from \"../../../lib/forms/tanstack-field\";\r\nimport {\r\n\tLayout,\r\n\tHeading,\r\n\tText,\r\n\tButton,\r\n\tIcon,\r\n\tSeparator,\r\n} from \"../../primitives/index\";\r\nimport { FieldGroup } from \"../../primitives/forms/field\";\r\nimport {\r\n\tForm,\r\n\tFormActions,\r\n} from \"../../primitives/forms/form\";\r\nimport { Card, CardContent } from \"../../blocks/cards/card\";\r\nimport {\r\n\tAvatar,\r\n\tAvatarFallback,\r\n\tAvatarImage,\r\n} from \"../../primitives/avatar/avatar\";\r\nimport { useToast } from \"../../primitives/sonner/use-toast\";\r\nimport { authors } from \"../../../data/authors\";\r\n\r\nconst benefits = [\r\n\t{\r\n\t\ticon: \"BookOpen\" as const,\r\n\t\ttitle: \"Curated Stories\",\r\n\t\tdescription:\r\n\t\t\t\"Handpicked articles on slow living, design, and culture — delivered weekly.\",\r\n\t},\r\n\t{\r\n\t\ticon: \"Sparkles\" as const,\r\n\t\ttitle: \"Exclusive Content\",\r\n\t\tdescription:\r\n\t\t\t\"Subscriber-only essays, interviews, and behind-the-scenes looks.\",\r\n\t},\r\n\t{\r\n\t\ticon: \"Clock\" as const,\r\n\t\ttitle: \"Early Access\",\r\n\t\tdescription: \"Be the first to read new posts before they go live.\",\r\n\t},\r\n];\r\n\r\nexport function NewsletterPage() {\r\n\tconst { toast } = useToast();\r\n\tconst [subscribed, setSubscribed] = useState(false);\r\n\r\n\tconst form = useForm({\r\n\t\tdefaultValues: { email: \"\" },\r\n\t\tonSubmit: async ({ formApi }) => {\r\n\t\t\tawait new Promise((resolve) => setTimeout(resolve, 1200));\r\n\t\t\tsetSubscribed(true);\r\n\t\t\tformApi.reset();\r\n\t\t\ttoast.message(\"You're subscribed!\", {\r\n\t\t\t\tdescription: \"Check your inbox for a welcome email.\",\r\n\t\t\t});\r\n\t\t},\r\n\t});\r\n\r\n\treturn (\r\n\t\t<motion.div\r\n\t\t\tinitial={{ opacity: 1, y: 20 }}\r\n\t\t\tanimate={{ opacity: 1, y: 0 }}\r\n\t\t\ttransition={{ duration: 0.3 }}\r\n\t\t>\r\n\t\t\t<section className=\"sg:bg-primary/5 sg:border-b sg:border-border\">\r\n\t\t\t\t<div className=\"sg:container sg:py-20 sg:max-w-3xl sg:mx-auto sg:text-center\">\r\n\t\t\t\t\t<Icon icon=\"Mail\" className=\"sg:h-12 sg:w-12 sg:text-primary sg:mx-auto sg:mb-5\" />\r\n\t\t\t\t\t<Heading variant=\"h1\" className=\"sg:mb-4\">\r\n\t\t\t\t\t\tStories Worth Reading, Delivered Weekly\r\n\t\t\t\t\t</Heading>\r\n\t\t\t\t\t<Text\r\n\t\t\t\t\t\tsize=\"lg\"\r\n\t\t\t\t\t\tforeground=\"muted-foreground\"\r\n\t\t\t\t\t\tclassName=\"sg:max-w-xl sg:mx-auto sg:leading-relaxed\"\r\n\t\t\t\t\t>\r\n\t\t\t\t\t\tJoin a growing community of thoughtful readers. Curated essays on slow\r\n\t\t\t\t\t\tliving, intentional design, and creative culture — every Sunday.\r\n\t\t\t\t\t</Text>\r\n\r\n\t\t\t\t\t{!subscribed ? (\r\n\t\t\t\t\t\t<Form\r\n\t\t\t\t\t\t\tclassName=\"sg:mt-8 sg:flex-col sm:sg:flex-row sg:gap-3 sg:max-w-md sg:mx-auto\"\r\n\t\t\t\t\t\t\tonSubmit={(event) => {\r\n\t\t\t\t\t\t\t\tevent.preventDefault();\r\n\t\t\t\t\t\t\t\tevent.stopPropagation();\r\n\t\t\t\t\t\t\t\tvoid form.handleSubmit();\r\n\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t<FieldGroup className=\"sg:flex-1\">\r\n\t\t\t\t\t\t\t\t<TanStackInputField\r\n\t\t\t\t\t\t\t\t\tformApi={form}\r\n\t\t\t\t\t\t\t\t\tname=\"email\"\r\n\t\t\t\t\t\t\t\t\tlabel=\"Email\"\r\n\t\t\t\t\t\t\t\t\tlabelClassName=\"sg:sr-only\"\r\n\t\t\t\t\t\t\t\t\ttype=\"email\"\r\n\t\t\t\t\t\t\t\t\tplaceholder=\"you@example.com\"\r\n\t\t\t\t\t\t\t\t\tvalidators={{\r\n\t\t\t\t\t\t\t\t\t\tonChange: ({ value }: { value: string }) => {\r\n\t\t\t\t\t\t\t\t\t\t\tif (!value.trim() || !value.includes(\"@\")) {\r\n\t\t\t\t\t\t\t\t\t\t\t\treturn \"Please enter a valid email address\";\r\n\t\t\t\t\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\t\t\t\t\treturn undefined;\r\n\t\t\t\t\t\t\t\t\t\t},\r\n\t\t\t\t\t\t\t\t\t}}\r\n\t\t\t\t\t\t\t\t/>\r\n\t\t\t\t\t\t\t</FieldGroup>\r\n\t\t\t\t\t\t\t<FormActions>\r\n\t\t\t\t\t\t\t\t<form.Subscribe\r\n\t\t\t\t\t\t\t\t\tselector={(state) => [state.canSubmit, state.isSubmitting]}\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t{([canSubmit, isSubmitting]) => (\r\n\t\t\t\t\t\t\t\t\t\t<Button\r\n\t\t\t\t\t\t\t\t\t\t\ttype=\"submit\"\r\n\t\t\t\t\t\t\t\t\t\t\ticonStart=\"Mail\"\r\n\t\t\t\t\t\t\t\t\t\t\tdisabled={!canSubmit || isSubmitting}\r\n\t\t\t\t\t\t\t\t\t\t\tloading={isSubmitting}\r\n\t\t\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t\t\tSubscribe\r\n\t\t\t\t\t\t\t\t\t\t</Button>\r\n\t\t\t\t\t\t\t\t\t)}\r\n\t\t\t\t\t\t\t\t</form.Subscribe>\r\n\t\t\t\t\t\t\t</FormActions>\r\n\t\t\t\t\t\t</Form>\r\n\t\t\t\t\t) : (\r\n\t\t\t\t\t\t<div className=\"sg:mt-8 sg:inline-flex sg:items-center sg:gap-2 sg:bg-primary/10 sg:text-primary sg:rounded-full sg:px-5 sg:py-2.5 sg:font-medium\">\r\n\t\t\t\t\t\t\t<Icon icon=\"CircleCheck\" className=\"sg:h-5 sg:w-5\" />\r\n\t\t\t\t\t\t\tYou&apos;re subscribed — welcome aboard!\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t)}\r\n\r\n\t\t\t\t\t<div className=\"sg:mt-6 sg:flex sg:items-center sg:justify-center sg:gap-2\">\r\n\t\t\t\t\t\t<div className=\"sg:flex sg:-space-x-2\">\r\n\t\t\t\t\t\t\t{authors.map((a) => (\r\n\t\t\t\t\t\t\t\t<Avatar\r\n\t\t\t\t\t\t\t\t\tkey={a.slug}\r\n\t\t\t\t\t\t\t\t\tclassName=\"sg:h-7 sg:w-7 sg:border-2 sg:border-background\"\r\n\t\t\t\t\t\t\t\t>\r\n\t\t\t\t\t\t\t\t\t<AvatarImage src={a.avatar} alt={a.name} />\r\n\t\t\t\t\t\t\t\t\t<AvatarFallback className=\"sg:text-[10px]\">\r\n\t\t\t\t\t\t\t\t\t\t{a.name[0]}\r\n\t\t\t\t\t\t\t\t\t</AvatarFallback>\r\n\t\t\t\t\t\t\t\t</Avatar>\r\n\t\t\t\t\t\t\t))}\r\n\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t<Text size=\"sm\" foreground=\"muted-foreground\">\r\n\t\t\t\t\t\t\tJoin <span className=\"sg:font-medium sg:text-foreground\">2,400+</span> readers\r\n\t\t\t\t\t\t</Text>\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</div>\r\n\t\t\t</section>\r\n\r\n\t\t\t<Layout type=\"col\" className=\"sg:py-16\">\r\n\t\t\t\t<Layout.Col1 hideDiv className=\"sg:max-w-4xl\">\r\n\t\t\t\t\t<Heading variant=\"h2\" className=\"sg:text-center sg:mb-2\">\r\n\t\t\t\t\t\tWhat You&apos;ll Get\r\n\t\t\t\t\t</Heading>\r\n\t\t\t\t\t<Text foreground=\"muted-foreground\" className=\"sg:text-center sg:mb-10\">\r\n\t\t\t\t\t\tEvery issue is crafted with the same care as our articles.\r\n\t\t\t\t\t</Text>\r\n\t\t\t\t\t<div className=\"sg:grid sg:gap-6 sm:sg:grid-cols-3\">\r\n\t\t\t\t\t\t{benefits.map((b) => (\r\n\t\t\t\t\t\t\t<Card key={b.title} className=\"sg:text-center\">\r\n\t\t\t\t\t\t\t\t<CardContent className=\"sg:pt-6\">\r\n\t\t\t\t\t\t\t\t\t<div className=\"sg:rounded-full sg:bg-primary/10 sg:p-3 sg:inline-flex sg:mb-4\">\r\n\t\t\t\t\t\t\t\t\t\t<Icon icon={b.icon} className=\"sg:h-6 sg:w-6 sg:text-primary\" />\r\n\t\t\t\t\t\t\t\t\t</div>\r\n\t\t\t\t\t\t\t\t\t<Heading variant=\"h5\" className=\"sg:mb-1\">\r\n\t\t\t\t\t\t\t\t\t\t{b.title}\r\n\t\t\t\t\t\t\t\t\t</Heading>\r\n\t\t\t\t\t\t\t\t\t<Text size=\"sm\" foreground=\"muted-foreground\" className=\"sg:leading-relaxed\">\r\n\t\t\t\t\t\t\t\t\t\t{b.description}\r\n\t\t\t\t\t\t\t\t\t</Text>\r\n\t\t\t\t\t\t\t\t</CardContent>\r\n\t\t\t\t\t\t\t</Card>\r\n\t\t\t\t\t\t))}\r\n\t\t\t\t\t</div>\r\n\t\t\t\t</Layout.Col1>\r\n\t\t\t</Layout>\r\n\r\n\t\t\t<Separator className=\"sg:max-w-4xl sg:mx-auto\" />\r\n\t\t</motion.div>\r\n\t);\r\n}\r\n"],"mappings":"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","names":[]}

package/dist/components/pages/not-found/not-found.js

@@ -28,9 +28,9 @@ const NotFound = ({
   return /* @__PURE__ */ jsx(Layout, { bgColor: "background", children: /* @__PURE__ */ jsx(Layout.Col1, { className: "sg:flex sg:flex-col sg:items-center sg:justify-center sg:py-32 sg:text-center", children: /* @__PURE__ */ jsxs(
     motion.div,
     {
-      initial: { opacity: 0, y: 20 },
+      initial: { opacity: 1, y: 20 },
       animate: { opacity: 1, y: 0 },
-      exit: { opacity: 0, y: -20 },
+      exit: { opacity: 1, y: -20 },
       transition: { duration: 0.3 },
       className: "sg:flex sg:flex-col sg:items-center",
       children: [

package/dist/components/pages/not-found/not-found.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/pages/not-found/not-found.tsx"],"sourcesContent":["\"use client\";\nimport { motion } from \"framer-motion\";\nimport { Layout } from \"../../primitives/layout/layout\";\nimport { Button } from \"../../primitives/buttons/button\";\nimport { LinkButton } from \"../../primitives/buttons/link-button\";\nimport { Heading, Icon, Stack, Text, TextCode } from \"../../primitives/index\";\nimport { useEffect } from \"react\";\n\ninterface NotFoundProps {\n  pathname?: string;\n  homeHref?: string;\n  onGoBack?: () => void;\n}\n\nexport const NotFound = ({\n  pathname,\n  homeHref = \"/\",\n  onGoBack,\n}: NotFoundProps) => {\n  const currentPath =\n    pathname ?? (typeof window !== \"undefined\" ? window.location.pathname : \"\");\n\n  useEffect(() => {\n    console.error(\n      \"404 Error: User attempted to access non-existent route:\",\n      currentPath,\n    );\n  }, [currentPath]);\n\n  const handleGoBack = () => {\n    if (onGoBack) {\n      onGoBack();\n    } else if (typeof window !== \"undefined\") {\n      window.history.back();\n    }\n  };\n\n  return (\n    <Layout bgColor=\"background\">\n      <Layout.Col1 className=\"sg:flex sg:flex-col sg:items-center sg:justify-center sg:py-32 sg:text-center\">\n        <motion.div\n          initial={{ opacity: 0, y: 20 }}\n          animate={{ opacity: 1, y: 0 }}\n          exit={{ opacity: 0, y: -20 }}\n          transition={{ duration: 0.3 }}\n          className=\"sg:flex sg:flex-col sg:items-center\"\n        >\n          <Icon size=\"xxl\" className=\"sg:mb-6\" icon=\"SearchX\" />\n\n          <Heading variant=\"h1\" className=\"sg:mb-2\" foreground=\"primary\">\n            404\n          </Heading>\n\n          <Heading variant=\"h2\" className=\"sg:mb-3\">\n            Page not found\n          </Heading>\n\n          <Text foreground=\"muted-foreground\" className=\"sg:max-w-md sg:mb-8\">\n            The page <TextCode>{currentPath}</TextCode> doesn&apos;t exist. It\n            may have been moved or removed.\n          </Text>\n\n          <Stack wrap=\"wrap\" justifyContent=\"center\" gap={3} direction=\"row\">\n            <LinkButton to={homeHref} iconStart=\"House\">\n              Back to Home\n            </LinkButton>\n            <Button\n              variant=\"outline\"\n              onClick={handleGoBack}\n              iconStart=\"ArrowLeft\"\n            >\n              Go Back\n            </Button>\n          </Stack>\n        </motion.div>\n      </Layout.Col1>\n    </Layout>\n  );\n};\n"],"mappings":";AA+CU,cAUA,YAVA;AA9CV,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,SAAS,MAAM,OAAO,MAAM,gBAAgB;AACrD,SAAS,iBAAiB;AAQnB,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA,WAAW;AAAA,EACX;AACF,MAAqB;AACnB,QAAM,cACJ,aAAa,OAAO,WAAW,cAAc,OAAO,SAAS,WAAW;AAE1E,YAAU,MAAM;AACd,YAAQ;AAAA,MACN;AAAA,MACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,eAAe,MAAM;AACzB,QAAI,UAAU;AACZ,eAAS;AAAA,IACX,WAAW,OAAO,WAAW,aAAa;AACxC,aAAO,QAAQ,KAAK;AAAA,IACtB;AAAA,EACF;AAEA,SACE,oBAAC,UAAO,SAAQ,cACd,8BAAC,OAAO,MAAP,EAAY,WAAU,iFACrB;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,SAAS,EAAE,SAAS,GAAG,GAAG,GAAG;AAAA,MAC7B,SAAS,EAAE,SAAS,GAAG,GAAG,EAAE;AAAA,MAC5B,MAAM,EAAE,SAAS,GAAG,GAAG,IAAI;AAAA,MAC3B,YAAY,EAAE,UAAU,IAAI;AAAA,MAC5B,WAAU;AAAA,MAEV;AAAA,4BAAC,QAAK,MAAK,OAAM,WAAU,WAAU,MAAK,WAAU;AAAA,QAEpD,oBAAC,WAAQ,SAAQ,MAAK,WAAU,WAAU,YAAW,WAAU,iBAE/D;AAAA,QAEA,oBAAC,WAAQ,SAAQ,MAAK,WAAU,WAAU,4BAE1C;AAAA,QAEA,qBAAC,QAAK,YAAW,oBAAmB,WAAU,uBAAsB;AAAA;AAAA,UACzD,oBAAC,YAAU,uBAAY;AAAA,UAAW;AAAA,WAE7C;AAAA,QAEA,qBAAC,SAAM,MAAK,QAAO,gBAAe,UAAS,KAAK,GAAG,WAAU,OAC3D;AAAA,8BAAC,cAAW,IAAI,UAAU,WAAU,SAAQ,0BAE5C;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAAS;AAAA,cACT,WAAU;AAAA,cACX;AAAA;AAAA,UAED;AAAA,WACF;AAAA;AAAA;AAAA,EACF,GACF,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/pages/not-found/not-found.tsx"],"sourcesContent":["\"use client\";\nimport { motion } from \"framer-motion\";\nimport { Layout } from \"../../primitives/layout/layout\";\nimport { Button } from \"../../primitives/buttons/button\";\nimport { LinkButton } from \"../../primitives/buttons/link-button\";\nimport { Heading, Icon, Stack, Text, TextCode } from \"../../primitives/index\";\nimport { useEffect } from \"react\";\n\ninterface NotFoundProps {\n  pathname?: string;\n  homeHref?: string;\n  onGoBack?: () => void;\n}\n\nexport const NotFound = ({\n  pathname,\n  homeHref = \"/\",\n  onGoBack,\n}: NotFoundProps) => {\n  const currentPath =\n    pathname ?? (typeof window !== \"undefined\" ? window.location.pathname : \"\");\n\n  useEffect(() => {\n    console.error(\n      \"404 Error: User attempted to access non-existent route:\",\n      currentPath,\n    );\n  }, [currentPath]);\n\n  const handleGoBack = () => {\n    if (onGoBack) {\n      onGoBack();\n    } else if (typeof window !== \"undefined\") {\n      window.history.back();\n    }\n  };\n\n  return (\n    <Layout bgColor=\"background\">\n      <Layout.Col1 className=\"sg:flex sg:flex-col sg:items-center sg:justify-center sg:py-32 sg:text-center\">\n        <motion.div\n          initial={{ opacity: 1, y: 20 }}\n          animate={{ opacity: 1, y: 0 }}\n          exit={{ opacity: 1, y: -20 }}\n          transition={{ duration: 0.3 }}\n          className=\"sg:flex sg:flex-col sg:items-center\"\n        >\n          <Icon size=\"xxl\" className=\"sg:mb-6\" icon=\"SearchX\" />\n\n          <Heading variant=\"h1\" className=\"sg:mb-2\" foreground=\"primary\">\n            404\n          </Heading>\n\n          <Heading variant=\"h2\" className=\"sg:mb-3\">\n            Page not found\n          </Heading>\n\n          <Text foreground=\"muted-foreground\" className=\"sg:max-w-md sg:mb-8\">\n            The page <TextCode>{currentPath}</TextCode> doesn&apos;t exist. It\n            may have been moved or removed.\n          </Text>\n\n          <Stack wrap=\"wrap\" justifyContent=\"center\" gap={3} direction=\"row\">\n            <LinkButton to={homeHref} iconStart=\"House\">\n              Back to Home\n            </LinkButton>\n            <Button\n              variant=\"outline\"\n              onClick={handleGoBack}\n              iconStart=\"ArrowLeft\"\n            >\n              Go Back\n            </Button>\n          </Stack>\n        </motion.div>\n      </Layout.Col1>\n    </Layout>\n  );\n};\n"],"mappings":";AA+CU,cAUA,YAVA;AA9CV,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,SAAS,MAAM,OAAO,MAAM,gBAAgB;AACrD,SAAS,iBAAiB;AAQnB,MAAM,WAAW,CAAC;AAAA,EACvB;AAAA,EACA,WAAW;AAAA,EACX;AACF,MAAqB;AACnB,QAAM,cACJ,aAAa,OAAO,WAAW,cAAc,OAAO,SAAS,WAAW;AAE1E,YAAU,MAAM;AACd,YAAQ;AAAA,MACN;AAAA,MACA;AAAA,IACF;AAAA,EACF,GAAG,CAAC,WAAW,CAAC;AAEhB,QAAM,eAAe,MAAM;AACzB,QAAI,UAAU;AACZ,eAAS;AAAA,IACX,WAAW,OAAO,WAAW,aAAa;AACxC,aAAO,QAAQ,KAAK;AAAA,IACtB;AAAA,EACF;AAEA,SACE,oBAAC,UAAO,SAAQ,cACd,8BAAC,OAAO,MAAP,EAAY,WAAU,iFACrB;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,SAAS,EAAE,SAAS,GAAG,GAAG,GAAG;AAAA,MAC7B,SAAS,EAAE,SAAS,GAAG,GAAG,EAAE;AAAA,MAC5B,MAAM,EAAE,SAAS,GAAG,GAAG,IAAI;AAAA,MAC3B,YAAY,EAAE,UAAU,IAAI;AAAA,MAC5B,WAAU;AAAA,MAEV;AAAA,4BAAC,QAAK,MAAK,OAAM,WAAU,WAAU,MAAK,WAAU;AAAA,QAEpD,oBAAC,WAAQ,SAAQ,MAAK,WAAU,WAAU,YAAW,WAAU,iBAE/D;AAAA,QAEA,oBAAC,WAAQ,SAAQ,MAAK,WAAU,WAAU,4BAE1C;AAAA,QAEA,qBAAC,QAAK,YAAW,oBAAmB,WAAU,uBAAsB;AAAA;AAAA,UACzD,oBAAC,YAAU,uBAAY;AAAA,UAAW;AAAA,WAE7C;AAAA,QAEA,qBAAC,SAAM,MAAK,QAAO,gBAAe,UAAS,KAAK,GAAG,WAAU,OAC3D;AAAA,8BAAC,cAAW,IAAI,UAAU,WAAU,SAAQ,0BAE5C;AAAA,UACA;AAAA,YAAC;AAAA;AAAA,cACC,SAAQ;AAAA,cACR,SAAS;AAAA,cACT,WAAU;AAAA,cACX;AAAA;AAAA,UAED;AAAA,WACF;AAAA;AAAA;AAAA,EACF,GACF,GACF;AAEJ;","names":[]}

package/dist/components/pages/privacy/privacy-page.js

@@ -44,9 +44,9 @@ const PrivacyPage = ({
   return /* @__PURE__ */ jsxs(
     motion.div,
     {
-      initial: { opacity: 0, y: 20 },
+      initial: { opacity: 1, y: 20 },
       animate: { opacity: 1, y: 0 },
-      exit: { opacity: 0, y: -20 },
+      exit: { opacity: 1, y: -20 },
       transition: { duration: 0.3 },
       className: "sg:w-full",
       children: [

package/dist/components/pages/privacy/privacy-page.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/pages/privacy/privacy-page.tsx"],"sourcesContent":["\"use client\";\nimport { motion } from \"framer-motion\";\nimport {\n  Layout,\n  Separator,\n  Heading,\n  Text,\n  Icon,\n  Stack,\n} from \"../../primitives/index\";\n\ninterface Section {\n  title: string;\n  content: string;\n}\n\ninterface PrivacyPageProps {\n  title?: string;\n  effectiveDate?: string;\n  introText?: string;\n  sections?: Section[];\n}\n\nconst defaultSections: Section[] = [\n  {\n    title: \"Information We Collect\",\n    content:\n      \"We collect minimal information to provide and improve our service. This may include your name and email address when you use our contact form, and standard analytics data such as browser type, device, and pages visited.\",\n  },\n  {\n    title: \"How We Use Your Information\",\n    content:\n      \"Your information is used solely to respond to your inquiries, improve our content and user experience, and maintain the security of our website. We do not sell, trade, or rent your personal data to third parties.\",\n  },\n  {\n    title: \"Cookies & Analytics\",\n    content:\n      \"We use cookies to remember your preferences (such as dark mode) and basic analytics to understand how our content is used. You can disable cookies in your browser settings at any time.\",\n  },\n  {\n    title: \"Data Retention\",\n    content:\n      \"We retain personal data only as long as necessary to fulfill the purposes outlined above. Contact form submissions are kept for up to 12 months before being deleted.\",\n  },\n  {\n    title: \"Your Rights\",\n    content:\n      \"You have the right to access, correct, or delete your personal data at any time. To make a request, please reach out via our contact page and we will respond within 30 days.\",\n  },\n  {\n    title: \"Changes to This Policy\",\n    content:\n      \"We may update this policy from time to time. Changes will be posted on this page with an updated effective date. Continued use of the site constitutes acceptance of the revised policy.\",\n  },\n];\n\nexport const PrivacyPage = ({\n  title = \"Privacy Policy\",\n  effectiveDate = \"March 1, 2025\",\n  introText = \"At Storied, we take your privacy seriously. This policy outlines what data we collect, how we use it, and your rights as a visitor to our site.\",\n  sections = defaultSections,\n}: PrivacyPageProps) => {\n  return (\n    <motion.div\n      initial={{ opacity: 0, y: 20 }}\n      animate={{ opacity: 1, y: 0 }}\n      exit={{ opacity: 0, y: -20 }}\n      transition={{ duration: 0.3 }}\n      className=\"sg:w-full\"\n    >\n      <Layout type=\"container\" className=\"sg:border-b sg:border-border\">\n        <Layout.Col1 className=\"sg:py-16 sg:px-4 sg:text-center sg:mx-auto\">\n          <Icon\n            size=\"lg\"\n            color=\"primary\"\n            className=\"sg:mx-auto sg:mb-4\"\n            icon=\"Shield\"\n          />\n          <Heading variant=\"h1\" className=\"sg:mb-3\">\n            {title}\n          </Heading>\n          <Text foreground=\"muted-foreground\">Effective {effectiveDate}</Text>\n        </Layout.Col1>\n      </Layout>\n      <Layout>\n        <Layout.Col1 className=\"sg:py-16 sg:px-4\">\n          <Text\n            foreground=\"muted-foreground\"\n            className=\"sg:leading-relaxed sg:mb-10\"\n          >\n            {introText}\n          </Text>\n          <Stack gap={8}>\n            {sections.map((s, i) => (\n              <div key={i}>\n                <Heading variant=\"h3\" as=\"h2\" className=\"sg:mb-2\">\n                  {s.title}\n                </Heading>\n                <Text\n                  foreground=\"muted-foreground\"\n                  className=\"sg:leading-relaxed\"\n                >\n                  {s.content}\n                </Text>\n                {i < sections.length - 1 && <Separator className=\"sg:mt-8\" />}\n              </div>\n            ))}\n          </Stack>\n        </Layout.Col1>\n      </Layout>\n    </motion.div>\n  );\n};\n"],"mappings":";AAwEU,cASA,YATA;AAvEV,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAcP,MAAM,kBAA6B;AAAA,EACjC;AAAA,IACE,OAAO;AAAA,IACP,SACE;AAAA,EACJ;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,SACE;AAAA,EACJ;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,SACE;AAAA,EACJ;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,SACE;AAAA,EACJ;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,SACE;AAAA,EACJ;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,SACE;AAAA,EACJ;AACF;AAEO,MAAM,cAAc,CAAC;AAAA,EAC1B,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,WAAW;AACb,MAAwB;AACtB,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,SAAS,EAAE,SAAS,GAAG,GAAG,GAAG;AAAA,MAC7B,SAAS,EAAE,SAAS,GAAG,GAAG,EAAE;AAAA,MAC5B,MAAM,EAAE,SAAS,GAAG,GAAG,IAAI;AAAA,MAC3B,YAAY,EAAE,UAAU,IAAI;AAAA,MAC5B,WAAU;AAAA,MAEV;AAAA,4BAAC,UAAO,MAAK,aAAY,WAAU,gCACjC,+BAAC,OAAO,MAAP,EAAY,WAAU,8CACrB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAM;AAAA,cACN,WAAU;AAAA,cACV,MAAK;AAAA;AAAA,UACP;AAAA,UACA,oBAAC,WAAQ,SAAQ,MAAK,WAAU,WAC7B,iBACH;AAAA,UACA,qBAAC,QAAK,YAAW,oBAAmB;AAAA;AAAA,YAAW;AAAA,aAAc;AAAA,WAC/D,GACF;AAAA,QACA,oBAAC,UACC,+BAAC,OAAO,MAAP,EAAY,WAAU,oBACrB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,YAAW;AAAA,cACX,WAAU;AAAA,cAET;AAAA;AAAA,UACH;AAAA,UACA,oBAAC,SAAM,KAAK,GACT,mBAAS,IAAI,CAAC,GAAG,MAChB,qBAAC,SACC;AAAA,gCAAC,WAAQ,SAAQ,MAAK,IAAG,MAAK,WAAU,WACrC,YAAE,OACL;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,YAAW;AAAA,gBACX,WAAU;AAAA,gBAET,YAAE;AAAA;AAAA,YACL;AAAA,YACC,IAAI,SAAS,SAAS,KAAK,oBAAC,aAAU,WAAU,WAAU;AAAA,eAVnD,CAWV,CACD,GACH;AAAA,WACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../../../src/components/pages/privacy/privacy-page.tsx"],"sourcesContent":["\"use client\";\nimport { motion } from \"framer-motion\";\nimport {\n  Layout,\n  Separator,\n  Heading,\n  Text,\n  Icon,\n  Stack,\n} from \"../../primitives/index\";\n\ninterface Section {\n  title: string;\n  content: string;\n}\n\ninterface PrivacyPageProps {\n  title?: string;\n  effectiveDate?: string;\n  introText?: string;\n  sections?: Section[];\n}\n\nconst defaultSections: Section[] = [\n  {\n    title: \"Information We Collect\",\n    content:\n      \"We collect minimal information to provide and improve our service. This may include your name and email address when you use our contact form, and standard analytics data such as browser type, device, and pages visited.\",\n  },\n  {\n    title: \"How We Use Your Information\",\n    content:\n      \"Your information is used solely to respond to your inquiries, improve our content and user experience, and maintain the security of our website. We do not sell, trade, or rent your personal data to third parties.\",\n  },\n  {\n    title: \"Cookies & Analytics\",\n    content:\n      \"We use cookies to remember your preferences (such as dark mode) and basic analytics to understand how our content is used. You can disable cookies in your browser settings at any time.\",\n  },\n  {\n    title: \"Data Retention\",\n    content:\n      \"We retain personal data only as long as necessary to fulfill the purposes outlined above. Contact form submissions are kept for up to 12 months before being deleted.\",\n  },\n  {\n    title: \"Your Rights\",\n    content:\n      \"You have the right to access, correct, or delete your personal data at any time. To make a request, please reach out via our contact page and we will respond within 30 days.\",\n  },\n  {\n    title: \"Changes to This Policy\",\n    content:\n      \"We may update this policy from time to time. Changes will be posted on this page with an updated effective date. Continued use of the site constitutes acceptance of the revised policy.\",\n  },\n];\n\nexport const PrivacyPage = ({\n  title = \"Privacy Policy\",\n  effectiveDate = \"March 1, 2025\",\n  introText = \"At Storied, we take your privacy seriously. This policy outlines what data we collect, how we use it, and your rights as a visitor to our site.\",\n  sections = defaultSections,\n}: PrivacyPageProps) => {\n  return (\n    <motion.div\n      initial={{ opacity: 1, y: 20 }}\n      animate={{ opacity: 1, y: 0 }}\n      exit={{ opacity: 1, y: -20 }}\n      transition={{ duration: 0.3 }}\n      className=\"sg:w-full\"\n    >\n      <Layout type=\"container\" className=\"sg:border-b sg:border-border\">\n        <Layout.Col1 className=\"sg:py-16 sg:px-4 sg:text-center sg:mx-auto\">\n          <Icon\n            size=\"lg\"\n            color=\"primary\"\n            className=\"sg:mx-auto sg:mb-4\"\n            icon=\"Shield\"\n          />\n          <Heading variant=\"h1\" className=\"sg:mb-3\">\n            {title}\n          </Heading>\n          <Text foreground=\"muted-foreground\">Effective {effectiveDate}</Text>\n        </Layout.Col1>\n      </Layout>\n      <Layout>\n        <Layout.Col1 className=\"sg:py-16 sg:px-4\">\n          <Text\n            foreground=\"muted-foreground\"\n            className=\"sg:leading-relaxed sg:mb-10\"\n          >\n            {introText}\n          </Text>\n          <Stack gap={8}>\n            {sections.map((s, i) => (\n              <div key={i}>\n                <Heading variant=\"h3\" as=\"h2\" className=\"sg:mb-2\">\n                  {s.title}\n                </Heading>\n                <Text\n                  foreground=\"muted-foreground\"\n                  className=\"sg:leading-relaxed\"\n                >\n                  {s.content}\n                </Text>\n                {i < sections.length - 1 && <Separator className=\"sg:mt-8\" />}\n              </div>\n            ))}\n          </Stack>\n        </Layout.Col1>\n      </Layout>\n    </motion.div>\n  );\n};\n"],"mappings":";AAwEU,cASA,YATA;AAvEV,SAAS,cAAc;AACvB;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAcP,MAAM,kBAA6B;AAAA,EACjC;AAAA,IACE,OAAO;AAAA,IACP,SACE;AAAA,EACJ;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,SACE;AAAA,EACJ;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,SACE;AAAA,EACJ;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,SACE;AAAA,EACJ;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,SACE;AAAA,EACJ;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,SACE;AAAA,EACJ;AACF;AAEO,MAAM,cAAc,CAAC;AAAA,EAC1B,QAAQ;AAAA,EACR,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,WAAW;AACb,MAAwB;AACtB,SACE;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACC,SAAS,EAAE,SAAS,GAAG,GAAG,GAAG;AAAA,MAC7B,SAAS,EAAE,SAAS,GAAG,GAAG,EAAE;AAAA,MAC5B,MAAM,EAAE,SAAS,GAAG,GAAG,IAAI;AAAA,MAC3B,YAAY,EAAE,UAAU,IAAI;AAAA,MAC5B,WAAU;AAAA,MAEV;AAAA,4BAAC,UAAO,MAAK,aAAY,WAAU,gCACjC,+BAAC,OAAO,MAAP,EAAY,WAAU,8CACrB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAM;AAAA,cACN,WAAU;AAAA,cACV,MAAK;AAAA;AAAA,UACP;AAAA,UACA,oBAAC,WAAQ,SAAQ,MAAK,WAAU,WAC7B,iBACH;AAAA,UACA,qBAAC,QAAK,YAAW,oBAAmB;AAAA;AAAA,YAAW;AAAA,aAAc;AAAA,WAC/D,GACF;AAAA,QACA,oBAAC,UACC,+BAAC,OAAO,MAAP,EAAY,WAAU,oBACrB;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,YAAW;AAAA,cACX,WAAU;AAAA,cAET;AAAA;AAAA,UACH;AAAA,UACA,oBAAC,SAAM,KAAK,GACT,mBAAS,IAAI,CAAC,GAAG,MAChB,qBAAC,SACC;AAAA,gCAAC,WAAQ,SAAQ,MAAK,IAAG,MAAK,WAAU,WACrC,YAAE,OACL;AAAA,YACA;AAAA,cAAC;AAAA;AAAA,gBACC,YAAW;AAAA,gBACX,WAAU;AAAA,gBAET,YAAE;AAAA;AAAA,YACL;AAAA,YACC,IAAI,SAAS,SAAS,KAAK,oBAAC,aAAU,WAAU,WAAU;AAAA,eAVnD,CAWV,CACD,GACH;AAAA,WACF,GACF;AAAA;AAAA;AAAA,EACF;AAEJ;","names":[]}

package/dist/components/pages/resources/resources-page.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+
+declare function ResourcesPage(): React.JSX.Element;
+
+export { ResourcesPage };

package/dist/components/pages/resources/resources-page.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { Layout, Heading, Text } from "../../primitives/index.js";
+import { Card, CardContent } from "../../blocks/cards/card.js";
+function ResourcesPage() {
+  return /* @__PURE__ */ jsx(Layout, { type: "col", className: "sg:py-16", children: /* @__PURE__ */ jsx(Layout.Col1, { hideDiv: true, className: "sg:max-w-3xl", children: /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      initial: { opacity: 1, y: 20 },
+      animate: { opacity: 1, y: 0 },
+      transition: { duration: 0.3 },
+      children: [
+        /* @__PURE__ */ jsx(Heading, { variant: "h1", className: "sg:mb-2", children: "Resources" }),
+        /* @__PURE__ */ jsx(Text, { foreground: "muted-foreground", className: "sg:mb-10", children: "Curated links, tools, and references for creators." }),
+        /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsx(CardContent, { className: "sg:py-8 sg:text-center", children: /* @__PURE__ */ jsx(Text, { foreground: "muted-foreground", children: "This is a placeholder page. Content coming soon." }) }) })
+      ]
+    }
+  ) }) });
+}
+export {
+  ResourcesPage
+};
+//# sourceMappingURL=resources-page.js.map

package/dist/components/pages/resources/resources-page.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/pages/resources/resources-page.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { motion } from \"framer-motion\";\r\nimport { Layout, Heading, Text } from \"../../primitives/index\";\r\nimport { Card, CardContent } from \"../../blocks/cards/card\";\r\n\r\nexport function ResourcesPage() {\r\n\treturn (\r\n\t\t<Layout type=\"col\" className=\"sg:py-16\">\r\n\t\t\t<Layout.Col1 hideDiv className=\"sg:max-w-3xl\">\r\n\t\t\t\t<motion.div\r\n\t\t\t\t\tinitial={{ opacity: 1, y: 20 }}\r\n\t\t\t\t\tanimate={{ opacity: 1, y: 0 }}\r\n\t\t\t\t\ttransition={{ duration: 0.3 }}\r\n\t\t\t\t>\r\n\t\t\t\t\t<Heading variant=\"h1\" className=\"sg:mb-2\">\r\n\t\t\t\t\t\tResources\r\n\t\t\t\t\t</Heading>\r\n\t\t\t\t\t<Text foreground=\"muted-foreground\" className=\"sg:mb-10\">\r\n\t\t\t\t\t\tCurated links, tools, and references for creators.\r\n\t\t\t\t\t</Text>\r\n\t\t\t\t\t<Card>\r\n\t\t\t\t\t\t<CardContent className=\"sg:py-8 sg:text-center\">\r\n\t\t\t\t\t\t\t<Text foreground=\"muted-foreground\">\r\n\t\t\t\t\t\t\t\tThis is a placeholder page. Content coming soon.\r\n\t\t\t\t\t\t\t</Text>\r\n\t\t\t\t\t\t</CardContent>\r\n\t\t\t\t\t</Card>\r\n\t\t\t\t</motion.div>\r\n\t\t\t</Layout.Col1>\r\n\t\t</Layout>\r\n\t);\r\n}\r\n"],"mappings":";AAUI,SAKC,KALD;AARJ,SAAS,cAAc;AACvB,SAAS,QAAQ,SAAS,YAAY;AACtC,SAAS,MAAM,mBAAmB;AAE3B,SAAS,gBAAgB;AAC/B,SACC,oBAAC,UAAO,MAAK,OAAM,WAAU,YAC5B,8BAAC,OAAO,MAAP,EAAY,SAAO,MAAC,WAAU,gBAC9B;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACA,SAAS,EAAE,SAAS,GAAG,GAAG,GAAG;AAAA,MAC7B,SAAS,EAAE,SAAS,GAAG,GAAG,EAAE;AAAA,MAC5B,YAAY,EAAE,UAAU,IAAI;AAAA,MAE5B;AAAA,4BAAC,WAAQ,SAAQ,MAAK,WAAU,WAAU,uBAE1C;AAAA,QACA,oBAAC,QAAK,YAAW,oBAAmB,WAAU,YAAW,gEAEzD;AAAA,QACA,oBAAC,QACA,8BAAC,eAAY,WAAU,0BACtB,8BAAC,QAAK,YAAW,oBAAmB,8DAEpC,GACD,GACD;AAAA;AAAA;AAAA,EACD,GACD,GACD;AAEF;","names":[]}

package/dist/components/pages/startpage/startpage.js

@@ -22,20 +22,22 @@ function StartPage() {
       /* @__PURE__ */ jsx(Layout, { as: "section", className: "sg:py-16", children: /* @__PURE__ */ jsxs(Layout.Col1, { hideDiv: true, children: [
         /* @__PURE__ */ jsxs("div", { className: "sg:flex sg:items-end sg:justify-between sg:flex-wrap sg:mb-10", children: [
           /* @__PURE__ */ jsxs("div", { children: [
-            /* @__PURE__ */ jsx(Heading, { variant: "h2", children: "Latest Stories" }),
-            /* @__PURE__ */ jsx(Text, { foreground: "muted-foreground", className: "sg:mt-2", children: "Exploring design, culture, and the quiet art of living." })
+            /* @__PURE__ */ jsx(Heading, { variant: "h2", children: "Featured" }),
+            /* @__PURE__ */ jsx(Text, { foreground: "muted-foreground", className: "sg:mt-2", children: "Hand-picked stories we love." })
           ] }),
           /* @__PURE__ */ jsx(Link, { to: "/posts", iconEnd: "ArrowRight", children: "View all" })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "sg:grid sg:grid-cols-[repeat(auto-fit,minmax(min(230px,100%),1fr))] sg:gap-8", children: posts.slice(0, 3).map((post) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx("div", { className: "sg:grid sg:grid-cols-[repeat(auto-fit,minmax(min(230px,100%),1fr))] sg:gap-8", children: posts.filter((p) => p.featured).map((post) => /* @__PURE__ */ jsx(
           BlogPostCard,
           {
             id: post.id,
+            slug: post.slug,
             image: post.primaryImage,
             categories: post.categories,
             date: post.date,
             title: post.title,
-            excerpt: post.excerpt
+            excerpt: post.excerpt,
+            clickableCategories: true
           },
           post.id
         )) })