---
title: Netlify Documentation
description: Build & deploy faster with any modern frontend stack or AI agent.
---

import "../../styles/home.css";

<div class="hero-cards n-flow">
  <div class="cards n-flex-grid" style="--n-grid-column-min-size: min(300px, 100%);">
  {data?.hero?.cards.map((card, index) => (
      
{card?.icon && 
> **Icon** component (self-closing)

}

---

    ))}
  </div>
  <div class="hero-card-buttons n-cluster">
    
### Button Component:

Start the deploy wizard

### Button Component:

Set up domain

  </div>
</div>

{
  data.sections.map((section) => {
    if (section?.componentType === 'whats-new') {
      return 
> **WhatsNewSection** component (self-closing)

    }

    if (section?.componentType === 'frameworks') {
      return 
> **FrameworkSection** component (self-closing)

    }

    if (section?.componentType === "newsfeed") {
      return 
> **NewsfeedSection** component (self-closing)

    }

    if (section?.componentType === "support") {
      return 
> **SupportSection** component (self-closing)

    }

    return (
      <section id={section?.id} class="n-flow">
        <div class="section-header">
          <p class="section-eyebrow">{section.eyebrow}</p>
          <h2 class="section-heading">{section.heading}</h2>
          <div class="n-grid" style="--n-grid-column-min-size: min(400px, 100%);">
            <p>{section.subheading}</p>
            {section.cta && <a class="section-header-link" id={section.cta.id} href={section.cta.href}>{section.cta.text}</a>}
          </div>
        </div>
        <div class={`cards ${section.options?.grid ? section.options?.grid : 'n-flex-grid'}`} style={section?.options?.gridMin ? `--grid-min: ${section?.options?.gridMin}` : ''}>
          {
            section?.cards.filter(card => !card?.badge).map((card) => {
              return (
                
{card?.icon && 
> **Icon** component (self-closing)

}

---

              )
            })
          }
        </div>
        {section?.cards.some(card => card?.badge) && (
          <div class="primitives-section">
            <div class={`cards ${section.options?.grid ? section.options?.grid : 'n-flex-grid'}`} style={section?.options?.gridMin ? `--grid-min: ${section?.options?.gridMin}` : ''}>
              {
                section?.cards.filter(card => card?.badge).map((card) => {
                  return (

### Fragment Component:

{card?.badge && 
> **Badge** component (self-closing)

}
                        {card?.icon && 
> **Icon** component (self-closing)

}

---

                  )
                })
              }
            </div>
          </div>
        )}
      </section>
    )
  })
}

> **HomePageTracking** component (self-closing)