soroush.asadi
125 lines
4.4 KiB
TypeScript
125 lines
4.4 KiB
TypeScript
'use client';
|
|
|
|
import dynamic from 'next/dynamic';
|
|
import { motion } from 'framer-motion';
|
|
import { useLocale } from '@/lib/i18n/locale-context';
|
|
import { SectionHeader } from '@/components/ui/SectionHeader';
|
|
import type { StackNode } from './StackCanvas';
|
|
|
|
// Category accent palette (index-aligned). Hex feeds the WebGL sprites; the
|
|
// literal Tailwind maps below keep the JIT scanner happy for the legend.
|
|
const ACCENTS = ['electric', 'violet', 'magenta', 'cyan'] as const;
|
|
type Accent = (typeof ACCENTS)[number];
|
|
|
|
const ACCENT_HEX: Record<Accent, string> = {
|
|
electric: '#38bdf8',
|
|
violet: '#818cf8',
|
|
magenta: '#e879f9',
|
|
cyan: '#22d3ee',
|
|
};
|
|
const ACCENT_TEXT: Record<Accent, string> = {
|
|
electric: 'text-electric',
|
|
violet: 'text-violet',
|
|
magenta: 'text-magenta',
|
|
cyan: 'text-cyan',
|
|
};
|
|
const ACCENT_BORDER: Record<Accent, string> = {
|
|
electric: 'border-electric/30',
|
|
violet: 'border-violet/30',
|
|
magenta: 'border-magenta/30',
|
|
cyan: 'border-cyan/30',
|
|
};
|
|
|
|
// The globe is client-only WebGL: never SSR it. While the chunk loads we show
|
|
// a calm placeholder so layout doesn't jump.
|
|
const StackCanvas = dynamic(
|
|
() => import('./StackCanvas').then((m) => m.StackCanvas),
|
|
{
|
|
ssr: false,
|
|
loading: () => (
|
|
<div className="flex h-[400px] w-full items-center justify-center sm:h-[460px] lg:h-[520px]">
|
|
<span className="h-24 w-24 animate-pulse rounded-full bg-gradient-to-br from-electric/20 to-violet/20 blur-xl" />
|
|
</div>
|
|
),
|
|
},
|
|
);
|
|
|
|
export function Stack() {
|
|
const { t, locale } = useLocale();
|
|
|
|
// Flatten every tool into a colored node for the constellation.
|
|
const nodes: StackNode[] = t.stack.categories.flatMap((cat, i) => {
|
|
const hex = ACCENT_HEX[ACCENTS[i % ACCENTS.length]];
|
|
return cat.items.map((label) => ({ label, color: hex }));
|
|
});
|
|
|
|
return (
|
|
<section id="stack" className="relative overflow-hidden px-5 py-28 sm:px-8">
|
|
<div className="mx-auto max-w-7xl">
|
|
<SectionHeader
|
|
eyebrow={t.stack.eyebrow}
|
|
title={t.stack.title}
|
|
sub={t.stack.sub}
|
|
/>
|
|
|
|
<div className="mt-10 grid grid-cols-1 items-center gap-8 lg:grid-cols-2">
|
|
{/* 3D constellation */}
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.94 }}
|
|
whileInView={{ opacity: 1, scale: 1 }}
|
|
viewport={{ once: true, margin: '-60px' }}
|
|
transition={{ duration: 0.7, ease: [0.22, 1, 0.36, 1] }}
|
|
className="relative order-1 lg:order-none"
|
|
>
|
|
<StackCanvas nodes={nodes} />
|
|
<p className="pointer-events-none mt-2 text-center font-mono text-[0.66rem] uppercase tracking-[0.18em] text-slate-600">
|
|
{locale === 'fa' ? 'بکشید برای چرخش · نشانگر برای نام' : 'Drag to spin · hover for name'}
|
|
</p>
|
|
</motion.div>
|
|
|
|
{/* Category legend */}
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
|
{t.stack.categories.map((cat, i) => {
|
|
const accent = ACCENTS[i % ACCENTS.length];
|
|
return (
|
|
<motion.div
|
|
key={cat.id}
|
|
initial={{ opacity: 0, y: 20 }}
|
|
whileInView={{ opacity: 1, y: 0 }}
|
|
viewport={{ once: true, margin: '-60px' }}
|
|
transition={{
|
|
duration: 0.5,
|
|
ease: [0.22, 1, 0.36, 1],
|
|
delay: 0.06 * i,
|
|
}}
|
|
className={`glass relative border ${ACCENT_BORDER[accent]} p-5`}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<span
|
|
className="h-2.5 w-2.5 rounded-full"
|
|
style={{ backgroundColor: ACCENT_HEX[accent] }}
|
|
/>
|
|
<span className={`label-mono ${ACCENT_TEXT[accent]}`}>
|
|
{cat.label}
|
|
</span>
|
|
</div>
|
|
<ul className="mt-4 flex flex-wrap gap-2">
|
|
{cat.items.map((item) => (
|
|
<li
|
|
key={item}
|
|
className="rounded-full border border-white/10 px-2.5 py-1 font-mono text-[0.7rem] tracking-wide text-slate-300"
|
|
>
|
|
{item}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</motion.div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
}
|