Product designerProduct designer

1import { useState } from "react";2import { site } from "./site";3import { SectionView } from "./Sections";4 5export default function App() {6  const [menu, setMenu] = useState(false);7  return (8    <div className="min-h-screen bg-bg font-body text-fg antialiased">9      <header className="sticky top-0 z-40 border-b border-line bg-bg/90 backdrop-blur">10        <div className="mx-auto flex h-16 w-full max-w-6xl items-center justify-between gap-6 px-5 sm:px-8">11          <a href="#" className="font-heading text-xl font-semibold tracking-tight">12            {site.brand}13          </a>14          <nav aria-label="Main" className="hidden items-center gap-7 text-[15px] md:flex">15            {site.nav.map((l) => (16              <a key={l.href} href={l.href} className="text-muted transition hover:text-fg">17                {l.label}18              </a>19            ))}20          </nav>21          <div className="flex items-center gap-3">22            {site.navCta ? (23              <a href={site.navCta.href} className="hidden h-10 items-center rounded-card bg-fg px-4 text-sm font-medium text-bg hover:opacity-90 sm:inline-flex">24                {site.navCta.label}25              </a>26            ) : null}27            <button type="button" className="grid h-10 w-10 place-items-center rounded-card border border-line md:hidden" aria-expanded={menu} aria-label="Menu" onClick={() => setMenu((m) => !m)}>28              <span className="block h-0.5 w-4 bg-fg shadow-[0_5px_0_currentColor,0_-5px_0_currentColor]" />29            </button>30          </div>31        </div>32        {menu ? (33          <nav aria-label="Mobile" className="border-t border-line px-5 py-3 md:hidden">34            {site.nav.map((l) => (35              <a key={l.href} href={l.href} onClick={() => setMenu(false)} className="block py-2.5 text-[16px]">36                {l.label}37              </a>38            ))}39          </nav>40        ) : null}41      </header>42 43      <main>44        {site.sections.map((s, i) => (45          <SectionView key={i} s={s} />46        ))}47      </main>48 49      <footer className="border-t border-line py-14">50        <div className="mx-auto grid w-full max-w-6xl gap-10 px-5 sm:px-8 md:grid-cols-[1.4fr_repeat(3,1fr)]">51          <div>52            <p className="font-heading text-xl font-semibold">{site.brand}</p>53            <p className="mt-3 max-w-sm text-muted">{site.footer.text}</p>54          </div>55          {(site.footer.columns ?? []).map((c) => (56            <div key={c.title}>57              <p className="text-sm font-semibold">{c.title}</p>58              <ul className="mt-3 space-y-2 text-[15px] text-muted">59                {c.links.map((l) => (60                  <li key={l}>{l}</li>61                ))}62              </ul>63            </div>64          ))}65        </div>66        <p className="mx-auto mt-12 w-full max-w-6xl px-5 text-sm text-muted sm:px-8">{site.footer.legal}</p>67      </footer>68    </div>69  );70}