all changes

src/sections/Anatomy.tsx

@@ -0,0 +1,100 @@
+'use client';
+import { motion } from 'framer-motion';
+import type { ThemeProps } from '../types';
+import { anatomyLayers as layers } from '../data/anatomyData';
+
+export const Anatomy = ({ isNavyBg }: ThemeProps) => {
+  const bg     = isNavyBg ? '#0d1117' : '#f5f5f3';
+  const text   = isNavyBg ? '#eef0f4' : '#0a0a0a';
+  const sub    = isNavyBg ? 'rgba(255,255,255,0.45)' : '#6a6866';
+  const border = isNavyBg ? 'rgba(255,255,255,0.08)' : '#dddbd5';
+
+  return (
+    <section
+      id="anatomy"
+      aria-labelledby="anatomy-heading"
+      style={{ background: bg, color: text, borderBottom: `1px solid ${border}` }}
+      className="px-8 py-28 md:px-14 transition-colors duration-500"
+    >
+      <motion.div
+        className="mx-auto max-w-7xl"
+        initial={{ opacity: 0, y: 28 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        viewport={{ once: false, amount: 0.1 }}
+        transition={{ duration: 0.65, ease: [0.22, 1, 0.36, 1] }}
+      >
+        {/* Header */}
+        <div className="mb-16">
+          <h2
+            id="anatomy-heading"
+            className="text-headline"
+            style={{ maxWidth: '24ch' }}
+          >
+            Todo sistema tiene<br /> las mismas capas.
+          </h2>
+        </div>
+
+        {/* Layers — always visible */}
+        <div style={{ border: `1px solid ${border}`, borderRadius: 4, overflow: 'hidden' }}>
+          {layers.map((layer, i) => (
+            <motion.div
+              key={layer.id}
+              initial={{ opacity: 0, y: 14 }}
+              whileInView={{ opacity: 1, y: 0 }}
+              viewport={{ once: true }}
+              transition={{ duration: 0.4, delay: i * 0.07 }}
+              style={{
+                borderBottom: i < layers.length - 1 ? `1px solid ${border}` : 'none',
+                display: 'grid',
+                gridTemplateColumns: '120px 1fr',
+                gap: '0 32px',
+                alignItems: 'start',
+                padding: '32px 32px',
+              }}
+            >
+              {/* Number */}
+              <span
+                className="font-display font-black"
+                style={{ fontSize: 64, lineHeight: 1, color: '#3b82f6', letterSpacing: '-0.04em' }}
+              >
+                {layer.num}
+              </span>
+
+              {/* Title + description + tech */}
+              <div style={{ paddingTop: 8 }}>
+                <p
+                  className="font-display font-black mb-1"
+                  style={{ fontSize: 13, letterSpacing: '0.04em', color: text }}
+                >
+                  {layer.title}
+                </p>
+                <p className="text-xs mb-3" style={{ color: sub }}>
+                  {layer.subtitle}
+                </p>
+                <p className="text-sm leading-relaxed mb-4" style={{ color: sub, maxWidth: '60ch' }}>
+                  {layer.description}
+                </p>
+                <div className="flex flex-wrap gap-2">
+                  {layer.tech.map(t => (
+                    <span key={t} style={{
+                      fontSize: 11,
+                      fontWeight: 600,
+                      padding: '3px 10px',
+                      borderRadius: 99,
+                      border: `1px solid ${border}`,
+                      color: isNavyBg ? 'rgba(255,255,255,0.55)' : 'rgba(0,0,0,0.5)',
+                      background: isNavyBg ? 'rgba(255,255,255,0.04)' : 'rgba(59,130,246,0.05)',
+                      letterSpacing: '0.01em',
+                    }}>
+                      {t}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            </motion.div>
+          ))}
+        </div>
+      </motion.div>
+    </section>
+  );
+};