first commit

2026-04-15 22:37:39 +03:00
parent 3c59557946
commit 1590bef227
156 changed files with 13823 additions and 84 deletions
--- a/app/components/AccommodationCard.tsx
+++ b/app/components/AccommodationCard.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { resortData } from "@/src/data/resort";
+import { motion } from "framer-motion";
+import { useRef } from "react";
+
+interface AccommodationCardProps {
+  room: any;
+  lang: "tr";
+}
+
+const getCloudinaryUrl = (publicId: string, width = 1200) => {
+  if (!publicId) return "https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&q=80&w=1200";
+  return `https://res.cloudinary.com/du7xohbct/image/upload/q_auto,f_auto,w_${width}/${publicId}`;
+};
+
+export default function AccommodationCard({ room, lang }: AccommodationCardProps) {
+  const allImages = [
+    room.mainImageId,
+    ...(room.galleryImageIds || [])
+  ];
+
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  return (
+    <div className="flex flex-col w-full bg-[#ECE7E1] mb-12 shadow-sm">
+      {/* Precision Header Section */}
+      <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center px-10 py-12 gap-10">
+        
+        {/* Left: Title & Descriptions */}
+        <div className="flex-[2] space-y-3">
+          <h3 className="text-[#4F5B3A] text-2xl font-serif tracking-tight leading-none mb-1">
+            {room.name[lang]} <span className="text-sm font-sans opacity-60">({room.size})</span>
+          </h3>
+          <p className="text-[13px] leading-relaxed text-[#4F5B3A] opacity-90 font-light max-w-2xl">
+            {room.description[lang]}
+          </p>
+        </div>
+
+        {/* Right: Booking Button */}
+        <div className="flex-shrink-0 w-full lg:w-auto">
+          <Link 
+            href={`/accommodation/${room.slug}`}
+            className="block w-full lg:w-auto bg-[#C87E4B] hover:bg-[#A6693E] text-black px-12 py-4 text-[11px] font-bold tracking-[0.2em] rounded-md transition-all duration-300 transform hover:-translate-y-1 shadow-xl hover:shadow-[#C87E4B]/20 text-center uppercase"
+          >
+            Odayı İncele
+          </Link>
+        </div>
+      </div>
+
+      {/* DRAGGABLE SLIDER */}
+      <div 
+        style={{ height: '550px', position: 'relative', width: '100vw', left: '50%', right: '50%', marginLeft: '-50vw', marginRight: '-50vw' }}
+        className="overflow-hidden cursor-grab active:cursor-grabbing bg-zinc-200"
+      >
+        <motion.div 
+            ref={scrollRef}
+            drag="x"
+            dragConstraints={{ right: 80, left: -((allImages.length - 1) * 720) }}
+            className="flex h-full gap-4 px-[15vw]"
+        >
+            {allImages.map((id, idx) => (
+              <div 
+                key={`${id}-${idx}`}
+                style={{ height: '100%', position: 'relative', minWidth: '700px', flexShrink: 0 }}
+                className="rounded-sm overflow-hidden shadow-sm group"
+              >
+                <Image
+                  src={getCloudinaryUrl(id, 1200)}
+                  alt="Gallery"
+                  fill
+                  style={{ objectFit: 'cover' }}
+                  sizes="(max-width: 1024px) 100vw, 80vw"
+                  className="transition-transform duration-700 group-hover:scale-105 pointer-events-none"
+                  draggable={false}
+                  priority={idx < 2}
+                />
+              </div>
+            ))}
+        </motion.div>
+      </div>
+    </div>
+  );
+}