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>
2026-09-13 20:11:18 +02:00
parent c5ed038bca
commit 315491dd5b
3 changed files with 111 additions and 2 deletions
@@ -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>
+)