Add a scattered food-icon backdrop to the menu page and tastier copy

MenuBackdrop renders pizza, burger, and fries stroke icons at fixed,
hand-placed positions (no Math.random(), to avoid an SSR/client
hydration mismatch) as a fixed, pointer-events-none layer behind the
page content. Also tweaks the intro line to call out "your tasty menu".

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/components/ordering/MenuBackdrop.module.scss

@@ -0,0 +1,20 @@
+@use '../../styles/variables' as *;
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  overflow: hidden;
+  pointer-events: none;
+}
+
+.icon {
+  position: absolute;
+  color: $color-primary;
+  opacity: 0.08;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}

src/components/ordering/MenuBackdrop.tsx

@@ -0,0 +1,87 @@
+import styles from './MenuBackdrop.module.scss'
+
+const PizzaIcon = () => (
+  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5">
+    <path strokeLinecap="round" strokeLinejoin="round" d="M12 3 3 20h18L12 3Z" />
+    <path
+      strokeLinecap="round"
+      d="M4.5 17.5c2.5-1.5 4.5-1.5 7.5-.5s5 1 7.5-.5"
+    />
+    <circle cx="10" cy="14" r="0.9" fill="currentColor" stroke="none" />
+    <circle cx="14.5" cy="15.5" r="0.9" fill="currentColor" stroke="none" />
+  </svg>
+)
+
+const BurgerIcon = () => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M4 10c0-3 3.5-5 8-5s8 2 8 5" />
+    <path d="M3 10.5h18" />
+    <path d="M4 13.5h16" />
+    <path d="M3.5 16.5h17" />
+    <path d="M4 19c0 1 .8 1.5 2.2 1.5h11.6c1.4 0 2.2-.5 2.2-1.5" />
+  </svg>
+)
+
+const FriesIcon = () => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="1.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <path d="M6 9 5 21h14l-1-12Z" />
+    <path d="M9 4.5v6M12 3.5v7M15 4.5v6" />
+  </svg>
+)
+
+const ICONS = [PizzaIcon, BurgerIcon, FriesIcon]
+
+// Fixed, hand-placed positions rather than random ones — random values would
+// differ between the server-rendered and first client-rendered HTML and
+// trigger a hydration mismatch.
+const PLACEMENTS = [
+  { top: '6%', left: '6%', size: 72, rotate: -14 },
+  { top: '14%', left: '86%', size: 56, rotate: 20 },
+  { top: '30%', left: '46%', size: 64, rotate: -6 },
+  { top: '46%', left: '10%', size: 52, rotate: 10 },
+  { top: '58%', left: '90%', size: 68, rotate: -18 },
+  { top: '72%', left: '30%', size: 58, rotate: 14 },
+  { top: '82%', left: '68%', size: 60, rotate: -8 },
+  { top: '4%', left: '40%', size: 44, rotate: 8 },
+  { top: '38%', left: '78%', size: 46, rotate: -22 },
+  { top: '64%', left: '52%', size: 40, rotate: 16 },
+  { top: '90%', left: '12%', size: 50, rotate: -10 },
+  { top: '20%', left: '20%', size: 42, rotate: 24 },
+]
+
+export const MenuBackdrop = () => (
+  <div className={styles.backdrop} aria-hidden="true">
+    {PLACEMENTS.map((placement, index) => {
+      const Icon = ICONS[index % ICONS.length]
+      return (
+        <span
+          key={index}
+          className={styles.icon}
+          style={{
+            top: placement.top,
+            left: placement.left,
+            width: placement.size,
+            height: placement.size,
+            transform: `rotate(${placement.rotate}deg)`,
+          }}
+        >
+          <Icon />
+        </span>
+      )
+    })}
+  </div>
+)

src/routes/index.tsx

@@ -1,5 +1,6 @@
 import { createFileRoute } from '@tanstack/react-router'
 
+import { MenuBackdrop } from '#/components/ordering/MenuBackdrop.tsx'
 import { MenuList } from '#/components/ordering/MenuList.tsx'
 import { useBasket } from '#/lib/basket.tsx'
 import { getBrand } from '#/server/brand.ts'
@@ -13,10 +14,11 @@ const OrderingPage = () => {
 
   return (
     <main className={styles.page}>
+      <MenuBackdrop />
       <p className={styles.intro}>
         Zero cooks, all machine. A robotic kitchen grills, assembles, and
-        plates your order in real time — watch it happen live, from click to
+        plates your tasty menu in real time — watch it happen live, from
-        pickup.
+        click to pickup.
       </p>
       <MenuList menu={menu} lines={lines} onAdd={add} onRemove={remove} />
     </main>