From d86919e9308bae90772101ff46d741729d8083f7 Mon Sep 17 00:00:00 2001
From: aserrador <alejandro.ayala@onecluster.org>
Date: Thu, 28 May 2026 17:24:45 -0500
Subject: [PATCH] feat: improve home page with hero banner, logo, and catalog
 CTA

---
 src/components/Wellcome.vue | 134 ++++++++++++++++++++++++++++--------
 src/pages/index.vue         |   1 +
 2 files changed, 107 insertions(+), 28 deletions(-)

diff --git a/src/components/Wellcome.vue b/src/components/Wellcome.vue
index 5a1e613..8239744 100644
--- a/src/components/Wellcome.vue
+++ b/src/components/Wellcome.vue
@@ -1,34 +1,112 @@
 <template>
-  <v-container >
-    <v-responsive>
-      <v-toolbar>
-        <v-toolbar-title>Don Confiao te atiende</v-toolbar-title>
-      </v-toolbar>
-      <v-card>
-        <v-card-title>Hacer parte de la tienda la ilusión</v-card-title>
-        <v-card-text>
-          Recuerda que participando de esta tienda le apuestas a la economía solidaria, al mercado justo, a la alimentación sana, al campesinado colombiano y a un mundo mejor.
-        </v-card-text>
-      </v-card>
+  <v-container fluid class="pa-0">
+    <v-sheet
+      class="hero-section d-flex align-center justify-center text-center pa-8"
+    >
+      <div>
+        <v-img
+          :src="logo"
+          alt="Don Confiao"
+          max-width="180"
+          class="mx-auto mb-4"
+        />
+        <h1 class="text-h4 font-weight-bold text-white mb-2">
+          Don Confiao te atiende
+        </h1>
+        <p class="text-subtitle-1 font-italic font-weight-bold text-white">
+          Economía solidaria, mercado justo, alimentación sana
+        </p>
+      </div>
+    </v-sheet>
 
-      <v-card>
-        <v-card-title>En desarrollo</v-card-title>
-        <v-card-text>
-          Don confiao apenas esta entendiendo como funciona esta tienda y por ahora <ResaltedText>solo puede atender las compras de contado</ResaltedText>, ya sea en efectivo o consignación.
+    <v-container class="py-6">
+      <v-row>
+        <v-col cols="12" md="4">
+          <v-card class="h-100" elevation="2">
+            <v-card-item>
+              <template #prepend>
+                <v-icon color="green" size="48">mdi-hand-heart</v-icon>
+              </template>
+              <v-card-title class="font-weight-bold">Nuestra Tienda</v-card-title>
+            </v-card-item>
+            <v-card-text>
+              Hacer parte de la tienda la ilusión. Participando de esta tienda le apuestas a la economía solidaria, al mercado justo, a la alimentación sana, al campesinado colombiano y a un mundo mejor.
+            </v-card-text>
+          </v-card>
+        </v-col>
 
-          <v-alert type="warning">
-            Si no vas a pagar tu compra recuerda que debes hacerlo en la planilla manual</v-alert>
-        </v-card-text>
-      </v-card>
-      <v-card>
-        <v-card-title>A comprar</v-card-title>
-        <v-card-text>
-          El siguiente botón te permitirá registrar tu compra. Cuando finalices te pedimos que ingrese el número de la compra, la fecha y el valor en la planilla física.
-          <div class="text-center">
-            <v-btn :to="{ path: 'comprar' }" color="green">Ir a Comprar</v-btn>
+        <v-col cols="12" md="4">
+          <v-card class="h-100" elevation="2">
+            <v-card-item>
+              <template #prepend>
+                <v-icon color="orange-darken-2" size="48">mdi-progress-wrench</v-icon>
+              </template>
+              <v-card-title class="font-weight-bold">En Desarrollo</v-card-title>
+            </v-card-item>
+            <v-card-text>
+              Don Confiao apenas está entendiendo cómo funciona esta tienda y por ahora <ResaltedText>solo puede atender las compras de contado</ResaltedText>, ya sea en efectivo o consignación.
+              <v-alert type="warning" class="mt-3" density="compact">
+                Si no vas a pagar tu compra recuerda que debes hacerlo en la planilla manual
+              </v-alert>
+            </v-card-text>
+          </v-card>
+        </v-col>
+
+        <v-col cols="12" md="4">
+          <v-card class="h-100" elevation="2">
+            <v-card-item>
+              <template #prepend>
+                <v-icon color="blue" size="48">mdi-store</v-icon>
+              </template>
+              <v-card-title class="font-weight-bold">Catálogo</v-card-title>
+            </v-card-item>
+            <v-card-text>
+              Explora nuestro catálogo de productos disponibles. Encuentra todo lo que necesitas y arma tu pedido fácilmente.
+            </v-card-text>
+          </v-card>
+        </v-col>
+      </v-row>
+
+      <v-row class="mt-4">
+        <v-col cols="12" class="text-center">
+          <h2 class="text-h5 font-weight-bold mb-4">¿Qué deseas hacer?</h2>
+          <div class="d-flex flex-wrap justify-center ga-4">
+            <v-btn
+              :to="{ path: 'comprar' }"
+              color="green"
+              size="x-large"
+              prepend-icon="mdi-cart"
+              variant="elevated"
+              class="px-8"
+            >
+              Ir a Comprar
+            </v-btn>
+            <v-btn
+              :to="{ path: 'catalog' }"
+              color="primary"
+              size="x-large"
+              prepend-icon="mdi-store"
+              variant="elevated"
+              class="px-8"
+            >
+              Ver Catálogo
+            </v-btn>
           </div>
-        </v-card-text>
-      </v-card>
-    </v-responsive>
+        </v-col>
+      </v-row>
+    </v-container>
   </v-container>
 </template>
+
+<script setup>
+import ResaltedText from '@/components/ResaltedText.vue'
+import logo from '@/assets/logo.png'
+</script>
+
+<style scoped>
+.hero-section {
+  min-height: 320px;
+  background: linear-gradient(135deg, #1B5E20 0%, #2E7D32 30%, #E65100 100%) !important;
+  color: white;
+}
+</style>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index dbd4596..f0c6097 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -3,4 +3,5 @@
 </template>
 
 <script setup>
+import Wellcome from '@/components/Wellcome.vue'
 </script>