x

apps/spa/src/components/DynamicHero.tsx

@@ -151,6 +151,20 @@ export function getHeroContainerWidthClasses(contentWidth?: string) {
   }
 }
 
+export function getHeroTitleSizeClass(titleSize?: string): string {
+  switch (titleSize) {
+    case 'sm':
+      return 'ui-hero-title-sm';
+    case 'md':
+      return 'ui-hero-title-md';
+    case 'lg':
+      return 'ui-hero-title-lg';
+    case 'xl':
+    default:
+      return 'ui-hero-title-xl';
+  }
+}
+
 export default function DynamicHero({ payload }: DynamicHeroProps) {
   const { t, i18n } = useTranslation();
   const lang = i18n.language;
@@ -240,6 +254,9 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
   };
 
   const containerClasses = getHeroContainerWidthClasses(contentWidth);
+  const titleSize = (payload as any).titleSize || 'xl';
+  const titleSizeClass = getHeroTitleSizeClass(titleSize);
+  const textWrapperWidthClass = titleSize === 'sm' || contentWidth === 'compact' ? 'max-w-xl' : titleSize === 'md' ? 'max-w-2xl' : 'max-w-3xl';
 
   return (
     <section className={`relative w-full min-h-[85vh] sm:min-h-[90vh] md:h-[90vh] md:aspect-[21/9] flex overflow-hidden ${isDarkText ? 'bg-surface-page' : 'bg-night-950'}`}>
@@ -258,14 +275,14 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
       </div>
 
       <div className={`relative z-10 min-h-[85vh] sm:min-h-[90vh] md:min-h-full flex flex-col ${containerClasses} ${wrapperClasses} animate-fade-in`}>
-        <div className={`w-full max-w-3xl flex flex-col space-y-5 ${contentClasses}`}>
+        <div className={`w-full ${textWrapperWidthClass} flex flex-col space-y-5 ${contentClasses}`}>
           {tagline && (
             <p className={`${isDarkText ? 'text-pop-pink' : 'text-pop-yellow'} font-semibold tracking-[0.3em] text-xs md:text-sm uppercase drop-shadow-md`}>
               {tagline}
             </p>
           )}
           {title && (
-            <h1 className={`ui-hero-title ${isDarkText ? '!text-pop-black' : '!text-white'} drop-shadow-lg`}>
+            <h1 className={`ui-hero-title ${titleSizeClass} ${isDarkText ? '!text-pop-black' : '!text-white'} drop-shadow-lg`}>
               {renderTitle(title)}
             </h1>
           )}

apps/spa/src/components/DynamicHeroV2.tsx

@@ -2,6 +2,7 @@ import { Link } from 'react-router-dom';
 import { useTranslation } from 'react-i18next';
 import { getLocalizedField } from '../utils/localization';
 import { Sparkles, ChevronRight } from 'lucide-react';
+import { getHeroTitleSizeClass } from './DynamicHero';
 
 interface DynamicHeroV2Props {
   payload: Record<string, any>;
@@ -68,7 +69,7 @@ export default function DynamicHeroV2({ payload }: DynamicHeroV2Props) {
             </div>
           )}
           
-          <h1 className="text-4xl md:text-5xl lg:text-6xl font-serif text-pop-black leading-tight">
+          <h1 className={`font-serif ui-hero-title ${getHeroTitleSizeClass((payload as any).titleSize)} text-pop-black leading-tight`}>
             {renderTitle(title || '')}
           </h1>
 

apps/spa/src/components/DynamicHeroVideo.tsx

@@ -2,7 +2,7 @@ import { Link } from 'react-router-dom';
 import type { HeroVideoSectionPayload } from '@homaroma/types';
 import { useTranslation } from 'react-i18next';
 import { getLocalizedField } from '../utils/localization';
-import { getHeroPositionClasses, getHeroContainerWidthClasses } from './DynamicHero';
+import { getHeroPositionClasses, getHeroContainerWidthClasses, getHeroTitleSizeClass } from './DynamicHero';
 
 interface DynamicHeroVideoProps {
   payload: HeroVideoSectionPayload;
@@ -98,6 +98,9 @@ export default function DynamicHeroVideo({ payload }: DynamicHeroVideoProps) {
         const desktopPosition = (payload as any).buttonPosition || 'center';
         const mobilePosition = (payload as any).mobileButtonPosition || desktopPosition;
         const contentWidth = (payload as any).contentWidth || 'standard';
+        const titleSize = (payload as any).titleSize || 'xl';
+        const titleSizeClass = getHeroTitleSizeClass(titleSize);
+        const textWrapperWidthClass = titleSize === 'sm' || contentWidth === 'compact' ? 'max-w-xl' : titleSize === 'md' ? 'max-w-2xl' : 'max-w-3xl';
         const { wrapperClasses, contentClasses, actionsClasses } = getHeroPositionClasses(mobilePosition, desktopPosition);
         const containerClasses = getHeroContainerWidthClasses(contentWidth);
 
@@ -109,14 +112,14 @@ export default function DynamicHeroVideo({ payload }: DynamicHeroVideoProps) {
             ></div>
 
             <div className={`relative z-20 py-16 h-full flex flex-col animate-fade-in ${containerClasses} ${wrapperClasses}`}>
-              <div className={`flex flex-col space-y-6 max-w-3xl ${contentClasses}`}>
+              <div className={`flex flex-col space-y-6 ${textWrapperWidthClass} ${contentClasses}`}>
                 {tagline && (
                   <p className="text-xs md:text-sm font-semibold uppercase tracking-[0.35em] text-pop-pink drop-shadow-md">
                     {tagline}
                   </p>
                 )}
 
-                <h1 className={`font-serif text-4xl md:text-6xl lg:text-7xl font-light leading-tight tracking-wide drop-shadow-lg ${isDarkText ? 'text-pop-black' : 'text-white'}`}>
+                <h1 className={`font-serif ui-hero-title ${titleSizeClass} font-light leading-tight tracking-wide drop-shadow-lg ${isDarkText ? '!text-pop-black' : '!text-white'}`}>
                   {renderTitle(title) || renderTitle(t('hero.defaultTitle'))}
                 </h1>
 

apps/spa/src/index.css

@@ -148,6 +148,22 @@
     color: var(--color-pop-black);
   }
 
+  .ui-hero-title-sm {
+    @apply !text-2xl sm:!text-3xl md:!text-4xl lg:!text-5xl;
+  }
+
+  .ui-hero-title-md {
+    @apply !text-3xl sm:!text-4xl md:!text-5xl lg:!text-6xl;
+  }
+
+  .ui-hero-title-lg {
+    @apply !text-4xl sm:!text-5xl md:!text-6xl lg:!text-7xl;
+  }
+
+  .ui-hero-title-xl {
+    @apply !text-5xl md:!text-7xl lg:!text-8xl;
+  }
+
   .ui-hero-copy {
     @apply mx-auto max-w-2xl pb-8 pt-4 text-lg font-light drop-shadow-md md:text-xl;
     color: var(--color-pop-black);