You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
180 lines
7.6 KiB
180 lines
7.6 KiB
<!DOCTYPE html>
|
|
<html lang="es">
|
|
|
|
<head>
|
|
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0">
|
|
<meta name="theme-color" content="#FF5F40">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
|
|
|
<title>{{ carData && carData.pageTitle ? carData.pageTitle : '¡Auto en Venta!' }}</title>
|
|
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.4/dist/css/bulma-carousel.min.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<link rel="stylesheet"
|
|
href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700&display=swap">
|
|
|
|
<!-- Add Vue.js -->
|
|
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
|
|
<!-- Add carousel script in head to ensure it's loaded before use -->
|
|
<script src="https://cdn.jsdelivr.net/npm/bulma-carousel@4.0.4/dist/js/bulma-carousel.min.js"></script>
|
|
<!-- Add AOS for animations -->
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
|
|
|
<link rel="stylesheet" href="assets/styles.css">
|
|
|
|
</head>
|
|
|
|
<body>
|
|
<div id="app" v-cloak>
|
|
<div v-if="isLoading" class="loading-overlay">
|
|
<progress class="progress is-primary" max="100">Loading</progress>
|
|
</div>
|
|
|
|
<div v-else-if="error" class="notification is-danger">
|
|
<button class="delete"></button>
|
|
Error al cargar los datos: {{ error }}
|
|
</div>
|
|
|
|
<template v-else>
|
|
<section class="hero is-primary">
|
|
<div class="hero-body">
|
|
<div class="container">
|
|
<h1 class="title is-1 has-text-centered is-size-3-mobile" data-aos="fade-down">
|
|
{{ carData.heroTitle }}
|
|
</h1>
|
|
|
|
<p class="subtitle has-text-centered is-size-6-mobile" data-aos="fade-up" data-aos-delay="200">
|
|
{{ carData.heroSubtitle }}
|
|
</p>
|
|
|
|
<div class="price-tag has-text-centered" data-aos="zoom-in" data-aos-delay="400">
|
|
<i class="fas fa-tag mr-2"></i> {{ carData.carSpecs.find(spec => spec.feature === 'Precio')?.detail }}
|
|
</div>
|
|
|
|
<div class="buttons is-centered mt-4" data-aos="fade-up" data-aos-delay="600">
|
|
<a :href="`https://wa.me/${carData.contactInfo.whatsappNumber}?text=${encodeURIComponent(carData.contactInfo.whatsappText)}`"
|
|
class="button is-white is-outlined is-rounded" target="_blank" rel="noopener noreferrer">
|
|
<span class="icon"><i class="fab fa-whatsapp"></i></span>
|
|
<span>Escribime</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="section">
|
|
<div class="container">
|
|
<!-- Key Features Highlights -->
|
|
<div class="columns is-multiline mb-6" data-aos="fade-up">
|
|
<div class="column is-3-desktop is-6-tablet">
|
|
<div class="feature-highlight">
|
|
<span class="feature-icon">
|
|
<i class="fas fa-car"></i>
|
|
</span>
|
|
<h3 class="title is-5">
|
|
{{ carData.carSpecs.find(spec => spec.feature === 'Marca')?.detail }} {{ carData.carSpecs.find(spec =>
|
|
spec.feature === 'Modelo')?.detail }}
|
|
</h3>
|
|
<p>{{ carData.carSpecs.find(spec => spec.feature === 'Marca')?.extra }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-3-desktop is-6-tablet">
|
|
<div class="feature-highlight">
|
|
<span class="feature-icon">
|
|
<i class="fas fa-tachometer-alt"></i>
|
|
</span>
|
|
<h3 class="title is-5">{{ carData.carSpecs.find(spec => spec.feature === 'Kilometraje')?.detail }}</h3>
|
|
<p>{{ carData.carSpecs.find(spec => spec.feature === 'Kilometraje')?.extra }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-3-desktop is-6-tablet">
|
|
<div class="feature-highlight">
|
|
<span class="feature-icon">
|
|
<i class="fas fa-calendar-alt"></i>
|
|
</span>
|
|
<h3 class="title is-5">{{ carData.carSpecs.find(spec => spec.feature === 'Año')?.detail }}</h3>
|
|
<p>{{ carData.carSpecs.find(spec => spec.feature === 'Año')?.extra }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="column is-3-desktop is-6-tablet">
|
|
<div class="feature-highlight">
|
|
<span class="feature-icon">
|
|
<i class="fas fa-gas-pump"></i>
|
|
</span>
|
|
<h3 class="title is-5">{{ carData.carSpecs.find(spec => spec.feature === 'Motor')?.detail }}</h3>
|
|
<p>{{ carData.carSpecs.find(spec => spec.feature === 'Motor')?.extra }}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Gallery Section -->
|
|
<h2 class="title is-3 is-size-4-mobile section-title" data-aos="fade-right">{{ carData.galleryTitle }}</h2>
|
|
<div class="carousel-container" data-aos="fade-up">
|
|
<!-- Using the proper structure for Bulma Carousel -->
|
|
<div id="carCarousel" class="carousel">
|
|
<div v-for="(image, index) in carData.carImages" :key="index" class="carousel-item">
|
|
<figure class="image is-4by3">
|
|
<a :href="image.src" target="_blank" rel="noopener noreferrer">
|
|
<img :src="image.src" :alt="image.alt" loading="lazy">
|
|
</a>
|
|
</figure>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="title is-3 is-size-4-mobile section-title">{{ carData.specTitle }}</h2>
|
|
<div class="specs-table is-mobile-optimized">
|
|
<table class="table is-bordered is-hoverable is-fullwidth is-size-7-mobile">
|
|
<thead>
|
|
<tr>
|
|
<th><i class="fas fa-clipboard-list mr-2"></i>Característica</th>
|
|
<th><i class="fas fa-info-circle mr-2"></i>Detalle</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="(spec, index) in carData.carSpecs" :key="index">
|
|
<td><strong>{{ spec.feature }}</strong></td>
|
|
<td>{{ spec.detail }}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div class="cta-container mt-6">
|
|
<h3 class="title is-4 mb-4">¿Te interesa?</h3>
|
|
<p class="subtitle is-6 mb-5">Escribime para coordinar una visita o solicitar más información</p>
|
|
<a :href="`https://wa.me/${carData.contactInfo.whatsappNumber}?text=${encodeURIComponent(carData.contactInfo.whatsappText)}`"
|
|
class="whatsapp-button" target="_blank" rel="noopener noreferrer" aria-label="Contactar por WhatsApp">
|
|
<i class="fab fa-whatsapp"></i>
|
|
<span>{{ carData.contactInfo.buttonText }}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer class="footer">
|
|
<div class="content has-text-centered">
|
|
<div class="columns is-centered">
|
|
<div class="column is-8">
|
|
<p class="mb-4">
|
|
<span v-html="carData.footerText"></span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</template>
|
|
</div>
|
|
|
|
<script src="assets/app.js"></script>
|
|
</body>
|
|
|
|
</html>
|