x

apps/website/src/app/globals.css

@@ -209,6 +209,65 @@
     @apply flex h-9 w-9 items-center justify-center rounded-full border border-line-primary/20 bg-surface-page text-[10px] font-bold text-text-main transition-all duration-300 hover:border-brand-primary hover:bg-brand-primary hover:text-surface-card;
   }
 
+  .site-footer {
+    @apply relative bg-surface-page;
+    z-index: 1;
+  }
+
+  .site-footer-brand-finale {
+    @apply flex min-h-[55svh] items-center justify-center overflow-hidden border-t border-line-primary/20 bg-surface-page px-6 py-20 text-center;
+  }
+
+  .site-footer-finale-logo {
+    @apply h-auto max-h-32 w-auto max-w-[min(82vw,32rem)] object-contain;
+  }
+
+  .site-footer-finale-wordmark {
+    @apply max-w-full break-words text-5xl font-semibold uppercase text-text-main md:text-7xl;
+    letter-spacing: 0;
+  }
+
+  .site-footer-navigation {
+    @apply relative border-t border-line-primary/20 bg-surface-card px-6 py-20;
+    z-index: 3;
+  }
+
+  @media (min-width: 1024px) {
+    .global-main {
+      position: relative;
+      z-index: 2;
+      background: var(--color-surface-page);
+    }
+
+    .site-footer-with-finale {
+      padding-top: 100svh;
+    }
+
+    .site-footer-brand-finale {
+      @apply fixed inset-0 min-h-[100svh] py-24;
+      z-index: 0;
+      pointer-events: none;
+    }
+
+    .site-footer-finale-logo {
+      @apply max-h-48 max-w-[min(68vw,48rem)];
+    }
+
+    .site-footer-finale-wordmark {
+      @apply text-8xl;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .site-footer-brand-finale {
+      position: relative;
+    }
+
+    .site-footer-with-finale {
+      padding-top: 0;
+    }
+  }
+
   .ui-section-band {
     @apply px-6 py-20 md:py-24;
   }

apps/website/src/components/Footer.tsx

@@ -54,9 +54,31 @@ export default function Footer({
   // Social links — use settings if available, fallback to placeholder buttons
   const hasSocialLinks = settings && (settings.facebookUrl || settings.instagramUrl || settings.tiktokUrl)
   const brandName = settings?.brandName || ''
+  const hasBrandFinale = Boolean(settings?.logoUrl || brandName.trim())
 
   return (
-    <footer className="border-t border-line-primary/20 bg-surface-card px-6 py-20 text-text-main">
+    <footer className={`site-footer text-text-main${hasBrandFinale ? ' site-footer-with-finale' : ''}`}>
+      {hasBrandFinale && (
+        <section
+          className="site-footer-brand-finale"
+          aria-label={brandName || t('footer.brand', 'Brand')}
+        >
+          {settings?.logoUrl ? (
+            <Image
+              src={settings.logoUrl}
+              alt=""
+              width={640}
+              height={240}
+              unoptimized
+              className="site-footer-finale-logo"
+            />
+          ) : (
+            <p className="site-footer-finale-wordmark">{brandName}</p>
+          )}
+        </section>
+      )}
+
+      <div className="site-footer-navigation">
         <div className="mx-auto grid max-w-7xl grid-cols-1 gap-12 md:grid-cols-4">
 
           {/* Col 1 — Brand */}
@@ -187,6 +209,7 @@ export default function Footer({
           </div>
 
         </div>
+      </div>
     </footer>
   )
 }