first commit

2026-05-31 12:47:02 +03:30
commit add78d8460
100 changed files with 15221 additions and 0 deletions
@@ -0,0 +1,124 @@
+'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>
+  );
+}