99 lines
3.0 KiB
TypeScript
99 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import React from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface ImageData {
|
|
src: string;
|
|
alt: string;
|
|
}
|
|
|
|
const images: ImageData[] = [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
|
|
alt: "حالت موفقیت پس از ثبت",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
|
|
alt: "کارت‌ها در تم گرم غروب",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
|
|
alt: "نمای کلی گسترده داشبورد",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw4.jpeg",
|
|
alt: "کارت‌های شاخص با تم گرم",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
|
|
alt: "نمای رابط در حالت تک‌رنگ",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
|
|
alt: "ترکیب‌بندی تک‌رنگ معاصر رابط",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
|
|
alt: "نمای خواندن محتوا در تم روشن",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
|
|
alt: "منوی کشویی روی پس‌زمینه ملایم",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw9.jpeg",
|
|
alt: "رابط مینیمال",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw10.jpeg",
|
|
alt: "فرم ثبت‌نام با اعتبارسنجی زنده",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw11.jpeg",
|
|
alt: "چیدمان کارت‌ها روی پس‌زمینه ملایم",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw12.jpeg",
|
|
alt: "رابط مینیمال با فضای خالی سنجیده و ریتم منظم",
|
|
},
|
|
];
|
|
|
|
interface Projects11Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Projects11 = ({ className }: Projects11Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="columns-1 gap-4 space-y-4 md:columns-2 md:gap-6 md:space-y-6 lg:columns-3">
|
|
{images.map((image, index) => (
|
|
<motion.div
|
|
key={index}
|
|
className="mb-4 break-inside-avoid md:mb-6"
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true }}
|
|
transition={{ duration: 0.6, delay: index * 0.05 }}
|
|
>
|
|
<div className="group relative overflow-hidden border-border transition-all duration-300">
|
|
<motion.img
|
|
src={image.src}
|
|
alt={image.alt}
|
|
className="h-auto w-full object-cover transition-transform duration-300 ease-in-out group-hover:scale-105 group-hover:brightness-105"
|
|
/>
|
|
<div className="absolute inset-0 bg-black/0 transition-all duration-300 group-hover:bg-black/10" />
|
|
</div>
|
|
</motion.div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Projects11 };
|