feat: improve home page with hero banner, logo, and catalog CTA
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -3,4 +3,5 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import Wellcome from '@/components/Wellcome.vue'
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user