> ## Documentation Index
> Fetch the complete documentation index at: https://docs.kleap.co/llms.txt
> Use this file to discover all available pages before exploring further.

# App Foundation

> The technology behind your Kleap sites

Every Kleap site is built on a modern, performance-first foundation designed for speed and SEO.

## Technology Stack

When Kleap builds your site, you get:

| Technology              | Purpose                                            |
| ----------------------- | -------------------------------------------------- |
| **Astro 5**             | Fast, mostly-static site framework (great for SEO) |
| **Tailwind CSS v4**     | Utility-first, responsive styling                  |
| **React 19 islands**    | Interactivity only where it's needed               |
| **TypeScript**          | Type-safe components                               |
| **Global edge network** | Global hosting for your published site             |

<Info>
  Kleap ships mostly static HTML by default, so your pages are fast and rank well. Interactive parts (menus, sliders, forms, dashboards) are added as React "islands" without slowing down the rest of the page.
</Info>

## Project Structure

A generated Astro site is organized like this:

```
your-site/
├── src/
│   ├── pages/          # Each .astro file is a page/route
│   ├── components/     # Reusable .astro and .tsx components
│   ├── layouts/        # Shared page shells (Base.astro)
│   └── styles/         # global.css (Tailwind)
├── public/             # Static assets (images, fonts)
└── astro.config.mjs    # Framework config (managed by Kleap)
```

<Info>
  You focus on describing pages and content — Kleap manages the configuration files (`astro.config.mjs`, build settings) for you.
</Info>

## Building with AI

Instead of editing template code by hand, you describe what you want:

### Create Sections

```
Add a pricing section with three tiers:
Free, Pro, and Enterprise
```

### Add Pages

```
Add an About page and a Contact page,
and link them in the navigation
```

### Style Changes

```
Change the color scheme to blue
with a modern, clean design
```

## Adding Dynamic Features

Your site is static by default, but you can add dynamic capability when you need it:

* **Forms** — contact, lead, and newsletter forms work out of the box ([Forms & Data](/features/forms-data))
* **Database & accounts** — add **Kleap Database** for bookings, saved data, or user logins ([Kleap Database](/integrations/database))
* **Payments** — embed Stripe payment links or buttons ([Payments](/integrations/stripe))

## Best Practices

<AccordionGroup>
  <Accordion title="Start simple">
    Begin with a basic description, then add sections and pages incrementally.
  </Accordion>

  <Accordion title="Be specific">
    The more detail you provide, the better Kleap understands your vision.
  </Accordion>

  <Accordion title="Iterate">
    Build in small steps. Check each change in the preview before moving on.
  </Accordion>
</AccordionGroup>

<Card title="Start Building" icon="play" href="/introduction/getting-started">
  Create your first site
</Card>