132 lines
5.1 KiB
Vue
132 lines
5.1 KiB
Vue
<template>
|
|
<div>
|
|
<v-container>
|
|
<v-carousel cycle show-arrows-on-hover class="rounded">
|
|
<v-carousel-item
|
|
v-for="(item,i) in slider"
|
|
:key="i"
|
|
:src="item.src"
|
|
reverse-transition="fade-transition"
|
|
transition="fade-transition"
|
|
></v-carousel-item>
|
|
</v-carousel>
|
|
|
|
<v-card>
|
|
<v-card-actions class="justify-center" style="margin-top: 40px;">
|
|
<v-btn to="/gallery">Click here to view gallery</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
<div style="padding: 0 40px;">
|
|
<v-row>
|
|
<v-col v-for="card in gallery" :key="card.title" sm2 md2 lg1>
|
|
<v-card>
|
|
<v-img :src="card.src" class="white--text align-end" height="300px">
|
|
<v-card-title v-text="card.title"></v-card-title>
|
|
</v-img>
|
|
<v-card-actions>
|
|
<v-btn icon :href="card.src">
|
|
<v-icon>mdi-bookmark</v-icon>
|
|
</v-btn>
|
|
<v-btn
|
|
icon
|
|
:href="`https://wa.me/?text=Gita Enterprise.%20https://gita-enterprise.com/products`"
|
|
>
|
|
<v-icon>mdi-share-variant</v-icon>
|
|
</v-btn>
|
|
<v-btn>
|
|
<div
|
|
class="fb-like"
|
|
data-href="https://gita-enterprise.com/products"
|
|
data-width
|
|
data-layout="standard"
|
|
data-action="like"
|
|
data-size="small"
|
|
data-share="true"
|
|
></div>
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
|
|
<v-card>
|
|
<v-card-actions class="justify-center" style="margin-top: 40px;">
|
|
<v-btn to="/products">Click here to view Products</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
<div style="padding: 0 40px;">
|
|
<v-row>
|
|
<v-col v-for="card in products" :key="card.title" sm2 md2 lg2>
|
|
<v-card>
|
|
<v-img
|
|
:src="card.src"
|
|
class="white--text align-end"
|
|
style="height:300px"
|
|
>
|
|
<v-card-title v-text="card.title"></v-card-title>
|
|
</v-img>
|
|
<v-card-actions>
|
|
<v-spacer></v-spacer>
|
|
|
|
<v-btn icon :href="card.src">
|
|
<v-icon>mdi-bookmark</v-icon>
|
|
</v-btn>
|
|
|
|
<v-btn
|
|
icon
|
|
:href="`https://wa.me/?text=Gita Enterprise.%20https://gita-enterprise.com`"
|
|
>
|
|
<v-icon>mdi-share-variant</v-icon>
|
|
</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-col>
|
|
</v-row>
|
|
</div>
|
|
|
|
<v-img
|
|
style="border-radius: 8px;"
|
|
src="/Assets/gallery/2.jpeg"
|
|
class="white--text align-end"
|
|
height="700px"
|
|
>
|
|
<v-card-title>Main Outlet</v-card-title>
|
|
</v-img>
|
|
</v-container>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
slider: [
|
|
{
|
|
src: '/img/cake-close-up.jpg',
|
|
},
|
|
{
|
|
src: '/Assets/gallery/bakery-products.jpg',
|
|
},
|
|
{
|
|
src: '/Assets/gallery/7.jpeg',
|
|
},
|
|
{
|
|
src: '/Assets/gallery/2.jpeg'
|
|
},
|
|
],
|
|
products: [
|
|
{ title: 'GEL COLOUR', src: '/gita/cake gel.jpeg', flex: 3 },
|
|
{ title: 'COLOUR SPALASH', src: '/gita/colour splash.jpg', flex: 3 },
|
|
{ title: 'COLOUR MIST', src: '/gita/colourmist.jpg', flex: 3 },
|
|
{ title: 'GEL COLOUR', src: 'gita/gel colour.jpg', flex: 3 },
|
|
],
|
|
gallery: [
|
|
|
|
{ src: '/Assets/gallery/5.jpeg', title: 'Stock Rack 1 & 2' },
|
|
{ src: '/Assets/gallery/6.jpeg', title: 'Natural colour stock' },
|
|
]
|
|
}
|
|
},
|
|
}
|
|
</script>
|