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-09-28 06:21:33 +07:00
1 parent c7c08d7d64
commit a39f5b8102
2 files changed
+24 -19
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/spa/src/components/DynamicHero.tsx
+14 -10
View File
@@ -36,8 +36,8 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
}; };
return ( return (
<section className="relative w-full flex flex-col md:block md:h-[90vh] md:aspect-[21/9] bg-[#EBE7E0] overflow-hidden"> <section className="relative w-full min-h-[85vh] sm:min-h-[90vh] md:h-[90vh] md:aspect-[21/9] flex items-center justify-center bg-night-950 overflow-hidden">
<div className="relative w-full h-[50vh] min-h-[400px] md:absolute md:inset-0 md:h-full md:z-0"> <div className="absolute inset-0 w-full h-full z-0">
<img <img
src={imageUrl || `${import.meta.env.VITE_API_URL.replace('/api', '')}/assets/hero.png`} 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"
@@ -47,30 +47,34 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
(e.target as HTMLImageElement).style.display = 'none'; (e.target as HTMLImageElement).style.display = 'none';
}} }}
/> />
{/* Dark Gradient Overlay for high readability on both mobile and desktop */}
<div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/45 to-black/30 md:bg-black/35" />
</div> </div>
<div className="relative z-10 mx-auto py-12 w-full max-w-4xl space-y-6 px-8 text-center md:py-0 md:h-full md:flex md:flex-col md:justify-center md:items-center animate-fade-in"> <div className="relative z-10 mx-auto py-16 px-6 sm:px-8 w-full max-w-4xl space-y-6 text-center animate-fade-in flex flex-col justify-center items-center">
<p className="text-pop-black/70 font-semibold tracking-[0.3em] text-xs md:text-sm uppercase drop-shadow-md"> <p className="text-white/80 font-semibold tracking-[0.3em] text-xs md:text-sm uppercase drop-shadow-md">
{tagline || t('hero.defaultTagline')} {tagline || t('hero.defaultTagline')}
</p> </p>
<h1 className="ui-hero-title"> <h1 className="ui-hero-title !text-white drop-shadow-lg">
{renderTitle(title) || renderTitle(t('hero.defaultTitle'))} {renderTitle(title) || renderTitle(t('hero.defaultTitle'))}
</h1> </h1>
<p className="ui-hero-copy"> {description && (
<p className="ui-hero-copy !text-white/90 drop-shadow-md !pb-2">
{description} {description}
</p> </p>
<div className="flex flex-col sm:flex-row gap-6 items-center justify-center"> )}
<div className="flex flex-col sm:flex-row gap-4 sm:gap-6 items-center justify-center pt-2">
<Link <Link
to={buttonLink || "/shop"} to={buttonLink || "/shop"}
className="ui-button-secondary" className="ui-button-secondary shadow-lg shadow-black/30"
> >
{buttonText || t('hero.exploreCollection')} {buttonText || t('hero.exploreCollection')}
</Link> </Link>
<a <a
href="#categories" href="#categories"
className="ui-dark-link group" className="ui-dark-link !text-white group flex items-center gap-1.5 drop-shadow-md hover:underline"
> >
{t('hero.learnMore')} <span>{t('hero.learnMore')}</span>
<span className="group-hover:translate-x-1 transition-transform">&rarr;</span> <span className="group-hover:translate-x-1 transition-transform">&rarr;</span>
</a> </a>
</div> </div>
apps/website/src/components/dynamic/DynamicPageRenderer.tsx
+10 -9
View File
@@ -109,8 +109,8 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
const focalPoint = typeof payload.focalPoint === 'object' && payload.focalPoint ? (payload.focalPoint as { x: string, y: string }) : undefined const focalPoint = typeof payload.focalPoint === 'object' && payload.focalPoint ? (payload.focalPoint as { x: string, y: string }) : undefined
return ( return (
<section className="relative w-full flex flex-col md:block md:h-[90vh] md:aspect-[21/9] bg-surface-page overflow-hidden"> <section className="relative w-full min-h-[85vh] sm:min-h-[90vh] md:h-[90vh] md:aspect-[21/9] flex items-center justify-center bg-night-950 overflow-hidden">
<div className="relative w-full h-[50vh] min-h-[400px] md:absolute md:inset-0 md:h-full"> <div className="absolute inset-0 w-full h-full z-0">
<Image <Image
src={imageUrl} src={imageUrl}
alt={title || ''} alt={title || ''}
@@ -119,34 +119,35 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
className="object-cover md:scale-[1.02]" className="object-cover md:scale-[1.02]"
style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }} style={{ objectPosition: focalPoint ? `${focalPoint.x} ${focalPoint.y}` : undefined }}
/> />
<div className="absolute inset-0 bg-gradient-to-t from-black/85 via-black/45 to-black/30 md:bg-black/35" />
</div> </div>
<div className="relative z-10 mx-auto py-12 w-full max-w-4xl space-y-6 px-8 text-center md:py-0 md:h-full md:flex md:flex-col md:justify-center md:items-center"> <div className="relative z-10 mx-auto py-16 px-6 sm:px-8 w-full max-w-4xl space-y-6 text-center flex flex-col justify-center items-center">
<div className="space-y-6"> <div className="space-y-6">
{tagline && ( {tagline && (
<p className="text-xs font-semibold uppercase tracking-[0.3em] text-[#EAEFEA] drop-shadow-md md:text-sm"> <p className="text-xs font-semibold uppercase tracking-[0.3em] text-[#EAEFEA] drop-shadow-md md:text-sm">
{tagline} {tagline}
</p> </p>
)} )}
<h1 className="ui-hero-title"> <h1 className="ui-hero-title !text-white drop-shadow-lg">
{renderAccentTitle(title || '', 'ui-accent-text font-medium')} {renderAccentTitle(title || '', 'ui-accent-text font-medium')}
</h1> </h1>
{description && ( {description && (
<p className="ui-hero-copy"> <p className="ui-hero-copy !text-white/90 drop-shadow-md">
{description} {description}
</p> </p>
)} )}
<div className="flex flex-col items-center justify-center gap-6 sm:flex-row"> <div className="flex flex-col items-center justify-center gap-4 sm:gap-6 sm:flex-row pt-2">
<Link <Link
href={buttonLink} href={buttonLink}
className="ui-hero-button" className="ui-hero-button shadow-lg shadow-black/30"
> >
{buttonText || 'Explore Collection'} {buttonText || 'Explore Collection'}
</Link> </Link>
<a <a
href="#categories" href="#categories"
className="ui-hero-link group" className="ui-hero-link group !text-white flex items-center gap-1.5 drop-shadow-md"
> >
{t('dynamic.heroLearnMore', { lng: resolvedLang })} <span>{t('dynamic.heroLearnMore', { lng: resolvedLang })}</span>
<span className="transition-transform group-hover:translate-x-1">→</span> <span className="transition-transform group-hover:translate-x-1">→</span>
</a> </a>
</div> </div>