256 lines
15 KiB
TypeScript
256 lines
15 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
|
|
import {
|
|
Server,
|
|
Terminal,
|
|
Database,
|
|
ShieldCheck,
|
|
Cpu,
|
|
Layers,
|
|
ArrowUpLeft,
|
|
Zap,
|
|
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-white/10 bg-neutral-900/50 p-6 md:p-8 backdrop-blur-xl transition-all duration-300 hover:border-blue-600 hover:shadow-2xl hover:shadow-black/40 hover:scale-[1.02] ${className}`}
|
|
>
|
|
<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,
|
|
rgba(59, 130, 246, 0.1),
|
|
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 bg-gray-950 py-24 text-white md:py-32"
|
|
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`);
|
|
}}
|
|
>
|
|
{/* Grid background */}
|
|
<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",
|
|
}}
|
|
/>
|
|
{/* Mouse light background */}
|
|
<div
|
|
className="pointer-events-none absolute inset-0 opacity-60 transition-opacity duration-300"
|
|
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">
|
|
|
|
{/* بخش عنوان که به وسط چین منتقل شده است */}
|
|
<div className="flex flex-col items-center justify-center gap-8 pb-16 text-center">
|
|
<div className="flex flex-col items-center gap-3">
|
|
<span className="inline-block rounded-full bg-blue-600/10 px-3 py-1 text-sm font-semibold text-blue-400">
|
|
خدمات تخصصی
|
|
</span>
|
|
<h2 className="text-3xl font-bold tracking-tight md:text-5xl lg:text-6xl">
|
|
معماری نرم‌افزار مدرن
|
|
</h2>
|
|
</div>
|
|
<p className="max-w-3xl text-lg text-neutral-400 md:text-xl">
|
|
ارائه راهکارهای جامع بک‌اند، از طراحی میکروسرویس‌ها و پیاده‌سازی CI/CD تا ساخت سیستم‌های هوشمند و مقیاس‌پذیر.
|
|
</p>
|
|
</div>
|
|
|
|
{/* گرید اصلی کارت‌ها */}
|
|
<div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
|
|
|
|
{/* Card 1 */}
|
|
<SpotlightCard>
|
|
<div>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex h-11 w-11 items-center justify-center rounded-xl border border-blue-600/20 bg-blue-600/10 text-blue-500 shadow-inner">
|
|
<Zap className="h-5 w-5" />
|
|
</div>
|
|
<ArrowUpLeft className="h-5 w-5 text-neutral-500 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-white">معماری و توسعه Back-End</h3>
|
|
<p className="mt-2 text-xs leading-relaxed text-neutral-400 md:text-sm">
|
|
طراحی و پیاده‌سازی سیستم‌های مقیاس‌پذیر و ماژولار با PHP (Laravel) و Python (FastAPI/Django).
|
|
</p>
|
|
</div>
|
|
<div className="mt-6 rounded-xl border border-white/5 bg-neutral-950/60 p-3 font-mono text-xs space-y-2">
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-neutral-400">API Latency:</span>
|
|
<span className="font-semibold text-emerald-400">{"<40ms"}</span>
|
|
</div>
|
|
<div className="flex items-center justify-between">
|
|
<span className="text-neutral-400">Uptime:</span>
|
|
<span className="font-semibold text-emerald-400">{"99.99%"}</span>
|
|
</div>
|
|
</div>
|
|
</SpotlightCard>
|
|
|
|
{/* Card 2 */}
|
|
<SpotlightCard>
|
|
<div>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex h-11 w-11 items-center justify-center rounded-xl border border-blue-600/20 bg-blue-600/10 text-blue-500 shadow-inner">
|
|
<Terminal className="h-5 w-5" />
|
|
</div>
|
|
<ArrowUpLeft className="h-5 w-5 text-neutral-500 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-white">DevOps و زیرساخت ابری</h3>
|
|
<p className="mt-2 text-xs leading-relaxed text-neutral-400 md:text-sm">
|
|
استقرار و مدیریت کانتینرها، اتوماسیون فرآیند CI/CD و انتشار بدون وقفه عملیاتی (Zero-Downtime).
|
|
</p>
|
|
</div>
|
|
<div className="mt-6 flex flex-wrap gap-1.5">
|
|
{["Docker", "CI/CD", "Kubernetes", "Linux"].map((tag) => (
|
|
<span key={tag} className="rounded-md border border-white/5 bg-white/[0.05] px-2 py-0.5 font-mono text-[11px] text-neutral-300">
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</SpotlightCard>
|
|
|
|
{/* Card 3 */}
|
|
<SpotlightCard>
|
|
<div>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex h-11 w-11 items-center justify-center rounded-xl border border-blue-600/20 bg-blue-600/10 text-blue-500 shadow-inner">
|
|
<Database className="h-5 w-5" />
|
|
</div>
|
|
<ArrowUpLeft className="h-5 w-5 text-neutral-500 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-white">مهندسی داده و Event-Driven</h3>
|
|
<p className="mt-2 text-xs leading-relaxed text-neutral-400 md:text-sm">
|
|
پیاده‌سازی پایگاه‌های داده رابطه‌ای و NoSQL، کشینگ هوشمند و معماری پیام‌محور نامتقارن.
|
|
</p>
|
|
</div>
|
|
<div className="mt-6 flex flex-wrap gap-1.5">
|
|
{["PostgreSQL", "Redis", "Kafka", "RabbitMQ"].map((tag) => (
|
|
<span key={tag} className="rounded-md border border-white/5 bg-white/[0.05] px-2 py-0.5 font-mono text-[11px] text-neutral-300">
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</SpotlightCard>
|
|
|
|
{/* Card 4 */}
|
|
<SpotlightCard>
|
|
<div>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex h-11 w-11 items-center justify-center rounded-xl border border-blue-600/20 bg-blue-600/10 text-blue-500 shadow-inner">
|
|
<Cpu className="h-5 w-5" />
|
|
</div>
|
|
<ArrowUpLeft className="h-5 w-5 text-neutral-500 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-white">جستجوی معنایی و هوش مصنوعی</h3>
|
|
<p className="mt-2 text-xs leading-relaxed text-neutral-400 md:text-sm">
|
|
استخراج اطلاعات، تعبیه‌سازی وکتورها و بازیابی فوق‌سریع در پایگاه‌های داده معنایی.
|
|
</p>
|
|
</div>
|
|
<div className="mt-6 flex flex-wrap gap-1.5">
|
|
{["Qdrant", "RAG", "Embeddings", "FastAPI"].map((tag) => (
|
|
<span key={tag} className="rounded-md border border-white/5 bg-white/[0.05] px-2 py-0.5 font-mono text-[11px] text-neutral-300">
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</SpotlightCard>
|
|
|
|
{/* Card 5 */}
|
|
<SpotlightCard>
|
|
<div>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex h-11 w-11 items-center justify-center rounded-xl border border-blue-600/20 bg-blue-600/10 text-blue-500 shadow-inner">
|
|
<Layers className="h-5 w-5" />
|
|
</div>
|
|
<ArrowUpLeft className="h-5 w-5 text-neutral-500 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-white">پرتال‌های سازمانی و کارتابل</h3>
|
|
<p className="mt-2 text-xs leading-relaxed text-neutral-400 md:text-sm">
|
|
طراحی پنل‌های مدیریت فرآیندها (BPMS)، فرم‌سازهای پویا و ماژول‌های سازمانی یکپارچه.
|
|
</p>
|
|
</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 border border-white/5 bg-white/[0.05] px-2 py-0.5 font-mono text-[11px] text-neutral-300">
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</SpotlightCard>
|
|
|
|
{/* Card 6 */}
|
|
<SpotlightCard>
|
|
<div>
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex h-11 w-11 items-center justify-center rounded-xl border border-blue-600/20 bg-blue-600/10 text-blue-500 shadow-inner">
|
|
<ShieldCheck className="h-5 w-5" />
|
|
</div>
|
|
<ArrowUpLeft className="h-5 w-5 text-neutral-500 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-white">امنیت، هویت و دسترسی</h3>
|
|
<p className="mt-2 text-xs leading-relaxed text-neutral-400 md:text-sm">
|
|
پیاده‌سازی احراز هویت متمرکز (SSO)، پروتکل‌های OAuth2/OpenID و سیستم‌های RBAC پیشرفته.
|
|
</p>
|
|
</div>
|
|
<div className="mt-6 flex flex-wrap gap-1.5">
|
|
{["OAuth2", "SSO", "RBAC", "JWT"].map((tag) => (
|
|
<span key={tag} className="rounded-md border border-white/5 bg-white/[0.05] px-2 py-0.5 font-mono text-[11px] text-neutral-300">
|
|
{tag}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</SpotlightCard>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
export default ServicesBentoGrid;
|