Chat with the builder until the website feels right.

import "./generated-site.css";
import GeneratedSiteClient from "./generated-site.client";

const navLinks = [
  {
    "label": "Classes",
    "href": "#classes"
  },
  {
    "label": "Coaches",
    "href": "#coaches"
  },
  {
    "label": "Memberships",
    "href": "#memberships"
  },
  {
    "label": "Member Stories",
    "href": "#member-stories"
  }
];
const sections = [
  {
    "title": "Classes",
    "copy": "Curated sessions that make a premium fitness studio feel approachable from day one."
  },
  {
    "title": "Coaches",
    "copy": "Profiles, credentials, and human details build trust before the first visit."
  },
  {
    "title": "Memberships",
    "copy": "Simple packages help visitors compare options and choose confidently."
  },
  {
    "title": "Member Stories",
    "copy": "Short proof points show the transformation customers can expect."
  }
];

export default function Page() {
  return (
    <>
      <GeneratedSiteClient />
      <header className="site-header">
        <span className="logo">Pulse House</span>
        <nav className="site-nav" aria-label="Pulse House pages">
          {navLinks.map((link) => (
            <a href={link.href} key={link.href}>{link.label}</a>
          ))}
          <a href="#contact">Start</a>
        </nav>
      </header>

      <main>
        <section className="hero">
          <div className="hero-copy">
            <p className="kicker">An elevated landing for a fitness studio.</p>
            <h1>Pulse House turns attention into action.</h1>
            <p className="lede">Create a modern landing page for a boutique fitness studio called Pulse House. It should feel energetic, premium, and welcoming. Include classes, trainers, pricing, testimonials, and a strong sign-up call to action.</p>
            <div className="hero-actions">
              <a className="button primary" href="#contact">Book a Consultation</a>
              <a className="button ghost" href="#classes">Explore {sections[0].title}</a>
            </div>
          </div>
          <div className="hero-visual" aria-label="Pulse House visual preview">
            <div className="image-card main-card">
              <span>fitness studio</span>
              <strong>premium</strong>
            </div>
            <div className="stat-card">
              <strong>4.9</strong>
              <span>Customer rating</span>
            </div>
          </div>
        </section>

        <section className="section-grid" id="classes">
          {sections.map((section, index) => (
            <article id={section.title.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "")} key={section.title}>
              <span>{String(index + 1).padStart(2, "0")}</span>
              <h2>{section.title}</h2>
              <p>{section.copy}</p>
            </article>
          ))}
        </section>

        <section className="feature-band">
          <div>
            <p className="kicker">Built for momentum</p>
            <h2>A clear path from first impression to sign-up.</h2>
          </div>
          <ul>
            <li>Conversion-focused copy blocks</li>
            <li>Responsive sections for every device</li>
            <li>Reusable visual system and calls to action</li>
          </ul>
        </section>
      </main>

      <footer id="contact">
        <div>
          <strong>Pulse House</strong>
          <p>Ready to launch the next version of your fitness studio?</p>
        </div>
        <a className="button primary" href="mailto:hello@example.com">hello@example.com</a>
      </footer>
    </>
  );
}