76 lines
2.7 KiB
TypeScript
76 lines
2.7 KiB
TypeScript
import { MoveUpRight } from "lucide-react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
const faYear = (year: number) => year.toLocaleString("fa-IR");
|
|
|
|
const awards = [
|
|
{
|
|
title: "جایزه طراحی پیکسل‌محور",
|
|
categories: ["طراحی دیجیتال", "رابط و تجربه کاربری"],
|
|
year: 2023,
|
|
color: "bg-amber-300",
|
|
},
|
|
{
|
|
title: "جایزه برترین مهارت فنی",
|
|
categories: ["توسعه وب", "نوآوری"],
|
|
year: 2023,
|
|
color: "bg-red-500",
|
|
},
|
|
{
|
|
title: "جایزه برترین راهبرد",
|
|
categories: ["راهبرد محصول", "اثر بازار"],
|
|
year: 2022,
|
|
color: "bg-blue-500",
|
|
},
|
|
];
|
|
|
|
interface Awards3Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Awards3 = ({ className }: Awards3Props) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<h2 className="mb-6 text-xl font-semibold tracking-tighter text-foreground sm:text-xl lg:text-3xl">
|
|
جوایز و تقدیرها
|
|
</h2>
|
|
<p className="mb-6 max-w-3xl text-base text-muted-foreground">
|
|
تعهد ما به کیفیت، نوآوری و خلق تجربه‌های ارزشمند، زمینه‌ساز دریافت این افتخارات بوده است. این دستاوردها انگیزه‌ای برای ادامه مسیر و ارائه راهکارهای بهتر هستند.
|
|
</p>
|
|
|
|
{awards.map((award, index) => (
|
|
<div
|
|
key={index}
|
|
className="group relative flex items-start gap-4 overflow-hidden border-b border-border p-4"
|
|
>
|
|
<div className="absolute inset-0 z-0 translate-y-full bg-accent transition-transform duration-300 ease-in-out group-hover:translate-y-0" />
|
|
|
|
<div className="relative z-10 flex-1 space-y-2 pb-4">
|
|
<div className="flex items-center gap-4">
|
|
<div
|
|
className={`h-5 w-5 rounded-md ${award.color} flex items-center justify-center`}
|
|
></div>
|
|
<h3 className="rounded-md font-medium">{award.title}</h3>
|
|
</div>
|
|
<p className="flex gap-x-2 ps-9 text-sm text-muted-foreground">
|
|
{award.categories.map((category, index) => (
|
|
<span key={index}>{category}</span>
|
|
))}
|
|
</p>
|
|
<p className="ps-9 text-sm text-muted-foreground">
|
|
{faYear(award.year)}
|
|
</p>
|
|
</div>
|
|
|
|
<MoveUpRight className="relative z-10 mt-1 h-4 w-4 text-muted-foreground rtl:-scale-x-100" />
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Awards3 };
|