feat(marketing): full-width square top bar
Replace the floating rounded nav pill with an edge-to-edge sticky header: solid bg, bottom border, square corners, content centered to max-w-[1392px]. Drop the hero's -mt-[98px] underlap so it sits below the solid bar. Refresh the @visual baseline. Co-Authored-By: Claude Opus 4.8 <[email protected]>
This commit is contained in:
Omar Sobh
co-authored by
Claude Opus 4.8
Claude Opus 4.8
parent
db013d456d
commit
34da54ccaa
@@ -4,9 +4,9 @@ import { Waypoints } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
import { useState } from "react";
|
||||
|
||||
/** Sticky rounded-pill nav matching WorkClaw's layout: brand mark + wordmark
|
||||
* left, section links + Sign In + a dark "Get Started" pill right. Collapses
|
||||
* to a hamburger + expanding sheet at <sm. Clawmates brand throughout. */
|
||||
/** Full-width sticky top bar (edge-to-edge, square, solid): brand mark +
|
||||
* wordmark left, section links + Sign in + a dark "Get started" button right.
|
||||
* Collapses to a hamburger + full-width expanding sheet at <sm. */
|
||||
export function MarketingNav() {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
@@ -18,122 +18,110 @@ export function MarketingNav() {
|
||||
];
|
||||
|
||||
return (
|
||||
<div className="sticky top-0 z-50 flex justify-center px-2 pt-3 sm:px-6 sm:pt-6">
|
||||
<div className="w-full max-w-[1392px]">
|
||||
{/* Mobile pill + expanding sheet */}
|
||||
<div className="sm:hidden">
|
||||
<nav className="flex w-full items-center justify-between rounded-full border border-[rgba(22,29,39,0.06)] bg-white/95 p-3 shadow-[0_4px_24px_0_rgba(22,29,39,0.04)] backdrop-blur-[11.5px]">
|
||||
<Link href="/" aria-label="clawmates" className="flex items-center gap-2 px-2 py-1">
|
||||
<span className="flex size-7 items-center justify-center rounded-lg bg-marketing-ink text-white">
|
||||
<Waypoints aria-hidden size={16} strokeWidth={2} />
|
||||
</span>
|
||||
<span className="text-base font-bold tracking-tight text-marketing-ink">
|
||||
clawmates
|
||||
</span>
|
||||
<header className="sticky top-0 z-50 w-full border-b border-marketing-border bg-white/95 backdrop-blur-[11.5px]">
|
||||
<div className="mx-auto flex h-16 w-full max-w-[1392px] items-center justify-between px-4 sm:px-8">
|
||||
{/* Brand */}
|
||||
<Link href="/" aria-label="clawmates" className="flex items-center gap-2">
|
||||
<span className="flex size-8 items-center justify-center rounded-lg bg-marketing-ink text-white">
|
||||
<Waypoints aria-hidden size={18} strokeWidth={2} />
|
||||
</span>
|
||||
<span className="text-lg font-bold tracking-tight text-marketing-ink">
|
||||
clawmates
|
||||
</span>
|
||||
</Link>
|
||||
|
||||
{/* Desktop nav */}
|
||||
<nav className="hidden items-center gap-7 sm:flex">
|
||||
{LINKS.map((l) => (
|
||||
<a
|
||||
key={l.label}
|
||||
href={l.href}
|
||||
className="text-[15px] font-medium whitespace-nowrap text-marketing-ink transition-opacity hover:opacity-70"
|
||||
>
|
||||
{l.label}
|
||||
</a>
|
||||
))}
|
||||
<div className="flex items-center gap-3">
|
||||
<Link
|
||||
href="/login"
|
||||
className="flex h-10 items-center justify-center rounded-full border border-marketing-border bg-white px-5 text-[15px] font-medium whitespace-nowrap text-marketing-ink transition-colors hover:bg-black/5"
|
||||
>
|
||||
Sign in
|
||||
</Link>
|
||||
<div className="flex items-center gap-2">
|
||||
<Link
|
||||
href="/login"
|
||||
className="flex h-10 items-center justify-center rounded-full bg-[#1e293b] px-5 text-[15px] font-medium whitespace-nowrap text-white transition-colors hover:bg-marketing-slate-dark"
|
||||
>
|
||||
Get started
|
||||
</Link>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
{/* Mobile controls */}
|
||||
<div className="flex items-center gap-2 sm:hidden">
|
||||
<Link
|
||||
href="/login"
|
||||
className="flex h-10 items-center justify-center rounded-full bg-[#1e293b] px-4 text-[14px] font-medium text-white"
|
||||
>
|
||||
Get started
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
aria-label={open ? "Close menu" : "Open menu"}
|
||||
aria-expanded={open}
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
className="relative flex size-10 items-center justify-center"
|
||||
>
|
||||
<span className="relative block h-[14px] w-5">
|
||||
<span
|
||||
className={`absolute left-0 block h-[2px] w-5 rounded-[2px] bg-[#1e293b] transition-all duration-300 ${open ? "top-[6px] rotate-45" : "top-0"}`}
|
||||
/>
|
||||
<span
|
||||
className={`absolute left-0 top-[6px] block h-[2px] w-5 rounded-[2px] bg-[#1e293b] transition-opacity duration-200 ${open ? "opacity-0" : "opacity-100"}`}
|
||||
/>
|
||||
<span
|
||||
className={`absolute left-0 block h-[2px] w-5 rounded-[2px] bg-[#1e293b] transition-all duration-300 ${open ? "top-[6px] -rotate-45" : "top-[12px]"}`}
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Mobile expanding sheet (full width, below the bar) */}
|
||||
<div
|
||||
className={`grid transition-[grid-template-rows] duration-300 ease-out sm:hidden ${open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"}`}
|
||||
>
|
||||
<div className="min-h-0 overflow-hidden border-t border-marketing-border">
|
||||
<div className="mx-auto flex w-full max-w-[1392px] flex-col gap-6 px-4 pt-4 pb-8">
|
||||
<div className="flex w-full flex-col gap-1">
|
||||
{LINKS.map((l) => (
|
||||
<a
|
||||
key={l.label}
|
||||
href={l.href}
|
||||
onClick={() => setOpen(false)}
|
||||
className="flex w-full items-center rounded-xl px-2 py-2.5 text-[17px] font-semibold tracking-[-0.25px] text-marketing-ink transition-colors hover:bg-[rgba(224,88,74,0.08)]"
|
||||
>
|
||||
{l.label}
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex w-full flex-col gap-3">
|
||||
<Link
|
||||
href="/login"
|
||||
className="flex h-10 items-center justify-center rounded-full border border-[#e2e8f0] bg-[#1e293b] px-4 text-[14px] font-medium text-white"
|
||||
className="flex min-h-12 w-full items-center justify-center rounded-full bg-marketing-coral-strong px-6 text-[16px] font-medium text-white"
|
||||
>
|
||||
Get Started
|
||||
Sign up for free
|
||||
</Link>
|
||||
<button
|
||||
type="button"
|
||||
aria-label={open ? "Close menu" : "Open menu"}
|
||||
aria-expanded={open}
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
className="relative flex size-10 items-center justify-center rounded-full"
|
||||
<Link
|
||||
href="/login"
|
||||
className="flex min-h-12 w-full items-center justify-center rounded-full border-[1.75px] border-[#020617] bg-white px-6 text-[16px] font-medium text-marketing-ink"
|
||||
>
|
||||
<span className="relative block h-[14px] w-5">
|
||||
<span
|
||||
className={`absolute left-0 block h-[2px] w-5 rounded-[2px] bg-[#1e293b] transition-all duration-300 ${open ? "top-[6px] rotate-45" : "top-0"}`}
|
||||
/>
|
||||
<span
|
||||
className={`absolute left-0 top-[6px] block h-[2px] w-5 rounded-[2px] bg-[#1e293b] transition-opacity duration-200 ${open ? "opacity-0" : "opacity-100"}`}
|
||||
/>
|
||||
<span
|
||||
className={`absolute left-0 block h-[2px] w-5 rounded-[2px] bg-[#1e293b] transition-all duration-300 ${open ? "top-[6px] -rotate-45" : "top-[12px]"}`}
|
||||
/>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
<div
|
||||
className={`grid transition-[grid-template-rows] duration-300 ease-out ${open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"}`}
|
||||
>
|
||||
<div className="min-h-0 overflow-hidden">
|
||||
<div className="flex flex-col gap-6 px-4 pt-6 pb-8">
|
||||
<div className="flex w-full flex-col gap-2">
|
||||
{LINKS.map((l) => (
|
||||
<a
|
||||
key={l.label}
|
||||
href={l.href}
|
||||
onClick={() => setOpen(false)}
|
||||
className="flex w-full items-center gap-4 rounded-2xl py-2 pr-6 pl-2 text-marketing-ink transition-colors hover:bg-[rgba(224,88,74,0.08)]"
|
||||
>
|
||||
<span className="text-[18px] font-bold tracking-[-0.25px]">
|
||||
{l.label}
|
||||
</span>
|
||||
</a>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex w-full flex-col gap-4">
|
||||
<Link
|
||||
href="/login"
|
||||
className="flex min-h-12 w-full items-center justify-center rounded-full bg-marketing-coral-strong px-6 py-3 text-[16px] font-medium text-white"
|
||||
>
|
||||
Sign up for free
|
||||
</Link>
|
||||
<Link
|
||||
href="/login"
|
||||
className="flex min-h-12 w-full items-center justify-center rounded-full border-[1.75px] border-[#020617] bg-white px-6 py-3 text-[16px] font-medium text-marketing-ink"
|
||||
>
|
||||
Sign in
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
Sign in
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Desktop pill */}
|
||||
<nav className="hidden w-full items-center justify-between rounded-full border border-solid border-[rgba(22,29,39,0.06)] bg-white/[0.96] p-3 shadow-[0_4px_24px_0_rgba(22,29,39,0.04)] sm:flex">
|
||||
<Link href="/" aria-label="clawmates" className="flex h-12 items-center gap-2 pl-2">
|
||||
<span className="flex size-9 items-center justify-center rounded-lg bg-marketing-ink text-white">
|
||||
<Waypoints aria-hidden size={20} strokeWidth={2} />
|
||||
</span>
|
||||
<span className="text-xl font-bold tracking-tight text-marketing-ink">
|
||||
clawmates
|
||||
</span>
|
||||
</Link>
|
||||
<div className="flex items-center gap-6">
|
||||
{LINKS.map((l) => (
|
||||
<a
|
||||
key={l.label}
|
||||
href={l.href}
|
||||
className="text-base font-medium whitespace-nowrap text-marketing-ink transition-opacity hover:opacity-80"
|
||||
>
|
||||
{l.label}
|
||||
</a>
|
||||
))}
|
||||
<div className="flex items-center gap-3">
|
||||
<Link
|
||||
href="/login"
|
||||
className="flex min-h-12 items-center justify-center rounded-full border border-solid border-[#e2e8f0] bg-white px-6 py-3 text-base font-medium whitespace-nowrap text-marketing-ink transition-colors hover:bg-black/5"
|
||||
>
|
||||
Sign In
|
||||
</Link>
|
||||
<Link
|
||||
href="/login"
|
||||
className="flex min-h-12 items-center justify-center rounded-full border border-solid border-[#e2e8f0] bg-[#1e293b] px-6 py-3 text-base font-medium whitespace-nowrap text-white transition-colors hover:bg-marketing-slate-dark"
|
||||
>
|
||||
Get Started
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -30,7 +30,7 @@ const ctaCoral =
|
||||
export function Hero() {
|
||||
return (
|
||||
<section
|
||||
className="relative -mt-[98px] h-[760px] w-full overflow-hidden bg-[#0b1220] sm:h-[720px] md:h-[760px] lg:h-[820px] xl:h-[900px] 2xl:h-[963px]"
|
||||
className="relative h-[760px] w-full overflow-hidden bg-[#0b1220] sm:h-[720px] md:h-[760px] lg:h-[820px] xl:h-[900px] 2xl:h-[963px]"
|
||||
style={{ zIndex: 2 }}
|
||||
>
|
||||
{/* Animated ambient backdrop (replaces the hero illustration). */}
|
||||
|
||||
Reference in New Issue
Block a user