# Simple page

A one-page site for a small business — a plumber, an electrician, a
freelancer, a personal page. One project, one HTML file, everything
hardcoded. No sub-pages, no metadata, no `cross_page_metadata.json`.

This is the right pattern when:

- The content is mostly static (a phone number, an address, a list of
  services that doesn't change)
- The user wants something live in five minutes
- There's nothing that needs to update without editing HTML

If the user wants a contact form on the page, you must convert them
to a Google account first (direct API only — MCP users are already on Google). See
the bottom of this file for the variant with a form.

## The script

```python
import requests
import time

API = "https://api.uat-beam.page"
TOKEN = "<your-token>"
H = {"Authorization": f"Bearer {TOKEN}", "Content-Type": "application/json"}

slug = "manchester-plumber"

# Create the project — context is just a note for you (and future LLMs)
requests.post(f"{API}/projects", headers=H, json={
    "slug": slug,
    "context": "A plumbing business in Manchester. Single landing page with services and contact details.",
})
time.sleep(2)

# Brand it — pick colours that match the business
requests.put(f"{API}/projects/{slug}/assets/tailwind-config.js", headers=H, json={
    "content": (
        'tailwind.config = { theme: { extend: { '
        'colors: { brand: "#1e40af", accent: "#dc2626" } '
        '} } }'
    ),
})

# The whole site is one HTML file. Phone, services, hours — all
# hardcoded. No metadata, no cross_page_metadata.json, no Alpine state.
html = """<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Manchester Plumber — 24/7 Emergency Plumbing</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script src="/assets/tailwind-config.js"></script>
</head>
<body class="bg-stone-50 text-stone-900 font-sans">

  <header class="bg-brand text-white py-16 px-6 text-center">
    <h1 class="text-5xl font-bold mb-2">Manchester Plumber</h1>
    <p class="text-xl text-blue-100">24/7 Emergency Plumbing Services</p>
    <a href="tel:01612000000"
       class="inline-block mt-6 bg-white text-brand px-6 py-3 rounded-lg text-lg font-bold hover:bg-blue-50">
      Call 0161 200 0000
    </a>
  </header>

  <main class="max-w-3xl mx-auto px-6 py-16">
    <section class="text-center mb-16">
      <h2 class="text-3xl font-bold text-brand mb-4">What we do</h2>
      <div class="grid md:grid-cols-2 gap-6 text-left">
        <div class="bg-white p-6 rounded-lg shadow">
          <h3 class="font-bold text-lg mb-2">Emergency Repairs</h3>
          <p class="text-stone-600">Burst pipes, leaks, blocked drains. We arrive within the hour.</p>
        </div>
        <div class="bg-white p-6 rounded-lg shadow">
          <h3 class="font-bold text-lg mb-2">Boiler Servicing</h3>
          <p class="text-stone-600">Annual boiler servicing and Gas Safe repairs.</p>
        </div>
        <div class="bg-white p-6 rounded-lg shadow">
          <h3 class="font-bold text-lg mb-2">Bathrooms</h3>
          <p class="text-stone-600">Full bathroom installations and upgrades.</p>
        </div>
        <div class="bg-white p-6 rounded-lg shadow">
          <h3 class="font-bold text-lg mb-2">Drains</h3>
          <p class="text-stone-600">Blocked drains, CCTV inspection, jet-washing.</p>
        </div>
      </div>
    </section>

    <section class="bg-brand text-white rounded-lg p-12 text-center">
      <h2 class="text-2xl font-bold mb-4">Need help right now?</h2>
      <p class="text-blue-100 mb-6">We're open 24 hours a day, 7 days a week.</p>
      <a href="tel:01612000000"
         class="inline-block bg-white text-brand px-8 py-3 rounded-lg text-lg font-bold hover:bg-blue-50">
        Call 0161 200 0000
      </a>
    </section>
  </main>

  <footer class="text-center py-8 text-stone-500 text-sm">
    Manchester Plumber &middot; Gas Safe Reg. 123456 &middot; Manchester, UK
  </footer>

</body>
</html>
"""

# The main page is slug "/" but accessed via the API as "_root"
requests.put(
    f"{API}/projects/{slug}/pages/_root/files/index.html",
    headers=H,
    json={"content": html},
)

print(f"Done. Live at https://{slug}.uat-beam.page")
```

## What you get

- A branded landing page at `https://manchester-plumber.uat-beam.page`
- Hero with the business name, tagline, and a clickable phone number
- Four service cards
- A "call us now" CTA at the bottom
- Footer with registration details
- All static. No JavaScript needed beyond Tailwind.

To update anything (phone number, services, prices), just upload a new
`index.html` with the changed content.

## Variant: with a contact form

If the user wants visitors to be able to send a message instead of just
calling, you need a contact form using the email action. **The email
action requires a Google account.**

Convert the user to Google before running this variant. See the
the "Getting started" section in the main `llm.txt`.

Add this section to the HTML, and replace the placeholder slug in the
`fetch()` URL with your actual project slug:

```html
<section class="bg-white rounded-lg shadow p-8 mt-12">
  <h2 class="text-2xl font-bold text-brand mb-4 text-center">Get a free quote</h2>

  <form x-data="{ sending: false, sent: false, name: '', phone: '', issue: '' }"
        @submit.prevent="
          sending = true;
          fetch('https://api.uat-beam.page/actions/manchester-plumber/email', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({
              subject: 'New quote request from ' + name,
              name: name,
              phone: phone,
              issue: issue
            })
          })
          .then(() => { sent = true; sending = false })
          .catch(() => { sending = false; alert('Failed to send. Please call us instead.') })
        ">

    <template x-if="!sent">
      <div class="space-y-4">
        <input x-model="name" type="text" placeholder="Your name" required
               class="w-full border border-stone-300 rounded p-3">
        <input x-model="phone" type="tel" placeholder="Phone number" required
               class="w-full border border-stone-300 rounded p-3">
        <textarea x-model="issue" placeholder="What's the problem?" required rows="4"
                  class="w-full border border-stone-300 rounded p-3"></textarea>
        <button type="submit" :disabled="sending"
                class="w-full bg-brand text-white py-4 rounded font-bold hover:bg-blue-900 disabled:opacity-50">
          <span x-show="!sending">Send quote request</span>
          <span x-show="sending">Sending...</span>
        </button>
      </div>
    </template>

    <template x-if="sent">
      <div class="text-center py-4">
        <h3 class="text-xl font-bold text-brand mb-1">Thanks!</h3>
        <p class="text-stone-600">We'll call you back within 30 minutes.</p>
      </div>
    </template>
  </form>
</section>
```

Don't forget to add Alpine.js to the bottom of `<body>`:

```html
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js" defer></script>
```

The plumber's quote requests will be emailed straight to their inbox.
