commit 729c2e08978cae41769bb4ce669d5c5d7c511895
Author: rodley82 <rodolfo.leyes@gmail.com>
Date:   Wed Oct 22 10:25:44 2025 -0300

    Version inicial con ferrari

diff --git a/assets/app.js b/assets/app.js
new file mode 100644
index 0000000..5ffdc6d
--- /dev/null
+++ b/assets/app.js
@@ -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');
diff --git a/assets/ferrari_1.jpg b/assets/ferrari_1.jpg
new file mode 100644
index 0000000..894c4d8
Binary files /dev/null and b/assets/ferrari_1.jpg differ
diff --git a/assets/ferrari_2.jpg b/assets/ferrari_2.jpg
new file mode 100644
index 0000000..b710958
Binary files /dev/null and b/assets/ferrari_2.jpg differ
diff --git a/assets/ferrari_3.jpg b/assets/ferrari_3.jpg
new file mode 100644
index 0000000..449f83c
Binary files /dev/null and b/assets/ferrari_3.jpg differ
diff --git a/assets/styles.css b/assets/styles.css
new file mode 100644
index 0000000..a8efced
--- /dev/null
+++ b/assets/styles.css
@@ -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;
+}
diff --git a/data.json b/data.json
new file mode 100644
index 0000000..c3ee5c1
--- /dev/null
+++ b/data.json
@@ -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>"
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..fc4e9d7
--- /dev/null
+++ b/index.html
@@ -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>
\ No newline at end of file