feat: improve FAQ section styling and add more questions
- Added card wrapper with proper padding for FAQ accordion - Added 3 more FAQ questions (total 5): - ¿Necesito cuenta bancaria española? - ¿Cuánto tiempo tarda el proceso de compra? - ¿Qué es el NIE y cómo lo obtengo? - Added proper accordion styles: - Rounded corners with box-shadow - Proper spacing and colors - Hover states for buttons - Primary color for expanded items - Centered accordion content - Added fw-medium class to question text - Added event.stopPropagation() to action buttons
This commit is contained in:
TenerifeProp Dev
@@ -1151,6 +1151,64 @@
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
/* ============ ACCORDION (FAQ) ============ */
|
||||
.accordion {
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.accordion-item {
|
||||
border: 1px solid var(--border-color);
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.accordion-item:not(:last-child) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.accordion-button {
|
||||
background: var(--bg-secondary);
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
padding: 16px 20px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.accordion-button:not(.collapsed) {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.accordion-button:hover {
|
||||
background: var(--bg-tertiary, #f1f5f9);
|
||||
}
|
||||
|
||||
.accordion-button:not(.collapsed):hover {
|
||||
background: var(--primary-light);
|
||||
}
|
||||
|
||||
.accordion-button:focus {
|
||||
box-shadow: 0 0 0 3px rgba(26, 95, 74, 0.2);
|
||||
}
|
||||
|
||||
.accordion-button::after {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
background-size: 1rem;
|
||||
}
|
||||
|
||||
.accordion-body {
|
||||
padding: 20px;
|
||||
background: white;
|
||||
color: var(--text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.accordion-body p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/* ============ RESPONSIVE ============ */
|
||||
@media (max-width: 1400px) {
|
||||
.stats-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
@@ -2255,43 +2313,108 @@ Ver todos
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="accordion" id="faqAccordionAdmin">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1-admin">
|
||||
<div class="d-flex justify-content-between align-items-center w-100 me-3">
|
||||
<span>¿Puedo comprar terreno siendo extranjero en España?</span>
|
||||
<div class="d-flex gap-2">
|
||||
<span class="badge bg-success">Activo</span>
|
||||
<button class="btn btn-sm btn-outline-primary"><i class="bi bi-pencil"></i></button>
|
||||
<button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</h2>
|
||||
<div id="faq1-admin" class="accordion-collapse collapse show" data-bs-parent="#faqAccordionAdmin">
|
||||
<div class="accordion-body">
|
||||
Sí, absolutamente. España permite la compra de propiedades a ciudadanos extranjeros sin restricciones. Necesitará obtener un NIE (Número de Identificación de Extranjero) para completar la transacción.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2-admin">
|
||||
<div class="d-flex justify-content-between align-items-center w-100 me-3">
|
||||
<span>¿Qué costes adicionales hay que tener en cuenta al comprar?</span>
|
||||
<div class="d-flex gap-2">
|
||||
<span class="badge bg-success">Activo</span>
|
||||
<button class="btn btn-sm btn-outline-primary"><i class="bi bi-pencil"></i></button>
|
||||
<button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</h2>
|
||||
<div id="faq2-admin" class="accordion-collapse collapse" data-bs-parent="#faqAccordionAdmin">
|
||||
<div class="accordion-body">
|
||||
Además del precio de compra, debe presupuestar: Impuesto de Transmisiones Patrimoniales (ITP) 6.5-8%, gastos de notaría (aprox. 1%), registro de propiedad (0.5-1%), gestoría (0.5-1%) y honorarios de la agencia.
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="accordion" id="faqAccordionAdmin">
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#faq1-admin">
|
||||
<div class="d-flex justify-content-between align-items-center w-100 me-3">
|
||||
<span class="fw-medium">¿Puedo comprar terreno siendo extranjero en España?</span>
|
||||
<div class="d-flex gap-2" onclick="event.stopPropagation();">
|
||||
<span class="badge bg-success">Activo</span>
|
||||
<button class="btn btn-sm btn-outline-primary"><i class="bi bi-pencil"></i></button>
|
||||
<button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</h2>
|
||||
<div id="faq1-admin" class="accordion-collapse collapse show" data-bs-parent="#faqAccordionAdmin">
|
||||
<div class="accordion-body">
|
||||
Sí, absolutamente. España permite la compra de propiedades a ciudadanos extranjeros sin restricciones. Necesitará obtener un NIE (Número de Identificación de Extranjero) para completar la transacción.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq2-admin">
|
||||
<div class="d-flex justify-content-between align-items-center w-100 me-3">
|
||||
<span class="fw-medium">¿Qué costes adicionales hay que tener en cuenta al comprar?</span>
|
||||
<div class="d-flex gap-2" onclick="event.stopPropagation();">
|
||||
<span class="badge bg-success">Activo</span>
|
||||
<button class="btn btn-sm btn-outline-primary"><i class="bi bi-pencil"></i></button>
|
||||
<button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</h2>
|
||||
<div id="faq2-admin" class="accordion-collapse collapse" data-bs-parent="#faqAccordionAdmin">
|
||||
<div class="accordion-body">
|
||||
Además del precio de compra, debe presupuestar: Impuesto de Transmisiones Patrimoniales (ITP) 6.5-8%, gastos de notaría (aprox. 1%), registro de propiedad (0.5-1%), gestoría (0.5-1%) y honorarios de la agencia.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq3-admin">
|
||||
<div class="d-flex justify-content-between align-items-center w-100 me-3">
|
||||
<span class="fw-medium">¿Necesito cuenta bancaria española?</span>
|
||||
<div class="d-flex gap-2" onclick="event.stopPropagation();">
|
||||
<span class="badge bg-success">Activo</span>
|
||||
<button class="btn btn-sm btn-outline-primary"><i class="bi bi-pencil"></i></button>
|
||||
<button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</h2>
|
||||
<div id="faq3-admin" class="accordion-collapse collapse" data-bs-parent="#faqAccordionAdmin">
|
||||
<div class="accordion-body">
|
||||
No es obligatorio, pero muy recomendable. Una cuenta bancaria española facilita el pago de impuestos, servicios y gastos relacionados con la propiedad. Los bancos extranjeros cobran comisiones por transferencias internacionales.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq4-admin">
|
||||
<div class="d-flex justify-content-between align-items-center w-100 me-3">
|
||||
<span class="fw-medium">¿Cuánto tiempo tarda el proceso de compra?</span>
|
||||
<div class="d-flex gap-2" onclick="event.stopPropagation();">
|
||||
<span class="badge bg-warning">Borrador</span>
|
||||
<button class="btn btn-sm btn-outline-primary"><i class="bi bi-pencil"></i></button>
|
||||
<button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</h2>
|
||||
<div id="faq4-admin" class="accordion-collapse collapse" data-bs-parent="#faqAccordionAdmin">
|
||||
<div class="accordion-body">
|
||||
El proceso completo puede tardar entre 4 y 12 semanas, dependiendo de la complejidad. Esto incluye: verificación de título de propiedad (2-4 semanas), obtención de NIE para extranjeros (1-3 semanas), firma de contrato de arras (1 semana) y escritura pública ante notario (2-4 semanas).
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="accordion-item">
|
||||
<h2 class="accordion-header">
|
||||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#faq5-admin">
|
||||
<div class="d-flex justify-content-between align-items-center w-100 me-3">
|
||||
<span class="fw-medium">¿Qué es el NIE y cómo lo obtengo?</span>
|
||||
<div class="d-flex gap-2" onclick="event.stopPropagation();">
|
||||
<span class="badge bg-success">Activo</span>
|
||||
<button class="btn btn-sm btn-outline-primary"><i class="bi bi-pencil"></i></button>
|
||||
<button class="btn btn-sm btn-outline-danger"><i class="bi bi-trash"></i></button>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
</h2>
|
||||
<div id="faq5-admin" class="accordion-collapse collapse" data-bs-parent="#faqAccordionAdmin">
|
||||
<div class="accordion-body">
|
||||
El NIE (Número de Identificación de Extranjero) es un documento obligatorio para extranjeros que deseen realizar trámites en España. Se obtiene en la Oficina de Extranjería o en el Consulado español en su país de origen. Necesita pasar por Spain, presentar pasaporte y pagar una tasa de aproximadamente 10€.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user