feat: scaffold holiday booking project

src/app/page.tsx

@@ -0,0 +1,153 @@
+import { Section } from '@/components/Section';
+import { site } from '@/lib/site';
+
+const phaseCards = [
+  {
+    title: 'Project scaffold',
+    items: ['Next.js app shell', 'Bootstrap + Sass', 'Shared layout and navigation'],
+  },
+  {
+    title: 'Foundation data model',
+    items: ['Prisma schema', 'Booking and payment entities', 'Content and property records'],
+  },
+  {
+    title: 'Runtime readiness',
+    items: ['Health endpoint', 'Environment variables', 'Docker entrypoint'],
+  },
+];
+
+const stackCards = [
+  {
+    title: 'Frontend',
+    items: ['Next.js App Router', 'React 19', 'Bootstrap 5', 'Sass theme layer'],
+  },
+  {
+    title: 'Backend',
+    items: ['Next.js route handlers', 'Prisma client', 'PostgreSQL'],
+  },
+  {
+    title: 'Platform',
+    items: ['Docker-based environments', 'Stripe Checkout later', 'Transactional email later'],
+  },
+  {
+    title: 'Scope control',
+    items: ['Docs-first planning', 'Phase gates', 'Separate booking and payment state'],
+  },
+];
+
+export default function HomePage() {
+  return (
+    <>
+      <section className="hero" id="top">
+        <div className="hero-copy">
+          <p className="brand-kicker">Phase 1 foundation</p>
+          <h2>{site.tagline}</h2>
+          <p>{site.description}</p>
+
+          <div className="hero-actions">
+            <a className="btn btn-primary" href="#foundation">
+              Review foundation
+            </a>
+            <a className="btn btn-outline-dark" href="/api/health">
+              Check health
+            </a>
+          </div>
+        </div>
+
+        <aside className="hero-panel" aria-label="Build snapshot">
+          <div className="info-card">
+            <p className="footer-label">Current state</p>
+            <strong>Scaffold created</strong>
+            <p className="mb-0 text-body-secondary">
+              The project now has a repo boundary, app shell, and database foundation to build on.
+            </p>
+          </div>
+
+          <div className="metric-grid">
+            <div className="metric">
+              <strong>5</strong>
+              <span>Foundation steps queued</span>
+            </div>
+            <div className="metric">
+              <strong>1</strong>
+              <span>Health endpoint</span>
+            </div>
+          </div>
+        </aside>
+      </section>
+
+      <Section
+        id="foundation"
+        eyebrow="What is in place"
+        title="Foundation work starts here"
+        description="The approved planning docs are already complete, so the first build slice is the shared platform foundation rather than a feature page."
+      >
+        <div className="phase-grid">
+          {phaseCards.map((card) => (
+            <article key={card.title} className="phase-card">
+              <h3>{card.title}</h3>
+              <ul>
+                {card.items.map((item) => (
+                  <li key={item}>{item}</li>
+                ))}
+              </ul>
+            </article>
+          ))}
+        </div>
+      </Section>
+
+      <Section
+        id="stack"
+        eyebrow="Technical direction"
+        title="The implementation stack is locked"
+        description="The app is set up to match the approved planning docs: Next.js, TypeScript, Bootstrap 5, Sass, PostgreSQL, Prisma, and Docker-based environments."
+      >
+        <div className="data-grid">
+          {stackCards.map((card) => (
+            <article key={card.title} className="data-card">
+              <h3>{card.title}</h3>
+              <ul>
+                {card.items.map((item) => (
+                  <li key={item}>{item}</li>
+                ))}
+              </ul>
+            </article>
+          ))}
+        </div>
+      </Section>
+
+      <Section
+        id="data"
+        eyebrow="Data model"
+        title="The first schema pass is ready"
+        description="The initial Prisma schema covers the core content, property, booking, payment, and site settings entities so later screens can use real records instead of placeholders."
+      >
+        <div className="data-card">
+          <h3>Seeded core entities</h3>
+          <ul>
+            {site.highlights.map((item) => (
+              <li key={item}>{item}</li>
+            ))}
+          </ul>
+        </div>
+      </Section>
+
+      <Section
+        id="launch"
+        eyebrow="Next move"
+        title="Ready for the first implementation slice"
+        description="From here, the next work is to connect the app to real data and start the public browsing flow. The scaffold avoids guessing at booking behavior until the later docs are turned into screens."
+      >
+        <div className="data-card">
+          <h3>Immediate follow-up</h3>
+          <ul>
+            <li>Connect Prisma to a real Postgres instance.</li>
+            <li>Seed the first property and content records.</li>
+            <li>Start the public homepage and listing screens.</li>
+          </ul>
+        </div>
+      </Section>
+    </>
+  );
+}
+