x

2026-06-07 17:17:01 +07:00
1 parent d325cd8763
commit c6bf2f70ac
@@ -0,0 +1,85 @@
+import { Link } from 'react-router-dom';
+import type { EditorialTileSectionPayload } from '@homaroma/types';
+
+interface DynamicEditorialTileProps {
+  payload: EditorialTileSectionPayload;
+}
+
+export default function DynamicEditorialTile({ payload }: DynamicEditorialTileProps) {
+  const {
+    title,
+    description,
+    imageUrl,
+    imagePosition = 'left',
+    buttonText,
+    buttonLink,
+    backgroundColor = '#FDFDF9', // Default to spa-light
+    textColor = '#1F3D2D' // Default to spa-forest
+  } = 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="w-full overflow-hidden py-16 md:py-24 px-6 md:px-16"
+      style={{ backgroundColor, color: textColor }}
+    >
+      <div className="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-12 md:gap-20 items-center">
+        {/* Image Column */}
+        <div className={`w-full overflow-hidden rounded-3xl shadow-xl aspect-square relative group ${
+          imagePosition === 'left' ? 'md:order-1' : 'md:order-2'
+        }`}>
+          <img 
+            src={imageUrl} 
+            alt={title}
+            className="w-full h-full object-cover transition-transform duration-700 ease-out group-hover:scale-105"
+            onError={(e) => {
+              (e.target as HTMLImageElement).style.display = 'none';
+            }}
+          />
+          {/* Subtle overlay */}
+          <div className="absolute inset-0 bg-neutral-900/5 mix-blend-overlay"></div>
+        </div>
+
+        {/* Content Column */}
+        <div className={`space-y-6 md:space-y-8 flex flex-col justify-center ${
+          imagePosition === 'left' ? 'md:order-2 md:pl-8' : 'md:order-1 md:pr-8'
+        }`}>
+          <h2 className="text-3xl md:text-5xl font-light leading-tight tracking-wide font-serif">
+            {renderTitle(title) || title}
+          </h2>
+          <div className="w-12 h-[1px] bg-spa-gold"></div>
+          <p className="text-sm md:text-base font-light leading-relaxed opacity-90 whitespace-pre-line">
+            {description}
+          </p>
+          {buttonText && buttonLink && (
+            <div className="pt-4">
+              <Link
+                to={buttonLink}
+                className="inline-block px-8 py-3.5 border border-current rounded-full font-bold uppercase tracking-widest text-xs hover:bg-spa-gold hover:border-spa-gold hover:text-white transition-all duration-300"
+              >
+                {buttonText}
+              </Link>
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}