@vvedantb/ui 0.7.2 → 0.9.0

package/src/marketing/createLandingKit.tsx

@@ -0,0 +1,214 @@
+import type { ReactNode } from "react";
+import type { motion as motionNamespace } from "motion/react";
+import { motionDuration, motionEase } from "../motion/presets";
+import { Button } from "../ui/button";
+import { cn } from "../utils/cn";
+import { landingItemVariants, type LandingLink } from "./landing";
+import { landingClasses, landingShellClass } from "./marketing-classes";
+
+/** The `motion` export of `motion/react`. Only these elements are used. */
+export type LandingMotion = Pick<typeof motionNamespace, "div" | "p" | "h1" | "ul" | "header">;
+
+export type LandingKitOptions = {
+  /** Pass `motion` from `motion/react`. The package does not import Motion itself. */
+  motion: LandingMotion;
+};
+
+export type LandingRevealProps = {
+  children: ReactNode;
+  className?: string;
+  /** Seconds before the first child starts. Default `0`. */
+  delay?: number;
+};
+
+export type LandingRevealItemProps = { children: ReactNode; className?: string };
+
+export type LandingHeroProps = {
+  /** Pill above the title, after a pulsing dot. */
+  eyebrow: ReactNode;
+  title: ReactNode;
+  description: ReactNode;
+  /** Inside the button row, for example Get started and Sign in. The row renders even when empty. */
+  actions?: ReactNode;
+  /** Mono pills under the buttons. */
+  capabilities: readonly string[];
+};
+
+export type LandingNavProps = {
+  /** Wordmark inside the `#top` home link. */
+  brand: ReactNode;
+  /** `aria-label` of the home link. */
+  homeLabel: string;
+  /** Section links, shown from `md`. */
+  links: readonly LandingLink[];
+  /** Icon button from `sm`. `label` is its `aria-label`. */
+  github: { href: string; label: string; icon: ReactNode };
+  /** After the GitHub button, for example Sign in and Get started. */
+  actions?: ReactNode;
+  /** Last in the bar, usually `LandingNavMenu`. */
+  menu?: ReactNode;
+};
+
+export type LandingCtaProps = {
+  title: ReactNode;
+  description: ReactNode;
+  /** Under the text, for example a large Get started button. */
+  action?: ReactNode;
+};
+
+export type LandingKit = {
+  LandingReveal: (props: LandingRevealProps) => ReactNode;
+  LandingRevealItem: (props: LandingRevealItemProps) => ReactNode;
+  LandingHero: (props: LandingHeroProps) => ReactNode;
+  LandingNav: (props: LandingNavProps) => ReactNode;
+  LandingCta: (props: LandingCtaProps) => ReactNode;
+};
+
+const heroContainer = {
+  hidden: {},
+  show: {
+    transition: { staggerChildren: 0.1, delayChildren: 0.08 },
+  },
+};
+
+/**
+ * Builds the animated landing parts on the app's Motion. Call it once at
+ * module scope: `export const { LandingHero, ... } = createLandingKit({ motion })`.
+ */
+export function createLandingKit({ motion }: LandingKitOptions): LandingKit {
+  /** Staggers its `LandingRevealItem` children in once, when 20% is in view. */
+  function LandingReveal({ children, className, delay = 0 }: LandingRevealProps) {
+    return (
+      <motion.div
+        className={className}
+        initial="hidden"
+        whileInView="show"
+        viewport={{ once: true, amount: 0.2 }}
+        variants={{
+          hidden: {},
+          show: {
+            transition: { staggerChildren: 0.1, delayChildren: delay },
+          },
+        }}
+      >
+        {children}
+      </motion.div>
+    );
+  }
+
+  function LandingRevealItem({ children, className }: LandingRevealItemProps) {
+    return (
+      <motion.div className={cn(className)} variants={landingItemVariants}>
+        {children}
+      </motion.div>
+    );
+  }
+
+  /** Centred hero: eyebrow pill, title, description, actions and capability pills, revealed on mount. */
+  function LandingHero({ eyebrow, title, description, actions, capabilities }: LandingHeroProps) {
+    return (
+      <section className={`${landingShellClass} pb-16 pt-12 sm:pb-20 sm:pt-20 lg:pb-24 lg:pt-24`}>
+        <motion.div
+          className="mx-auto max-w-3xl text-center"
+          initial="hidden"
+          animate="show"
+          variants={heroContainer}
+        >
+          <motion.p className={landingClasses.heroEyebrow} variants={landingItemVariants}>
+            <span className="landing-pulse-dot size-1.5 rounded-full bg-foreground" aria-hidden />
+            {eyebrow}
+          </motion.p>
+
+          <motion.h1
+            className="text-balance font-semibold text-[2.35rem] leading-[1] tracking-[-0.035em] text-foreground min-[400px]:text-[2.85rem] sm:text-6xl lg:text-[4.85rem]"
+            variants={landingItemVariants}
+            transition={{ duration: motionDuration.slow, ease: motionEase }}
+          >
+            {title}
+          </motion.h1>
+
+          <motion.p className={landingClasses.heroDescription} variants={landingItemVariants}>
+            {description}
+          </motion.p>
+
+          <motion.div
+            className="mt-7 flex flex-col items-stretch justify-center gap-2.5 sm:mt-9 sm:flex-row sm:items-center sm:gap-3"
+            variants={landingItemVariants}
+          >
+            {actions}
+          </motion.div>
+
+          <motion.ul
+            className="mt-8 flex flex-wrap items-center justify-center gap-2 sm:mt-10"
+            variants={landingItemVariants}
+          >
+            {capabilities.map((label) => (
+              <li key={label} className={landingClasses.heroCapability}>
+                {label}
+              </li>
+            ))}
+          </motion.ul>
+        </motion.div>
+      </section>
+    );
+  }
+
+  /** Sticky blurred header that rises in on mount. */
+  function LandingNav({ brand, homeLabel, links, github, actions, menu }: LandingNavProps) {
+    return (
+      <motion.header
+        className="sticky top-0 z-30 border-b border-separator bg-background/80 backdrop-blur-md"
+        initial={{ opacity: 0, y: 14 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: motionDuration.base, ease: motionEase }}
+      >
+        <div className={cn(landingShellClass, "flex h-14 items-center justify-between gap-3 sm:h-16")}>
+          <a
+            href="#top"
+            className="group min-w-0 shrink-0 rounded-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
+            aria-label={homeLabel}
+          >
+            {brand}
+          </a>
+
+          <nav className="hidden items-center gap-1 md:flex" aria-label="Page">
+            {links.map((link) => (
+              <a key={link.href} href={link.href} className={landingClasses.navLink}>
+                {link.label}
+              </a>
+            ))}
+          </nav>
+
+          <div className="flex items-center gap-1.5">
+            <Button asChild variant="ghost" size="icon-sm" className="hidden sm:inline-flex">
+              <a href={github.href} target="_blank" rel="noreferrer" aria-label={github.label}>
+                {github.icon}
+              </a>
+            </Button>
+            {actions}
+            {menu}
+          </div>
+        </div>
+      </motion.header>
+    );
+  }
+
+  /** Closing call to action on the atmosphere background. */
+  function LandingCta({ title, description, action }: LandingCtaProps) {
+    return (
+      <div className="landing-atmosphere landing-grain relative overflow-hidden border-t border-separator">
+        <section className={`${landingShellClass} relative z-10 py-20 sm:py-28`}>
+          <LandingReveal className="flex flex-col items-center text-center">
+            <h2 className="max-w-2xl text-balance font-semibold text-3xl leading-[1.1] tracking-[-0.03em] text-foreground sm:text-5xl">
+              {title}
+            </h2>
+            <p className={landingClasses.ctaDescription}>{description}</p>
+            <div className="mt-9">{action}</div>
+          </LandingReveal>
+        </section>
+      </div>
+    );
+  }
+
+  return { LandingReveal, LandingRevealItem, LandingHero, LandingNav, LandingCta };
+}

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>
+  );
+}