87 lines
3.8 KiB
TypeScript
87 lines
3.8 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import { Link } from 'react-router-dom';
|
||
|
|
|
||
|
|
const Home: React.FC = () => {
|
||
|
|
return (
|
||
|
|
<div className="landing-wrap">
|
||
|
|
{/* NAV */}
|
||
|
|
<nav style={{
|
||
|
|
position: 'fixed', top: 0, left: 0, right: 0, zIndex: 100,
|
||
|
|
background: 'rgba(10,10,10,0.95)', borderBottom: '1px solid var(--border)',
|
||
|
|
display: 'flex', alignItems: 'center', justifyContent: 'space-between',
|
||
|
|
padding: '0 2rem', height: '52px', backdropFilter: 'blur(8px)'
|
||
|
|
}}>
|
||
|
|
<Link to="/" style={{
|
||
|
|
fontFamily: 'var(--display)', fontWeight: 900, fontSize: '22px',
|
||
|
|
letterSpacing: '-0.5px', color: 'var(--text)', textDecoration: 'none'
|
||
|
|
}}>
|
||
|
|
Código<span style={{color: 'var(--orange)'}}>0</span>
|
||
|
|
</Link>
|
||
|
|
<ul style={{display: 'flex', gap: '2rem', listStyle: 'none'}}>
|
||
|
|
<li><a href="#protocolos" className="nav-link">Protocolos</a></li>
|
||
|
|
<li><a href="#features" className="nav-link">Características</a></li>
|
||
|
|
<li><a href="https://github.com/planetazuzu/codigo0" className="nav-link">GitHub</a></li>
|
||
|
|
<li><Link to="/admin" className="nav-cta">Gestión →</Link></li>
|
||
|
|
</ul>
|
||
|
|
</nav>
|
||
|
|
|
||
|
|
<style>{`
|
||
|
|
.nav-link {
|
||
|
|
font-family: var(--mono); font-size: 11px; color: var(--text-dim);
|
||
|
|
text-decoration: none; text-transform: uppercase; letter-spacing: 0.1em;
|
||
|
|
transition: color 0.15s;
|
||
|
|
}
|
||
|
|
.nav-link:hover { color: var(--orange); }
|
||
|
|
.nav-cta {
|
||
|
|
background: var(--orange); color: var(--black); padding: 6px 16px;
|
||
|
|
font-weight: 700; text-decoration: none; text-transform: uppercase; font-size: 11px;
|
||
|
|
}
|
||
|
|
.nav-cta:hover { background: var(--orange-pale); }
|
||
|
|
|
||
|
|
.hero {
|
||
|
|
min-height: 100vh; display: flex; flex-direction: column; justify-content: center;
|
||
|
|
padding: 6rem 2rem 4rem; max-width: 1100px; margin: 0 auto; position: relative;
|
||
|
|
}
|
||
|
|
.hero-badge {
|
||
|
|
display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono);
|
||
|
|
font-size: 11px; color: var(--orange); border: 1px solid var(--orange);
|
||
|
|
padding: 4px 12px; margin-bottom: 2rem; letter-spacing: 0.15em; text-transform: uppercase; width: fit-content;
|
||
|
|
}
|
||
|
|
.hero h1 {
|
||
|
|
font-family: var(--display); font-size: clamp(64px, 12vw, 140px); font-weight: 900;
|
||
|
|
line-height: 0.9; letter-spacing: -2px; text-transform: uppercase; color: var(--text); margin-bottom: 0.5rem;
|
||
|
|
}
|
||
|
|
.hero h1 .accent { color: var(--orange); }
|
||
|
|
`}</style>
|
||
|
|
|
||
|
|
{/* HERO (Simplified for now - porting main parts) */}
|
||
|
|
<section className="hero">
|
||
|
|
<div className="hero-badge">v0.1 · En desarrollo activo</div>
|
||
|
|
<h1>
|
||
|
|
<span className="accent">Código</span><br />
|
||
|
|
Cero.
|
||
|
|
</h1>
|
||
|
|
<p style={{
|
||
|
|
fontFamily: 'var(--display)', fontSize: 'clamp(20px, 3vw, 32px)', fontWeight: 600,
|
||
|
|
color: 'var(--text-dim)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: '2.5rem'
|
||
|
|
}}>
|
||
|
|
Protocolos TES. Sin papel. Sin esperas. Sin excusas.
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<div style={{display: 'flex', gap: '1rem', flexWrap: 'wrap', marginBottom: '4rem'}}>
|
||
|
|
<a href="http://207.180.226.141:9112" className="btn-primary">Abrir app →</a>
|
||
|
|
<Link to="/admin" style={{
|
||
|
|
background: 'transparent', color: 'var(--text-dim)', fontFamily: 'var(--mono)',
|
||
|
|
fontSize: '12px', textTransform: 'uppercase', letterSpacing: '0.1em', padding: '14px 28px',
|
||
|
|
textDecoration: 'none', border: '1px solid var(--border)', transition: 'all 0.15s'
|
||
|
|
}}>Panel de Gestión</Link>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
{/* Rest of the sections can be added slowly, but let's keep it functional first */}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default Home;
|