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/SplitSection.tsx
+++ b/app/components/SplitSection.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import Image from "next/image";
+import Link from "next/link";
+import { getCloudinaryUrl } from "@/src/lib/cloudinary";
+import { motion } from "framer-motion";
+
+interface SplitSectionProps {
+  title: string;
+  subtitle: string;
+  description: string;
+  mainImage: string;
+  secondImage: string;
+  href: string;
+  reverse?: boolean;
+}
+
+export default function SplitSection({
+  title,
+  subtitle,
+  description,
+  mainImage,
+  secondImage,
+  href,
+  reverse = false
+}: SplitSectionProps) {
+  return (
+    <section className={`flex flex-col ${reverse ? 'md:flex-row-reverse' : 'md:flex-row'} min-h-screen w-full bg-[#FAF9F6] overflow-hidden`}>
+      
+      {/* Text Side */}
+      <motion.div 
+        initial={{ opacity: 0, y: 50 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: true, margin: "-100px" }}
+        transition={{ duration: 0.8, ease: "easeOut" }}
+        className="w-full md:w-1/2 flex flex-col justify-center px-10 md:px-24 py-20"
+      >
+        <span className="text-gold text-xs tracking-[0.4em] font-bold uppercase mb-6 block">
+          {subtitle}
+        </span>
+        <h2 className="text-5xl md:text-7xl font-serif text-gray-900 leading-tight mb-8">
+          {title}
+        </h2>
+        <p className="text-gray-500 text-lg leading-relaxed max-w-md mb-12 font-light">
+          {description}
+        </p>
+        <div>
+          <Link 
+            href={href}
+            className="group relative inline-block overflow-hidden bg-[#C59D5F] text-white px-10 py-4 rounded-md text-[10px] font-bold tracking-widest transition-all hover:bg-gold uppercase active:scale-95"
+          >
+            <span className="relative z-10">KEŞFET</span>
+            <motion.div 
+              className="absolute inset-0 bg-white/20 -translate-x-full group-hover:translate-x-full transition-transform duration-700 ease-in-out"
+            />
+          </Link>
+        </div>
+      </motion.div>
+
+      {/* Image Side */}
+      <div className="w-full md:w-1/2 relative min-h-[500px] md:min-h-screen">
+        <motion.div 
+          initial={{ scale: 1.1, opacity: 0 }}
+          whileInView={{ scale: 1, opacity: 1 }}
+          viewport={{ once: true }}
+          transition={{ duration: 1.5, ease: "easeOut" }}
+          className="relative w-full h-full"
+        >
+          <Image
+            src={getCloudinaryUrl(mainImage, { width: 1200, height: 1600, crop: "fill" })}
+            alt={title}
+            fill
+            className="object-cover"
+          />
+        </motion.div>
+        
+        {/* Floating Secondary Image with Parallax-ish Scroll Effect */}
+        <motion.div 
+          initial={{ opacity: 0, x: reverse ? -100 : 100, y: 50 }}
+          whileInView={{ opacity: 1, x: reverse ? "-40px" : "40px", y: 0 }}
+          viewport={{ once: true }}
+          transition={{ duration: 1, delay: 0.4, ease: "easeOut" }}
+          className={`absolute bottom-20 ${reverse ? 'left-0' : 'right-0'} z-10 w-48 md:w-80 aspect-[3/4] shadow-2xl hidden md:block`}
+        >
+          <Image
+            src={getCloudinaryUrl(secondImage, { width: 600, height: 800, crop: "fill" })}
+            alt={`${title} detail`}
+            fill
+            className="object-cover border-[10px] border-white"
+          />
+        </motion.div>
+      </div>
+    </section>
+  );
+}