x

2026-06-07 17:17:01 +07:00
1 parent d325cd8763
commit c6bf2f70ac
@@ -0,0 +1,54 @@
+import { Link } from 'react-router-dom';
+import type { BannerSectionPayload } from '@homaroma/types';
+
+interface DynamicBannerProps {
+  payload: BannerSectionPayload;
+}
+
+export default function DynamicBanner({ payload }: DynamicBannerProps) {
+  const { imageUrl, linkUrl, title, description, buttonText } = payload;
+
+  const Wrapper = linkUrl ? Link : 'div';
+  const wrapperProps = linkUrl ? { to: linkUrl } : {};
+
+  return (
+    <section className="py-16 px-6 bg-white relative overflow-hidden">
+      <Wrapper
+        {...(wrapperProps as any)}
+        className={`max-w-7xl mx-auto block brutal-box group overflow-hidden relative min-h-[350px] md:min-h-[400px] rounded-3xl cursor-${linkUrl ? 'pointer' : 'default'}`}
+      >
+        {/* Background Image */}
+        <div className="absolute inset-0 z-0">
+          <img
+            src={imageUrl}
+            className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-[1.03]"
+            alt={title || "Banner"}
+          />
+          {/* Overlay gradient */}
+          <div className="absolute inset-0 bg-gradient-to-r from-spa-forest/80 via-spa-forest/40 to-transparent"></div>
+        </div>
+
+        {/* Content */}
+        <div className="absolute inset-0 z-10 flex flex-col justify-center p-8 md:p-16 max-w-xl text-white space-y-4">
+          {title && (
+            <h3 className="text-3xl md:text-5xl font-serif font-light text-spa-gold leading-tight">
+              {title}
+            </h3>
+          )}
+          {description && (
+            <p className="text-spa-light/95 font-light text-base md:text-lg">
+              {description}
+            </p>
+          )}
+          {buttonText && linkUrl && (
+            <div className="pt-4">
+              <span className="inline-block px-8 py-3 bg-white text-spa-forest font-semibold rounded-full tracking-wider text-sm shadow-lg group-hover:bg-spa-sage transition-all duration-300">
+                {buttonText}
+              </span>
+            </div>
+          )}
+        </div>
+      </Wrapper>
+    </section>
+  );
+}