Initial commit: Hapkido CHC landing page
This commit is contained in:
Mambo
488
src/pages/index.astro
Normal file
488
src/pages/index.astro
Normal file
@@ -0,0 +1,488 @@
|
||||
---
|
||||
|
||||
---
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="description" content="Aprende Hapkido en Cardedeu con David Clusellas. 30+ años de experiencia. Primera clase gratis. Desde 20€/mes.">
|
||||
<meta name="theme-color" content="#1a1a2e">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:title" content="Hapkido Cardedeu — Defensa personal en tu pueblo">
|
||||
<meta property="og:description" content="Aprende Hapkido en Cardedeu con David Clusellas. 30+ años de experiencia. Primera clase gratis. Desde 20€/mes.">
|
||||
<meta property="og:image" content="https://hapkido-chc.carlosnarro.com/og-image.png">
|
||||
<meta property="og:url" content="https://hapkido-chc.carlosnarro.com/">
|
||||
<meta property="og:locale" content="es_ES">
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@700&family=IBM+Plex+Sans:wght@400;600&display=swap">
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
||||
<title>Hapkido Cardedeu — Defensa personal en tu pueblo</title>
|
||||
<style>
|
||||
*, *:before, *:after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
|
||||
body {
|
||||
font-family: var(--font-body);
|
||||
font-size: var(--text-body);
|
||||
line-height: 1.6;
|
||||
color: var(--color-ink);
|
||||
background-color: var(--color-tatami);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
img, svg { display: block; max-width: 100%; }
|
||||
a { color: inherit; text-decoration: none; }
|
||||
|
||||
:root {
|
||||
--color-ink: oklch(15% .01 250);
|
||||
--color-tatami: oklch(96% .01 90);
|
||||
--color-ki: oklch(55% .2 25);
|
||||
--font-heading: "Space Grotesk", system-ui, sans-serif;
|
||||
--font-body: "IBM Plex Sans", system-ui, sans-serif;
|
||||
--text-hero: clamp(3.5rem, 18vw, 8rem);
|
||||
--text-h2: clamp(1.5rem, 1rem + 2vw, 2.5rem);
|
||||
--text-body: clamp(1rem, .9rem + .3vw, 1.125rem);
|
||||
--text-small: clamp(.875rem, .8rem + .2vw, 1rem);
|
||||
--space-xs: clamp(.5rem, .4rem + .5vw, .75rem);
|
||||
--space-sm: clamp(1rem, .8rem + 1vw, 1.5rem);
|
||||
--space-md: clamp(1.5rem, 1rem + 2vw, 3rem);
|
||||
--space-lg: clamp(3rem, 2rem + 4vw, 5rem);
|
||||
--space-xl: clamp(4rem, 2.5rem + 5vw, 7rem);
|
||||
--max-width: 64rem;
|
||||
}
|
||||
|
||||
.section { padding: var(--space-xl) var(--space-sm); }
|
||||
.container { max-width: var(--max-width); margin: 0 auto; }
|
||||
.section--dark { background-color: var(--color-ink); color: var(--color-tatami); }
|
||||
|
||||
.cta {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .5rem;
|
||||
background: var(--color-ki);
|
||||
color: var(--color-tatami);
|
||||
font-family: var(--font-body);
|
||||
font-weight: 600;
|
||||
font-size: var(--text-body);
|
||||
padding: 1rem 2rem;
|
||||
border-radius: .5rem;
|
||||
text-decoration: none;
|
||||
transition: opacity .2s ease, transform .2s ease;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.cta:hover { opacity: .9; transform: translateY(-1px); }
|
||||
.cta:focus-visible { outline: 3px solid var(--color-ki); outline-offset: 3px; }
|
||||
.cta svg { width: 1.25em; height: 1.25em; flex-shrink: 0; }
|
||||
|
||||
h2 {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-h2);
|
||||
font-weight: 700;
|
||||
line-height: 1.15;
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
|
||||
.bento {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
.bento-card {
|
||||
background: var(--color-ink);
|
||||
color: var(--color-tatami);
|
||||
padding: var(--space-md);
|
||||
border-radius: .75rem;
|
||||
}
|
||||
.section--dark .bento-card { background: #13161a; }
|
||||
|
||||
details {
|
||||
border-bottom: 1px solid oklch(15% .01 250 / .15);
|
||||
padding: var(--space-sm) 0;
|
||||
}
|
||||
details:last-child { border-bottom: none; }
|
||||
summary {
|
||||
font-family: var(--font-heading);
|
||||
font-weight: 700;
|
||||
font-size: var(--text-body);
|
||||
cursor: pointer;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
summary::-webkit-details-marker { display: none; }
|
||||
summary:after {
|
||||
content: "+";
|
||||
font-size: 1.5rem;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
transition: transform .2s ease;
|
||||
}
|
||||
details[open] summary:after { transform: rotate(45deg); }
|
||||
details p {
|
||||
padding-top: var(--space-xs);
|
||||
line-height: 1.7;
|
||||
color: #373b40;
|
||||
}
|
||||
.section--dark details { border-color: #f4f2ea26; }
|
||||
.section--dark details p { color: #b0aea7; }
|
||||
|
||||
.separator {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 2rem;
|
||||
opacity: .12;
|
||||
overflow: visible;
|
||||
}
|
||||
.separator line {
|
||||
stroke: currentColor;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-dasharray: 8 6;
|
||||
}
|
||||
|
||||
.hero {
|
||||
min-height: 85vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.hero__inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
}
|
||||
.hero__title {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-hero);
|
||||
font-weight: 700;
|
||||
letter-spacing: .12em;
|
||||
line-height: .85;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-ink);
|
||||
}
|
||||
.hero__subtitle {
|
||||
font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
|
||||
line-height: 1.6;
|
||||
max-width: 32rem;
|
||||
color: #373b40;
|
||||
}
|
||||
.hero__subtitle strong { color: var(--color-ink); }
|
||||
.hero__trust {
|
||||
font-size: var(--text-small);
|
||||
color: #51565b;
|
||||
letter-spacing: .02em;
|
||||
}
|
||||
|
||||
.benefit { display: flex; flex-direction: column; gap: var(--space-xs); }
|
||||
.benefit__icon { color: var(--color-ki); margin-bottom: var(--space-xs); }
|
||||
.benefit__title {
|
||||
font-family: var(--font-heading);
|
||||
font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
|
||||
font-weight: 700;
|
||||
}
|
||||
.benefit__desc {
|
||||
font-size: var(--text-small);
|
||||
line-height: 1.7;
|
||||
color: #b0aea7;
|
||||
}
|
||||
|
||||
.instructor { text-align: center; max-width: 40rem; }
|
||||
.instructor__years {
|
||||
font-family: var(--font-heading);
|
||||
font-size: clamp(1.125rem, 1rem + .5vw, 1.5rem);
|
||||
color: var(--color-ki);
|
||||
margin-top: calc(var(--space-xs) * -1);
|
||||
margin-bottom: var(--space-md);
|
||||
}
|
||||
.instructor__bio {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
margin-bottom: var(--space-md);
|
||||
text-align: left;
|
||||
line-height: 1.7;
|
||||
color: #373b40;
|
||||
}
|
||||
.instructor__bio strong { color: var(--color-ink); }
|
||||
|
||||
.details__label {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-small);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .08em;
|
||||
color: #82807a;
|
||||
margin-bottom: var(--space-xs);
|
||||
}
|
||||
.details__list { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
|
||||
.details__list li { font-size: var(--text-body); }
|
||||
.details__tag {
|
||||
font-size: .75rem;
|
||||
background: var(--color-ki);
|
||||
color: var(--color-tatami);
|
||||
padding: .15rem .5rem;
|
||||
border-radius: 1rem;
|
||||
vertical-align: middle;
|
||||
margin-left: .25rem;
|
||||
}
|
||||
.details__price { margin-bottom: var(--space-xs); }
|
||||
.details__amount {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-h2);
|
||||
color: var(--color-tatami);
|
||||
}
|
||||
.details__amount span { font-size: var(--text-small); font-weight: 400; opacity: .7; }
|
||||
.details__price-desc { font-size: var(--text-small); color: #a19e98; }
|
||||
.details__highlight {
|
||||
background: var(--color-ki) !important;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.details__highlight .details__label { color: #e0ded7; }
|
||||
.details__highlight-text {
|
||||
font-family: var(--font-heading);
|
||||
font-size: var(--text-h2);
|
||||
font-weight: 700;
|
||||
line-height: 1.15;
|
||||
}
|
||||
.details__highlight-sub {
|
||||
font-size: var(--text-small);
|
||||
opacity: .85;
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
.details__link {
|
||||
display: inline-block;
|
||||
margin-top: var(--space-xs);
|
||||
color: var(--color-ki);
|
||||
font-weight: 600;
|
||||
font-size: var(--text-small);
|
||||
}
|
||||
.details__link:hover { text-decoration: underline; }
|
||||
|
||||
.faq { max-width: 40rem; }
|
||||
.cta-final { text-align: center; }
|
||||
.cta-final__inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: var(--space-md);
|
||||
max-width: 32rem;
|
||||
}
|
||||
.cta-final__title { margin-bottom: 0; }
|
||||
.cta-final__body {
|
||||
font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
|
||||
line-height: 1.6;
|
||||
color: #b0aea7;
|
||||
}
|
||||
.cta-final__address {
|
||||
font-style: normal;
|
||||
font-size: var(--text-small);
|
||||
color: #74716b;
|
||||
}
|
||||
|
||||
.whatsapp-sticky {
|
||||
position: fixed;
|
||||
bottom: 1.5rem;
|
||||
right: 1.5rem;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: #25d366;
|
||||
color: #fff;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 4px 12px #00000040;
|
||||
z-index: 1000;
|
||||
transition: transform .2s ease;
|
||||
}
|
||||
.whatsapp-sticky:hover { transform: scale(1.1); }
|
||||
.whatsapp-sticky:focus-visible { outline: 3px solid #25d366; outline-offset: 3px; }
|
||||
.whatsapp-sticky svg { width: 28px; height: 28px; }
|
||||
@media (min-width: 768px) { .whatsapp-sticky { display: none; } }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<!-- Hero -->
|
||||
<section class="hero section">
|
||||
<div class="container hero__inner">
|
||||
<h1 class="hero__title">HAPKIDO</h1>
|
||||
<p class="hero__subtitle">
|
||||
Aprende defensa personal en Cardedeu.<br>
|
||||
La única escuela de Hapkido en el pueblo.<br>
|
||||
<strong>Primera clase gratis.</strong>
|
||||
</p>
|
||||
<p class="hero__trust">Lunes y miércoles · Viernes · Adultos desde 16 años</p>
|
||||
<a href="https://wa.me/PLACEHOLDER_WHATSAPP?text=Hola%2C%20me%20gustar%C3%ADa%20probar%20una%20clase%20de%20Hapkido" class="cta" target="_blank" rel="noopener noreferrer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
|
||||
Quiero probar una clase gratis →
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<svg class="separator" viewBox="0 0 1200 24" preserveAspectRatio="none" aria-hidden="true">
|
||||
<line x1="0" y1="12" x2="1200" y2="12"></line>
|
||||
</svg>
|
||||
|
||||
<!-- Beneficios -->
|
||||
<section class="section section--dark" id="beneficios">
|
||||
<div class="container">
|
||||
<h2>¿Por qué Hapkido?</h2>
|
||||
<div class="bento">
|
||||
<div class="bento-card benefit">
|
||||
<div class="benefit__icon"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg></div>
|
||||
<h3 class="benefit__title">Defensa personal real</h3>
|
||||
<p class="benefit__desc">Técnicas que funcionan en situaciones reales. Llaves, proyecciones y control — sin necesidad de fuerza bruta.</p>
|
||||
</div>
|
||||
<div class="bento-card benefit">
|
||||
<div class="benefit__icon"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg></div>
|
||||
<h3 class="benefit__title">Ponte en forma diferente</h3>
|
||||
<p class="benefit__desc">Nada de repetir series en una máquina. Aquí trabajas cuerpo y mente con cada técnica.</p>
|
||||
</div>
|
||||
<div class="bento-card benefit">
|
||||
<div class="benefit__icon"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2a7 7 0 0 0-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 0 0-7-7z"/><circle cx="12" cy="9" r="2.5"/></svg></div>
|
||||
<h3 class="benefit__title">Desconecta del día a día</h3>
|
||||
<p class="benefit__desc">Una hora y media donde solo existes tú y el tatami. Sin pantallas, sin agenda, sin prisa.</p>
|
||||
</div>
|
||||
<div class="bento-card benefit">
|
||||
<div class="benefit__icon"><svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg></div>
|
||||
<h3 class="benefit__title">Comunidad de verdad</h3>
|
||||
<p class="benefit__desc">Gente del pueblo que entrena junta. No es un gimnasio anónimo — aquí te conocen por tu nombre.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<svg class="separator" viewBox="0 0 1200 24" preserveAspectRatio="none" aria-hidden="true">
|
||||
<line x1="0" y1="12" x2="1200" y2="12"></line>
|
||||
</svg>
|
||||
|
||||
<!-- Instructor -->
|
||||
<section class="section" id="instructor">
|
||||
<div class="container instructor">
|
||||
<h2>David Clusellas</h2>
|
||||
<p class="instructor__years">30+ años en el tatami</p>
|
||||
<div class="instructor__bio">
|
||||
<p>
|
||||
David lleva más de treinta años practicando y enseñando Hapkido. Miembro de la
|
||||
<strong>Asociación Kido España</strong>, con diplomas reconocidos internacionalmente
|
||||
por la <strong>Korea Hapkido Federation</strong>.
|
||||
</p>
|
||||
<p>
|
||||
Cada alumno recibe <strong>seguro deportivo incluido</strong> y la posibilidad de
|
||||
obtener titulaciones oficiales válidas en Corea.
|
||||
</p>
|
||||
</div>
|
||||
<a href="https://wa.me/PLACEHOLDER_WHATSAPP?text=Hola%2C%20me%20gustar%C3%ADa%20probar%20una%20clase%20de%20Hapkido" class="cta" target="_blank" rel="noopener noreferrer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
|
||||
Habla con David por WhatsApp →
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<svg class="separator" viewBox="0 0 1200 24" preserveAspectRatio="none" aria-hidden="true">
|
||||
<line x1="0" y1="12" x2="1200" y2="12"></line>
|
||||
</svg>
|
||||
|
||||
<!-- Datos prácticos -->
|
||||
<section class="section section--dark" id="datos">
|
||||
<div class="container">
|
||||
<h2>Datos prácticos</h2>
|
||||
<div class="bento">
|
||||
<div class="bento-card">
|
||||
<h3 class="details__label">Horarios</h3>
|
||||
<ul class="details__list">
|
||||
<li><strong>Lunes y Miércoles</strong> 20:00 – 21:30</li>
|
||||
<li><strong>Viernes</strong> 19:30 – 21:00</li>
|
||||
<li><strong>Sábado</strong> 10:00 – 12:00 <span class="details__tag">avanzado</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="bento-card">
|
||||
<h3 class="details__label">Precios</h3>
|
||||
<div class="details__price">
|
||||
<p><strong class="details__amount">20€<span>/mes</span></strong></p>
|
||||
<p class="details__price-desc">Lunes, Miércoles y Viernes</p>
|
||||
</div>
|
||||
<div class="details__price">
|
||||
<p><strong class="details__amount">40€<span>/mes</span></strong></p>
|
||||
<p class="details__price-desc">Todo incluido (+ Sábado avanzado)</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bento-card details__highlight">
|
||||
<h3 class="details__label">Prueba gratis</h3>
|
||||
<p class="details__highlight-text">2 semanas sin compromiso</p>
|
||||
<p class="details__highlight-sub">Si no es para ti, sin problema.</p>
|
||||
</div>
|
||||
<div class="bento-card">
|
||||
<h3 class="details__label">Dónde estamos</h3>
|
||||
<p>Carrer Acadèmies<br>Escola Corbella<br>Cardedeu</p>
|
||||
<a href="https://www.google.com/maps/search/?api=1&query=Escola+Corbella+Carrer+Acadèmies+Cardedeu" class="details__link" target="_blank" rel="noopener noreferrer">Ver en Google Maps →</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<svg class="separator" viewBox="0 0 1200 24" preserveAspectRatio="none" aria-hidden="true">
|
||||
<line x1="0" y1="12" x2="1200" y2="12"></line>
|
||||
</svg>
|
||||
|
||||
<!-- FAQ -->
|
||||
<section class="section" id="faq">
|
||||
<div class="container faq">
|
||||
<h2>Preguntas frecuentes</h2>
|
||||
<details>
|
||||
<summary>¿Necesito experiencia previa?</summary>
|
||||
<p>No. La mayoría empieza desde cero. David adapta cada clase al nivel de cada alumno.</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary>¿Qué es el Hapkido?</summary>
|
||||
<p>Un arte marcial coreano centrado en defensa personal. Combina técnicas de agarre, proyección, golpeo y control articular. Es práctico, no competitivo.</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary>¿Hay límite de edad?</summary>
|
||||
<p>Adultos desde 16 años. No hay límite superior — tenemos alumnos de todas las edades.</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary>¿Qué pasa si tengo una lesión o limitación física?</summary>
|
||||
<p>Habla con David antes de la primera clase. Las técnicas se adaptan. Muchos alumnos entrenan con limitaciones y progresan a su ritmo.</p>
|
||||
</details>
|
||||
<details>
|
||||
<summary>¿Cómo es la primera clase?</summary>
|
||||
<p>Ven con ropa cómoda. David te presentará al grupo, explicará lo básico y participarás en la clase adaptada a tu nivel. Sin presión.</p>
|
||||
</details>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<svg class="separator" viewBox="0 0 1200 24" preserveAspectRatio="none" aria-hidden="true">
|
||||
<line x1="0" y1="12" x2="1200" y2="12"></line>
|
||||
</svg>
|
||||
|
||||
<!-- CTA Final -->
|
||||
<section class="section section--dark cta-final" id="contacto">
|
||||
<div class="container cta-final__inner">
|
||||
<h2 class="cta-final__title">Tu primera clase es gratis</h2>
|
||||
<p class="cta-final__body">Ven a probar sin compromiso. Solo necesitas ropa cómoda y ganas.</p>
|
||||
<a href="https://wa.me/PLACEHOLDER_WHATSAPP?text=Hola%2C%20me%20gustar%C3%ADa%20probar%20una%20clase%20de%20Hapkido" class="cta" target="_blank" rel="noopener noreferrer">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
|
||||
Reservar mi clase gratis →
|
||||
</a>
|
||||
<address class="cta-final__address">Carrer Acadèmies, Escola Corbella, Cardedeu</address>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<!-- WhatsApp sticky -->
|
||||
<a href="https://wa.me/PLACEHOLDER_WHATSAPP?text=Hola%2C%20me%20gustar%C3%ADa%20probar%20una%20clase%20de%20Hapkido" class="whatsapp-sticky" target="_blank" rel="noopener noreferrer" aria-label="Contactar por WhatsApp">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z"/></svg>
|
||||
</a>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user