rafael/elrafa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sitio multipagina: inicio, servicios, proyectos, precios, contacto + style.css

Browse Source
This commit is contained in:
rafael
2026-09-04 00:58:34 +00:00
parent f4cbff25f5
commit 6e8ef025f9
6 changed files with 251 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+21 -126
View File
@@ -4,108 +4,43 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rafa · Automatizaciones con IA para negocios</title>
<meta name="description" content="Automatizo tareas repetitivas con inteligencia artificial: atención al cliente, reportes, agenda y ventas. Habla conmigo por WhatsApp.">
<style>
:root{
--fondo:#0e1116; --tarjeta:#161b22; --borde:#2a3340;
--texto:#e8edf3; --suave:#9aa7b8; --acento:#22c55e; --acento2:#38bdf8;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--fondo);color:var(--texto);line-height:1.6}
.ancho{max-width:960px;margin:0 auto;padding:0 20px}
header{padding:22px 0;border-bottom:1px solid var(--borde)}
header .ancho{display:flex;justify-content:space-between;align-items:center}
.logo{font-weight:800;font-size:1.2rem}
.logo span{color:var(--acento)}
nav a{color:var(--suave);text-decoration:none;margin-left:18px;font-size:.95rem}
nav a:hover{color:var(--texto)}
.hero{padding:72px 0 48px;text-align:center}
.etiqueta{display:inline-block;background:#13281b;color:var(--acento);border:1px solid #1f4d2e;padding:6px 14px;border-radius:99px;font-size:.85rem;margin-bottom:20px}
h1{font-size:clamp(2rem,5vw,3.2rem);line-height:1.15;margin-bottom:16px}
h1 span{color:var(--acento)}
.sub{color:var(--suave);font-size:1.15rem;max-width:640px;margin:0 auto 30px}
.botones{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:14px 28px;border-radius:10px;text-decoration:none;font-weight:700}
.btn-verde{background:var(--acento);color:#06130b}
.btn-borde{border:1px solid var(--borde);color:var(--texto)}
.rejilla{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;padding:20px 0 48px}
.tarjeta{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:24px}
.tarjeta .icono{font-size:1.8rem;margin-bottom:10px}
.tarjeta h3{margin-bottom:8px;font-size:1.05rem}
.tarjeta p{color:var(--suave);font-size:.95rem}
section{padding:24px 0}
h2{text-align:center;margin-bottom:8px;font-size:1.7rem}
.bajada{text-align:center;color:var(--suave);margin-bottom:28px}
.pasos{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.paso{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:22px;text-align:center}
.paso .num{display:inline-block;width:36px;height:36px;line-height:36px;border-radius:50%;background:var(--acento);color:#06130b;font-weight:800;margin-bottom:10px}
.precios{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.precio{background:var(--tarjeta);border:1px solid var(--borde);border-radius:14px;padding:28px;text-align:center}
.precio.destacado{border-color:var(--acento)}
.precio .monto{font-size:2rem;font-weight:800;margin:10px 0}
.precio ul{list-style:none;color:var(--suave);font-size:.95rem;margin:12px 0 20px}
.precio li{padding:5px 0}
.faq details{background:var(--tarjeta);border:1px solid var(--borde);border-radius:10px;padding:14px 18px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:600}
.faq p{color:var(--suave);margin-top:8px;font-size:.95rem}
.contacto{text-align:center;padding:48px 0 72px}
footer{border-top:1px solid var(--borde);padding:22px 0;color:var(--suave);font-size:.9rem;text-align:center}
@media(max-width:600px){nav{display:none}}
</style>
<meta name="description" content="Automatizo tareas repetitivas con inteligencia artificial: atención al cliente, reportes, agenda y ventas.">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="ancho">
<div class="logo">rafa<span>.</span>ia</div>
<a class="logo" href="index.html">rafa<span>.</span>ia</a>
<nav>
<a href="#servicios">Servicios</a>
<a href="#como-trabajo">Cómo trabajo</a>
<a href="#precios">Precios</a>
<a href="#contacto">Contacto</a>
<a href="index.html" class="activo">Inicio</a>
<a href="servicios.html">Servicios</a>
<a href="proyectos.html">Proyectos</a>
<a href="precios.html">Precios</a>
<a href="contacto.html">Contacto</a>
</nav>
</div>
</header>
<div class="ancho">
<div class="hero">
<div class="etiqueta">Automatizaciones con IA · Chile</div>
<h1>Recupera 10 horas a la semana <span>automatizando lo repetitivo</span></h1>
<p class="sub">Soy Rafa. Instalo asistentes con IA en tu negocio: responden clientes, agendan, hacen reportes y ordenan tus ventas. Sin apps nuevas que aprender.</p>
<div class="botones">
<a class="btn btn-verde" href="#contacto">Agendar diagnóstico gratis</a>
<a class="btn btn-borde" href="#servicios">Ver qué automatizo</a>
<a class="btn btn-verde" href="contacto.html">Agendar diagnóstico gratis</a>
<a class="btn btn-borde" href="servicios.html">Ver qué automatizo</a>
</div>
</div>
<section id="servicios">
<section>
<h2>Qué puedo automatizar por ti</h2>
<p class="bajada">Empiezo por lo que más tiempo te quita. Esto es lo típico:</p>
<div class="rejilla">
<div class="tarjeta">
<div class="icono">💬</div>
<h3>Atención al cliente 24/7</h3>
<p>Bot por WhatsApp que responde preguntas frecuentes, toma pedidos y deriva a ti solo lo importante.</p>
</div>
<div class="tarjeta">
<div class="icono">📊</div>
<h3>Reportes solos</h3>
<p>Tus planillas se convierten en un resumen claro cada lunes en tu correo. Sin copiar ni pegar.</p>
</div>
<div class="tarjeta">
<div class="icono">📅</div>
<h3>Agenda y recordatorios</h3>
<p>Confirmación automática de citas por WhatsApp. Baja las inasistencias a la mitad.</p>
</div>
<div class="tarjeta">
<div class="icono">💰</div>
<h3>Seguimiento de ventas</h3>
<p>Si un cliente pregunta y no compra, el sistema le escribe a las 24h. Rescata ventas perdidas.</p>
</div>
<div class="tarjeta"><div class="icono">💬</div><h3>Atención al cliente 24/7</h3><p>Bot por WhatsApp que responde preguntas frecuentes, toma pedidos y deriva a ti solo lo importante.</p></div>
<div class="tarjeta"><div class="icono">📊</div><h3>Reportes solos</h3><p>Tus planillas se convierten en un resumen claro cada lunes en tu correo. Sin copiar ni pegar.</p></div>
<div class="tarjeta"><div class="icono">📅</div><h3>Agenda y recordatorios</h3><p>Confirmación automática de citas por WhatsApp. Baja las inasistencias a la mitad.</p></div>
</div>
<div style="text-align:center"><a class="btn btn-borde" href="servicios.html">Ver todos los servicios</a></div>
</section>
<section id="como-trabajo">
<section>
<h2>Cómo trabajo</h2>
<p class="bajada">Simple, en 3 pasos y sin tecnicismos:</p>
<div class="pasos">
@@ -114,52 +49,12 @@
<div class="paso"><div class="num">3</div><h3>Solo pagas si sirve</h3><p style="color:var(--suave);font-size:.95rem">Si no te ahorra tiempo el primer mes, la desactivo y no pagas.</p></div>
</div>
</section>
<section id="precios">
<h2>Precios simples</h2>
<p class="bajada">Sin letra chica. Todo en pesos chilenos.</p>
<div class="precios">
<div class="precio">
<h3>Diagnóstico</h3>
<div class="monto">Gratis</div>
<ul><li>20 min por videollamada</li><li>Mapa de qué automatizar</li><li>Sin compromiso</li></ul>
<a class="btn btn-borde" href="#contacto">Agendar</a>
</div>
<div class="precio destacado">
<h3>Una automatización</h3>
<div class="monto">$150.000</div>
<ul><li>Instalación en 7 días</li><li>Ej: bot WhatsApp o reportes</li><li>Soporte 30 días</li></ul>
<a class="btn btn-verde" href="#contacto">Empezar</a>
</div>
<div class="precio">
<h3>Acompañamiento</h3>
<div class="monto">$60.000/mes</div>
<ul><li>Mejoras continuas</li><li>Soporte por WhatsApp</li><li>Cancela cuando quieras</li></ul>
<a class="btn btn-borde" href="#contacto">Conversar</a>
</div>
</div>
</section>
<section class="faq">
<h2>Preguntas frecuentes</h2>
<p class="bajada">Lo que siempre me preguntan:</p>
<details><summary>¿Necesito saber de tecnología?</summary><p>No. Yo lo instalo y te lo dejo funcionando. Tú lo usas por WhatsApp o correo, como siempre.</p></details>
<details><summary>¿Mis datos están seguros?</summary><p>Sí. Trabajo con herramientas conocidas y tus claves quedan en tu cuenta, no en la mía.</p></details>
<details><summary>¿Y si no me gusta?</summary><p>El primer mes es a prueba. Si no te ahorra tiempo, lo desactivo y no pagas la instalación.</p></details>
</section>
<div class="contacto" id="contacto">
<h2>Hablemos de tu caso</h2>
<p class="bajada">Escríbeme y te respondo hoy mismo (de verdad respondo yo, no un bot 😉).</p>
<div class="botones">
<a class="btn btn-verde" href="mailto:hola@elrafa.cl?subject=Quiero%20automatizar%20mi%20negocio">Escríbeme a hola@elrafa.cl</a>
</div>
<div class="contacto">
<h2>¿Hablamos de tu caso?</h2>
<p class="bajada">Te respondo hoy mismo (de verdad respondo yo, no un bot 😉).</p>
<div class="botones"><a class="btn btn-verde" href="contacto.html">Ir a contacto</a></div>
</div>
</div>
<footer>
Rafa · Automatizaciones con IA · Hecho a mano en Chile · 2026
</footer>
<footer>Rafa · Automatizaciones con IA · Hecho a mano en Chile · 2026</footer>
</body>
</html>