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

Full website

Browse Source
This commit is contained in:
Your Name committed 2026-06-17 07:42:59 -04:00
1 parent 807c43ece5
commit ea9f33f60e
40 files changed
+4503 -1202
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/website/src/app/article/[slug]/page.tsx
+17 -20
View File
@@ -36,43 +36,40 @@ export default async function ArticleReaderPage({ params }: { params: Promise<{
if (!article) notFound()
return (
<div className="min-h-screen flex flex-col bg-night-950">
<main className="flex-1 pt-24 pb-20">
<article className="max-w-4xl mx-auto w-full animate-fade-in relative mt-8">
{/* Desktop back button */}
<div className="flex min-h-screen flex-col bg-pop-bg">
<main className="flex-1 pb-20 pt-24">
<article className="relative mx-auto mt-8 w-full max-w-4xl">
<Link
href="/scent-guide"
className="absolute -left-16 xl:-left-24 top-0 mt-8 hidden lg:flex p-4 glass border border-white/5 rounded-full hover:bg-white/10 transition-colors"
className="absolute -left-16 top-0 mt-8 hidden rounded-full border border-gray-200 bg-white p-4 text-pop-black shadow-sm transition-colors hover:text-pop-pink xl:-left-24 lg:flex"
>
<ArrowLeft className="w-5 h-5 text-slate-300" />
<ArrowLeft className="h-5 w-5" />
</Link>
{/* Header */}
<div className="text-center px-6 py-12 space-y-6">
<Link href="/scent-guide" className="lg:hidden text-slate-400 text-sm hover:text-white inline-flex items-center gap-2 mb-4">
<ArrowLeft className="w-4 h-4" /> Go Back
<div className="space-y-6 px-6 py-12 text-center">
<Link href="/scent-guide" className="mb-4 inline-flex items-center gap-2 text-sm text-gray-600 hover:text-pop-pink lg:hidden">
<ArrowLeft className="h-4 w-4" /> Go Back
</Link>
<p className="text-cyan-glow uppercase tracking-[0.3em] font-bold text-xs">
<p className="text-xs font-bold uppercase tracking-[0.3em] text-pop-pink">
{new Date(article.createdAt).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
</p>
<h1 className="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight max-w-3xl mx-auto font-serif">
<h1 className="mx-auto max-w-3xl text-4xl font-bold leading-tight text-pop-black md:text-5xl lg:text-6xl">
{article.title}
</h1>
</div>
{/* Cover Image */}
{article.coverImage && (
<div className="w-full aspect-[16/7] bg-night-900 md:rounded-[2rem] overflow-hidden shadow-2xl mb-16 border border-white/5">
<img src={article.coverImage} alt={article.title} className="w-full h-full object-cover" />
<div className="mb-16 aspect-[16/7] w-full overflow-hidden bg-white shadow-brutal md:rounded-[2rem]">
<img src={article.coverImage} alt={article.title} className="h-full w-full object-cover" />
</div>
)}
{/* Content Body */}
<div className="px-6 md:px-12 prose prose-invert prose-lg prose-cyan mx-auto max-w-3xl pb-16">
<div dangerouslySetInnerHTML={{ __html: article.content }} className="space-y-6" />
<div className="mx-auto max-w-3xl rounded-3xl bg-white px-6 py-10 shadow-brutal md:px-12">
<div
dangerouslySetInnerHTML={{ __html: article.content }}
className="space-y-6 leading-relaxed text-gray-700 [&_a]:font-semibold [&_a]:text-pop-pink [&_h2]:text-3xl [&_h2]:font-bold [&_h2]:text-pop-black [&_h3]:text-2xl [&_h3]:font-bold [&_h3]:text-pop-black [&_img]:rounded-2xl [&_img]:shadow-brutal [&_p]:leading-relaxed [&_strong]:text-pop-black"
/>
</div>
</article>
</main>
</div>