Start the React project with Vite

I am a beginner building the website described in this spec:

<spec>
[paste SPEC.md here]
</spec>

Give me the exact terminal commands to create the project with Vite (React, JavaScript, not TypeScript), install react-router-dom, and start the dev server. I am on [Windows / macOS / Linux]. Then list the folders I should create inside src for this spec. Do not write any component code yet. Explain each command in one line.

npm create vite@latest brew-and-bean -- --template react
cd brew-and-bean
npm install
npm install react-router-dom
npm run dev

# macOS / Linux / Git Bash
rm -rf src/assets src/App.css public/icons.svg
mkdir -p src/components src/pages src/context src/data src/utils

# PowerShell
Remove-Item -Recurse -Force src/assets, src/App.css, public/icons.svg -ErrorAction SilentlyContinue
New-Item -ItemType Directory -Force src/components, src/pages, src/context, src/data, src/utils

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Brew &amp; Bean</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { BrowserRouter } from 'react-router-dom'
import App from './App.jsx'
import './index.css'

createRoot(document.getElementById('root')).render(
  <StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </StrictMode>,
)

import { Routes, Route } from 'react-router-dom'
import Header from './components/Header.jsx'
import Footer from './components/Footer.jsx'
import Home from './pages/Home.jsx'
import Menu from './pages/Menu.jsx'
import Cart from './pages/Cart.jsx'
import NotFound from './pages/NotFound.jsx'

export default function App() {
  return (
    <div className="app">
      <Header />
      <main id="main">
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/menu" element={<Menu />} />
          <Route path="/cart" element={<Cart />} />
          <Route path="*" element={<NotFound />} />
        </Routes>
      </main>
      <Footer />
    </div>
  )
}

import { Link, NavLink } from 'react-router-dom'

export default function Header() {
  return (
    <header className="site-header">
      <div className="container header-inner">
        <Link to="/" className="brand">
          Brew &amp; Bean
        </Link>
        <nav aria-label="Main">
          <ul className="nav-list">
            <li>
              <NavLink to="/" end>
                Home
              </NavLink>
            </li>
            <li>
              <NavLink to="/menu">Menu</NavLink>
            </li>
            <li>
              <NavLink to="/cart">Cart</NavLink>
            </li>
          </ul>
        </nav>
      </div>
    </header>
  )
}

const year = new Date().getFullYear()

export default function Footer() {
  return (
    <footer className="site-footer">
      <div className="container">
        <p>
          <strong>Brew &amp; Bean</strong>, Indiranagar, Bengaluru
        </p>
        <p>Open 8 am to 10 pm. Pickup orders only.</p>
        <p>&copy; {year} Brew &amp; Bean</p>
      </div>
    </footer>
  )
}

export default function Home() {
  return (
    <section className="container page">
      <h1>Brew &amp; Bean</h1>
      <p>Home page coming soon.</p>
    </section>
  )
}

export default function Menu() {
  return (
    <section className="container page">
      <h1>Our menu</h1>
      <p>Menu page coming soon.</p>
    </section>
  )
}

export default function Cart() {
  return (
    <section className="container page">
      <h1>Your cart</h1>
      <p>Cart page coming soon.</p>
    </section>
  )
}

import { Link } from 'react-router-dom'

export default function NotFound() {
  return (
    <section className="container page">
      <h1>Page not found</h1>
      <p>We could not find that page.</p>
      <Link to="/">Go back home</Link>
    </section>
  )
}

:root {
  --bg: #faf6f1;
  --surface: #ffffff;
  --text: #2b1d14;
  --muted: #6b5b50;
  --brand: #6f4e37;
  --brand-dark: #4e3626;
  --accent: #f3e9df;
  --border: #e4d6c8;
  --field-border: #8a7668;
  --danger: #b00020;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
}

h1,
h2,
h3 {
  line-height: 1.2;
}

a {
  color: var(--brand);
}

.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 24px;
}

.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

.page {
  padding-top: 32px;
  padding-bottom: 32px;
}

/* Header */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
  padding-bottom: 16px;
}

.brand {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
}

.nav-list {
  list-style: none;
  display: flex;
  gap: 24px;
  margin: 0;
  padding: 0;
}

.nav-list a {
  color: var(--text);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}

.nav-list a:hover,
.nav-list a.active {
  border-bottom-color: var(--brand);
}

/* Footer */
.site-footer {
  background: var(--text);
  color: var(--accent);
  padding: 24px 0;
  margin-top: 48px;
}

.site-footer p {
  margin: 4px 0;
}

I am building a React app with Vite and react-router-dom. I got this error:

<error>
[paste the full error from the terminal or browser console]
</error>

This is the file it points to:

<code>
[paste the file]
</code>

Explain in plain English what the error means and what caused it. Then give the smallest fix. Do not rewrite the whole file.

git init
git add .
git commit -m "Set up Vite, routing and layout"