From a39f5b81021dddcff53f9598be54c3999ef3bf20 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Mon, 28 Sep 2026 06:21:33 +0700
Subject: [PATCH] x

---
 apps/spa/src/components/DynamicHero.tsx       | 28 +++++++++++--------
 .../dynamic/DynamicPageRenderer.tsx           | 19 +++++++------
 2 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/apps/spa/src/components/DynamicHero.tsx b/apps/spa/src/components/DynamicHero.tsx
index 1b933a0..641604b 100644
--- a/apps/spa/src/components/DynamicHero.tsx
+++ b/apps/spa/src/components/DynamicHero.tsx
@@ -36,8 +36,8 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
   };
 
   return (
-    <section className="relative w-full flex flex-col md:block md:h-[90vh] md:aspect-[21/9] bg-[#EBE7E0] overflow-hidden">
-      <div className="relative w-full h-[50vh] min-h-[400px] md:absolute md:inset-0 md:h-full md:z-0">
+    <section className="relative w-full min-h-[85vh] sm:min-h-[90vh] md:h-[90vh] md:aspect-[21/9] flex items-center justify-center bg-night-950 overflow-hidden">
+      <div className="absolute inset-0 w-full h-full z-0">
         <img
           src={imageUrl || `${import.meta.env.VITE_API_URL.replace('/api', '')}/assets/hero.png`}
           className="w-full h-full object-cover"
@@ -47,30 +47,34 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
             (e.target as HTMLImageElement).style.display = 'none';
           }}
         />
+        {/* Dark Gradient Overlay for high readability on both mobile and desktop */}
+        <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/45 to-black/30 md:bg-black/35" />
       </div>
 
-      <div className="relative z-10 mx-auto py-12 w-full max-w-4xl space-y-6 px-8 text-center md:py-0 md:h-full md:flex md:flex-col md:justify-center md:items-center animate-fade-in">
-        <p className="text-pop-black/70 font-semibold tracking-[0.3em] text-xs md:text-sm uppercase drop-shadow-md">
+      <div className="relative z-10 mx-auto py-16 px-6 sm:px-8 w-full max-w-4xl space-y-6 text-center animate-fade-in flex flex-col justify-center items-center">
+        <p className="text-white/80 font-semibold tracking-[0.3em] text-xs md:text-sm uppercase drop-shadow-md">
           {tagline || t('hero.defaultTagline')}
         </p>
-        <h1 className="ui-hero-title">
+        <h1 className="ui-hero-title !text-white drop-shadow-lg">
           {renderTitle(title) || renderTitle(t('hero.defaultTitle'))}
         </h1>
-        <p className="ui-hero-copy">
-          {description}
-        </p>
-        <div className="flex flex-col sm:flex-row gap-6 items-center justify-center">
+        {description && (
+          <p className="ui-hero-copy !text-white/90 drop-shadow-md !pb-2">
+            {description}
+          </p>
+        )}
+        <div className="flex flex-col sm:flex-row gap-4 sm:gap-6 items-center justify-center pt-2">
           <Link
             to={buttonLink || "/shop"}
-            className="ui-button-secondary"
+            className="ui-button-secondary shadow-lg shadow-black/30"
           >
             {buttonText || t('hero.exploreCollection')}
           </Link>
           <a
             href="#categories"
-            className="ui-dark-link group"
+            className="ui-dark-link !text-white group flex items-center gap-1.5 drop-shadow-md hover:underline"
           >
-            {t('hero.learnMore')} 
+            <span>{t('hero.learnMore')}</span>
             <span className="group-hover:translate-x-1 transition-transform">&rarr;</span>
           </a>
         </div>
diff --git a/apps/website/src/components/dynamic/DynamicPageRenderer.tsx b/apps/website/src/components/dynamic/DynamicPageRenderer.tsx
index 1060ba8..8049be3 100644
--- a/apps/website/src/components/dynamic/DynamicPageRenderer.tsx
+++ b/apps/website/src/components/dynamic/DynamicPageRenderer.tsx
@@ -109,8 +109,8 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
   const focalPoint = typeof payload.focalPoint === 'object' && payload.focalPoint ? (payload.focalPoint as { x: string, y: string }) : undefined
 
   return (
-    <section className="relative w-full flex flex-col md:block md:h-[90vh] md:aspect-[21/9] bg-surface-page overflow-hidden">
-      <div className="relative w-full h-[50vh] min-h-[400px] md:absolute md:inset-0 md:h-full">
+    <section className="relative w-full min-h-[85vh] sm:min-h-[90vh] md:h-[90vh] md:aspect-[21/9] flex items-center justify-center bg-night-950 overflow-hidden">
+      <div className="absolute inset-0 w-full h-full z-0">
         <Image
           src={imageUrl}
           alt={title || ''}
@@ -119,34 +119,35 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
           className="object-cover md:scale-[1.02]"
           style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }}
         />
+        <div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/45 to-black/30 md:bg-black/35" />
       </div>
-      <div className="relative z-10 mx-auto py-12 w-full max-w-4xl space-y-6 px-8 text-center md:py-0 md:h-full md:flex md:flex-col md:justify-center md:items-center">
+      <div className="relative z-10 mx-auto py-16 px-6 sm:px-8 w-full max-w-4xl space-y-6 text-center flex flex-col justify-center items-center">
         <div className="space-y-6">
           {tagline && (
             <p className="text-xs font-semibold uppercase tracking-[0.3em] text-[#EAEFEA] drop-shadow-md md:text-sm">
               {tagline}
             </p>
           )}
-          <h1 className="ui-hero-title">
+          <h1 className="ui-hero-title !text-white drop-shadow-lg">
             {renderAccentTitle(title || '', 'ui-accent-text font-medium')}
           </h1>
           {description && (
-            <p className="ui-hero-copy">
+            <p className="ui-hero-copy !text-white/90 drop-shadow-md">
               {description}
             </p>
           )}
-          <div className="flex flex-col items-center justify-center gap-6 sm:flex-row">
+          <div className="flex flex-col items-center justify-center gap-4 sm:gap-6 sm:flex-row pt-2">
             <Link
               href={buttonLink}
-              className="ui-hero-button"
+              className="ui-hero-button shadow-lg shadow-black/30"
             >
               {buttonText || 'Explore Collection'}
             </Link>
             <a
               href="#categories"
-              className="ui-hero-link group"
+              className="ui-hero-link group !text-white flex items-center gap-1.5 drop-shadow-md"
             >
-              {t('dynamic.heroLearnMore', { lng: resolvedLang })}
+              <span>{t('dynamic.heroLearnMore', { lng: resolvedLang })}</span>
               <span className="transition-transform group-hover:translate-x-1">→</span>
             </a>
           </div>