77 lines
3.0 KiB
TypeScript
77 lines
3.0 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
interface Projects2type {
|
|
title: string;
|
|
description: string;
|
|
imagePath: string;
|
|
imageAlt: string;
|
|
}
|
|
|
|
const projects2prop: Projects2type[] = [
|
|
{
|
|
title: "موزاییک",
|
|
description:
|
|
"کاوشی در هماهنگی میان معماری فرانت‌اند و تجربه کاربر. این رویکرد کامپوننت‌های استاندارد و چیدمان منعطف را می‌آمیزد تا رابط‌هایی روان و قابل‌نگهداری بسازد.",
|
|
imagePath: "/block-media/shadcnblocks/block/lummi/bw1.jpeg",
|
|
imageAlt: "نمایش تعاملی دیجیتال مدرن",
|
|
},
|
|
{
|
|
title: "محصول بازطراحی‌شده",
|
|
description:
|
|
"بازطراحی داشبورد CRM با تمرکز بر نمایش خط لوله معاملات و KPIهای فروش در یک نمای یکپارچه.",
|
|
imagePath: "/block-media/shadcnblocks/block/lummi/bw2.jpeg",
|
|
imageAlt: "موکاپ‌ها و عناصر دیزاین سیستم",
|
|
},
|
|
{
|
|
title: "فضاهای تمرکز",
|
|
description:
|
|
"یک نمایش تعاملی که داده‌های زنده را به نمودارها و کارت‌های واکنش‌گرا تبدیل می‌کند و کاربر را به کاوش در داشبورد دعوت می‌کند.",
|
|
imagePath: "/block-media/shadcnblocks/block/lummi/bw3.jpeg",
|
|
imageAlt: "مفهوم طراحی رابط و معماری فرانت‌اند",
|
|
},
|
|
];
|
|
|
|
interface Projects2Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Projects2 = ({ className }: Projects2Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<h1 className="mb-16 text-4xl font-normal tracking-wide text-foreground md:mb-24 md:text-6xl lg:text-7xl">نمایش پروژه‌ها</h1>
|
|
|
|
<div className="space-y-16 md:space-y-24 lg:space-y-32">
|
|
{projects2prop.map((project, index) => (
|
|
<div
|
|
key={index}
|
|
className="grid grid-cols-1 items-center gap-8 text-start lg:grid-cols-12 lg:gap-12"
|
|
>
|
|
<div className="order-2 lg:order-1 lg:col-span-4">
|
|
<h2 className="mb-4 text-base font-bold tracking-wide text-foreground md:text-base">
|
|
{project.title}
|
|
</h2>
|
|
<p className="max-w-sm text-sm leading-relaxed text-muted-foreground md:text-base">
|
|
{project.description}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="order-1 lg:order-2 lg:col-span-8">
|
|
<div className="relative aspect-[4/3] w-full overflow-hidden rounded-lg border border-border">
|
|
<img
|
|
src={project.imagePath}
|
|
alt={project.imageAlt}
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Projects2 };
|