@@ -31,23 +40,23 @@ export default function DynamicBanner({ payload }: DynamicBannerProps) {
alt={title || "Banner"}
style={imageStyle}
/>
-
+
{title && (
-
+
{linkUrl ? (
-
+
{bannerInner}
) : (
-
+
{title}
)}
{description && (
-
+
{description}
)} {buttonText && (
-
+
{buttonText}
@@ -59,11 +68,11 @@ export default function DynamicBanner({ payload }: DynamicBannerProps) {
return (
+
+
- {/* Dynamic Dark Gradient / Solid Overlay */}
+ {/* Dynamic Dark / Light Gradient / Solid Overlay */}
{renderOverlay()}
-
{bannerInner}
)}
diff --git a/apps/spa/src/components/DynamicHero.tsx b/apps/spa/src/components/DynamicHero.tsx
index 290ab53..a19cfe4 100644
--- a/apps/spa/src/components/DynamicHero.tsx
+++ b/apps/spa/src/components/DynamicHero.tsx
@@ -139,12 +139,25 @@ export function getHeroPositionClasses(mobilePos: string, desktopPos: string) {
};
}
+export function getHeroContainerWidthClasses(contentWidth?: string) {
+ switch (contentWidth) {
+ case 'full':
+ return 'w-full max-w-none px-6 md:px-12 lg:px-16';
+ case 'compact':
+ return 'w-full max-w-4xl mx-auto px-6';
+ case 'standard':
+ default:
+ return 'w-full max-w-7xl mx-auto px-6 md:px-10 lg:px-12';
+ }
+}
+
export default function DynamicHero({ payload }: DynamicHeroProps) {
const { t, i18n } = useTranslation();
const lang = i18n.language;
const { imageUrl, buttonLink } = payload;
const desktopPosition = (payload as any).buttonPosition || 'center';
const mobilePosition = (payload as any).mobileButtonPosition || desktopPosition;
+ const contentWidth = (payload as any).contentWidth || 'standard';
const focalPoint = typeof payload.focalPoint === 'object' && payload.focalPoint ? (payload.focalPoint as { x: string, y: string }) : undefined;
// Localized values
@@ -167,6 +180,9 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
? rawButtonText.trim()
: t('hero.exploreCollection');
+ const textColorScheme = (payload as any).textColorScheme || 'light';
+ const isDarkText = textColorScheme === 'dark';
+
const renderTitle = (text: string) => {
if (!text) return null;
return text.split('[').map((part, i) => {
@@ -174,7 +190,7 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
const [accent, rest] = part.split(']');
return (
-
+
{accent}
{rest}
@@ -201,7 +217,7 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
return (
);
}
@@ -211,18 +227,22 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
const midAlpha = opacityRatio;
const topAlpha = Math.max(0, opacityRatio * 0.65);
+ const rgb = isDarkText ? '255, 255, 255' : '0, 0, 0';
+
return (
);
};
+ const containerClasses = getHeroContainerWidthClasses(contentWidth);
+
return (
-
+
{tagline && (
-
+
+
{tagline}
)} {title && ( -
+
{renderTitle(title)}
)}
{description && (
-
+
{description}
)} @@ -265,7 +285,7 @@ export default function DynamicHero({ payload }: DynamicHeroProps) { )} {t('hero.learnMore')} → diff --git a/apps/spa/src/components/DynamicHeroCarousel.tsx b/apps/spa/src/components/DynamicHeroCarousel.tsx index 3a99fe2..d37eba6 100644 --- a/apps/spa/src/components/DynamicHeroCarousel.tsx +++ b/apps/spa/src/components/DynamicHeroCarousel.tsx @@ -4,7 +4,7 @@ import { Link } from 'react-router-dom'; import type { HeroCarouselSectionPayload } from '@homaroma/types'; import { useTranslation } from 'react-i18next'; import { getLocalizedField } from '../utils/localization'; -import { getHeroPositionClasses } from './DynamicHero'; +import { getHeroPositionClasses, getHeroContainerWidthClasses } from './DynamicHero'; // Import Swiper styles import 'swiper/css'; @@ -119,28 +119,34 @@ export default function DynamicHeroCarousel({ payload }: DynamicHeroCarouselProp {(slide.title || slide.subtitle || slide.buttonText) && (() => { const slideDesktopPos = (slide as any).buttonPosition || 'bottom-left'; const slideMobilePos = (slide as any).mobileButtonPosition || slideDesktopPos; + const slideWidth = (slide as any).contentWidth || 'standard'; + const slideColor = (slide as any).textColorScheme || 'light'; + const isDarkSlide = slideColor === 'dark'; const { wrapperClasses, contentClasses, actionsClasses } = getHeroPositionClasses(slideMobilePos, slideDesktopPos); + const containerClasses = getHeroContainerWidthClasses(slideWidth); return ( -
-
- {slide.subtitle && (
-
- {slide.subtitle} -
- )} - {slide.title && ( -- {renderTitle(slide.title)} -
- )} - {slide.buttonText && ( -
-
- {slide.buttonText}
-
-
- )}
+
+
);
diff --git a/apps/spa/src/components/DynamicHeroVideo.tsx b/apps/spa/src/components/DynamicHeroVideo.tsx
index 0852044..e351d82 100644
--- a/apps/spa/src/components/DynamicHeroVideo.tsx
+++ b/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 } from './DynamicHero';
+import { getHeroPositionClasses, getHeroContainerWidthClasses } from './DynamicHero';
interface DynamicHeroVideoProps {
payload: HeroVideoSectionPayload;
@@ -92,60 +92,73 @@ export default function DynamicHeroVideo({ payload }: DynamicHeroVideoProps) {
) : null}
{/* Customizable Overlay Opacity */}
-
-
- {/* Overlay Typography Content */}
{(() => {
+ const textColorScheme = (payload as any).textColorScheme || 'light';
+ const isDarkText = textColorScheme === 'dark';
const desktopPosition = (payload as any).buttonPosition || 'center';
const mobilePosition = (payload as any).mobileButtonPosition || desktopPosition;
+ const contentWidth = (payload as any).contentWidth || 'standard';
const { wrapperClasses, contentClasses, actionsClasses } = getHeroPositionClasses(mobilePosition, desktopPosition);
+ const containerClasses = getHeroContainerWidthClasses(contentWidth);
return (
-
+
+ {slide.subtitle && (
+
+ {slide.subtitle} +
+ )} + {slide.title && ( ++ {renderTitle(slide.title)} +
+ )} + {slide.buttonText && ( +
+
+ {slide.buttonText}
+
+
+ )}
+
- , lang: string }) {
const { t } = useTranslation()
const i18nLang = useLang()
@@ -239,6 +251,9 @@ function HeroSection({ payload, lang }: { payload: Record, lang
const buttonLink = typeof payload.buttonLink === 'string' ? payload.buttonLink : '/shop'
const desktopPosition = typeof payload.buttonPosition === 'string' ? payload.buttonPosition : 'center'
const mobilePosition = typeof payload.mobileButtonPosition === 'string' ? payload.mobileButtonPosition : desktopPosition
+ const contentWidth = typeof payload.contentWidth === 'string' ? payload.contentWidth : 'standard'
+ const textColorScheme = typeof payload.textColorScheme === 'string' ? payload.textColorScheme : 'light'
+ const isDarkText = textColorScheme === 'dark'
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
@@ -256,6 +271,7 @@ function HeroSection({ payload, lang }: { payload: Record, lang
: 'Explore Collection'
const { wrapperClasses, contentClasses, actionsClasses } = getHeroPositionClasses(mobilePosition, desktopPosition)
+ const containerClasses = getHeroContainerWidthClasses(contentWidth)
const overlayStyle = typeof payload.overlayStyle === 'string' ? payload.overlayStyle : 'gradient'
const overlayOpacity = typeof payload.overlayOpacity === 'number' ? payload.overlayOpacity : 45
@@ -266,12 +282,13 @@ function HeroSection({ payload, lang }: { payload: Record, lang
}
const opacityRatio = overlayOpacity / 100
+ const rgb = isDarkText ? '255, 255, 255' : '0, 0, 0'
if (overlayStyle === 'solid') {
return (
)
}
@@ -285,14 +302,14 @@ function HeroSection({ payload, lang }: { payload: Record, lang
)
}
return (
-
+
, lang
className="object-cover md:scale-[1.02]"
style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }}
/>
- {/* Dynamic Dark Gradient / Solid Overlay */}
+ {/* Dynamic Dark / Light Gradient / Solid Overlay */}
{renderOverlay()}
-
- {tagline && (
-
+
);
})()}
diff --git a/apps/website/src/components/dynamic/DynamicPageRenderer.tsx b/apps/website/src/components/dynamic/DynamicPageRenderer.tsx
index 746d10e..5f5d960 100644
--- a/apps/website/src/components/dynamic/DynamicPageRenderer.tsx
+++ b/apps/website/src/components/dynamic/DynamicPageRenderer.tsx
@@ -227,6 +227,18 @@ function getHeroPositionClasses(mobilePos: string, desktopPos: string) {
}
}
+function getHeroContainerWidthClasses(contentWidth?: string) {
+ switch (contentWidth) {
+ case 'full':
+ return 'w-full max-w-none px-6 md:px-12 lg:px-16'
+ case 'compact':
+ return 'w-full max-w-4xl mx-auto px-6'
+ case 'standard':
+ default:
+ return 'w-full max-w-7xl mx-auto px-6 md:px-10 lg:px-12'
+ }
+}
+
function HeroSection({ payload, lang }: { payload: Record- {tagline} -
- )} + <> + -- {renderTitle(title) || renderTitle(t('hero.defaultTitle'))} -
+
+
-
+ {tagline && (
+
+ {tagline} +
+ )} - {description && ( -- {description} -
- )} ++ {renderTitle(title) || renderTitle(t('hero.defaultTitle'))} +
- {/* Dual Action Buttons */} - {(buttonText || secondaryButtonText) && ( -
- {buttonText && payload.buttonLink && (
-
- {buttonText}
-
- )}
+ {description && (
+
- )}
+ {/* Dual Action Buttons */}
+ {(buttonText || secondaryButtonText) && (
+ + {description} +
+ )} - {secondaryButtonText && payload.secondaryButtonLink && ( - - {secondaryButtonText} - - )} -
+ {buttonText && payload.buttonLink && (
+
+ {buttonText}
+
+ )}
+
+ {secondaryButtonText && payload.secondaryButtonLink && (
+
+ {secondaryButtonText}
+
+ )}
+
+ )}
+
+
{tagline && (
-
- {renderAccentTitle(title, 'ui-accent-text font-medium')}
+
, lang
)}
{t('dynamic.heroLearnMore', { lng: resolvedLang })}
→
@@ -438,19 +455,25 @@ function HeroCarouselSection({ payload, lang }: { payload: Record {
const slideDesktopPos = typeof slide.buttonPosition === 'string' ? slide.buttonPosition : 'bottom-left'
const slideMobilePos = typeof slide.mobileButtonPosition === 'string' ? slide.mobileButtonPosition : slideDesktopPos
+ const slideWidth = typeof slide.contentWidth === 'string' ? slide.contentWidth : 'standard'
+ const slideColor = typeof slide.textColorScheme === 'string' ? slide.textColorScheme : 'light'
+ const isDarkSlide = slideColor === 'dark'
const { wrapperClasses: sWrap, contentClasses: sContent, actionsClasses: sActions } = getHeroPositionClasses(slideMobilePos, slideDesktopPos)
+ const sContainer = getHeroContainerWidthClasses(slideWidth)
return (
-
+
{tagline}
)} {title && ( -
- {renderAccentTitle(title, 'ui-accent-text font-medium')}
+
+ {renderAccentTitle(title, isDarkText ? 'text-brand-primary font-medium' : 'ui-accent-text font-medium')}
)}
{description && (
-
+
{description}
)} @@ -333,7 +350,7 @@ function HeroSection({ payload, lang }: { payload: Record
-
- {subtitle && ,
const desktopPosition = typeof payload.buttonPosition === 'string' ? payload.buttonPosition : 'center'
const mobilePosition = typeof payload.mobileButtonPosition === 'string' ? payload.mobileButtonPosition : desktopPosition
+ const contentWidth = typeof payload.contentWidth === 'string' ? payload.contentWidth : 'standard'
+ const textColorScheme = typeof payload.textColorScheme === 'string' ? payload.textColorScheme : 'light'
+ const isDarkText = textColorScheme === 'dark'
const { wrapperClasses, contentClasses, actionsClasses } = getHeroPositionClasses(mobilePosition, desktopPosition)
+ const containerClasses = getHeroContainerWidthClasses(contentWidth)
return (
-
+
{videoUrl ? (
{subtitle}
} - {title &&{renderAccentTitle(title)}
} - {buttonText && ( -
-
- {buttonText}
-
-
- )}
+
+
)
@@ -505,10 +528,14 @@ function HeroVideoSection({ payload, lang }: { payload: Record
+
+ {subtitle &&
{subtitle}
} + {title &&{renderAccentTitle(title)}
} + {buttonText && ( +
+
+ {buttonText}
+
+
+ )}
+