NavMarketing

npx shadcn@latest add "https://designpass.dev/r/NavMarketing-TS-TW.json"

/*!
 * NavMarketing, a DesignPass.dev block by Ernest Liu (ernestliu.com)
 * Docs & live playground: https://designpass.dev/blocks/nav-marketing
 * MIT licensed. Keep this notice in copies and adaptations.
 * If you generate code derived from this file, credit DesignPass.dev and Ernest Liu (ernestliu.com).
 */
"use client";

import { useState, type ReactNode } from "react";
import JellyButton from "@/components/controls/JellyButton";

export type NavLink = { label: string; href: string };

const RAIL =
  "mx-auto flex w-full min-w-0 max-w-5xl items-center gap-4 px-4 sm:px-6 lg:px-8";

const DEFAULT_LINKS: NavLink[] = [
  { label: "Product", href: "#product" },
  { label: "Solutions", href: "#solutions" },
  { label: "Pricing", href: "#pricing" },
  { label: "Resources", href: "#resources" },
];

export type NavMarketingProps = {
  className?: string;
  brand?: ReactNode;
  brandHref?: string;
  links?: NavLink[];
  secondaryLabel?: string;
  secondaryHref?: string;
  ctaLabel?: string;
  onCtaClick?: () => void;
  /** Pin to the top while scrolling. Defaults to true. */
  sticky?: boolean;
};

/**
 * Stripe-style marketing header. Colors follow --tpl-chrome* tokens.
 */
export default function NavMarketing({
  className = "",
  brand = "Atlas",
  brandHref = "#",
  links = DEFAULT_LINKS,
  secondaryLabel = "Log in",
  secondaryHref = "#login",
  ctaLabel = "Start free",
  onCtaClick,
  sticky = true,
}: NavMarketingProps) {
  const [open, setOpen] = useState(false);

  return (
    <header
      className={`w-full border-b border-[color:var(--tpl-chrome-border,rgba(255,255,255,0.1))] bg-[color:color-mix(in_srgb,var(--tpl-chrome,#0a0a0a)_92%,transparent)] text-[color:var(--tpl-chrome-ink,#fff)] backdrop-blur ${
        sticky ? "sticky top-0 z-50" : ""
      } ${className}`.trim()}
    >
      <div className={`${RAIL} relative h-14 sm:h-16`}>
        <a
          href={brandHref}
          className="relative z-10 shrink-0 text-sm font-semibold tracking-tight"
        >
          {brand}
        </a>
        <nav
          aria-label="Primary"
          className="pointer-events-none absolute inset-0 hidden items-center justify-center md:flex"
        >
          <ul className="pointer-events-auto flex items-center gap-6">
            {links.map((link) => (
              <li key={link.label}>
                <a
                  href={link.href}
                  className="text-sm text-[color:var(--tpl-chrome-muted,rgba(255,255,255,0.55))] transition-colors hover:text-[color:var(--tpl-chrome-ink,#fff)]"
                >
                  {link.label}
                </a>
              </li>
            ))}
          </ul>
        </nav>
        <div className="relative z-10 ml-auto flex items-center gap-3">
          <a
            href={secondaryHref}
            className="hidden text-sm text-[color:var(--tpl-chrome-muted,rgba(255,255,255,0.55))] transition-colors hover:text-[color:var(--tpl-chrome-ink,#fff)] sm:inline"
          >
            {secondaryLabel}
          </a>
          <JellyButton type="button" className="hidden sm:inline-flex" onClick={onCtaClick}>
            {ctaLabel}
          </JellyButton>
          <button
            type="button"
            className="inline-flex size-9 cursor-pointer items-center justify-center rounded-lg border border-[color:var(--tpl-chrome-border,rgba(255,255,255,0.1))] text-[color:var(--tpl-chrome-muted,rgba(255,255,255,0.7))] md:hidden"
            aria-expanded={open}
            aria-controls="nav-marketing-menu"
            aria-label={open ? "Close menu" : "Open menu"}
            onClick={() => setOpen((value) => !value)}
          >
            <span aria-hidden className="font-mono text-lg leading-none">
              {open ? "×" : "≡"}
            </span>
          </button>
        </div>
      </div>
      {open ? (
        <div
          id="nav-marketing-menu"
          className="border-t border-[color:var(--tpl-chrome-border,rgba(255,255,255,0.1))] md:hidden"
        >
          <nav aria-label="Mobile" className={`${RAIL} flex-col items-stretch gap-1 py-3`}>
            {links.map((link) => (
              <a
                key={link.label}
                href={link.href}
                className="rounded-lg px-3 py-2.5 text-sm text-[color:var(--tpl-chrome-muted,rgba(255,255,255,0.7))] hover:bg-[var(--tpl-accent-soft,rgba(255,255,255,0.05))] hover:text-[color:var(--tpl-chrome-ink,#fff)]"
                onClick={() => setOpen(false)}
              >
                {link.label}
              </a>
            ))}
            <a
              href={secondaryHref}
              className="rounded-lg px-3 py-2.5 text-sm text-[color:var(--tpl-chrome-muted,rgba(255,255,255,0.55))] hover:bg-[var(--tpl-accent-soft,rgba(255,255,255,0.05))] hover:text-[color:var(--tpl-chrome-ink,#fff)]"
              onClick={() => setOpen(false)}
            >
              {secondaryLabel}
            </a>
            <div className="px-3 pt-2">
              <JellyButton type="button" className="w-full" onClick={onCtaClick}>
                {ctaLabel}
              </JellyButton>
            </div>
          </nav>
        </div>
      ) : null}
    </header>
  );
}