a
This commit is contained in:
@@ -2,312 +2,254 @@
|
||||
|
||||
import React from "react";
|
||||
import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
|
||||
import {
|
||||
Server,
|
||||
Terminal,
|
||||
Database,
|
||||
ShieldCheck,
|
||||
Cpu,
|
||||
Layers,
|
||||
ArrowUpLeft,
|
||||
Zap,
|
||||
Lock
|
||||
import {
|
||||
Server,
|
||||
Terminal,
|
||||
Database,
|
||||
ShieldCheck,
|
||||
Cpu,
|
||||
Layers,
|
||||
ArrowUpLeft,
|
||||
Zap,
|
||||
Lock
|
||||
} from "lucide-react";
|
||||
|
||||
// ==========================================
|
||||
// 1. کامپوننت کارت با افکت ردیابی نور موس
|
||||
// ==========================================
|
||||
interface SpotlightCardProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
function SpotlightCard({ children, className = "" }: SpotlightCardProps) {
|
||||
const mouseX = useMotionValue(0);
|
||||
const mouseY = useMotionValue(0);
|
||||
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);
|
||||
}
|
||||
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-white/20 hover:shadow-2xl hover:shadow-black/40 ${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(255, 255, 255, 0.06),
|
||||
transparent 80%
|
||||
)
|
||||
`,
|
||||
}}
|
||||
/>
|
||||
<div className="relative z-10 flex h-full flex-col justify-between">
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
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 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",
|
||||
}}
|
||||
/>
|
||||
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%)`,
|
||||
}}
|
||||
/>
|
||||
|
||||
{/* ۲. افکت نوری موس (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-white/10">
|
||||
<div className="max-w-2xl space-y-3">
|
||||
<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-white">
|
||||
توسعه زیرساخت و معماری مقیاسپذیر
|
||||
</h2>
|
||||
<p className="text-sm md:text-base text-neutral-400 leading-relaxed font-light">
|
||||
طراحی، استقرار و بهینهسازی سرویسهای توزیعشده سازمانی با حداکثر پایداری و امنیت تراکنشها.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
</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-blue-500/10 text-blue-400 border border-blue-500/20 shadow-inner">
|
||||
<Server className="h-5 w-5" />
|
||||
<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>
|
||||
<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-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-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-neutral-400">
|
||||
<span>Avg Latency:</span>
|
||||
<span className="text-neutral-200">~8.2ms</span>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
<div className="mt-6 flex flex-wrap gap-1.5">
|
||||
{["Go", "Laravel 11", "FastAPI", "gRPC"].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 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 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-cyan-500/10 text-cyan-400 border border-cyan-500/20 shadow-inner">
|
||||
<Terminal className="h-5 w-5" />
|
||||
{/* 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>
|
||||
<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-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-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-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", "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 & 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-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-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-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-white/[0.05] border border-white/5 px-2 py-0.5 font-mono text-[11px] text-neutral-300">
|
||||
{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-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-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-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-white/[0.05] border border-white/5 px-2 py-0.5 font-mono text-[11px] text-neutral-300">
|
||||
{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-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-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-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-white/[0.05] border border-white/5 px-2 py-0.5 font-mono text-[11px] text-neutral-300">
|
||||
{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-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-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-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>
|
||||
<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-white/[0.05] border border-white/5 px-2 py-0.5 font-mono text-[11px] text-neutral-300">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default ServicesBentoGrid;
|
||||
|
||||
Reference in New Issue
Block a user