x

apps/spa/src/components/DynamicHero.tsx

@@ -36,8 +36,8 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
   };
 
   return (
-    <section className="ui-hero-shell">
-      <div className="absolute inset-0 z-0">
+    <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">
         <img
           src={imageUrl || `${import.meta.env.VITE_API_URL.replace('/api', '')}/assets/hero.png`}
           className="w-full h-full object-cover"
@@ -49,7 +49,7 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
         />
       </div>
 
-      <div className="ui-hero-content animate-fade-in">
+      <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">
           {tagline || t('hero.defaultTagline')}
         </p>

apps/spa/src/components/DynamicHeroV2.tsx

@@ -46,18 +46,17 @@ export default function DynamicHeroV2({ payload }: DynamicHeroV2Props) {
   };
 
   return (
-    <section className="relative w-full h-[80vh] min-h-[600px] bg-white flex items-center overflow-hidden">
-      <div className="absolute inset-0 w-full h-full">
+    <section className="relative w-full flex flex-col md:block md:h-[80vh] md:min-h-[600px] bg-white overflow-hidden">
+      <div className="relative w-full h-[50vh] min-h-[400px] md:absolute md:inset-0 md:h-full">
         <img
           src={imageUrl}
           alt={title || 'Hero'}
           className="w-full h-full object-cover"
           style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }}
         />
-        <div className="absolute inset-0 bg-gradient-to-r from-white/90 via-white/50 to-transparent pointer-events-none" />
       </div>
       
-      <div className="relative z-10 w-full max-w-7xl mx-auto px-6 md:px-12">
+      <div className="relative z-10 w-full max-w-7xl mx-auto px-6 py-12 md:py-0 md:h-full md:flex md:items-center md:px-12">
         <div className={`max-w-xl flex flex-col gap-6 ${alignClass}`}>
           {tagline && (
             <div className="flex items-center gap-4">