a
This commit is contained in:
@@ -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;
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user