68 lines
2.0 KiB
TypeScript
68 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { useState } from "react";
|
|
import { motion } from "framer-motion";
|
|
|
|
const images = ["/g1.png", "/g2.png", "/g3.png", "/g4.png"];
|
|
|
|
export default function Galeri() {
|
|
const [consent, setConsent] = useState(false);
|
|
|
|
return (
|
|
<section className="px-4 py-12 md:px-20 bg-white">
|
|
<motion.h2
|
|
className="text-3xl font-bold mb-8 text-black"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
transition={{ duration: 0.6, ease: "easeOut" }}
|
|
viewport={{ once: true }}
|
|
>
|
|
Galeri Kami
|
|
</motion.h2>
|
|
|
|
<div className="flex flex-col gap-8 mb-16">
|
|
<div className="flex justify-start gap-8 flex-wrap">
|
|
{[images[0], images[1]].map((src, index) => (
|
|
<motion.div
|
|
key={index}
|
|
className="relative w-[400px] h-[250px] overflow-hidden"
|
|
initial={{ opacity: 0, x: -40 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.6, delay: index * 0.2 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<Image
|
|
src={src}
|
|
alt={`Galeri ${index + 1}`}
|
|
fill
|
|
className="object-cover object-center"
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-8 flex-wrap">
|
|
{[images[2], images[3]].map((src, index) => (
|
|
<motion.div
|
|
key={index + 2}
|
|
className="relative w-[400px] h-[250px] overflow-hidden"
|
|
initial={{ opacity: 0, x: 40 }}
|
|
whileInView={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.6, delay: index * 0.2 }}
|
|
viewport={{ once: true }}
|
|
>
|
|
<Image
|
|
src={src}
|
|
alt={`Galeri ${index + 3}`}
|
|
fill
|
|
className="object-cover object-center"
|
|
/>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|