OneTeam/don_confiao_frontend
16
0
Fork 0
Code Issues 1 Pull Requests 3 Actions Packages Projects Releases 8 Wiki Activity

feat: improve home page with hero banner, logo, and catalog CTA

Browse Source
This commit is contained in:
aserrador
2026-05-28 17:24:45 -05:00
parent 7ecf1eb142
commit d86919e930
2 changed files with 107 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

134
src/components/Wellcome.vue
View File

@@ -1,34 +1,112 @@
<template> <template>
<v-container > <v-container fluid class="pa-0">
<v-responsive> <v-sheet
<v-toolbar> class="hero-section d-flex align-center justify-center text-center pa-8"
<v-toolbar-title>Don Confiao te atiende</v-toolbar-title> >
</v-toolbar> <div>
<v-card> <v-img
<v-card-title>Hacer parte de la tienda la ilusión</v-card-title> :src="logo"
<v-card-text> alt="Don Confiao"
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. max-width="180"
</v-card-text> class="mx-auto mb-4"
</v-card> />
<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-container class="py-6">
<v-card-title>En desarrollo</v-card-title> <v-row>
<v-card-text> <v-col cols="12" md="4">
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-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"> <v-col cols="12" md="4">
Si no vas a pagar tu compra recuerda que debes hacerlo en la planilla manual</v-alert> <v-card class="h-100" elevation="2">
</v-card-text> <v-card-item>
</v-card> <template #prepend>
<v-card> <v-icon color="orange-darken-2" size="48">mdi-progress-wrench</v-icon>
<v-card-title>A comprar</v-card-title> </template>
<v-card-text> <v-card-title class="font-weight-bold">En Desarrollo</v-card-title>
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. </v-card-item>
<div class="text-center"> <v-card-text>
<v-btn :to="{ path: 'comprar' }" color="green">Ir a Comprar</v-btn> 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> </div>
</v-card-text> </v-col>
</v-card> </v-row>
</v-responsive> </v-container>
</v-container> </v-container>
</template> </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>

1
src/pages/index.vue
View File

@@ -3,4 +3,5 @@
</template> </template>
<script setup> <script setup>
import Wellcome from '@/components/Wellcome.vue'
</script> </script>