feat: clickable price cards open booking modal + smooth showcase transitions

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/ui/ShowcaseLayout.tsx

@@ -25,6 +25,18 @@ export function ShowcaseLayout<T>({
   const activeItemRef = useRef<HTMLButtonElement>(null);
   const detailRef = useRef<HTMLDivElement>(null);
   const [isUserInteracting, setIsUserInteracting] = useState(false);
+  const [displayIndex, setDisplayIndex] = useState(activeIndex);
+  const [fading, setFading] = useState(false);
+
+  useEffect(() => {
+    if (activeIndex === displayIndex) return;
+    setFading(true);
+    const timeout = setTimeout(() => {
+      setDisplayIndex(activeIndex);
+      setFading(false);
+    }, 250);
+    return () => clearTimeout(timeout);
+  }, [activeIndex, displayIndex]);
 
   // Auto-scroll selector only when item is out of view
   useEffect(() => {
@@ -105,12 +117,15 @@ export function ShowcaseLayout<T>({
       <div className="lg:w-[60%]">
         <div
           ref={detailRef}
-          key={activeIndex}
-          className="showcase-detail-enter"
+          className={`transition-all duration-300 ease-out ${
+            fading
+              ? "opacity-0 translate-y-2"
+              : "opacity-100 translate-y-0"
+          }`}
           onTouchStart={handleTouchStart}
           onTouchEnd={handleTouchEnd}
         >
-          {renderDetail(items[activeIndex], activeIndex)}
+          {renderDetail(items[displayIndex], displayIndex)}
         </div>
 
         {/* Counter */}