88c7262a08
All checks were successful
Deploy to Production / deploy (push) Successful in 1m13s
- Hero h1 was a fixed text-[44px] — overflowed narrow phones. Now text-[30px] sm:text-[40px] md:text-[56px]. - Hero grid children get min-w-0 so the code blocks' overflow-x-auto actually constrains instead of widening the page. - Marketing nav: the inline links were hidden below md with no fallback. Added a hamburger MobileMenu; "Sign in" collapses into it on the smallest screens. - Section vertical padding is now responsive (py-14 sm:py-20). - globals.css: overflow-x: clip on <html> as a safety net. - docs: the 240px sidebar is hidden below lg, article gets min-w-0. - dashboard header: nav labels collapse to icons on small screens. Verified: next build passes (40/40 pages). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
'use client';
|
|
|
|
import { Menu, X } from 'lucide-react';
|
|
import Link from 'next/link';
|
|
import { useState } from 'react';
|
|
|
|
const LINKS = [
|
|
{ href: '/#how', label: 'How it works' },
|
|
{ href: '/templates', label: 'Templates' },
|
|
{ href: '/pricing', label: 'Pricing' },
|
|
{ href: '/docs', label: 'Docs' },
|
|
{ href: '/changelog', label: 'Changelog' },
|
|
];
|
|
|
|
/** Hamburger menu shown below the md breakpoint, where the inline nav is hidden. */
|
|
export function MarketingMobileMenu() {
|
|
const [open, setOpen] = useState(false);
|
|
return (
|
|
<div className="md:hidden">
|
|
<button
|
|
type="button"
|
|
aria-label={open ? 'Close menu' : 'Open menu'}
|
|
aria-expanded={open}
|
|
onClick={() => setOpen((v) => !v)}
|
|
className="flex size-8 items-center justify-center rounded-md text-[--color-fg-muted] transition-colors hover:text-[--color-fg]"
|
|
>
|
|
{open ? <X size={18} /> : <Menu size={18} />}
|
|
</button>
|
|
{open && (
|
|
<div className="absolute inset-x-0 top-12 border-b border-[--color-border] bg-[--color-bg]/95 backdrop-blur-md">
|
|
<nav className="mx-auto flex max-w-6xl flex-col px-6">
|
|
{LINKS.map((l) => (
|
|
<Link
|
|
key={l.href}
|
|
href={l.href}
|
|
onClick={() => setOpen(false)}
|
|
className="border-b border-[--color-border] py-3.5 text-[14px] text-[--color-fg-muted] transition-colors last:border-0 hover:text-[--color-fg]"
|
|
>
|
|
{l.label}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|