x

apps/website/src/components/dynamic/DynamicPageRenderer.tsx

@@ -49,6 +49,19 @@ function renderAccentTitle(text: string, accentClassName = 'text-pop-pink italic
   })
 }
 
+function heroLearnMoreText(lang: string) {
+  const labels: Record<string, string> = {
+    th: 'ดูรายละเอียดเพิ่มเติม',
+    en: 'Learn More',
+    ja: '詳しく見る',
+    zh: '了解更多',
+    vi: 'Tìm hiểu thêm',
+    ko: '자세히 보기',
+  }
+
+  return labels[lang] ?? labels.en
+}
+
 function AnnouncementBar({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
   const slides = Array.isArray(payload.slides) ? payload.slides : []
   if (!slides.length) return null
@@ -74,31 +87,44 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
   const buttonLink = typeof payload.buttonLink === 'string' ? payload.buttonLink : '/shop'
 
   return (
-    <section className="relative flex min-h-[78vh] w-full items-center justify-center overflow-hidden bg-white">
+    <section className="relative flex min-h-[90vh] w-full items-center justify-center overflow-hidden bg-neutral-900 md:aspect-[21/9] md:min-h-0">
       <img
         src={imageUrl}
         alt={title || 'HomAroma'}
         className="absolute inset-0 h-full w-full scale-[1.02] object-cover"
       />
-      <div className="absolute inset-0 bg-gradient-to-r from-pop-bg/90 via-pop-bg/55 to-white/10" />
-      <div className="relative z-10 mx-auto w-full max-w-6xl px-6 py-24">
-        <div className="max-w-3xl space-y-6">
+      <div className="absolute inset-0 bg-neutral-900/40" />
+      <div className="absolute inset-0 bg-gradient-to-t from-neutral-900/90 via-neutral-900/10 to-neutral-900/30" />
+      <div className="relative z-10 mx-auto mt-16 w-full max-w-4xl space-y-6 px-8 text-center md:mt-0">
+        <div className="space-y-6">
           {tagline && (
-            <p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-pink">
+            <p className="text-xs font-semibold uppercase tracking-[0.3em] text-white drop-shadow-md md:text-sm">
               {tagline}
             </p>
           )}
-          <h1 className="text-5xl font-semibold leading-tight text-pop-black md:text-7xl">
-            {title || 'HomAroma'}
+          <h1 className="font-serif text-5xl font-light leading-tight tracking-wide text-white drop-shadow-md md:text-7xl lg:text-8xl">
+            {renderAccentTitle(title || 'HomAroma', 'font-medium italic text-[#E4BC32]')}
           </h1>
           {description && (
-            <p className="max-w-2xl text-lg leading-relaxed text-gray-700 md:text-xl">
+            <p className="mx-auto max-w-2xl pb-8 pt-4 text-lg font-light text-white/90 drop-shadow-md md:text-xl">
               {description}
             </p>
           )}
-          <Link href={buttonLink} className="inline-flex rounded-full bg-pop-pink px-8 py-4 font-semibold text-white shadow-brutal transition hover:bg-pop-red">
-            {buttonText || 'Explore Collection'}
-          </Link>
+          <div className="flex flex-col items-center justify-center gap-6 sm:flex-row">
+            <Link
+              href={buttonLink}
+              className="rounded-full bg-white px-8 py-4 text-sm font-bold uppercase tracking-widest text-pop-black transition-all duration-300 hover:bg-pop-bg hover:shadow-xl"
+            >
+              {buttonText || 'Explore Collection'}
+            </Link>
+            <a
+              href="#categories"
+              className="group flex items-center gap-2 px-8 py-4 text-sm font-medium uppercase tracking-widest text-white transition-colors hover:text-[#E4BC32]"
+            >
+              {heroLearnMoreText(lang)}
+              <span className="transition-transform group-hover:translate-x-1">→</span>
+            </a>
+          </div>
         </div>
       </div>
     </section>