102 lines
4.2 KiB
JavaScript
102 lines
4.2 KiB
JavaScript
import Button from "@mui/material/Button";
|
|
import { motion } from "framer-motion";
|
|
import React from "react";
|
|
|
|
const ThreeDMarquee = ({ images = [], className = "", cols = 4, onImageClick }) => {
|
|
// Clone the image list twice
|
|
const duplicatedImages = [...images, ...images];
|
|
|
|
const groupSize = Math.ceil(duplicatedImages.length / cols);
|
|
const imageGroups = Array.from({ length: cols }, (_, index) =>
|
|
duplicatedImages.slice(index * groupSize, (index + 1) * groupSize)
|
|
);
|
|
|
|
const handleImageClick = (image, globalIndex) => {
|
|
if (onImageClick) {
|
|
onImageClick(image, globalIndex);
|
|
} else if (image.href) {
|
|
window.open(image.href, image.target || "_self");
|
|
}
|
|
};
|
|
|
|
return (
|
|
<section
|
|
className={`mx-auto block h-[680px] max-sm:h-[400px] rounded-[10px]
|
|
overflow-hidden bg-[#034E08] relative ${className} max-w-[1400px] ` }
|
|
|
|
style={{background: "linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(2, 77, 14, 1) 70%)"}}
|
|
>
|
|
<div className="absolute bottom-0 left-0 w-full h-[300px] " style={{background: "linear-gradient(rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 70%)"}} />
|
|
<div className="absolute top-0 left-0 w-full h-[200px] " style={{background: "linear-gradient(rgba(255, 255, 255, 0.88) 10%, rgba(255, 255, 255, 0) 70% )"}} />
|
|
<div className="text-white rounded-[0px] md:rounded-[10px] p-[20px] absolute md:top-[40%] md:left-[30%] w-full md:max-w-[600px] h-[100%] md:h-[230px] z-9 backdrop-blur-[5px] bg-[#a7071099]">
|
|
|
|
<h2 className="text-center text-[45px] font-900 pb-2">Now, chat for free !</h2>
|
|
<p className="text-center text-[22px] font-900 pb-4">Finding your perfect match just become easier</p>
|
|
<div className="flex itemes-center justify-center ">
|
|
<Button variant="contained" size="medium" sx={{width:"fit-content", padding:"10px 20px"}}>Regsiter Now</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* <div className="absolute top-0 left-0 w-full h-full " style={{background: "#00000", zIndex:"1"}} /> */}
|
|
|
|
<div
|
|
className="flex w-full h-full items-center justify-center"
|
|
style={{
|
|
transform: "rotateX(55deg) rotateY(0deg) rotateZ(45deg)",
|
|
}}
|
|
>
|
|
<div className="w-full overflow-hidden scale-90 sm:scale-100">
|
|
<div
|
|
className={`relative grid h-full w-full origin-center
|
|
grid-cols-4 sm:grid-cols-${cols} gap-4 transform
|
|
`}
|
|
>
|
|
{imageGroups.map((imagesInGroup, idx) => (
|
|
<motion.div
|
|
key={`column-${idx}`}
|
|
animate={{ y: idx % 2 === 0 ? 100 : -100 }}
|
|
transition={{
|
|
// duration: idx % 2 === 0 ? 20 : 15,
|
|
duration: idx % 2 === 0 ? 5 : 4,
|
|
ease: "linear",
|
|
repeat: Infinity,
|
|
repeatType: "reverse",
|
|
}}
|
|
className="flex flex-col items-center gap-6 relative"
|
|
>
|
|
<div className="absolute left-0 top-0 h-full w-0.5 " />
|
|
{imagesInGroup.map((image, imgIdx) => {
|
|
const globalIndex = idx * groupSize + imgIdx;
|
|
const isClickable = image.href || onImageClick;
|
|
|
|
return (
|
|
<div key={`img-${imgIdx}`} className="relative">
|
|
<div className="absolute top-0 left-0 w-full h-0.5 " />
|
|
<div className="max-w-[300px] h-[290px] rounded-lg overflow-hidden bg-white">
|
|
<motion.img
|
|
whileHover={{ y: -10 }}
|
|
transition={{ duration: 0.3, ease: "easeInOut" }}
|
|
src={image.src}
|
|
alt={image.alt}
|
|
width={970}
|
|
height={700}
|
|
className={`aspect-[970/700] w-full h-full object-cover shadow-xl hover:shadow-2xl transition-shadow duration-300 ${
|
|
isClickable ? "cursor-pointer" : ""
|
|
}`}
|
|
onClick={() => handleImageClick(image, globalIndex)}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export default ThreeDMarquee;
|