reui-blocks/blocks/project8d.tsx

"use client";

import { motion } from "framer-motion";

import { cn } from "@/lib/utils";

interface Project8dProps {
  className?: string;
}

const Project8d = ({ className }: Project8dProps) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <motion.div
        className="container max-w-5xl"
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        transition={{ duration: 0.8 }}
      >
        <div className="mb-20 text-center">
          <motion.h1
            className="mb-6 text-3xl font-bold tracking-tight text-foreground md:text-8xl"
            initial={{ opacity: 0, y: 30 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.2 }}
          >
            تایرل فشن
          </motion.h1>
          <motion.p
            className="text-xl text-muted-foreground md:text-2xl"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8, delay: 0.4 }}
          >ثبت زیبایی‌شناسی یک تم تیره نئو-نوآر.</motion.p>
        </div>

        <motion.div
          className="relative mb-20"
          initial={{ opacity: 0, scale: 0.95 }}
          animate={{ opacity: 1, scale: 1 }}
          transition={{ duration: 1, delay: 0.6 }}
        >
          <div className="relative aspect-[2/1] overflow-hidden rounded-lg">
            <img
              src="/block-media/shadcnblocks/block/photos/glitch-portrait-pir7z.jpg"
              alt="نمای خلاق رابط با تم پویا"
              className="h-full w-full object-cover"
            />
          </div>
        </motion.div>

        <motion.div
          className="space-y-16 text-start"
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.8 }}
        >
          <div className="grid grid-cols-1 gap-8 md:grid-cols-4">
            <div className="md:col-span-1">
              <h3 className="mb-2 text-lg font-semibold text-foreground">
                خلاقیت
              </h3>
              <p className="text-2xl text-muted-foreground">۲۲۴</p>
              <h4 className="mt-1 text-sm font-semibold text-foreground">
                منطقه خلیج سان‌فرانسیسکو
              </h4>
            </div>

            <div className="space-y-6 md:col-span-3">
              <p className="text-lg leading-relaxed text-foreground">در تقاطع فناوری و طراحی، این مجموعه آینده‌نگر مرزهای رابط‌های سنتی را جابه‌جا می‌کند. گرادیان‌های هولوگرافیک، سطوح شیشه‌ای (glassmorphism) و الگوهای هندسی، زیبایی‌شناسی سایبرپانک می‌آفرینند که عصر دیجیتال ما را بازتاب می‌دهد. این رابط از افکت‌های نور و سطوح بازتابنده بهره می‌برد تا حس آینده‌نگر را تقویت کند و هر صفحه را به بیانی از ظرافت فردا تبدیل کند.</p>

              <p className="text-lg leading-relaxed text-foreground">داشبورد سامانه مدیریت ارتباط با مشتری با طراحی مینیمال که KPIهای فروش، خط لوله معاملات و عملکرد تیم را در یک نمای یکپارچه نمایش می‌دهد. هر ویجت داده‌های زنده را از اتصال Salesforce و HubSpot دریافت می‌کند. نتیجه و شاخص‌ها، یک دیزاین سیستمی است که استانداردهای متعارف را به چالش کسب‌وکار می‌کشد و در عین حال تکامل سبک را جشن می‌گیرد.</p>
            </div>
          </div>

          <div className="border-t border-border pt-8">
            <div className="space-y-2 text-base text-muted-foreground">
              <h5 className="mb-4 font-medium text-foreground">عوامل پروژه (تیم)</h5>
              <div className="grid grid-cols-1 gap-2 md:grid-cols-2 lg:grid-cols-3">
                <p>مدیر خلاق: مایا چن</p>
                <p>طراح تجربه کاربری: الکس ریورا</p>
                <p>طراح رابط: جوردان کیم</p>
                <p>معمار فرانت‌اند: سام پاتل</p>
                <p>مهندس کیفیت (QA): کیسی ونگ</p>
                <p>مهندس دیزاین سیستم: رایلی مارتینز</p>
                <p>توسعه‌دهنده فرانت‌اند: تیلور بروکس</p>
              </div>
            </div>
          </div>
        </motion.div>
      </motion.div>
    </section>
  );
};

export { Project8d };