x

apps/spa/src/components/DynamicHero.tsx

@@ -35,7 +35,7 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
   };
 
   return (
-    <section className="relative w-full min-h-[90vh] md:min-h-0 md:aspect-[21/9] flex items-center justify-center overflow-hidden bg-night-900">
+    <section className="ui-hero-shell">
       <div className="absolute inset-0 z-0">
         <img
           src={imageUrl || `${import.meta.env.VITE_API_URL.replace('/api', '')}/assets/hero.png`}
@@ -45,31 +45,30 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
             (e.target as HTMLImageElement).style.display = 'none';
           }}
         />
-        {/* Dark gradient overlay for premium vibe */}
-        <div className="absolute inset-0 bg-neutral-900/40"></div>
-        <div className="absolute inset-0 bg-gradient-to-t from-neutral-900/90 via-neutral-900/10 to-neutral-900/30"></div>
+        <div className="ui-hero-overlay" />
+        <div className="ui-hero-overlay-strong" />
       </div>
 
-      <div className="relative z-10 text-center space-y-6 px-8 animate-fade-in max-w-4xl w-full mx-auto mt-16 md:mt-0">
+      <div className="ui-hero-content animate-fade-in">
         <p className="text-spa-sage font-semibold tracking-[0.3em] text-xs md:text-sm uppercase drop-shadow-md">
           {tagline || t('hero.defaultTagline')}
         </p>
-        <h1 className="text-5xl md:text-7xl lg:text-8xl font-light text-white leading-tight tracking-wide drop-shadow-md font-serif">
+        <h1 className="ui-hero-title">
           {renderTitle(title) || renderTitle(t('hero.defaultTitle'))}
         </h1>
-        <p className="text-spa-light/90 max-w-2xl mx-auto text-lg md:text-xl font-light pt-4 pb-8 drop-shadow-md">
+        <p className="ui-hero-copy">
           {description}
         </p>
         <div className="flex flex-col sm:flex-row gap-6 items-center justify-center">
           <Link
             to={buttonLink || "/shop"}
-            className="px-8 py-4 bg-white text-spa-forest rounded-full font-bold uppercase tracking-widest text-sm hover:bg-spa-sage hover:shadow-xl transition-all duration-300"
+            className="ui-button-secondary"
           >
             {buttonText || t('hero.exploreCollection')}
           </Link>
           <a
             href="#categories"
-            className="px-8 py-4 text-white font-medium uppercase tracking-widest text-sm hover:text-spa-gold flex items-center gap-2 group transition-colors"
+            className="ui-dark-link group"
           >
             {t('hero.learnMore')} 
             <span className="group-hover:translate-x-1 transition-transform">&rarr;</span>