96 lines
3.2 KiB
TypeScript
96 lines
3.2 KiB
TypeScript
"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>
|
|
);
|
|
}
|