94 lines
3.5 KiB
TypeScript
94 lines
3.5 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
|
|
interface Projects4Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Projects4 = ({ className }: Projects4Props) => {
|
|
const projects = [
|
|
{
|
|
id: 1,
|
|
title: "بهینه‌سازی گردش کار طراحی",
|
|
category: "رابط و تجربه کاربری",
|
|
date: "۲۰ خرداد ۱۴۰۴",
|
|
image:
|
|
"/block-media/shadcnblocks/block/illustrations/tokyo-browser-window-with-settings-and-design-panels.svg",
|
|
},
|
|
{
|
|
id: 2,
|
|
title: "دسترسی یکپارچه جهانی",
|
|
category: "فناوری ابری",
|
|
date: "۱۸ خرداد ۱۴۰۴",
|
|
image:
|
|
"/block-media/shadcnblocks/block/illustrations/tokyo-exchange-between-the-user-and-the-global-network.svg",
|
|
},
|
|
{
|
|
id: 3,
|
|
title: "رابط بارگذاری صفحه بعد",
|
|
category: "توسعه فرانت‌اند",
|
|
date: "۱۵ خرداد ۱۴۰۴",
|
|
image:
|
|
"/block-media/shadcnblocks/block/illustrations/tokyo-loading-the-next-page.svg",
|
|
},
|
|
{
|
|
id: 4,
|
|
title: "تحلیل ترافیک وب",
|
|
category: "مصورسازی داده",
|
|
date: "۱۰ خرداد ۱۴۰۴",
|
|
image:
|
|
"/block-media/shadcnblocks/block/illustrations/tokyo-volumetric-analytics-of-different-types-in-web-browsers.svg",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container space-y-16">
|
|
<div className="flex flex-col justify-start gap-5 text-start md:gap-12 lg:flex-row lg:items-center lg:justify-between">
|
|
<h1 className="text-4xl font-medium md:text-5xl lg:text-7xl">
|
|
کاوش در پروژه‌های ما
|
|
</h1>
|
|
|
|
<div className="flex flex-col items-start gap-6 md:flex-row">
|
|
<p className="max-w-xs text-lg font-medium text-muted-foreground">مجموعه‌ای گزیده از نماها که رویکرد ما به طراحی تمیز، تجربه کاربری آگاهانه و وب مدرن را نشان می‌دهد.</p>
|
|
|
|
<div className="max-w-xs">
|
|
<span className="font-medium text-foreground">تجربه onboarding</span>
|
|
<p className="text-base text-muted-foreground">
|
|
هر پروژه مطالعه موردی منحصربه‌فردی است که با دقت، عملکرد و
|
|
هدف ساخته شده.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-10 sm:grid-cols-2">
|
|
{projects.map((project) => (
|
|
<div key={project.id} className="group text-start">
|
|
<img
|
|
src={project.image}
|
|
alt={project.title}
|
|
className="h-96 w-full rounded-lg bg-accent object-contain transition-transform duration-300 group-hover:scale-105"
|
|
/>
|
|
<div className="mt-4 flex items-start justify-between">
|
|
<div>
|
|
<h2 className="text-xl font-semibold">{project.title}</h2>
|
|
<p className="mt-2 text-sm text-muted-foreground">
|
|
{project.category}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-xl font-medium text-muted-foreground">
|
|
{project.date}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Projects4 };
|