Initial import of 1407 block sources under blocks/

Co-authored-by: Cursor <cursoragent@cursor.com>

blocks/case-study8.tsx

@@ -0,0 +1,156 @@
+import { cn } from "@/lib/utils";
+
+const SIDEBAR_INFO = [
+  {
+    label: "شرکت",
+    value:
+      "ری یو آی با استفاده از ری یو آی یک سیستم طراحی منسجم ایجاد کرد و توانست سرعت توسعه رابط کاربری و کیفیت محصول را به شکل چشمگیری افزایش دهد.",
+    bordered: false,
+  },
+  {
+    label: "حوزه",
+    value: "فین‌تک",
+    bordered: false,
+  },
+  {
+    label: "موقعیت",
+    value: "لندن، بریتانیا",
+    bordered: true,
+  },
+  {
+    label: "اندازه شرکت",
+    value: "۱۱ تا ۵۰ نفر",
+    bordered: false,
+  },
+  {
+    label: "وب‌سایت",
+    value: (
+      <a href="#" className="underline hover:text-foreground">
+        نمونه.ایران
+      </a>
+    ),
+    bordered: false,
+  },
+  {
+    label: "موضوعات",
+    value: "سیستم طراحی، کامپوننت‌های رابط کاربری، ری یو آی",
+    bordered: false,
+  },
+];
+
+interface CaseStudy8Props {
+  className?: string;
+}
+
+const CaseStudy8 = ({ className }: CaseStudy8Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="container flex flex-col gap-12 lg:flex-row lg:gap-24">
+        <article className="mx-auto text-start">
+          <img
+            src="/block-media/shadcnblocks/block/placeholder-1.svg"
+            alt="پیش‌نمایش سیستم طراحی ری یو آی با ری یو آی"
+            className="mb-8 aspect-video w-full max-w-3xl rounded-lg border object-cover"
+          />
+          <div className="prose text-start dark:prose-invert">
+            <h1>چگونه ری یو آی با ری یو آی سیستم طراحی خود را ساخت</h1>
+            <p>
+              با رشد سریع محصول، حفظ یکپارچگی رابط کاربری دشوار شد. تیم ری یو آی با انتخاب ری یو آی به‌عنوان هسته سیستم طراحی، این چالش را برطرف کرد.
+                                      </p>
+            <h2>چرا ری یو آی؟</h2>
+            <p>
+              پس از بررسی گزینه‌های مختلف، shadcn/ui به دلیل انعطاف‌پذیری، مالکیت کامل کد و سازگاری با Tailwind CSS انتخاب شد.{" "}
+              <a href="#">معیارهای انتخاب</a> که مهم‌ترین معیارهای آن سرعت توسعه، توسعه‌پذیری و سفارشی‌سازی بود.
+                                      </p>
+            <blockquote>
+              «وقتی کامپوننت‌ها در اختیار تیم توسعه باشند، فاصله بین طراحی و
+              پیاده‌سازی به حداقل می‌رسد.»
+            </blockquote>
+            <h3>ساخت کتابخانه کامپوننت</h3>
+            <p>
+              کتابخانه کامپوننت‌ها در سه لایه طراحی شد تا توسعه محصول ساختارمند و مقیاس‌پذیر باشد:
+                                      </p>
+            <ul>
+              <li>پایه  دکمه‌ها، ورودی‌ها و فرم‌ها</li>
+              <li>میانی  جداول، کارت‌ها و ناوبری</li>
+              <li>پیشرفته  داشبوردها و جریان‌های چندمرحله‌ای</li>
+            </ul>
+            <p>
+              تمام کامپوننت‌ها پیش از انتشار از نظر طراحی، دسترس‌پذیری و کیفیت فنی بررسی می‌شدند تا تجربه‌ای یکپارچه برای کاربران ایجاد شود.
+                                      </p>
+            <h3>همکاری بین تیم طراحی و توسعه</h3>
+            <p>
+              طراحان و توسعه‌دهندگان با استفاده از توکن‌های طراحی مشترک، فاصله بین طراحی و پیاده‌سازی را کاهش دادند و انتشار نسخه‌های جدید را سریع‌تر کردند.
+                                      </p>
+            <p>
+              پس از سه ماه، بیش از ۸۰٪ صفحات جدید مستقیماً از کتابخانه داخلی
+              ساخته می‌شدند و زمان تحویل فیچرها به‌طور میانگین ۳۵٪ کاهش یافت.
+            </p>
+            <h3>نتایج و تأثیر</h3>
+            <p>
+              یکپارچگی بصری و سرعت توسعه در طول زمان بهبود قابل‌توجهی داشت:
+            </p>
+            <div>
+              <table>
+                <thead>
+                  <tr>
+                    <th>یکپارچگی بصری</th>
+                    <th>سرعت توسعه</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td>پایین</td>
+                    <td>کند</td>
+                  </tr>
+                  <tr className="m-0 border-t p-0 even:bg-muted">
+                    <td>در حال بهبود</td>
+                    <td>متوسط</td>
+                  </tr>
+                  <tr className="m-0 border-t p-0 even:bg-muted">
+                    <td>بالا</td>
+                    <td>سریع</td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+            <p>
+              امروزه سیستم طراحی ری یو آی به مرجع اصلی توسعه رابط کاربری تبدیل شده و هماهنگی میان تیم‌های طراحی، محصول و توسعه را تضمین می‌کند.
+                                      </p>
+            <p>
+              این تجربه نشان داد سرمایه‌گذاری روی سیستم طراحی، علاوه بر کاهش هزینه‌های نگهداری، سرعت توسعه و کیفیت تجربه کاربری را نیز در بلندمدت افزایش می‌دهد.
+                                      </p>
+          </div>
+        </article>
+
+        <aside className="text-start lg:max-w-[300px]">
+          <div className="flex flex-col items-start rounded-lg border border-border bg-accent py-6 md:py-8">
+            <div className="mb-8 px-6">
+              <img
+                src="/block-media/shadcnblocks/block/logos/company/fictional-company-logo-3.svg"
+                alt="لوگوی ری یو آی"
+                className="max-h-8 w-full"
+              />
+            </div>
+            {SIDEBAR_INFO.map((item) => (
+              <div
+                key={item.label}
+                className={cn(
+                  "mb-5 px-6 last:mb-0",
+                  item.bordered && "w-full border-t border-border pt-5",
+                )}
+              >
+                <div className="mb-2 text-xs font-semibold">{item.label}</div>
+                <div className="overflow-hidden text-xs text-muted-foreground md:text-sm">
+                  {item.value}
+                </div>
+              </div>
+            ))}
+          </div>
+        </aside>
+      </div>
+    </section>
+  );
+};
+
+export { CaseStudy8 };