feat: improve home page with hero banner, logo, and catalog CTA
This commit is contained in:
@@ -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">
|
||||||
<v-card>
|
Don Confiao te atiende
|
||||||
<v-card-title>En desarrollo</v-card-title>
|
</h1>
|
||||||
<v-card-text>
|
<p class="text-subtitle-1 font-italic font-weight-bold text-white">
|
||||||
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.
|
Economía solidaria, mercado justo, alimentación sana
|
||||||
|
</p>
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
|
</v-sheet>
|
||||||
|
|
||||||
|
<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-text>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-responsive>
|
</v-col>
|
||||||
|
|
||||||
|
<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-col>
|
||||||
|
</v-row>
|
||||||
|
</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>
|
||||||
|
|||||||
@@ -3,4 +3,5 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import Wellcome from '@/components/Wellcome.vue'
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
Reference in New Issue
Block a user