saasaloy 0.1.0

package/templates/base/packages/ui/src/blocks/feature-grid.tsx

@@ -0,0 +1,185 @@
+import type { ComponentType } from "react";
+import {
+  ActivityIcon,
+  AwardIcon,
+  BellIcon,
+  BookOpenIcon,
+  BoxIcon,
+  CalendarIcon,
+  ClockIcon,
+  CloudIcon,
+  CodeIcon,
+  CreditCardIcon,
+  DatabaseIcon,
+  FileTextIcon,
+  GaugeIcon,
+  GlobeIcon,
+  GraduationCapIcon,
+  HandshakeIcon,
+  HeadphonesIcon,
+  KeyIcon,
+  LayersIcon,
+  LayoutGridIcon,
+  ListChecksIcon,
+  LockIcon,
+  MapPinIcon,
+  MessageCircleIcon,
+  PenLineIcon,
+  PlugIcon,
+  ReceiptIcon,
+  RefreshCwIcon,
+  RocketIcon,
+  SearchIcon,
+  ServerIcon,
+  ShieldCheckIcon,
+  SmartphoneIcon,
+  SparklesIcon,
+  TargetIcon,
+  TerminalIcon,
+  TrendingUpIcon,
+  UsersIcon,
+  WalletIcon,
+  WorkflowIcon,
+  ZapIcon,
+} from "lucide-react";
+
+import {
+  Card,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@repo/ui/components/card";
+import { landing } from "@repo/ui/content/landing";
+
+// Fully static — rendered without a `client:*` directive, so it ships zero JavaScript.
+// That is also why the registry below can be long without costing anything: it is read at
+// build time and nothing in it reaches the browser.
+//
+// The words come from ../content/landing.ts, and so does each feature's icon — but as a
+// *name*, not a component. Astro serializes island props, so a component cannot cross the
+// .astro boundary; the registry that turns `"zap"` into `ZapIcon` therefore lives here,
+// beside the render. What that buys is the thing a copy rewrite actually needs: change
+// what a feature is about, change its glyph, one file, no block edit.
+
+export interface Feature {
+  /** Stable key — the translation key, never the array position (see the content file). */
+  id: string;
+  icon: ComponentType<{ className?: string }>;
+  title: string;
+  description: string;
+}
+
+// The names `landing.features.items[].icon` may use. Add a lucide import and a line here to
+// widen it — these are ordinary source files you own, and the set below is a starting
+// vocabulary, not a limit. Keep the keys kebab-case, matching lucide's own icon names, so
+// picking one is a lookup rather than a guess.
+const FEATURE_ICONS: Record<string, ComponentType<{ className?: string }>> = {
+  activity: ActivityIcon,
+  award: AwardIcon,
+  bell: BellIcon,
+  "book-open": BookOpenIcon,
+  box: BoxIcon,
+  calendar: CalendarIcon,
+  clock: ClockIcon,
+  cloud: CloudIcon,
+  code: CodeIcon,
+  "credit-card": CreditCardIcon,
+  database: DatabaseIcon,
+  "file-text": FileTextIcon,
+  gauge: GaugeIcon,
+  globe: GlobeIcon,
+  "graduation-cap": GraduationCapIcon,
+  handshake: HandshakeIcon,
+  headphones: HeadphonesIcon,
+  key: KeyIcon,
+  layers: LayersIcon,
+  "layout-grid": LayoutGridIcon,
+  "list-checks": ListChecksIcon,
+  lock: LockIcon,
+  "map-pin": MapPinIcon,
+  "message-circle": MessageCircleIcon,
+  "pen-line": PenLineIcon,
+  plug: PlugIcon,
+  receipt: ReceiptIcon,
+  "refresh-cw": RefreshCwIcon,
+  rocket: RocketIcon,
+  search: SearchIcon,
+  server: ServerIcon,
+  "shield-check": ShieldCheckIcon,
+  smartphone: SmartphoneIcon,
+  sparkles: SparklesIcon,
+  target: TargetIcon,
+  terminal: TerminalIcon,
+  "trending-up": TrendingUpIcon,
+  users: UsersIcon,
+  wallet: WalletIcon,
+  workflow: WorkflowIcon,
+  zap: ZapIcon,
+};
+
+// `Object.hasOwn` first, not a bare index: `FEATURE_ICONS[name]` walks the prototype chain,
+// so a name of `constructor` or `toString` resolves to an inherited function — not nullish,
+// so a `?? SparklesIcon` fallback never fires and React is handed something that isn't a
+// component. Icon names are author-controlled and the saasaloy-landing-copy skill writes
+// them, so this is reachable. Same reasoning as interpolate() in ../lib/interpolate.ts.
+function iconFor(name: string): ComponentType<{ className?: string }> {
+  return (
+    (Object.hasOwn(FEATURE_ICONS, name) ? FEATURE_ICONS[name] : undefined) ??
+    SparklesIcon
+  );
+}
+
+const defaultFeatures: Feature[] = landing.features.items.map((item) => ({
+  ...item,
+  icon: iconFor(item.icon),
+}));
+
+export interface FeatureGridProps {
+  id?: string;
+  title?: string;
+  description?: string;
+  features?: Feature[];
+}
+
+export function FeatureGrid({
+  id = "features",
+  title = landing.features.title,
+  description = landing.features.description,
+  features = defaultFeatures,
+}: FeatureGridProps) {
+  return (
+    <section
+      id={id}
+      className="mx-auto w-full max-w-6xl scroll-mt-20 px-6 py-20"
+    >
+      <div className="mx-auto max-w-2xl text-center">
+        <h2 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
+          {title}
+        </h2>
+        <p className="text-muted-foreground mt-4 text-base text-pretty">
+          {description}
+        </p>
+      </div>
+
+      <div className="mt-14 grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {features.map((feature) => {
+          const Icon = feature.icon;
+          return (
+            <Card key={feature.id} className="h-full">
+              <CardHeader>
+                <span
+                  aria-hidden="true"
+                  className="bg-muted text-foreground mb-3 flex size-9 items-center justify-center rounded-lg"
+                >
+                  <Icon className="size-4" />
+                </span>
+                <CardTitle>{feature.title}</CardTitle>
+                <CardDescription>{feature.description}</CardDescription>
+              </CardHeader>
+            </Card>
+          );
+        })}
+      </div>
+    </section>
+  );
+}

package/templates/base/packages/ui/src/blocks/footer.tsx

@@ -0,0 +1,99 @@
+import { Separator } from "@repo/ui/components/separator";
+import { landing, ui } from "@repo/ui/content/landing";
+import { interpolate } from "@repo/ui/lib/interpolate";
+
+// Fully static — rendered without a `client:*` directive, so it ships zero JavaScript.
+// It carries the legal links the base template ships pages for (/terms, /privacy);
+// the navbar keeps only same-page anchors.
+//
+// The words come from ../content/landing.ts; the hrefs stay here, because a URL is
+// structure rather than copy. Blanking a label in the content file drops that link, and a
+// group whose links are all blank disappears — that is how a removed section loses its
+// footer entry without editing this file.
+
+export interface FooterLink {
+  label: string;
+  href: string;
+}
+
+export interface FooterGroup {
+  heading: string;
+  links: FooterLink[];
+}
+
+const defaultGroups: FooterGroup[] = [
+  {
+    heading: landing.footer.groupProduct,
+    links: [
+      { label: landing.footer.linkFeatures, href: "#features" },
+      { label: landing.footer.linkPricing, href: "#pricing" },
+      { label: landing.footer.linkFaq, href: "#faq" },
+    ],
+  },
+  {
+    heading: landing.footer.groupLegal,
+    links: [
+      { label: landing.footer.linkTerms, href: "/terms" },
+      { label: landing.footer.linkPrivacy, href: "/privacy" },
+    ],
+  },
+]
+  .map((group) => ({
+    ...group,
+    links: group.links.filter((link) => link.label !== ""),
+  }))
+  .filter((group) => group.heading !== "" && group.links.length > 0);
+
+export interface FooterProps {
+  siteName?: string;
+  tagline?: string;
+  groups?: FooterGroup[];
+  /** Defaults to the current year at render time. */
+  year?: number;
+}
+
+export function Footer({
+  siteName = "Acme",
+  tagline = landing.footer.tagline,
+  groups = defaultGroups,
+  year = new Date().getFullYear(),
+}: FooterProps) {
+  return (
+    <footer className="border-border/60 mt-8 border-t">
+      <div className="mx-auto w-full max-w-6xl px-6 py-14">
+        <div className="grid gap-10 sm:grid-cols-2 lg:grid-cols-4">
+          <div className="lg:col-span-2">
+            <p className="text-sm font-semibold tracking-tight">{siteName}</p>
+            <p className="text-muted-foreground mt-2 max-w-xs text-sm text-pretty">
+              {tagline}
+            </p>
+          </div>
+
+          {groups.map((group) => (
+            <nav key={group.heading} aria-label={group.heading}>
+              <p className="text-sm font-medium">{group.heading}</p>
+              <ul className="mt-3 flex flex-col gap-2">
+                {group.links.map((link) => (
+                  <li key={link.href}>
+                    <a
+                      href={link.href}
+                      className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+                    >
+                      {link.label}
+                    </a>
+                  </li>
+                ))}
+              </ul>
+            </nav>
+          ))}
+        </div>
+
+        <Separator className="my-10" />
+
+        <p className="text-muted-foreground text-sm">
+          {interpolate(ui.footer.copyright, { year, siteName })}
+        </p>
+      </div>
+    </footer>
+  );
+}

package/templates/base/packages/ui/src/blocks/hero.tsx

@@ -0,0 +1,84 @@
+import { ArrowRightIcon } from "lucide-react";
+
+import { Badge } from "@repo/ui/components/badge";
+import { buttonVariants } from "@repo/ui/components/button";
+import { landing } from "@repo/ui/content/landing";
+import { interpolate } from "@repo/ui/lib/interpolate";
+import { cn } from "@repo/ui/lib/utils";
+
+// Fully static — no state, no effects, so index.astro renders it with no `client:*`
+// directive and it ships zero JavaScript. Keep it that way: adding a hook here forces
+// the whole above-the-fold block into a hydrated island.
+//
+// Every word comes from ../content/landing.ts. Edit the copy there, not here.
+
+export interface HeroAction {
+  label: string;
+  href: string;
+}
+
+export interface HeroProps {
+  siteName?: string;
+  eyebrow?: string;
+  title?: string;
+  description?: string;
+  primaryAction?: HeroAction;
+  /** Pass `null` to render a single call to action. */
+  secondaryAction?: HeroAction | null;
+}
+
+// Hoisted out of the parameter list: an object literal written as a default prop is a
+// fresh object on every render, which defeats memoization downstream. The labels still
+// come from the content module — only the wrapper object is stable.
+const DEFAULT_PRIMARY_ACTION: HeroAction = {
+  label: landing.hero.primaryActionLabel,
+  href: "#cta",
+};
+const DEFAULT_SECONDARY_ACTION: HeroAction = {
+  label: landing.hero.secondaryActionLabel,
+  href: "#pricing",
+};
+
+export function Hero({
+  siteName = "Acme",
+  eyebrow = landing.hero.eyebrow,
+  title = landing.hero.title,
+  description = interpolate(landing.hero.description, { siteName }),
+  primaryAction = DEFAULT_PRIMARY_ACTION,
+  secondaryAction = DEFAULT_SECONDARY_ACTION,
+}: HeroProps) {
+  return (
+    <section className="mx-auto w-full max-w-6xl px-6 py-24 sm:py-32">
+      <div className="mx-auto flex max-w-3xl flex-col items-center text-center">
+        {eyebrow && (
+          <Badge variant="secondary" className="mb-6">
+            {eyebrow}
+          </Badge>
+        )}
+        <h1 className="text-4xl font-semibold tracking-tight text-balance sm:text-5xl md:text-6xl">
+          {title}
+        </h1>
+        <p className="text-muted-foreground mt-6 max-w-2xl text-base text-pretty sm:text-lg">
+          {description}
+        </p>
+        <div className="mt-10 flex flex-col items-center gap-3 sm:flex-row">
+          <a
+            href={primaryAction.href}
+            className={cn(buttonVariants({ size: "lg" }))}
+          >
+            {primaryAction.label}
+            <ArrowRightIcon data-icon="inline-end" />
+          </a>
+          {secondaryAction && (
+            <a
+              href={secondaryAction.href}
+              className={cn(buttonVariants({ variant: "outline", size: "lg" }))}
+            >
+              {secondaryAction.label}
+            </a>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}

package/templates/base/packages/ui/src/blocks/navbar.tsx

@@ -0,0 +1,159 @@
+import { useEffect, useRef, useState } from "react";
+import { MenuIcon, XIcon } from "lucide-react";
+
+import { Button, buttonVariants } from "@repo/ui/components/button";
+import { landing, ui } from "@repo/ui/content/landing";
+import { cn } from "@repo/ui/lib/utils";
+
+// Marketing blocks are self-contained on purpose: one file, one exported component, no
+// shared block barrel — but the words all live in ../content/landing.ts. Astro renders
+// each `client:*` component as its own React root, so a compound primitive split across
+// the .astro boundary would throw "must be used within" — composing the whole block here
+// is what avoids that.
+//
+// This is the only block above the fold that needs JS (the mobile menu), which is why
+// index.astro hydrates it with `client:idle` while the static blocks ship none.
+
+export interface NavbarLink {
+  label: string;
+  href: string;
+}
+
+// Same-page anchors, matching the ids the other blocks render. The anchor is structure and
+// stays here; the label comes from content, and blanking it there drops the link — which
+// is how a removed section loses its nav entry without editing this file.
+//
+// The CTA button is the exception, and its href comes from content too: it is the one
+// control here that may point off the page, at a signup or a waitlist (content shape
+// rule 5c).
+const defaultLinks: NavbarLink[] = [
+  { label: landing.navbar.linkFeatures, href: "#features" },
+  { label: landing.navbar.linkPricing, href: "#pricing" },
+  { label: landing.navbar.linkFaq, href: "#faq" },
+].filter((link) => link.label !== "");
+
+export interface NavbarProps {
+  siteName?: string;
+  links?: NavbarLink[];
+  ctaLabel?: string;
+  ctaHref?: string;
+}
+
+export function Navbar({
+  siteName = "Acme",
+  links = defaultLinks,
+  ctaLabel = landing.navbar.ctaLabel,
+  ctaHref = landing.navbar.ctaHref,
+}: NavbarProps) {
+  const [open, setOpen] = useState(false);
+  const toggleRef = useRef<HTMLButtonElement>(null);
+
+  // Escape is the expected way out of an open menu, and focus has to go back to the
+  // toggle — the panel unmounts under the user's cursor otherwise, dropping focus to
+  // the document and sending the next Tab to the top of the page.
+  // The listener stays attached while the menu is closed and exits on the first line
+  // instead — one early `return` plus a cleanup `return` in the same effect is two
+  // return shapes, which `consistent-return` rejects.
+  useEffect(() => {
+    function handleKeyDown(event: KeyboardEvent) {
+      if (!open || event.key !== "Escape") {
+        return;
+      }
+      setOpen(false);
+      toggleRef.current?.focus();
+    }
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open]);
+
+  return (
+    <header className="border-border/60 bg-background/80 sticky top-0 z-50 w-full border-b backdrop-blur">
+      <div className="mx-auto flex h-14 w-full max-w-6xl items-center justify-between gap-6 px-6">
+        <a href="/" className="text-sm font-semibold tracking-tight">
+          {siteName}
+        </a>
+
+        <nav
+          aria-label={ui.navbar.mainNavLabel}
+          className="hidden items-center gap-6 md:flex"
+        >
+          {links.map((link) => (
+            <a
+              key={link.href}
+              href={link.href}
+              className="text-muted-foreground hover:text-foreground text-sm transition-colors"
+            >
+              {link.label}
+            </a>
+          ))}
+        </nav>
+
+        <div className="flex items-center gap-2">
+          <a
+            href={ctaHref}
+            className={cn(
+              buttonVariants({ size: "sm" }),
+              "hidden md:inline-flex"
+            )}
+          >
+            {ctaLabel}
+          </a>
+          {/* The one interactive control in the header. The panel below is rendered
+              conditionally, so `aria-controls` is set only while it exists — an idref
+              pointing at nothing is invalid ARIA. */}
+          <Button
+            ref={toggleRef}
+            variant="ghost"
+            size="icon-sm"
+            className="md:hidden"
+            aria-controls={open ? "navbar-mobile-menu" : undefined}
+            aria-expanded={open}
+            aria-label={open ? ui.navbar.closeMenu : ui.navbar.openMenu}
+            onClick={() => {
+              setOpen((previous) => !previous);
+            }}
+          >
+            {open ? <XIcon /> : <MenuIcon />}
+          </Button>
+        </div>
+      </div>
+
+      {open && (
+        <div
+          id="navbar-mobile-menu"
+          className="border-border/60 border-t md:hidden"
+        >
+          <nav
+            aria-label={ui.navbar.mobileNavLabel}
+            className="mx-auto flex w-full max-w-6xl flex-col gap-1 px-6 py-4"
+          >
+            {links.map((link) => (
+              <a
+                key={link.href}
+                href={link.href}
+                onClick={() => {
+                  setOpen(false);
+                }}
+                className="text-muted-foreground hover:bg-muted hover:text-foreground rounded-lg px-2 py-2 text-sm transition-colors"
+              >
+                {link.label}
+              </a>
+            ))}
+            <a
+              href={ctaHref}
+              onClick={() => {
+                setOpen(false);
+              }}
+              className={cn(buttonVariants({ size: "sm" }), "mt-2")}
+            >
+              {ctaLabel}
+            </a>
+          </nav>
+        </div>
+      )}
+    </header>
+  );
+}

package/templates/base/packages/ui/src/blocks/pricing-table.tsx

@@ -0,0 +1,175 @@
+import { useState } from "react";
+import { CheckIcon } from "lucide-react";
+
+import { Badge } from "@repo/ui/components/badge";
+import { Button, buttonVariants } from "@repo/ui/components/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@repo/ui/components/card";
+import { landing, ui } from "@repo/ui/content/landing";
+import { interpolate } from "@repo/ui/lib/interpolate";
+import { cn } from "@repo/ui/lib/utils";
+
+// The billing-period toggle is the only reason this block is hydrated. index.astro gives
+// it `client:visible`, so the JavaScript is fetched when the section scrolls into view
+// rather than on load. Delete the toggle and the block goes fully static again.
+//
+// This block holds no tier data at all: the whole list lives in ../content/landing.ts
+// (`landing.pricing.tiers`), prices included, so pricing is rewritten in one file and
+// never hunted for in markup.
+
+export interface PricingTier {
+  /** Stable key, never the array position (see the content file). */
+  id: string;
+  name: string;
+  description: string;
+  /** Price per month, in whole currency units. `null` renders "Custom". */
+  monthlyPrice: number | null;
+  /** Effective per-month price when billed annually. `null` renders "Custom". */
+  annualPrice: number | null;
+  features: string[];
+  ctaLabel: string;
+  ctaHref: string;
+  /** Visually promotes one tier. Set it on at most one. */
+  featured?: boolean;
+}
+
+export interface PricingTableProps {
+  id?: string;
+  title?: string;
+  description?: string;
+  tiers?: PricingTier[];
+  /** Shown beside the annual option; pass an empty string to hide it. */
+  annualNote?: string;
+  currencySymbol?: string;
+}
+
+export function PricingTable({
+  id = "pricing",
+  title = landing.pricing.title,
+  description = landing.pricing.description,
+  tiers = landing.pricing.tiers,
+  annualNote = landing.pricing.annualNote,
+  currencySymbol = landing.pricing.currencySymbol,
+}: PricingTableProps) {
+  const [annual, setAnnual] = useState(false);
+
+  return (
+    <section
+      id={id}
+      className="mx-auto w-full max-w-6xl scroll-mt-20 px-6 py-20"
+    >
+      <div className="mx-auto max-w-2xl text-center">
+        <h2 className="text-3xl font-semibold tracking-tight text-balance sm:text-4xl">
+          {title}
+        </h2>
+        <p className="text-muted-foreground mt-4 text-base text-pretty">
+          {description}
+        </p>
+
+        <div className="mt-8 flex items-center justify-center gap-3">
+          <div
+            role="group"
+            aria-label={ui.pricing.billingPeriodLabel}
+            className="border-border inline-flex items-center gap-1 rounded-xl border p-1"
+          >
+            <Button
+              size="sm"
+              variant={annual ? "ghost" : "secondary"}
+              aria-pressed={!annual}
+              onClick={() => {
+                setAnnual(false);
+              }}
+            >
+              {ui.pricing.monthly}
+            </Button>
+            <Button
+              size="sm"
+              variant={annual ? "secondary" : "ghost"}
+              aria-pressed={annual}
+              onClick={() => {
+                setAnnual(true);
+              }}
+            >
+              {ui.pricing.annual}
+            </Button>
+          </div>
+          {annualNote && <Badge variant="outline">{annualNote}</Badge>}
+        </div>
+      </div>
+
+      <div className="mt-14 grid items-start gap-4 lg:grid-cols-3">
+        {tiers.map((tier) => {
+          const price = annual ? tier.annualPrice : tier.monthlyPrice;
+          const featured = tier.featured ?? false;
+          return (
+            <Card
+              key={tier.id}
+              className={cn("h-full", featured && "ring-primary ring-2")}
+            >
+              <CardHeader>
+                <div className="flex items-center justify-between gap-2">
+                  <CardTitle>{tier.name}</CardTitle>
+                  {featured && <Badge>{ui.pricing.featuredBadge}</Badge>}
+                </div>
+                <CardDescription>{tier.description}</CardDescription>
+              </CardHeader>
+
+              <CardContent>
+                <p className="flex items-baseline gap-1">
+                  <span className="text-3xl font-semibold tracking-tight">
+                    {price === null
+                      ? ui.pricing.customPrice
+                      : interpolate(ui.pricing.price, {
+                          currencySymbol,
+                          price,
+                        })}
+                  </span>
+                  {price !== null && (
+                    <span className="text-muted-foreground text-sm">
+                      {annual ? ui.pricing.perMonthAnnual : ui.pricing.perMonth}
+                    </span>
+                  )}
+                </p>
+
+                <ul className="mt-6 flex flex-col gap-2.5">
+                  {tier.features.map((feature) => (
+                    <li
+                      key={feature}
+                      className="flex items-start gap-2 text-sm"
+                    >
+                      <CheckIcon
+                        aria-hidden="true"
+                        className="mt-0.5 size-4 shrink-0"
+                      />
+                      <span className="text-muted-foreground">{feature}</span>
+                    </li>
+                  ))}
+                </ul>
+              </CardContent>
+
+              <CardFooter>
+                <a
+                  href={tier.ctaHref}
+                  className={cn(
+                    buttonVariants({
+                      variant: featured ? "default" : "outline",
+                    }),
+                    "w-full"
+                  )}
+                >
+                  {tier.ctaLabel}
+                </a>
+              </CardFooter>
+            </Card>
+          );
+        })}
+      </div>
+    </section>
+  );
+}