a

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;