101 lines
3.6 KiB
TypeScript
101 lines
3.6 KiB
TypeScript
'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>
|
|
);
|
|
};
|