import React from "react";

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

interface Project4cProps {
  className?: string;
}

const Project4c = ({ className }: Project4cProps) => {
  return (
    <section dir="rtl" lang="fa" className={cn("py-16", className)}>
      <div className="relative mb-20">
        <div className="relative h-screen max-h-[80vh] overflow-hidden">
          <img
            src="/block-media/shadcnblocks/block/photos/pressed-juice/devin-avery-BRVqq2uak4E-unsplash.jpg"
            alt="طراحی لوگو و سیستم تایپوگرافی"
            className="h-full w-full object-cover"
          />
          <div className="absolute inset-0 bg-black/40"></div>
          <div className="absolute inset-0 flex items-center justify-center text-center text-white">
            <div className="max-w-4xl px-8">
              <p className="mb-4 text-sm font-semibold tracking-widest opacity-90">طراحی دیزاین سیستم</p>
              <h1 className="mb-6 text-6xl font-bold md:text-8xl lg:text-9xl">جهت طراحی</h1>
              <p className="mx-auto max-w-3xl text-xl leading-relaxed opacity-90 md:text-2xl">بازطراحی کامل رابط یک محصول سامانه ابری ممتاز با بلاک‌های آماده ری یو آی، با محوریت سرعت و تجربه کاربری.</p>
            </div>
          </div>
        </div>
      </div>

      <div className="container max-w-4xl">
        <div className="mb-16 border-b pb-12 text-start">
          <div className="flex flex-wrap items-start justify-between gap-8">
            <div className="space-y-6">
              <div>
                <p className="mb-2 text-xs font-semibold tracking-wider text-muted-foreground">نتایج و دستاوردها</p>
                <p className="text-lg font-medium">مایا چن</p>
              </div>
              <div>
                <p className="mb-2 text-xs font-semibold tracking-wider text-muted-foreground">
                  صنعت و حوزه
                </p>
                <p className="text-lg font-medium">پالت رنگ و توکن‌های طراحی</p>
              </div>
              <div>
                <p className="mb-2 text-xs font-semibold tracking-wider text-muted-foreground">
                  سال همکاری پروژه
                </p>
                <p className="text-lg font-medium">۲۲۴</p>
              </div>
            </div>
            <div className="text-end">
              <p className="mb-2 text-xs font-semibold tracking-wider text-muted-foreground">
                زمان مطالعه
              </p>
              <p className="text-lg font-medium">۵ دقیقه</p>
            </div>
          </div>
        </div>

        <article className="prose prose-lg prose-gray max-w-none text-start">
          <p className="lead text-2xl leading-relaxed">نووا از ما خواست رابطی بسازیم که در بازار رقابتی ابزارهای سامانه ابری متمایزش کند. چالش کسب‌وکار ما این بود که سرعت، کیفیت تجربه کاربری و حس حرفه‌ای بودن را در هر نقطه از محصول منتقل کنیم.</p>

          <h2>چالش کسب‌وکار</h2>

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

          <blockquote>
            <p>«باید رابطی می‌ساختیم که با بلاک‌های آماده ری یو آی سریع پیاده شود و در عین حال تجربه onboarding منحصربه‌فرد نووا را حفظ کند.»</p>
          </blockquote>

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

          <figure className="not-prose -mx-8 my-16 sm:-mx-16">
            <img
              src="/block-media/shadcnblocks/block/photos/pressed-juice/devin-avery-3XSkkuic3Pg-unsplash.jpg"
              alt="بازخورد مثبت کاربران"
              className="w-full rounded-lg"
            />
            <figcaption className="mt-4 px-8 text-center text-sm text-muted-foreground italic sm:px-16">کامپوننت‌های پایه و توکن‌های طراحی، شالوده تجربه اصیل نووا را شکل می‌دهند.</figcaption>
          </figure>

          <h2>رویکرد راهبردی</h2>

          <p>فرآیند ما با تحقیق گسترده کاربر و مصاحبه با تیم‌ها آغاز شد تا نیازهای محصول را بفهمیم. دیزاین سیستم را طوری تدوین کردیم که نووا را در تقاطع کیفیت حرفه‌ای و سادگی اصیل قرار دهد.</p>

          <h3>روش طراحی</h3>

          <p>رویکردی نظام‌مند پیش گرفتیم تا هر نقطه تماس محصول، ارزش‌ها و جایگاه نووا را تقویت کند:</p>

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

          <div className="not-prose my-16 grid gap-8 sm:-mx-8">
            <img
              src="/block-media/shadcnblocks/block/photos/pressed-juice/devin-avery-dxIzIveffLE-unsplash.jpg"
              alt="فرآیند طراحی نووا"
              className="w-full rounded-lg"
            />
            <img
              src="/block-media/shadcnblocks/block/photos/pressed-juice/devin-avery-gf8m6ffBG5s-unsplash.jpg"
              alt="توسعه محصول نووا"
              className="w-full rounded-lg"
            />
          </div>

          <h2>افزایش سرعت توسعه</h2>

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

          <div className="not-prose my-12 grid grid-cols-3 gap-8 rounded-lg bg-muted p-8 text-center">
            <div>
              <div className="text-3xl font-bold">۴۰٪</div>
              <div className="text-sm text-muted-foreground">یکپارچه‌سازی جدید فروشگاهی</div>
            </div>
            <div>
              <div className="text-3xl font-bold">۱۵+</div>
              <div className="text-sm text-muted-foreground">راهنمای دیزاین سیستم و استراتژی عرضه</div>
            </div>
            <div>
              <div className="text-3xl font-bold">۸۵٪</div>
              <div className="text-sm text-muted-foreground"> ساخت کامپوننت‌های پایه با ری یو آی</div>
            </div>
          </div>

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

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

export { Project4c };