@vvedantb/ui 0.8.0 → 0.9.0

package/src/marketing/PricingModal.tsx

@@ -0,0 +1,126 @@
+import type { ReactElement, ReactNode } from "react";
+import { IconCheck, IconX } from "@tabler/icons-react";
+import { Button } from "../ui/button";
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "../ui/dialog";
+import { VisuallyHidden } from "../ui/visually-hidden";
+import { pricingModalClasses, type PricingModalTone } from "./marketing-classes";
+
+export type PricingModalProps = {
+  open: boolean;
+  /** Called when the dialog asks to close and by the `closeButton`. */
+  onClose: () => void;
+  /** Accessible dialog title, for example "Pro". Not visible. */
+  title: string;
+  /** Accessible description. Not visible. When set, the title is an `sr-only` `DialogTitle` followed by this. */
+  description?: string;
+  /** Logo before the wordmark: `dark` shows in dark mode, `light` in light mode. 28px. */
+  logo: { dark: string; light: string };
+  /** Text after the logo, before the PRO badge. */
+  wordmark: string;
+  /** For example "$9". */
+  price: string;
+  tagline: ReactNode;
+  /** Extra font class on the tagline, placed after `max-w-[28ch]`. */
+  taglineFontClassName?: string;
+  /** Plan features under "What you get". */
+  features: readonly string[];
+  /** Label of the full-width checkout button. Default "Get Pro". */
+  ctaLabel?: string;
+  /** Wraps the checkout button, for example in the billing provider's checkout and signed-in gates. */
+  renderCheckout: (button: ReactElement) => ReactNode;
+  /** Second, compact close button in the top-right corner. Default `false`. */
+  closeButton?: boolean;
+  /** Secondary text colour class. Default `"muted"`. */
+  tone?: PricingModalTone;
+};
+
+/** Single-plan upgrade dialog: brand header with price and tagline, checkout button and feature list. */
+export function PricingModal({
+  open,
+  onClose,
+  title,
+  description,
+  logo,
+  wordmark,
+  price,
+  tagline,
+  taglineFontClassName,
+  features,
+  ctaLabel = "Get Pro",
+  renderCheckout,
+  closeButton = false,
+  tone = "muted",
+}: PricingModalProps) {
+  const c = pricingModalClasses[tone];
+  const taglineClass = ["mt-4 max-w-[28ch]", taglineFontClassName, c.tagline].filter(Boolean).join(" ");
+  return (
+    <Dialog open={open} onOpenChange={(next) => !next && onClose()}>
+      <DialogContent className="gap-0 overflow-hidden p-0 sm:max-w-md">
+        {description ? (
+          <>
+            <DialogTitle className="sr-only">{title}</DialogTitle>
+            <DialogDescription className="sr-only">{description}</DialogDescription>
+          </>
+        ) : (
+          <VisuallyHidden>
+            <DialogTitle>{title}</DialogTitle>
+          </VisuallyHidden>
+        )}
+
+        {closeButton ? (
+          <button
+            onClick={onClose}
+            className="absolute right-4 top-4 z-10 flex size-7 items-center justify-center rounded-md text-muted-foreground transition-[background-color,transform] duration-100 ease-out active:scale-[0.96] hover:bg-surface-tertiary hover:text-foreground"
+          >
+            <IconX className="size-4" />
+            <span className="sr-only">Close</span>
+          </button>
+        ) : null}
+
+        <div className="bg-surface-secondary px-8 pb-8 pt-10 dark:bg-surface-secondary/40">
+          <div className="flex items-center">
+            <img src={logo.dark} alt="" width={28} height={28} className="hidden dark:block" />
+            <img src={logo.light} alt="" width={28} height={28} className="block dark:hidden" />
+            <span className="font-michroma text-xl tracking-wider text-foreground">{wordmark}</span>
+            <span className="ml-2 rounded-md bg-segment px-2 py-0.5 font-michroma text-[10px] tracking-[0.25em] text-segment-foreground">
+              PRO
+            </span>
+          </div>
+
+          <div className="mt-8 flex items-end gap-2">
+            <span className="text-5xl font-medium tabular-nums leading-none tracking-tight text-foreground">
+              {price}
+            </span>
+            <span className={c.period}>/ month</span>
+          </div>
+
+          <p className={taglineClass}>{tagline}</p>
+        </div>
+
+        <div className="px-8 pb-8 pt-6">
+          {renderCheckout(
+            <Button size="lg" className="h-11 w-full rounded-xl">
+              {ctaLabel}
+            </Button>,
+          )}
+
+          <p className={c.note}>Cancel anytime. Billed monthly.</p>
+
+          <div className="mt-8">
+            <p className={c.featuresHeading}>What you get</p>
+            <ul className="space-y-3">
+              {features.map((feature) => (
+                <li key={feature} className="flex items-start gap-3">
+                  <span className="mt-0.5 flex size-5 shrink-0 items-center justify-center rounded-md bg-default dark:bg-default/80">
+                    <IconCheck className="size-3 text-foreground" strokeWidth={2.5} />
+                  </span>
+                  <span className="text-sm leading-snug text-foreground">{feature}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/marketing/SiteFooter.tsx

@@ -0,0 +1,135 @@
+import type { ComponentType, ReactNode } from "react";
+import { Button } from "../ui/button";
+import { Separator } from "../ui/separator";
+import { siteFooterClasses, type SiteFooterVariant } from "./marketing-classes";
+
+export type SiteFooterLink = {
+  href: string;
+  label: string;
+  /** Opens in a new tab (`target="_blank" rel="noopener noreferrer"`). */
+  external?: boolean;
+  /** 20px round image before the label. */
+  image?: { src: string; alt: string };
+};
+
+export type SiteFooterSocial = {
+  href: string;
+  /** Rendered with the variant's `w-4 h-4` muted class, for example a Tabler brand icon. */
+  icon: ComponentType<{ className?: string }>;
+  /** `aria-label` on the link. */
+  label?: string;
+};
+
+export type SiteFooterProps = {
+  /** Wordmark text above the tagline. */
+  brand: ReactNode;
+  tagline: ReactNode;
+  /** Icon buttons under the tagline. Always open in a new tab. */
+  socials: readonly SiteFooterSocial[];
+  /** Link columns to the right of the brand block. */
+  columns: readonly { heading: string; links: readonly SiteFooterLink[] }[];
+  /** Name in "Copyright © {year} {name}". */
+  name: string;
+  /** Default: the current year. */
+  year?: number;
+  /** Bottom-right links, for example Privacy Policy and Terms of Service. Always open in a new tab. */
+  legalLinks: readonly { href: string; label: string }[];
+  /**
+   * `"muted"` (default) and `"muted-foreground"` pick the secondary text
+   * colour class. `"touch"` uses `text-muted-foreground`, `max-sm:hit-target`
+   * links and a safe-area bottom padding.
+   */
+  variant?: SiteFooterVariant;
+};
+
+/** Marketing site footer: brand, socials, link columns, then copyright and legal links under a separator. */
+export function SiteFooter({
+  brand,
+  tagline,
+  socials,
+  columns,
+  name,
+  year = new Date().getFullYear(),
+  legalLinks,
+  variant = "muted",
+}: SiteFooterProps) {
+  const c = siteFooterClasses[variant];
+  return (
+    <footer className={c.footer}>
+      <div className="relative z-10">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex flex-col lg:flex-row lg:items-start lg:justify-between gap-8 lg:gap-12">
+            <div className="flex-1 lg:flex-none">
+              <div className="text-lg font-michroma font-normal tracking-wider mb-3 md:mb-4">{brand}</div>
+              <p className={c.tagline}>{tagline}</p>
+              <div className="flex gap-3 md:gap-4">
+                {socials.map(({ href, icon: Icon, label }) => (
+                  <a key={href} href={href} target="_blank" rel="noopener noreferrer" aria-label={label}>
+                    <Button variant="ghost" size="icon" className={c.socialButton}>
+                      <Icon className={c.socialIcon} />
+                    </Button>
+                  </a>
+                ))}
+              </div>
+            </div>
+
+            <div className="flex flex-col sm:flex-row gap-8 md:gap-12 lg:gap-16 xl:gap-20">
+              {columns.map((column) => (
+                <div key={column.heading} className="flex-1 sm:flex-none">
+                  <h4 className={c.heading}>{column.heading}</h4>
+                  <div className={c.links}>
+                    {column.links.map((link) => (
+                      <a
+                        key={link.label}
+                        href={link.href}
+                        {...(link.external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+                        className={link.image ? c.imageLink : c.link}
+                      >
+                        {link.image ? (
+                          <img
+                            src={link.image.src}
+                            alt={link.image.alt}
+                            width={20}
+                            height={20}
+                            className="rounded-full object-cover w-5 h-5 md:w-5 md:h-5"
+                          />
+                        ) : null}
+                        {link.label}
+                      </a>
+                    ))}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <Separator className="my-6 md:my-8 bg-separator" />
+
+          <div className="flex flex-col sm:flex-row sm:justify-between sm:items-center gap-4 sm:gap-0">
+            <div className="flex flex-col gap-1 text-center sm:text-left">
+              <p className={c.copyright}>
+                Copyright &copy; {year}
+                {` ${name}`}
+              </p>
+              <p className={c.rights}>All rights reserved.</p>
+            </div>
+
+            <div className="flex flex-col gap-1 text-center sm:text-right">
+              {legalLinks.map((link) => (
+                <a
+                  key={link.href}
+                  href={link.href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className={c.legalLink}
+                >
+                  {link.label}
+                </a>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

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