a

2026-09-09 16:03:24 +03:30
parent ce2cf49edc
commit 71cd5c8072
16 changed files with 6191 additions and 190 deletions
@@ -0,0 +1,117 @@
+"use client";
+
+import { useRef } from "react";
+import { motion, Variants, useScroll, useTransform } from "framer-motion";
+
+// تعریف Variants با انیمیشن‌های نرم‌تر و روان‌تر
+const containerVariants: Variants = {
+  hidden: {
+    opacity: 0,
+    filter: "blur(8px)", // بلور اولیه کمی بیشتر برای حس نرم‌تر شدن
+  },
+  visible: {
+    opacity: 1,
+    filter: "blur(0px)",
+    transition: {
+      duration: 1.2, // زمان طولانی‌تر برای محو شدن بلور
+      when: "beforeChildren",
+      staggerChildren: 0.15, // فاصله زمانی کمی بیشتر بین ورود هر خط
+    },
+  },
+};
+
+const itemVariants: Variants = {
+  hidden: { y: 30, opacity: 0 }, // شروع از فاصله کمی پایین‌تر
+  visible: {
+    y: 0,
+    opacity: 1,
+    transition: {
+      duration: 1.2, // مدت زمان لغزش به بالا
+      // این منحنی (easeOutExpo) راز انیمیشن‌های نرم سبک اپل است
+      ease: [0.16, 1, 0.3, 1] as [number, number, number, number], 
+    },
+  },
+};
+
+export default function Hero() {
+  const ref = useRef<HTMLElement>(null);
+
+  // هوک‌ها برای افکت پارالاکس و محو شدن هنگام اسکرول
+  const { scrollYProgress } = useScroll({
+    target: ref,
+    offset: ["start start", "end start"],
+  });
+  const y = useTransform(scrollYProgress, [0, 1], ["0%", "50%"]);
+  const opacity = useTransform(scrollYProgress, [0, 0.8], [1, 0]);
+
+  return (
+    <section
+      ref={ref}
+      className="relative h-screen flex flex-col items-center justify-center overflow-hidden bg-gray-950"
+      onMouseMove={(e) => {
+        // آپدیت متغیرهای CSS برای موقعیت موس جهت افکت نورافکن
+        const { currentTarget, clientX, clientY } = e;
+        const { left, top } = currentTarget.getBoundingClientRect();
+        currentTarget.style.setProperty("--mouse-x", `${clientX - left}px`);
+        currentTarget.style.setProperty("--mouse-y", `${clientY - top}px`);
+      }}
+    >
+      {/* لایه پس‌زمینه: نورافکن (Spotlight) */}
+      <div
+        className="
+          pointer-events-none absolute -inset-px rounded-xl opacity-50
+          transition-opacity duration-300 
+          before:absolute before:inset-0 before:rounded-xl 
+          before:bg-[radial-gradient(600px_circle_at_var(--mouse-x)_var(--mouse-y),rgba(30,129,243,0.15),transparent_40%)]
+        "
+      />
+
+      {/* لایه پس‌زمینه: خطوط گرید */}
+      <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />
+
+      {/* کانتینر اصلی محتوا */}
+      <motion.div
+        style={{ y, opacity }}
+        variants={containerVariants}
+        initial="hidden"
+        animate="visible"
+        className="z-10 text-center w-full max-w-5xl mx-auto px-4"
+      >
+        <motion.div
+          variants={itemVariants}
+          className="mb-6 inline-block rounded-full border border-blue-500/30 bg-blue-500/10 px-4 py-1.5 text-sm text-blue-300"
+        >
+          توسعه نرم‌افزار با بالاترین کیفیت
+        </motion.div>
+
+        <motion.h1
+          variants={itemVariants}
+          className="text-5xl md:text-7xl font-bold tracking-tighter bg-clip-text text-transparent bg-gradient-to-b from-neutral-50 to-neutral-400 pb-4"
+        >
+          راهکارهای دیجیتال برای فردای شما
+        </motion.h1>
+
+        <motion.p
+          variants={itemVariants}
+          className="mt-4 text-lg text-neutral-400 max-w-2xl mx-auto"
+        >
+          ما با ترکیب خلاقیت و تکنولوژی‌های پیشرفته، نرم‌افزارهایی خلق می‌کنیم
+          که نه تنها نیازهای امروز شما را برآورده می‌کنند، بلکه مسیر رشد آینده
+          کسب‌وکار شما را هموار می‌سازند.
+        </motion.p>
+
+        <motion.div
+          variants={itemVariants}
+          className="mt-8 flex justify-center gap-4"
+        >
+          <button className="px-6 py-2 rounded-md bg-blue-600 text-white font-medium hover:bg-blue-700 transition-colors">
+            شروع همکاری
+          </button>
+          <button className="px-6 py-2 rounded-md border border-neutral-700 text-neutral-300 font-medium hover:bg-neutral-800 transition-colors">
+            مشاهده نمونه کارها
+          </button>
+        </motion.div>
+      </motion.div>
+    </section>
+  );
+}
@@ -0,0 +1,135 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Image from "next/image";
+
+// دیتای تستی پروژه‌ها (می‌توانید با دیتای واقعی جایگزین کنید)
+const projects = [
+  {
+    id: 1,
+    title: "سیستم مدیریت مالی فراز",
+    category: "نرم‌افزار سازمانی",
+    description: "یک پلتفرم یکپارچه برای مدیریت منابع مالی سازمان‌ها با داشبوردهای تحلیلی در لحظه.",
+    image: "/project-1.jpg", // این عکس‌ها را در پوشه public قرار دهید
+    color: "from-blue-500/20 to-purple-500/20",
+  },
+  {
+    id: 2,
+    title: "اپلیکیشن سلامت‌جو",
+    category: "اپلیکیشن موبایل",
+    description: "سیستم نوبت‌دهی و پایش سلامت بیماران با قابلیت یکپارچه‌سازی با گجت‌های پوشیدنی.",
+    image: "/project-2.jpg",
+    color: "from-emerald-500/20 to-teal-500/20",
+  },
+  {
+    id: 3,
+    title: "پلتفرم فروشگاهی نوین‌شاپ",
+    category: "تجارت الکترونیک",
+    description: "فروشگاه‌ساز ابری با معماری میکروسرویس و قابلیت مقیاس‌پذیری بالا برای ترافیک‌های سنگین.",
+    image: "/project-3.jpg",
+    color: "from-orange-500/20 to-red-500/20",
+  },
+  {
+    id: 4,
+    title: "اتوماسیون اداری هوشمند",
+    category: "هوش مصنوعی",
+    description: "سامانه اتوماسیون مبتنی بر هوش مصنوعی برای دسته‌بندی خودکار نامه‌ها و ارجاعات.",
+    image: "/project-4.jpg",
+    color: "from-indigo-500/20 to-blue-500/20",
+  },
+];
+
+// منحنی انیمیشن لوکس (همان که در Hero استفاده کردیم)
+const customEase: [number, number, number, number] = [0.16, 1, 0.3, 1];
+
+export default function Projects() {
+  return (
+    <section
+      className="relative min-h-screen py-32 flex flex-col items-center justify-center overflow-hidden bg-gray-950"
+      onMouseMove={(e) => {
+        const { currentTarget, clientX, clientY } = e;
+        const { left, top } = currentTarget.getBoundingClientRect();
+        currentTarget.style.setProperty("--mouse-x", `${clientX - left}px`);
+        currentTarget.style.setProperty("--mouse-y", `${clientY - top}px`);
+      }}
+    >
+      {/* افکت Spotlight و Grid (دقیقا مشابه Hero) */}
+      <div className="pointer-events-none absolute -inset-px opacity-50 before:absolute before:inset-0 before:bg-[radial-gradient(800px_circle_at_var(--mouse-x)_var(--mouse-y),rgba(255,255,255,0.06),transparent_40%)]" />
+      <div className="pointer-events-none absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />
+
+      <div className="z-10 w-full max-w-7xl mx-auto px-4 md:px-8">
+        {/* هدر بخش پروژه‌ها */}
+        <div className="mb-20 md:mb-32">
+          <motion.h2
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: "-100px" }}
+            transition={{ duration: 1, ease: customEase }}
+            className="text-4xl md:text-6xl font-bold tracking-tight text-white mb-6"
+          >
+            خلق تجربه‌های <span className="text-neutral-500">ماندگار.</span>
+          </motion.h2>
+          <motion.p
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true, margin: "-100px" }}
+            transition={{ duration: 1, delay: 0.1, ease: customEase }}
+            className="text-lg md:text-xl text-neutral-400 max-w-2xl"
+          >
+            برخی از پروژه‌های منتخب ما که با تمرکز بر کارایی، زیبایی و معماری قدرتمند توسعه یافته‌اند.
+          </motion.p>
+        </div>
+
+        {/* گرید پروژه‌ها */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 md:gap-8">
+          {projects.map((project, index) => (
+            <motion.div
+              key={project.id}
+              initial={{ opacity: 0, y: 40 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true, margin: "-100px" }}
+              transition={{
+                duration: 1.2,
+                delay: index * 0.15, // انیمیشن آبشاری برای کارت‌ها
+                ease: customEase,
+              }}
+              className="group relative rounded-3xl bg-neutral-900/50 border border-white/5 overflow-hidden backdrop-blur-sm transition-colors hover:bg-neutral-900/80"
+            >
+              {/* بخش تصویر (بالای کارت) */}
+              <div className={`relative h-64 md:h-80 w-full overflow-hidden bg-gradient-to-br ${project.color}`}>
+                {/* 
+                  نکته: برای استفاده از Image در Next.js، کامنت زیر را بردارید و عکس‌ها را در فولدر public بگذارید.
+                  در اینجا موقتاً از یک گرادیانت به عنوان جایگزین عکس استفاده شده است تا خطا نگیرید.
+                */}
+                {/* <Image 
+                  src={project.image} 
+                  alt={project.title}
+                  fill
+                  className="object-cover object-center transition-transform duration-700 group-hover:scale-105"
+                /> */}
+                
+                {/* یک المان تزئینی به جای عکس واقعی (موقتی) */}
+                <div className="absolute inset-0 flex items-center justify-center text-white/20 font-bold text-3xl transition-transform duration-700 group-hover:scale-105">
+                  تصویر پروژه
+                </div>
+              </div>
+
+              {/* بخش محتوا (پایین کارت) */}
+              <div className="p-8">
+                <div className="text-xs font-semibold tracking-wider text-neutral-500 mb-3 uppercase">
+                  {project.category}
+                </div>
+                <h3 className="text-2xl font-bold text-neutral-100 mb-3 group-hover:text-white transition-colors">
+                  {project.title}
+                </h3>
+                <p className="text-neutral-400 leading-relaxed text-sm md:text-base">
+                  {project.description}
+                </p>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
@@ -0,0 +1,294 @@
+"use client";
+
+import React from "react";
+import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
+import { 
+  Server, 
+  Terminal, 
+  Database, 
+  ShieldCheck, 
+  Cpu, 
+  Layers,
+  ArrowUpLeft,
+  Activity,
+  Zap,
+  CheckCircle2,
+  Lock
+} from "lucide-react";
+
+// ==========================================
+// 1. کامپوننت کارت با افکت ردیابی نور موس
+// ==========================================
+interface SpotlightCardProps {
+  children: React.ReactNode;
+  className?: string;
+}
+
+function SpotlightCard({ children, className = "" }: SpotlightCardProps) {
+  const mouseX = useMotionValue(0);
+  const mouseY = useMotionValue(0);
+
+  function handleMouseMove({ currentTarget, clientX, clientY }: React.MouseEvent) {
+    const { left, top } = currentTarget.getBoundingClientRect();
+    mouseX.set(clientX - left);
+    mouseY.set(clientY - top);
+  }
+
+  return (
+    <div
+      onMouseMove={handleMouseMove}
+      className={`group relative overflow-hidden rounded-2xl border border-border/50 bg-gradient-to-b from-card/80 to-card/30 p-6 md:p-8 backdrop-blur-xl transition-all duration-300 hover:border-primary/50 hover:shadow-2xl hover:shadow-primary/5 ${className}`}
+    >
+      {/* Dynamic Cursor Light */}
+      <motion.div
+        className="pointer-events-none absolute -inset-px rounded-2xl opacity-0 transition-opacity duration-300 group-hover:opacity-100"
+        style={{
+          background: useMotionTemplate`
+            radial-gradient(
+              450px circle at ${mouseX}px ${mouseY}px,
+              hsl(var(--primary) / 0.12),
+              transparent 80%
+            )
+          `,
+        }}
+      />
+      <div className="relative z-10 flex h-full flex-col justify-between">
+        {children}
+      </div>
+    </div>
+  );
+}
+
+// ==========================================
+// 2. بخش اصلی Bento Grid خدمات
+// ==========================================
+export function ServicesBentoGrid() {
+  return (
+    <section className="relative overflow-hidden py-24 md:py-32 bg-background">
+      {/* Ambient Background Grid & Glows */}
+      <div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:28px_28px]" />
+      <div className="absolute -top-40 right-1/4 h-96 w-96 rounded-full bg-primary/10 blur-[120px] pointer-events-none" />
+      <div className="absolute -bottom-40 left-1/4 h-96 w-96 rounded-full bg-blue-500/10 blur-[120px] pointer-events-none" />
+
+      <div className="container relative mx-auto max-w-7xl px-4 md:px-6">
+        
+        {/* Section Header */}
+        <div className="flex flex-col items-start md:items-end justify-between gap-6 pb-16 md:flex-row border-b border-border/40">
+          <div className="max-w-2xl space-y-3">
+            <div className="inline-flex items-center gap-2 rounded-full border border-primary/20 bg-primary/5 px-3 py-1 text-xs font-mono text-primary">
+              <Zap className="h-3.5 w-3.5" />
+              <span>CAPABILITIES & ARCHITECTURE</span>
+            </div>
+            <h2 className="text-3xl font-extrabold tracking-tight md:text-4xl lg:text-5xl text-foreground">
+              توسعه زیرساخت و معماری مقیاس‌پذیر
+            </h2>
+            <p className="text-sm md:text-base text-muted-foreground leading-relaxed">
+              طراحی، استقرار و بهینه‌سازی سرویس‌های توزیع‌شده سازمانی با حداکثر پایداری و امنیت تراکنش‌ها.
+            </p>
+          </div>
+
+          <div className="flex items-center gap-4 text-xs font-mono text-muted-foreground bg-muted/40 px-4 py-2 rounded-lg border border-border/40">
+            <span className="flex h-2 w-2 rounded-full bg-emerald-500 animate-pulse" />
+            <span>SYSTEM STATUS: OPERATIONAL</span>
+          </div>
+        </div>
+
+        {/* Bento Grid (6 Cards) */}
+        <div className="mt-12 grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+          
+          {/* Card 1: Distributed Core Systems */}
+          <SpotlightCard>
+            <div>
+              <div className="flex items-center justify-between">
+                <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-primary/10 text-primary border border-primary/20 shadow-inner">
+                  <Server className="h-5 w-5" />
+                </div>
+                <ArrowUpLeft className="h-5 w-5 text-muted-foreground/40 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-primary" />
+              </div>
+              <h3 className="mt-5 text-lg font-bold text-foreground">سامانه‌های توزیع‌شده و Core</h3>
+              <p className="mt-2 text-xs md:text-sm text-muted-foreground leading-relaxed">
+                معماری میکروسرویس با پرفورمنس بالا، مدیریت همزمانی (Concurrency) و پردازش بی‌درنگ داده‌ها.
+              </p>
+            </div>
+
+            <div className="mt-6 rounded-xl border border-border/40 bg-background/60 p-3.5 font-mono text-xs">
+              <div className="flex items-center justify-between text-muted-foreground pb-2 border-b border-border/30">
+                <span>TPS / Throughput</span>
+                <span className="text-emerald-400 font-semibold">12,450 req/s</span>
+              </div>
+              <div className="mt-2 flex items-center justify-between text-[11px] text-muted-foreground">
+                <span>Avg Latency:</span>
+                <span className="text-foreground">~8.2ms</span>
+              </div>
+            </div>
+
+            <div className="mt-6 flex flex-wrap gap-1.5">
+              {["Go", "Laravel 11", "FastAPI", "gRPC"].map((tag) => (
+                <span key={tag} className="rounded-md bg-secondary/80 px-2 py-0.5 font-mono text-[11px] text-secondary-foreground">
+                  {tag}
+                </span>
+              ))}
+            </div>
+          </SpotlightCard>
+
+          {/* Card 2: DevOps & Cloud Infrastructure */}
+          <SpotlightCard>
+            <div>
+              <div className="flex items-center justify-between">
+                <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-blue-500/10 text-blue-400 border border-blue-500/20 shadow-inner">
+                  <Terminal className="h-5 w-5" />
+                </div>
+                <ArrowUpLeft className="h-5 w-5 text-muted-foreground/40 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-blue-400" />
+              </div>
+              <h3 className="mt-5 text-lg font-bold text-foreground">اتوماسیون زیرساخت و CI/CD</h3>
+              <p className="mt-2 text-xs md:text-sm text-muted-foreground leading-relaxed">
+                استقرار پیوسته، کانتینرسازی و مانیتورینگ سلامت سرویس‌ها بدون وقفه عملیاتی (Zero-Downtime).
+              </p>
+            </div>
+
+            <div className="mt-6 rounded-xl border border-border/40 bg-background/80 p-3 font-mono text-[11px] space-y-1">
+              <div className="text-muted-foreground flex items-center gap-1.5">
+                <CheckCircle2 className="h-3 w-3 text-emerald-400" />
+                <span>Cluster Node Health: 100%</span>
+              </div>
+              <div className="text-primary flex items-center gap-1.5">
+                <Activity className="h-3 w-3" />
+                <span>Rolling deployment synced</span>
+              </div>
+            </div>
+
+            <div className="mt-6 flex flex-wrap gap-1.5">
+              {["Docker", "Kubernetes", "CI/CD", "Prometheus"].map((tag) => (
+                <span key={tag} className="rounded-md bg-secondary/80 px-2 py-0.5 font-mono text-[11px] text-secondary-foreground">
+                  {tag}
+                </span>
+              ))}
+            </div>
+          </SpotlightCard>
+
+          {/* Card 3: Data Engineering & Queues */}
+          <SpotlightCard>
+            <div>
+              <div className="flex items-center justify-between">
+                <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-purple-500/10 text-purple-400 border border-purple-500/20 shadow-inner">
+                  <Database className="h-5 w-5" />
+                </div>
+                <ArrowUpLeft className="h-5 w-5 text-muted-foreground/40 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-purple-400" />
+              </div>
+              <h3 className="mt-5 text-lg font-bold text-foreground">مهندسی داده و Event-Driven</h3>
+              <p className="mt-2 text-xs md:text-sm text-muted-foreground leading-relaxed">
+                پیاده‌سازی پایگاه‌های داده رابطه‌ای و NoSQL، کشینگ هوشمند و معماری پیام‌محور نامتقارن.
+              </p>
+            </div>
+
+            <div className="mt-6 rounded-xl border border-border/40 bg-background/60 p-3 font-mono text-xs flex justify-between items-center">
+              <span className="text-muted-foreground">Queue Ingestion:</span>
+              <span className="text-purple-400 font-semibold">Kafka / RabbitMQ</span>
+            </div>
+
+            <div className="mt-6 flex flex-wrap gap-1.5">
+              {["PostgreSQL", "Redis", "Kafka", "RabbitMQ"].map((tag) => (
+                <span key={tag} className="rounded-md bg-secondary/80 px-2 py-0.5 font-mono text-[11px] text-secondary-foreground">
+                  {tag}
+                </span>
+              ))}
+            </div>
+          </SpotlightCard>
+
+          {/* Card 4: AI & Vector Databases */}
+          <SpotlightCard>
+            <div>
+              <div className="flex items-center justify-between">
+                <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-amber-500/10 text-amber-400 border border-amber-500/20 shadow-inner">
+                  <Cpu className="h-5 w-5" />
+                </div>
+                <ArrowUpLeft className="h-5 w-5 text-muted-foreground/40 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-amber-400" />
+              </div>
+              <h3 className="mt-5 text-lg font-bold text-foreground">جستجوی معنایی و هوش مصنوعی</h3>
+              <p className="mt-2 text-xs md:text-sm text-muted-foreground leading-relaxed">
+                استخراج اطلاعات، تعبیه‌سازی وکتورها و بازیابی فوق‌سریع در پایگاه‌های داده معنایی.
+              </p>
+            </div>
+
+            <div className="mt-6 rounded-xl border border-border/40 bg-background/60 p-3 font-mono text-xs flex justify-between items-center">
+              <span className="text-muted-foreground">Vector Dimension:</span>
+              <span className="text-amber-400 font-semibold">1536d (HNSW)</span>
+            </div>
+
+            <div className="mt-6 flex flex-wrap gap-1.5">
+              {["Qdrant", "RAG", "Embeddings", "FastAPI"].map((tag) => (
+                <span key={tag} className="rounded-md bg-secondary/80 px-2 py-0.5 font-mono text-[11px] text-secondary-foreground">
+                  {tag}
+                </span>
+              ))}
+            </div>
+          </SpotlightCard>
+
+          {/* Card 5: Enterprise Portals & Workflows */}
+          <SpotlightCard>
+            <div>
+              <div className="flex items-center justify-between">
+                <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-emerald-500/10 text-emerald-400 border border-emerald-500/20 shadow-inner">
+                  <Layers className="h-5 w-5" />
+                </div>
+                <ArrowUpLeft className="h-5 w-5 text-muted-foreground/40 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-emerald-400" />
+              </div>
+              <h3 className="mt-5 text-lg font-bold text-foreground">پرتال‌های سازمانی و کارتابل</h3>
+              <p className="mt-2 text-xs md:text-sm text-muted-foreground leading-relaxed">
+                طراحی پنل‌های مدیریت فرآیندها (BPMS)، فرم‌سازهای پویا و ماژول‌های سازمانی یکپارچه.
+              </p>
+            </div>
+
+            <div className="mt-6 rounded-xl border border-border/40 bg-background/60 p-3 font-mono text-xs flex justify-between items-center">
+              <span className="text-muted-foreground">Workflow Engine:</span>
+              <span className="text-emerald-400 font-semibold">Active State</span>
+            </div>
+
+            <div className="mt-6 flex flex-wrap gap-1.5">
+              {["Filament 3", "Next.js", "TypeScript", "Tailwind"].map((tag) => (
+                <span key={tag} className="rounded-md bg-secondary/80 px-2 py-0.5 font-mono text-[11px] text-secondary-foreground">
+                  {tag}
+                </span>
+              ))}
+            </div>
+          </SpotlightCard>
+
+          {/* Card 6: Enterprise Security & Auth */}
+          <SpotlightCard>
+            <div>
+              <div className="flex items-center justify-between">
+                <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-rose-500/10 text-rose-400 border border-rose-500/20 shadow-inner">
+                  <ShieldCheck className="h-5 w-5" />
+                </div>
+                <ArrowUpLeft className="h-5 w-5 text-muted-foreground/40 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-rose-400" />
+              </div>
+              <h3 className="mt-5 text-lg font-bold text-foreground">امنیت، هویت و دسترسی سازمانی</h3>
+              <p className="mt-2 text-xs md:text-sm text-muted-foreground leading-relaxed">
+                پیاده‌سازی احراز هویت متمرکز (SSO)، پروتکل‌های OAuth2/OpenID و سیستم‌های RBAC پیشرفته.
+              </p>
+            </div>
+
+            <div className="mt-6 rounded-xl border border-border/40 bg-background/60 p-3 font-mono text-xs flex justify-between items-center">
+              <span className="text-muted-foreground flex items-center gap-1.5">
+                <Lock className="h-3 w-3 text-rose-400" />
+                Audit Logging:
+              </span>
+              <span className="text-rose-400 font-semibold">Encrypted (AES-256)</span>
+            </div>
+
+            <div className="mt-6 flex flex-wrap gap-1.5">
+              {["OAuth2", "SSO", "RBAC", "JWT"].map((tag) => (
+                <span key={tag} className="rounded-md bg-secondary/80 px-2 py-0.5 font-mono text-[11px] text-secondary-foreground">
+                  {tag}
+                </span>
+              ))}
+            </div>
+          </SpotlightCard>
+
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default ServicesBentoGrid;