x

apps/spa/src/components/Footer.tsx

@@ -70,9 +70,30 @@ export default function Footer({ categories = [] }: FooterProps) {
       .catch(console.error)
   }, [])
 
+  const hasBrandFinale = Boolean(settings?.logoUrl || brandName.trim())
+
   return (
-    <footer className="bg-night-900 text-pop-black px-6 py-20 border-t border-pop-black/20">
-      <div className="ui-section-inner grid grid-cols-1 gap-12 md:grid-cols-4">
+    <footer className={`site-footer text-pop-black${hasBrandFinale ? ' site-footer-with-finale' : ''}`}>
+      <div className="site-footer-stage">
+        {hasBrandFinale && (
+          <section
+            className="site-footer-brand-finale"
+            aria-label={brandName || t('footer.brand', 'Brand')}
+          >
+            {settings?.logoUrl ? (
+              <img
+                src={settings.logoUrl}
+                alt=""
+                className="site-footer-finale-logo"
+              />
+            ) : (
+              <p className="site-footer-finale-wordmark">{brandName}</p>
+            )}
+          </section>
+        )}
+
+        <div className="site-footer-navigation bg-night-900 text-pop-black px-6 py-20 border-t border-pop-black/20">
+        <div className="ui-section-inner grid grid-cols-1 gap-12 md:grid-cols-4">
         <div className="space-y-6">
           <div className="text-2xl font-bold tracking-widest text-pop-black">
             {settings?.logoUrl ? <img src={settings.logoUrl} alt={brandName} className="h-8 md:h-10 object-contain" /> : brandName}
@@ -151,6 +172,8 @@ export default function Footer({ categories = [] }: FooterProps) {
           </div>
         </div>
       </div>
+      </div>
+      </div>
     </footer>
   )
 }