From 602eaa92601b901d06105f072641e136480913fc Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Tue, 29 Sep 2026 06:43:16 +0700
Subject: [PATCH] x

---
 apps/spa/src/components/Footer.tsx | 27 +++++++++-
 apps/spa/src/index.css             | 86 ++++++++++++++++++++++++++++++
 apps/spa/src/pages/HomePage.tsx    | 12 +++--
 apps/website/src/app/globals.css   | 63 ++++++++++++++++++----
 4 files changed, 170 insertions(+), 18 deletions(-)

diff --git a/apps/spa/src/components/Footer.tsx b/apps/spa/src/components/Footer.tsx
index 6217b43..de9418a 100644
--- a/apps/spa/src/components/Footer.tsx
+++ b/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>
   )
 }
diff --git a/apps/spa/src/index.css b/apps/spa/src/index.css
index 72ab90d..7c39c7a 100644
--- a/apps/spa/src/index.css
+++ b/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;
+  }
+}
diff --git a/apps/spa/src/pages/HomePage.tsx b/apps/spa/src/pages/HomePage.tsx
index cda7e5e..589b7ec 100644
--- a/apps/spa/src/pages/HomePage.tsx
+++ b/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} />
diff --git a/apps/website/src/app/globals.css b/apps/website/src/app/globals.css
index 315dea0..85949c8 100644
--- a/apps/website/src/app/globals.css
+++ b/apps/website/src/app/globals.css
@@ -210,33 +210,71 @@
     @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;
   }
 
+  .global-main {
+    position: relative;
+    z-index: 2;
+    background: var(--color-surface-page);
+  }
+
   .site-footer {
-    @apply relative bg-surface-page;
+    position: relative;
     z-index: 1;
+    background-color: var(--color-surface-page);
   }
 
   .site-footer-stage {
-    @apply relative;
+    position: relative;
   }
 
   .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;
+    display: flex;
+    min-height: 55svh;
+    align-items: center;
+    justify-content: center;
+    overflow: hidden;
+    border-top: 1px solid color-mix(in oklab, var(--color-line-primary) 20%, transparent);
+    background-color: var(--color-surface-page);
+    padding-inline: calc(var(--spacing) * 6);
+    padding-block: calc(var(--spacing) * 20);
+    text-align: center;
   }
 
   .site-footer-finale-logo {
-    @apply h-auto max-h-32 w-auto max-w-[min(82vw,32rem)] object-contain;
+    height: auto;
+    max-height: calc(var(--spacing) * 32);
+    width: auto;
+    max-width: min(82vw, 32rem);
+    object-fit: contain;
   }
 
   .site-footer-finale-wordmark {
-    @apply max-w-full break-words text-5xl font-semibold uppercase text-text-main md:text-7xl;
+    max-width: 100%;
+    font-size: var(--text-5xl);
+    line-height: var(--tw-leading, var(--text-5xl--line-height));
+    font-weight: var(--font-weight-semibold, 600);
+    overflow-wrap: break-word;
+    color: var(--color-text-main);
+    text-transform: uppercase;
     letter-spacing: 0;
   }
 
+  @media (min-width: 48rem) {
+    .site-footer-finale-wordmark {
+      font-size: var(--text-7xl);
+      line-height: var(--tw-leading, var(--text-7xl--line-height));
+    }
+  }
+
   .site-footer-navigation {
-    @apply relative border-t border-line-primary/20 bg-surface-card px-6 py-20;
+    position: relative;
+    border-top: 1px solid color-mix(in oklab, var(--color-line-primary) 20%, transparent);
+    background-color: var(--color-surface-card);
+    padding-inline: calc(var(--spacing) * 6);
+    padding-block: calc(var(--spacing) * 20);
     z-index: 3;
   }
 
+  /* Desktop Fixed Curtain Reveal Effect (เปิดม่าน Logo แบบ Fixed ตาม pkh.kitizone.com) */
   @media (min-width: 1024px) {
     .global-main {
       position: relative;
@@ -252,22 +290,25 @@
       position: fixed;
       inset: 0;
       z-index: 0;
+      min-height: 100svh;
       display: grid;
       grid-template-rows: minmax(0, 1fr) auto;
-      min-height: 100svh;
       pointer-events: none;
     }
 
     .site-footer-brand-finale {
-      @apply min-h-0 py-16;
+      min-height: 0;
+      padding-block: calc(var(--spacing) * 16);
     }
 
     .site-footer-finale-logo {
-      @apply max-h-48 max-w-[min(68vw,48rem)];
+      max-height: calc(var(--spacing) * 48);
+      max-width: min(68vw, 48rem);
     }
 
     .site-footer-finale-wordmark {
-      @apply text-8xl;
+      font-size: var(--text-8xl);
+      line-height: var(--tw-leading, var(--text-8xl--line-height));
     }
 
     .site-footer-navigation {
@@ -277,8 +318,8 @@
 
   @media (prefers-reduced-motion: reduce) {
     .site-footer-stage {
-      position: relative;
       display: block;
+      position: relative;
     }
 
     .site-footer-with-finale {