341 lines
9.4 KiB
TypeScript
341 lines
9.4 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import React from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Gallery25Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Gallery25 = ({ className }: Gallery25Props) => {
|
|
const column1Images = [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
|
|
alt: "Gallery Image 1",
|
|
height: "23rem",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
|
|
alt: "Gallery Image 2",
|
|
height: "28rem",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
|
|
alt: "Gallery Image 3",
|
|
height: "12rem",
|
|
},
|
|
];
|
|
|
|
const column2Images = [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
|
|
alt: "Gallery Image 4",
|
|
height: "13rem",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
|
|
alt: "Gallery Image 5",
|
|
height: "32rem",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
|
|
alt: "Gallery Image 6",
|
|
height: "18rem",
|
|
},
|
|
];
|
|
|
|
const column3Images = [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
|
|
alt: "Gallery Image 7",
|
|
height: "32rem",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
|
|
alt: "Gallery Image 8",
|
|
height: "32rem",
|
|
},
|
|
];
|
|
|
|
const column4Images = [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw9.jpeg",
|
|
alt: "Gallery Image 9",
|
|
height: "13rem",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw10.jpeg",
|
|
alt: "Gallery Image 10",
|
|
height: "22.5rem",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw11.jpeg",
|
|
alt: "Gallery Image 11",
|
|
height: "22rem",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className={cn("py-32", className)}>
|
|
<div className="relative container">
|
|
<div className="grid grid-cols-2 gap-4 md:grid-cols-4">
|
|
{/* Column 1 */}
|
|
<div className="grid gap-4">
|
|
{column1Images.map((image, index) => (
|
|
<motion.div
|
|
initial={{
|
|
opacity: 0,
|
|
scale: 0.9,
|
|
y: 50,
|
|
}}
|
|
whileInView={{
|
|
opacity: 1,
|
|
scale: 1,
|
|
y: 0,
|
|
}}
|
|
transition={{
|
|
duration: 0.5,
|
|
delay: index * 0.1,
|
|
}}
|
|
key={index}
|
|
className="w-full overflow-hidden rounded-2xl bg-muted"
|
|
style={{ height: image.height }}
|
|
>
|
|
<img
|
|
className="h-full w-full rounded-2xl object-cover"
|
|
src={image.src}
|
|
alt={image.alt}
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Column 2 */}
|
|
<div className="grid gap-4">
|
|
{column2Images.map((image, index) => (
|
|
<motion.div
|
|
initial={{
|
|
opacity: 0,
|
|
scale: 0.9,
|
|
y: -50,
|
|
}}
|
|
whileInView={{
|
|
opacity: 1,
|
|
scale: 1,
|
|
y: 0,
|
|
}}
|
|
transition={{
|
|
duration: 0.5,
|
|
delay: index * 0.1,
|
|
}}
|
|
key={index}
|
|
className="w-full overflow-hidden rounded-2xl bg-muted"
|
|
style={{ height: image.height }}
|
|
>
|
|
<img
|
|
className="h-full w-full rounded-2xl object-cover"
|
|
src={image.src}
|
|
alt={image.alt}
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Column 3 */}
|
|
<div className="grid gap-4">
|
|
{column3Images.map((image, index) => (
|
|
<motion.div
|
|
initial={{
|
|
opacity: 0,
|
|
scale: 0.9,
|
|
y: 50,
|
|
}}
|
|
whileInView={{
|
|
opacity: 1,
|
|
scale: 1,
|
|
y: 0,
|
|
}}
|
|
transition={{
|
|
duration: 0.5,
|
|
delay: index * 0.1,
|
|
}}
|
|
key={index}
|
|
className="w-full overflow-hidden rounded-2xl bg-muted"
|
|
style={{ height: image.height }}
|
|
>
|
|
<img
|
|
className="h-full w-full rounded-2xl object-cover"
|
|
src={image.src}
|
|
alt={image.alt}
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Column 4 */}
|
|
<div className="grid gap-4">
|
|
{column4Images.map((image, index) => (
|
|
<motion.div
|
|
initial={{
|
|
opacity: 0,
|
|
scale: 0.9,
|
|
y: -50,
|
|
}}
|
|
whileInView={{
|
|
opacity: 1,
|
|
scale: 1,
|
|
y: 0,
|
|
}}
|
|
transition={{
|
|
duration: 0.5,
|
|
delay: index * 0.1,
|
|
}}
|
|
key={index}
|
|
className="w-full overflow-hidden rounded-2xl bg-muted"
|
|
style={{ height: image.height }}
|
|
>
|
|
<img
|
|
className="h-full w-full rounded-2xl object-cover"
|
|
src={image.src}
|
|
alt={image.alt}
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
<div className="h-17 w-full rounded-2xl bg-muted"></div>
|
|
</div>
|
|
</div>
|
|
<div className="mt-4 grid grid-cols-2 gap-4 md:grid-cols-4">
|
|
{/* Column 1 */}
|
|
<div className="grid gap-4">
|
|
{column1Images.map((image, index) => (
|
|
<motion.div
|
|
initial={{
|
|
opacity: 0,
|
|
scale: 0.9,
|
|
y: 50,
|
|
}}
|
|
whileInView={{
|
|
opacity: 1,
|
|
scale: 1,
|
|
y: 0,
|
|
}}
|
|
transition={{
|
|
duration: 0.5,
|
|
delay: index * 0.1,
|
|
}}
|
|
key={index}
|
|
className="w-full overflow-hidden rounded-2xl bg-muted"
|
|
style={{ height: image.height }}
|
|
>
|
|
<img
|
|
className="h-full w-full rounded-2xl object-cover"
|
|
src={image.src}
|
|
alt={image.alt}
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Column 2 */}
|
|
<div className="grid gap-4">
|
|
{column2Images.map((image, index) => (
|
|
<motion.div
|
|
initial={{
|
|
opacity: 0,
|
|
scale: 0.9,
|
|
y: -50,
|
|
}}
|
|
whileInView={{
|
|
opacity: 1,
|
|
scale: 1,
|
|
y: 0,
|
|
}}
|
|
transition={{
|
|
duration: 0.5,
|
|
delay: index * 0.1,
|
|
}}
|
|
key={index}
|
|
className="w-full overflow-hidden rounded-2xl bg-muted"
|
|
style={{ height: image.height }}
|
|
>
|
|
<img
|
|
className="h-full w-full rounded-2xl object-cover"
|
|
src={image.src}
|
|
alt={image.alt}
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Column 3 */}
|
|
<div className="grid gap-4">
|
|
{column3Images.map((image, index) => (
|
|
<motion.div
|
|
initial={{
|
|
opacity: 0,
|
|
scale: 0.9,
|
|
y: 50,
|
|
}}
|
|
whileInView={{
|
|
opacity: 1,
|
|
scale: 1,
|
|
y: 0,
|
|
}}
|
|
transition={{
|
|
duration: 0.5,
|
|
delay: index * 0.1,
|
|
}}
|
|
key={index}
|
|
className="w-full overflow-hidden rounded-2xl bg-muted"
|
|
style={{ height: image.height }}
|
|
>
|
|
<img
|
|
className="h-full w-full rounded-2xl object-cover"
|
|
src={image.src}
|
|
alt={image.alt}
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
{/* Column 4 */}
|
|
<div className="grid gap-4">
|
|
{column4Images.map((image, index) => (
|
|
<motion.div
|
|
initial={{
|
|
opacity: 0,
|
|
scale: 0.9,
|
|
y: -50,
|
|
}}
|
|
whileInView={{
|
|
opacity: 1,
|
|
scale: 1,
|
|
y: 0,
|
|
}}
|
|
transition={{
|
|
duration: 0.5,
|
|
delay: index * 0.1,
|
|
}}
|
|
key={index}
|
|
className="w-full overflow-hidden rounded-2xl bg-muted"
|
|
style={{ height: image.height }}
|
|
>
|
|
<img
|
|
className="h-full w-full rounded-2xl object-cover"
|
|
src={image.src}
|
|
alt={image.alt}
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
<div className="h-17 w-full rounded-2xl bg-muted"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Gallery25 };
|