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

fix(spa): complete checkout flow, UI standardization, and tailwind v4 styling fixes

Browse Source
This commit is contained in:
Your Name committed 2026-06-06 19:10:19 +07:00
1 parent 83df238bab
commit d8bff72e4e
24 files changed
+1169 -402
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/spa/src/pages/HomePage.tsx
+19 -14
View File
@@ -42,31 +42,33 @@ export default function HomePage() {
<Navbar categories={categories} />
{/* Hero Section */}
<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">
<section className="relative w-full min-h-[90vh] md:min-h-0 md:aspect-[21/9] flex items-center justify-center overflow-hidden bg-night-900">
<div className="absolute inset-0 z-0">
<img
src={hero?.imageUrl || "/images/hero.png"}
className="w-full h-full object-cover scale-[1.02] filter contrast-125 saturate-150"
className="w-full h-full object-cover scale-[1.02]"
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>
{/* Dark gradient overlay for premium vibe */}
<div className="absolute inset-0 bg-night-900/40"></div>
<div className="absolute inset-0 bg-gradient-to-t from-night-900/90 via-night-900/10 to-night-900/30"></div>
</div>
<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">
<div className="relative z-10 text-center space-y-6 px-8 animate-fade-in max-w-4xl w-full mx-auto mt-16 md:mt-0">
<p className="text-spa-sage font-semibold tracking-[0.3em] text-xs md:text-sm uppercase drop-shadow-md">
{hero?.tagline || "Vibrant Elegance Collection"}
</p>
<h1 className="text-5xl md:text-7xl font-bold text-pop-black leading-[1.1] tracking-tight max-w-3xl">
<h1 className="text-5xl md:text-7xl lg:text-8xl font-light text-white leading-tight tracking-wide drop-shadow-md font-serif">
{hero ? (
hero.title.split('[').map((part, i) => {
if (part.includes(']')) {
const [accent, rest] = part.split(']')
return (
<span key={i}>
<span className="text-pop-pink font-semibold">
<span className="text-spa-gold font-medium italic">
{accent}
</span>
{rest}
@@ -77,25 +79,28 @@ export default function HomePage() {
})
) : (
<>
Inhale <span className="text-pop-pink">Serenity</span>
Inhale <span className="text-spa-gold font-medium italic">Serenity</span>
</>
)}
</h1>
<p className="text-gray-600 max-w-xl text-lg md:text-xl font-normal pt-4 pb-6">
<p className="text-spa-light/90 max-w-2xl mx-auto text-lg md:text-xl font-light pt-4 pb-8 drop-shadow-md">
{hero?.description || "Crafting premium sensory experiences that transform your space into a sanctuary of peace."}
</p>
<div className="flex flex-col sm:flex-row gap-4 items-center md:justify-start justify-center">
<div className="flex flex-col sm:flex-row gap-6 items-center justify-center">
{/* White solid primary button */}
<Link
to={hero?.buttonLink || "/shop"}
className="brutal-button shadow-lg shadow-pop-pink/30"
className="px-8 py-4 bg-white text-spa-forest rounded-full font-bold uppercase tracking-widest text-sm hover:bg-spa-sage hover:shadow-xl transition-all duration-300"
>
{hero?.buttonText || "Explore Collection"}
</Link>
{/* Outline secondary link */}
<a
href="#categories"
className="px-8 py-4 text-pop-black font-medium hover:text-pop-pink transition-colors"
className="px-8 py-4 text-white font-medium uppercase tracking-widest text-sm hover:text-spa-gold flex items-center gap-2 group transition-colors"
>
Learn More
Learn More
<span className="group-hover:translate-x-1 transition-transform">&rarr;</span>
</a>
</div>
</div>