a.golshani/company-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

a

Browse Source
This commit is contained in:
a.golshani
2026-09-13 15:44:15 +03:30
parent 71cd5c8072
commit 16cba4492a
9 changed files with 1499 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/features/services/services-bento-grid.tsx
+83 -64
View File
@@ -10,9 +10,7 @@ import {
Cpu,
Layers,
ArrowUpLeft,
Activity,
Zap,
CheckCircle2,
Lock
} from "lucide-react";
@@ -37,16 +35,16 @@ function SpotlightCard({ children, className = "" }: SpotlightCardProps) {
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}`}
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}`}
>
{/* 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),
rgba(255, 255, 255, 0.06),
transparent 80%
)
`,
@@ -64,30 +62,51 @@ function SpotlightCard({ children, className = "" }: SpotlightCardProps) {
// ==========================================
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" />
<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",
}}
/>
<div className="container relative mx-auto max-w-7xl px-4 md:px-6">
{/* ۲. افکت نوری موس (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-border/40">
<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-primary/20 bg-primary/5 px-3 py-1 text-xs font-mono text-primary">
<Zap className="h-3.5 w-3.5" />
<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-foreground">
<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-muted-foreground leading-relaxed">
<p className="text-sm md:text-base text-neutral-400 leading-relaxed font-light">
طراحی، استقرار و بهینه‌سازی سرویس‌های توزیع‌شده سازمانی با حداکثر پایداری و امنیت تراکنش‌ها.
</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">
<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>
@@ -100,31 +119,31 @@ export function ServicesBentoGrid() {
<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">
<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>
<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" />
<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-foreground">سامانه‌های توزیع‌شده و Core</h3>
<p className="mt-2 text-xs md:text-sm text-muted-foreground leading-relaxed">
<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-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">
<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-muted-foreground">
<div className="mt-2 flex items-center justify-between text-[11px] text-neutral-400">
<span>Avg Latency:</span>
<span className="text-foreground">~8.2ms</span>
<span className="text-neutral-200">~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">
<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>
))}
@@ -135,60 +154,60 @@ export function ServicesBentoGrid() {
<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">
<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" />
</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" />
<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-foreground">اتوماسیون زیرساخت و CI/CD</h3>
<p className="mt-2 text-xs md:text-sm text-muted-foreground leading-relaxed">
<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-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 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-primary flex items-center gap-1.5">
<Activity className="h-3 w-3" />
<span>Rolling deployment synced</span>
<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", "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">
{["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 & Queues */}
{/* 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-muted-foreground/40 transition-transform group-hover:-translate-x-1 group-hover:-translate-y-1 group-hover:text-purple-400" />
<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-foreground">مهندسی داده و Event-Driven</h3>
<p className="mt-2 text-xs md:text-sm text-muted-foreground leading-relaxed">
<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-border/40 bg-background/60 p-3 font-mono text-xs flex justify-between items-center">
<span className="text-muted-foreground">Queue Ingestion:</span>
<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-secondary/80 px-2 py-0.5 font-mono text-[11px] text-secondary-foreground">
<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>
))}
@@ -202,22 +221,22 @@ export function ServicesBentoGrid() {
<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" />
<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-foreground">جستجوی معنایی و هوش مصنوعی</h3>
<p className="mt-2 text-xs md:text-sm text-muted-foreground leading-relaxed">
<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-border/40 bg-background/60 p-3 font-mono text-xs flex justify-between items-center">
<span className="text-muted-foreground">Vector Dimension:</span>
<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-secondary/80 px-2 py-0.5 font-mono text-[11px] text-secondary-foreground">
<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>
))}
@@ -231,22 +250,22 @@ export function ServicesBentoGrid() {
<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" />
<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-foreground">پرتال‌های سازمانی و کارتابل</h3>
<p className="mt-2 text-xs md:text-sm text-muted-foreground leading-relaxed">
<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-border/40 bg-background/60 p-3 font-mono text-xs flex justify-between items-center">
<span className="text-muted-foreground">Workflow Engine:</span>
<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-secondary/80 px-2 py-0.5 font-mono text-[11px] text-secondary-foreground">
<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>
))}
@@ -260,16 +279,16 @@ export function ServicesBentoGrid() {
<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" />
<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-foreground">امنیت، هویت و دسترسی سازمانی</h3>
<p className="mt-2 text-xs md:text-sm text-muted-foreground leading-relaxed">
<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-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">
<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>
@@ -278,7 +297,7 @@ export function ServicesBentoGrid() {
<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">
<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>
))}