reui-blocks/blocks/project2.tsx

"use client";

import { ArrowRight } from "lucide-react";

import { Button } from "@/components/ui/button";
import { cn } from "@/lib/utils";

interface Project2Props {
  title: string;
  title2?: string;
  year: string;
  category: string;
  client: string;
  imageSrc: string;
  imageAlt: string;
  overviewHeading: string;
  mainDescription: string;
  detailDescription: string;
  buttonText: string;
  className?: string;
}

const Project2 = ({
  title = "دیجیتال",
  title2 = "تیم",
  year = "«۲۲۴»",
  category = "«دیزاین سیستم»",
  client = "«استودیو محصول»",
  imageSrc = "/block-media/shadcnblocks/block/photos/artistic-portrait-glitch-yqp6z.png",
  imageAlt = "میز کار طراح با ابزارها و عناصر دیزاین سیستم",
  overviewHeading = "مرور پروژه",
  mainDescription = "یک رابط پویا که KPIهای فروش، نرخ تبدیل و عملکرد تیم را در یک داشبورد یکپارچه نمایش می‌دهد.",
  detailDescription = "این پروژه بر یک صفحه فرود محصول متمرکز است که برای بازتاب روح نوآورانه و پویای برند طراحی شده است. رابط با گرادیان‌های نرم و میکروانیمیشن‌های ظریف ساخته شده تا حس حرکت و مدرن‌بودن را منتقل کند. ترکیب تایپوگرافی درشت و تم تیره، هویت آینده‌نگر برند را تجسم می‌کند و چیدمان واکنش‌گرا تجربه‌ای یکدست و به‌یادماندنی می‌سازد. این رابط با بلاک‌های آماده shadcn پیاده شده تا ترکیبی از خلاقیت، سرعت و کیفیت را به نمایش بگذارد.",
  buttonText = "تماس با ما",
  className,
}: Project2Props) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="container">
        <div className="py-12 text-start">
          <div>
            <h1 className="text-6xl leading-none font-light tracking-tight text-foreground md:text-8xl lg:text-9xl">
              {title}
              {title2 && (
                <>
                  <br />
                  {title2}
                </>
              )}
            </h1>
          </div>

          <div className="mt-12 grid grid-cols-3 text-sm tracking-wider text-muted-foreground md:grid-cols-6">
            <div>
              <span className="block">سال همکاری</span>
              <span className="text-foreground">{year}</span>
            </div>
            <div>
              <span className="block">حوزه</span>
              <span className="text-foreground">{category}</span>
            </div>
            <div className="ms-16">
              <span className="block">سازمان مشتری</span>
              <span className="text-foreground">{client}</span>
            </div>
          </div>
        </div>

        <div className="relative">
          <div className="aspect-[16/10] overflow-hidden">
            <img
              src={imageSrc}
              alt={imageAlt}
              className="h-full w-full object-cover"
            />
          </div>
        </div>

        <div className="mx-auto max-w-5xl px-6 py-16 text-start md:px-12 lg:px-24">
          <div>
            <h2 className="mb-8 text-sm tracking-wider text-foreground">
              {overviewHeading}
            </h2>
          </div>

          <div>
            <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>
    </section>
  );
};

export { Project2 };