115 lines
4.0 KiB
TypeScript
115 lines
4.0 KiB
TypeScript
import { CornerDownRight } from "lucide-react";
|
|
import React from "react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Skills1Props {
|
|
className?: string;
|
|
}
|
|
|
|
const Skills1 = ({ className }: Skills1Props) => {
|
|
const stack = [
|
|
{
|
|
name: "Figma",
|
|
category: "ابزار طراحی",
|
|
icon: "/block-media/shadcnblocks/block/logos/figma-icon.svg",
|
|
experience: "۲ سال سابقه",
|
|
className: "h-9",
|
|
},
|
|
{
|
|
name: "React",
|
|
category: "کتابخانه جاوااسکریپت",
|
|
icon: "/block-media/shadcnblocks/block/logos/react-icon.svg",
|
|
experience: "۴ سال سابقه",
|
|
},
|
|
{
|
|
name: "Next.js",
|
|
category: "فریم‌ورک فول‌استک",
|
|
icon: "/block-media/shadcnblocks/block/logos/nextjs-icon.svg",
|
|
experience: "۳ سال سابقه",
|
|
className: "dark:invert",
|
|
},
|
|
{
|
|
name: "استایل‌دهی مدرن",
|
|
category: "فریم‌ورک CSS",
|
|
icon: "/block-media/shadcnblocks/block/logos/tailwind-icon.svg",
|
|
experience: "۳ سال سابقه",
|
|
},
|
|
{
|
|
name: "v0",
|
|
category: "ابزار هوش مصنوعی",
|
|
icon: "/block-media/shadcnblocks/block/logos/v0-icon.svg",
|
|
experience: "۳ سال سابقه",
|
|
className: "dark:invert",
|
|
},
|
|
{
|
|
name: "Vite",
|
|
category: "ابزار بیلد",
|
|
icon: "/block-media/shadcnblocks/block/logos/vite-icon.svg",
|
|
experience: "۳ سال سابقه",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="grid grid-cols-1 gap-5 lg:grid-cols-6 lg:gap-20">
|
|
<div className="top-10 col-span-2 h-fit w-fit gap-3 space-y-7 py-8 lg:sticky">
|
|
<h1 className="text-2xll font-semibold tracking-tight lg:text-2xll">
|
|
ابزارها و پشته فنی
|
|
</h1>
|
|
<p className="text-base text-foreground/50">
|
|
فناوری‌هایی که هر روز با آن‌ها طراحی و توسعه می‌دهم از رابط
|
|
کاربری تا استقرار محصول.
|
|
</p>
|
|
|
|
<div className="mt-20 flex w-full justify-between border-t py-2 lg:mt-34">
|
|
<Button variant="ghost" className="tracking-tight lg:text-lg">
|
|
<CornerDownRight className="size-5 text-orange-500" />
|
|
گیت‌هاب
|
|
</Button>
|
|
<Button variant="ghost" className="tracking-tight lg:text-lg">
|
|
<CornerDownRight className="size-5 text-orange-500" />
|
|
تماس بگیرید
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
<ul className="relative col-span-4 w-full space-y-4">
|
|
{stack.map((item, index) => (
|
|
<li
|
|
key={index}
|
|
className="flex flex-row items-center justify-between gap-10 rounded-2xl bg-muted p-2"
|
|
>
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex size-20 items-center justify-center rounded-2xl bg-background p-2">
|
|
<img
|
|
src={item.icon}
|
|
alt={item.name}
|
|
className={cn("h-8 w-8 object-contain", item.className)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h2 className="text-xl font-semibold tracking-tight">
|
|
{item.name}
|
|
</h2>
|
|
<p className="text-sm text-foreground/50">{item.category}</p>
|
|
</div>
|
|
</div>
|
|
<Button
|
|
variant="ghost"
|
|
className="me-3 rounded-full bg-foreground/5 hover:bg-foreground/10"
|
|
>
|
|
{item.experience}
|
|
</Button>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Skills1 };
|