admin/homaroma
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects 1 Releases Wiki Activity

x

Browse Source
This commit is contained in:
Your Name committed 2026-10-16 06:26:13 +07:00
1 parent 64bcd6388a
commit 4f8fa1ae09
8 files changed
+400 -120
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/spa/src/components/DynamicHero.tsx
+51 -3
View File
@@ -258,23 +258,71 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
const titleSizeClass = getHeroTitleSizeClass(titleSize);
const textWrapperWidthClass = titleSize === 'sm' || contentWidth === 'compact' ? 'max-w-xl' : titleSize === 'md' ? 'max-w-2xl' : 'max-w-3xl';
const aspectRatio = (payload as any).aspectRatio;
const mobileAspectRatio = (payload as any).mobileAspectRatio;
const mobileImageUrl = (payload as any).mobileImageUrl;
const isFullScreen = !aspectRatio || aspectRatio === 'full_screen';
const getAspectClass = () => {
switch (aspectRatio) {
case '21/6': return 'md:aspect-[21/6]';
case '21/7': return 'md:aspect-[21/7]';
case '21/9': return 'md:aspect-[21/9]';
case '16/5': return 'md:aspect-[16/5]';
case '16/6': return 'md:aspect-[16/6]';
case '4/1': return 'md:aspect-[4/1]';
case '5/1': return 'md:aspect-[5/1]';
case 'full_screen': return 'md:h-[90vh] md:aspect-[21/9]';
default: return 'md:aspect-[21/7]';
}
};
const getMobileAspectClass = () => {
switch (mobileAspectRatio) {
case '16/9': return 'aspect-[16/9]';
case '4/3': return 'aspect-[4/3]';
case '1/1': return 'aspect-[1/1]';
case '21/9': return 'aspect-[21/9]';
case 'full_screen': return 'min-h-[85vh]';
default: return 'aspect-[16/9]';
}
};
const sectionHeightClass = isFullScreen
? 'min-h-[85vh] sm:min-h-[90vh] md:h-[90vh] md:aspect-[21/9]'
: `${getMobileAspectClass()} ${getAspectClass()}`;
const innerHeightClass = isFullScreen
? 'min-h-[85vh] sm:min-h-[90vh] md:min-h-full'
: 'h-full justify-center';
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'}`}>
<section className={`relative w-full ${sectionHeightClass} flex overflow-hidden ${isDarkText ? 'bg-surface-page' : 'bg-night-950'}`}>
<div className="absolute inset-0 w-full h-full z-0">
<img
src={imageUrl || `${import.meta.env.VITE_API_URL.replace('/api', '')}/assets/hero.png`}
className="w-full h-full object-cover"
className={`w-full h-full object-cover ${mobileImageUrl ? 'hidden md:block' : ''}`}
alt="Hero Background"
style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }}
onError={(e) => {
(e.target as HTMLImageElement).style.display = 'none';
}}
/>
{mobileImageUrl && (
<img
src={mobileImageUrl}
className="w-full h-full object-cover block md:hidden"
alt="Hero Background Mobile"
style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }}
onError={(e) => {
(e.target as HTMLImageElement).style.display = 'none';
}}
/>
)}
{/* Dynamic Dark / Light Gradient / Solid Overlay */}
{renderOverlay()}
</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={`relative z-10 ${innerHeightClass} flex flex-col ${containerClasses} ${wrapperClasses} animate-fade-in`}>
<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`}>