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

# Website Generation

> Learn how Avallon generates websites from your descriptions

## How It Works

Avallon uses advanced AI (powered by Google's Gemini) to understand your description and generate a complete, functional website. The AI analyzes your prompt and creates:

* **HTML Structure**: Semantic, accessible markup
* **CSS Styling**: Modern, responsive design
* **JavaScript**: Interactive elements and functionality
* **Multi-Page Navigation**: Automatic routing between pages
* **Optimized Assets**: Properly sized images and resources

## Writing Effective Prompts

To get the best results, be specific about:

### What to Include

<CardGroup cols={2}>
  <Card title="Website Type">
    Specify what kind of website you want (portfolio, business, e-commerce, blog, etc.)
  </Card>

  <Card title="Design Style">
    Describe the aesthetic (modern, minimalist, bold, elegant, etc.)
  </Card>

  <Card title="Color Scheme">
    Mention preferred colors or mood (warm, cool, professional, vibrant)
  </Card>

  <Card title="Pages Needed">
    List the pages you want (home, about, services, contact, etc.)
  </Card>
</CardGroup>

### Example Prompts

<CodeGroup>
  ```plaintext Good Prompt theme={null}
  A modern portfolio website for a freelance photographer specializing in wedding photography. 
  Include a hero section with stunning images, an about page with personal story, a portfolio 
  gallery with filtering, and a contact form. Use a clean, elegant design with soft pastel 
  colors and plenty of white space.
  ```

  ```plaintext Better Prompt theme={null}
  Create a professional SaaS landing page for a project management tool called "TaskFlow". 
  Include: hero section with value proposition, features section with icons, pricing table 
  with 3 tiers, customer testimonials, and a sign-up form. Use a modern blue and white 
  color scheme with gradients. Target audience is small business owners and teams.
  ```
</CodeGroup>

## Multi-Page Generation

By default, Avallon generates multi-page websites. The AI automatically creates:

* **Home/Index Page**: Main landing page
* **About Page**: About section
* **Services/Features Page**: What you offer
* **Contact Page**: Contact form and information

You can specify custom pages in your prompt:

```
A restaurant website with pages for: home, menu, reservations, location, and about.
```

## Regeneration and Modifications

After generating your initial website, you can:

1. **Regenerate**: Start over with a new description
2. **Modify with AI Assist**: Ask for specific changes
3. **Edit Visually**: Use the visual editor to make changes

<Warning>
  Each generation uses credits. Free accounts start with 5 credits, and each website generation costs 1 credit.
</Warning>

## Tips for Best Results

<AccordionGroup>
  <Accordion title="Be Specific">
    Instead of "a website", say "a modern portfolio website for a photographer with a gallery and contact form"
  </Accordion>

  <Accordion title="Mention Your Industry">
    Include your industry or business type to get relevant design patterns
  </Accordion>

  <Accordion title="Describe Your Audience">
    Mention who the website is for to get appropriate tone and design
  </Accordion>

  <Accordion title="Request Specific Features">
    Ask for specific features like "shopping cart", "blog", "testimonials section"
  </Accordion>
</AccordionGroup>