x

apps/website/src/components/dynamic/DynamicPageRenderer.tsx

@@ -273,6 +273,35 @@ function getHeroContainerWidthClasses(contentWidth?: string) {
   }
 }
 
+export function getHeroTitleSizeClass(titleSize?: unknown): 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 function getTailwindHeroTitleClass(titleSize?: unknown, defaultSize = 'xl'): string {
+  const size = (titleSize || defaultSize) as string
+  switch (size) {
+    case 'sm':
+      return 'text-2xl sm:text-3xl md:text-4xl'
+    case 'md':
+      return 'text-3xl sm:text-4xl md:text-5xl'
+    case 'lg':
+      return 'text-4xl sm:text-5xl md:text-6xl'
+    case 'xl':
+    default:
+      return 'text-4xl sm:text-5xl md:text-6xl lg:text-7xl'
+  }
+}
+
 function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
   const { t } = useTranslation()
   const i18nLang = useLang()
@@ -288,6 +317,9 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
   const contentWidth = typeof payload.contentWidth === 'string' ? payload.contentWidth : 'standard'
   const textColorScheme = typeof payload.textColorScheme === 'string' ? payload.textColorScheme : 'light'
   const isDarkText = textColorScheme === 'dark'
+  const titleSize = typeof payload.titleSize === 'string' ? payload.titleSize : 'xl'
+  const titleSizeClass = getHeroTitleSizeClass(titleSize)
+  const textWrapperWidthClass = titleSize === 'sm' || contentWidth === 'compact' ? 'max-w-xl' : titleSize === 'md' ? 'max-w-2xl' : 'max-w-3xl'
   const focalPoint = typeof payload.focalPoint === 'object' && payload.focalPoint ? (payload.focalPoint as { x: string, y: string }) : undefined
 
   // If fields are explicitly defined as empty strings, respect them as empty
@@ -357,14 +389,14 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
         {renderOverlay()}
       </div>
       <div className={`relative z-10 min-h-[85vh] sm:min-h-[90vh] md:min-h-full flex flex-col ${containerClasses} ${wrapperClasses}`}>
-        <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={`text-xs font-semibold uppercase tracking-[0.3em] drop-shadow-md md:text-sm ${isDarkText ? 'text-brand-primary' : 'text-brand-accent'}`}>
               {tagline}
             </p>
           )}
           {title && (
-            <h1 className={`ui-hero-title ${isDarkText ? '!text-text-main' : '!text-white'} drop-shadow-lg`}>
+            <h1 className={`ui-hero-title ${titleSizeClass} ${isDarkText ? '!text-text-main' : '!text-white'} drop-shadow-lg`}>
               {renderAccentTitle(title, isDarkText ? 'text-brand-primary font-medium' : 'ui-accent-text font-medium')}
             </h1>
           )}
@@ -607,14 +639,14 @@ function HeroVideoSection({ payload, lang }: { payload: Record<string, unknown>,
       <div className={`absolute inset-0 z-10 transition-opacity ${isDarkText ? 'bg-white' : 'bg-black'}`} style={{ opacity: overlayOpacity / 100 }}></div>
 
       <div className={`relative z-20 py-16 h-full flex flex-col ${containerClasses} ${wrapperClasses}`}>
-        <div className={`flex flex-col space-y-6 max-w-3xl ${contentClasses}`}>
+        <div className={`flex flex-col space-y-6 ${payload.titleSize === 'sm' || contentWidth === 'compact' ? 'max-w-xl' : payload.titleSize === 'md' ? 'max-w-2xl' : 'max-w-3xl'} ${contentClasses}`}>
           {tagline && (
             <p className={`text-xs md:text-sm font-semibold uppercase tracking-[0.35em] drop-shadow-md ${isDarkText ? 'text-brand-primary' : 'text-brand-accent'}`}>
               {tagline}
             </p>
           )}
           {title && (
-            <h1 className={`font-serif text-4xl md:text-6xl lg:text-7xl font-light leading-tight tracking-wide drop-shadow-lg ${isDarkText ? 'text-text-main' : 'text-white'}`}>
+            <h1 className={`font-serif ${getTailwindHeroTitleClass(payload.titleSize, 'xl')} font-light leading-tight tracking-wide drop-shadow-lg ${isDarkText ? 'text-text-main' : 'text-white'}`}>
               {renderAccentTitle(title, isDarkText ? 'text-brand-primary font-medium' : undefined)}
             </h1>
           )}
@@ -1012,7 +1044,7 @@ function HeroV2Section({ payload, lang }: { payload: Record<string, unknown>, la
             </div>
           )}
           
-          <h1 className="text-4xl md:text-5xl lg:text-6xl font-serif text-text-main leading-tight">
+          <h1 className={`${getTailwindHeroTitleClass(payload.titleSize, 'lg')} font-serif text-text-main leading-tight`}>
             {renderAccentTitle(title || '', 'text-brand-primary')}
           </h1>
 
@@ -1271,8 +1303,12 @@ function BannerSection({ payload, lang }: { payload: Record<string, unknown>, la
         style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }}
       />
       <div className={isDarkText ? "absolute inset-0 bg-white/40 backdrop-blur-[1px]" : "ui-banner-overlay"} />
-      <div className={`ui-banner-content flex flex-col space-y-4 max-w-2xl ${bContent}`}>
-        {title && <h2 className={`text-3xl font-semibold drop-shadow-md md:text-5xl ${isDarkText ? '!text-text-main' : 'text-brand-primary'}`}>{title}</h2>}
+      <div className={`ui-banner-content flex flex-col space-y-4 ${payload.titleSize === 'sm' || contentWidth === 'compact' ? 'max-w-xl' : 'max-w-2xl'} ${bContent}`}>
+        {title && (
+          <h2 className={`${payload.titleSize === 'sm' ? 'text-2xl md:text-3xl' : payload.titleSize === 'md' ? 'text-2xl md:text-4xl' : payload.titleSize === 'lg' ? 'text-3xl md:text-5xl' : 'text-3xl md:text-5xl font-semibold'} drop-shadow-md ${isDarkText ? '!text-text-main' : 'text-brand-primary'}`}>
+            {title}
+          </h2>
+        )}
         {description && <p className={`drop-shadow-sm ${isDarkText ? '!text-text-main/80' : 'text-surface-page/90'}`}>{description}</p>}
         {buttonText && (
           <div className={`flex ${bActions}`}>
@@ -2180,7 +2216,7 @@ function HeroArticleSection({ payload, lang }: { payload: Record<string, unknown
       )}
       <div className="relative z-10 mx-auto max-w-4xl space-y-6">
         {category && <p className="text-xs font-bold uppercase tracking-[0.28em] text-brand-accent">{category}</p>}
-        <h1 className="ui-hero-title">{title}</h1>
+        <h1 className={`ui-hero-title ${getHeroTitleSizeClass(payload.titleSize)}`}>{title}</h1>
         {subtitle && <p className="mx-auto max-w-2xl text-lg text-surface-card md:text-xl">{subtitle}</p>}
         {(author || date) && (
           <p className="text-xs font-bold uppercase tracking-[0.22em] text-surface-card">