Add hero carousel with 5 images, enlarge logo, fix Pathfinder references

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

header.html

@@ -1,10 +1,32 @@
-<div class="navbar bg-base-300 shadow-lg px-4">
+<header class="bg-base-300 shadow-lg">
-  <div class="navbar-start">
+
+  <!-- Hero: carousel background + centered logo -->
+  <div class="relative overflow-hidden min-h-64 py-10 flex items-center justify-center">
+
+    <!-- Carousel images -->
+    <div id="hero-carousel" class="absolute inset-0">
+      <img src="/images/photo1.jpg" class="carousel-slide absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-1000" />
+      <img src="/images/photo2.jpg" class="carousel-slide absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-1000" />
+      <img src="/images/photo3.jpg" class="carousel-slide absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-1000" />
+      <img src="/images/photo4.jpg" class="carousel-slide absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-1000" />
+      <img src="/images/photo5.jpg" class="carousel-slide absolute inset-0 w-full h-full object-cover opacity-0 transition-opacity duration-1000" />
+    </div>
+
+    <!-- Overlay so logo stays readable over busy images -->
+    <div class="absolute inset-0 bg-black/40"></div>
+
+    <!-- Logo -->
+    <div class="relative z-10">
       <a href="/index.html">
-      <img src="/images/logo.png" alt="Gateway Gamers" class="h-10 w-auto" />
+        <img src="/images/logo.png" alt="Gateway Gamers" class="h-48 w-auto drop-shadow-2xl" />
       </a>
     </div>
-  <div class="navbar-center hidden lg:flex">
+
+  </div>
+
+  <!-- Nav row -->
+  <div class="navbar bg-base-200 px-4 min-h-0 py-2">
+    <div class="navbar-center flex flex-1 justify-center">
       <ul class="menu menu-horizontal px-1 gap-1">
         <li><a href="/index.html">Home</a></li>
         <li><a href="/signups.html">Sign-ups</a></li>
@@ -36,4 +58,6 @@
         </ul>
       </div>
     </div>
-</div>
+  </div>
+
+</header>

index.html

@@ -34,7 +34,7 @@
 
       <section class="mb-8">
         <h2 class="text-2xl font-semibold mb-3">About the Campaign</h2>
-        <p class="mb-4">Kingmaker is a Pathfinder campaign set in the Stolen Lands of Golarion. Players explore, conquer, and eventually rule a burgeoning nation in the wild frontier.</p>
+        <p class="mb-4">Kingmaker is a Warhammer 40k league run by a local club. Players compete across a series of games to claim dominance over the battlefield.</p>
         <p>Update this section with your campaign's specific details — setting, house rules, session schedule, and anything else players should know.</p>
       </section>
 

src/main.js

@@ -1,9 +1,9 @@
-function loadHTML(file, elementId) {
+function loadHTML(file, elementId, callback) {
   fetch(file)
     .then(r => r.text())
     .then(html => {
       document.getElementById(elementId).innerHTML = html;
-      if (elementId === 'header') highlightActiveNav();
+      if (callback) callback();
     })
     .catch(err => console.error('Error loading:', file, err));
 }
@@ -17,5 +17,20 @@ function highlightActiveNav() {
   });
 }
 
-loadHTML('/header.html', 'header');
+function startCarousel() {
+  const slides = document.querySelectorAll('#hero-carousel .carousel-slide');
+  if (!slides.length) return;
+  let current = 0;
+  slides[current].style.opacity = '1';
+  setInterval(() => {
+    slides[current].style.opacity = '0';
+    current = (current + 1) % slides.length;
+    slides[current].style.opacity = '1';
+  }, 5000);
+}
+
+loadHTML('/header.html', 'header', () => {
+  highlightActiveNav();
+  startCarousel();
+});
 loadHTML('/footer.html', 'footer');