ruler-components 0.1.0

package/components/docs/tooltip-doc-page.tsx

@@ -0,0 +1,357 @@
+"use client";
+
+import React, { useState } from "react";
+import {
+  ArrowUpRight,
+  Check,
+  Copy,
+  HelpCircle,
+  Info,
+  Link2,
+  MessageCircle,
+  MoreHorizontal,
+  Pencil,
+  Settings,
+  Share2,
+  Trash2,
+} from "lucide-react";
+import { Tooltip } from "@/components/ui/tooltip";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  DocsAccessibility,
+  DocsApiSection,
+  DocsApiTable,
+  DocsDemoPanel,
+  DocsPage,
+  DocsPageHeader,
+  DocsSection,
+  DocsSectionGrid,
+} from "@/components/docs/docs-page";
+import { cn } from "@/lib/cn";
+
+const API_ROWS = [
+  { prop: "content", type: "ReactNode", default: "—", description: "Tooltip content" },
+  { prop: "children", type: "ReactNode", default: "—", description: "Trigger element" },
+  { prop: "side", type: '"top" | "bottom" | "left" | "right"', default: '"top"', description: "Preferred side relative to trigger" },
+  { prop: "align", type: '"start" | "center" | "end"', default: '"center"', description: "Alignment along the side axis" },
+  { prop: "sideOffset", type: "number", default: "8", description: "Distance from the trigger in pixels" },
+  { prop: "delayDuration", type: "number", default: "250", description: "Delay before showing (ms)" },
+  { prop: "disabled", type: "boolean", default: "false", description: "Disables the tooltip" },
+];
+
+const ACCESSIBILITY_ITEMS = [
+  "Appears on hover and keyboard focus.",
+  "Uses role=\"tooltip\" and aria-describedby.",
+  "Keep content short and supplementary.",
+  "Don't hide essential information in tooltips only.",
+  "Tooltip position adjusts to stay within the viewport.",
+];
+
+type Side = "top" | "bottom" | "left" | "right";
+type Align = "start" | "center" | "end";
+
+const SIDES: Side[] = ["top", "bottom", "left", "right"];
+const ALIGNS: Align[] = ["start", "center", "end"];
+
+function codeFor(side: Side, align: Align) {
+  const props = [side !== "top" && `side="${side}"`, align !== "center" && `align="${align}"`]
+    .filter(Boolean)
+    .join(" ");
+  const open = props ? `<Tooltip content="Hint text" ${props}>` : `<Tooltip content="Hint text">`;
+  return `${open}\n  <Button>Hover me</Button>\n</Tooltip>`;
+}
+
+export function TooltipDocPage() {
+  const [side, setSide] = useState<Side>("top");
+  const [align, setAlign] = useState<Align>("center");
+  const [copied, setCopied] = useState(false);
+
+  const snippet = codeFor(side, align);
+
+  function copySnippet() {
+    navigator.clipboard.writeText(snippet).catch(() => {});
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1200);
+  }
+
+  return (
+    <DocsPage>
+      <DocsPageHeader
+        icon={MessageCircle}
+        title="Tooltip"
+        description="Displays contextual hints on hover or focus — perfect for icon buttons, truncated text, and helper labels."
+      />
+
+      <DocsSection
+        first
+        title="Playground"
+        description="Hover the trigger to preview a tooltip on any side and alignment — copy the exact markup to match."
+      >
+        <div className="overflow-hidden rounded-2xl border border-zinc-200 shadow-[0_2px_8px_rgba(0,0,0,0.04)] dark:border-zinc-800 dark:shadow-[0_2px_8px_rgba(0,0,0,0.2)]">
+          <div className="relative flex min-h-[14rem] items-center justify-center overflow-visible bg-zinc-50 p-6 dark:bg-zinc-900/40">
+            <div
+              aria-hidden
+              className="pointer-events-none absolute inset-0 opacity-[0.4] dark:opacity-[0.15]"
+              style={{
+                backgroundImage:
+                  "linear-gradient(to right, rgb(161 161 170 / 0.35) 1px, transparent 1px), linear-gradient(to bottom, rgb(161 161 170 / 0.35) 1px, transparent 1px)",
+                backgroundSize: "24px 24px",
+              }}
+            />
+            <div className="relative">
+              <Tooltip key={`${side}-${align}`} content="Hint text" side={side} align={align}>
+                <Button>Hover me</Button>
+              </Tooltip>
+            </div>
+          </div>
+
+          <div className="flex flex-col gap-5 border-t border-zinc-200 p-5 dark:border-zinc-800">
+            <div className="flex flex-wrap items-start justify-between gap-6">
+              <div>
+                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
+                  Side
+                </p>
+                <div className="flex flex-wrap items-center gap-1 rounded-lg border border-zinc-200 bg-zinc-50 p-1 dark:border-zinc-800 dark:bg-zinc-900/60">
+                  {SIDES.map((s) => (
+                    <button
+                      key={s}
+                      type="button"
+                      onClick={() => setSide(s)}
+                      className={cn(
+                        "rounded-md px-3 py-1.5 text-xs font-medium capitalize transition-colors",
+                        side === s
+                          ? "bg-white text-zinc-900 shadow-sm dark:bg-zinc-800 dark:text-white"
+                          : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"
+                      )}
+                    >
+                      {s}
+                    </button>
+                  ))}
+                </div>
+              </div>
+
+              <div>
+                <p className="mb-2 text-xs font-medium uppercase tracking-wide text-zinc-400 dark:text-zinc-500">
+                  Align
+                </p>
+                <div className="flex flex-wrap items-center gap-1 rounded-lg border border-zinc-200 bg-zinc-50 p-1 dark:border-zinc-800 dark:bg-zinc-900/60">
+                  {ALIGNS.map((a) => (
+                    <button
+                      key={a}
+                      type="button"
+                      onClick={() => setAlign(a)}
+                      className={cn(
+                        "rounded-md px-3 py-1.5 text-xs font-medium capitalize transition-colors",
+                        align === a
+                          ? "bg-white text-zinc-900 shadow-sm dark:bg-zinc-800 dark:text-white"
+                          : "text-zinc-500 hover:text-zinc-800 dark:text-zinc-400 dark:hover:text-zinc-200"
+                      )}
+                    >
+                      {a}
+                    </button>
+                  ))}
+                </div>
+              </div>
+            </div>
+
+            <div className="flex items-center justify-between gap-3 rounded-xl bg-zinc-900 px-4 py-3 dark:bg-black">
+              <pre className="overflow-x-auto font-mono text-[13px] leading-relaxed text-zinc-100">
+                <code>{snippet}</code>
+              </pre>
+              <Tooltip content={copied ? "Copied!" : "Copy code"}>
+                <button
+                  type="button"
+                  onClick={copySnippet}
+                  className="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg text-zinc-400 transition-colors hover:bg-white/10 hover:text-white"
+                >
+                  {copied ? <Check className="h-4 w-4 text-emerald-400" /> : <Copy className="h-4 w-4" />}
+                </button>
+              </Tooltip>
+            </div>
+          </div>
+        </div>
+      </DocsSection>
+
+      <DocsSection
+        title="Default"
+        description="Hover or focus any control below to see the tooltip."
+      >
+        <Card className="max-w-2xl">
+          <CardHeader className="border-b border-zinc-100 dark:border-zinc-800">
+            <div className="flex items-center justify-between gap-4">
+              <div>
+                <CardTitle>Share document</CardTitle>
+                <CardDescription>Invite teammates or copy a link.</CardDescription>
+              </div>
+              <Badge variant="outline">Live preview</Badge>
+            </div>
+          </CardHeader>
+          <CardContent className="flex flex-wrap items-center gap-2 pt-6">
+            <Tooltip content="Copy link to clipboard">
+              <Button size="sm" variant="ghost">
+                <Link2 className="h-4 w-4" />
+                Copy link
+              </Button>
+            </Tooltip>
+            <Tooltip content="Share with your team">
+              <Button size="sm" variant="ghost">
+                <Share2 className="h-4 w-4" />
+                Share
+              </Button>
+            </Tooltip>
+            <Tooltip content="Open in new tab">
+              <Button size="sm" variant="ghost">
+                <ArrowUpRight className="h-4 w-4" />
+                Open
+              </Button>
+            </Tooltip>
+            <div className="mx-1 h-5 w-px bg-zinc-200 dark:bg-zinc-700" />
+            <Tooltip content="Copy to clipboard">
+              <Button size="sm">
+                <Copy className="h-4 w-4" />
+                Copy
+              </Button>
+            </Tooltip>
+          </CardContent>
+        </Card>
+      </DocsSection>
+
+      <DocsSection
+        title="Positions"
+        description="Place tooltips on any side of the trigger."
+      >
+        <DocsDemoPanel className="!py-0">
+          <div className="relative flex min-h-[280px] w-full items-center justify-center py-16">
+            <div className="flex flex-col items-center gap-8">
+              <Tooltip content="Appears above" side="top">
+                <Button variant="ghost" size="sm" className="min-w-[5.5rem] bg-white shadow-sm dark:bg-zinc-900">
+                  Top
+                </Button>
+              </Tooltip>
+
+              <div className="flex items-center gap-8">
+                <Tooltip content="Appears to the left" side="left">
+                  <Button variant="ghost" size="sm" className="min-w-[5.5rem] bg-white shadow-sm dark:bg-zinc-900">
+                    Left
+                  </Button>
+                </Tooltip>
+
+                <div className="flex h-16 w-16 items-center justify-center rounded-2xl border border-zinc-200 bg-white text-xs font-medium text-zinc-500 shadow-[0_2px_8px_rgba(0,0,0,0.04)] dark:border-zinc-700 dark:bg-zinc-900 dark:text-zinc-400 dark:shadow-[0_2px_8px_rgba(0,0,0,0.2)]">
+                  Hover
+                </div>
+
+                <Tooltip content="Appears to the right" side="right">
+                  <Button variant="ghost" size="sm" className="min-w-[5.5rem] bg-white shadow-sm dark:bg-zinc-900">
+                    Right
+                  </Button>
+                </Tooltip>
+              </div>
+
+              <Tooltip content="Appears below" side="bottom">
+                <Button variant="ghost" size="sm" className="min-w-[5.5rem] bg-white shadow-sm dark:bg-zinc-900">
+                  Bottom
+                </Button>
+              </Tooltip>
+            </div>
+          </div>
+        </DocsDemoPanel>
+      </DocsSection>
+
+      <DocsSection>
+        <DocsSectionGrid className="lg:grid-cols-2">
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Editor Toolbar</CardTitle>
+              <CardDescription>Icon-only actions with accessible labels.</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="inline-flex items-center gap-0.5 rounded-xl border border-zinc-200 bg-white p-1 shadow-sm dark:border-zinc-700 dark:bg-zinc-900">
+                <Tooltip content="Edit" side="bottom">
+                  <Button variant="ghost" size="sm" aria-label="Edit" className="h-8 w-8 p-0">
+                    <Pencil className="h-4 w-4" />
+                  </Button>
+                </Tooltip>
+                <Tooltip content="Settings" side="bottom">
+                  <Button variant="ghost" size="sm" aria-label="Settings" className="h-8 w-8 p-0">
+                    <Settings className="h-4 w-4" />
+                  </Button>
+                </Tooltip>
+                <Tooltip content="More options" side="bottom">
+                  <Button variant="ghost" size="sm" aria-label="More options" className="h-8 w-8 p-0">
+                    <MoreHorizontal className="h-4 w-4" />
+                  </Button>
+                </Tooltip>
+                <div className="mx-0.5 h-5 w-px bg-zinc-200 dark:bg-zinc-700" />
+                <Tooltip content="Delete" side="bottom">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    aria-label="Delete"
+                    className="h-8 w-8 p-0 text-red-500 hover:text-red-600 dark:text-red-400"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </Button>
+                </Tooltip>
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle className="text-base">Helper &amp; Status</CardTitle>
+              <CardDescription>Supplementary context without cluttering the UI.</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+              <div className="flex items-center gap-2">
+                <span className="text-sm font-medium text-zinc-700 dark:text-zinc-200">API Rate limit</span>
+                <Tooltip content="100 requests per minute on the free plan">
+                  <button
+                    type="button"
+                    className="inline-flex h-5 w-5 items-center justify-center rounded-full text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-300"
+                    aria-label="Rate limit info"
+                  >
+                    <HelpCircle className="h-3.5 w-3.5" />
+                  </button>
+                </Tooltip>
+                <Badge variant="info">Pro</Badge>
+              </div>
+              <Tooltip content="⌘K to search · ⌘/ for commands">
+                <Button variant="ghost" size="sm" className="w-full justify-start">
+                  <Info className="h-4 w-4" />
+                  Keyboard shortcuts
+                </Button>
+              </Tooltip>
+            </CardContent>
+          </Card>
+        </DocsSectionGrid>
+      </DocsSection>
+
+      <DocsSection title="Disabled">
+        <Card className="max-w-md">
+          <CardContent className="flex items-center justify-between gap-4 pt-6">
+            <div>
+              <p className="text-sm font-medium text-zinc-800 dark:text-zinc-100">Export report</p>
+              <p className="mt-0.5 text-xs text-zinc-500 dark:text-zinc-400">Tooltip won&apos;t show when disabled</p>
+            </div>
+            <Tooltip content="Not available on your plan" disabled>
+              <Button size="sm" disabled>Export</Button>
+            </Tooltip>
+          </CardContent>
+        </Card>
+      </DocsSection>
+
+      <DocsApiSection>
+        <DocsApiTable title="API Reference" rows={API_ROWS} />
+        <DocsAccessibility items={ACCESSIBILITY_ITEMS} />
+      </DocsApiSection>
+    </DocsPage>
+  );
+}

package/components/docs/usage-section.tsx

@@ -0,0 +1,21 @@
+import { CodeBlock } from "@/components/ui/code-block";
+import { DocsSection } from "@/components/docs/docs-page";
+
+const USAGE_CODE = `import { Button } from 'ruler.ui'
+
+export function App() {
+  return <Button variant="primary">Get Started</Button>
+}`;
+
+export function UsageSection() {
+  return (
+    <DocsSection
+      title="Usage"
+      description="Import components from ruler.ui and start building."
+    >
+      <div className="overflow-hidden rounded-2xl border border-zinc-200/50 bg-zinc-950 shadow-2xl dark:border-zinc-800/60">
+        <CodeBlock code={USAGE_CODE} filename="App.tsx" />
+      </div>
+    </DocsSection>
+  );
+}

package/components/icons/discord.tsx

@@ -0,0 +1,9 @@
+import type { SVGProps } from "react";
+
+export function DiscordIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
+      <path d="M20.32 4.37a19.79 19.79 0 0 0-4.89-1.52.07.07 0 0 0-.08.04c-.21.37-.44.86-.61 1.25a18.27 18.27 0 0 0-5.49 0 12.6 12.6 0 0 0-.62-1.25.08.08 0 0 0-.08-.04 19.74 19.74 0 0 0-4.88 1.51.07.07 0 0 0-.04.03C.53 9.05-.32 13.58.1 18.06a.08.08 0 0 0 .03.06 19.9 19.9 0 0 0 5.99 3.03.08.08 0 0 0 .08-.03c.46-.63.87-1.3 1.23-1.99a.08.08 0 0 0-.04-.11c-.65-.25-1.27-.55-1.87-.89a.08.08 0 0 1-.01-.13c.13-.09.25-.19.37-.29a.07.07 0 0 1 .08-.01c3.93 1.79 8.18 1.79 12.06 0a.07.07 0 0 1 .08.01c.12.1.24.2.37.29a.08.08 0 0 1-.01.13c-.6.34-1.22.64-1.87.89a.08.08 0 0 0-.04.11c.36.7.78 1.36 1.23 1.99a.08.08 0 0 0 .08.03 19.84 19.84 0 0 0 6-3.03.08.08 0 0 0 .03-.06c.5-5.18-.84-9.67-3.55-13.66a.06.06 0 0 0-.03-.03ZM8.02 15.33c-1.18 0-2.16-1.09-2.16-2.42 0-1.33.96-2.42 2.16-2.42 1.21 0 2.18 1.1 2.16 2.42 0 1.33-.95 2.42-2.16 2.42Zm7.97 0c-1.18 0-2.16-1.09-2.16-2.42 0-1.33.96-2.42 2.16-2.42 1.21 0 2.18 1.1 2.16 2.42 0 1.33-.95 2.42-2.16 2.42Z" />
+    </svg>
+  );
+}

package/components/icons/github.tsx

@@ -0,0 +1,9 @@
+import type { SVGProps } from "react";
+
+export function GithubIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
+      <path d="M12 .5C5.65.5.5 5.65.5 12c0 5.09 3.29 9.4 7.86 10.93.57.1.79-.25.79-.55 0-.27-.01-1.17-.02-2.12-3.2.7-3.88-1.35-3.88-1.35-.52-1.33-1.28-1.68-1.28-1.68-1.04-.72.08-.7.08-.7 1.15.08 1.76 1.19 1.76 1.19 1.03 1.75 2.7 1.25 3.36.95.1-.75.4-1.25.72-1.53-2.55-.29-5.23-1.28-5.23-5.68 0-1.25.44-2.28 1.18-3.08-.12-.29-.51-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.78 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.24 2.76.12 3.05.74.8 1.18 1.83 1.18 3.08 0 4.41-2.69 5.38-5.25 5.67.41.36.78 1.06.78 2.14 0 1.55-.01 2.79-.01 3.17 0 .3.21.66.79.55A11.5 11.5 0 0 0 23.5 12c0-6.35-5.15-11.5-11.5-11.5Z" />
+    </svg>
+  );
+}

package/components/icons/x.tsx

@@ -0,0 +1,9 @@
+import type { SVGProps } from "react";
+
+export function XIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true" {...props}>
+      <path d="M18.24 2.25h3.31l-7.23 8.26 8.5 11.24h-6.66l-5.21-6.82-5.96 6.82H1.68l7.73-8.84L1.25 2.25h6.83l4.71 6.23zm-1.16 17.52h1.83L7.08 4.13H5.12z" />
+    </svg>
+  );
+}

package/components/installation-section.tsx

@@ -0,0 +1,34 @@
+import { Download } from "lucide-react";
+import { PackageManagerTabs } from "@/components/ui/package-manager-tabs";
+
+export function InstallationSection({
+  as: Heading = "h2",
+  caption,
+}: {
+  as?: "h1" | "h2";
+  caption?: string;
+}) {
+  return (
+    <div className="grid gap-8 lg:grid-cols-[minmax(0,300px)_1fr] lg:items-start">
+      <div>
+        <div className="flex items-center gap-2.5">
+          <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-zinc-900 text-white dark:bg-white dark:text-zinc-900">
+            <Download className="h-4 w-4" />
+          </span>
+          <Heading className="text-2xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
+            Installation
+          </Heading>
+        </div>
+        <p className="mt-2 text-sm text-zinc-500 dark:text-zinc-400">
+          Install ruler.ui using your preferred package manager.
+        </p>
+        {caption ? (
+          <p className="mt-4 text-sm text-zinc-500 dark:text-zinc-400">{caption}</p>
+        ) : null}
+      </div>
+      <div>
+        <PackageManagerTabs />
+      </div>
+    </div>
+  );
+}

package/components/landing/feature-highlights.tsx

@@ -0,0 +1,105 @@
+import { Accessibility, Code2, SlidersHorizontal, ArrowRight } from "lucide-react";
+import { GithubIcon } from "@/components/icons/github";
+
+const FEATURES = [
+  {
+    index: "01",
+    icon: Accessibility,
+    title: "Accessible",
+    description: "Built with accessibility in mind from the ground up.",
+    tags: ["WCAG 2.2", "WAI-ARIA"],
+  },
+  {
+    index: "02",
+    icon: SlidersHorizontal,
+    title: "Customizable",
+    description: "Easily customize components to match your brand.",
+    tags: ["THEMING", "VARIANTS"],
+  },
+  {
+    index: "03",
+    icon: Code2,
+    title: "Developer First",
+    description: "TypeScript-first with excellent developer experience.",
+    tags: ["TYPESCRIPT", "DX"],
+  },
+  {
+    index: "04",
+    icon: GithubIcon,
+    title: "Open Source",
+    description: "MIT licensed and open for everyone.",
+    tags: ["GITHUB"],
+  },
+];
+
+export function FeatureHighlights() {
+  return (
+    <section className="w-full min-w-0 bg-white px-4 py-16 font-sans dark:bg-zinc-950 sm:px-6 sm:py-20">
+      <div className="mx-auto max-w-7xl">
+        <div className="mb-16 text-center">
+          <div className="mb-4 flex items-center justify-center gap-4">
+            <div className="h-px w-8 bg-zinc-300 dark:bg-zinc-700" />
+            <span className="text-[10px] font-bold uppercase tracking-[0.2em] text-zinc-500 dark:text-zinc-400">
+              Built for modern teams
+            </span>
+            <div className="h-px w-8 bg-zinc-300 dark:bg-zinc-700" />
+          </div>
+          <h2 className="mb-4 text-3xl font-bold text-zinc-900 dark:text-white md:text-4xl">
+            Everything you need to build better interfaces
+          </h2>
+          <p className="mx-auto max-w-2xl text-sm text-zinc-500 dark:text-zinc-400">
+            Thoughtful primitives designed for accessibility, flexibility, and a
+            great developer experience.
+          </p>
+        </div>
+
+        <div className="grid grid-cols-1 gap-5 sm:grid-cols-2 lg:grid-cols-4">
+          {FEATURES.map((feature) => (
+            <div
+              key={feature.title}
+              className="group relative flex flex-col rounded-2xl border border-zinc-200/80 p-7 shadow-[0_2px_8px_rgba(0,0,0,0.04)] transition-all duration-200 hover:-translate-y-0.5 hover:border-zinc-300 hover:shadow-[0_8px_24px_rgba(0,0,0,0.08)] dark:border-zinc-800/80 dark:shadow-[0_2px_8px_rgba(0,0,0,0.25)] dark:hover:border-zinc-700 dark:hover:shadow-[0_8px_24px_rgba(0,0,0,0.4)]"
+            >
+              <div className="flex items-center justify-between">
+                <span className="flex h-11 w-11 items-center justify-center rounded-xl border border-zinc-200 bg-zinc-50 text-zinc-900 dark:border-white/10 dark:bg-white/[0.06] dark:text-zinc-100">
+                  <feature.icon className="h-5 w-5" />
+                </span>
+                <span className="text-sm font-medium text-zinc-400 dark:text-zinc-500">
+                  {feature.index}
+                </span>
+              </div>
+
+              <h3 className="mt-5 text-lg font-bold text-zinc-900 dark:text-white">
+                {feature.title}
+              </h3>
+              <p className="mt-2 text-sm leading-relaxed text-zinc-500 dark:text-zinc-400">
+                {feature.description}
+              </p>
+
+              <div className="mt-auto flex items-center justify-between border-t border-zinc-100 pt-4 dark:border-zinc-800/80">
+                <div className="flex items-center gap-2">
+                  {feature.tags.map((tag, tagIdx) => (
+                    <span
+                      key={tag}
+                      className="flex items-center text-[10px] font-bold text-zinc-500 dark:text-zinc-400"
+                    >
+                      {tag}
+                      {tagIdx < feature.tags.length - 1 && (
+                        <span className="mx-2 text-zinc-300 dark:text-zinc-700">
+                          •
+                        </span>
+                      )}
+                    </span>
+                  ))}
+                </div>
+                <ArrowRight
+                  size={16}
+                  className="text-zinc-400 transition-transform group-hover:translate-x-0.5 group-hover:text-zinc-900 dark:text-zinc-500 dark:group-hover:text-white"
+                />
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/components/landing/footer-strip.tsx

@@ -0,0 +1,45 @@
+import { CheckCircle2, FileCode2, Paintbrush } from "lucide-react";
+import { GithubIcon } from "@/components/icons/github";
+
+const ITEMS = [
+  {
+    icon: FileCode2,
+    title: "TypeScript First",
+    description: "Built with TypeScript",
+  },
+  {
+    icon: CheckCircle2,
+    title: "Accessible",
+    description: "WAI-ARIA compliant",
+  },
+  {
+    icon: Paintbrush,
+    title: "Customizable",
+    description: "Theming and variants",
+  },
+  {
+    icon: GithubIcon,
+    title: "Open Source",
+    description: "MIT Licensed",
+  },
+];
+
+export function FooterStrip() {
+  return (
+    <div className="mb-16 rounded-2xl bg-zinc-950 p-5 sm:p-10">
+      <div className="grid grid-cols-2 gap-6 sm:grid-cols-4">
+        {ITEMS.map((item) => (
+          <div key={item.title} className="flex min-w-0 items-center gap-3">
+            <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-white/10 bg-white/[0.06] text-zinc-100">
+              <item.icon className="h-4 w-4" />
+            </span>
+            <div className="min-w-0">
+              <p className="text-sm font-semibold text-zinc-50">{item.title}</p>
+              <p className="text-xs text-zinc-400">{item.description}</p>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/components/landing/hero-card.tsx

@@ -0,0 +1,14 @@
+import { Navbar } from "@/components/landing/navbar";
+import { Hero } from "@/components/landing/hero";
+import { HeroSpotlight } from "@/components/landing/hero-spotlight";
+
+export function HeroCard() {
+  return (
+    <HeroSpotlight>
+      <div className="relative px-4 pb-16 pt-5 sm:px-10 sm:pb-24 sm:pt-8">
+        <Navbar />
+        <Hero />
+      </div>
+    </HeroSpotlight>
+  );
+}