a

components/banner/CtaBanner.tsx

@@ -1,13 +1,14 @@
 "use client";
 
+import React from "react";
 import { motion } from "framer-motion";
 
 const customEase: [number, number, number, number] = [0.16, 1, 0.3, 1];
 
 export default function CtaBanner() {
   return (
-    <section 
-      className="relative py-32 px-4 md:px-8 bg-gray-950 overflow-hidden"
+    <section
+      className="relative py-28 md:py-36 px-4 md:px-8 bg-gray-950 overflow-hidden flex items-center justify-center"
       onMouseMove={(e) => {
         const { currentTarget, clientX, clientY } = e;
         const { left, top } = currentTarget.getBoundingClientRect();
@@ -15,78 +16,63 @@ export default function CtaBanner() {
         currentTarget.style.setProperty("--mouse-y", `${clientY - top}px`);
       }}
     >
+      {/* ========================================================
+          پس‌زمینه کاملاً منطبق با سکشن Projects
+          ======================================================== */}
+      {/* افکت Spotlight */}
+      <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%)]" />
       
-      {/* پس‌زمینه: گرید و افکت Spotlight */}
-      <div className="absolute inset-0 z-0">
-        {/* گرید با رنگ خاکستری ملایم مطابق با بخش پروژه‌ها */}
-        <div className="absolute inset-0 bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px]" />
-        
-        {/* لایه نورافکن (Spotlight) وابسته به حرکت موس */}
-        <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>
+      {/* پترن گرید ۲۴ پیکسلی خاکستری */}
+      <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="relative z-10 max-w-7xl mx-auto">
+      <div className="relative z-10 max-w-4xl w-full mx-auto">
         <motion.div
-          initial={{ opacity: 0, y: 50, scale: 0.95 }}
+          initial={{ opacity: 0, y: 25, scale: 0.98 }}
           whileInView={{ opacity: 1, y: 0, scale: 1 }}
-          viewport={{ once: true, margin: "-100px" }}
-          transition={{ duration: 1.2, ease: customEase }}
-          className="relative overflow-hidden rounded-[2.5rem] bg-white shadow-2xl shadow-gray-900/50 border border-gray-200"
+          viewport={{ once: true, margin: "-50px" }}
+          transition={{ duration: 0.8, ease: customEase }}
+          className="group relative rounded-3xl bg-neutral-900/50 border border-white/10 overflow-hidden backdrop-blur-md p-8 md:p-16 flex flex-col items-center text-center transition-colors hover:bg-neutral-900/70"
         >
-          {/* هاله‌های نوری پاستلی کارت */}
-          <div className="absolute -top-32 -right-32 w-[30rem] h-[30rem] bg-indigo-50 blur-[100px] rounded-full pointer-events-none" />
-          <div className="absolute -bottom-32 -left-32 w-[30rem] h-[30rem] bg-pink-50 blur-[100px] rounded-full pointer-events-none" />
+          {/* هاله محو نوری پشت متن */}
+          <div className="pointer-events-none absolute -top-24 left-1/2 -translate-x-1/2 w-96 h-48 bg-white/[0.04] rounded-full blur-3xl" />
 
-          <div className="relative z-10 py-20 px-6 md:px-16 flex flex-col items-center text-center">
-            <motion.h2
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 1, delay: 0.2, ease: customEase }}
-              className="text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight text-gray-900 mb-6"
-            >
-              آماده خلق یک{" "}
-              <span className="bg-clip-text text-transparent bg-gradient-to-r from-indigo-500 to-purple-500">
-                شاهکار
-              </span>{" "}
-              هستید؟
-            </motion.h2>
-            
-            <motion.p
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 1, delay: 0.3, ease: customEase }}
-              className="text-lg md:text-xl text-gray-500 max-w-2xl mb-10 font-medium leading-relaxed"
-            >
-              ایده‌های خود را با تکنولوژی‌های روز دنیا و طراحی خیره‌کننده به واقعیت تبدیل کنید. تیم ما برای شروع پروژه بعدی شما آماده است.
-            </motion.p>
+          {/* تیتر اصلی با گرادیانت هماهنگ با متون Projects */}
+          <motion.h2
+            initial={{ opacity: 0, y: 15 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.7, delay: 0.1, ease: customEase }}
+            className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold tracking-tight leading-[1.25] text-white max-w-2xl mb-8"
+          >
+            آماده خلق یک{" "}
+            <span className="text-neutral-500">شاهکار دیجیتال</span> هستید؟
+          </motion.h2>
 
-            <motion.div
-              initial={{ opacity: 0, y: 20 }}
-              whileInView={{ opacity: 1, y: 0 }}
-              viewport={{ once: true }}
-              transition={{ duration: 1, delay: 0.4, ease: customEase }}
-            >
-              <button className="group relative inline-flex items-center justify-center gap-3 px-8 py-4 bg-gray-900 text-white rounded-full font-bold text-lg overflow-hidden transition-all duration-300 hover:bg-gray-800 hover:scale-105 hover:shadow-xl hover:shadow-gray-900/20 active:scale-95">
-                <span>شروع همکاری</span>
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="none"
-                  viewBox="0 0 24 24"
-                  strokeWidth={2.5}
-                  stroke="currentColor"
-                  className="w-5 h-5 transition-transform duration-300 group-hover:-translate-x-1"
-                >
-                  <path
-                    strokeLinecap="round"
-                    strokeLinejoin="round"
-                    d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
-                  />
-                </svg>
-              </button>
-            </motion.div>
-          </div>
+          {/* دکمه اکشن */}
+          <motion.div
+            initial={{ opacity: 0, y: 12 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.7, delay: 0.2, ease: customEase }}
+          >
+            <button className="relative group/btn inline-flex items-center justify-center gap-3 px-8 py-4 rounded-full font-semibold text-gray-950 text-base md:text-lg bg-white hover:bg-neutral-200 active:scale-[0.98] transition-all duration-300 shadow-[0_0_25px_rgba(255,255,255,0.15)] hover:shadow-[0_0_35px_rgba(255,255,255,0.25)]">
+              <span className="tracking-tight">شروع همکاری</span>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                fill="none"
+                viewBox="0 0 24 24"
+                strokeWidth={2.2}
+                stroke="currentColor"
+                className="w-5 h-5 transition-transform duration-300 group-hover/btn:-translate-x-1.5"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18"
+                />
+              </svg>
+            </button>
+          </motion.div>
         </motion.div>
       </div>
     </section>

components/features/services/services-bento-grid.tsx

@@ -10,9 +10,7 @@ import {
   Cpu, 
   Layers,
   ArrowUpLeft,
-  Activity,
   Zap,
-  CheckCircle2,
   Lock
 } from "lucide-react";
 
@@ -37,16 +35,16 @@ function SpotlightCard({ children, className = "" }: SpotlightCardProps) {
   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}`}
+      className={`group relative overflow-hidden rounded-2xl border border-white/10 bg-neutral-900/50 p-6 md:p-8 backdrop-blur-xl transition-all duration-300 hover:border-white/20 hover:shadow-2xl hover:shadow-black/40 ${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),
+              rgba(255, 255, 255, 0.06),
               transparent 80%
             )
           `,
@@ -64,30 +62,51 @@ function SpotlightCard({ children, className = "" }: SpotlightCardProps) {
 // ==========================================
 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" />
+    <section 
+      className="relative overflow-hidden py-24 md:py-32 bg-gray-950 text-white"
+      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`);
+      }}
+    >
+      {/* ۱. الگوی گرید پس‌زمینه کاملاً یکدست و بدون سایه/محوشدگی بالا و پایین */}
+      <div
+        className="pointer-events-none absolute inset-0 opacity-70"
+        style={{
+          backgroundImage: `linear-gradient(to right, #80808012 1px, transparent 1px), linear-gradient(to bottom, #80808012 1px, transparent 1px)`,
+          backgroundSize: "24px 24px",
+        }}
+      />
 
-      <div className="container relative mx-auto max-w-7xl px-4 md:px-6">
+      {/* ۲. افکت نوری موس (Global Spotlight) در سطح سکشن */}
+      <div
+        className="pointer-events-none absolute inset-0 transition-opacity duration-300 opacity-60"
+        style={{
+          background: `radial-gradient(750px circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.04), transparent 40%)`,
+        }}
+      />
+
+      {/* ۳. محتوای گرید */}
+      <div className="container relative z-10 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="flex flex-col items-start md:items-end justify-between gap-6 pb-16 md:flex-row border-b border-white/10">
           <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" />
+            <div className="inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/[0.04] px-3.5 py-1 text-xs font-mono text-neutral-300 backdrop-blur-md">
+              <Zap className="h-3.5 w-3.5 text-amber-400" />
               <span>CAPABILITIES & ARCHITECTURE</span>
             </div>
-            <h2 className="text-3xl font-extrabold tracking-tight md:text-4xl lg:text-5xl text-foreground">
+            <h2 className="text-3xl font-extrabold tracking-tight md:text-4xl lg:text-5xl text-white">
               توسعه زیرساخت و معماری مقیاس‌پذیر
             </h2>
-            <p className="text-sm md:text-base text-muted-foreground leading-relaxed">
+            <p className="text-sm md:text-base text-neutral-400 leading-relaxed font-light">
               طراحی، استقرار و بهینه‌سازی سرویس‌های توزیع‌شده سازمانی با حداکثر پایداری و امنیت تراکنش‌ها.
             </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">
+          <div className="flex items-center gap-3 text-xs font-mono text-neutral-400 bg-neutral-900/70 px-4 py-2 rounded-xl border border-white/10 backdrop-blur-md">
             <span className="flex h-2 w-2 rounded-full bg-emerald-500 animate-pulse" />
             <span>SYSTEM STATUS: OPERATIONAL</span>
           </div>
@@ -100,31 +119,31 @@ export function ServicesBentoGrid() {
           <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">
+                <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">
                   <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" />
+                <ArrowUpLeft className="h-5 w-5 text-neutral-500 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-white" />
               </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">
+              <h3 className="mt-5 text-lg font-bold text-white">سامانه‌های توزیع‌شده و Core</h3>
+              <p className="mt-2 text-xs md:text-sm text-neutral-400 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">
+            <div className="mt-6 rounded-xl border border-white/5 bg-neutral-950/60 p-3.5 font-mono text-xs">
+              <div className="flex items-center justify-between text-neutral-400 pb-2 border-b border-white/5">
                 <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">
+              <div className="mt-2 flex items-center justify-between text-[11px] text-neutral-400">
                 <span>Avg Latency:</span>
-                <span className="text-foreground">~8.2ms</span>
+                <span className="text-neutral-200">~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">
+                <span key={tag} className="rounded-md bg-white/[0.05] border border-white/5 px-2 py-0.5 font-mono text-[11px] text-neutral-300">
                   {tag}
                 </span>
               ))}
@@ -135,60 +154,60 @@ export function ServicesBentoGrid() {
           <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">
+                <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-cyan-500/10 text-cyan-400 border border-cyan-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" />
+                <ArrowUpLeft className="h-5 w-5 text-neutral-500 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-cyan-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">
+              <h3 className="mt-5 text-lg font-bold text-white">اتوماسیون زیرساخت و CI/CD</h3>
+              <p className="mt-2 text-xs md:text-sm text-neutral-400 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 className="mt-6 rounded-xl border border-white/5 bg-neutral-950/60 p-3 font-mono text-[11px] space-y-1">
+              <div className="text-emerald-400 flex items-center justify-between">
+                <span>Deployment Status:</span>
+                <span>Automated</span>
               </div>
-              <div className="text-primary flex items-center gap-1.5">
-                <Activity className="h-3 w-3" />
-                <span>Rolling deployment synced</span>
+              <div className="text-neutral-400 flex items-center justify-between text-[10px]">
+                <span>Pipeline Stage:</span>
+                <span>Success (CI/CD)</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">
+              {["Docker", "CI/CD", "Kubernetes", "Linux"].map((tag) => (
+                <span key={tag} className="rounded-md bg-white/[0.05] border border-white/5 px-2 py-0.5 font-mono text-[11px] text-neutral-300">
                   {tag}
                 </span>
               ))}
             </div>
           </SpotlightCard>
 
-          {/* Card 3: Data Engineering & Queues */}
+          {/* Card 3: Data Engineering & Messaging */}
           <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" />
+                <ArrowUpLeft className="h-5 w-5 text-neutral-500 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">
+              <h3 className="mt-5 text-lg font-bold text-white">مهندسی داده و Event-Driven</h3>
+              <p className="mt-2 text-xs md:text-sm text-neutral-400 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>
+            <div className="mt-6 rounded-xl border border-white/5 bg-neutral-950/60 p-3 font-mono text-xs flex justify-between items-center">
+              <span className="text-neutral-400">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">
+                <span key={tag} className="rounded-md bg-white/[0.05] border border-white/5 px-2 py-0.5 font-mono text-[11px] text-neutral-300">
                   {tag}
                 </span>
               ))}
@@ -202,22 +221,22 @@ export function ServicesBentoGrid() {
                 <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" />
+                <ArrowUpLeft className="h-5 w-5 text-neutral-500 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">
+              <h3 className="mt-5 text-lg font-bold text-white">جستجوی معنایی و هوش مصنوعی</h3>
+              <p className="mt-2 text-xs md:text-sm text-neutral-400 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>
+            <div className="mt-6 rounded-xl border border-white/5 bg-neutral-950/60 p-3 font-mono text-xs flex justify-between items-center">
+              <span className="text-neutral-400">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">
+                <span key={tag} className="rounded-md bg-white/[0.05] border border-white/5 px-2 py-0.5 font-mono text-[11px] text-neutral-300">
                   {tag}
                 </span>
               ))}
@@ -231,22 +250,22 @@ export function ServicesBentoGrid() {
                 <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" />
+                <ArrowUpLeft className="h-5 w-5 text-neutral-500 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">
+              <h3 className="mt-5 text-lg font-bold text-white">پرتال‌های سازمانی و کارتابل</h3>
+              <p className="mt-2 text-xs md:text-sm text-neutral-400 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>
+            <div className="mt-6 rounded-xl border border-white/5 bg-neutral-950/60 p-3 font-mono text-xs flex justify-between items-center">
+              <span className="text-neutral-400">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">
+                <span key={tag} className="rounded-md bg-white/[0.05] border border-white/5 px-2 py-0.5 font-mono text-[11px] text-neutral-300">
                   {tag}
                 </span>
               ))}
@@ -260,16 +279,16 @@ export function ServicesBentoGrid() {
                 <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" />
+                <ArrowUpLeft className="h-5 w-5 text-neutral-500 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">
+              <h3 className="mt-5 text-lg font-bold text-white">امنیت، هویت و دسترسی سازمانی</h3>
+              <p className="mt-2 text-xs md:text-sm text-neutral-400 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">
+            <div className="mt-6 rounded-xl border border-white/5 bg-neutral-950/60 p-3 font-mono text-xs flex justify-between items-center">
+              <span className="text-neutral-400 flex items-center gap-1.5">
                 <Lock className="h-3 w-3 text-rose-400" />
                 Audit Logging:
               </span>
@@ -278,7 +297,7 @@ export function ServicesBentoGrid() {
 
             <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">
+                <span key={tag} className="rounded-md bg-white/[0.05] border border-white/5 px-2 py-0.5 font-mono text-[11px] text-neutral-300">
                   {tag}
                 </span>
               ))}

components/shared/footer.jsx

@@ -0,0 +1,147 @@
+'use client';
+
+import React from "react";
+import { 
+  Mail, 
+  ArrowUp, 
+  Terminal, 
+  Layers, 
+  Cpu, 
+  Share2 
+} from "lucide-react";
+
+// آیکون‌های SVG استاندارد شبکه‌های اجتماعی
+const GithubIcon = ({ className = "w-4 h-4" }) => (
+  <svg className={className} fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+    <path fillRule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.53 1.032 1.53 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clipRule="evenodd" />
+  </svg>
+);
+
+const LinkedinIcon = ({ className = "w-4 h-4" }) => (
+  <svg className={className} fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+    <path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/>
+  </svg>
+);
+
+export function Footer() {
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth",
+    });
+  };
+
+  return (
+    <footer dir="rtl" className="relative bg-gray-950 text-gray-400 border-t border-gray-800/80 overflow-hidden font-sans">
+      {/* پترن پس‌زمینه گرید ۲۴ پیکسلی */}
+      <div 
+        className="absolute inset-0 bg-[linear-gradient(to_right,#1f29370f_1px,transparent_1px),linear-gradient(to_bottom,#1f29370f_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none" 
+      />
+
+      <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-8 mb-12">
+          
+          {/* وضعیت سرویس‌ها */}
+          <div className="space-y-4">
+            <div className="flex items-center gap-2">
+              <Terminal className="w-4 h-4 text-indigo-400" />
+              <span className="text-xs font-mono font-semibold text-gray-200 uppercase tracking-wider">وضعیت سرویس‌ها</span>
+            </div>
+            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-emerald-950/40 border border-emerald-500/30 text-emerald-400 text-xs font-mono">
+              <span className="relative flex h-2 w-2">
+                <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
+                <span className="relative inline-flex rounded-full h-2 w-2 bg-emerald-500"></span>
+              </span>
+              <span>پایداری شبکه: ۹۹.۹۹٪</span>
+            </div>
+            <p className="text-xs text-gray-500 leading-relaxed">
+              تمامی میکروسرویس‌ها و پایپ‌لاین‌های پردازش داده در وضعیت عملیاتی پایدار قرار دارند.
+            </p>
+          </div>
+
+          {/* حوزه‌های تمرکز فنی */}
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              <Layers className="w-4 h-4 text-indigo-400" />
+              <h4 className="text-xs font-semibold text-gray-300 uppercase tracking-wider">حوزه‌های تخصصی</h4>
+            </div>
+            <ul className="space-y-2 text-xs text-gray-400">
+              <li className="hover:text-indigo-400 transition-colors">معماری سیستم‌های توزیع‌شده</li>
+              <li className="hover:text-indigo-400 transition-colors">سرویس‌های پرترافیک و مقیاس‌پذیر</li>
+              <li className="hover:text-indigo-400 transition-colors">پایپ‌لاین‌های رویدادمحور (EDA)</li>
+              <li className="hover:text-indigo-400 transition-colors">سیستم‌های برداری و RAG</li>
+            </ul>
+          </div>
+
+          {/* استک اصلی */}
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              <Cpu className="w-4 h-4 text-indigo-400" />
+              <h4 className="text-xs font-semibold text-gray-300 uppercase tracking-wider">فناوری‌های کلیدی</h4>
+            </div>
+            <ul className="space-y-2 text-xs font-mono text-gray-400 dir-ltr text-right">
+              <li>Laravel / FastAPI / Python</li>
+              <li>PostgreSQL / Redis / Qdrant</li>
+              <li>Kafka / RabbitMQ / Docker</li>
+              <li>Next.js / React / Tailwind</li>
+            </ul>
+          </div>
+
+          {/* راه‌های ارتباطی */}
+          <div className="space-y-3">
+            <div className="flex items-center gap-2">
+              <Share2 className="w-4 h-4 text-indigo-400" />
+              <h4 className="text-xs font-semibold text-gray-300 uppercase tracking-wider">ارتباط و شبکه‌ها</h4>
+            </div>
+            <div className="flex gap-2.5 pt-1">
+              <a 
+                href="https://github.com" 
+                target="_blank" 
+                rel="noreferrer" 
+                aria-label="GitHub"
+                className="p-2.5 bg-gray-900/80 border border-gray-800 rounded-lg text-gray-400 hover:text-white hover:border-gray-700 transition-all hover:scale-105"
+              >
+                <GithubIcon className="w-4 h-4" />
+              </a>
+              <a 
+                href="https://linkedin.com" 
+                target="_blank" 
+                rel="noreferrer" 
+                aria-label="LinkedIn"
+                className="p-2.5 bg-gray-900/80 border border-gray-800 rounded-lg text-gray-400 hover:text-white hover:border-gray-700 transition-all hover:scale-105"
+              >
+                <LinkedinIcon className="w-4 h-4" />
+              </a>
+              <a 
+                href="mailto:contact@example.com" 
+                aria-label="Email"
+                className="p-2.5 bg-gray-900/80 border border-gray-800 rounded-lg text-gray-400 hover:text-white hover:border-gray-700 transition-all hover:scale-105"
+              >
+                <Mail className="w-4 h-4" />
+              </a>
+            </div>
+          </div>
+        </div>
+
+        {/* نوار پایینی */}
+        <div className="pt-8 border-t border-gray-900/80 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-gray-500">
+          <div className="flex items-center gap-2">
+            <span>© {new Date().getFullYear()}</span>
+            <span>•</span>
+            <span>طراحی و توسعه برای دسترس‌پذیری بالا و مقیاس‌پذیری</span>
+          </div>
+
+          <button
+            onClick={scrollToTop}
+            className="flex items-center gap-1.5 px-3.5 py-1.5 rounded-lg bg-gray-900 border border-gray-800 text-gray-400 hover:text-gray-200 hover:border-gray-700 transition-all group"
+          >
+            <span>بازگشت به بالا</span>
+            <ArrowUp className="w-3.5 h-3.5 transition-transform group-hover:-translate-y-0.5" />
+          </button>
+        </div>
+      </div>
+    </footer>
+  );
+}
+
+export default Footer;

components/shared/header.tsx

@@ -7,7 +7,7 @@ import { motion, AnimatePresence } from "framer-motion";
 const navLinks = [
   { name: "صفحه اصلی", href: "/" },
   { name: "خدمات", href: "/services" },
-  { name: "نمونه کارها", href: "/portfolio" },
+  { name: "پروژه ها", href: "/project" },
   { name: "درباره ما", href: "/about" },
 ];
 
@@ -46,10 +46,10 @@ export default function Header() {
           {/* لوگو */}
           <Link href="/" className="relative z-50 flex items-center gap-2">
             <div className="w-8 h-8 rounded-lg bg-gradient-to-tr from-blue-600 to-blue-400 flex items-center justify-center">
-              <span className="text-white font-bold text-lg">N</span>
+              <span className="text-white font-bold text-lg">Z</span>
             </div>
             <span className="text-neutral-50 font-medium tracking-wide">
-              نوین‌تک
+              ژرفا نوآوری داده
             </span>
           </Link>
 
@@ -67,11 +67,13 @@ export default function Header() {
           </nav>
 
           {/* دکمه تماس / اکشن دسکتاپ */}
-          <div className="hidden md:block">
-            <button className="text-sm font-medium text-white px-5 py-2 rounded-full border border-white/10 bg-white/5 hover:bg-white/10 transition-all duration-300 backdrop-blur-sm">
-              شروع پروژه
-            </button>
-          </div>
+        <div className="hidden md:block">
+  <Link href="/contact">
+    <button className="text-sm font-medium text-white px-5 py-2 rounded-full border border-white/10 bg-white/5 hover:bg-white/10 transition-all duration-300 backdrop-blur-sm">
+      شروع پروژه
+    </button> 
+  </Link>
+</div>
 
           {/* دکمه همبرگری موبایل */}
           <button