x

2026-06-07 17:17:01 +07:00
1 parent d325cd8763
commit c6bf2f70ac
@@ -0,0 +1,77 @@
+import { Link } from 'react-router-dom';
+import type { HeroSectionPayload } from '@homaroma/types';
+
+interface DynamicHeroProps {
+  payload: HeroSectionPayload;
+}
+
+export default function DynamicHero({ payload }: DynamicHeroProps) {
+  const { tagline, title, description, imageUrl, buttonText, buttonLink } = payload;
+
+  const renderTitle = (text: string) => {
+    if (!text) return null;
+    return text.split('[').map((part, i) => {
+      if (part.includes(']')) {
+        const [accent, rest] = part.split(']');
+        return (
+          <span key={i}>
+            <span className="text-spa-gold font-medium italic">
+              {accent}
+            </span>
+            {rest}
+          </span>
+        );
+      }
+      return <span key={i}>{part}</span>;
+    });
+  };
+
+  return (
+    <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={imageUrl || "/images/hero.png"}
+          className="w-full h-full object-cover scale-[1.02]"
+          alt="Hero Background"
+          onError={(e) => {
+            (e.target as HTMLImageElement).style.display = 'none';
+          }}
+        />
+        {/* Dark gradient overlay for premium vibe */}
+        <div className="absolute inset-0 bg-neutral-900/40"></div>
+        <div className="absolute inset-0 bg-gradient-to-t from-neutral-900/90 via-neutral-900/10 to-neutral-900/30"></div>
+      </div>
+
+      <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">
+          {tagline || "Vibrant Elegance Collection"}
+        </p>
+        <h1 className="text-5xl md:text-7xl lg:text-8xl font-light text-white leading-tight tracking-wide drop-shadow-md font-serif">
+          {renderTitle(title) || (
+            <>
+              Inhale <span className="text-spa-gold font-medium italic">Serenity</span>
+            </>
+          )}
+        </h1>
+        <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">
+          {description}
+        </p>
+        <div className="flex flex-col sm:flex-row gap-6 items-center justify-center">
+          <Link
+            to={buttonLink || "/shop"}
+            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"
+          >
+            {buttonText || "Explore Collection"}
+          </Link>
+          <a
+            href="#categories"
+            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 
+            <span className="group-hover:translate-x-1 transition-transform">&rarr;</span>
+          </a>
+        </div>
+      </div>
+    </section>
+  );
+}