rodley82
1 month ago
commit
729c2e0897
7 changed files with 758 additions and 0 deletions
@ -0,0 +1,114 @@ |
|||
const { createApp, ref, onMounted, computed } = Vue; |
|||
|
|||
createApp({ |
|||
setup() { |
|||
const carData = ref({}); |
|||
const isLoading = ref(true); |
|||
const error = ref(null); |
|||
|
|||
// Function to load configuration from data.json
|
|||
const loadCarData = async () => { |
|||
try { |
|||
const dataJsonPath = './data.json'; |
|||
const response = await fetch(dataJsonPath, { cache: 'no-store', headers: { 'Cache-Control': 'no-cache' } }); |
|||
|
|||
if (!response.ok) { |
|||
throw new Error(`HTTP error! status: ${response.status}`); |
|||
} |
|||
|
|||
const data = await response.json(); |
|||
carData.value = data; |
|||
isLoading.value = false; |
|||
} catch (err) { |
|||
console.error('Error loading car data:', err); |
|||
error.value = err.message; |
|||
isLoading.value = false; |
|||
} |
|||
}; |
|||
|
|||
onMounted(async () => { |
|||
// Set page title based on device
|
|||
document.title = window.innerWidth <= 768 ? 'Auto en Venta' : (carData.value?.pageTitle); |
|||
|
|||
// Load car data from data.json
|
|||
await loadCarData(); |
|||
|
|||
// Initialize carousel and animations after data is loaded
|
|||
if (!error.value) { |
|||
// Wait for DOM to be fully updated
|
|||
setTimeout(() => { |
|||
// Initialize AOS animations
|
|||
AOS.init({ |
|||
duration: 800, |
|||
easing: 'ease-in-out', |
|||
once: true, |
|||
mirror: false, |
|||
offset: 50 |
|||
}); |
|||
|
|||
// Initialize enhanced mobile-friendly carousel
|
|||
try { |
|||
// Make sure the carousel element exists before initializing
|
|||
const carouselElement = document.getElementById('carCarousel'); |
|||
|
|||
// Check if carousel element exists and has carousel items
|
|||
if (carouselElement && carData.value && carData.value.carImages && carData.value.carImages.length > 0) { |
|||
// Wait a bit more for images to load
|
|||
setTimeout(() => { |
|||
// Initialize with simpler options to ensure compatibility
|
|||
bulmaCarousel.attach('#carCarousel', { |
|||
slidesToScroll: 1, |
|||
slidesToShow: 1, |
|||
loop: true, |
|||
autoplay: true, |
|||
autoplaySpeed: 3000, |
|||
pagination: true |
|||
}); |
|||
console.log('Carousel initialized successfully'); |
|||
}, 200); |
|||
} else { |
|||
console.error('Carousel element not found or no images available'); |
|||
} |
|||
} catch (error) { |
|||
console.error('Error initializing carousel:', error); |
|||
|
|||
// Fallback: Create a simple manual carousel if Bulma carousel fails
|
|||
try { |
|||
const carouselElement = document.getElementById('carCarousel'); |
|||
if (carouselElement) { |
|||
// Add a class to indicate fallback mode
|
|||
carouselElement.classList.add('fallback-carousel'); |
|||
|
|||
// Get all carousel items
|
|||
const items = carouselElement.querySelectorAll('.carousel-item'); |
|||
if (items.length > 0) { |
|||
// Show only the first item initially
|
|||
items.forEach((item, index) => { |
|||
item.style.display = index === 0 ? 'block' : 'none'; |
|||
}); |
|||
|
|||
console.log('Fallback carousel initialized'); |
|||
} |
|||
} |
|||
} catch (fallbackError) { |
|||
console.error('Error initializing fallback carousel:', fallbackError); |
|||
} |
|||
} |
|||
|
|||
// Add fade-in animation to elements with class 'fade-in'
|
|||
document.querySelectorAll('.fade-in').forEach((el, index) => { |
|||
setTimeout(() => { |
|||
el.classList.add('visible'); |
|||
}, 100 * index); |
|||
}); |
|||
}, 300); // Increased timeout to ensure DOM is ready
|
|||
} |
|||
}); |
|||
|
|||
return { |
|||
carData, |
|||
isLoading, |
|||
error |
|||
}; |
|||
} |
|||
}).mount('#app'); |
|||
|
After Width: | Height: | Size: 129 KiB |
|
After Width: | Height: | Size: 156 KiB |
|
After Width: | Height: | Size: 151 KiB |
@ -0,0 +1,397 @@ |
|||
/* Base styles and variables */ |
|||
:root { |
|||
--primary-color: #FF5F40; |
|||
--primary-dark: #E04B30; |
|||
--secondary-color: #2C3E50; |
|||
--accent-color: #3498DB; |
|||
--light-bg: #F8F9FA; |
|||
--dark-text: #2C3E50; |
|||
--light-text: #FFFFFF; |
|||
--border-radius: 10px; |
|||
--box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); |
|||
--gradient-primary: linear-gradient(135deg, #FF5F40 0%, #E04B30 100%); |
|||
--gradient-dark: linear-gradient(135deg, #2C3E50 0%, #1A252F 100%); |
|||
} |
|||
|
|||
/* Global styles */ |
|||
body { |
|||
font-family: 'Montserrat', sans-serif; |
|||
color: var(--dark-text); |
|||
background-color: var(--light-bg); |
|||
line-height: 1.6; |
|||
} |
|||
|
|||
h1, |
|||
h2, |
|||
h3, |
|||
h4, |
|||
h5, |
|||
h6 { |
|||
font-family: 'Poppins', sans-serif; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
[v-cloak] { |
|||
display: none; |
|||
} |
|||
|
|||
.loading-overlay { |
|||
position: fixed; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background-color: rgba(255, 255, 255, 0.9); |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
z-index: 1000; |
|||
} |
|||
|
|||
.loading-overlay .progress { |
|||
width: 80%; |
|||
max-width: 300px; |
|||
height: 8px; |
|||
border-radius: 4px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
/* Hero section styling */ |
|||
.hero.is-primary { |
|||
background: var(--gradient-primary); |
|||
position: relative; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.hero.is-primary::before { |
|||
content: ''; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background-image: url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80'); |
|||
background-size: cover; |
|||
background-position: center; |
|||
opacity: 0.15; |
|||
z-index: 0; |
|||
} |
|||
|
|||
.hero-body { |
|||
position: relative; |
|||
z-index: 1; |
|||
padding: 4rem 1.5rem; |
|||
} |
|||
|
|||
.hero .title { |
|||
font-weight: 700; |
|||
letter-spacing: -0.5px; |
|||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.hero .subtitle { |
|||
font-weight: 400; |
|||
max-width: 600px; |
|||
margin: 1rem auto 0; |
|||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
/* Section styling */ |
|||
.section { |
|||
padding: 3rem 1.5rem; |
|||
} |
|||
|
|||
.section-title { |
|||
position: relative; |
|||
margin-bottom: 2rem; |
|||
padding-bottom: 0.75rem; |
|||
} |
|||
|
|||
.section-title::after { |
|||
content: ''; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
width: 60px; |
|||
height: 4px; |
|||
background: var(--primary-color); |
|||
border-radius: 2px; |
|||
} |
|||
|
|||
/* Card styling */ |
|||
.card { |
|||
border-radius: var(--border-radius); |
|||
box-shadow: var(--box-shadow); |
|||
overflow: hidden; |
|||
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|||
height: 100%; |
|||
} |
|||
|
|||
.card:hover { |
|||
transform: translateY(-5px); |
|||
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.15); |
|||
} |
|||
|
|||
/* Carousel styling */ |
|||
.carousel-container { |
|||
border-radius: var(--border-radius); |
|||
overflow: hidden; |
|||
box-shadow: var(--box-shadow); |
|||
margin-bottom: 2.5rem; |
|||
} |
|||
|
|||
/* Ensure images are properly sized */ |
|||
.carousel .carousel-item img { |
|||
width: 100%; |
|||
height: 450px; |
|||
object-fit: cover; |
|||
} |
|||
|
|||
/* Style carousel navigation */ |
|||
.carousel-nav-left, |
|||
.carousel-nav-right { |
|||
background-color: rgba(255, 255, 255, 0.8); |
|||
border-radius: 50%; |
|||
width: 40px; |
|||
height: 40px; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); |
|||
transition: all 0.2s ease; |
|||
cursor: pointer; |
|||
position: absolute; |
|||
top: 50%; |
|||
transform: translateY(-50%); |
|||
} |
|||
|
|||
.carousel-nav-left { |
|||
left: 10px; |
|||
} |
|||
|
|||
.carousel-nav-right { |
|||
right: 10px; |
|||
} |
|||
|
|||
.carousel-nav-left:hover, |
|||
.carousel-nav-right:hover { |
|||
background-color: white; |
|||
transform: translateY(-50%) scale(1.1); |
|||
} |
|||
|
|||
/* Style carousel indicators */ |
|||
.carousel-indicator { |
|||
background-color: rgba(255, 255, 255, 0.6); |
|||
border: 1px solid rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
.carousel-indicator.is-active { |
|||
background-color: var(--primary-color); |
|||
} |
|||
|
|||
/* Fallback carousel styles */ |
|||
.fallback-carousel { |
|||
position: relative; |
|||
overflow: hidden; |
|||
border-radius: var(--border-radius); |
|||
} |
|||
|
|||
.fallback-carousel .carousel-item { |
|||
transition: opacity 0.5s ease; |
|||
} |
|||
|
|||
.fallback-carousel .carousel-nav-left, |
|||
.fallback-carousel .carousel-nav-right { |
|||
z-index: 10; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
/* Feature highlights */ |
|||
.feature-highlight { |
|||
text-align: center; |
|||
padding: 1.5rem; |
|||
margin-bottom: 1.5rem; |
|||
background-color: white; |
|||
border-radius: var(--border-radius); |
|||
box-shadow: var(--box-shadow); |
|||
transition: transform 0.3s ease; |
|||
} |
|||
|
|||
.feature-highlight:hover { |
|||
transform: translateY(-5px); |
|||
} |
|||
|
|||
.feature-icon { |
|||
font-size: 2rem; |
|||
color: var(--primary-color); |
|||
margin-bottom: 1rem; |
|||
display: inline-block; |
|||
background: rgba(255, 95, 64, 0.1); |
|||
padding: 1rem; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
/* Specs table styling */ |
|||
.specs-table { |
|||
border-radius: var(--border-radius); |
|||
overflow: hidden; |
|||
box-shadow: var(--box-shadow); |
|||
} |
|||
|
|||
.specs-table .table { |
|||
background-color: white; |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.specs-table th { |
|||
background-color: var(--secondary-color); |
|||
color: white; |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.specs-table tr:nth-child(even) { |
|||
background-color: rgba(0, 0, 0, 0.02); |
|||
} |
|||
|
|||
/* WhatsApp button styling */ |
|||
.cta-container { |
|||
text-align: center; |
|||
padding: 2rem; |
|||
background: white; |
|||
border-radius: var(--border-radius); |
|||
box-shadow: var(--box-shadow); |
|||
margin: 2rem 0; |
|||
} |
|||
|
|||
.whatsapp-button { |
|||
background: var(--gradient-primary); |
|||
color: white !important; |
|||
padding: 12px 28px; |
|||
border-radius: 50px; |
|||
font-weight: 600; |
|||
font-size: 1.1rem; |
|||
display: inline-flex; |
|||
align-items: center; |
|||
gap: 10px; |
|||
box-shadow: 0 4px 15px rgba(255, 95, 64, 0.4); |
|||
transition: all 0.3s ease; |
|||
border: none; |
|||
} |
|||
|
|||
.whatsapp-button:hover, |
|||
.whatsapp-button:focus { |
|||
transform: translateY(-3px); |
|||
box-shadow: 0 6px 20px rgba(255, 95, 64, 0.5); |
|||
background: linear-gradient(135deg, #FF7E66 0%, #E04B30 100%); |
|||
} |
|||
|
|||
.whatsapp-button:active { |
|||
transform: translateY(-1px); |
|||
} |
|||
|
|||
.whatsapp-button i { |
|||
font-size: 1.4rem; |
|||
} |
|||
|
|||
/* Footer styling */ |
|||
.footer { |
|||
background-color: var(--secondary-color); |
|||
color: white; |
|||
padding: 3rem 1.5rem; |
|||
} |
|||
|
|||
.footer strong { |
|||
color: white; |
|||
} |
|||
|
|||
/* Price tag */ |
|||
.price-tag { |
|||
background: var(--gradient-primary); |
|||
color: white; |
|||
/*display: inline-block; */ |
|||
padding: 0.75rem 1.5rem; |
|||
border-radius: 50px; |
|||
font-weight: 700; |
|||
font-size: 1.5rem; |
|||
margin: 1rem 0; |
|||
box-shadow: 0 4px 10px rgba(255, 95, 64, 0.3); |
|||
} |
|||
|
|||
/* Mobile-specific styles */ |
|||
@media screen and (max-width: 768px) { |
|||
|
|||
html, |
|||
body { |
|||
overflow-x: hidden; |
|||
-webkit-overflow-scrolling: touch; |
|||
} |
|||
|
|||
body { |
|||
position: relative; |
|||
width: 100%; |
|||
} |
|||
|
|||
.hero-body { |
|||
padding: 3rem 1rem; |
|||
} |
|||
|
|||
.carousel .carousel-item img { |
|||
height: 300px; |
|||
} |
|||
|
|||
.carousel-nav-left, |
|||
.carousel-nav-right { |
|||
width: 35px; |
|||
height: 35px; |
|||
} |
|||
|
|||
.table-container { |
|||
overflow-x: auto; |
|||
} |
|||
|
|||
.title.is-1 { |
|||
font-size: 2rem !important; |
|||
} |
|||
|
|||
.title.is-3 { |
|||
font-size: 1.5rem !important; |
|||
} |
|||
|
|||
.section { |
|||
padding: 2rem 1rem; |
|||
} |
|||
|
|||
.whatsapp-button { |
|||
width: 100%; |
|||
max-width: 300px; |
|||
font-size: 1rem; |
|||
padding: 12px 16px; |
|||
} |
|||
|
|||
.container { |
|||
padding: 0 15px; |
|||
} |
|||
} |
|||
|
|||
/* Animation classes */ |
|||
.fade-in { |
|||
opacity: 0; |
|||
transform: translateY(20px); |
|||
transition: opacity 0.6s ease, transform 0.6s ease; |
|||
} |
|||
|
|||
.fade-in.visible { |
|||
opacity: 1; |
|||
transform: translateY(0); |
|||
} |
|||
|
|||
/* Optimize image loading */ |
|||
img { |
|||
display: block; |
|||
} |
|||
|
|||
/* Mobile-optimized table container */ |
|||
.is-mobile-optimized { |
|||
-webkit-overflow-scrolling: touch; |
|||
scroll-behavior: smooth; |
|||
} |
|||
@ -0,0 +1,67 @@ |
|||
{ |
|||
"pageTitle": "Me venden!", |
|||
"heroTitle": "¡Fantastica Ferrari de coleccionen Venta!", |
|||
"heroSubtitle": "Dueño vende directo sin intermediarios listo para transferencia inmediata.", |
|||
"galleryTitle": "Galería de Fotos", |
|||
"carImages": [ |
|||
{ |
|||
"src": "assets/ferrari_1.jpg", |
|||
"alt": "Imagen de Auto 1" |
|||
}, |
|||
{ |
|||
"src": "assets/ferrari_2.jpg", |
|||
"alt": "Imagen de Auto 2" |
|||
}, |
|||
{ |
|||
"src": "assets/ferrari_3.jpg", |
|||
"alt": "Imagen de Auto 3" |
|||
} |
|||
], |
|||
"specTitle": "Especificaciones del Auto", |
|||
"carSpecs": [ |
|||
{ |
|||
"feature": "Marca", |
|||
"detail": "Ferrari", |
|||
"extra": "Excelente estado" |
|||
}, |
|||
{ |
|||
"feature": "Modelo", |
|||
"detail": "Ferrari 488" |
|||
}, |
|||
{ |
|||
"feature": "Año", |
|||
"detail": "1970" |
|||
}, |
|||
{ |
|||
"feature": "Kilometraje", |
|||
"detail": "350.000 km" |
|||
}, |
|||
{ |
|||
"feature": "Color", |
|||
"detail": "Rojo" |
|||
}, |
|||
{ |
|||
"feature": "Motor", |
|||
"detail": "4.0L 8 valvulas", |
|||
"extra": "Nunca tuvo GNC" |
|||
}, |
|||
{ |
|||
"feature": "Transmisión", |
|||
"detail": "Manual" |
|||
}, |
|||
{ |
|||
"feature": "Tipo de Combustible", |
|||
"detail": "Nafta" |
|||
}, |
|||
{ |
|||
"feature": "Precio", |
|||
"detail": "$77.000.000 (Negociable)" |
|||
} |
|||
], |
|||
"contactInfo": { |
|||
"whatsappNumber": "+5493511234567", |
|||
"whatsappText": "Hola, estoy interesado en tu auto en venta!", |
|||
"buttonText": "Contactar por WhatsApp" |
|||
}, |
|||
"footerText": "<strong>Creado con <a href='https://qrcrafter.com' target='_blank' rel='noopener noreferrer'>QRCrafter.com</a></strong>" |
|||
} |
|||
@ -0,0 +1,180 @@ |
|||
<!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> |
|||
Loading…
Reference in new issue