Initial commit: Next.js project with Persian content and custom styling

components/pricing.tsx

@@ -0,0 +1,117 @@
+import { Button } from "@/components/ui/button";
+import { Check } from "lucide-react";
+import Link from "next/link";
+
+export default function Pricing() {
+  return (
+    <div className="relative bg-white py-16 md:py-32">
+      <div className="mx-auto max-w-5xl px-6">
+        <div className="mx-auto max-w-2xl text-center">
+          <h1 className="text-balance text-3xl font-semibold md:text-4xl lg:text-5xl leading-relaxed tracking-normal">
+            قیمت‌گذاری
+          </h1>
+          <p className="mt-4 text-lg leading-relaxed tracking-normal text-muted-foreground">
+            قیمت‌ها بر اساس نوع سرویس و بازه زمانی تعیین می‌شوند
+          </p>
+        </div>
+        <div className="mt-8 md:mt-20">
+          <div className="bg-card relative rounded-3xl border shadow-2xl shadow-zinc-950/5">
+            <div className="grid items-center gap-12 divide-y p-12 md:grid-cols-2 md:divide-x md:divide-y-0">
+              <div className="pb-12 text-center md:pb-0 md:pe-12">
+                <h3 className="text-2xl font-semibold leading-relaxed tracking-normal">پکیج سازمانی</h3>
+                <p className="mt-2 text-lg leading-relaxed tracking-normal">برای شرکت شما با هر اندازه‌ای</p>
+                
+                <div className="mt-8 rounded-2xl border bg-muted/30 p-6">
+                  <p className="text-muted-foreground text-sm leading-relaxed tracking-normal">
+                    قیمت‌گذاری ما بر اساس نیازهای خاص شما انجام می‌شود. عوامل موثر در تعیین قیمت شامل:
+                  </p>
+                  <ul className="mt-4 space-y-2 text-right text-sm leading-relaxed tracking-normal">
+                    <li className="flex items-start gap-2">
+                      <span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-primary" />
+                      <span className="text-muted-foreground">نوع و تعداد سرویس‌های مورد نیاز</span>
+                    </li>
+                    <li className="flex items-start gap-2">
+                      <span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-primary" />
+                      <span className="text-muted-foreground">بازه زمانی استفاده (ماهانه، سالانه)</span>
+                    </li>
+                    <li className="flex items-start gap-2">
+                      <span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-primary" />
+                      <span className="text-muted-foreground">حجم داده و ترافیک</span>
+                    </li>
+                    <li className="flex items-start gap-2">
+                      <span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-primary" />
+                      <span className="text-muted-foreground">نیاز به پشتیبانی و سفارشی‌سازی</span>
+                    </li>
+                  </ul>
+                </div>
+
+                <div className="flex justify-center mt-8">
+                  <Button asChild size="lg">
+                    <Link href="#">دریافت پیشنهاد قیمت</Link>
+                  </Button>
+                </div>
+
+                <p className="text-muted-foreground mt-8 text-sm leading-relaxed tracking-normal">
+                  برای دریافت پیشنهاد قیمت دقیق، با ما تماس بگیرید تا بر اساس نیازهای شما بهترین راهکار را پیشنهاد دهیم.
+                </p>
+              </div>
+              <div className="relative">
+                <ul role="list" className="space-y-4">
+                  {[
+                    "تجمیع پایگاه داده و یکپارچه‌سازی",
+                    "احراز هویت و مدیریت هویت پیشرفته",
+                    "داشبورد تحلیل و گزارش‌گیری",
+                    "ارتباطات چندکاناله (تلگرام، واتساپ و ...)",
+                    "اتوماسیون فرآیندها و workflow",
+                    "پشتیبانی ۲۴/۷ و مستندات کامل",
+                    "ذخیره‌سازی نامحدود",
+                    "API و Webhooks نامحدود"
+                  ].map((item, index) => (
+                    <li key={index} className="flex items-center gap-2 leading-relaxed tracking-normal">
+                      <Check className="size-4 text-primary shrink-0" />
+                      <span>{item}</span>
+                    </li>
+                  ))}
+                </ul>
+                <p className="text-muted-foreground mt-6 text-sm leading-relaxed tracking-normal">
+                  ما راهکارهای سفارشی برای کسب‌وکارهای مختلف ارائه می‌دهیم. 
+                  تیم ما آماده است تا بر اساس نیازهای خاص شما، بهترین پکیج را طراحی کند.
+                </p>
+                <div className="mt-12 flex flex-wrap items-center justify-between gap-6">
+                  <img
+                    className="h-5 w-fit dark:invert"
+                    src="https://html.tailus.io/blocks/customers/nvidia.svg"
+                    alt="Nvidia Logo"
+                    height="20"
+                    width="auto"
+                  />
+                  <img
+                    className="h-4 w-fit dark:invert"
+                    src="https://html.tailus.io/blocks/customers/column.svg"
+                    alt="Column Logo"
+                    height="16"
+                    width="auto"
+                  />
+                  <img
+                    className="h-4 w-fit dark:invert"
+                    src="https://html.tailus.io/blocks/customers/github.svg"
+                    alt="GitHub Logo"
+                    height="16"
+                    width="auto"
+                  />
+                  <img
+                    className="h-5 w-fit dark:invert"
+                    src="https://html.tailus.io/blocks/customers/nike.svg"
+                    alt="Nike Logo"
+                    height="20"
+                    width="auto"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}