diff --git a/css/main.css b/css/main.css new file mode 100644 index 0000000..b609b8b --- /dev/null +++ b/css/main.css @@ -0,0 +1,282 @@ +/* --- ESTILOS GENERALES (CSS) --- */ +:root { + --primary-color: #0f172a; /* Azul oscuro corporativo */ + --secondary-color: #3b82f6; /* Azul brillante */ + --accent-color: #10b981; /* Verde (para Zas) */ + --bg-light: #f8fafc; + --text-dark: #1e293b; + --text-gray: #64748b; + --white: #ffffff; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "Segoe UI", system-ui, -apple-system, sans-serif; +} + +body { + line-height: 1.6; + color: var(--text-dark); + background-color: var(--bg-light); +} + +a { + text-decoration: none; +} +ul { + list-style: none; +} + +/* --- BOTONES --- */ +.btn { + display: inline-block; + padding: 12px 24px; + border-radius: 6px; + font-weight: 600; + cursor: pointer; + transition: all 0.3s ease; +} + +.btn-primary { + background-color: var(--secondary-color); + color: var(--white); +} +.btn-primary:hover { + background-color: #2563eb; +} + +.btn-outline { + border: 2px solid var(--white); + color: var(--white); + margin-left: 10px; +} +.btn-outline:hover { + background-color: rgba(255, 255, 255, 0.1); +} + +.btn-zas { + background-color: var(--accent-color); + color: var(--white); + box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4); +} +.btn-zas:hover { + transform: translateY(-2px); +} + +/* --- HEADER --- */ +header { + background-color: var(--primary-color); + padding: 1rem 5%; + position: sticky; + top: 0; + z-index: 100; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + color: var(--white); + font-size: 1.5rem; + font-weight: 800; + letter-spacing: -1px; +} +.logo span { + color: var(--secondary-color); +} + +nav ul { + display: flex; + gap: 20px; +} +nav a { + color: #cbd5e1; + font-size: 0.95rem; +} +nav a:hover { + color: var(--white); +} +.nav-zas { + color: var(--accent-color) !important; + font-weight: bold; +} + +/* --- HERO SECTION --- */ +.hero { + background: linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.95)), + url("https://images.unsplash.com/photo-1519389950473-47ba0277781c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80"); + background-size: cover; + color: var(--white); + padding: 80px 5%; + text-align: center; + min-height: 80vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.hero h1 { + font-size: 2.8rem; + margin-bottom: 20px; + line-height: 1.2; +} +.hero p { + font-size: 1.1rem; + max-width: 600px; + margin-bottom: 30px; + color: #cbd5e1; +} + +/* --- SERVICIOS (QUB) --- */ +.services { + padding: 80px 5%; + background: var(--white); +} +.section-title { + text-align: center; + margin-bottom: 50px; +} +.section-title h2 { + font-size: 2rem; + color: var(--primary-color); +} +.section-title p { + color: var(--text-gray); +} + +.cards-container { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 30px; +} + +.card { + padding: 30px; + border-radius: 10px; + background: var(--bg-light); + border: 1px solid #e2e8f0; + transition: transform 0.3s; +} +.card:hover { + transform: translateY(-5px); + border-color: var(--secondary-color); +} +.icon { + font-size: 2rem; + margin-bottom: 15px; + display: block; +} +.card h3 { + margin-bottom: 10px; +} + +/* --- ZAS PRODUCT SECTION --- */ +.zas-section { + padding: 80px 5%; + background-color: #ecfdf5; /* Fondo verde muy claro */ + display: flex; + align-items: center; + justify-content: center; + flex-wrap: wrap; + gap: 50px; +} + +.zas-content { + flex: 1; + min-width: 300px; +} +.zas-visual { + flex: 1; + min-width: 300px; + background: var(--white); + padding: 40px; + border-radius: 20px; + box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05); + text-align: center; +} + +.badge { + background-color: var(--accent-color); + color: white; + padding: 5px 10px; + border-radius: 20px; + font-size: 0.8rem; + text-transform: uppercase; + letter-spacing: 1px; + font-weight: bold; +} + +.zas-content h2 { + font-size: 2.5rem; + margin: 15px 0; + color: var(--primary-color); +} +.zas-list li { + margin-bottom: 15px; + display: flex; + align-items: center; +} +.check { + color: var(--accent-color); + margin-right: 10px; + font-weight: bold; +} + +/* --- CONTACTO --- */ +.contact { + padding: 80px 5%; + background-color: var(--primary-color); + color: var(--white); + text-align: center; +} +.contact form { + max-width: 500px; + margin: 30px auto 0; + display: flex; + flex-direction: column; + gap: 15px; +} +.contact input, +.contact textarea { + padding: 15px; + border-radius: 5px; + border: none; + font-size: 1rem; +} +.contact button { + background-color: var(--accent-color); + border: none; + color: var(--white); + font-size: 1.1rem; + cursor: pointer; +} + +/* --- FOOTER --- */ +footer { + text-align: center; + padding: 20px; + background: #020617; + color: #64748b; + font-size: 0.9rem; +} + +/* --- RESPONSIVE --- */ +@media (max-width: 768px) { + .hero h1 { + font-size: 2rem; + } + .hero-buttons { + display: flex; + flex-direction: column; + gap: 10px; + } + .btn-outline { + margin-left: 0; + } + nav { + display: none; + } /* Menú simplificado para móvil */ +} diff --git a/index.html b/index.html index ab47eb5..0b10a45 100644 --- a/index.html +++ b/index.html @@ -4,226 +4,7 @@ Qub Solutions | Software para Venezuela - + @@ -232,18 +13,18 @@
-

Software inteligente para PyMES
en Venezuela 🇻🇪

+

Software inteligente para PyMES
en Venezuela

En Qub, desarrollamos soluciones tecnológicas a medida y creamos productos que entienden tu economía. Transformamos negocios locales en empresas digitales.

Cotizar Proyecto - Conocer Zas POS + Conocer Qub Pay
@@ -275,8 +56,8 @@
Nuevo Lanzamiento MVP -

Zas: El Punto de Venta ágil.

-

Desarrollamos Zas pensando en el mostrador venezolano. Un software POS ligero, rápido y diseñado para la realidad económica actual.

+

Qub Pay: El Punto de Venta ágil.

+

Desarrollamos Qub Pay pensando en el mostrador venezolano. Un software POS ligero, rápido y diseñado para la realidad económica actual.