116 lines
4.2 KiB
TypeScript
116 lines
4.2 KiB
TypeScript
import React from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Awards4Props {
|
|
className?: string;
|
|
}
|
|
|
|
const faYear = (year: number) => year.toLocaleString("fa-IR");
|
|
|
|
const faRowNum = (index: number) =>
|
|
`(${(index + 1).toLocaleString("fa-IR", { minimumIntegerDigits: 3 })}`;
|
|
|
|
const Awards4 = ({ className }: Awards4Props) => {
|
|
const awards = [
|
|
{
|
|
name: "برنده جایزه طراحی استایل‌دهی",
|
|
description:
|
|
"به پاس کیفیت ممتاز در طراحی و عملکرد وب مورد تقدیر قرار گرفته است.",
|
|
year: 2024,
|
|
logo: "/block-media/shadcnblocks/block/block-1.svg",
|
|
},
|
|
{
|
|
name: "سایت روز Awwwards",
|
|
description:
|
|
"به دلیل نوآوری و خلاقیت در توسعه وب برگزیده شده است.",
|
|
year: 2023,
|
|
logo: "/block-media/shadcnblocks/block/block-2.svg",
|
|
},
|
|
{
|
|
name: "بهترین طراحی رابط و تجربه کاربری",
|
|
description:
|
|
"به دلیل طراحی رابط کاربری و تجربه کاربری ممتاز مورد تقدیر قرار گرفته است.",
|
|
year: 2023,
|
|
logo: "/block-media/shadcnblocks/block/block-3.svg",
|
|
},
|
|
{
|
|
name: "تعالی در طراحی وب",
|
|
description:
|
|
"به پاس کیفیت بالای طراحی و اجرای فنی مورد تقدیر قرار گرفته است.",
|
|
year: 2022,
|
|
logo: "/block-media/shadcnblocks/block/block-4.svg",
|
|
},
|
|
{
|
|
name: "اپلیکیشن موبایل سال",
|
|
description:
|
|
"به دلیل نوآوری در طراحی موبایل و ارائه تجربه کاربری برتر مورد تقدیر قرار گرفته است.",
|
|
year: 2022,
|
|
logo: "/block-media/shadcnblocks/block/block-5.svg",
|
|
},
|
|
{
|
|
name: "جایزه نوآوری دیجیتال",
|
|
description:
|
|
"به دلیل ارائه راهکارهای دیجیتال نوآورانه و فناوری خلاقانه مورد تقدیر قرار گرفته است.",
|
|
year: 2021,
|
|
logo: "/block-media/shadcnblocks/block/block-6.svg",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container space-y-10 lg:space-y-20">
|
|
<div className="flex w-full items-end justify-between">
|
|
<h1 className="text-2xll font-semibold tracking-tighter lg:text-8xl">
|
|
جوایز
|
|
</h1>
|
|
<h2 className="text-lg font-semibold tracking-tighter lg:text-3xl">
|
|
(۲۱۵–۲۲۵©)
|
|
</h2>
|
|
</div>
|
|
|
|
<table className="w-full border-collapse">
|
|
<thead>
|
|
<tr className="h-12 border-b text-start text-foreground/40">
|
|
<th className="hidden min-w-30 font-normal lg:table-cell lg:min-w-40"></th>
|
|
<th className="font-normal">نام</th>
|
|
<th className="hidden font-normal md:table-cell">توضیحات</th>
|
|
<th className="text-end font-normal">سال</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{awards.map((award, index) => (
|
|
<tr
|
|
key={index}
|
|
className="h-20 border-b text-start text-foreground/40"
|
|
>
|
|
<td className="hidden font-medium tracking-tight text-foreground/50 lg:table-cell">
|
|
{faRowNum(index)}
|
|
</td>
|
|
<td className="text-lg font-medium tracking-tight text-foreground lg:text-xl">
|
|
<div className="flex items-center gap-2">
|
|
<span className="size-8 rounded-xl bg-foreground object-cover p-1.5">
|
|
<img
|
|
src={award.logo}
|
|
className="invert"
|
|
alt={award.name}
|
|
/>
|
|
</span>
|
|
{award.name}
|
|
</div>
|
|
</td>
|
|
<td className="hidden md:table-cell">{award.description}</td>
|
|
<td className="text-end text-foreground">
|
|
{faYear(award.year)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Awards4 };
|