reui-blocks/blocks/project4b.tsx

import React from "react";

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

interface Project4bProps {
  className?: string;
}

const Project4b = ({ className }: Project4bProps) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-16", className)}>
      <div className="container mb-20 max-w-6xl">
        <div className="text-center">
          <p className="mb-4 text-sm font-semibold tracking-widest text-muted-foreground">طراحی دیزاین سیستم</p>
          <h1 className="mb-6 text-5xl font-bold md:text-6xl lg:text-7xl">نووا</h1>
          <p className="mx-auto max-w-3xl text-xl leading-relaxed text-muted-foreground md:text-2xl">دیزاین سیستم نهایی بر طراحی تمیز و مینیمال تأکید دارد تا محتوای محصول در مرکز توجه قرار گیرد.</p>

          <div className="mt-12 flex justify-center gap-12 text-sm">
            <div>
              <p className="mb-1 font-semibold tracking-wider text-muted-foreground">
                مدیر خلاق
              </p>
              <p className="font-medium">مایا چن</p>
            </div>
            <div>
              <p className="mb-1 font-semibold tracking-wider text-muted-foreground">
                صنعت
              </p>
              <p className="font-medium">فرآیند طراحی نووا</p>
            </div>
            <div>
              <p className="mb-1 font-semibold tracking-wider text-muted-foreground">
                سال همکاری
              </p>
              <p className="font-medium">۲۲۴</p>
            </div>
          </div>
        </div>
      </div>

      <div className="mb-20">
        <div className="container max-w-7xl">
          <img
            src="/block-media/shadcnblocks/block/photos/pressed-juice/devin-avery-BRVqq2uak4E-unsplash.jpg"
            alt="طراحی لوگو و سیستم تایپوگرافی"
            className="w-full rounded-lg"
          />
        </div>
      </div>

      <div className="container mb-20 max-w-4xl">
        <div className="prose prose-lg mb-16 max-w-none text-center">
          <p className="lead">رویکرد ما با تحقیق گسترده کاربر و مصاحبه با تیم‌ها آغاز شد تا نیازهای واقعی محصول را بفهمیم. دیزاین سیستم را طوری تدوین کردیم که نووا را در تقاطع کیفیت حرفه‌ای و سادگی اصیل قرار دهد.</p>
        </div>
        <div className="container max-w-5xl">
          <img
            src="/block-media/shadcnblocks/block/photos/pressed-juice/devin-avery-3XSkkuic3Pg-unsplash.jpg"
            alt="ابزار توسعه (سامانه ابری)"
            className="w-full rounded-lg"
          />
        </div>
      </div>

      <div className="container mb-20 max-w-4xl text-start">
        <div className="prose prose-lg mb-16 max-w-none">
          <h2>چالش کسب‌وکار</h2>

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

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

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

        <div className="container max-w-5xl">
          <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>
      </div>

      <div className="container mb-20 max-w-4xl text-start">
        <div className="prose prose-lg mb-16 max-w-none">
          <h2>فرآیند</h2>

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

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

        <div className="container max-w-5xl">
          <img
            src="/block-media/shadcnblocks/block/photos/pressed-juice/devin-avery-dxIzIveffLE-unsplash.jpg"
            alt="کامپوننت‌های پایه نووا"
            className="w-full rounded-lg"
          />
        </div>
      </div>

      <div className="container mb-20 max-w-4xl text-start">
        <div className="prose prose-lg mb-16 max-w-none">
          <h2>نتیجه و شاخص‌ها</h2>

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

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

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

        <div className="container max-w-5xl">
          <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>
    </section>
  );
};

export { Project4b };