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>
   )
 }

apps/spa/src/index.css

@@ -275,3 +275,89 @@ html {
 .ui-prose blockquote {
   @apply border-l-4 border-pop-pink pl-4 italic opacity-80 my-4;
 }
+
+/* Footer Curtain Reveal Effect */
+.global-main {
+  position: relative;
+  z-index: 2;
+  background: var(--color-pop-bg);
+}
+
+.site-footer {
+  @apply relative bg-pop-bg;
+  z-index: 1;
+}
+
+.site-footer-stage {
+  position: relative;
+}
+
+.site-footer-brand-finale {
+  @apply flex min-h-[55svh] items-center justify-center overflow-hidden border-t border-pop-black/10 bg-pop-bg 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-pop-black md:text-7xl;
+  letter-spacing: 0;
+}
+
+.site-footer-navigation {
+  @apply relative border-t border-pop-black/10 bg-night-900;
+  z-index: 3;
+}
+
+/* Desktop Fixed Curtain Reveal Effect (เปิดม่าน Logo แบบ Fixed ตาม pkh.kitizone.com) */
+@media (min-width: 1024px) {
+  .global-main {
+    position: relative;
+    z-index: 2;
+    background: var(--color-pop-bg);
+  }
+
+  .site-footer-with-finale {
+    min-height: 100svh;
+  }
+
+  .site-footer-stage {
+    position: fixed;
+    inset: 0;
+    z-index: 0;
+    min-height: 100svh;
+    display: grid;
+    grid-template-rows: minmax(0, 1fr) auto;
+    pointer-events: none;
+  }
+
+  .site-footer-brand-finale {
+    min-height: 0;
+    padding-top: 4rem;
+    padding-bottom: 4rem;
+  }
+
+  .site-footer-finale-logo {
+    @apply max-h-48 max-w-[min(68vw,48rem)];
+  }
+
+  .site-footer-finale-wordmark {
+    @apply text-8xl;
+  }
+
+  .site-footer-navigation {
+    pointer-events: auto;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .site-footer-stage {
+    display: block;
+    position: relative;
+  }
+
+  .site-footer-with-finale {
+    min-height: 0;
+  }
+}

apps/spa/src/pages/HomePage.tsx

@@ -52,11 +52,13 @@ export default function HomePage() {
           <div className="w-12 h-12 border-4 border-pop-pink border-t-transparent rounded-full animate-spin"></div>
         </div>
       ) : (
-        <DynamicPageRenderer
-          sections={sections}
-          categories={categories}
-          categoriesLoading={categoriesLoading}
-        />
+        <main className="global-main relative z-10 bg-pop-bg">
+          <DynamicPageRenderer
+            sections={sections}
+            categories={categories}
+            categoriesLoading={categoriesLoading}
+          />
+        </main>
       )}
 
       <Footer categories={categories} />