Floating Glass Navbar

import type { CSSProperties } from "react"

import { IslandHeader } from "@/components/ui/island-header"

const sans = "ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif"

const settings = {
  brand: "Northwind",
  background: "#f6f5f1",
  card: "#ffffff",
  text: "#16171b",
  muted: "#63666f",
  primary: "#16171b",
  primaryText: "#ffffff",
}

// a daylight palette as theme tokens; the component itself only reads the tokens
function daylight(s: typeof settings) {
  const t: Record<string, string> = {
    background: s.background,
    foreground: s.text,
    card: s.card,
    primary: s.primary,
    "primary-foreground": s.primaryText,
    "muted-foreground": s.muted,
    ring: s.primary,
  }
  return Object.fromEntries(Object.entries(t).flatMap(([k, v]) => [[`--${k}`, v], [`--color-${k}`, v]])) as CSSProperties
}

export default function Demo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props }
  return (
    <div className="min-h-svh w-full" style={{ ...daylight(s), "--font-display": sans, fontFamily: sans, background: s.background, color: s.text } as CSSProperties}>
      <IslandHeader
        brand={s.brand}
        nav={[
          { label: "Product", href: "#product" },
          { label: "Pricing", href: "#pricing" },
          { label: "Get started", href: "#start" },
        ]}
        link={{ label: "Docs", href: "#" }}
        cta={{ label: "Start free", short: "Start", href: "#start" }}
      />
      <section id="top" className="flex min-h-[78svh] flex-col items-center justify-center px-6 pt-24 text-center">
        <h1 className="text-[clamp(44px,8vw,88px)] leading-[0.98] font-semibold tracking-[-0.045em]">
          Scroll to see
          <br />
          <span style={{ color: s.muted }}>the island.</span>
        </h1>
        <p className="mt-6 max-w-[460px] text-[17px] leading-7" style={{ color: s.muted }}>
          The bar gathers into a floating glass pill. The lit pill follows your pointer, then the section you are reading.
        </p>
      </section>
      {[
        { id: "product", title: "Product" },
        { id: "pricing", title: "Pricing" },
        { id: "start", title: "Get started" },
      ].map((sec) => (
        <section key={sec.id} id={sec.id} className="mx-auto flex min-h-[70svh] max-w-[1000px] items-center px-6">
          <div className="w-full rounded-[28px] px-8 py-16" style={{ background: s.card, boxShadow: "0 0 0 1px rgb(0 0 0 / 0.06), 0 12px 28px -16px rgb(0 0 0 / 0.18)" }}>
            <h2 className="text-[clamp(32px,4.6vw,52px)] leading-[1.02] font-semibold tracking-[-0.035em]">{sec.title}</h2>
          </div>
        </section>
      ))}
    </div>
  )
}