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>
           )}