From d67ec94f8f0ede2f530fc4d3cd179b9e7d164d02 Mon Sep 17 00:00:00 2001 From: Javier Sanchez Date: Wed, 25 Jun 2025 09:28:52 +0000 Subject: [PATCH] chore: add coolify configuration --- .coolify | 13 +++ demo/assets/css/style.css | 217 +++++++++++++++++++++++--------------- demo/index.html | 12 +-- 3 files changed, 150 insertions(+), 92 deletions(-) create mode 100644 .coolify diff --git a/.coolify b/.coolify new file mode 100644 index 0000000..f202597 --- /dev/null +++ b/.coolify @@ -0,0 +1,13 @@ +{ + "project": { + "uuid": "s8g8wk88s4c8gw80wsck4wkw", + "name": "batamanta-landing" + }, + "application": { + "name": "batamanta-landing", + "git_repository": "https://git.blacksilla.com/xaviscript/batamanta-landing.git", + "git_branch": "master", + "build_pack": "dockerfile", + "ports_exposes": "8080" + } +} \ No newline at end of file diff --git a/demo/assets/css/style.css b/demo/assets/css/style.css index fdd4624..e698967 100644 --- a/demo/assets/css/style.css +++ b/demo/assets/css/style.css @@ -1,14 +1,17 @@ -@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&family=Google+Sans:wght@400;700&display=swap'); :root { - --primary: #3c4043; + --primary: #202124; --accent: #4285f4; --background: #fff; - --text: #202124; + --text: #3c4043; --muted: #5f6368; --cta: #1a73e8; - --cta-hover: #1765c1; + --cta-hover: #174ea6; --border: #e0e0e0; + --card-bg: #f8f9fa; + --shadow: 0 4px 24px rgba(60,64,67,0.08); + --radius: 20px; } * { @@ -18,9 +21,9 @@ } body { - font-family: 'Roboto', Arial, sans-serif; + font-family: 'Google Sans', 'Roboto', Arial, sans-serif; background: var(--background); - color: var(--text); + color: var(--primary); line-height: 1.6; } @@ -30,6 +33,7 @@ header { position: sticky; top: 0; z-index: 100; + box-shadow: 0 2px 8px rgba(60,64,67,0.04); } nav { display: flex; @@ -37,103 +41,126 @@ nav { align-items: center; max-width: 1200px; margin: 0 auto; - padding: 1rem 2rem; + padding: 1.2rem 2.5rem; } .logo { - font-size: 1.8rem; + font-size: 2rem; font-weight: 700; color: var(--accent); + letter-spacing: -1px; } nav ul { list-style: none; display: flex; - gap: 2rem; + gap: 2.2rem; } nav a { text-decoration: none; color: var(--primary); font-weight: 500; + font-size: 1.08rem; transition: color 0.2s; + padding: 0.3rem 0.7rem; + border-radius: 12px; } nav a.cta { - background: var(--cta); + background: linear-gradient(90deg, #1a73e8 0%, #4285f4 100%); color: #fff; - padding: 0.5rem 1.2rem; + padding: 0.6rem 1.5rem; border-radius: 24px; font-weight: 700; - transition: background 0.2s; + box-shadow: 0 2px 8px rgba(66,133,244,0.10); + transition: background 0.2s, box-shadow 0.2s; } nav a.cta:hover { - background: var(--cta-hover); + background: linear-gradient(90deg, #174ea6 0%, #4285f4 100%); + box-shadow: 0 4px 16px rgba(66,133,244,0.18); } nav a:hover { color: var(--accent); + background: #f1f3f4; } .hero { background: linear-gradient(90deg, #e3f2fd 0%, #fff 100%); text-align: center; - padding: 4rem 2rem 3rem 2rem; + padding: 5rem 2rem 4rem 2rem; + border-radius: var(--radius); + margin: 2rem auto 0 auto; + max-width: 1100px; + box-shadow: var(--shadow); } .hero h1 { - font-size: 2.8rem; + font-size: 3rem; font-weight: 700; - margin-bottom: 1rem; + margin-bottom: 1.2rem; + letter-spacing: -1px; } .hero p { - font-size: 1.3rem; + font-size: 1.35rem; color: var(--muted); - margin-bottom: 2rem; + margin-bottom: 2.2rem; } .hero .cta { - font-size: 1.1rem; - padding: 0.8rem 2.2rem; + font-size: 1.15rem; + padding: 1rem 2.5rem; border-radius: 30px; - background: var(--cta); + background: linear-gradient(90deg, #1a73e8 0%, #4285f4 100%); color: #fff; font-weight: 700; border: none; cursor: pointer; - transition: background 0.2s; + box-shadow: 0 2px 8px rgba(66,133,244,0.10); + transition: background 0.2s, box-shadow 0.2s; text-decoration: none; } .hero .cta:hover { - background: var(--cta-hover); + background: linear-gradient(90deg, #174ea6 0%, #4285f4 100%); + box-shadow: 0 4px 16px rgba(66,133,244,0.18); } .features { max-width: 1200px; - margin: 3rem auto; + margin: 3.5rem auto; padding: 0 2rem; } .features h2 { text-align: center; - font-size: 2rem; - margin-bottom: 2rem; + font-size: 2.2rem; + margin-bottom: 2.5rem; + font-weight: 700; } .features-list { display: flex; - gap: 2rem; + gap: 2.5rem; justify-content: center; flex-wrap: wrap; } .feature-item { - background: #f8f9fa; - border-radius: 16px; - padding: 2rem 1.5rem; + background: var(--card-bg); + border-radius: var(--radius); + padding: 2.2rem 1.7rem; text-align: center; - flex: 1 1 250px; - max-width: 320px; - box-shadow: 0 2px 8px rgba(60,64,67,0.06); + flex: 1 1 260px; + max-width: 340px; + box-shadow: var(--shadow); + transition: transform 0.18s, box-shadow 0.18s; +} +.feature-item:hover { + transform: translateY(-6px) scale(1.03); + box-shadow: 0 8px 32px rgba(66,133,244,0.10); } .feature-item img { - width: 64px; - height: 64px; - margin-bottom: 1rem; + width: 72px; + height: 72px; + margin-bottom: 1.2rem; + border-radius: 16px; + object-fit: cover; } .feature-item h3 { - font-size: 1.2rem; - margin-bottom: 0.5rem; + font-size: 1.25rem; + margin-bottom: 0.6rem; + font-weight: 700; } .feature-item p { color: var(--muted); @@ -141,45 +168,56 @@ nav a:hover { .gallery { background: #f1f3f4; - padding: 3rem 2rem; + padding: 3.5rem 2rem; + border-radius: var(--radius); + margin: 2rem auto; + max-width: 1100px; + box-shadow: var(--shadow); } .gallery h2 { text-align: center; - font-size: 2rem; - margin-bottom: 2rem; + font-size: 2.1rem; + margin-bottom: 2.2rem; + font-weight: 700; } .gallery-slider { display: flex; - gap: 1.5rem; + gap: 2rem; justify-content: center; flex-wrap: wrap; } .gallery-slider img { - width: 320px; - height: 220px; + width: 340px; + height: 230px; object-fit: cover; - border-radius: 12px; - box-shadow: 0 2px 8px rgba(60,64,67,0.08); + border-radius: 16px; + box-shadow: 0 2px 12px rgba(60,64,67,0.10); + transition: transform 0.18s, box-shadow 0.18s; +} +.gallery-slider img:hover { + transform: scale(1.04); + box-shadow: 0 8px 32px rgba(66,133,244,0.10); } .pricing { max-width: 600px; - margin: 3rem auto; + margin: 3.5rem auto; text-align: center; } .pricing h2 { - font-size: 2rem; - margin-bottom: 1.5rem; + font-size: 2.1rem; + margin-bottom: 1.7rem; + font-weight: 700; } .price-box { display: flex; align-items: center; justify-content: center; - gap: 1rem; - margin-bottom: 1rem; + gap: 1.2rem; + margin-bottom: 1.2rem; } .price { - font-size: 2.2rem; + font-size: 2.3rem; font-weight: 700; color: var(--cta); } @@ -191,92 +229,99 @@ nav a:hover { .pricing .cta { margin-left: 1.5rem; font-size: 1.1rem; - padding: 0.7rem 2rem; + padding: 0.8rem 2.2rem; border-radius: 30px; - background: var(--cta); + background: linear-gradient(90deg, #1a73e8 0%, #4285f4 100%); color: #fff; font-weight: 700; border: none; cursor: pointer; - transition: background 0.2s; + box-shadow: 0 2px 8px rgba(66,133,244,0.10); + transition: background 0.2s, box-shadow 0.2s; text-decoration: none; } .pricing .cta:hover { - background: var(--cta-hover); + background: linear-gradient(90deg, #174ea6 0%, #4285f4 100%); + box-shadow: 0 4px 16px rgba(66,133,244,0.18); } .pricing p { color: var(--muted); - margin-top: 0.5rem; + margin-top: 0.7rem; } .faq { max-width: 800px; - margin: 3rem auto; + margin: 3.5rem auto; padding: 0 2rem; } .faq h2 { text-align: center; - font-size: 2rem; - margin-bottom: 2rem; + font-size: 2.1rem; + margin-bottom: 2.2rem; + font-weight: 700; } .faq-list { display: flex; flex-direction: column; - gap: 1.5rem; + gap: 1.7rem; } .faq-item h3 { - font-size: 1.1rem; + font-size: 1.13rem; color: var(--primary); - margin-bottom: 0.3rem; + margin-bottom: 0.4rem; + font-weight: 700; } .faq-item p { color: var(--muted); } .buy { - max-width: 500px; - margin: 3rem auto; - padding: 2rem; - background: #f8f9fa; - border-radius: 16px; - box-shadow: 0 2px 8px rgba(60,64,67,0.06); + max-width: 520px; + margin: 3.5rem auto; + padding: 2.2rem; + background: var(--card-bg); + border-radius: var(--radius); + box-shadow: var(--shadow); text-align: center; } .buy h2 { - font-size: 1.5rem; - margin-bottom: 1.5rem; + font-size: 1.6rem; + margin-bottom: 1.7rem; + font-weight: 700; } .buy-form { display: flex; flex-direction: column; - gap: 1rem; + gap: 1.2rem; } .buy-form input { - padding: 0.8rem 1rem; + padding: 0.9rem 1.1rem; border: 1px solid var(--border); - border-radius: 8px; - font-size: 1rem; + border-radius: 10px; + font-size: 1.05rem; } .buy-form button.cta { font-size: 1.1rem; - padding: 0.8rem 2rem; + padding: 0.9rem 2.2rem; border-radius: 30px; - background: var(--cta); + background: linear-gradient(90deg, #1a73e8 0%, #4285f4 100%); color: #fff; font-weight: 700; border: none; cursor: pointer; - transition: background 0.2s; + box-shadow: 0 2px 8px rgba(66,133,244,0.10); + transition: background 0.2s, box-shadow 0.2s; } .buy-form button.cta:hover { - background: var(--cta-hover); + background: linear-gradient(90deg, #174ea6 0%, #4285f4 100%); + box-shadow: 0 4px 16px rgba(66,133,244,0.18); } footer { background: var(--background); border-top: 1px solid var(--border); - padding: 2rem 0; - margin-top: 3rem; + padding: 2.2rem 0; + margin-top: 3.5rem; } .footer-content { max-width: 1200px; @@ -287,7 +332,7 @@ footer { .social-links a { color: var(--accent); text-decoration: none; - margin: 0 0.5rem; + margin: 0 0.6rem; transition: color 0.2s; } .social-links a:hover { @@ -300,21 +345,21 @@ footer { align-items: center; } nav ul { - gap: 1rem; + gap: 1.2rem; } } @media (max-width: 600px) { nav { flex-direction: column; - gap: 1rem; + gap: 1.2rem; padding: 1rem; } .hero { - padding: 2rem 1rem 2rem 1rem; + padding: 2.2rem 1rem 2.2rem 1rem; } .features, .faq, .gallery, .pricing, .buy { - padding: 1rem; + padding: 1.1rem; } .gallery-slider img { width: 100%; diff --git a/demo/index.html b/demo/index.html index 6a216a1..346a882 100644 --- a/demo/index.html +++ b/demo/index.html @@ -62,17 +62,17 @@

Características Destacadas

- Tecnología Smart + Tecnología Smart - persona usando móvil en casa cómoda

Tecnología Smart

Controla la temperatura y funciones desde tu móvil.

- Ultra Comodidad + Ultra Comodidad - manta suave en sofá

Ultra Comodidad

Materiales premium para el máximo confort.

- Diseño Moderno + Diseño Moderno - salón moderno y acogedor

Diseño Moderno

Estilo elegante que se adapta a cualquier hogar.

@@ -81,9 +81,9 @@