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-03 17:19:38 +07:00
1 parent 7f627f7c32
commit 09058485e0
5 files changed
+196 -198
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/spa/src/index.css
+41 -34
View File
@@ -1,71 +1,78 @@
@import "tailwindcss"; @import "tailwindcss";
@theme { @theme {
/* Night Luxury color palette */ /* Memphis Pop-Art color palette */
--color-night-900: #0B0C10; --color-pop-pink: #FF69B4;
--color-night-800: #1F2833; --color-pop-yellow: #FFF200;
--color-night-700: #45A29E; --color-pop-orange: #FF8800;
--color-cyan-glow: #66FCF1; --color-pop-red: #FF3333;
--color-silver-metallic: #C5C6C7; --color-pop-cyan: #00FFFF;
--color-pop-green: #39FF14;
--color-pop-purple: #BA55D3;
--color-pop-bg: #FFF9E6;
--color-pop-black: #111111;
/* Brutalist Shadows */
--shadow-brutal: 6px 6px 0px 0px #111;
--shadow-brutal-hover: 2px 2px 0px 0px #111;
/* Custom animations */ /* Custom animations */
--animate-fade-in: fade-in 1.2s ease-out forwards; --animate-pop-in: pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
--animate-float: float 3s ease-in-out infinite; --animate-spin-slow: spin 8s linear infinite;
@keyframes fade-in { @keyframes pop-in {
0% { opacity: 0; transform: translateY(10px); } 0% { opacity: 0; transform: scale(0.8); }
100% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; transform: scale(1); }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
} }
} }
@layer base { @layer base {
body { body {
@apply bg-night-900 text-silver-metallic font-sans antialiased; @apply bg-pop-bg text-pop-black font-sans antialiased;
background-image: background-image: radial-gradient(#111 2px, transparent 2px);
radial-gradient(at 0% 0%, rgba(31, 40, 51, 0.5) 0px, transparent 50%), background-size: 32px 32px;
radial-gradient(at 100% 100%, rgba(11, 12, 16, 1) 0px, transparent 50%); background-position: 0 0, 16px 16px;
min-height: 100vh; min-height: 100vh;
} }
h1, h2, h3, h4 { h1, h2, h3, h4 {
@apply text-white tracking-tight leading-none; @apply text-pop-black font-black uppercase tracking-tight;
} }
} }
@layer components { @layer components {
.glass { .brutal-box {
@apply bg-white/5 backdrop-blur-lg border border-white/10; @apply bg-white border-4 border-pop-black shadow-brutal transition-all duration-300;
} }
.glass-hover { .brutal-box-hover {
@apply transition-all duration-300 hover:bg-white/10 hover:border-white/20; @apply hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-brutal-hover;
} }
.text-glow { .brutal-button {
text-shadow: 0 0 15px rgba(102, 252, 241, 0.4); @apply px-8 py-4 bg-pop-yellow text-pop-black font-black uppercase border-4 border-pop-black shadow-brutal transition-all duration-200 hover:bg-pop-pink hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-brutal-hover;
}
.brutal-button-alt {
@apply px-8 py-4 bg-pop-cyan text-pop-black font-black uppercase border-4 border-pop-black shadow-brutal transition-all duration-200 hover:bg-pop-orange hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-brutal-hover;
} }
} }
/* Custom Scrollbar */ /* Custom Scrollbar */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 12px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
@apply bg-night-900; @apply bg-pop-bg border-l-4 border-pop-black;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
@apply bg-night-800 rounded-full border-2 border-night-900; @apply bg-pop-pink border-4 border-pop-black;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
@apply bg-night-700; @apply bg-pop-red;
} }
/* Smooth Scrolling */ /* Smooth Scrolling */
@@ -73,12 +80,12 @@ html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
/* Product Editorial Image Overrides (for ReactQuill Content) */ /* Product Editorial Image Overrides */
.product-editorial img { .product-editorial img {
width: 100%; width: 100%;
max-width: 480px; max-width: 480px;
margin: 2rem auto; margin: 2rem auto;
display: block; display: block;
border: 1px solid rgba(255, 255, 255, 0.1); border: 4px solid var(--color-pop-black);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-brutal);
} }
apps/spa/src/pages/HomePage.tsx
+50 -58
View File
@@ -38,35 +38,37 @@ export default function HomePage() {
}, []) }, [])
return ( return (
<div className="min-h-screen"> <div className="min-h-screen bg-pop-bg">
<Navbar categories={categories} /> <Navbar categories={categories} />
{/* Hero Section */} {/* Hero Section */}
<section className="relative w-full min-h-[90vh] md:min-h-0 md:aspect-video flex items-center justify-center overflow-hidden bg-night-950"> <section className="relative w-full min-h-[90vh] md:min-h-0 md:aspect-video flex items-center justify-center overflow-hidden bg-pop-yellow border-b-8 border-pop-black">
<div className="absolute inset-0 z-0"> <div className="absolute inset-0 z-0 opacity-20">
<img <img
src={hero?.imageUrl || "/images/hero.png"} src={hero?.imageUrl || "/images/hero.png"}
className="w-full h-full object-cover scale-[1.02] brightness-50" className="w-full h-full object-cover scale-[1.02] filter contrast-150 saturate-200"
alt="Hero Background" alt="Hero Background"
onError={(e) => { onError={(e) => {
(e.target as HTMLImageElement).style.display = 'none' (e.target as HTMLImageElement).style.display = 'none'
}} }}
/> />
<div className="absolute inset-0 bg-gradient-to-t from-night-900 via-transparent to-night-900/50" />
</div> </div>
<div className="relative z-10 text-center space-y-6 px-4 animate-fade-in"> <div className="absolute top-10 left-10 w-32 h-32 bg-pop-pink rounded-full border-4 border-pop-black shadow-brutal animate-bounce z-0"></div>
<p className="text-cyan-glow uppercase tracking-[0.4em] text-sm font-semibold opacity-80"> <div className="absolute bottom-20 right-10 w-24 h-24 bg-pop-cyan border-4 border-pop-black shadow-brutal animate-spin-slow z-0"></div>
{hero?.tagline || "A New Paradigm of Calm"}
<div className="relative z-10 text-center space-y-6 px-4 animate-pop-in brutal-box p-12 bg-white max-w-4xl mx-auto rotate-[-2deg]">
<p className="bg-pop-pink text-pop-black inline-block px-4 py-2 font-black uppercase tracking-[0.2em] text-sm border-2 border-pop-black shadow-brutal">
{hero?.tagline || "Vibrant Memphis Pop-Art"}
</p> </p>
<h1 className="text-6xl md:text-8xl font-bold max-w-4xl text-glow leading-[1.1]"> <h1 className="text-6xl md:text-8xl font-black text-pop-black leading-[1.1] uppercase tracking-tighter">
{hero ? ( {hero ? (
hero.title.split('[').map((part, i) => { hero.title.split('[').map((part, i) => {
if (part.includes(']')) { if (part.includes(']')) {
const [accent, rest] = part.split(']') const [accent, rest] = part.split(']')
return ( return (
<span key={i}> <span key={i}>
<span className="text-transparent bg-clip-text bg-gradient-to-r from-white via-silver-metallic to-white/50 italic font-serif"> <span className="text-pop-cyan bg-pop-black px-2 shadow-[4px_4px_0_0_#FF69B4] inline-block -rotate-3 mx-2">
{accent} {accent}
</span> </span>
{rest} {rest}
@@ -78,83 +80,74 @@ export default function HomePage() {
) : ( ) : (
<> <>
Inhale{' '} Inhale{' '}
<span className="text-transparent bg-clip-text bg-gradient-to-r from-white via-silver-metallic to-white/50 italic font-serif"> <span className="text-pop-cyan bg-pop-black px-2 shadow-[4px_4px_0_0_#FF69B4] inline-block -rotate-3 mx-2">
Serenity Serenity
</span> </span>
</> </>
)} )}
</h1> </h1>
<p className="text-slate-400 max-w-xl mx-auto text-lg md:text-xl font-light"> <p className="text-pop-black max-w-xl mx-auto text-lg md:text-xl font-bold bg-pop-yellow p-4 border-4 border-pop-black shadow-brutal rotate-[1deg]">
{hero?.description || "Crafting premium sensory experiences that transform your space into a sanctuary of peace."} {hero?.description || "Crafting premium sensory experiences that transform your space into a sanctuary of peace."}
</p> </p>
<div className="pt-8 flex flex-col sm:flex-row gap-4 justify-center"> <div className="pt-8 flex flex-col sm:flex-row gap-6 justify-center">
<Link <Link
to={hero?.buttonLink || "/shop"} to={hero?.buttonLink || "/shop"}
className="px-10 py-4 bg-white text-night-900 font-bold rounded-sm tracking-widest uppercase hover:bg-cyan-glow hover:shadow-[0_0_30px_rgba(102,252,241,0.5)] transition-all duration-500" className="brutal-button"
> >
{hero?.buttonText || "Explore Collection"} {hero?.buttonText || "Explore Collection"}
</Link> </Link>
<a <a
href="#categories" href="#categories"
className="px-10 py-4 glass text-white font-bold rounded-sm tracking-widest uppercase hover:bg-white/10 transition-all duration-300" className="brutal-button-alt"
> >
Learn More Learn More
</a> </a>
</div> </div>
</div> </div>
<div className="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce opacity-40">
<div className="w-px h-16 bg-gradient-to-b from-white/0 via-white to-white/0" />
</div>
</section> </section>
{/* Categories Showcase */} {/* Categories Showcase */}
<section id="categories" className="bg-night-900 py-24 px-6"> <section id="categories" className="py-24 px-6 border-b-8 border-pop-black bg-pop-cyan relative overflow-hidden">
<div className="max-w-7xl mx-auto space-y-12"> <div className="absolute top-0 right-0 w-64 h-64 bg-pop-pink rounded-full border-8 border-pop-black shadow-brutal -translate-y-1/2 translate-x-1/2"></div>
<div className="text-center space-y-2"> <div className="max-w-7xl mx-auto space-y-12 relative z-10">
<p className="text-cyan-glow uppercase tracking-[0.3em] text-xs font-semibold opacity-70"> <div className="text-center space-y-4">
Our Range <h2 className="text-5xl md:text-7xl font-black tracking-tight uppercase inline-block bg-white px-6 py-2 border-4 border-pop-black shadow-brutal -rotate-2">
</p> The Categories
<h2 className="text-4xl font-bold tracking-tight uppercase">The Categories</h2> </h2>
<div className="w-12 h-px bg-cyan-glow mx-auto mt-3" />
</div> </div>
{loading ? ( {loading ? (
<div className="grid grid-cols-2 md:grid-cols-5 gap-4"> <div className="grid grid-cols-2 md:grid-cols-5 gap-6">
{Array.from({ length: 5 }).map((_, i) => ( {Array.from({ length: 5 }).map((_, i) => (
<div key={i} className="h-56 rounded-xl bg-white/5 animate-pulse" /> <div key={i} className="h-64 brutal-box bg-white/5 animate-pulse" />
))} ))}
</div> </div>
) : ( ) : (
<div className="grid grid-cols-2 md:grid-cols-5 gap-4"> <div className="grid grid-cols-2 md:grid-cols-5 gap-6">
{categories.map((cat) => ( {categories.map((cat, idx) => (
<Link <Link
key={cat.id} key={cat.id}
to={`/category/${cat.id}`} to={`/category/${cat.id}`}
className="relative h-56 rounded-xl overflow-hidden group border-2 border-white/5 hover:border-cyan-glow/50 hover:shadow-[0_0_20px_rgba(102,252,241,0.15)] transition-all duration-500" className={`relative h-64 brutal-box group bg-pop-pink overflow-hidden ${idx % 2 === 0 ? 'rotate-1' : '-rotate-1'} hover:rotate-0`}
> >
<div className="absolute inset-0 bg-pop-black/20 group-hover:bg-transparent transition-colors z-10" />
<img <img
src={getCategoryImage(cat.name)} src={getCategoryImage(cat.name)}
className="absolute inset-0 w-full h-full object-cover grayscale opacity-40 group-hover:grayscale-0 group-hover:scale-110 group-hover:opacity-70 transition-all duration-700" className="absolute inset-0 w-full h-full object-cover mix-blend-multiply opacity-80 group-hover:scale-110 transition-transform duration-500"
alt={cat.name} alt={cat.name}
onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }} onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
/> />
<div className="absolute inset-0 bg-gradient-to-t from-night-900/90 via-night-900/20 to-transparent" /> <div className="absolute inset-0 border-8 border-pop-black z-20 pointer-events-none" />
<div className="absolute bottom-0 left-0 right-0 p-4"> <div className="absolute bottom-4 left-4 right-4 z-30">
<span className="text-white font-bold tracking-wider uppercase text-xs block"> <span className="bg-white text-pop-black font-black uppercase text-lg px-3 py-1 border-2 border-pop-black shadow-[2px_2px_0_0_#111] inline-block group-hover:-translate-y-1 transition-transform">
{cat.name} {cat.name}
</span> </span>
{cat._count && ( {cat._count && (
<span className="text-cyan-glow/60 text-[10px] tracking-wider"> <span className="block mt-2 bg-pop-yellow text-pop-black text-xs font-bold px-2 py-1 border-2 border-pop-black w-max shadow-[2px_2px_0_0_#111]">
{cat._count.products} products {cat._count.products} products
</span> </span>
)} )}
</div> </div>
<div className="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<svg className="w-5 h-5 text-cyan-glow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</div>
</Link> </Link>
))} ))}
</div> </div>
@@ -163,33 +156,32 @@ export default function HomePage() {
</section> </section>
{/* Featured Products */} {/* Featured Products */}
<section className="bg-night-900 py-24 px-6 border-t border-white/5"> <section className="bg-pop-pink py-24 px-6 relative">
<div className="max-w-7xl mx-auto space-y-12"> <div className="max-w-7xl mx-auto space-y-12 relative z-10">
<div className="flex justify-between items-end"> <div className="flex flex-col md:flex-row justify-between items-center gap-6">
<div className="space-y-2"> <h2 className="text-5xl md:text-7xl font-black uppercase bg-white px-6 py-2 border-4 border-pop-black shadow-brutal rotate-1">
<p className="text-cyan-glow uppercase tracking-[0.3em] text-xs font-semibold opacity-70"> Featured Picks
Top Picks </h2>
</p>
<h2 className="text-4xl font-bold">Featured Products</h2>
</div>
<Link <Link
to="/shop" to="/shop"
className="text-cyan-glow text-sm font-bold uppercase tracking-widest hover:underline decoration-cyan-glow/30" className="brutal-button bg-white hover:bg-pop-yellow"
> >
View All → View All
</Link> </Link>
</div> </div>
{loading ? ( {loading ? (
<div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
{Array.from({ length: 3 }).map((_, i) => ( {Array.from({ length: 3 }).map((_, i) => (
<div key={i} className="rounded-2xl bg-white/5 animate-pulse h-96" /> <div key={i} className="brutal-box bg-white/5 animate-pulse h-96" />
))} ))}
</div> </div>
) : ( ) : (
<div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
{featuredProducts.map((p) => ( {featuredProducts.map((p, idx) => (
<ProductCard key={p.id} product={p} /> <div key={p.id} className={`${idx % 2 === 0 ? '-rotate-2' : 'rotate-2'} hover:rotate-0 transition-transform`}>
<ProductCard product={p} />
</div>
))} ))}
</div> </div>
)} )}
apps/spa/tailwind.config.js
+18 -18
View File
@@ -7,31 +7,31 @@ export default {
theme: { theme: {
extend: { extend: {
colors: { colors: {
night: { pop: {
900: "#0B0C10", pink: "#FF69B4",
800: "#1F2833", yellow: "#FFF200",
700: "#45A29E", orange: "#FF8800",
red: "#FF3333",
cyan: "#00FFFF",
green: "#39FF14",
purple: "#BA55D3",
bg: "#FFF9E6",
black: "#111111",
}, },
cyan: {
glow: "#66FCF1"
}, },
silver: { boxShadow: {
metallic: "#C5C6C7" 'brutal': '6px 6px 0px 0px #111',
} 'brutal-hover': '2px 2px 0px 0px #111',
}, },
animation: { animation: {
'fade-in': 'fade-in 1.2s ease-out forwards', 'pop-in': 'pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards',
'float': 'float 3s ease-in-out infinite', 'spin-slow': 'spin 8s linear infinite',
}, },
keyframes: { keyframes: {
'fade-in': { 'pop-in': {
'0%': { opacity: '0', transform: 'translateY(10px)' }, '0%': { opacity: '0', transform: 'scale(0.8)' },
'100%': { opacity: '1', transform: 'translateY(0)' }, '100%': { opacity: '1', transform: 'scale(1)' },
}, },
'float': {
'0%, 100%': { transform: 'translateY(0)' },
'50%': { transform: 'translateY(-10px)' },
}
} }
}, },
}, },
apps/website/src/app/globals.css
+41 -34
View File
@@ -1,71 +1,78 @@
@import "tailwindcss"; @import "tailwindcss";
@theme { @theme {
/* Night Luxury color palette */ /* Memphis Pop-Art color palette */
--color-night-900: #0B0C10; --color-pop-pink: #FF69B4;
--color-night-800: #1F2833; --color-pop-yellow: #FFF200;
--color-night-700: #45A29E; --color-pop-orange: #FF8800;
--color-cyan-glow: #66FCF1; --color-pop-red: #FF3333;
--color-silver-metallic: #C5C6C7; --color-pop-cyan: #00FFFF;
--color-pop-green: #39FF14;
--color-pop-purple: #BA55D3;
--color-pop-bg: #FFF9E6;
--color-pop-black: #111111;
/* Brutalist Shadows */
--shadow-brutal: 6px 6px 0px 0px #111;
--shadow-brutal-hover: 2px 2px 0px 0px #111;
/* Custom animations */ /* Custom animations */
--animate-fade-in: fade-in 1.2s ease-out forwards; --animate-pop-in: pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
--animate-float: float 3s ease-in-out infinite; --animate-spin-slow: spin 8s linear infinite;
@keyframes fade-in { @keyframes pop-in {
0% { opacity: 0; transform: translateY(10px); } 0% { opacity: 0; transform: scale(0.8); }
100% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; transform: scale(1); }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-10px); }
} }
} }
@layer base { @layer base {
body { body {
@apply bg-night-900 text-silver-metallic font-sans antialiased; @apply bg-pop-bg text-pop-black font-sans antialiased;
background-image: background-image: radial-gradient(#111 2px, transparent 2px);
radial-gradient(at 0% 0%, rgba(31, 40, 51, 0.5) 0px, transparent 50%), background-size: 32px 32px;
radial-gradient(at 100% 100%, rgba(11, 12, 16, 1) 0px, transparent 50%); background-position: 0 0, 16px 16px;
min-height: 100vh; min-height: 100vh;
} }
h1, h2, h3, h4 { h1, h2, h3, h4 {
@apply text-white tracking-tight leading-none; @apply text-pop-black font-black uppercase tracking-tight;
} }
} }
@layer components { @layer components {
.glass { .brutal-box {
@apply bg-white/5 backdrop-blur-lg border border-white/10; @apply bg-white border-4 border-pop-black shadow-brutal transition-all duration-300;
} }
.glass-hover { .brutal-box-hover {
@apply transition-all duration-300 hover:bg-white/10 hover:border-white/20; @apply hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-brutal-hover;
} }
.text-glow { .brutal-button {
text-shadow: 0 0 15px rgba(102, 252, 241, 0.4); @apply px-8 py-4 bg-pop-yellow text-pop-black font-black uppercase border-4 border-pop-black shadow-brutal transition-all duration-200 hover:bg-pop-pink hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-brutal-hover;
}
.brutal-button-alt {
@apply px-8 py-4 bg-pop-cyan text-pop-black font-black uppercase border-4 border-pop-black shadow-brutal transition-all duration-200 hover:bg-pop-orange hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-brutal-hover;
} }
} }
/* Custom Scrollbar */ /* Custom Scrollbar */
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 8px; width: 12px;
} }
::-webkit-scrollbar-track { ::-webkit-scrollbar-track {
@apply bg-night-900; @apply bg-pop-bg border-l-4 border-pop-black;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
@apply bg-night-800 rounded-full border-2 border-night-900; @apply bg-pop-pink border-4 border-pop-black;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
@apply bg-night-700; @apply bg-pop-red;
} }
/* Smooth Scrolling */ /* Smooth Scrolling */
@@ -73,12 +80,12 @@ html {
scroll-behavior: smooth; scroll-behavior: smooth;
} }
/* Product Editorial Image Overrides (for ReactQuill Content) */ /* Product Editorial Image Overrides */
.product-editorial img { .product-editorial img {
width: 100%; width: 100%;
max-width: 480px; max-width: 480px;
margin: 2rem auto; margin: 2rem auto;
display: block; display: block;
border: 1px solid rgba(255, 255, 255, 0.1); border: 4px solid var(--color-pop-black);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5); box-shadow: var(--shadow-brutal);
} }
apps/website/src/app/page.tsx
+46 -54
View File
@@ -42,30 +42,32 @@ export default async function HomePage() {
]) ])
return ( return (
<div className="min-h-screen"> <div className="min-h-screen bg-pop-bg">
{/* Hero Section */} {/* Hero Section */}
<section className="relative w-full min-h-[90vh] md:min-h-0 md:aspect-video flex items-center justify-center overflow-hidden bg-night-950"> <section className="relative w-full min-h-[90vh] md:min-h-0 md:aspect-video flex items-center justify-center overflow-hidden bg-pop-yellow border-b-8 border-pop-black">
<div className="absolute inset-0 z-0"> <div className="absolute inset-0 z-0 opacity-20">
<img <img
src={hero?.imageUrl || "/images/hero.png"} src={hero?.imageUrl || "/images/hero.png"}
className="w-full h-full object-cover scale-[1.02] brightness-50" className="w-full h-full object-cover scale-[1.02] filter contrast-150 saturate-200"
alt="Hero Background" alt="Hero Background"
/> />
<div className="absolute inset-0 bg-gradient-to-t from-night-900 via-transparent to-night-900/50" />
</div> </div>
<div className="relative z-10 text-center space-y-6 px-4 animate-fade-in"> <div className="absolute top-10 left-10 w-32 h-32 bg-pop-pink rounded-full border-4 border-pop-black shadow-brutal animate-bounce z-0"></div>
<p className="text-cyan-glow uppercase tracking-[0.4em] text-sm font-semibold opacity-80"> <div className="absolute bottom-20 right-10 w-24 h-24 bg-pop-cyan border-4 border-pop-black shadow-brutal animate-spin-slow z-0"></div>
{hero?.tagline || "A New Paradigm of Calm"}
<div className="relative z-10 text-center space-y-6 px-4 animate-pop-in brutal-box p-12 bg-white max-w-4xl mx-auto rotate-[-2deg]">
<p className="bg-pop-pink text-pop-black inline-block px-4 py-2 font-black uppercase tracking-[0.2em] text-sm border-2 border-pop-black shadow-brutal">
{hero?.tagline || "Vibrant Memphis Pop-Art"}
</p> </p>
<h1 className="text-6xl md:text-8xl font-bold max-w-4xl text-glow leading-[1.1]"> <h1 className="text-6xl md:text-8xl font-black text-pop-black leading-[1.1] uppercase tracking-tighter">
{hero ? ( {hero ? (
hero.title.split('[').map((part, i) => { hero.title.split('[').map((part, i) => {
if (part.includes(']')) { if (part.includes(']')) {
const [accent, rest] = part.split(']') const [accent, rest] = part.split(']')
return ( return (
<span key={i}> <span key={i}>
<span className="text-transparent bg-clip-text bg-gradient-to-r from-white via-silver-metallic to-white/50 italic font-serif"> <span className="text-pop-cyan bg-pop-black px-2 shadow-[4px_4px_0_0_#FF69B4] inline-block -rotate-3 mx-2">
{accent} {accent}
</span> </span>
{rest} {rest}
@@ -77,75 +79,66 @@ export default async function HomePage() {
) : ( ) : (
<> <>
Inhale{' '} Inhale{' '}
<span className="text-transparent bg-clip-text bg-gradient-to-r from-white via-silver-metallic to-white/50 italic font-serif"> <span className="text-pop-cyan bg-pop-black px-2 shadow-[4px_4px_0_0_#FF69B4] inline-block -rotate-3 mx-2">
Serenity Serenity
</span> </span>
</> </>
)} )}
</h1> </h1>
<p className="text-slate-400 max-w-xl mx-auto text-lg md:text-xl font-light"> <p className="text-pop-black max-w-xl mx-auto text-lg md:text-xl font-bold bg-pop-yellow p-4 border-4 border-pop-black shadow-brutal rotate-[1deg]">
{hero?.description || "Crafting premium sensory experiences that transform your space into a sanctuary of peace."} {hero?.description || "Crafting premium sensory experiences that transform your space into a sanctuary of peace."}
</p> </p>
<div className="pt-8 flex flex-col sm:flex-row gap-4 justify-center"> <div className="pt-8 flex flex-col sm:flex-row gap-6 justify-center">
<Link <Link
href={hero?.buttonLink || "/shop"} href={hero?.buttonLink || "/shop"}
className="px-10 py-4 bg-white text-night-900 font-bold rounded-sm tracking-widest uppercase hover:bg-cyan-glow hover:shadow-[0_0_30px_rgba(102,252,241,0.5)] transition-all duration-500" className="brutal-button"
> >
{hero?.buttonText || "Explore Collection"} {hero?.buttonText || "Explore Collection"}
</Link> </Link>
<Link <Link
href="#categories" href="#categories"
className="px-10 py-4 glass text-white font-bold rounded-sm tracking-widest uppercase hover:bg-white/10 transition-all duration-300" className="brutal-button-alt"
> >
Learn More Learn More
</Link> </Link>
</div> </div>
</div> </div>
<div className="absolute bottom-10 left-1/2 -translate-x-1/2 animate-bounce opacity-40">
<div className="w-px h-16 bg-gradient-to-b from-white/0 via-white to-white/0" />
</div>
</section> </section>
{/* Categories Showcase */} {/* Categories Showcase */}
<section id="categories" className="bg-night-900 py-24 px-6"> <section id="categories" className="py-24 px-6 border-b-8 border-pop-black bg-pop-cyan relative overflow-hidden">
<div className="max-w-7xl mx-auto space-y-12"> <div className="absolute top-0 right-0 w-64 h-64 bg-pop-pink rounded-full border-8 border-pop-black shadow-brutal -translate-y-1/2 translate-x-1/2"></div>
<div className="text-center space-y-2"> <div className="max-w-7xl mx-auto space-y-12 relative z-10">
<p className="text-cyan-glow uppercase tracking-[0.3em] text-xs font-semibold opacity-70"> <div className="text-center space-y-4">
Our Range <h2 className="text-5xl md:text-7xl font-black tracking-tight uppercase inline-block bg-white px-6 py-2 border-4 border-pop-black shadow-brutal -rotate-2">
</p> The Categories
<h2 className="text-4xl font-bold tracking-tight uppercase">The Categories</h2> </h2>
<div className="w-12 h-px bg-cyan-glow mx-auto mt-3" />
</div> </div>
<div className="grid grid-cols-2 md:grid-cols-5 gap-4"> <div className="grid grid-cols-2 md:grid-cols-5 gap-6">
{categories.map((cat) => ( {categories.map((cat, idx) => (
<Link <Link
key={cat.id} key={cat.id}
href={`/category/${cat.id}`} href={`/category/${cat.id}`}
className="relative h-56 rounded-xl overflow-hidden group border-2 border-white/5 hover:border-cyan-glow/50 hover:shadow-[0_0_20px_rgba(102,252,241,0.15)] transition-all duration-500" className={`relative h-64 brutal-box group bg-pop-pink overflow-hidden ${idx % 2 === 0 ? 'rotate-1' : '-rotate-1'} hover:rotate-0`}
> >
<div className="absolute inset-0 bg-pop-black/20 group-hover:bg-transparent transition-colors z-10" />
<img <img
src={cat.imageUrl || getCategoryImage(cat.name)} src={cat.imageUrl || getCategoryImage(cat.name)}
className="absolute inset-0 w-full h-full object-cover grayscale opacity-40 group-hover:grayscale-0 group-hover:scale-110 group-hover:opacity-70 transition-all duration-700" className="absolute inset-0 w-full h-full object-cover mix-blend-multiply opacity-80 group-hover:scale-110 transition-transform duration-500"
alt={cat.name} alt={cat.name}
/> />
<div className="absolute inset-0 bg-gradient-to-t from-night-900/90 via-night-900/20 to-transparent" /> <div className="absolute inset-0 border-8 border-pop-black z-20 pointer-events-none" />
<div className="absolute bottom-0 left-0 right-0 p-4"> <div className="absolute bottom-4 left-4 right-4 z-30">
<span className="text-white font-bold tracking-wider uppercase text-xs block"> <span className="bg-white text-pop-black font-black uppercase text-lg px-3 py-1 border-2 border-pop-black shadow-[2px_2px_0_0_#111] inline-block group-hover:-translate-y-1 transition-transform">
{cat.name} {cat.name}
</span> </span>
{cat._count && ( {cat._count && (
<span className="text-cyan-glow/60 text-[10px] tracking-wider"> <span className="block mt-2 bg-pop-yellow text-pop-black text-xs font-bold px-2 py-1 border-2 border-pop-black w-max shadow-[2px_2px_0_0_#111]">
{cat._count.products} products {cat._count.products} products
</span> </span>
)} )}
</div> </div>
<div className="absolute top-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<svg className="w-5 h-5 text-cyan-glow" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17 8l4 4m0 0l-4 4m4-4H3" />
</svg>
</div>
</Link> </Link>
))} ))}
</div> </div>
@@ -153,26 +146,25 @@ export default async function HomePage() {
</section> </section>
{/* Featured Products */} {/* Featured Products */}
<section className="bg-night-900 py-24 px-6 border-t border-white/5"> <section className="bg-pop-pink py-24 px-6 relative">
<div className="max-w-7xl mx-auto space-y-12"> <div className="max-w-7xl mx-auto space-y-12 relative z-10">
<div className="flex justify-between items-end"> <div className="flex flex-col md:flex-row justify-between items-center gap-6">
<div className="space-y-2"> <h2 className="text-5xl md:text-7xl font-black uppercase bg-white px-6 py-2 border-4 border-pop-black shadow-brutal rotate-1">
<p className="text-cyan-glow uppercase tracking-[0.3em] text-xs font-semibold opacity-70"> Featured Picks
Top Picks </h2>
</p>
<h2 className="text-4xl font-bold">Featured Products</h2>
</div>
<Link <Link
href="/shop" href="/shop"
className="text-cyan-glow text-sm font-bold uppercase tracking-widest hover:underline decoration-cyan-glow/30" className="brutal-button bg-white hover:bg-pop-yellow"
> >
View All → View All
</Link> </Link>
</div> </div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8"> <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
{featuredProducts.map((p) => ( {featuredProducts.map((p, idx) => (
<ProductCard key={p.id} product={p} /> <div key={p.id} className={`${idx % 2 === 0 ? '-rotate-2' : 'rotate-2'} hover:rotate-0 transition-transform`}>
<ProductCard product={p} />
</div>
))} ))}
</div> </div>
</div> </div>