// dr-shell.jsx — BrandMark, Nav, Hero, Footer (DATOS Y REDES) // ------------------------------------------------------------------ // BrandMark — node glyph + wordmark // ------------------------------------------------------------------ function BrandMark({ size = 'md' }) { const sizes = { sm: { glyph: 30, name: 14, sub: 9, gap: 11 }, md: { glyph: 38, name: 16, sub: 10, gap: 13 }, lg: { glyph: 54, name: 22, sub: 13, gap: 16 }, }; const s = sizes[size]; // Node glyph: three connected dots (network) const glyph = ( ); return (
{glyph}
DATOS & REDES
SISTEMA ACOSTA
); } // ------------------------------------------------------------------ // Nav — with mobile hamburger // ------------------------------------------------------------------ function Nav() { const [scrolled, setScrolled] = React.useState(false); const [menuOpen, setMenuOpen] = React.useState(false); React.useEffect(() => { const fn = () => setScrolled(window.scrollY > 20); fn(); window.addEventListener('scroll', fn, { passive: true }); return () => window.removeEventListener('scroll', fn); }, []); React.useEffect(() => { document.body.style.overflow = menuOpen ? 'hidden' : ''; return () => { document.body.style.overflow = ''; }; }, [menuOpen]); const close = () => setMenuOpen(false); const NAV_LINKS = [ { href: '#capacidades', label: 'Capacidades' }, { href: '#stack', label: 'Stack' }, { href: '#proceso', label: 'Proceso' }, { href: '#seguridad', label: 'Seguridad' }, { href: '#casos', label: 'Casos' }, { href: '#faq', label: 'FAQ' }, { href: '#contacto', label: 'Contacto' }, ]; const navWrap = { position: 'sticky', top: 0, zIndex: 50, background: scrolled ? 'rgba(8,12,17,0.88)' : 'transparent', backdropFilter: scrolled ? 'blur(16px) saturate(160%)' : 'none', WebkitBackdropFilter: scrolled ? 'blur(16px) saturate(160%)' : 'none', borderBottom: scrolled ? '1px solid var(--line)' : '1px solid transparent', transition: 'all 0.3s ease', }; const inner = { display: 'grid', gridTemplateColumns: '1fr auto 1fr', alignItems: 'center', padding: '6px 0' }; const link = { color: 'var(--muted)', cursor: 'pointer', transition: 'color 0.2s', fontSize: 14, fontFamily: "'IBM Plex Sans', sans-serif" }; const bar = (i) => { const base = { display: 'block', width: 22, height: 1.5, background: 'var(--text)', borderRadius: 2, transition: 'transform 0.3s ease, opacity 0.3s ease' }; if (menuOpen) { if (i === 0) return { ...base, transform: 'translateY(7px) rotate(45deg)' }; if (i === 1) return { ...base, opacity: 0, transform: 'scaleX(0)' }; if (i === 2) return { ...base, transform: 'translateY(-7px) rotate(-45deg)' }; } return base; }; return ( <> {/* Mobile menu overlay */}
{NAV_LINKS.map((l, i) => ( {l.label} ))}
Solicitar diagnóstico→
datosyredesacosta@outlook.com
Hamburgo 182, Col. Juárez, CDMX
); } // ------------------------------------------------------------------ // HeroCommitmentCard — lo que incluye cada proyecto (sin datos ficticios) // ------------------------------------------------------------------ function HeroOpsPanel() { const checks = [ { t: 'Diagnóstico técnico inicial', d: 'Sin costo · revisamos su operación antes de proponer nada' }, { t: 'Arquitectura documentada', d: 'Alcance, tecnología e integraciones definidos y aprobados' }, { t: 'Desarrollo por fases', d: 'Entregas iterativas revisadas con el cliente antes de avanzar' }, { t: 'Pruebas antes de producción', d: 'Staging y QA antes de cualquier despliegue en vivo' }, { t: 'SLA por escrito', d: 'Tiempos de respuesta y resolución comprometidos en contrato' }, { t: 'Código entregado y documentado', d: 'Es suyo — sin dependencia de nuestra firma para operar' }, ]; return (
{['#FF5F57','#FEBC2E','#28C840'].map(c => )}
compromiso técnico 6 PUNTOS
Lo que incluye cada proyecto
{checks.map((c, i) => (
✓
{c.t}
{c.d}
))}
Sin letra chica · Sin dependencia de un proveedor
); } // ------------------------------------------------------------------ // Hero // ------------------------------------------------------------------ function Hero() { const wrap = { position: 'relative', paddingTop: 72, paddingBottom: 90, overflow: 'hidden' }; const grid = { display: 'grid', gridTemplateColumns: '1.25fr 0.95fr', gap: 56, alignItems: 'center' }; const eyebrowRow = { display: 'flex', alignItems: 'baseline', gap: 14, marginBottom: 40 }; const rule = { flex: 1, height: 1, background: 'var(--line)', maxWidth: 90 }; const h1 = { fontFamily: "'Space Grotesk', sans-serif", fontWeight: 500, fontSize: 'clamp(44px, 6.6vw, 92px)', lineHeight: 1.0, letterSpacing: '-0.03em', color: 'var(--text)', maxWidth: '15ch', }; const lede = { fontSize: 18, lineHeight: 1.6, color: 'rgba(226,232,240,0.75)', maxWidth: 520, marginTop: 30, textShadow: '0 1px 6px rgba(0,0,0,0.7)' }; const ctaRow = { display: 'flex', gap: 14, marginTop: 36, flexWrap: 'wrap' }; return (
CDMX · Col. Juárez EST. 2023

Infraestructura
que conecta
su operación.

Desarrollo, implementación y administración de sistemas en red — del diseño al despliegue, con monitoreo continuo. Software, redes y equipo de cómputo bajo una sola firma técnica.

Solicitar diagnóstico técnico → Ver capacidades
); } // ------------------------------------------------------------------ // Preloader — 1.8s branded loading screen // ------------------------------------------------------------------ function Preloader() { const [phase, setPhase] = React.useState('in'); React.useEffect(() => { const t1 = setTimeout(() => setPhase('out'), 1600); const t2 = setTimeout(() => setPhase('done'), 2100); return () => { clearTimeout(t1); clearTimeout(t2); }; }, []); if (phase === 'done') return null; return (
Datos y Redes de Sistema Acosta
); } // ------------------------------------------------------------------ // BackToTop — appears after 600px scroll // ------------------------------------------------------------------ function BackToTop() { const [vis, setVis] = React.useState(false); React.useEffect(() => { const fn = () => setVis(window.scrollY > 600); window.addEventListener('scroll', fn, { passive: true }); return () => window.removeEventListener('scroll', fn); }, []); return ( ); } // ------------------------------------------------------------------ // WhatsApp — floating CTA button // ------------------------------------------------------------------ function WhatsApp() { // Actualizar con número real: https://wa.me/521XXXXXXXXXX const url = 'https://wa.me/5215599999999?text=' + encodeURIComponent('Hola, me interesa el diagnóstico técnico gratuito de Datos y Redes de Sistema Acosta.'); return ( ); } // ------------------------------------------------------------------ // Footer — Vercel/Linear style with status bar // ------------------------------------------------------------------ function Footer() { const colT = { fontFamily: "'IBM Plex Sans', sans-serif", fontSize: 14, fontWeight: 600, letterSpacing: '0.06em', color: 'var(--signal)', textTransform: 'uppercase', marginBottom: 18 }; const colI = { fontSize: 14.5, color: 'var(--muted)', lineHeight: 1.85, display: 'block', transition: 'color 0.15s' }; return ( ); } Object.assign(window, { BrandMark, Nav, Hero, Footer, Preloader, BackToTop, WhatsApp });