Initial import of 1407 block sources under blocks/

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-11 21:21:29 +03:30
commit 85836ef183
1412 changed files with 303567 additions and 0 deletions
@@ -0,0 +1,108 @@
+"use client";
+
+import { AnimatePresence, motion } from "framer-motion";
+import React, { useState } from "react";
+
+import { useGoogleFont } from "@/hooks/use-google-font";
+import { cn } from "@/lib/utils";
+
+interface Process4Props {
+  className?: string;
+}
+
+const Process4 = ({ className }: Process4Props) => {
+  const process = [
+    {
+      title: "انتخاب پلن",
+      description:
+        "پلن متناسب با نیاز و بودجه خود را انتخاب کنید تا مسیر همکاری و زمان‌بندی پروژه از همان ابتدا مشخص شود.",
+      image: "/block-media/shadcnblocks/block/guri4/img14.png",
+    },
+    {
+      title: "ثبت درخواست",
+      description:
+        "جزئیات پروژه را برای ما ارسال کنید تا تیم ما بررسی کند و در کوتاه‌ترین زمان برای هماهنگی با شما تماس بگیرد.",
+      image: "/block-media/shadcnblocks/block/guri4/img10.png",
+    },
+    {
+      title: "تحویل پروژه",
+      description:
+        "پروژه آماده را در موعد توافق‌شده تحویل بگیرید و از کیفیت کار و پشتیبانی پس از تحویل اطمینان حاصل کنید.",
+      image: "/block-media/shadcnblocks/block/guri4/img11.png",
+    },
+  ];
+
+  const [active, setActive] = useState<number | null>(0);
+
+  useGoogleFont("Antonio");
+
+  return (
+    <section
+      dir="rtl"
+      lang="fa"
+      className={cn("bg-background py-32", className)}
+      style={
+        {
+          "--font-mono": "Antonio",
+        } as React.CSSProperties
+      }
+    >
+      <div className="container">
+        <div className="grid grid-cols-1 gap-5 lg:grid-cols-6 lg:gap-20">
+          <div className="top-10 col-span-2 h-fit w-fit gap-3 space-y-7 py-8 lg:sticky">
+            <h1 className="text-start text-2xll font-semibold tracking-tight lg:text-2xll">
+              فرآیند
+              <sup className="align-top font-mono text-lg tracking-tight text-foreground/40">
+                ۰۰۰۳
+              </sup>
+            </h1>
+            <p className="text-start text-base text-foreground/50">
+              سه مرحله ساده از انتخاب تا تحویل  همکاری با ما سریع، شفاف و
+              بدون پیچیدگی است.
+            </p>
+          </div>
+          <ul className="relative col-span-4 w-full space-y-10">
+            {process.map((step, index) => (
+              <li
+                onMouseEnter={() => setActive(index)}
+                key={index}
+                className={cn(
+                  "relative flex w-full max-w-xl cursor-pointer flex-col justify-between gap-10 rounded-3xl bg-background p-10 md:flex-row lg:items-center ltr:ml-auto ltr:mr-20 rtl:mr-auto rtl:ml-20",
+                  index === active ? "bg-background" : "lg:bg-transparent",
+                )}
+              >
+                <AnimatePresence mode="wait">
+                  {index === active && (
+                    <motion.img
+                      key={step.image}
+                      initial={{ opacity: 0, y: -10 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: -10 }}
+                      transition={{ duration: 0.3 }}
+                      src={step.image}
+                      alt={step.title}
+                      className="absolute top-0 size-30 -translate-y-1/2 rounded-2xl object-cover ltr:right-0 ltr:translate-x-1/4 lg:size-40 ltr:lg:translate-x-1/2 rtl:left-0 rtl:-translate-x-1/4 rtl:lg:-translate-x-1/2"
+                    />
+                  )}
+                </AnimatePresence>
+                <div>
+                  <h2 className="mb-4 text-start font-bold tracking-tight lg:text-3xl">
+                    مرحله {(index + 1).toLocaleString("fa-IR")}
+                  </h2>
+                  <h3 className="mb-4 text-start text-xl font-semibold tracking-tighter lg:text-xl">
+                    {step.title}
+                  </h3>
+                  <p className="line-clamp-2 text-start text-foreground/50">
+                    {step.description}
+                  </p>
+                </div>
+              </li>
+            ))}
+          </ul>
+        </div>
+      </div>
+    </section>
+  );
+};
+
+export { Process4 };