Compare commits

...

1 Commits
dev ... master

Author SHA1 Message Date
d67ec94f8f chore: add coolify configuration 2025-06-25 09:28:52 +00:00
3 changed files with 150 additions and 92 deletions

13
.coolify Normal file
View File

@ -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"
}
}

View File

@ -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 { :root {
--primary: #3c4043; --primary: #202124;
--accent: #4285f4; --accent: #4285f4;
--background: #fff; --background: #fff;
--text: #202124; --text: #3c4043;
--muted: #5f6368; --muted: #5f6368;
--cta: #1a73e8; --cta: #1a73e8;
--cta-hover: #1765c1; --cta-hover: #174ea6;
--border: #e0e0e0; --border: #e0e0e0;
--card-bg: #f8f9fa;
--shadow: 0 4px 24px rgba(60,64,67,0.08);
--radius: 20px;
} }
* { * {
@ -18,9 +21,9 @@
} }
body { body {
font-family: 'Roboto', Arial, sans-serif; font-family: 'Google Sans', 'Roboto', Arial, sans-serif;
background: var(--background); background: var(--background);
color: var(--text); color: var(--primary);
line-height: 1.6; line-height: 1.6;
} }
@ -30,6 +33,7 @@ header {
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 100;
box-shadow: 0 2px 8px rgba(60,64,67,0.04);
} }
nav { nav {
display: flex; display: flex;
@ -37,103 +41,126 @@ nav {
align-items: center; align-items: center;
max-width: 1200px; max-width: 1200px;
margin: 0 auto; margin: 0 auto;
padding: 1rem 2rem; padding: 1.2rem 2.5rem;
} }
.logo { .logo {
font-size: 1.8rem; font-size: 2rem;
font-weight: 700; font-weight: 700;
color: var(--accent); color: var(--accent);
letter-spacing: -1px;
} }
nav ul { nav ul {
list-style: none; list-style: none;
display: flex; display: flex;
gap: 2rem; gap: 2.2rem;
} }
nav a { nav a {
text-decoration: none; text-decoration: none;
color: var(--primary); color: var(--primary);
font-weight: 500; font-weight: 500;
font-size: 1.08rem;
transition: color 0.2s; transition: color 0.2s;
padding: 0.3rem 0.7rem;
border-radius: 12px;
} }
nav a.cta { nav a.cta {
background: var(--cta); background: linear-gradient(90deg, #1a73e8 0%, #4285f4 100%);
color: #fff; color: #fff;
padding: 0.5rem 1.2rem; padding: 0.6rem 1.5rem;
border-radius: 24px; border-radius: 24px;
font-weight: 700; 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 { 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 { nav a:hover {
color: var(--accent); color: var(--accent);
background: #f1f3f4;
} }
.hero { .hero {
background: linear-gradient(90deg, #e3f2fd 0%, #fff 100%); background: linear-gradient(90deg, #e3f2fd 0%, #fff 100%);
text-align: center; 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 { .hero h1 {
font-size: 2.8rem; font-size: 3rem;
font-weight: 700; font-weight: 700;
margin-bottom: 1rem; margin-bottom: 1.2rem;
letter-spacing: -1px;
} }
.hero p { .hero p {
font-size: 1.3rem; font-size: 1.35rem;
color: var(--muted); color: var(--muted);
margin-bottom: 2rem; margin-bottom: 2.2rem;
} }
.hero .cta { .hero .cta {
font-size: 1.1rem; font-size: 1.15rem;
padding: 0.8rem 2.2rem; padding: 1rem 2.5rem;
border-radius: 30px; border-radius: 30px;
background: var(--cta); background: linear-gradient(90deg, #1a73e8 0%, #4285f4 100%);
color: #fff; color: #fff;
font-weight: 700; font-weight: 700;
border: none; border: none;
cursor: pointer; 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; text-decoration: none;
} }
.hero .cta:hover { .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 { .features {
max-width: 1200px; max-width: 1200px;
margin: 3rem auto; margin: 3.5rem auto;
padding: 0 2rem; padding: 0 2rem;
} }
.features h2 { .features h2 {
text-align: center; text-align: center;
font-size: 2rem; font-size: 2.2rem;
margin-bottom: 2rem; margin-bottom: 2.5rem;
font-weight: 700;
} }
.features-list { .features-list {
display: flex; display: flex;
gap: 2rem; gap: 2.5rem;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
} }
.feature-item { .feature-item {
background: #f8f9fa; background: var(--card-bg);
border-radius: 16px; border-radius: var(--radius);
padding: 2rem 1.5rem; padding: 2.2rem 1.7rem;
text-align: center; text-align: center;
flex: 1 1 250px; flex: 1 1 260px;
max-width: 320px; max-width: 340px;
box-shadow: 0 2px 8px rgba(60,64,67,0.06); 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 { .feature-item img {
width: 64px; width: 72px;
height: 64px; height: 72px;
margin-bottom: 1rem; margin-bottom: 1.2rem;
border-radius: 16px;
object-fit: cover;
} }
.feature-item h3 { .feature-item h3 {
font-size: 1.2rem; font-size: 1.25rem;
margin-bottom: 0.5rem; margin-bottom: 0.6rem;
font-weight: 700;
} }
.feature-item p { .feature-item p {
color: var(--muted); color: var(--muted);
@ -141,45 +168,56 @@ nav a:hover {
.gallery { .gallery {
background: #f1f3f4; 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 { .gallery h2 {
text-align: center; text-align: center;
font-size: 2rem; font-size: 2.1rem;
margin-bottom: 2rem; margin-bottom: 2.2rem;
font-weight: 700;
} }
.gallery-slider { .gallery-slider {
display: flex; display: flex;
gap: 1.5rem; gap: 2rem;
justify-content: center; justify-content: center;
flex-wrap: wrap; flex-wrap: wrap;
} }
.gallery-slider img { .gallery-slider img {
width: 320px; width: 340px;
height: 220px; height: 230px;
object-fit: cover; object-fit: cover;
border-radius: 12px; border-radius: 16px;
box-shadow: 0 2px 8px rgba(60,64,67,0.08); 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 { .pricing {
max-width: 600px; max-width: 600px;
margin: 3rem auto; margin: 3.5rem auto;
text-align: center; text-align: center;
} }
.pricing h2 { .pricing h2 {
font-size: 2rem; font-size: 2.1rem;
margin-bottom: 1.5rem; margin-bottom: 1.7rem;
font-weight: 700;
} }
.price-box { .price-box {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 1rem; gap: 1.2rem;
margin-bottom: 1rem; margin-bottom: 1.2rem;
} }
.price { .price {
font-size: 2.2rem; font-size: 2.3rem;
font-weight: 700; font-weight: 700;
color: var(--cta); color: var(--cta);
} }
@ -191,92 +229,99 @@ nav a:hover {
.pricing .cta { .pricing .cta {
margin-left: 1.5rem; margin-left: 1.5rem;
font-size: 1.1rem; font-size: 1.1rem;
padding: 0.7rem 2rem; padding: 0.8rem 2.2rem;
border-radius: 30px; border-radius: 30px;
background: var(--cta); background: linear-gradient(90deg, #1a73e8 0%, #4285f4 100%);
color: #fff; color: #fff;
font-weight: 700; font-weight: 700;
border: none; border: none;
cursor: pointer; 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; text-decoration: none;
} }
.pricing .cta:hover { .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 { .pricing p {
color: var(--muted); color: var(--muted);
margin-top: 0.5rem; margin-top: 0.7rem;
} }
.faq { .faq {
max-width: 800px; max-width: 800px;
margin: 3rem auto; margin: 3.5rem auto;
padding: 0 2rem; padding: 0 2rem;
} }
.faq h2 { .faq h2 {
text-align: center; text-align: center;
font-size: 2rem; font-size: 2.1rem;
margin-bottom: 2rem; margin-bottom: 2.2rem;
font-weight: 700;
} }
.faq-list { .faq-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1.5rem; gap: 1.7rem;
} }
.faq-item h3 { .faq-item h3 {
font-size: 1.1rem; font-size: 1.13rem;
color: var(--primary); color: var(--primary);
margin-bottom: 0.3rem; margin-bottom: 0.4rem;
font-weight: 700;
} }
.faq-item p { .faq-item p {
color: var(--muted); color: var(--muted);
} }
.buy { .buy {
max-width: 500px; max-width: 520px;
margin: 3rem auto; margin: 3.5rem auto;
padding: 2rem; padding: 2.2rem;
background: #f8f9fa; background: var(--card-bg);
border-radius: 16px; border-radius: var(--radius);
box-shadow: 0 2px 8px rgba(60,64,67,0.06); box-shadow: var(--shadow);
text-align: center; text-align: center;
} }
.buy h2 { .buy h2 {
font-size: 1.5rem; font-size: 1.6rem;
margin-bottom: 1.5rem; margin-bottom: 1.7rem;
font-weight: 700;
} }
.buy-form { .buy-form {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1.2rem;
} }
.buy-form input { .buy-form input {
padding: 0.8rem 1rem; padding: 0.9rem 1.1rem;
border: 1px solid var(--border); border: 1px solid var(--border);
border-radius: 8px; border-radius: 10px;
font-size: 1rem; font-size: 1.05rem;
} }
.buy-form button.cta { .buy-form button.cta {
font-size: 1.1rem; font-size: 1.1rem;
padding: 0.8rem 2rem; padding: 0.9rem 2.2rem;
border-radius: 30px; border-radius: 30px;
background: var(--cta); background: linear-gradient(90deg, #1a73e8 0%, #4285f4 100%);
color: #fff; color: #fff;
font-weight: 700; font-weight: 700;
border: none; border: none;
cursor: pointer; 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 { .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 { footer {
background: var(--background); background: var(--background);
border-top: 1px solid var(--border); border-top: 1px solid var(--border);
padding: 2rem 0; padding: 2.2rem 0;
margin-top: 3rem; margin-top: 3.5rem;
} }
.footer-content { .footer-content {
max-width: 1200px; max-width: 1200px;
@ -287,7 +332,7 @@ footer {
.social-links a { .social-links a {
color: var(--accent); color: var(--accent);
text-decoration: none; text-decoration: none;
margin: 0 0.5rem; margin: 0 0.6rem;
transition: color 0.2s; transition: color 0.2s;
} }
.social-links a:hover { .social-links a:hover {
@ -300,21 +345,21 @@ footer {
align-items: center; align-items: center;
} }
nav ul { nav ul {
gap: 1rem; gap: 1.2rem;
} }
} }
@media (max-width: 600px) { @media (max-width: 600px) {
nav { nav {
flex-direction: column; flex-direction: column;
gap: 1rem; gap: 1.2rem;
padding: 1rem; padding: 1rem;
} }
.hero { .hero {
padding: 2rem 1rem 2rem 1rem; padding: 2.2rem 1rem 2.2rem 1rem;
} }
.features, .faq, .gallery, .pricing, .buy { .features, .faq, .gallery, .pricing, .buy {
padding: 1rem; padding: 1.1rem;
} }
.gallery-slider img { .gallery-slider img {
width: 100%; width: 100%;

View File

@ -62,17 +62,17 @@
<h2>Características Destacadas</h2> <h2>Características Destacadas</h2>
<div class="features-list"> <div class="features-list">
<div class="feature-item"> <div class="feature-item">
<img src="assets/img/feature1.png" alt="Tecnología Smart"> <img src="https://images.unsplash.com/photo-1519125323398-675f0ddb6308?auto=format&fit=crop&w=128&q=80" alt="Tecnología Smart - persona usando móvil en casa cómoda">
<h3>Tecnología Smart</h3> <h3>Tecnología Smart</h3>
<p>Controla la temperatura y funciones desde tu móvil.</p> <p>Controla la temperatura y funciones desde tu móvil.</p>
</div> </div>
<div class="feature-item"> <div class="feature-item">
<img src="assets/img/feature2.png" alt="Ultra Comodidad"> <img src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=128&q=80" alt="Ultra Comodidad - manta suave en sofá">
<h3>Ultra Comodidad</h3> <h3>Ultra Comodidad</h3>
<p>Materiales premium para el máximo confort.</p> <p>Materiales premium para el máximo confort.</p>
</div> </div>
<div class="feature-item"> <div class="feature-item">
<img src="assets/img/feature3.png" alt="Diseño Moderno"> <img src="https://images.unsplash.com/photo-1465101046530-73398c7f28ca?auto=format&fit=crop&w=128&q=80" alt="Diseño Moderno - salón moderno y acogedor">
<h3>Diseño Moderno</h3> <h3>Diseño Moderno</h3>
<p>Estilo elegante que se adapta a cualquier hogar.</p> <p>Estilo elegante que se adapta a cualquier hogar.</p>
</div> </div>
@ -81,9 +81,9 @@
<section class="gallery" id="gallery"> <section class="gallery" id="gallery">
<h2>Galería</h2> <h2>Galería</h2>
<div class="gallery-slider"> <div class="gallery-slider">
<img src="assets/img/batamanta1.jpg" alt="Batamanta vista frontal"> <img src="https://images.unsplash.com/photo-1517841905240-472988babdf9?auto=format&fit=crop&w=600&q=80" alt="Batamanta vista frontal - persona relajada en manta">
<img src="assets/img/batamanta2.jpg" alt="Batamanta en uso"> <img src="https://images.unsplash.com/photo-1515378791036-0648a3ef77b2?auto=format&fit=crop&w=600&q=80" alt="Batamanta en uso - familia en sofá con manta">
<img src="assets/img/batamanta3.jpg" alt="Detalle de la Batamanta"> <img src="https://images.unsplash.com/photo-1465101178521-c1a9136a3b41?auto=format&fit=crop&w=600&q=80" alt="Detalle de la Batamanta - textura de manta suave">
</div> </div>
</section> </section>
<section class="pricing" id="pricing"> <section class="pricing" id="pricing">