@vvedantb/ui 0.8.0 → 0.9.0

package/src/marketing/landing.css

@@ -0,0 +1,271 @@
+/* Instrument Serif ships only regular (+ italic). Disable faux-bold. */
+.landing-wordmark-text {
+  font-family: var(--font-instrumentSerif);
+  font-weight: 400;
+  font-synthesis: none;
+}
+
+@keyframes landing-graph-dash {
+  to {
+    stroke-dashoffset: -20;
+  }
+}
+
+.landing-graph-dash {
+  animation: landing-graph-dash 12s linear infinite;
+}
+
+@keyframes landing-preview-pulse {
+  0%,
+  100% {
+    opacity: 0.35;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+.landing-preview-pulse {
+  animation: landing-preview-pulse 2.8s ease-in-out infinite;
+}
+
+@keyframes landing-pulse-dot {
+  0%,
+  100% {
+    opacity: 0.45;
+    box-shadow: 0 0 0 0 color-mix(in oklch, var(--foreground) 35%, transparent);
+  }
+  50% {
+    opacity: 1;
+    box-shadow: 0 0 0 6px color-mix(in oklch, var(--foreground) 0%, transparent);
+  }
+}
+
+.landing-pulse-dot {
+  animation: landing-pulse-dot 2.4s ease-in-out infinite;
+}
+
+.landing-grain::after {
+  content: "";
+  pointer-events: none;
+  position: absolute;
+  inset: 0;
+  opacity: 0.22;
+  mix-blend-mode: overlay;
+  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
+  background-size: 128px 128px;
+}
+
+.landing-atmosphere {
+  background-color: var(--background);
+  background-image:
+    radial-gradient(
+      ellipse 90% 55% at 50% -12%,
+      color-mix(in oklch, var(--foreground) 8%, transparent),
+      transparent 58%
+    ),
+    radial-gradient(
+      ellipse 45% 35% at 100% 100%,
+      color-mix(in oklch, var(--foreground) 4%, transparent),
+      transparent 55%
+    ),
+    linear-gradient(
+      color-mix(in oklch, var(--foreground) 5.5%, transparent) 1px,
+      transparent 1px
+    ),
+    linear-gradient(
+      90deg,
+      color-mix(in oklch, var(--foreground) 5.5%, transparent) 1px,
+      transparent 1px
+    );
+  background-size:
+    100% 100%,
+    100% 100%,
+    56px 56px,
+    56px 56px;
+}
+
+/* Centered hero: keep a readable well, graph atmosphere around the edges */
+.landing-hero-read-scrim {
+  background: radial-gradient(
+    ellipse 72% 58% at 50% 42%,
+    var(--background) 0%,
+    color-mix(in oklch, var(--background) 82%, transparent) 46%,
+    transparent 74%
+  );
+}
+
+.landing-ambient-graph-mask {
+  mask-image: radial-gradient(
+    ellipse 88% 78% at 50% 48%,
+    transparent 8%,
+    black 62%
+  );
+  -webkit-mask-image: radial-gradient(
+    ellipse 88% 78% at 50% 48%,
+    transparent 8%,
+    black 62%
+  );
+}
+
+@keyframes landing-ambient-drift {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0);
+  }
+  50% {
+    transform: translate3d(0, -10px, 0);
+  }
+}
+
+.landing-ambient-drift {
+  animation: landing-ambient-drift 14s ease-in-out infinite;
+}
+
+@keyframes landing-ambient-node-a {
+  0%,
+  100% {
+    opacity: 0.35;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes landing-ambient-node-b {
+  0%,
+  100% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes landing-ambient-node-c {
+  0%,
+  100% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 0.95;
+  }
+}
+
+@keyframes landing-ambient-node-d {
+  0%,
+  100% {
+    opacity: 0.3;
+  }
+  50% {
+    opacity: 0.9;
+  }
+}
+
+@keyframes landing-ambient-node-e {
+  0%,
+  100% {
+    opacity: 0.45;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes landing-ambient-node-f {
+  0%,
+  100% {
+    opacity: 0.35;
+  }
+  50% {
+    opacity: 0.85;
+  }
+}
+
+@keyframes landing-ambient-node-g {
+  0%,
+  100% {
+    opacity: 0.4;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+
+@keyframes landing-ambient-node-h {
+  0%,
+  100% {
+    opacity: 0.25;
+  }
+  50% {
+    opacity: 0.75;
+  }
+}
+
+.landing-ambient-node-a {
+  animation: landing-ambient-node-a 5s ease-in-out infinite;
+}
+
+.landing-ambient-node-b {
+  animation: landing-ambient-node-b 4s ease-in-out infinite;
+}
+
+.landing-ambient-node-c {
+  animation: landing-ambient-node-c 6s ease-in-out infinite;
+}
+
+.landing-ambient-node-d {
+  animation: landing-ambient-node-d 5.5s ease-in-out infinite;
+}
+
+.landing-ambient-node-e {
+  animation: landing-ambient-node-e 4.5s ease-in-out infinite;
+}
+
+.landing-ambient-node-f {
+  animation: landing-ambient-node-f 5.2s ease-in-out infinite;
+}
+
+.landing-ambient-node-g {
+  animation: landing-ambient-node-g 4.8s ease-in-out infinite;
+}
+
+.landing-ambient-node-h {
+  animation: landing-ambient-node-h 5.8s ease-in-out infinite;
+}
+
+html:has(#top) {
+  scroll-behavior: smooth;
+}
+
+@media (max-width: 1023px) {
+  .landing-hero-read-scrim {
+    background: radial-gradient(
+      ellipse 90% 70% at 50% 28%,
+      var(--background) 0%,
+      color-mix(in oklch, var(--background) 88%, transparent) 52%,
+      transparent 78%
+    );
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html:has(#top) {
+    scroll-behavior: auto;
+  }
+
+  .landing-graph-dash,
+  .landing-preview-pulse,
+  .landing-pulse-dot,
+  .landing-ambient-drift,
+  .landing-ambient-node-a,
+  .landing-ambient-node-b,
+  .landing-ambient-node-c,
+  .landing-ambient-node-d,
+  .landing-ambient-node-e,
+  .landing-ambient-node-f,
+  .landing-ambient-node-g,
+  .landing-ambient-node-h {
+    animation: none !important;
+  }
+}

package/src/marketing/landing.tsx

@@ -0,0 +1,217 @@
+import type { ComponentType, ReactNode } from "react";
+import { IconMenu2 } from "@tabler/icons-react";
+import type { Variants } from "motion/react";
+import { motionDuration, motionEase } from "../motion/presets";
+import { Button } from "../ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "../ui/dropdown-menu";
+import { cn } from "../utils/cn";
+import { landingClasses, landingFooterLinkClass, landingShellClass } from "./marketing-classes";
+
+export type LandingLink = { href: string; label: string };
+
+/** Variants for one revealed child: fade, rise 14px and unblur. */
+export const landingItemVariants: Variants = {
+  hidden: { opacity: 0, y: 14, filter: "blur(4px)" },
+  show: {
+    opacity: 1,
+    y: 0,
+    filter: "blur(0px)",
+    transition: { duration: motionDuration.slow, ease: motionEase },
+  },
+};
+
+export type LandingSectionProps = {
+  id?: string;
+  children: ReactNode;
+  className?: string;
+};
+
+/** Landing column with section spacing and a `scroll-mt-24` anchor offset. */
+export function LandingSection({ id, children, className }: LandingSectionProps) {
+  return (
+    <section
+      id={id}
+      className={cn(landingShellClass, "scroll-mt-24 py-20 sm:py-28 lg:py-32", className)}
+    >
+      {children}
+    </section>
+  );
+}
+
+export type LandingSectionHeadingProps = {
+  eyebrow: string;
+  heading: string;
+  intro?: string;
+  className?: string;
+};
+
+/** Mono eyebrow, large heading and optional intro. */
+export function LandingSectionHeading({ eyebrow, heading, intro, className }: LandingSectionHeadingProps) {
+  return (
+    <div className={cn("max-w-2xl", className)}>
+      <p className={landingClasses.eyebrow}>{eyebrow}</p>
+      <h2 className="text-balance font-semibold text-3xl leading-[1.08] tracking-[-0.03em] text-foreground sm:text-5xl">
+        {heading}
+      </h2>
+      {intro ? <p className={landingClasses.sectionIntro}>{intro}</p> : null}
+    </div>
+  );
+}
+
+export type LandingLatticeProps = { children: ReactNode; className?: string };
+
+/** Shared border through 1px gaps so adjacent cells don't double a hairline. */
+export function LandingLattice({ children, className }: LandingLatticeProps) {
+  return (
+    <div className="overflow-hidden rounded-2xl border border-separator">
+      <div className={cn("grid gap-px bg-separator", className)}>{children}</div>
+    </div>
+  );
+}
+
+export type LandingFeature = {
+  /** Rendered with `size={18} stroke={1.5}`, for example a Tabler icon. */
+  icon: ComponentType<{ size?: number; stroke?: number }>;
+  title: string;
+  description: string;
+};
+
+/** Feature tile: inverted icon square, title and description, with a hover lift and edge bar. */
+export function LandingFeatureCard({ icon: Icon, title, description }: LandingFeature) {
+  return (
+    <div className="group relative flex gap-3 overflow-hidden rounded-2xl border border-separator bg-surface px-3.5 py-3.5 transition-[transform,background-color] duration-200 ease-out hover:-translate-y-0.5 hover:bg-surface-secondary sm:gap-4 sm:px-5 sm:py-4">
+      <div
+        className="absolute inset-y-3 left-0 w-1 rounded-full bg-foreground/0 transition-[background-color] duration-200 group-hover:bg-foreground/20"
+        aria-hidden
+      />
+      <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-foreground text-background transition-transform duration-200 ease-out group-hover:scale-[1.04]">
+        <Icon size={18} stroke={1.5} />
+      </div>
+      <div className="min-w-0 pt-0.5">
+        <p className="text-sm font-medium text-foreground">{title}</p>
+        <p className={landingClasses.featureDescription}>{description}</p>
+      </div>
+    </div>
+  );
+}
+
+export type LandingNavMenuProps = {
+  links: readonly LandingLink[];
+  /** Last item, after a separator: opens in a new tab and reads "GitHub". */
+  github: { href: string; icon: ReactNode };
+};
+
+/**
+ * Overflow menu below `md`. Section links do not fit a phone-width bar;
+ * the auth buttons stay in the bar itself.
+ */
+export function LandingNavMenu({ links, github }: LandingNavMenuProps) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="ghost" size="icon-sm" aria-label="Open menu" className="md:hidden">
+          <IconMenu2 size={18} />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        align="end"
+        className="max-h-[70dvh] w-56 max-w-[calc(100vw-2rem)] overflow-y-auto"
+      >
+        {links.map((link) => (
+          <DropdownMenuItem key={link.href} asChild className="max-sm:py-2.5">
+            <a href={link.href}>{link.label}</a>
+          </DropdownMenuItem>
+        ))}
+        <DropdownMenuSeparator />
+        <DropdownMenuItem asChild className="max-sm:py-2.5">
+          <a href={github.href} target="_blank" rel="noreferrer">
+            {github.icon}
+            GitHub
+          </a>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+export type LandingFooterProps = {
+  /** Wordmark above the tagline. */
+  brand: ReactNode;
+  tagline: ReactNode;
+  links: readonly LandingLink[];
+  /** After the links, before GitHub. Style with `landingFooterLinkClass` or `landingFooterButtonClass`. */
+  actions?: ReactNode;
+  /** `label` is the link's `aria-label`. */
+  github: { href: string; label: string; icon: ReactNode };
+};
+
+/** Footer row: brand and tagline, then section links, app actions and a GitHub icon link. */
+export function LandingFooter({ brand, tagline, links, actions, github }: LandingFooterProps) {
+  return (
+    <footer className="border-t border-separator">
+      <div
+        className={`${landingShellClass} flex flex-col gap-6 pb-[max(2.5rem,env(safe-area-inset-bottom))] pt-10 sm:flex-row sm:items-center sm:justify-between`}
+      >
+        <div>
+          {brand}
+          <p className={landingClasses.footerTagline}>{tagline}</p>
+        </div>
+        <nav className="flex flex-wrap items-center gap-x-5 gap-y-2" aria-label="Footer">
+          {links.map((link) => (
+            <a key={link.href} href={link.href} className={landingFooterLinkClass}>
+              {link.label}
+            </a>
+          ))}
+          {actions}
+          <a
+            href={github.href}
+            target="_blank"
+            rel="noreferrer"
+            aria-label={github.label}
+            className={landingClasses.footerGithub}
+          >
+            {github.icon}
+          </a>
+        </nav>
+      </div>
+    </footer>
+  );
+}
+
+export type LandingPageLayoutProps = {
+  /** Sticky header, usually `LandingNav`. */
+  nav: ReactNode;
+  /** Inside the hero's atmosphere block, before `hero` (for example an ambient graphic). */
+  heroBackdrop?: ReactNode;
+  hero: ReactNode;
+  /** Sections after the hero, inside `<main>`. */
+  children?: ReactNode;
+  footer: ReactNode;
+};
+
+/**
+ * Page frame: `#top` root, nav, a `<main>` whose first block is the hero on the
+ * grid-and-grain atmosphere, then the sections and the footer. Import
+ * `@vvedantb/ui/landing.css` for the atmosphere, grain and pulse classes.
+ */
+export function LandingPageLayout({ nav, heroBackdrop, hero, children, footer }: LandingPageLayoutProps) {
+  return (
+    <div id="top" className="relative min-h-[100dvh] bg-background text-foreground">
+      {nav}
+      <main>
+        <div className="landing-atmosphere landing-grain relative overflow-hidden border-b border-separator">
+          {heroBackdrop}
+          {hero}
+        </div>
+        {children}
+      </main>
+      {footer}
+    </div>
+  );
+}

package/src/marketing/marketing-classes.ts

@@ -0,0 +1,115 @@
+// Class strings for the landing kit, `SiteFooter` and `PricingModal`, copied
+// from the apps' markup. Some read the bare muted text colour the apps already
+// ship (apps map `--color-muted` to the secondary text colour), so each such
+// line carries the token check's allow marker. Every string is a literal so
+// Tailwind's source scan sees it.
+
+/** Centred landing column: `max-w-6xl` with responsive side padding. */
+export const landingShellClass = "relative mx-auto w-full max-w-6xl px-5 sm:px-8 lg:px-10";
+
+/** Bordered surface card used by landing product mocks. */
+export const landingPanelClass = "overflow-hidden rounded-2xl border border-separator bg-surface";
+
+/** Text link in `LandingFooter`, also for app links placed in its `actions` slot. */
+export const landingFooterLinkClass = "max-sm:py-1 text-sm text-muted hover:text-foreground"; // check-tokens-allow: text-muted
+
+/** `Button variant="link"` in `LandingFooter`'s `actions` slot (for example Sign in). */
+export const landingFooterButtonClass = "h-auto p-0 text-sm text-muted hover:text-foreground"; // check-tokens-allow: text-muted
+
+export const landingClasses = {
+  eyebrow:
+    "mb-3 font-mono text-[11px] font-medium uppercase tracking-[0.22em] text-muted sm:text-xs sm:tracking-[0.28em]", // check-tokens-allow: text-muted
+  sectionIntro:
+    "mt-4 max-w-xl text-pretty text-sm leading-relaxed text-muted sm:mt-5 sm:text-base", // check-tokens-allow: text-muted
+  featureDescription:
+    "mt-1 text-pretty text-xs leading-relaxed text-muted sm:text-[0.8125rem]", // check-tokens-allow: text-muted
+  navLink:
+    "inline-flex h-10 items-center rounded-lg px-3 text-sm text-muted transition-[color,background-color] duration-150 hover:bg-surface-tertiary hover:text-foreground", // check-tokens-allow: text-muted
+  heroEyebrow:
+    "mb-6 inline-flex items-center gap-2 rounded-full border border-separator bg-surface/70 px-3 py-1 text-xs text-muted", // check-tokens-allow: text-muted
+  heroDescription:
+    "mx-auto mt-5 max-w-xl text-pretty text-[0.9375rem] leading-relaxed text-muted sm:mt-6 sm:text-lg", // check-tokens-allow: text-muted
+  heroCapability:
+    "rounded-full border border-separator bg-surface/60 px-3 py-1 font-mono text-[11px] text-muted", // check-tokens-allow: text-muted
+  ctaDescription:
+    "mt-4 max-w-xl text-pretty text-sm leading-relaxed text-muted sm:text-base", // check-tokens-allow: text-muted
+  footerTagline:
+    "mt-3 max-w-sm text-pretty text-xs leading-relaxed text-muted", // check-tokens-allow: text-muted
+  footerGithub: "max-sm:py-1 text-muted hover:text-foreground", // check-tokens-allow: text-muted
+} as const;
+
+/**
+ * `SiteFooter` class sets. `muted` and `muted-foreground` differ only in the
+ * secondary text colour; `touch` adds `max-sm:hit-target` targets and a
+ * safe-area bottom padding.
+ */
+export const siteFooterClasses = {
+  muted: {
+    footer: "bg-background text-foreground py-8 md:py-16 max-w-5xl mx-auto",
+    tagline: "text-sm text-muted mb-4 md:mb-6 max-w-sm", // check-tokens-allow: text-muted
+    socialButton:
+      "w-9 h-9 md:w-8 md:h-8 bg-default rounded-lg flex items-center justify-center hover:bg-surface-tertiary transition-[background-color]",
+    socialIcon: "w-4 h-4 text-muted", // check-tokens-allow: text-muted
+    heading: "font-thin tracking-wide mb-3 md:mb-4 text-muted", // check-tokens-allow: text-muted
+    links: "flex flex-col gap-2 md:gap-3 text-sm text-muted font-thin tracking-wide", // check-tokens-allow: text-muted
+    link: "hover:text-foreground transition-[color]",
+    imageLink: "hover:text-foreground transition-[color] flex flex-row items-center gap-2",
+    copyright: "text-xs md:text-sm text-muted", // check-tokens-allow: text-muted
+    rights: "text-xs md:text-sm text-muted/80", // check-tokens-allow: text-muted
+    legalLink:
+      "underline text-xs md:text-sm text-muted hover:text-foreground transition-[color]", // check-tokens-allow: text-muted
+  },
+  "muted-foreground": {
+    footer: "bg-background text-foreground py-8 md:py-16 max-w-5xl mx-auto",
+    tagline: "text-sm text-muted-foreground mb-4 md:mb-6 max-w-sm",
+    socialButton:
+      "w-9 h-9 md:w-8 md:h-8 bg-default rounded-lg flex items-center justify-center hover:bg-surface-tertiary transition-[background-color]",
+    socialIcon: "w-4 h-4 text-muted-foreground",
+    heading: "font-thin tracking-wide mb-3 md:mb-4 text-muted-foreground",
+    links: "flex flex-col gap-2 md:gap-3 text-sm text-muted-foreground font-thin tracking-wide",
+    link: "hover:text-foreground transition-[color]",
+    imageLink: "hover:text-foreground transition-[color] flex flex-row items-center gap-2",
+    copyright: "text-xs md:text-sm text-muted-foreground",
+    rights: "text-xs md:text-sm text-muted-foreground/80",
+    legalLink:
+      "underline text-xs md:text-sm text-muted-foreground hover:text-foreground transition-[color]",
+  },
+  touch: {
+    footer:
+      "mx-auto max-w-5xl bg-background pt-8 text-foreground pb-[max(2rem,env(safe-area-inset-bottom))] md:pt-16 md:pb-16",
+    tagline: "text-sm text-muted-foreground mb-4 md:mb-6 max-w-sm",
+    socialButton:
+      "max-sm:hit-target h-9 w-9 rounded-lg bg-default hover:bg-surface-tertiary md:h-8 md:w-8",
+    socialIcon: "h-4 w-4 text-muted-foreground",
+    heading: "font-thin tracking-wide mb-3 md:mb-4 text-muted-foreground",
+    links: "flex flex-col gap-2 text-sm font-thin tracking-wide text-muted-foreground md:gap-3",
+    link: "max-sm:hit-target max-sm:py-1 hover:text-foreground",
+    imageLink: "max-sm:hit-target flex flex-row items-center gap-2 max-sm:py-1 hover:text-foreground",
+    copyright: "text-xs md:text-sm text-muted-foreground",
+    rights: "text-xs md:text-sm text-muted-foreground/80",
+    legalLink:
+      "max-sm:hit-target text-xs underline text-muted-foreground hover:text-foreground md:text-sm",
+  },
+} as const;
+
+export type SiteFooterVariant = keyof typeof siteFooterClasses;
+
+/** `PricingModal` class sets for the two secondary text colours. */
+export const pricingModalClasses = {
+  muted: {
+    period: "pb-1 text-sm text-muted", // check-tokens-allow: text-muted
+    /** After `mt-4 max-w-[28ch]` and the optional font class. */
+    tagline: "text-lg italic leading-snug text-muted", // check-tokens-allow: text-muted
+    note: "mt-3 text-center text-xs text-muted", // check-tokens-allow: text-muted
+    featuresHeading:
+      "mb-4 text-[11px] font-medium uppercase tracking-[0.2em] text-muted", // check-tokens-allow: text-muted
+  },
+  "muted-foreground": {
+    period: "pb-1 text-sm text-muted-foreground",
+    tagline: "text-lg italic leading-snug text-muted-foreground",
+    note: "mt-3 text-center text-xs text-muted-foreground",
+    featuresHeading: "mb-4 text-[11px] font-medium uppercase tracking-[0.2em] text-muted-foreground",
+  },
+} as const;
+
+export type PricingModalTone = keyof typeof pricingModalClasses;