Site

┌─────────────────────────────────────────┐
│ header                                  │
│ ┌──────┐ ┌────────────────────────────┐ │
│ │ logo │ │ nav                        │ │
│ └──────┘ └────────────────────────────┘ │
├─────────────────────────────────────────┤
│                                         │
│ main                                    │
│                                         │
│   {children}                            │
│                                         │
├─────────────────────────────────────────┤
│ footer                                  │
│ ┌─────────────┐ ┌─────────┐ ┌─────────┐ │
│ │ footer-nav  │ │ social  │ │copyright│ │
│ └─────────────┘ └─────────┘ └─────────┘ │
└─────────────────────────────────────────┘

<Site
  siteName="Acme Corp"
  logo="/logo.svg"
  nav={[
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'About', href: '/about' },
  ]}
  copyright="© 2024 Acme Corp"
>
  <Page title="Welcome">
    <Hero title="Build something great" />
  </Page>
</Site>

Site::part(root) { }
Site::part(header) { }
Site::part(logo) { }
Site::part(nav) { }
Site::part(nav-item) { }
Site::part(main) { }
Site::part(sidebar) { }
Site::part(footer) { }

<div data-component="Site" part="root">
  <header part="header">
    <a part="logo" href="/"><img src="/logo.svg" alt="Acme" /></a>
    <nav part="nav">
      <a part="nav-item" href="/">Home</a>
      <a part="nav-item" href="/products">Products</a>
    </nav>
  </header>
  <main part="main">{children}</main>
  <footer part="footer">
    <nav part="footer-nav">...</nav>
    <div part="social">...</div>
    <p part="copyright">© 2024</p>
  </footer>
</div>