111 lines
4.6 KiB
TypeScript
111 lines
4.6 KiB
TypeScript
"use client";
|
|
|
|
import { ArrowRight } from "lucide-react";
|
|
|
|
import { Button } from "@/components/ui/button";
|
|
import { Label } from "@/components/ui/label";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Project2aProps {
|
|
title: string;
|
|
title2?: string;
|
|
year: string;
|
|
category: string;
|
|
client: string;
|
|
imageSrc: string;
|
|
imageAlt: string;
|
|
imageCaption: string;
|
|
mainDescription: string;
|
|
detailDescription: string;
|
|
buttonText: string;
|
|
className?: string;
|
|
}
|
|
|
|
const Project2a = ({
|
|
title = "دیجیتال",
|
|
title2 = "تیم",
|
|
year = "«۲۲۴»",
|
|
category = "«دیزاین سیستم»",
|
|
client = "«استودیو محصول»",
|
|
imageSrc = "/block-media/shadcnblocks/block/photos/artistic-portrait-glitch-yqp6z.png",
|
|
imageAlt = "میز کار طراح با ابزارها و عناصر دیزاین سیستم",
|
|
imageCaption = "نمای داشبورد فروش با نمودارهای KPI و خط لوله معاملات",
|
|
mainDescription = "یک رابط پویا که KPIهای فروش، نرخ تبدیل و عملکرد تیم را در یک داشبورد یکپارچه نمایش می‌دهد.",
|
|
detailDescription = "این پروژه بر یک صفحه فرود محصول متمرکز است که برای بازتاب روح نوآورانه و پویای برند طراحی شده است. رابط با گرادیان‌های نرم و میکروانیمیشن‌های ظریف ساخته شده تا حس حرکت و مدرن‌بودن را منتقل کند. ترکیب تایپوگرافی درشت و تم تیره، هویت آینده‌نگر برند را تجسم می‌کند و چیدمان واکنش‌گرا تجربه‌ای یکدست و به‌یادماندنی می‌سازد. این رابط با بلاک‌های آماده shadcn پیاده شده تا ترکیبی از خلاقیت، سرعت و کیفیت را به نمایش بگذارد.",
|
|
buttonText = "تماس با ما",
|
|
className,
|
|
}: Project2aProps) => {
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="container mx-auto px-8 py-20">
|
|
<div className="mx-auto max-w-6xl">
|
|
<div className="mb-20 flex flex-col items-center justify-center gap-6">
|
|
<Label className="text-sm tracking-wider text-foreground">
|
|
پروژه
|
|
</Label>
|
|
<h1 className="text-center text-7xl leading-none font-light tracking-tight text-foreground md:text-8xl lg:text-9xl">
|
|
{title}
|
|
{title2 && (
|
|
<>
|
|
<br />
|
|
{title2}
|
|
</>
|
|
)}
|
|
</h1>
|
|
<div className="mx-auto mt-12 h-px w-24 bg-border"></div>
|
|
</div>
|
|
|
|
<div className="mb-24 grid grid-cols-3 justify-items-center text-sm tracking-wider text-muted-foreground">
|
|
<div className="text-center">
|
|
<span className="block">سال همکاری</span>
|
|
<span className="text-foreground">{year}</span>
|
|
</div>
|
|
<div className="text-center">
|
|
<span className="block">حوزه</span>
|
|
<span className="text-foreground">{category}</span>
|
|
</div>
|
|
<div className="text-center">
|
|
<span className="block">سازمان مشتری</span>
|
|
<span className="text-foreground">{client}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-24">
|
|
<div className="aspect-[16/10] overflow-hidden bg-muted">
|
|
<img
|
|
src={imageSrc}
|
|
alt={imageAlt}
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
</div>
|
|
<div className="mt-6 text-center text-xs tracking-widest text-muted-foreground">
|
|
<em>{imageCaption}</em>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mx-auto max-w-5xl text-start">
|
|
<div className="space-y-8">
|
|
<h2 className="mb-8 text-xl leading-relaxed font-light text-foreground md:text-2xl">
|
|
{mainDescription}
|
|
</h2>
|
|
|
|
<p className="mb-12 text-base leading-relaxed text-muted-foreground">
|
|
{detailDescription}
|
|
</p>
|
|
|
|
<div>
|
|
<Button variant="outline" className="group gap-2">
|
|
{buttonText}
|
|
<ArrowRight className="size-4 transition-transform rtl:rotate-180" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Project2a };
|