undefined

Frame: [name] (Auto-layout, Vertical)
├─ Header (Auto-layout, Horizontal)
│  ├─ Logo (Component Instance)
│  └─ Navigation (Auto-layout, Horizontal)
│     ├─ NavItem (Component Instance) x4
│     └─ Button (Component Instance)
├─ MainContent (Auto-layout, Vertical)
│  ├─ Hero (Frame)
│  │  ├─ Title (Text)
│  │  └─ Subtitle (Text)
│  └─ Features (Auto-layout, Horizontal, wrap)
│     └─ FeatureCard (Component Instance) x6
└─ Footer (Auto-layout, Horizontal)

<header>
  <nav>
    <a href="/" aria-label="Home">
      <img src="logo.svg" alt="Company Name" />
    </a>
    <ul role="list">
      <li><a href="/about">About</a></li>
      <!-- ... -->
    </ul>
  </nav>
</header>
<main>
  <section aria-labelledby="hero-title">
    <h1 id="hero-title">...</h1>
  </section>
  <section aria-labelledby="features-title">
    <h2 id="features-title">Features</h2>
    <div role="list">
      <!-- Feature cards -->
    </div>
  </section>
</main>
<footer>
  <!-- Footer content -->
</footer>

/* Use CSS Grid for feature layout */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

/* Use Flexbox for header */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-xl);
}

undefined