import React from "react";

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

interface Project4Props {
  className?: string;
}

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

          <div className="flex flex-wrap gap-12 text-sm">
            <div>
              <p className="font-semibold tracking-wider text-muted-foreground">
                مدیر خلاق
              </p>
              <p className="mt-2 text-lg font-medium">مایا چن</p>
            </div>
            <div>
              <p className="font-semibold tracking-wider text-muted-foreground">
                صنعت
              </p>
              <p className="mt-2 text-lg font-medium">ابزار توسعه (سامانه ابری)</p>
            </div>
            <div>
              <p className="font-semibold tracking-wider text-muted-foreground">
                سال همکاری
              </p>
              <p className="mt-2 text-lg 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 max-w-4xl text-start">
        <div className="prose prose-lg mb-16 max-w-none">
          <p className="lead">رویکرد ما با تحقیق گسترده کاربر و مصاحبه با تیم‌ها آغاز شد تا نیازهای واقعی محصول را بفهمیم. دیزاین سیستم را طوری تدوین کردیم که نووا را در تقاطع کیفیت حرفه‌ای و سادگی اصیل قرار دهد.</p>
        </div>

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

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

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

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

            <div className="not-prose -mx-8 my-12 sm:-mx-16 lg:-mx-32">
              <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>فرآیند</h2>

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

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

            <h2>نتیجه و شاخص‌ها</h2>

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

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

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

            <div className="not-prose -mx-8 my-12 sm:-mx-16 lg:-mx-32">
              <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>
    </section>
  );
};

export { Project4 };