x

apps/spa/src/components/DynamicHero.tsx

@@ -42,7 +42,7 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
         const [accent, rest] = part.split(']');
         return (
           <span key={i}>
-            <span className="text-pop-pink font-medium italic">
+            <span className="text-pop-yellow font-medium italic">
               {accent}
             </span>
             {rest}
@@ -201,7 +201,7 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
       <div className={`relative z-10 w-full min-h-[85vh] sm:min-h-[90vh] md:min-h-full flex flex-col ${wrapperClasses} animate-fade-in`}>
         <div className={`w-full max-w-3xl flex flex-col space-y-5 ${contentClasses}`}>
           {tagline && (
-            <p className="text-white/80 font-semibold tracking-[0.3em] text-xs md:text-sm uppercase drop-shadow-md">
+            <p className="text-pop-yellow font-semibold tracking-[0.3em] text-xs md:text-sm uppercase drop-shadow-md">
               {tagline}
             </p>
           )}
@@ -219,14 +219,14 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
             {buttonText && (
               <Link
                 to={buttonLink || "/shop"}
-                className="ui-button-secondary shadow-lg shadow-black/30"
+                className="ui-hero-button shadow-lg shadow-black/30"
               >
                 {buttonText}
               </Link>
             )}
             <a
               href="#categories"
-              className="ui-dark-link !text-white group flex items-center gap-1.5 drop-shadow-md hover:underline"
+              className="ui-dark-link group flex items-center gap-1.5 drop-shadow-md hover:underline"
             >
               <span>{t('hero.learnMore')}</span>
               <span className="group-hover:translate-x-1 transition-transform">&rarr;</span>