Initial import of 1407 block sources under blocks/
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
ar.badiei
@@ -0,0 +1,156 @@
|
||||
"use client";
|
||||
|
||||
import { ArrowRight } from "lucide-react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface Project2dProps {
|
||||
title: string;
|
||||
title2?: string;
|
||||
year: string;
|
||||
category: string;
|
||||
client: string;
|
||||
imageSrc: string;
|
||||
imageAlt: string;
|
||||
imageCaption?: string;
|
||||
overviewHeading: string;
|
||||
mainDescription: string;
|
||||
detailDescription: string;
|
||||
buttonText: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const Project2d = ({
|
||||
title = "دیجیتال",
|
||||
title2 = "تیم",
|
||||
year = "«۲۲۴»",
|
||||
category = "«دیزاین سیستم»",
|
||||
client = "«استودیو محصول»",
|
||||
imageSrc = "/block-media/shadcnblocks/block/photos/artistic-portrait-glitch-yqp6z.png",
|
||||
imageAlt = "میز کار طراح با ابزارها و عناصر دیزاین سیستم",
|
||||
imageCaption = "نمای داشبورد فروش با نمودارهای KPI و خط لوله معاملات",
|
||||
overviewHeading = "مرور پروژه",
|
||||
mainDescription = "یک رابط پویا که KPIهای فروش، نرخ تبدیل و عملکرد تیم را در یک داشبورد یکپارچه نمایش می‌دهد.",
|
||||
detailDescription = "این پروژه بر یک صفحه فرود محصول متمرکز است که برای بازتاب روح نوآورانه و پویای برند طراحی شده است. رابط با گرادیان‌های نرم و میکروانیمیشن‌های ظریف ساخته شده تا حس حرکت و مدرن‌بودن را منتقل کند. ترکیب تایپوگرافی درشت و تم تیره، هویت آینده‌نگر برند را تجسم می‌کند و چیدمان واکنش‌گرا تجربه‌ای یکدست و به‌یادماندنی می‌سازد. این رابط با بلاک‌های آماده shadcn پیاده شده تا ترکیبی از خلاقیت، سرعت و کیفیت را به نمایش بگذارد.",
|
||||
buttonText = "تماس با ما",
|
||||
className,
|
||||
}: Project2dProps) => {
|
||||
return (
|
||||
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
||||
<div className="container mx-auto px-6 py-20 lg:px-12">
|
||||
<div className="mb-40">
|
||||
<div className="grid grid-cols-12 gap-8 lg:gap-16">
|
||||
<div className="col-span-12 text-start lg:col-span-7">
|
||||
<div className="mb-12">
|
||||
<div className="mb-6 inline-flex items-center gap-4">
|
||||
<div className="h-px w-16 bg-foreground"></div>
|
||||
<span className="text-sm font-medium tracking-widest text-muted-foreground">
|
||||
پروژه
|
||||
</span>
|
||||
</div>
|
||||
<h1 className="text-5xl leading-[0.95] font-light tracking-tight text-foreground md:text-7xl lg:text-8xl xl:text-9xl">
|
||||
{title}
|
||||
{title2 && (
|
||||
<>
|
||||
<br />
|
||||
{title2}
|
||||
</>
|
||||
)}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-span-12 lg:col-span-5">
|
||||
<div className="h-full lg:pt-32">
|
||||
<div className="space-y-8">
|
||||
<div className="rounded-lg bg-muted/50 p-8">
|
||||
<div className="grid grid-cols-1 gap-6 text-start">
|
||||
<div className="flex items-center justify-between border-b border-border pb-4">
|
||||
<span className="text-sm font-medium text-muted-foreground">
|
||||
سال
|
||||
</span>
|
||||
<span className="font-medium text-foreground">
|
||||
{year}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between border-b border-border pb-4">
|
||||
<span className="text-sm font-medium text-muted-foreground">
|
||||
دسته‌بندی
|
||||
</span>
|
||||
<span className="font-medium text-foreground">
|
||||
{category}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm font-medium text-muted-foreground">
|
||||
مشتری
|
||||
</span>
|
||||
<span className="font-medium text-foreground">
|
||||
{client}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mb-32">
|
||||
<div className="relative">
|
||||
<div className="aspect-[5/3] overflow-hidden rounded-2xl">
|
||||
<img
|
||||
src={imageSrc}
|
||||
alt={imageAlt}
|
||||
className="h-full w-full object-cover"
|
||||
/>
|
||||
</div>
|
||||
{imageCaption && (
|
||||
<div className="absolute -end-4 bottom-8 max-w-xs rounded-lg bg-background/95 p-4 lg:-end-8">
|
||||
<p className="text-start text-sm font-medium text-muted-foreground">
|
||||
{imageCaption}
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-12 gap-8 lg:gap-16">
|
||||
<div className="col-span-12 text-start lg:col-span-4">
|
||||
<div className="sticky top-8">
|
||||
<h2 className="mb-6 text-sm font-medium tracking-widest text-muted-foreground">
|
||||
{overviewHeading}
|
||||
</h2>
|
||||
<div className="h-px w-12 bg-foreground"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="col-span-12 text-start lg:col-span-8">
|
||||
<div className="space-y-12">
|
||||
<h3 className="text-3xl leading-relaxed font-light text-foreground md:text-4xl">
|
||||
{mainDescription}
|
||||
</h3>
|
||||
|
||||
<div className="prose prose-lg max-w-none">
|
||||
<p className="text-lg leading-relaxed text-muted-foreground">
|
||||
{detailDescription}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="pt-8">
|
||||
<Button variant="outline" size="lg" className="group gap-2">
|
||||
{buttonText}
|
||||
<ArrowRight className="size-4 transition-transform rtl:rotate-180" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
|
||||
export { Project2d };
|
||||
Reference in New Issue
Block a user