feat: add Rules page

src/App.test.tsx

@@ -20,8 +20,8 @@ describe('App routing', () => {
     expect(screen.getByRole('heading', { name: /book an appointment/i })).toBeInTheDocument()
   })
 
-  it('renders the rules placeholder at /rules', () => {
+  it('renders the Rules page at /rules', () => {
     render(<App initialEntries={['/rules']} />)
-    expect(screen.getByTestId('page-rules')).toBeInTheDocument()
+    expect(screen.getByRole('heading', { name: /salon rules/i })).toBeInTheDocument()
   })
 })

src/App.tsx

@@ -2,6 +2,7 @@ import { BrowserRouter, MemoryRouter, Routes, Route } from 'react-router-dom'
 import Layout from './components/Layout'
 import Shop from './pages/Shop'
 import Book from './pages/Book'
+import Rules from './pages/Rules'
 
 interface AppProps {
   initialEntries?: string[]
@@ -14,7 +15,7 @@ function AppRoutes() {
         <Route path="/" element={<div data-testid="page-home" />} />
         <Route path="/shop" element={<Shop />} />
         <Route path="/book" element={<Book />} />
-        <Route path="/rules" element={<div data-testid="page-rules" />} />
+        <Route path="/rules" element={<Rules />} />
       </Route>
     </Routes>
   )

src/pages/Rules.module.css

@@ -0,0 +1,21 @@
+.page {
+  padding: var(--space-xl) var(--space-lg);
+  max-width: 680px;
+  margin: 0 auto;
+}
+
+.section {
+  margin-bottom: var(--space-lg);
+}
+
+.section h2 {
+  color: var(--color-gold);
+  font-size: 1rem;
+  text-transform: uppercase;
+  letter-spacing: 1px;
+}
+
+.cta {
+  text-align: center;
+  margin-top: var(--space-xl);
+}

src/pages/Rules.test.tsx

@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react'
+import { MemoryRouter } from 'react-router-dom'
+import { describe, it, expect } from 'vitest'
+import Rules from './Rules'
+import { rules } from '../data/rules'
+
+describe('Rules page', () => {
+  it('renders every rule section title and body', () => {
+    render(<MemoryRouter><Rules /></MemoryRouter>)
+    for (const rule of rules) {
+      expect(screen.getByText(rule.title)).toBeInTheDocument()
+      expect(screen.getByText(rule.body)).toBeInTheDocument()
+    }
+  })
+
+  it('links back to booking', () => {
+    render(<MemoryRouter><Rules /></MemoryRouter>)
+    expect(screen.getByRole('link', { name: /book/i })).toHaveAttribute('href', '/book')
+  })
+})

src/pages/Rules.tsx

@@ -0,0 +1,24 @@
+import { Link } from 'react-router-dom'
+import { rules } from '../data/rules'
+import styles from './Rules.module.css'
+
+function Rules() {
+  return (
+    <div className={styles.page}>
+      <h1>Salon Rules & Policies</h1>
+      <p>Please read through before booking your appointment.</p>
+      {rules.map((rule) => (
+        <div key={rule.id} className={styles.section}>
+          <h2>{rule.title}</h2>
+          <p>{rule.body}</p>
+        </div>
+      ))}
+      <div className={styles.cta}>
+        <p>By booking, you agree to these terms.</p>
+        <Link to="/book">Book Now</Link>
+      </div>
+    </div>
+  )
+}
+
+export default Rules