reui-blocks/blocks/project8e.tsx

"use client";

import { motion } from "framer-motion";

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

interface Project8eProps {
  className?: string;
}

const Project8e = ({ className }: Project8eProps) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
      <div className="relative min-h-screen">
        <div
          className="absolute inset-0 bg-cover bg-center bg-no-repeat"
          style={{
            backgroundImage:
              "url('/block-media/shadcnblocks/block/photos/glitch-portrait-pir7z.jpg')",
          }}
        >
          <div className="absolute inset-0 bg-black/40" />
        </div>

        <div className="relative z-10 flex min-h-screen items-center justify-center py-32">
          <motion.div
            className="container"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.8 }}
          >
            <div className="text-center">
              <motion.h1
                className="mb-4 text-3xl font-bold tracking-tight text-white 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-white/80 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>
        </div>
      </div>

      <div className="bg-white py-32">
        <motion.div
          className="container"
          initial={{ opacity: 0, y: 30 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.8, delay: 0.8 }}
        >
          <div className="grid w-full grid-cols-1 text-start md:grid-cols-2">
            <div className="space-y-2">
              <h3 className="text-lg font-semibold text-foreground">
                خلاقیت
              </h3>
            </div>

            <div className="space-y-6">
              <div className="flex justify-between">
                <p className="text-2xl text-muted-foreground">۲۲۴</p>
                <h4 className="text-sm font-semibold text-foreground">
                  منطقه خلیج سان‌فرانسیسکو
                </h4>
              </div>

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

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

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

export { Project8e };