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-06-20 23:51:57 -04:00
1 parent 74b9670c79
commit 73590e06c4
37 files changed
+964 -709
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/website/src/components/dynamic/DynamicPageRenderer.tsx
+92 -79
View File
@@ -1,5 +1,6 @@
"use client"
import Image from 'next/image'
import Link from '../LocalizedLink'
import { Clock, Mail, MapPin, MessageCircle } from 'lucide-react'
import type { Category, PageSection, Product } from '@homaroma/types'
@@ -38,7 +39,7 @@ function optionalText(value: unknown, lang: string) {
return localizedValue(value, lang)
}
function renderAccentTitle(text: string, accentClassName = 'text-pop-pink italic') {
function renderAccentTitle(text: string, accentClassName = 'ui-accent-text not-italic') {
if (!text.includes('[') || !text.includes(']')) return text
return text.split('[').map((part, index) => {
@@ -79,7 +80,7 @@ function AnnouncementBar({ payload, lang }: { payload: Record<string, unknown>,
return (
<section
className={`announcement-bar absolute top-0 left-0 w-full z-[60] px-4 py-3 text-center text-sm font-semibold tracking-wide ${backgroundColor ? '' : 'bg-pop-black'} ${textColor ? '' : 'text-white'} overflow-hidden`}
className={`announcement-bar absolute top-0 left-0 z-[60] w-full overflow-hidden px-4 py-3 text-center text-sm font-semibold tracking-wide ${backgroundColor ? '' : 'bg-text-main'} ${textColor ? '' : 'text-white'}`}
style={{ backgroundColor, color: textColor }}
>
<Swiper
@@ -111,14 +112,16 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
const buttonLink = typeof payload.buttonLink === 'string' ? payload.buttonLink : '/shop'
return (
<section className="relative flex min-h-[90vh] w-full items-center justify-center overflow-hidden bg-neutral-900 md:aspect-[21/9] md:min-h-0">
<img
<section className="relative flex min-h-[90vh] w-full items-center justify-center overflow-hidden bg-text-main md:aspect-[21/9] md:min-h-0">
<Image
src={imageUrl}
alt={title || 'HomAroma'}
fill
unoptimized
className="absolute inset-0 h-full w-full scale-[1.02] object-cover"
/>
<div className="absolute inset-0 bg-neutral-900/40" />
<div className="absolute inset-0 bg-gradient-to-t from-neutral-900/90 via-neutral-900/10 to-neutral-900/30" />
<div className="absolute inset-0 bg-text-main/40" />
<div className="absolute inset-0 bg-gradient-to-t from-text-main/90 via-text-main/10 to-text-main/30" />
<div className="relative z-10 mx-auto mt-16 w-full max-w-4xl space-y-6 px-8 text-center md:mt-0">
<div className="space-y-6">
{tagline && (
@@ -126,8 +129,8 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
{tagline}
</p>
)}
<h1 className="font-serif text-5xl font-light leading-tight tracking-wide text-white drop-shadow-md md:text-7xl lg:text-8xl">
{renderAccentTitle(title || 'HomAroma', 'font-medium italic text-[#E4BC32]')}
<h1 className="font-display text-5xl font-light leading-tight tracking-wide text-white drop-shadow-md md:text-7xl lg:text-8xl">
{renderAccentTitle(title || 'HomAroma')}
</h1>
{description && (
<p className="mx-auto max-w-2xl pb-8 pt-4 text-lg font-light text-white/90 drop-shadow-md md:text-xl">
@@ -137,13 +140,13 @@ function HeroSection({ payload, lang }: { payload: Record<string, unknown>, lang
<div className="flex flex-col items-center justify-center gap-6 sm:flex-row">
<Link
href={buttonLink}
className="rounded-full bg-white px-8 py-4 text-sm font-bold uppercase tracking-widest text-pop-black transition-all duration-300 hover:bg-pop-bg hover:shadow-xl"
className="rounded-full bg-surface-card px-8 py-4 text-sm font-bold uppercase tracking-widest text-text-main transition-all duration-300 hover:bg-surface-page hover:shadow-xl"
>
{buttonText || 'Explore Collection'}
</Link>
<a
href="#categories"
className="group flex items-center gap-2 px-8 py-4 text-sm font-medium uppercase tracking-widest text-white transition-colors hover:text-[#E4BC32]"
className="group flex items-center gap-2 px-8 py-4 text-sm font-medium uppercase tracking-widest text-white transition-colors hover:text-brand-accent"
>
{heroLearnMoreText(resolvedLang)}
<span className="transition-transform group-hover:translate-x-1">→</span>
@@ -182,11 +185,11 @@ function CategoriesSection({
}
return (
<section id="categories" className="bg-white px-6 py-24">
<div className="mx-auto max-w-7xl space-y-14">
<section id="categories" className="bg-surface-page ui-section-band">
<div className="ui-section-shell space-y-14">
<div className="mx-auto max-w-2xl space-y-4 text-center">
<h2 className="text-4xl font-semibold text-pop-black md:text-5xl">{title}</h2>
{subtitle && <p className="text-gray-500">{subtitle}</p>}
<h2 className="ui-section-title">{title}</h2>
{subtitle && <p className="ui-section-subtitle">{subtitle}</p>}
</div>
<div className="grid grid-cols-2 gap-5 md:grid-cols-5">
{displayed.map((category) => {
@@ -196,14 +199,16 @@ function CategoriesSection({
<Link
key={category.id}
href={`/category/${category.id}`}
className="group relative h-72 overflow-hidden rounded-2xl shadow-brutal transition hover:-translate-y-1 hover:shadow-brutal-hover"
className="group relative h-72 overflow-hidden rounded-2xl shadow-card transition hover:-translate-y-1 hover:shadow-card-hover"
>
<img
<Image
src={category.imageUrl || getCategoryImage(name)}
alt={name}
fill
unoptimized
className="absolute inset-0 h-full w-full object-cover transition duration-700 group-hover:scale-105"
/>
<div className="absolute inset-0 bg-gradient-to-t from-black/65 to-transparent" />
<div className="absolute inset-0 bg-gradient-to-t from-text-main/65 to-transparent" />
<div className="absolute bottom-5 left-5 right-5 text-white">
<span className="block text-lg font-semibold">{name}</span>
{category._count && (
@@ -245,14 +250,14 @@ function ProductsSection({ payload, lang }: { payload: Record<string, unknown>,
}
return (
<section className="bg-pop-bg px-6 py-24">
<div className="mx-auto max-w-7xl space-y-10">
<div className="flex flex-col gap-4 border-b border-gray-200 pb-6 md:flex-row md:items-end md:justify-between">
<section className="bg-surface-page ui-section-band">
<div className="ui-section-shell space-y-10">
<div className="flex flex-col gap-4 border-b border-line-primary/20 pb-6 md:flex-row md:items-end md:justify-between">
<div>
<h2 className="text-4xl font-semibold text-pop-black md:text-5xl">{title}</h2>
{subtitle && <p className="mt-2 text-gray-500">{subtitle}</p>}
<h2 className="ui-section-title">{title}</h2>
{subtitle && <p className="mt-2 ui-section-subtitle">{subtitle}</p>}
</div>
<Link href="/shop" className="font-semibold text-pop-pink transition hover:text-pop-red">
<Link href="/shop" className="ui-section-link">
{viewAllLabel[resolvedLang] ?? viewAllLabel.en}
</Link>
</div>
@@ -261,7 +266,7 @@ function ProductsSection({ payload, lang }: { payload: Record<string, unknown>,
{products.map((product) => <ProductCard key={product.id} product={product} />)}
</div>
) : (
<p className="rounded-2xl bg-white p-8 text-center text-gray-500 shadow-brutal">
<p className="ui-section-card bg-surface-card p-8 text-center text-muted-text">
{emptyLabel[resolvedLang] ?? emptyLabel.en}
</p>
)}
@@ -280,18 +285,18 @@ function BannerSection({ payload, lang }: { payload: Record<string, unknown>, la
const linkUrl = typeof payload.linkUrl === 'string' ? payload.linkUrl : ''
const content = (
<div className="relative mx-auto min-h-[360px] max-w-7xl overflow-hidden rounded-3xl shadow-brutal">
<img src={imageUrl} alt={title || 'Banner'} className="absolute inset-0 h-full w-full object-cover" />
<div className="absolute inset-0 bg-gradient-to-r from-pop-black/75 via-pop-black/35 to-transparent" />
<div className="relative mx-auto min-h-[360px] max-w-7xl overflow-hidden rounded-3xl shadow-card">
<Image src={imageUrl} alt={title || 'Banner'} fill unoptimized className="absolute inset-0 h-full w-full object-cover" />
<div className="absolute inset-0 bg-gradient-to-r from-text-main/75 via-text-main/35 to-transparent" />
<div className="relative z-10 max-w-xl space-y-4 p-8 text-white md:p-14">
{title && <h2 className="text-3xl font-semibold md:text-5xl">{title}</h2>}
{description && <p className="text-white/90">{description}</p>}
{buttonText && <span className="inline-flex rounded-full bg-white px-6 py-3 font-semibold text-pop-black">{buttonText}</span>}
{buttonText && <span className="inline-flex rounded-full bg-surface-card px-6 py-3 font-semibold text-text-main">{buttonText}</span>}
</div>
</div>
)
return <section className="bg-white px-6 py-16">{linkUrl ? <Link href={linkUrl}>{content}</Link> : content}</section>
return <section className="bg-surface-page ui-section-band">{linkUrl ? <Link href={linkUrl}>{content}</Link> : content}</section>
}
function TextSection({ payload, lang }: { payload: Record<string, unknown>, lang: string }) {
@@ -306,10 +311,10 @@ function TextSection({ payload, lang }: { payload: Record<string, unknown>, lang
: 'text-left'
return (
<section className="bg-white px-6 py-16">
<section className="bg-surface-page ui-section-band">
<div className={`mx-auto max-w-4xl space-y-6 ${alignClass}`}>
{title && <h2 className="text-3xl font-semibold text-pop-black md:text-4xl">{title}</h2>}
{content && <div className="leading-relaxed text-gray-600" dangerouslySetInnerHTML={{ __html: content }} />}
{title && <h2 className="text-3xl font-semibold text-text-main md:text-4xl">{title}</h2>}
{content && <div className="leading-relaxed text-muted-text" dangerouslySetInnerHTML={{ __html: content }} />}
</div>
</section>
)
@@ -324,15 +329,15 @@ function NewsletterSection({ payload, lang }: { payload: Record<string, unknown>
const placeholder = typeof payload.placeholderText === 'string' ? payload.placeholderText : 'you@example.com'
return (
<section className="bg-pop-black px-6 py-20 text-white">
<section className="bg-text-main px-6 py-20 text-white">
<div className="mx-auto grid max-w-5xl gap-8 md:grid-cols-[1fr_auto] md:items-end">
<div className="space-y-3">
<h2 className="text-3xl font-semibold text-white md:text-4xl">{title}</h2>
{description && <p className="max-w-2xl text-white/75">{description}</p>}
</div>
<form className="flex flex-col gap-3 sm:flex-row">
<input className="min-w-0 rounded-full px-5 py-3 text-pop-black" placeholder={placeholder} type="email" />
<button className="rounded-full bg-pop-pink px-6 py-3 font-semibold text-white" type="button">
<input className="min-w-0 rounded-full px-5 py-3 text-text-main" placeholder={placeholder} type="email" />
<button className="rounded-full bg-brand-primary px-6 py-3 font-semibold text-white" type="button">
{buttonText}
</button>
</form>
@@ -354,27 +359,29 @@ function EditorialTileSection({ payload, lang }: { payload: Record<string, unkno
const textColor = typeof payload.textColor === 'string' ? payload.textColor : undefined
return (
<section className="overflow-hidden bg-white px-6 py-20" style={{ backgroundColor, color: textColor }}>
<section className="overflow-hidden bg-surface-page ui-section-band" style={{ backgroundColor, color: textColor }}>
<div className="mx-auto grid max-w-7xl gap-12 md:grid-cols-2 md:items-center">
{imageUrl && (
<div className={`group aspect-square overflow-hidden rounded-3xl shadow-brutal ${imagePosition === 'left' ? 'md:order-1' : 'md:order-2'}`}>
<img
<div className={`group relative aspect-square overflow-hidden rounded-3xl shadow-card ${imagePosition === 'left' ? 'md:order-1' : 'md:order-2'}`}>
<Image
src={imageUrl}
alt={title || 'Editorial'}
fill
unoptimized
className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
/>
</div>
)}
<div className={`space-y-6 ${imagePosition === 'left' ? 'md:order-2' : 'md:order-1'}`}>
{title && (
<h2 className="text-4xl font-semibold leading-tight text-pop-black md:text-6xl" style={{ color: textColor }}>
<h2 className="text-4xl font-semibold leading-tight text-text-main md:text-6xl" style={{ color: textColor }}>
{renderAccentTitle(title)}
</h2>
)}
<div className="h-px w-14 bg-pop-pink" />
{description && <p className="whitespace-pre-line text-base leading-relaxed text-gray-600 md:text-lg" style={{ color: textColor }}>{description}</p>}
<div className="h-px w-14 bg-brand-primary" />
{description && <p className="whitespace-pre-line text-base leading-relaxed text-muted-text md:text-lg" style={{ color: textColor }}>{description}</p>}
{buttonText && buttonLink && (
<Link href={buttonLink} className="inline-flex rounded-full border border-current px-8 py-3 text-xs font-bold uppercase tracking-[0.22em] transition hover:bg-pop-pink hover:text-white">
<Link href={buttonLink} className="inline-flex rounded-full border border-current px-8 py-3 text-xs font-bold uppercase tracking-[0.22em] transition hover:bg-brand-primary hover:text-white">
{buttonText}
</Link>
)}
@@ -392,12 +399,12 @@ function EditorialCarouselSection({ payload, lang }: { payload: Record<string, u
if (!slides.length) return null
return (
<section className="bg-pop-black px-6 py-20 text-white">
<section className="bg-text-main px-6 py-20 text-white">
<div className="mx-auto max-w-7xl space-y-12">
{title && (
<div className="mx-auto max-w-3xl space-y-4 text-center">
<h2 className="text-4xl font-semibold text-white md:text-5xl">{renderAccentTitle(title, 'text-pop-yellow italic')}</h2>
<div className="mx-auto h-px w-16 bg-pop-yellow" />
<h2 className="text-4xl font-semibold text-white md:text-5xl">{renderAccentTitle(title, 'ui-accent-text not-italic')}</h2>
<div className="mx-auto h-px w-16 bg-brand-accent" />
</div>
)}
<div className="grid gap-6 md:grid-cols-3">
@@ -410,18 +417,24 @@ function EditorialCarouselSection({ payload, lang }: { payload: Record<string, u
const imageUrl = typeof slide.imageUrl === 'string' ? slide.imageUrl : ''
return (
<article key={index} className="group overflow-hidden rounded-3xl border border-white/10 bg-white/5">
<article key={index} className="group overflow-hidden rounded-3xl border border-line-primary/10 bg-surface-card/60">
{imageUrl && (
<div className="aspect-[4/3] overflow-hidden">
<img src={imageUrl} alt={slideTitle || 'Editorial slide'} className="h-full w-full object-cover transition duration-700 group-hover:scale-105" />
<div className="relative aspect-[4/3] overflow-hidden">
<Image
src={imageUrl}
alt={slideTitle || 'Editorial slide'}
fill
unoptimized
className="h-full w-full object-cover transition duration-700 group-hover:scale-105"
/>
</div>
)}
<div className="space-y-4 p-6">
{category && <p className="text-[10px] font-bold uppercase tracking-[0.24em] text-pop-yellow">{category}</p>}
{slideTitle && <h3 className="text-2xl font-semibold text-white">{renderAccentTitle(slideTitle, 'text-pop-yellow italic')}</h3>}
{category && <p className="text-[10px] font-bold uppercase tracking-[0.24em] text-brand-accent">{category}</p>}
{slideTitle && <h3 className="text-2xl font-semibold text-white">{renderAccentTitle(slideTitle)}</h3>}
{description && <p className="line-clamp-4 text-sm leading-relaxed text-white/70">{description}</p>}
{buttonText && buttonLink && (
<Link href={buttonLink} className="inline-flex text-xs font-bold uppercase tracking-[0.22em] text-pop-yellow transition hover:text-white">
<Link href={buttonLink} className="inline-flex text-xs font-bold uppercase tracking-[0.22em] text-brand-accent transition hover:text-white">
{buttonText} &rarr;
</Link>
)}
@@ -462,15 +475,15 @@ function HeroArticleSection({ payload, lang }: { payload: Record<string, unknown
}
return (
<section className="relative flex min-h-[60vh] items-center justify-center overflow-hidden bg-pop-black px-6 py-24 text-center text-white md:min-h-[76vh]">
<section className="relative flex min-h-[60vh] items-center justify-center overflow-hidden bg-text-main px-6 py-24 text-center text-white md:min-h-[76vh]">
{imageUrl && (
<>
<img src={imageUrl} alt={title} className="absolute inset-0 h-full w-full object-cover" />
<div className="absolute inset-0 bg-pop-black/55" />
<Image src={imageUrl} alt={title} fill unoptimized className="absolute inset-0 h-full w-full object-cover" />
<div className="absolute inset-0 bg-text-main/55" />
</>
)}
<div className="relative z-10 mx-auto max-w-4xl space-y-6">
{category && <p className="text-xs font-bold uppercase tracking-[0.28em] text-pop-yellow">{category}</p>}
{category && <p className="text-xs font-bold uppercase tracking-[0.28em] text-brand-accent">{category}</p>}
<h1 className="text-4xl font-semibold leading-tight md:text-6xl">{title}</h1>
{subtitle && <p className="mx-auto max-w-2xl text-lg text-white/85 md:text-xl">{subtitle}</p>}
{(author || date) && (
@@ -504,17 +517,17 @@ function ScentNotesBreakdownSection({ payload, lang }: { payload: Record<string,
]
return (
<section className="bg-pop-bg px-6 py-20">
<section className="bg-surface-page ui-section-band">
<div className="mx-auto max-w-6xl space-y-12 text-center">
<div className="mx-auto max-w-3xl space-y-4">
<h2 className="text-4xl font-semibold text-pop-black md:text-5xl">{title}</h2>
{description && <p className="text-gray-600">{description}</p>}
<h2 className="ui-section-title">{title}</h2>
{description && <p className="text-muted-text">{description}</p>}
</div>
<div className="grid gap-6 md:grid-cols-3">
{notes.map(([label, value]) => (
<article key={label} className="rounded-3xl bg-white p-8 text-left shadow-brutal">
<h3 className="mb-4 text-xs font-bold uppercase tracking-[0.24em] text-pop-pink">{label}</h3>
<p className="leading-relaxed text-gray-600">{value}</p>
<article key={label} className="ui-section-card p-8 text-left">
<h3 className="mb-4 text-xs font-bold uppercase tracking-[0.24em] text-brand-primary">{label}</h3>
<p className="leading-relaxed text-muted-text">{value}</p>
</article>
))}
</div>
@@ -532,14 +545,14 @@ function QuoteCalloutSection({ payload, lang }: { payload: Record<string, unknow
if (!quote) return null
return (
<section className="bg-white px-6 py-24">
<section className="bg-surface-page px-6 py-24">
<div className="mx-auto max-w-4xl text-center">
<p className="mb-8 text-7xl leading-none text-pop-pink/25">&quot;</p>
<blockquote className="text-3xl font-semibold italic leading-relaxed text-pop-black md:text-5xl">
<p className="mb-8 text-7xl leading-none text-brand-primary/25">&quot;</p>
<blockquote className="text-3xl font-semibold italic leading-relaxed text-text-main md:text-5xl">
{quote}
</blockquote>
{(author || role) && (
<p className="mt-8 text-xs font-bold uppercase tracking-[0.24em] text-gray-500">
<p className="mt-8 text-xs font-bold uppercase tracking-[0.24em] text-muted-text">
{[author, role].filter(Boolean).join(' / ')}
</p>
)}
@@ -556,9 +569,9 @@ function AccordionSection({ payload, lang }: { payload: Record<string, unknown>,
const sectionTitle = localizedFromRecord(payload, 'title', resolvedLang)
return (
<section className="bg-pop-bg px-6 py-20">
<section className="bg-surface-page ui-section-band">
<div className="mx-auto max-w-4xl space-y-10">
{sectionTitle && <h2 className="text-4xl font-semibold text-pop-black md:text-5xl">{sectionTitle}</h2>}
{sectionTitle && <h2 className="ui-section-title">{sectionTitle}</h2>}
{categories.map((category, categoryIndex) => {
const questions = Array.isArray(category.questions) ? category.questions.map(toRecord) : []
const name = localizedFromRecord(category, 'name', resolvedLang)
@@ -567,8 +580,8 @@ function AccordionSection({ payload, lang }: { payload: Record<string, unknown>,
return (
<div key={categoryIndex} className="space-y-5">
{name && (
<h2 className="flex items-center gap-3 text-2xl font-semibold text-pop-black">
{icon && <span className="text-pop-pink">{icon}</span>}
<h2 className="flex items-center gap-3 text-2xl font-semibold text-text-main">
{icon && <span className="text-brand-primary">{icon}</span>}
{name}
</h2>
)}
@@ -579,11 +592,11 @@ function AccordionSection({ payload, lang }: { payload: Record<string, unknown>,
if (!question || !answer) return null
return (
<details key={itemIndex} className="group rounded-2xl bg-white p-5 shadow-brutal">
<summary className="cursor-pointer list-none text-lg font-semibold text-pop-black marker:hidden">
<details key={itemIndex} className="group rounded-2xl bg-surface-card p-5 shadow-card">
<summary className="cursor-pointer list-none text-lg font-semibold text-text-main marker:hidden">
{question}
</summary>
<p className="mt-4 whitespace-pre-wrap leading-relaxed text-gray-600">{answer}</p>
<p className="mt-4 whitespace-pre-wrap leading-relaxed text-muted-text">{answer}</p>
</details>
)
})}
@@ -621,28 +634,28 @@ function ContactInfoSection({ payload, lang }: { payload: Record<string, unknown
] as const
return (
<section className="bg-white px-6 py-20">
<section className="bg-surface-page ui-section-band">
<div className="mx-auto grid max-w-6xl gap-6 md:grid-cols-2 lg:grid-cols-4">
{title && (
<div className="col-span-full mb-2">
<h2 className="text-4xl font-semibold text-pop-black md:text-5xl">{title}</h2>
<h2 className="ui-section-title">{title}</h2>
</div>
)}
{items.map(({ key, label, value, Icon }) => {
if (!value) return null
return (
<article key={key} className="rounded-3xl bg-pop-bg p-6 text-center shadow-brutal">
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-white text-pop-pink">
<article key={key} className="ui-section-card-muted p-6 text-center">
<div className="mx-auto mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-surface-card text-brand-primary">
<Icon className="h-6 w-6" />
</div>
<h3 className="mb-2 text-lg font-semibold text-pop-black">{label}</h3>
<h3 className="mb-2 text-lg font-semibold text-text-main">{label}</h3>
{key === 'email' ? (
<a className="break-words text-gray-600 transition hover:text-pop-pink" href={`mailto:${value}`}>
<a className="break-words text-muted-text transition hover:text-brand-primary" href={`mailto:${value}`}>
{value}
</a>
) : (
<p className="whitespace-pre-wrap break-words text-gray-600">{value}</p>
<p className="whitespace-pre-wrap break-words text-muted-text">{value}</p>
)}
</article>
)