97 lines
3.9 KiB
TypeScript
97 lines
3.9 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
interface Projects10Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Projects10 = ({ className }: Projects10Props) => {
|
|
const images = [
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw6.jpeg",
|
|
alt: "چیدمان کارت‌ها روی پس‌زمینه ملایم",
|
|
title: "تم روشن صبحگاهی",
|
|
description: "رابط مینیمال با فضای خالی سنجیده و ریتم منظم",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw7.jpeg",
|
|
alt: "کارت‌های آماری با نمودار زنده",
|
|
title: "نمای تم سرد",
|
|
description: "تم روشن، کارت‌ها را با رنگ‌های گرم می‌آراید",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw8.jpeg",
|
|
alt: "منوی کشویی در جریان ناوبری",
|
|
title: "تم تیره مه‌آلود",
|
|
description: "تم روشن سپیده، رابط را زنده می‌کند",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw5.jpeg",
|
|
alt: "نمای جامعه کاربران",
|
|
title: "نمای جانبی",
|
|
description: "تجربه‌ای که با الگو و رنگ نشانه‌گذاری شده",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw19.jpeg",
|
|
alt: "نمای پروفایل کاربر",
|
|
title: "نمای گرم",
|
|
description: "نمای مطالعه محتوا در تم روشن",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw18.jpeg",
|
|
alt: "نمای کاربر در تم تیره",
|
|
title: "هماهنگی مینیمال",
|
|
description: "بلاک Hero با گرادیان نرم و تایپوگرافی درشت",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw15.jpeg",
|
|
alt: "کارت‌های شاخص در تم غروب",
|
|
title: "تم سپیده‌دم",
|
|
description: "نوار پیشرفت و اسکلتون لودینگ هنگام بارگذاری داده",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw9.jpeg",
|
|
alt: "داشبوردهای تعاملی",
|
|
title: "حالت موفقیت پس از ثبت",
|
|
description: "کامپوننت‌ها برای توازن و ریتم بصری سنجیده چیده شده‌اند",
|
|
},
|
|
{
|
|
src: "/block-media/shadcnblocks/block/lummi/bw17.jpeg",
|
|
alt: "انیمیشن ظریف ورود کارت‌ها",
|
|
title: "حالت‌های موفقیت و نوتیفیکیشن‌های دلنشین تجربه را گرم می‌کنند",
|
|
description: "حالت‌ها و پیام‌های راهنما کنار کاربر تجربه را گرم‌تر می‌کنند",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-24", className)}>
|
|
<div className="container">
|
|
<div className="grid grid-cols-1 md:grid-cols-3">
|
|
{images.map((image, index) => (
|
|
<div
|
|
key={index}
|
|
className="group relative aspect-square overflow-hidden"
|
|
>
|
|
<img
|
|
src={image.src}
|
|
alt={image.alt}
|
|
className="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
|
|
/>
|
|
<div className="absolute inset-0 bg-background/0 transition-all duration-300 group-hover:bg-background/10" />
|
|
<div className="absolute inset-x-0 bottom-0 translate-y-full transform p-6 transition-transform duration-300 group-hover:translate-y-0">
|
|
<div className="text-center">
|
|
<h3 className="mb-2 text-xl font-semibold text-muted">
|
|
{image.title}
|
|
</h3>
|
|
<p className="text-sm text-muted">{image.description}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Projects10 };
|