design: add real photos from Lovable, dark purple arcade section, photo hero

css/style.css

@@ -292,72 +292,71 @@ h1, h2, h3, h4 {
   display: flex; align-items: center; justify-content: center; text-align: center;
   padding: calc(var(--nav-h) + 4rem) 1.5rem 5rem;
   overflow: hidden;
-  background:
+  background: hsl(25, 30%, 12%);
-    radial-gradient(ellipse 70% 50% at 50% 100%, hsl(25, 65%, 38%, .08) 0%, transparent 70%),
-    radial-gradient(ellipse 60% 60% at 20% 50%,  hsl(38, 80%, 55%, .06) 0%, transparent 65%),
-    linear-gradient(180deg, var(--bg) 0%, hsl(30, 22%, 93%) 50%, var(--bg) 100%);
 }
-.hero::before {
+
-  content: '';
+.hero-photo {
   position: absolute; inset: 0;
-  background-image:
+  width: 100%; height: 100%;
-    radial-gradient(circle, hsl(38, 80%, 55%, .3) 1px, transparent 1px),
+  object-fit: cover; object-position: center;
-    radial-gradient(circle, hsl(38, 80%, 55%, .15) 1px, transparent 1px);
+  z-index: 0;
-  background-size: 56px 56px, 96px 96px;
-  background-position: 0 0, 28px 28px;
-  opacity: .5;
 }
 
-.hero-body { position: relative; z-index: 1; max-width: 760px; }
+.warm-overlay {
-
+  position: absolute; inset: 0; z-index: 1;
-.hero-icon {
+  background: linear-gradient(to bottom, rgba(40,29,21,.62), rgba(40,29,21,.45));
-  font-size: 5rem; line-height: 1; display: block;
-  margin-bottom: 1.25rem;
-  filter: drop-shadow(0 4px 16px hsl(25, 65%, 38%, .3));
-  animation: float 4s ease-in-out infinite;
 }
-@keyframes float {
+
-  0%,100% { transform: translateY(0); }
+.hero-body { position: relative; z-index: 2; max-width: 760px; }
-  50%      { transform: translateY(-8px); }
+
+.hero-eyebrow {
+  font-family: var(--font-heading);
+  font-size: .85rem; font-weight: 400;
+  text-transform: uppercase; letter-spacing: .3em;
+  color: var(--gold);
+  margin-bottom: 1rem; display: block;
 }
 
 .hero-title {
   font-family: var(--font-heading);
   font-size: clamp(2.75rem, 8vw, 5.5rem);
   font-weight: 700;
-  color: var(--text);
+  color: hsl(40, 30%, 96%);
   letter-spacing: -.02em;
   margin-bottom: .3rem;
+  text-shadow: 0 2px 20px rgba(0,0,0,.4);
 }
-.hero-title .accent { color: var(--primary); }
 
 .hero-place {
-  font-size: .9rem;
+  font-size: .9rem; font-weight: 500;
-  font-weight: 500;
+  color: hsl(30, 20%, 75%);
-  color: var(--muted);
+  letter-spacing: .12em; text-transform: uppercase;
-  letter-spacing: .12em;
-  text-transform: uppercase;
   margin-bottom: 1.5rem;
 }
 .hero-copy {
   font-size: 1.1rem;
-  color: var(--text-2);
+  color: hsl(30, 15%, 88%);
-  max-width: 520px; margin: 0 auto 1rem;
+  max-width: 520px; margin: 0 auto 2.5rem;
   line-height: 1.8;
 }
-.hero-note {
-  display: inline-block;
-  font-size: .82rem; font-weight: 500;
-  color: var(--primary);
-  background: hsl(25, 65%, 38%, .08);
-  border: 1px solid hsl(25, 65%, 38%, .2);
-  padding: .38rem 1rem; border-radius: 999px;
-  margin-bottom: 2.5rem;
-}
 .hero-ctas {
   display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center;
 }
 
+/* colored booking CTAs matching Lovable */
+.btn-book-dnd {
+  background: hsl(5, 35%, 50%); color: #fff;
+}
+.btn-book-dnd:hover { background: hsl(5, 40%, 42%); transform: translateY(-1px); box-shadow: var(--shadow); }
+.btn-book-arc {
+  background: hsl(280, 25%, 48%); color: #fff;
+}
+.btn-book-arc:hover { background: hsl(280, 30%, 40%); transform: translateY(-1px); box-shadow: var(--shadow); }
+.btn-book-tbl {
+  background: hsl(145, 22%, 38%); color: #fff;
+}
+.btn-book-tbl:hover { background: hsl(145, 25%, 30%); transform: translateY(-1px); box-shadow: var(--shadow); }
+
 /* ── PAGE HERO (subpages) ────────────────────────────── */
 .page-hero {
   padding: calc(var(--nav-h) + 3rem) 2rem 3rem;
@@ -395,83 +394,30 @@ h1, h2, h3, h4 {
   overflow: hidden;
 }
 
-/* arcade cabinet mock */
+/* ── SECTION IMAGES ──────────────────────────────────── */
-.cabinet {
+.section-img {
-  aspect-ratio: 3/4;
+  border-radius: var(--radius-lg);
-  display: flex; flex-direction: column;
+  box-shadow: 0 20px 50px rgba(0,0,0,.18);
-}
+  width: 100%; height: auto;
-.cabinet-screen-wrap {
+  display: block;
-  flex: 1;
+  object-fit: cover; aspect-ratio: 16/9;
-  background: var(--arc-bg);
-  display: flex; align-items: center; justify-content: center;
-  padding: 2rem 1.5rem;
-}
-.cabinet-screen {
-  background: rgba(0,0,0,.6);
-  border: 2px solid var(--arc-border);
-  border-radius: 4px;
-  padding: 1.5rem 2rem;
-  text-align: center; width: 100%;
-  box-shadow: 0 0 20px hsl(270, 70%, 50%, .18), inset 0 0 18px rgba(0,0,0,.3);
-}
-.screen-title {
-  font-family: 'Orbitron', monospace;
-  font-size: 1.2rem; letter-spacing: .2em;
-  color: var(--arc-accent);
-  animation: pulse 2.2s ease-in-out infinite;
-  margin-bottom: .2rem;
-}
-@keyframes pulse {
-  0%,100% { text-shadow: 0 0 6px var(--arc-accent); }
-  50%      { text-shadow: 0 0 24px var(--arc-accent), 0 0 46px hsl(270, 70%, 50%, .5); }
-}
-.screen-sub {
-  font-family: 'Orbitron', monospace; font-size: .5rem;
-  letter-spacing: .28em; text-transform: uppercase;
-  color: hsl(5, 60%, 65%); margin-bottom: 1rem;
-}
-.screen-insert {
-  font-family: 'Orbitron', monospace; font-size: .48rem;
-  letter-spacing: .22em; text-transform: uppercase;
-  color: var(--arc-muted);
-  animation: blink 1.3s step-end infinite;
-}
-@keyframes blink { 0%,100% { opacity:1; } 50% { opacity:0; } }
-.cabinet-controls {
-  background: hsl(268, 45%, 13%);
-  border-top: 1px solid var(--arc-border);
-  padding: .9rem 1.5rem;
-  display: flex; align-items: center; justify-content: center; gap: .6rem;
-}
-.stick {
-  width: 18px; height: 18px; border-radius: 50%;
-  background: hsl(268, 35%, 22%); border: 2px solid hsl(268, 30%, 30%);
-}
-.btn-ab {
-  width: 13px; height: 13px; border-radius: 50%;
-  border: 1px solid rgba(255,255,255,.2);
 }
 
-/* board game visual */
+.img-frame { position: relative; }
-.board-visual {
+
-  aspect-ratio: 4/3;
+.img-frame--arc::after {
-  display: flex; align-items: center; justify-content: center;
-  position: relative; overflow: hidden;
-  background: linear-gradient(135deg, hsl(30, 25%, 90%), hsl(35, 30%, 85%));
-}
-.board-visual::before {
   content: '';
-  position: absolute; inset: 0;
+  position: absolute; bottom: -12px; right: -12px;
-  background:
+  width: 80px; height: 80px; border-radius: var(--radius-lg);
-    radial-gradient(circle at 35% 35%, hsl(38, 70%, 60%, .15) 0%, transparent 60%),
+  background: hsl(270, 90%, 70%, .2);
-    radial-gradient(circle at 72% 72%, hsl(145, 40%, 50%, .1) 0%, transparent 60%);
+  z-index: -1;
 }
-.board-art { position: relative; z-index: 1; text-align: center; }
+.img-frame--board::after {
-.board-art .icon { font-size: 4rem; display: block; margin-bottom: .5rem; }
+  content: '';
-.board-art .caption {
+  position: absolute; top: -12px; left: -12px;
-  font-size: .75rem; font-weight: 600;
+  width: 80px; height: 80px; border-radius: var(--radius-lg);
-  letter-spacing: .15em; text-transform: uppercase;
+  background: hsl(25, 65%, 38%, .1);
-  color: var(--muted);
+  z-index: -1;
 }
 
 /* ── GAME CATEGORY CARDS ─────────────────────────────── */

index.html

@@ -29,66 +29,56 @@
 
 <!-- HERO -->
 <section class="hero">
-  <div class="hero-bg"></div>
+  <img src="/assets/hero-shop-C3Z79gRw.webp"
+       srcset="/assets/hero-shop-768-DvpXR7W2.webp 768w, /assets/hero-shop-1280-CszAF_S1.webp 1280w, /assets/hero-shop-C3Z79gRw.webp 1920w"
+       sizes="100vw"
+       alt="Cozy game shop interior with board games and warm lighting"
+       class="hero-photo" width="1920" height="1080" fetchpriority="high" loading="eager">
+  <div class="warm-overlay"></div>
   <div class="hero-body">
-    <span class="badge badge-gold" style="margin-bottom:1.5rem">Coming Soon</span>
+    <p class="hero-eyebrow">Coming Soon</p>
-    <span class="hero-icon">🐉</span>
     <h1 class="hero-title">The Fat Dragon</h1>
     <p class="hero-place">Ashbourne &middot; Co. Meath &middot; Ireland</p>
     <p class="hero-copy">
-      A brand-new game shop is coming to Ashbourne &mdash; retro arcade cabinets,
+      A new gaming experience is coming to Ashbourne. Opening July 2026 &mdash;
-      tabletop strategy, D&amp;D campaigns, and a space built for every kind of player.
+      D&amp;D bookings are open right now.
     </p>
-    <span class="hero-note">Opening July 2026 &middot; D&amp;D bookings open now</span>
     <div class="hero-ctas">
-      <a href="/book-now/dnd.html"          class="btn btn-gold">⚔️ D&amp;D Sessions</a>
+      <a href="/book-now/dnd.html"  class="btn btn-book-dnd">⚔️ D&amp;D Sessions</a>
-      <a href="/arcade.html"                class="btn btn-outline">🕹️ Retro Arcade</a>
+      <a href="/arcade.html"        class="btn btn-book-arc">🕹️ Retro Arcade</a>
-      <a href="/board-games.html"           class="btn btn-outline">🎲 Board Games</a>
+      <a href="/board-games.html"   class="btn btn-book-tbl">🎲 Board Games</a>
     </div>
   </div>
 </section>
 
 <!-- ARCADE PREVIEW -->
-<section class="section section--alt section--border">
+<section class="section section--dark section--border">
   <div class="container">
     <div class="two-col">
-      <div class="panel cabinet">
-        <div class="cabinet-screen-wrap">
-          <div class="cabinet-screen">
-            <div class="screen-title">FAT DRAGON</div>
-            <div class="screen-sub">Arcade &middot; Est. 2026</div>
-            <div class="screen-insert">Insert Coin to Continue</div>
-          </div>
-        </div>
-        <div class="cabinet-controls">
-          <div class="stick"></div>
-          <div class="btn-ab" style="background:#c0392b;margin-left:10px"></div>
-          <div class="btn-ab" style="background:#2980b9"></div>
-          <div class="btn-ab" style="background:#e67e22"></div>
-          <div class="btn-ab" style="background:#27ae60"></div>
-        </div>
-      </div>
       <div>
         <span class="label">Retro Arcade</span>
         <h2 class="section-title">Play Against Friends and Rivals</h2>
         <p class="section-desc">
-          Relive the golden age of gaming with our hand-picked collection of classic
+          Relive the golden age of gaming with our curated collection of classic
           arcade cabinets. Challenge friends head-to-head or prove yourself against
           the machine &mdash; the high score board awaits.
         </p>
-        <div class="tag-list">
+        <div class="tag-list" style="margin-bottom:1.75rem">
-          <span class="tag">Mortal Kombat II</span>
+          <span class="tag">Mortal Kombat II &amp; III</span>
-          <span class="tag">Mortal Kombat III</span>
+          <span class="tag">Street Fighter II &amp; III</span>
-          <span class="tag">Street Fighter II</span>
-          <span class="tag">Street Fighter III</span>
           <span class="tag">Time Crisis</span>
           <span class="tag">Marvel vs. Capcom</span>
           <span class="tag">Pac-Man</span>
           <span class="tag">Space Invaders</span>
         </div>
-        <div style="margin-top:1.75rem">
+        <a href="/arcade.html" class="btn btn-outline-light">Explore the Arcade &rarr;</a>
-          <a href="/arcade.html" class="btn btn-outline">Explore the Arcade &rarr;</a>
+      </div>
-        </div>
+      <div class="img-frame img-frame--arc">
+        <img src="/assets/hero-arcade-1280-BKBZL_XQ.webp"
+             srcset="/assets/hero-arcade-768-CMd-rnLe.webp 768w, /assets/hero-arcade-1280-BKBZL_XQ.webp 1280w, /assets/hero-arcade-Du1mEK8c.webp 1376w"
+             sizes="(max-width: 768px) 100vw, 50vw"
+             alt="The Fat Dragon mascot playing Mortal Kombat at a retro arcade cabinet"
+             class="section-img" loading="lazy" width="1280" height="720">
       </div>
     </div>
   </div>
@@ -98,11 +88,12 @@
 <section class="section">
   <div class="container">
     <div class="two-col two-col--reverse">
-      <div class="panel board-visual">
+      <div class="img-frame img-frame--board">
-        <div class="board-art">
+        <img src="/assets/hero-boardgame-1280-JhijY958.webp"
-          <span class="icon">🎲</span>
+             srcset="/assets/hero-boardgame-768-raCBaX1q.webp 768w, /assets/hero-boardgame-1280-JhijY958.webp 1280w, /assets/hero-boardgame-BXXYLag8.webp 1376w"
-          <span class="caption">Board &amp; Card Games</span>
+             sizes="(max-width: 768px) 100vw, 50vw"
-        </div>
+             alt="The Fat Dragon mascot playing Catan and Ticket to Ride with friends at a cozy cafe table"
+             class="section-img" loading="lazy" width="1280" height="720">
       </div>
       <div>
         <span class="label">Board &amp; Card Games</span>