99 lines
3.4 KiB
TypeScript
99 lines
3.4 KiB
TypeScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface About17Props {
|
|
className?: string;
|
|
}
|
|
|
|
const About17 = ({ className }: About17Props) => {
|
|
const [active, setActive] = useState<string>("اطلاعات");
|
|
|
|
const LINKS = [
|
|
{
|
|
title: "اطلاعات",
|
|
href: "#",
|
|
img: "/block-media/shadcnblocks/block/guri4/img11.png",
|
|
},
|
|
{
|
|
title: "کارها",
|
|
href: "#",
|
|
img: "/block-media/shadcnblocks/block/guri4/img9.png",
|
|
},
|
|
|
|
{
|
|
title: "مجله",
|
|
href: "#",
|
|
img: "/block-media/shadcnblocks/block/guri4/img10.png",
|
|
},
|
|
|
|
{
|
|
title: "آرشیو",
|
|
href: "#",
|
|
img: "/block-media/shadcnblocks/block/guri4/img6.png",
|
|
},
|
|
];
|
|
|
|
return (
|
|
<section className={cn("py-32", className)}>
|
|
<div className="container">
|
|
<div className="grid grid-cols-1 gap-15 lg:grid-cols-7 lg:gap-12">
|
|
<div className="top-10 col-span-3 h-fit w-fit text-xl tracking-tight">
|
|
<p className="font-medium">طراح مستقل و مهندس بنیان‌گذار</p>
|
|
<div className="mt-4 flex items-center gap-6 text-foreground/30">
|
|
<p>
|
|
{new Date().toLocaleTimeString("en-US", {
|
|
timeZone: "America/Chicago",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
hour12: true,
|
|
})}
|
|
</p>
|
|
<p>CST</p>
|
|
</div>
|
|
</div>
|
|
<div className="col-span-4 ml-auto max-w-3xl space-y-10 lg:pl-15">
|
|
<h1 className="text-xl font-medium tracking-tight">
|
|
علی رضایی با ترکیب خلاقیت و تخصص فنی، محصولاتی دیجیتال خلق می‌کند که علاوه بر کارایی، تجربه‌ای لذت‌بخش برای کاربران فراهم می‌کنند. او با تکیه بر دانش توسعه توسعه کامل و نگاه دقیق به طراحی، ایده‌ها را از مرحله شکل‌گیری تا عرضه به محصولی مقیاس‌پذیر تبدیل می‌کند.
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div className="mt-15 grid grid-cols-1 gap-4 border-t py-10 lg:grid-cols-7 lg:gap-12 lg:gap-15">
|
|
<ul className="top-10 order-2 col-span-3 flex h-fit w-fit gap-10 tracking-tight lg:order-none">
|
|
{LINKS.map((link) => (
|
|
<li
|
|
key={link.title}
|
|
className={cn(
|
|
"cursor-pointer",
|
|
active === link.title
|
|
? "text-foreground"
|
|
: "text-foreground/30",
|
|
)}
|
|
onClick={() => setActive(link.title)}
|
|
>
|
|
{link.title}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
<ul className="order-1 col-span-4 ml-auto flex w-full max-w-3xl gap-10 font-medium tracking-tight text-foreground/40 lg:order-none lg:pl-15 lg:text-xl">
|
|
<li className="text-foreground">Austrlia</li>
|
|
<li>Brisbane</li>
|
|
<li>+1 (000) 023 0123</li>
|
|
</ul>
|
|
</div>
|
|
<div className="h-150">
|
|
<img
|
|
className="h-full w-full object-cover"
|
|
src={LINKS.find((link) => link.title === active)?.img}
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { About17 };
|