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

2025-12-03 16:48:15 +03:30
commit 242161dcdb
115 changed files with 21920 additions and 0 deletions
@@ -0,0 +1,149 @@
+"use client";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+import {
+  ChartBarIncreasingIcon,
+  Database,
+  Fingerprint,
+  IdCard,
+} from "lucide-react";
+import Image from "next/image";
+import { useState } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { BorderBeam } from "./ui/border-beam";
+
+export default function Features() {
+  type ImageKey = "item-1" | "item-2" | "item-3" | "item-4";
+  const [activeItem, setActiveItem] = useState<ImageKey>("item-1");
+
+  const images = {
+    "item-1": {
+      image: "/charts.png",
+      alt: "Database visualization",
+    },
+    "item-2": {
+      image: "/music.png",
+      alt: "Security authentication",
+    },
+    "item-3": {
+      image: "/mail2.png",
+      alt: "Identity management",
+    },
+    "item-4": {
+      image: "/payments.png",
+      alt: "Analytics dashboard",
+    },
+  };
+
+  return (
+    <section className="bg-white py-12 md:py-20 lg:py-32">
+      <div className="bg-linear-to-b absolute inset-0 -z-10 sm:inset-6 sm:rounded-b-3xl dark:block dark:to-[color-mix(in_oklab,var(--color-zinc-900)_75%,var(--color-background))]"></div>
+      <div className="mx-auto max-w-5xl space-y-8 px-6 md:space-y-16 lg:space-y-20 dark:[--color-border:color-mix(in_oklab,var(--color-white)_10%,transparent)]">
+        <div className="relative z-10 mx-auto max-w-2xl space-y-6 text-center">
+          <h2 className="text-balance text-2xl font-semibold md:text-3xl lg:text-4xl leading-relaxed tracking-normal">
+            پایه و اساس ارتباطات هوشمند
+          </h2>
+          <p className="leading-relaxed tracking-normal">
+            پلتفرم ما برای اتصال آسان میان سیستم‌ها، APIها و سرویس‌های داخلی شما طراحی شده است.
+            از یکپارچه‌سازی داده‌ها و احراز هویت گرفته تا پردازش رویدادها و ارسال پیام در کانال‌هایی مثل تلگرام، واتساپ یا حتی سرویس‌های اختصاصی — همه‌چیز با دقت و مقیاس‌پذیری بالا مدیریت می‌شود تا توسعه‌دهندگان و کسب‌وکارها بتوانند سریع‌تر نوآوری کنند.
+          </p>
+        </div>
+
+        <div className="grid gap-12 sm:px-12 md:grid-cols-2 lg:gap-20 lg:px-0">
+          <Accordion
+            type="single"
+            value={activeItem}
+            onValueChange={(value) => setActiveItem(value as ImageKey)}
+            className="w-full"
+          >
+            <AccordionItem value="item-1">
+              <AccordionTrigger>
+                <div className="flex items-center gap-2 text-base">
+                  <Database className="size-4" />
+                  تجمیع پایگاه داده
+                </div>
+              </AccordionTrigger>
+              <AccordionContent>
+                <p className="leading-relaxed tracking-normal">
+                  ما داده‌های موردنیاز شما را از سیستم‌های مختلف جمع‌آوری و هماهنگ می‌کنیم؛ از دیتابیس‌های محلی تا APIهای خارجی. این قابلیت برای گزارش‌گیری، اتوماسیون و ایجاد یک نمای واحد از اطلاعات کلیدی کسب‌وکار ضروری است.
+                </p>
+              </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-2">
+              <AccordionTrigger>
+                <div className="flex items-center gap-2 text-base">
+                  <Fingerprint className="size-4" />
+                  احراز هویت پیشرفته
+                </div>
+              </AccordionTrigger>
+              <AccordionContent>
+                <p className="leading-relaxed tracking-normal">
+                  سیستم احراز هویت امن و منعطف که از انواع روش‌ها پشتیبانی می‌کند—از OAuth تا توکن‌های اختصاصی—تا بتوانید کاربران، سرویس‌ها و اپلیکیشن‌های خود را با کمترین پیچیدگی مدیریت کنید.
+                </p>
+              </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-3">
+              <AccordionTrigger>
+                <div className="flex items-center gap-2 text-base">
+                  <IdCard className="size-4" />
+                  مدیریت هویت
+                </div>
+              </AccordionTrigger>
+              <AccordionContent>
+                <p className="leading-relaxed tracking-normal">
+                  مدیریت یکپارچه کاربران، نقش‌ها و مجوزها در همه سیستم‌ها. هر تغییری در یک سرویس، بلافاصله در سایر سرویس‌های متصل هم منعکس می‌شود.
+                </p>
+              </AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-4">
+              <AccordionTrigger>
+                <div className="flex items-center gap-2 text-base">
+                  <ChartBarIncreasingIcon className="size-4" />
+                  داشبورد تحلیل
+                </div>
+              </AccordionTrigger>
+              <AccordionContent>
+                <p className="leading-relaxed tracking-normal">
+                  داده‌های شما به گزارش‌ها و نمودارهای قابل‌درک تبدیل می‌شود؛ چه برای نمایش فروش ماهانه یک فروشگاه، چه برای نشان دادن آمار بازدید یک سایت، یا تحلیل رفتار کاربران در یک ربات تلگرام.
+                </p>
+              </AccordionContent>
+            </AccordionItem>
+          </Accordion>
+
+          <div className="bg-background relative flex overflow-hidden rounded-3xl border p-2">
+            <div className="w-15 absolute inset-0 right-0 ml-auto border-l bg-[repeating-linear-gradient(-45deg,var(--color-border),var(--color-border)_1px,transparent_1px,transparent_8px)]"></div>
+            <div className="aspect-76/59 bg-background relative w-[calc(3/4*100%+3rem)] rounded-2xl">
+              <AnimatePresence mode="wait">
+                <motion.div
+                  key={`${activeItem}-id`}
+                  initial={{ opacity: 0, y: 6, scale: 0.98 }}
+                  animate={{ opacity: 1, y: 0, scale: 1 }}
+                  exit={{ opacity: 0, y: 6, scale: 0.98 }}
+                  transition={{ duration: 0.2 }}
+                  className="size-full overflow-hidden rounded-2xl border bg-zinc-900 shadow-md"
+                >
+                  <Image
+                    src={images[activeItem].image}
+                    className="size-full object-cover object-left-top dark:mix-blend-lighten"
+                    alt={images[activeItem].alt}
+                    width={1207}
+                    height={929}
+                  />
+                </motion.div>
+              </AnimatePresence>
+            </div>
+            <BorderBeam
+              duration={6}
+              size={200}
+              className="from-transparent via-yellow-700 to-transparent dark:via-white/50"
+            />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}