From 90136e5289851e1a3fa7b958cd82dc5ad479f85d Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Wed, 3 Jun 2026 17:51:08 +0700
Subject: [PATCH] x

---
 apps/spa/src/index.css           | 58 ++++++++++-----------
 apps/spa/src/pages/HomePage.tsx  | 88 +++++++++++++++-----------------
 apps/spa/tailwind.config.js      | 30 +++++------
 apps/website/src/app/globals.css | 58 ++++++++++-----------
 apps/website/src/app/page.tsx    | 82 ++++++++++++++---------------
 5 files changed, 150 insertions(+), 166 deletions(-)

diff --git a/apps/spa/src/index.css b/apps/spa/src/index.css
index 741850b..8f629b2 100644
--- a/apps/spa/src/index.css
+++ b/apps/spa/src/index.css
@@ -1,78 +1,74 @@
 @import "tailwindcss";
 
 @theme {
-  /* Memphis Pop-Art color palette */
-  --color-pop-pink: #FF69B4;
+  --color-pop-pink: #FF6B6B;
   --color-pop-yellow: #FFF200;
-  --color-pop-orange: #FF8800;
-  --color-pop-red: #FF3333;
-  --color-pop-cyan: #00FFFF;
-  --color-pop-green: #39FF14;
-  --color-pop-purple: #BA55D3;
-  --color-pop-bg: #FFF9E6;
-  --color-pop-black: #111111;
+  --color-pop-orange: #FFA07A;
+  --color-pop-red: #FF4500;
+  --color-pop-cyan: #E0FFFF;
+  --color-pop-green: #98FB98;
+  --color-pop-purple: #D8BFD8;
+  --color-pop-bg: #FFF0F5;
+  --color-pop-black: #333333;
 
-  /* Brutalist Shadows */
-  --shadow-brutal: 6px 6px 0px 0px #111;
-  --shadow-brutal-hover: 2px 2px 0px 0px #111;
+  --shadow-brutal: 0 10px 25px rgba(0,0,0,0.05);
+  --shadow-brutal-hover: 0 20px 40px rgba(0,0,0,0.1);
   
-  /* Custom animations */
-  --animate-pop-in: pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
-  --animate-spin-slow: spin 8s linear infinite;
+  --animate-pop-in: fade-in-up 0.6s ease-out forwards;
+  --animate-spin-slow: spin 15s linear infinite;
 
-  @keyframes pop-in {
-    0% { opacity: 0; transform: scale(0.8); }
-    100% { opacity: 1; transform: scale(1); }
+  @keyframes fade-in-up {
+    0% { opacity: 0; transform: translateY(20px); }
+    100% { opacity: 1; transform: translateY(0); }
   }
 }
 
 @layer base {
   body {
     @apply bg-pop-bg text-pop-black font-sans antialiased;
-    background-image: radial-gradient(#111 2px, transparent 2px);
-    background-size: 32px 32px;
-    background-position: 0 0, 16px 16px;
+    background-image: radial-gradient(circle at top right, rgba(255,107,107,0.15), transparent 40%),
+                      radial-gradient(circle at bottom left, rgba(255,160,122,0.15), transparent 40%);
     min-height: 100vh;
   }
 
   h1, h2, h3, h4 {
-    @apply text-pop-black font-black uppercase tracking-tight;
+    @apply text-pop-black font-semibold tracking-tight;
   }
 }
 
 @layer components {
   .brutal-box {
-    @apply bg-white border-4 border-pop-black shadow-brutal transition-all duration-300;
+    @apply bg-white border border-gray-100 rounded-2xl shadow-brutal transition-all duration-300;
   }
   
   .brutal-box-hover {
-    @apply hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-brutal-hover;
+    @apply hover:-translate-y-2 hover:shadow-brutal-hover;
   }
 
   .brutal-button {
-    @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;
+    @apply px-8 py-4 bg-pop-pink text-white font-medium rounded-full shadow-brutal transition-all duration-300 hover:bg-pop-red hover:-translate-y-1 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;
+    @apply px-8 py-4 bg-white text-pop-pink font-medium rounded-full border border-pop-pink shadow-brutal transition-all duration-300 hover:bg-pop-bg hover:-translate-y-1 hover:shadow-brutal-hover;
   }
 }
 
 /* Custom Scrollbar */
 ::-webkit-scrollbar {
-  width: 12px;
+  width: 8px;
 }
 
 ::-webkit-scrollbar-track {
-  @apply bg-pop-bg border-l-4 border-pop-black;
+  @apply bg-pop-bg;
 }
 
 ::-webkit-scrollbar-thumb {
-  @apply bg-pop-pink border-4 border-pop-black;
+  @apply bg-gray-300 rounded-full;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  @apply bg-pop-red;
+  @apply bg-gray-400;
 }
 
 /* Smooth Scrolling */
@@ -86,6 +82,6 @@ html {
   max-width: 480px;
   margin: 2rem auto;
   display: block;
-  border: 4px solid var(--color-pop-black);
+  border-radius: 16px;
   box-shadow: var(--shadow-brutal);
 }
diff --git a/apps/spa/src/pages/HomePage.tsx b/apps/spa/src/pages/HomePage.tsx
index aad1adc..ac45955 100644
--- a/apps/spa/src/pages/HomePage.tsx
+++ b/apps/spa/src/pages/HomePage.tsx
@@ -42,33 +42,31 @@ export default function HomePage() {
       <Navbar categories={categories} />
 
       {/* 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-pop-yellow border-b-8 border-pop-black">
-        <div className="absolute inset-0 z-0 opacity-20">
+      <section className="relative w-full min-h-[90vh] md:min-h-0 md:aspect-[21/9] flex items-center justify-center overflow-hidden bg-white">
+        <div className="absolute inset-0 z-0 opacity-40">
           <img
             src={hero?.imageUrl || "/images/hero.png"}
-            className="w-full h-full object-cover scale-[1.02] filter contrast-150 saturate-200"
+            className="w-full h-full object-cover scale-[1.02] filter contrast-125 saturate-150"
             alt="Hero Background"
             onError={(e) => {
               (e.target as HTMLImageElement).style.display = 'none'
             }}
           />
+          <div className="absolute inset-0 bg-gradient-to-r from-pop-bg/80 to-transparent"></div>
         </div>
 
-        <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>
-        <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>
-
-        <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"}
+        <div className="relative z-10 text-center md:text-left space-y-6 px-8 animate-pop-in max-w-6xl w-full mx-auto">
+          <p className="text-pop-pink font-semibold tracking-[0.2em] text-sm uppercase">
+            {hero?.tagline || "Vibrant Elegance Collection"}
           </p>
-          <h1 className="text-6xl md:text-8xl font-black text-pop-black leading-[1.1] uppercase tracking-tighter">
+          <h1 className="text-5xl md:text-7xl font-bold text-pop-black leading-[1.1] tracking-tight max-w-3xl">
             {hero ? (
               hero.title.split('[').map((part, i) => {
                 if (part.includes(']')) {
                   const [accent, rest] = part.split(']')
                   return (
                     <span key={i}>
-                      <span className="text-pop-cyan bg-pop-black px-2 shadow-[4px_4px_0_0_#FF69B4] inline-block -rotate-3 mx-2">
+                      <span className="text-pop-pink font-semibold">
                         {accent}
                       </span>
                       {rest}
@@ -79,26 +77,23 @@ export default function HomePage() {
               })
             ) : (
               <>
-                Inhale{' '}
-                <span className="text-pop-cyan bg-pop-black px-2 shadow-[4px_4px_0_0_#FF69B4] inline-block -rotate-3 mx-2">
-                  Serenity
-                </span>
+                Inhale <span className="text-pop-pink">Serenity</span>
               </>
             )}
           </h1>
-          <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]">
+          <p className="text-gray-600 max-w-xl text-lg md:text-xl font-normal pt-4 pb-6">
             {hero?.description || "Crafting premium sensory experiences that transform your space into a sanctuary of peace."}
           </p>
-          <div className="pt-8 flex flex-col sm:flex-row gap-6 justify-center">
+          <div className="flex flex-col sm:flex-row gap-4 items-center md:justify-start justify-center">
             <Link
               to={hero?.buttonLink || "/shop"}
-              className="brutal-button"
+              className="brutal-button shadow-lg shadow-pop-pink/30"
             >
               {hero?.buttonText || "Explore Collection"}
             </Link>
             <a
               href="#categories"
-              className="brutal-button-alt"
+              className="px-8 py-4 text-pop-black font-medium hover:text-pop-pink transition-colors"
             >
               Learn More
             </a>
@@ -107,44 +102,43 @@ export default function HomePage() {
       </section>
 
       {/* Categories Showcase */}
-      <section id="categories" className="py-24 px-6 border-b-8 border-pop-black bg-pop-cyan relative overflow-hidden">
-        <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="max-w-7xl mx-auto space-y-12 relative z-10">
+      <section id="categories" className="py-24 px-6 relative overflow-hidden bg-white">
+        <div className="max-w-7xl mx-auto space-y-16 relative z-10">
           <div className="text-center space-y-4">
-            <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">
-              The Categories
+            <h2 className="text-4xl md:text-5xl font-bold tracking-tight text-pop-black">
+              Our Collections
             </h2>
+            <p className="text-gray-500 max-w-2xl mx-auto">Discover the perfect scent for every moment</p>
           </div>
 
           {loading ? (
             <div className="grid grid-cols-2 md:grid-cols-5 gap-6">
               {Array.from({ length: 5 }).map((_, i) => (
-                <div key={i} className="h-64 brutal-box bg-white/5 animate-pulse" />
+                <div key={i} className="h-80 brutal-box bg-gray-50 animate-pulse" />
               ))}
             </div>
           ) : (
             <div className="grid grid-cols-2 md:grid-cols-5 gap-6">
-              {categories.map((cat, idx) => (
+              {categories.map((cat) => (
                 <Link
                   key={cat.id}
                   to={`/category/${cat.id}`}
-                  className={`relative h-64 brutal-box group bg-pop-pink overflow-hidden ${idx % 2 === 0 ? 'rotate-1' : '-rotate-1'} hover:rotate-0`}
+                  className="relative h-80 rounded-2xl group overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300"
                 >
-                  <div className="absolute inset-0 bg-pop-black/20 group-hover:bg-transparent transition-colors z-10" />
+                  <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent z-10 opacity-80 group-hover:opacity-100 transition-opacity" />
                   <img
                     src={getCategoryImage(cat.name)}
-                    className="absolute inset-0 w-full h-full object-cover mix-blend-multiply opacity-80 group-hover:scale-110 transition-transform duration-500"
+                    className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                     alt={cat.name}
                     onError={(e) => { (e.target as HTMLImageElement).style.display = 'none' }}
                   />
-                  <div className="absolute inset-0 border-8 border-pop-black z-20 pointer-events-none" />
-                  <div className="absolute bottom-4 left-4 right-4 z-30">
-                    <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">
+                  <div className="absolute bottom-6 left-6 right-6 z-20 text-white">
+                    <span className="font-semibold text-xl block mb-1">
                       {cat.name}
                     </span>
                     {cat._count && (
-                      <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
+                      <span className="text-sm font-medium text-white/80">
+                        {cat._count.products} Products
                       </span>
                     )}
                   </div>
@@ -156,30 +150,32 @@ export default function HomePage() {
       </section>
 
       {/* Featured Products */}
-      <section className="bg-pop-pink py-24 px-6 relative">
+      <section className="bg-pop-bg py-24 px-6 relative">
         <div className="max-w-7xl mx-auto space-y-12 relative z-10">
-          <div className="flex flex-col md:flex-row justify-between items-center gap-6">
-            <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">
-              Featured Picks
-            </h2>
+          <div className="flex flex-col md:flex-row justify-between items-end gap-6 border-b border-gray-200 pb-6">
+            <div>
+              <h2 className="text-4xl md:text-5xl font-bold text-pop-black">
+                Featured Picks
+              </h2>
+            </div>
             <Link
               to="/shop"
-              className="brutal-button bg-white hover:bg-pop-yellow"
+              className="text-pop-pink font-medium hover:text-pop-red transition-colors flex items-center gap-2"
             >
-              View All
+              View All Collection &rarr;
             </Link>
           </div>
 
           {loading ? (
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
               {Array.from({ length: 3 }).map((_, i) => (
-                <div key={i} className="brutal-box bg-white/5 animate-pulse h-96" />
+                <div key={i} className="brutal-box bg-white animate-pulse h-96" />
               ))}
             </div>
           ) : (
-            <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
-              {featuredProducts.map((p, idx) => (
-                <div key={p.id} className={`${idx % 2 === 0 ? '-rotate-2' : 'rotate-2'} hover:rotate-0 transition-transform`}>
+            <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+              {featuredProducts.map((p) => (
+                <div key={p.id}>
                   <ProductCard product={p} />
                 </div>
               ))}
diff --git a/apps/spa/tailwind.config.js b/apps/spa/tailwind.config.js
index f9e264e..f6a0d19 100644
--- a/apps/spa/tailwind.config.js
+++ b/apps/spa/tailwind.config.js
@@ -8,29 +8,29 @@ export default {
     extend: {
       colors: {
         pop: {
-          pink: "#FF69B4",
+          pink: "#FF6B6B",
           yellow: "#FFF200",
-          orange: "#FF8800",
-          red: "#FF3333",
-          cyan: "#00FFFF",
-          green: "#39FF14",
-          purple: "#BA55D3",
-          bg: "#FFF9E6",
-          black: "#111111",
+          orange: "#FFA07A",
+          red: "#FF4500",
+          cyan: "#E0FFFF",
+          green: "#98FB98",
+          purple: "#D8BFD8",
+          bg: "#FFF0F5",
+          black: "#333333",
         },
       },
       boxShadow: {
-        'brutal': '6px 6px 0px 0px #111',
-        'brutal-hover': '2px 2px 0px 0px #111',
+        'brutal': '0 10px 25px rgba(0,0,0,0.05)',
+        'brutal-hover': '0 20px 40px rgba(0,0,0,0.1)',
       },
       animation: {
-        'pop-in': 'pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards',
-        'spin-slow': 'spin 8s linear infinite',
+        'pop-in': 'fade-in-up 0.6s ease-out forwards',
+        'spin-slow': 'spin 15s linear infinite',
       },
       keyframes: {
-        'pop-in': {
-          '0%': { opacity: '0', transform: 'scale(0.8)' },
-          '100%': { opacity: '1', transform: 'scale(1)' },
+        'fade-in-up': {
+          '0%': { opacity: '0', transform: 'translateY(20px)' },
+          '100%': { opacity: '1', transform: 'translateY(0)' },
         },
       }
     },
diff --git a/apps/website/src/app/globals.css b/apps/website/src/app/globals.css
index 741850b..8f629b2 100644
--- a/apps/website/src/app/globals.css
+++ b/apps/website/src/app/globals.css
@@ -1,78 +1,74 @@
 @import "tailwindcss";
 
 @theme {
-  /* Memphis Pop-Art color palette */
-  --color-pop-pink: #FF69B4;
+  --color-pop-pink: #FF6B6B;
   --color-pop-yellow: #FFF200;
-  --color-pop-orange: #FF8800;
-  --color-pop-red: #FF3333;
-  --color-pop-cyan: #00FFFF;
-  --color-pop-green: #39FF14;
-  --color-pop-purple: #BA55D3;
-  --color-pop-bg: #FFF9E6;
-  --color-pop-black: #111111;
+  --color-pop-orange: #FFA07A;
+  --color-pop-red: #FF4500;
+  --color-pop-cyan: #E0FFFF;
+  --color-pop-green: #98FB98;
+  --color-pop-purple: #D8BFD8;
+  --color-pop-bg: #FFF0F5;
+  --color-pop-black: #333333;
 
-  /* Brutalist Shadows */
-  --shadow-brutal: 6px 6px 0px 0px #111;
-  --shadow-brutal-hover: 2px 2px 0px 0px #111;
+  --shadow-brutal: 0 10px 25px rgba(0,0,0,0.05);
+  --shadow-brutal-hover: 0 20px 40px rgba(0,0,0,0.1);
   
-  /* Custom animations */
-  --animate-pop-in: pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
-  --animate-spin-slow: spin 8s linear infinite;
+  --animate-pop-in: fade-in-up 0.6s ease-out forwards;
+  --animate-spin-slow: spin 15s linear infinite;
 
-  @keyframes pop-in {
-    0% { opacity: 0; transform: scale(0.8); }
-    100% { opacity: 1; transform: scale(1); }
+  @keyframes fade-in-up {
+    0% { opacity: 0; transform: translateY(20px); }
+    100% { opacity: 1; transform: translateY(0); }
   }
 }
 
 @layer base {
   body {
     @apply bg-pop-bg text-pop-black font-sans antialiased;
-    background-image: radial-gradient(#111 2px, transparent 2px);
-    background-size: 32px 32px;
-    background-position: 0 0, 16px 16px;
+    background-image: radial-gradient(circle at top right, rgba(255,107,107,0.15), transparent 40%),
+                      radial-gradient(circle at bottom left, rgba(255,160,122,0.15), transparent 40%);
     min-height: 100vh;
   }
 
   h1, h2, h3, h4 {
-    @apply text-pop-black font-black uppercase tracking-tight;
+    @apply text-pop-black font-semibold tracking-tight;
   }
 }
 
 @layer components {
   .brutal-box {
-    @apply bg-white border-4 border-pop-black shadow-brutal transition-all duration-300;
+    @apply bg-white border border-gray-100 rounded-2xl shadow-brutal transition-all duration-300;
   }
   
   .brutal-box-hover {
-    @apply hover:translate-x-[4px] hover:translate-y-[4px] hover:shadow-brutal-hover;
+    @apply hover:-translate-y-2 hover:shadow-brutal-hover;
   }
 
   .brutal-button {
-    @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;
+    @apply px-8 py-4 bg-pop-pink text-white font-medium rounded-full shadow-brutal transition-all duration-300 hover:bg-pop-red hover:-translate-y-1 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;
+    @apply px-8 py-4 bg-white text-pop-pink font-medium rounded-full border border-pop-pink shadow-brutal transition-all duration-300 hover:bg-pop-bg hover:-translate-y-1 hover:shadow-brutal-hover;
   }
 }
 
 /* Custom Scrollbar */
 ::-webkit-scrollbar {
-  width: 12px;
+  width: 8px;
 }
 
 ::-webkit-scrollbar-track {
-  @apply bg-pop-bg border-l-4 border-pop-black;
+  @apply bg-pop-bg;
 }
 
 ::-webkit-scrollbar-thumb {
-  @apply bg-pop-pink border-4 border-pop-black;
+  @apply bg-gray-300 rounded-full;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  @apply bg-pop-red;
+  @apply bg-gray-400;
 }
 
 /* Smooth Scrolling */
@@ -86,6 +82,6 @@ html {
   max-width: 480px;
   margin: 2rem auto;
   display: block;
-  border: 4px solid var(--color-pop-black);
+  border-radius: 16px;
   box-shadow: var(--shadow-brutal);
 }
diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
index 272fc06..8dd9a9f 100644
--- a/apps/website/src/app/page.tsx
+++ b/apps/website/src/app/page.tsx
@@ -44,30 +44,28 @@ export default async function HomePage() {
   return (
     <div className="min-h-screen bg-pop-bg">
       {/* 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-pop-yellow border-b-8 border-pop-black">
-        <div className="absolute inset-0 z-0 opacity-20">
+      <section className="relative w-full min-h-[90vh] md:min-h-0 md:aspect-[21/9] flex items-center justify-center overflow-hidden bg-white">
+        <div className="absolute inset-0 z-0 opacity-40">
           <img
             src={hero?.imageUrl || "/images/hero.png"}
-            className="w-full h-full object-cover scale-[1.02] filter contrast-150 saturate-200"
+            className="w-full h-full object-cover scale-[1.02] filter contrast-125 saturate-150"
             alt="Hero Background"
           />
+          <div className="absolute inset-0 bg-gradient-to-r from-pop-bg/80 to-transparent"></div>
         </div>
 
-        <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>
-        <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>
-
-        <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"}
+        <div className="relative z-10 text-center md:text-left space-y-6 px-8 animate-pop-in max-w-6xl w-full mx-auto">
+          <p className="text-pop-pink font-semibold tracking-[0.2em] text-sm uppercase">
+            {hero?.tagline || "Vibrant Elegance Collection"}
           </p>
-          <h1 className="text-6xl md:text-8xl font-black text-pop-black leading-[1.1] uppercase tracking-tighter">
+          <h1 className="text-5xl md:text-7xl font-bold text-pop-black leading-[1.1] tracking-tight max-w-3xl">
             {hero ? (
               hero.title.split('[').map((part, i) => {
                 if (part.includes(']')) {
                   const [accent, rest] = part.split(']')
                   return (
                     <span key={i}>
-                      <span className="text-pop-cyan bg-pop-black px-2 shadow-[4px_4px_0_0_#FF69B4] inline-block -rotate-3 mx-2">
+                      <span className="text-pop-pink font-semibold">
                         {accent}
                       </span>
                       {rest}
@@ -78,26 +76,23 @@ export default async function HomePage() {
               })
             ) : (
               <>
-                Inhale{' '}
-                <span className="text-pop-cyan bg-pop-black px-2 shadow-[4px_4px_0_0_#FF69B4] inline-block -rotate-3 mx-2">
-                  Serenity
-                </span>
+                Inhale <span className="text-pop-pink">Serenity</span>
               </>
             )}
           </h1>
-          <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]">
+          <p className="text-gray-600 max-w-xl text-lg md:text-xl font-normal pt-4 pb-6">
             {hero?.description || "Crafting premium sensory experiences that transform your space into a sanctuary of peace."}
           </p>
-          <div className="pt-8 flex flex-col sm:flex-row gap-6 justify-center">
+          <div className="flex flex-col sm:flex-row gap-4 items-center md:justify-start justify-center">
             <Link
               href={hero?.buttonLink || "/shop"}
-              className="brutal-button"
+              className="brutal-button shadow-lg shadow-pop-pink/30"
             >
               {hero?.buttonText || "Explore Collection"}
             </Link>
             <Link
               href="#categories"
-              className="brutal-button-alt"
+              className="px-8 py-4 text-pop-black font-medium hover:text-pop-pink transition-colors"
             >
               Learn More
             </Link>
@@ -106,36 +101,35 @@ export default async function HomePage() {
       </section>
 
       {/* Categories Showcase */}
-      <section id="categories" className="py-24 px-6 border-b-8 border-pop-black bg-pop-cyan relative overflow-hidden">
-        <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="max-w-7xl mx-auto space-y-12 relative z-10">
+      <section id="categories" className="py-24 px-6 relative overflow-hidden bg-white">
+        <div className="max-w-7xl mx-auto space-y-16 relative z-10">
           <div className="text-center space-y-4">
-            <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">
-              The Categories
+            <h2 className="text-4xl md:text-5xl font-bold tracking-tight text-pop-black">
+              Our Collections
             </h2>
+            <p className="text-gray-500 max-w-2xl mx-auto">Discover the perfect scent for every moment</p>
           </div>
 
           <div className="grid grid-cols-2 md:grid-cols-5 gap-6">
-            {categories.map((cat, idx) => (
+            {categories.map((cat) => (
               <Link
                 key={cat.id}
                 href={`/category/${cat.id}`}
-                className={`relative h-64 brutal-box group bg-pop-pink overflow-hidden ${idx % 2 === 0 ? 'rotate-1' : '-rotate-1'} hover:rotate-0`}
+                className="relative h-80 rounded-2xl group overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300"
               >
-                <div className="absolute inset-0 bg-pop-black/20 group-hover:bg-transparent transition-colors z-10" />
+                <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent z-10 opacity-80 group-hover:opacity-100 transition-opacity" />
                 <img
                   src={cat.imageUrl || getCategoryImage(cat.name)}
-                  className="absolute inset-0 w-full h-full object-cover mix-blend-multiply opacity-80 group-hover:scale-110 transition-transform duration-500"
+                  className="absolute inset-0 w-full h-full object-cover group-hover:scale-105 transition-transform duration-700"
                   alt={cat.name}
                 />
-                <div className="absolute inset-0 border-8 border-pop-black z-20 pointer-events-none" />
-                <div className="absolute bottom-4 left-4 right-4 z-30">
-                  <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">
+                <div className="absolute bottom-6 left-6 right-6 z-20 text-white">
+                  <span className="font-semibold text-xl block mb-1">
                     {cat.name}
                   </span>
                   {cat._count && (
-                    <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
+                    <span className="text-sm font-medium text-white/80">
+                      {cat._count.products} Products
                     </span>
                   )}
                 </div>
@@ -146,23 +140,25 @@ export default async function HomePage() {
       </section>
 
       {/* Featured Products */}
-      <section className="bg-pop-pink py-24 px-6 relative">
+      <section className="bg-pop-bg py-24 px-6 relative">
         <div className="max-w-7xl mx-auto space-y-12 relative z-10">
-          <div className="flex flex-col md:flex-row justify-between items-center gap-6">
-            <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">
-              Featured Picks
-            </h2>
+          <div className="flex flex-col md:flex-row justify-between items-end gap-6 border-b border-gray-200 pb-6">
+            <div>
+              <h2 className="text-4xl md:text-5xl font-bold text-pop-black">
+                Featured Picks
+              </h2>
+            </div>
             <Link
               href="/shop"
-              className="brutal-button bg-white hover:bg-pop-yellow"
+              className="text-pop-pink font-medium hover:text-pop-red transition-colors flex items-center gap-2"
             >
-              View All
+              View All Collection &rarr;
             </Link>
           </div>
 
-          <div className="grid grid-cols-1 md:grid-cols-3 gap-10">
-            {featuredProducts.map((p, idx) => (
-              <div key={p.id} className={`${idx % 2 === 0 ? '-rotate-2' : 'rotate-2'} hover:rotate-0 transition-transform`}>
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+            {featuredProducts.map((p) => (
+              <div key={p.id}>
                 <ProductCard product={p} />
               </div>
             ))}