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,121 @@
+import {
+  Blocks,
+  CalendarClock,
+  ChartNoAxesCombined,
+  SquarePen,
+} from "lucide-react";
+
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+
+const FEATURES_DATA = [
+  {
+    title: "پیشنهاد عنوان",
+    description:
+      "ساختار عنوان و توضیحات را برای کلیک بیشتر بهینه کنید.",
+    icon: SquarePen,
+    image: "/block-media/shadcnblocks/block/placeholder-1.svg",
+    imageAlt: "داشبورد SEO",
+  },
+  {
+    title: "تحلیل کلمه کلیدی",
+    description:
+      "کلمات با پتانسیل بالا را پیدا کنید و استراتژی محتوا را بر همان اساس بچینید.",
+    icon: CalendarClock,
+    image: "/block-media/shadcnblocks/block/placeholder-2.svg",
+    imageAlt: "تحلیل کلمات کلیدی",
+  },
+  {
+    title: "ممیزی فنی",
+    description:
+      "خطاهای فنی که رتبه را پایین می‌آورد را سریع شناسایی و رفع کنید.",
+    icon: ChartNoAxesCombined,
+    image: "/block-media/shadcnblocks/block/placeholder-3.svg",
+    imageAlt: "گزارش رتبه جستجو",
+  },
+];
+
+interface Feature167Props {
+  className?: string;
+}
+
+const Feature167 = ({ className }: Feature167Props) => {
+  return (
+    <section dir="rtl" lang="fa" className={cn("py-32", className)}>
+      <div className="border-y">
+        <div className="container flex flex-col gap-6 border-x py-4 text-right max-lg:border-x lg:py-8">
+          <Badge variant="outline" className="w-fit gap-1">
+            <Blocks />
+            ترافیک ارگانیک
+          </Badge>
+
+          <h2 className="text-3xl leading-tight tracking-tight text-balance md:text-xl lg:text-2xll">
+            رتبه کلمات کلیدی را پیگیری کنید
+          </h2>
+          <p className="max-w-[600px] text-pretty text-muted-foreground">
+            تحلیل فنی، محتوا و رقبا در یک ابزار جمع می‌شود. تیم محتوا می‌داند روی کدام صفحه و کلمه باید تمرکز کند.
+          </p>
+        </div>
+      </div>
+
+      <div className="container border-x px-0">
+        <Tabs
+          dir="rtl"
+          defaultValue={FEATURES_DATA[0].title}
+          className="flex flex-col items-stretch gap-0 divide-y rounded-none lg:flex-row! lg:divide-x lg:divide-y-0"
+        >
+          <TabsList className="flex h-auto! w-full flex-col rounded-none border-b bg-transparent p-0 lg:w-1/3 lg:border-e lg:border-b-0">
+            {FEATURES_DATA.map((item, index, array) => (
+              <TabsTrigger
+                key={item.title}
+                value={item.title}
+                className={cn(
+                  "group relative flex w-full rounded-none px-8 py-4 text-right whitespace-normal data-[state=active]:shadow-none! lg:px-6 lg:py-5",
+                  index !== array.length - 1 && "border-b",
+                )}
+              >
+                <div className="absolute start-0 bottom-[-1px] z-10 h-[2px] w-0 bg-linear-to-e from-blue-600 via-sky-300 to-transparent transition-all duration-300 group-data-[state=active]:w-1/2" />
+                <div className="flex w-full flex-col text-right">
+                  <div className="flex items-center gap-1.5">
+                    <item.icon className="size-4" />
+                    <h3 className="text-lg tracking-tight">{item.title}</h3>
+                  </div>
+                  <p className="mt-2.5 text-right text-sm text-pretty text-muted-foreground">
+                    {item.description}
+                  </p>
+                </div>
+              </TabsTrigger>
+            ))}
+          </TabsList>
+
+          <div className="relative flex-1">
+            <div className="h-[300px] lg:h-[400px]">
+              {FEATURES_DATA.map((item) => (
+                <TabsContent
+                  key={item.title}
+                  value={item.title}
+                  className="absolute inset-0 m-0 rounded-none p-6 transition-all duration-500 data-[state=inactive]:pointer-events-none data-[state=inactive]:opacity-0"
+                >
+                  <div className="flex h-full">
+                    <img
+                      src={item.image}
+                      alt={item.imageAlt}
+                      className="h-full w-full object-cover"
+                    />
+                  </div>
+                </TabsContent>
+              ))}
+            </div>
+          </div>
+        </Tabs>
+      </div>
+
+      <div className="h-8 w-full border-y md:h-12 lg:h-[112px]">
+        <div className="container h-full w-full border-x" />
+      </div>
+    </section>
+  );
+};
+
+export { Feature167 };