feat: add Home landing page assembling all sections

src/App.test.tsx

@@ -3,11 +3,9 @@ import { describe, it, expect } from 'vitest'
 import App from './App'
 
 describe('App routing', () => {
-  it('renders the home placeholder at / with nav and footer', () => {
+  it('renders the Home page at /', () => {
     render(<App initialEntries={['/']} />)
-    expect(screen.getByTestId('page-home')).toBeInTheDocument()
-    expect(screen.getByRole('navigation')).toBeInTheDocument()
-    expect(screen.getByText(/hello@braidsbymira.com/)).toBeInTheDocument()
+    expect(screen.getByText(/your hair, your crown/i)).toBeInTheDocument()
   })
 
   it('renders the Shop page at /shop', () => {

src/App.tsx

@@ -1,5 +1,6 @@
 import { BrowserRouter, MemoryRouter, Routes, Route } from 'react-router-dom'
 import Layout from './components/Layout'
+import Home from './pages/Home'
 import Shop from './pages/Shop'
 import Book from './pages/Book'
 import Rules from './pages/Rules'
@@ -12,7 +13,7 @@ function AppRoutes() {
   return (
     <Routes>
       <Route element={<Layout />}>
-        <Route path="/" element={<div data-testid="page-home" />} />
+        <Route path="/" element={<Home />} />
         <Route path="/shop" element={<Shop />} />
         <Route path="/book" element={<Book />} />
         <Route path="/rules" element={<Rules />} />

src/pages/Home.module.css

@@ -0,0 +1,53 @@
+.hero {
+  text-align: center;
+  padding: var(--space-xl) var(--space-lg);
+}
+
+.headline {
+  font-family: var(--font-script);
+  font-size: 3rem;
+  margin: var(--space-md) 0 0;
+}
+
+.tagline {
+  font-size: 0.75rem;
+  letter-spacing: 3px;
+  text-transform: uppercase;
+  color: #6b6259;
+}
+
+.ctas {
+  margin-top: var(--space-lg);
+  display: flex;
+  gap: var(--space-md);
+  justify-content: center;
+}
+
+.section {
+  padding: var(--space-xl) var(--space-lg);
+  text-align: center;
+}
+
+.altSection {
+  composes: section;
+  background: var(--color-cream-alt);
+}
+
+.row {
+  display: flex;
+  gap: var(--space-md);
+  justify-content: center;
+  flex-wrap: wrap;
+  margin-top: var(--space-lg);
+}
+
+.banner {
+  background: var(--color-charcoal);
+  color: var(--color-cream);
+  padding: var(--space-xl) var(--space-lg);
+  text-align: center;
+}
+
+.banner a {
+  color: var(--color-gold);
+}

src/pages/Home.test.tsx

@@ -0,0 +1,40 @@
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { MemoryRouter, Routes, Route } from 'react-router-dom'
+import { describe, it, expect } from 'vitest'
+import Home from './Home'
+import Book from './Book'
+import { services } from '../data/services'
+
+function renderHome() {
+  return render(
+    <MemoryRouter initialEntries={['/']}>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/book" element={<Book />} />
+      </Routes>
+    </MemoryRouter>,
+  )
+}
+
+describe('Home page', () => {
+  it('renders the hero headline and all four signature styles', () => {
+    renderHome()
+    expect(screen.getByText(/your hair, your crown/i)).toBeInTheDocument()
+    for (const service of services) {
+      expect(screen.getByText(service.name)).toBeInTheDocument()
+    }
+  })
+
+  it('renders shop highlights and a link to the rules page', () => {
+    renderHome()
+    expect(screen.getByRole('link', { name: /shop all/i })).toHaveAttribute('href', '/shop')
+    expect(screen.getByRole('link', { name: /read the rules|salon rules/i })).toHaveAttribute('href', '/rules')
+  })
+
+  it('navigates to /book with the chosen service preselected when a signature style is clicked', async () => {
+    renderHome()
+    await userEvent.click(screen.getByRole('button', { name: new RegExp(services[0].name) }))
+    expect(screen.getByLabelText(/choose a date/i)).toBeInTheDocument()
+  })
+})

src/pages/Home.tsx

@@ -0,0 +1,95 @@
+import { Link, useNavigate } from 'react-router-dom'
+import Hero3D from '../components/Hero3D'
+import ScrollReveal from '../components/ScrollReveal'
+import ServiceCard from '../components/ServiceCard'
+import { services } from '../data/services'
+import { products } from '../data/products'
+import styles from './Home.module.css'
+
+const TESTIMONIALS = [
+  { quote: 'Mira made me feel like royalty in her chair. My braids lasted 8 weeks!', author: 'Amara T.' },
+  { quote: 'The most gentle, precise braider I have ever been to.', author: 'Keisha R.' },
+  { quote: 'Booking was so easy and the results speak for themselves.', author: 'Nadia F.' },
+]
+
+function Home() {
+  const navigate = useNavigate()
+
+  return (
+    <div>
+      <section className={styles.hero}>
+        <Hero3D />
+        <h1 className={styles.headline}>Your hair, your crown</h1>
+        <p className={styles.tagline}>Protective Styles by Mira</p>
+        <div className={styles.ctas}>
+          <Link to="/book">Book Now</Link>
+          <Link to="/shop">Shop Products</Link>
+        </div>
+      </section>
+
+      <ScrollReveal>
+        <section className={styles.altSection}>
+          <h2>About Mira</h2>
+          <p>
+            With over a decade behind the chair, Mira treats every install as an art form —
+            gentle on the scalp, precise at the root, and finished with a crown you'll want
+            to show off.
+          </p>
+        </section>
+      </ScrollReveal>
+
+      <ScrollReveal>
+        <section className={styles.section}>
+          <h2>Signature Styles</h2>
+          <div className={styles.row}>
+            {services.map((service) => (
+              <ServiceCard
+                key={service.id}
+                service={service}
+                onSelect={(serviceId) => navigate('/book', { state: { serviceId } })}
+              />
+            ))}
+          </div>
+        </section>
+      </ScrollReveal>
+
+      <ScrollReveal>
+        <section className={styles.altSection}>
+          <h2>Shop Highlights</h2>
+          <div className={styles.row}>
+            {products.filter((p) => p.inStock).slice(0, 3).map((product) => (
+              <div key={product.id}>
+                <p>{product.name}</p>
+                <p>${product.price}</p>
+              </div>
+            ))}
+          </div>
+          <p><Link to="/shop">Shop All</Link></p>
+        </section>
+      </ScrollReveal>
+
+      <ScrollReveal>
+        <section className={styles.section}>
+          <h2>Client Love</h2>
+          <div className={styles.row}>
+            {TESTIMONIALS.map((t) => (
+              <blockquote key={t.author}>
+                <p>&ldquo;{t.quote}&rdquo;</p>
+                <cite>{t.author}</cite>
+              </blockquote>
+            ))}
+          </div>
+        </section>
+      </ScrollReveal>
+
+      <section className={styles.banner}>
+        <h2>Before You Book</h2>
+        <p>
+          Please take a moment to read the <Link to="/rules">salon rules</Link> before booking your appointment.
+        </p>
+      </section>
+    </div>
+  )
+}
+
+export default Home