reui-blocks/blocks/project4a.tsx

import React from "react";

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

interface Project4aProps {
  className?: string;
}

const Project4a = ({ className }: Project4aProps) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-16", className)}>
      <div className="container max-w-7xl">
        <div className="grid grid-cols-1 gap-16 lg:grid-cols-4">
          <div className="text-start lg:col-span-1">
            <div className="space-y-8 lg:sticky lg:top-8">
              <div>
                <p className="mb-4 text-xs font-semibold tracking-widest text-muted-foreground">طراحی دیزاین سیستم</p>
                <h1 className="mb-4 text-4xl font-bold">نووا</h1>
                <p className="leading-relaxed text-muted-foreground">بازطراحی کامل رابط یک محصول سامانه ابری ممتاز با بلاک‌های آماده ری یو آی.</p>
              </div>

              <div className="space-y-6 border-t pt-8">
                <div>
                  <p className="mb-1 text-xs font-semibold tracking-wider text-muted-foreground">
                    مدیر خلاق
                  </p>
                  <p className="font-medium">مایا چن</p>
                </div>
                <div>
                  <p className="mb-1 text-xs font-semibold tracking-wider text-muted-foreground">
                    صنعت
                  </p>
                  <p className="font-medium">ابزار توسعه (سامانه ابری)</p>
                </div>
                <div>
                  <p className="mb-1 text-xs font-semibold tracking-wider text-muted-foreground">
                    سال همکاری
                  </p>
                  <p className="font-medium">۲۲۴</p>
                </div>
              </div>

              <nav className="border-t pt-8">
                <p className="mb-4 text-xs font-semibold tracking-wider text-muted-foreground">
                  بخش‌ها
                </p>
                <div className="space-y-2">
                  <a
                    href="#challenge"
                    className="block text-sm transition-colors hover:text-primary"
                  >
                    چالش کسب‌وکار
                  </a>
                  <a
                    href="#process"
                    className="block text-sm transition-colors hover:text-primary"
                  >
                    فرآیند
                  </a>
                  <a
                    href="#outcome"
                    className="block text-sm transition-colors hover:text-primary"
                  >
                    نتیجه و شاخص‌ها
                  </a>
                </div>
              </nav>
            </div>
          </div>

          <div className="text-start lg:col-span-3">
            <div className="mb-16">
              <img
                src="/block-media/shadcnblocks/block/photos/pressed-juice/devin-avery-BRVqq2uak4E-unsplash.jpg"
                alt="طراحی لوگو و سیستم تایپوگرافی"
                className="w-full rounded-lg"
              />
            </div>

            <div className="prose prose-lg max-w-none">
              <p className="lead">رویکرد ما با تحقیق گسترده کاربر و مصاحبه با تیم‌ها آغاز شد تا نیازهای واقعی محصول را بفهمیم. دیزاین سیستم را طوری تدوین کردیم که نووا را در تقاطع کیفیت حرفه‌ای و سادگی اصیل قرار دهد.</p>

              <h2 id="challenge">چالش کسب‌وکار</h2>

              <p>بازار ابزارهای سامانه ابری پر از محصولاتی است که خود را «سریع» و «ساده» معرفی می‌کنند. نووا باید با تجربه کاربری اصیل و کیفیت واقعی، در عین حال برای تیم‌های روزمره در دسترس بماند و از جمع متمایز شود.</p>

              <h3>تمایز در بازار</h3>
              <p>با توسعه آگاهانه محصول و یک دیزاین سیستم هدفمند، نووا امروز به‌عنوان مرجعی معتبر در فضای ابزارهای توسعه ایستاده و پیوندی پایدار با کاربران حرفه‌ای می‌سازد.</p>

              <h3>دسترس‌پذیری (a11y) ممتاز</h3>
              <p>تم و توکن‌های رنگ تمایزدهنده کلیدی محصول شد؛ رویکرد مینیمال اجازه داد محتوای داشبورد بدرخشد و در عین حال حس حرفه‌ای بودن حفظ شود.</p>

              <div className="not-prose my-16">
                <img
                  src="/block-media/shadcnblocks/block/photos/pressed-juice/devin-avery-jcHO600npH8-unsplash.jpg"
                  alt="مجموعه‌ای رنگارنگ از کامپوننت‌های آماده داشبورد"
                  className="w-full rounded-lg"
                />
                <p className="mt-4 text-center text-sm text-muted-foreground italic">محصول باید هم آن‌قدر حرفه‌ای باشد که اعتماد تیم‌ها را جلب کند، هم برای کاربران تازه‌کار از هر سطحی ساده و در دسترس بماند.</p>
              </div>

              <h2 id="process">فرآیند</h2>

              <p>دیزاین سیستم جدید، نووا را به‌عنوان محصولی حرفه‌ای و در عین حال صمیمی در فضای ابزارهای سامانه ابری جای داد. زیبایی‌شناسی تمیز و کاربرمحور با مخاطب هدف هم‌خوان شد و به ۴۰٪ افزایش در سرعت توسعه و یکپارچه‌سازی‌های قوی منجر شد.</p>

              <h3>روش طراحی ما</h3>
              <ol>
                <li>راهنمای دیزاین سیستم و استراتژی عرضه</li>
                <li>کاوش تجربه onboarding و پروتوتایپ</li>
                <li>نمای داشبورد نووا روی دسکتاپ</li>
                <li>پالت رنگ و توکن‌های طراحی</li>
                <li>تحقیق کاربر و استراتژی محصول</li>
              </ol>

              <h2 id="outcome">نتیجه و شاخص‌ها</h2>

              <p>نووا از ما خواست رابطی بسازیم که در بازار رقابتی ابزارهای سامانه ابری متمایزش کند. چالش کسب‌وکار ما این بود که سرعت، کیفیت تجربه کاربری و حس حرفه‌ای بودن را در هر نقطه از محصول منتقل کنیم.</p>

              <p>با پیام‌های مشابه زیاد در فضای ابزارهای سامانه ابری، باید جایگاهی منحصربه‌فرد پیدا می‌کردیم که سرعت توسعه نووا با بلاک‌های آماده و کیفیت تجربه کاربری‌اش را برجسته کند.</p>

              <p>پالت رنگ زنده نووا به تمایزدهنده کلیدی محصول تبدیل شد و وضوح و سلسله‌مراتب داده را در سراسر داشبورد تقویت کرد.</p>

              <div className="not-prose my-16">
                <img
                  src="/block-media/shadcnblocks/block/photos/pressed-juice/devin-avery-2tuH5dIqQEc-unsplash.jpg"
                  alt="نمایش دیزاین سیستم نووا"
                  className="w-full rounded-lg"
                />
                <p className="mt-4 text-center text-sm text-muted-foreground italic">دیزاین سیستم نهایی بر طراحی تمیز و مینیمال تأکید دارد تا محتوای محصول در مرکز توجه قرار گیرد.</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  );
};

export { Project4a };