x
This commit is contained in:
Your Name committed
1 parent
466059f01a
commit
602eaa9260
4 files changed
+170
-18
No files matched your search
@@ -70,9 +70,30 @@ export default function Footer({ categories = [] }: FooterProps) {
|
||||
.catch(console.error)
|
||||
}, [])
|
||||
|
||||
const hasBrandFinale = Boolean(settings?.logoUrl || brandName.trim())
|
||||
|
||||
return (
|
||||
<footer className="bg-night-900 text-pop-black px-6 py-20 border-t border-pop-black/20">
|
||||
<div className="ui-section-inner grid grid-cols-1 gap-12 md:grid-cols-4">
|
||||
<footer className={`site-footer text-pop-black${hasBrandFinale ? ' site-footer-with-finale' : ''}`}>
|
||||
<div className="site-footer-stage">
|
||||
{hasBrandFinale && (
|
||||
<section
|
||||
className="site-footer-brand-finale"
|
||||
aria-label={brandName || t('footer.brand', 'Brand')}
|
||||
>
|
||||
{settings?.logoUrl ? (
|
||||
<img
|
||||
src={settings.logoUrl}
|
||||
alt=""
|
||||
className="site-footer-finale-logo"
|
||||
/>
|
||||
) : (
|
||||
<p className="site-footer-finale-wordmark">{brandName}</p>
|
||||
)}
|
||||
</section>
|
||||
)}
|
||||
|
||||
<div className="site-footer-navigation bg-night-900 text-pop-black px-6 py-20 border-t border-pop-black/20">
|
||||
<div className="ui-section-inner grid grid-cols-1 gap-12 md:grid-cols-4">
|
||||
<div className="space-y-6">
|
||||
<div className="text-2xl font-bold tracking-widest text-pop-black">
|
||||
{settings?.logoUrl ? <img src={settings.logoUrl} alt={brandName} className="h-8 md:h-10 object-contain" /> : brandName}
|
||||
@@ -151,6 +172,8 @@ export default function Footer({ categories = [] }: FooterProps) {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
)
|
||||
}
|
||||
@@ -275,3 +275,89 @@ html {
|
||||
.ui-prose blockquote {
|
||||
@apply border-l-4 border-pop-pink pl-4 italic opacity-80 my-4;
|
||||
}
|
||||
|
||||
/* Footer Curtain Reveal Effect */
|
||||
.global-main {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background: var(--color-pop-bg);
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
@apply relative bg-pop-bg;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.site-footer-stage {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.site-footer-brand-finale {
|
||||
@apply flex min-h-[55svh] items-center justify-center overflow-hidden border-t border-pop-black/10 bg-pop-bg px-6 py-20 text-center;
|
||||
}
|
||||
|
||||
.site-footer-finale-logo {
|
||||
@apply h-auto max-h-32 w-auto max-w-[min(82vw,32rem)] object-contain;
|
||||
}
|
||||
|
||||
.site-footer-finale-wordmark {
|
||||
@apply max-w-full break-words text-5xl font-semibold uppercase text-pop-black md:text-7xl;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.site-footer-navigation {
|
||||
@apply relative border-t border-pop-black/10 bg-night-900;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* Desktop Fixed Curtain Reveal Effect (เปิดม่าน Logo แบบ Fixed ตาม pkh.kitizone.com) */
|
||||
@media (min-width: 1024px) {
|
||||
.global-main {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background: var(--color-pop-bg);
|
||||
}
|
||||
|
||||
.site-footer-with-finale {
|
||||
min-height: 100svh;
|
||||
}
|
||||
|
||||
.site-footer-stage {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
min-height: 100svh;
|
||||
display: grid;
|
||||
grid-template-rows: minmax(0, 1fr) auto;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.site-footer-brand-finale {
|
||||
min-height: 0;
|
||||
padding-top: 4rem;
|
||||
padding-bottom: 4rem;
|
||||
}
|
||||
|
||||
.site-footer-finale-logo {
|
||||
@apply max-h-48 max-w-[min(68vw,48rem)];
|
||||
}
|
||||
|
||||
.site-footer-finale-wordmark {
|
||||
@apply text-8xl;
|
||||
}
|
||||
|
||||
.site-footer-navigation {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.site-footer-stage {
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.site-footer-with-finale {
|
||||
min-height: 0;
|
||||
}
|
||||
}
|
||||
@@ -52,11 +52,13 @@ export default function HomePage() {
|
||||
<div className="w-12 h-12 border-4 border-pop-pink border-t-transparent rounded-full animate-spin"></div>
|
||||
</div>
|
||||
) : (
|
||||
<DynamicPageRenderer
|
||||
sections={sections}
|
||||
categories={categories}
|
||||
categoriesLoading={categoriesLoading}
|
||||
/>
|
||||
<main className="global-main relative z-10 bg-pop-bg">
|
||||
<DynamicPageRenderer
|
||||
sections={sections}
|
||||
categories={categories}
|
||||
categoriesLoading={categoriesLoading}
|
||||
/>
|
||||
</main>
|
||||
)}
|
||||
|
||||
<Footer categories={categories} />
|
||||
|
||||
@@ -210,33 +210,71 @@
|
||||
@apply flex h-9 w-9 items-center justify-center rounded-full border border-line-primary/20 bg-surface-page text-[10px] font-bold text-text-main transition-all duration-300 hover:border-brand-primary hover:bg-brand-primary hover:text-surface-card;
|
||||
}
|
||||
|
||||
.global-main {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
background: var(--color-surface-page);
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
@apply relative bg-surface-page;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
background-color: var(--color-surface-page);
|
||||
}
|
||||
|
||||
.site-footer-stage {
|
||||
@apply relative;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.site-footer-brand-finale {
|
||||
@apply flex min-h-[55svh] items-center justify-center overflow-hidden border-t border-line-primary/20 bg-surface-page px-6 py-20 text-center;
|
||||
display: flex;
|
||||
min-height: 55svh;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid color-mix(in oklab, var(--color-line-primary) 20%, transparent);
|
||||
background-color: var(--color-surface-page);
|
||||
padding-inline: calc(var(--spacing) * 6);
|
||||
padding-block: calc(var(--spacing) * 20);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.site-footer-finale-logo {
|
||||
@apply h-auto max-h-32 w-auto max-w-[min(82vw,32rem)] object-contain;
|
||||
height: auto;
|
||||
max-height: calc(var(--spacing) * 32);
|
||||
width: auto;
|
||||
max-width: min(82vw, 32rem);
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.site-footer-finale-wordmark {
|
||||
@apply max-w-full break-words text-5xl font-semibold uppercase text-text-main md:text-7xl;
|
||||
max-width: 100%;
|
||||
font-size: var(--text-5xl);
|
||||
line-height: var(--tw-leading, var(--text-5xl--line-height));
|
||||
font-weight: var(--font-weight-semibold, 600);
|
||||
overflow-wrap: break-word;
|
||||
color: var(--color-text-main);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 48rem) {
|
||||
.site-footer-finale-wordmark {
|
||||
font-size: var(--text-7xl);
|
||||
line-height: var(--tw-leading, var(--text-7xl--line-height));
|
||||
}
|
||||
}
|
||||
|
||||
.site-footer-navigation {
|
||||
@apply relative border-t border-line-primary/20 bg-surface-card px-6 py-20;
|
||||
position: relative;
|
||||
border-top: 1px solid color-mix(in oklab, var(--color-line-primary) 20%, transparent);
|
||||
background-color: var(--color-surface-card);
|
||||
padding-inline: calc(var(--spacing) * 6);
|
||||
padding-block: calc(var(--spacing) * 20);
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
/* Desktop Fixed Curtain Reveal Effect (เปิดม่าน Logo แบบ Fixed ตาม pkh.kitizone.com) */
|
||||
@media (min-width: 1024px) {
|
||||
.global-main {
|
||||
position: relative;
|
||||
@@ -252,22 +290,25 @@
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
min-height: 100svh;
|
||||
display: grid;
|
||||
grid-template-rows: minmax(0, 1fr) auto;
|
||||
min-height: 100svh;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.site-footer-brand-finale {
|
||||
@apply min-h-0 py-16;
|
||||
min-height: 0;
|
||||
padding-block: calc(var(--spacing) * 16);
|
||||
}
|
||||
|
||||
.site-footer-finale-logo {
|
||||
@apply max-h-48 max-w-[min(68vw,48rem)];
|
||||
max-height: calc(var(--spacing) * 48);
|
||||
max-width: min(68vw, 48rem);
|
||||
}
|
||||
|
||||
.site-footer-finale-wordmark {
|
||||
@apply text-8xl;
|
||||
font-size: var(--text-8xl);
|
||||
line-height: var(--tw-leading, var(--text-8xl--line-height));
|
||||
}
|
||||
|
||||
.site-footer-navigation {
|
||||
@@ -277,8 +318,8 @@
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.site-footer-stage {
|
||||
position: relative;
|
||||
display: block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.site-footer-with-finale {
|
||||
|
||||
Reference in new issue
Block a user