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-29 06:28:29 +07:00
1 parent 6d3b13d360
commit 466059f01a
5 files changed
+27 -18
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/spa/src/components/DynamicHero.tsx
+4 -4
View File
@@ -42,7 +42,7 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
const [accent, rest] = part.split(']');
return (
<span key={i}>
<span className="text-pop-pink font-medium italic">
<span className="text-pop-yellow font-medium italic">
{accent}
</span>
{rest}
@@ -201,7 +201,7 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
<div className={`relative z-10 w-full min-h-[85vh] sm:min-h-[90vh] md:min-h-full flex flex-col ${wrapperClasses} animate-fade-in`}>
<div className={`w-full max-w-3xl flex flex-col space-y-5 ${contentClasses}`}>
{tagline && (
<p className="text-white/80 font-semibold tracking-[0.3em] text-xs md:text-sm uppercase drop-shadow-md">
<p className="text-pop-yellow font-semibold tracking-[0.3em] text-xs md:text-sm uppercase drop-shadow-md">
{tagline}
</p>
)}
@@ -219,14 +219,14 @@ export default function DynamicHero({ payload }: DynamicHeroProps) {
{buttonText && (
<Link
to={buttonLink || "/shop"}
className="ui-button-secondary shadow-lg shadow-black/30"
className="ui-hero-button shadow-lg shadow-black/30"
>
{buttonText}
</Link>
)}
<a
href="#categories"
className="ui-dark-link !text-white group flex items-center gap-1.5 drop-shadow-md hover:underline"
className="ui-dark-link group flex items-center gap-1.5 drop-shadow-md hover:underline"
>
<span>{t('hero.learnMore')}</span>
<span className="group-hover:translate-x-1 transition-transform">&rarr;</span>
apps/spa/src/components/ThemeInjector.tsx
+4
View File
@@ -16,6 +16,7 @@ export default function ThemeInjector() {
if (tokens && typeof tokens === 'object') {
const mapping: Record<string, string> = {
'--color-pop-pink': tokens.brandPrimary,
'--color-pop-red': tokens.brandPrimaryHover,
'--color-pop-yellow': tokens.brandAccent,
'--color-pop-orange': tokens.brandWarm,
'--color-pop-cyan': tokens.brandCool,
@@ -27,6 +28,9 @@ export default function ThemeInjector() {
'--color-pop-muted-bg': tokens.surfaceMuted,
'--radius-base': tokens.radiusBase,
'--radius-card': tokens.radiusCard,
'--font-sans-active': tokens.fontBody,
'--font-heading-active': tokens.fontDisplay,
'--font-serif-active': tokens.fontDisplay,
}
for (const [key, value] of Object.entries(mapping)) {
if (value && typeof value === 'string' && value.trim() !== '') {
apps/spa/src/index.css
+4
View File
@@ -122,6 +122,10 @@
@apply inline-flex items-center justify-center rounded-full bg-pop-bg px-6 py-3 text-xs font-bold uppercase tracking-widest text-pop-black transition-colors hover:bg-pop-pink hover:text-pop-bg;
}
.ui-hero-button {
@apply inline-flex items-center justify-center rounded-full bg-pop-pink px-6 py-3 text-xs font-bold uppercase tracking-widest text-white transition-all shadow-lg hover:bg-pop-red hover:opacity-95;
}
.ui-input-shell {
@apply w-full rounded-full border border-pop-black/20 bg-transparent px-6 py-4 text-sm text-pop-black outline-none transition placeholder:text-pop-black/50 focus:border-pop-pink;
}
apps/website/src/app/globals.css
+8 -7
View File
@@ -315,7 +315,7 @@
}
.ui-accent-text {
@apply italic text-brand-primary;
@apply italic text-brand-accent;
}
.ui-hero-shell {
@@ -371,22 +371,23 @@
.ui-hero-button {
@apply inline-flex items-center justify-center rounded-full px-6 py-3 text-xs font-bold uppercase tracking-widest transition-colors;
background-color: var(--color-surface-page);
color: var(--color-text-main);
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
background-color: var(--color-brand-primary);
color: #ffffff;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.2);
}
.ui-hero-button:hover {
opacity: 0.9;
background-color: var(--color-brand-primary-hover, var(--color-brand-primary));
opacity: 0.95;
}
.ui-hero-link {
@apply inline-flex items-center gap-2 text-xs font-bold uppercase tracking-widest transition-colors;
color: var(--color-brand-primary);
color: var(--color-brand-accent, var(--color-brand-primary));
padding: 0.75rem 1.5rem;
}
.ui-hero-link:hover {
color: var(--color-surface-page);
opacity: 0.85;
}
.ui-banner-shell {
apps/website/src/components/dynamic/DynamicPageRenderer.tsx
+7 -7
View File
@@ -267,7 +267,7 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
<div className={`relative z-10 w-full min-h-[85vh] sm:min-h-[90vh] md:min-h-full flex flex-col ${wrapperClasses}`}>
<div className={`w-full max-w-3xl flex flex-col space-y-5 ${contentClasses}`}>
{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-brand-accent drop-shadow-md md:text-sm">
{tagline}
</p>
)}
@@ -292,7 +292,7 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
)}
<a
href="#categories"
className="ui-hero-link group !text-white flex items-center gap-1.5 drop-shadow-md hover:underline"
className="ui-hero-link group flex items-center gap-1.5 drop-shadow-md hover:underline"
>
<span>{t('dynamic.heroLearnMore', { lng: resolvedLang })}</span>
<span className="transition-transform group-hover:translate-x-1">→</span>
@@ -495,7 +495,7 @@ function HeroVideoSection({ payload, lang }: { payload: Record<string, unknown>,
<div className="relative z-20 mx-auto px-6 py-16 w-full max-w-5xl text-center space-y-6 flex flex-col items-center justify-center">
{tagline && (
<p className="text-xs md:text-sm font-semibold uppercase tracking-[0.35em] text-[#EAEFEA] drop-shadow-md">
<p className="text-xs md:text-sm font-semibold uppercase tracking-[0.35em] text-brand-accent drop-shadow-md">
{tagline}
</p>
)}
@@ -641,13 +641,13 @@ function HeroMinimalSection({ payload, lang }: { payload: Record<string, unknown
<div className="relative z-10 w-full max-w-5xl mx-auto px-6 py-12 flex flex-col justify-center">
<div className={`flex flex-col gap-4 max-w-3xl ${alignClass}`}>
{tagline && (
<span className="text-xs md:text-sm font-medium uppercase tracking-[0.3em] text-[#EAEFEA] drop-shadow-md">
<span className="text-xs md:text-sm font-medium uppercase tracking-[0.3em] text-brand-accent drop-shadow-md">
{tagline}
</span>
)}
{title && (
<h1 className="font-serif text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-light text-white leading-tight tracking-wide drop-shadow-md">
{renderAccentTitle(title, 'text-[#EAEFEA] font-medium')}
{renderAccentTitle(title, 'text-brand-accent font-medium')}
</h1>
)}
</div>
@@ -909,7 +909,7 @@ function HeroV2Section({ payload, lang }: { payload: Record<string, unknown>, la
{primaryBtnText && primaryBtnLink && (
<Link
href={primaryBtnLink}
className="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-[#A18868] text-white font-medium rounded-md hover:bg-[#8B7355] transition-colors w-full sm:w-auto"
className="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-brand-primary text-white font-medium rounded-md hover:bg-brand-primary-hover transition-colors w-full sm:w-auto"
>
{primaryBtnText}
<ChevronRight className="w-4 h-4" />
@@ -918,7 +918,7 @@ function HeroV2Section({ payload, lang }: { payload: Record<string, unknown>, la
{secondaryBtnText && secondaryBtnLink && (
<Link
href={secondaryBtnLink}
className="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-transparent border border-[#A18868] text-[#A18868] font-medium rounded-md hover:bg-[#A18868]/5 transition-colors w-full sm:w-auto"
className="inline-flex items-center justify-center gap-2 px-8 py-3.5 bg-transparent border border-brand-primary text-brand-primary font-medium rounded-md hover:bg-brand-primary/5 transition-colors w-full sm:w-auto"
>
{secondaryBtnText}
<ChevronRight className="w-4 h-4" />