a
This commit is contained in:
@@ -0,0 +1,294 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
import { motion, useMotionTemplate, useMotionValue } from "framer-motion";
|
||||
import {
|
||||
Server,
|
||||
Terminal,
|
||||
Database,
|
||||
ShieldCheck,
|
||||
Cpu,
|
||||
Layers,
|
||||
ArrowUpLeft,
|
||||
Activity,
|
||||
Zap,
|
||||
CheckCircle2,
|
||||
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-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}`}
|
||||
>
|
||||
{/* 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),
|
||||
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-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" />
|
||||
|
||||
<div className="container relative 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="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" />
|
||||
<span>CAPABILITIES & ARCHITECTURE</span>
|
||||
</div>
|
||||
<h2 className="text-3xl font-extrabold tracking-tight md:text-4xl lg:text-5xl text-foreground">
|
||||
توسعه زیرساخت و معماری مقیاس‌پذیر
|
||||
</h2>
|
||||
<p className="text-sm md:text-base text-muted-foreground leading-relaxed">
|
||||
طراحی، استقرار و بهینه‌سازی سرویس‌های توزیع‌شده سازمانی با حداکثر پایداری و امنیت تراکنش‌ها.
|
||||
</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">
|
||||
<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-primary/10 text-primary border border-primary/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" />
|
||||
</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">
|
||||
معماری میکروسرویس با پرفورمنس بالا، مدیریت همزمانی (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">
|
||||
<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">
|
||||
<span>Avg Latency:</span>
|
||||
<span className="text-foreground">~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">
|
||||
{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-blue-500/10 text-blue-400 border border-blue-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" />
|
||||
</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">
|
||||
استقرار پیوسته، کانتینرسازی و مانیتورینگ سلامت سرویس‌ها بدون وقفه عملیاتی (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>
|
||||
<div className="text-primary flex items-center gap-1.5">
|
||||
<Activity className="h-3 w-3" />
|
||||
<span>Rolling deployment synced</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">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
|
||||
{/* Card 3: Data Engineering & Queues */}
|
||||
<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" />
|
||||
</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">
|
||||
پیاده‌سازی پایگاه‌های داده رابطه‌ای و 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>
|
||||
<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">
|
||||
{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-muted-foreground/40 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">
|
||||
استخراج اطلاعات، تعبیه‌سازی وکتورها و بازیابی فوق‌سریع در پایگاه‌های داده معنایی.
|
||||
</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>
|
||||
<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">
|
||||
{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-muted-foreground/40 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">
|
||||
طراحی پنل‌های مدیریت فرآیندها (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>
|
||||
<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">
|
||||
{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-muted-foreground/40 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">
|
||||
پیاده‌سازی احراز هویت متمرکز (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">
|
||||
<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-secondary/80 px-2 py-0.5 font-mono text-[11px] text-secondary-foreground">
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</SpotlightCard>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export default ServicesBentoGrid;
|
||||
Reference in New Issue
Block a user