Created
July 12, 2022 12:46
-
-
Save highoncarbs/3ae3f6088efddd1671090536ea7f0118 to your computer and use it in GitHub Desktop.
Index.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<template> | |
<div class=""> | |
<div> | |
<div class="hero-img"> | |
<img class="plant_one" src="~assets/indigoplant-line.png" alt="" /> | |
<img class="plant_two" src="~assets/indigoplant-line.png" alt="" /> | |
<!-- <img class="pattern_left" src="~assets/pattern_three.png" alt="" /> | |
<img class="pattern_right" src="~assets/pattern_one.png" alt="" /> --> | |
</div> | |
<section class="section pb-6 bg-pattern has-background-bagru-red"> | |
<div class="container has-text-centered has-text-white"> | |
<div> | |
<div class="pb-6"> | |
<figure class="image pt-4"> | |
<img class="container" src="~/assets/bagru-white.svg" style="width: 150px" alt="" /> | |
</figure> | |
<caption class="heading mt-2"> | |
HERITAGE TEXTILES | |
</caption> | |
</div> | |
<p class=" | |
title | |
has-text-white | |
is-size-1-desktop is-size-3-touch | |
has-text-weight-normal | |
"> | |
Experice the Magic of <br /> | |
Hand Block Printing | |
</p> | |
<div class="columns is-mobile is-centered"> | |
<div class="column is-4-desktop is-7-touch"> | |
<p class="subtitle has-text-white is-size-6-touch"> | |
Traverse through ancient textile arts with the artists. Learn | |
and practise century old techniques of Hand Block Printing. | |
</p> | |
<n-link to="/book-workshop" class="button is-white">Book a Workshop</n-link> | |
<br /> | |
</div> | |
</div> | |
<div class="buttons is-centered mt-2"> | |
<a href="https://jaitexart.com" target="blank" class="is-underlined is-text has-text-white"> | |
Learn about the Craft | |
</a> | |
<span class="mx-2"> — </span> | |
<n-link to="/sustainability-at-bagru" class="is-underlined is-text has-text-white"> | |
Sustainablity at Bagru | |
</n-link> | |
</div> | |
<br /> | |
</div> | |
</div> | |
</section> | |
</div> | |
<div> | |
<section class="section is-hidden-touch has-background-white"> | |
<div class="level is-hidden-touch container"> | |
<div class="level-left"> | |
<n-link to="/#head" class="level-item"> | |
<figure class="image"> | |
<img src="~/assets/bagru-black.svg" style="width: 120px; z-index: 999 !important" alt="" /> | |
</figure> | |
</n-link> | |
<div class="level-item ml-6"> | |
<div class="pt-3"> | |
<p> | |
Our endeavour is to let every lover of traditional crafts, | |
<br /> | |
experience the rich traditions of Bagru | |
</p> | |
</div> | |
</div> | |
</div> | |
<div class="level-right"> | |
<div class="level-item"> | |
<n-link to="/#head" class="has-text-dark display">Home</n-link> | |
</div> | |
<!-- <div class="level-item"> | |
<n-link to="/#head" class="has-text-dark display">Natural Dyes</n-link> | |
</div> --> | |
<div class="level-item"> | |
<n-link to="/about-us" class="has-text-dark display">About</n-link> | |
</div> | |
<div class="level-item"> | |
<n-link to="/block-printing-workshops" class="has-text-dark display">Workshops</n-link> | |
</div> | |
<!-- <div class="level-item"> | |
<n-link to="/sustainability-at-bagru" class="has-text-dark display" | |
>Sustainablity</n-link | |
> | |
</div> --> | |
<div class="level-item"> | |
<n-link to="/stories" class="has-text-dark display">Stories</n-link> | |
</div> | |
<div class="level-item"> | |
<n-link to="/contact-us" class="has-text-dark display">Contact Us</n-link> | |
</div> | |
</div> | |
</div> | |
</section> | |
<section class="has-background-black has-text-centered has-text-white mobile-menu" :class="{ show_menu: showMobileNav }"> | |
<div class="container py-3"> | |
<n-link to="/#head" class="media"> | |
<div class="media-content display has-text-white">Home</div> | |
</n-link> | |
<n-link to="/about-us" class="media"> | |
<div class="media-content display has-text-white">About Us</div> | |
</n-link> | |
<n-link to="/block-printing-workshops" class="media"> | |
<div class="media-content display has-text-white">Workshops</div> | |
</n-link> | |
<!-- <a href="https://jaitexart.com/products" target="blank" class="media"> | |
<div class="media-content display has-text-white"> | |
Products <span class="ml-2">↗</span> | |
</div> | |
</a> --> | |
<!-- <n-link to="/#head" class="media"> | |
<div class="media-content display has-text-white">Gallery</div> | |
</n-link> --> | |
<n-link to="/stories" class="media"> | |
<div class="media-content display has-text-white">Stories</div> | |
</n-link> | |
<n-link to="/contact-us" class="media"> | |
<div class="media-content display has-text-white">Contact Us</div> | |
</n-link> | |
</div> | |
</section> | |
<section class="section py-4 is-hidden-desktop has-background-white" style="border-bottom: 1.5px solid #dbdbdb"> | |
<div class="level container is-mobile is-hidden-desktop"> | |
<div class="level-left"> | |
<div class="level-item"> | |
<figure class="image"> | |
<img src="~/assets/bagru-black.svg" style="width: 80px" alt="" /> | |
</figure> | |
</div> | |
</div> | |
<div @click="showMobileNav = !showMobileNav" class="level-right"> | |
<div class="is-size-6 level-item has-text-weight-semibold button"> | |
Menu | |
</div> | |
</div> | |
</div> | |
</section> | |
</div> | |
<div> | |
<b-carousel-list v-model="carousel" :data="items" :arrow="arrow" :arrow-hover="arrowHover" :items-to-show="1" :items-to-list="increment" :repeat="repeat" :has-drag="drag" :has-grayscale="gray" :has-opacity="opacity" :autoplay="true" :interval="interval"> | |
<template #item="list"> | |
<hero-image :heroimg="list.image" :line1="list.line1" :line2="list.line2" :button="list.button" :button_link="list.buttonlink" /> | |
</template> | |
</b-carousel-list> | |
<!-- <div class="overlay"> | |
</div> --> | |
</div> | |
<section class=""> | |
<div class="section container has-text-centered"> | |
<p class="serif title has-text-centered has-text-weight-normal"> | |
Crafting Stories | |
</p> | |
<p class="subtitle is-size-6 has-text-centered heading"> | |
AT THE WORKSHOP | |
</p> | |
<!-- <p class="has-text-centered"> | |
Explore one of the best travellers destination the way it should be | |
explored. | |
</p> --> | |
<!-- <p class="has-text-centered"> | |
Vist Bagru to experiece a 500 year old craft and take back a story with you. | |
</p> --> | |
<p class="has-text-centered"> | |
They came , they saw and took back an expericence of a lifetime. | |
</p> | |
<n-link class="is-underlined has-text-dark" to="/stories">Explore all stories → | |
</n-link> | |
<br /> | |
<br /> | |
<div class="columns has-text-left-touch"> | |
<div class="column is-6" v-for="(story, sr_index) in page" :key="sr_index + '_story'"> | |
<div class="box pop-box"> | |
<figure class="image has-background-grey-light is-16by9"> | |
<img :src="story.hero_image" alt="" /> | |
</figure> | |
<br /> | |
<p class="is-size-5">{{ story.title }}</p> | |
<p>{{ story.description }}</p> | |
<br> | |
<n-link :to="story.path" class="button">Read about the Process →</n-link> | |
<!-- <br /> | |
<p class="heading mt-3" v-html="story.workshop"></p> --> | |
</div> | |
</div> | |
</div> | |
<!-- <hr> --> | |
</div> | |
</section> | |
<section class="section bagru_yellow_light"> | |
<div class="container"> | |
<div class="columns is-centered"> | |
<div class="column is-6 is-mobile has-text-centered"> | |
<p class="serif title has-text-weight-normal has-text-black"> | |
Join 2000+ Artists - in the journey to explore Heritage textiles. | |
</p> | |
<!-- <n-link class="is-text has-text-black is-underlined" to="/#head" | |
>View Gallery →</n-link | |
> --> | |
</div> | |
</div> | |
<p class="heading is-size-6 has-text-centered"> | |
RECOMMENDED BY THEM & MORE | |
</p> | |
<div class="columns is-mobile is-multiline mt-5 is-centered"> | |
<div class="column is-6-touch"> | |
<n-link to="/#head"> | |
<figure class="image container is-128x128"> | |
<img alt="'Jai Texart In Press , featured in " src="~/assets/press/toi.png" /> | |
</figure> | |
</n-link> | |
</div> | |
<div class="column is-6-touch"> | |
<n-link to="/#head"> | |
<figure class="image container is-128x128"> | |
<img alt="'Jai Texart In Press , featured in " src="~/assets/press/francetv-documentory-on-neel-at-bagru-jaitexart-workshop.png" /> | |
</figure> | |
</n-link> | |
</div> | |
<div class="column is-6-touch"> | |
<n-link to="/#head"> | |
<figure class="image container is-128x128"> | |
<img alt="'Jai Texart In Press , featured in " src="~/assets/press/new-york-times-recommends-bagru-workshop.png" /> | |
</figure> | |
</n-link> | |
</div> | |
<div class="column is-6-touch"> | |
<n-link to="/#head"> | |
<figure class="image container is-128x128"> | |
<img alt="'Jai Texart In Press , featured in " src="~/assets/press/trevor-mcdonald-documentaory-visit-to-bagru-block-printing-workshop.png" /> | |
</figure> | |
</n-link> | |
</div> | |
<div class="column is-6-touch"> | |
<n-link to="/#head"> | |
<figure class="image container is-128x128"> | |
<img alt="'Jai Texart In Press , featured in " src="~/assets/press/blockshop-at-bagru-jaitexart-workshop.png" /> | |
</figure> | |
</n-link> | |
</div> | |
<div class="column is-6-touch"> | |
<n-link to="/#head"> | |
<figure class="image container is-128x128"> | |
<img alt="'Jai Texart In Press , featured in " src="~/assets/press/suitecase-magazine-recommendation-things-to-do-in-jaipur.png" /> | |
</figure> | |
</n-link> | |
</div> | |
</div> | |
<hr class="my-5 has-background-success" style="height:0.5px; margin-left:10% ; margin-right:10%" /> <br> | |
<div class="columns is-vcentered is-variable is-8"> | |
<div class="column is-6"> | |
<!-- <div class='photo-stack px-5'> --> | |
<figure class="image has-background-white is-3by2"> | |
<img class="has-background-white" src="\workshop\review\Untitled-2.jpg" alt="" /> | |
<!-- <img class="has-background-white" src="https://jaitexart.com/assets/img/hero-new.8d3997a9.jpg" alt="" /> | |
<img class="has-background-white" src="https://jaitexart.com/assets/img/hero-new.8d3997a9.jpg" alt="" /> | |
<img class="has-background-white" src="https://jaitexart.com/assets/img/hero-new.8d3997a9.jpg" alt="" /> | |
<img class="has-background-white" src="https://jaitexart.com/assets/img/hero-new.8d3997a9.jpg" alt="" /> --> | |
</figure> | |
<!-- </div> --> | |
</div> | |
<div class="column is-6"> | |
<div class="media"> | |
<div class="media-left"> | |
<figure class="image is-64x64"> | |
<img src="~assets/trip-bk.png" alt=""> | |
</figure> | |
</div> | |
<div class="media-content ml-4"> | |
<p class=" is-size-5"> | |
Rated 5 stars on Tripadvisor <br> | |
Top most things to do in Jaipur | |
. | |
</p> | |
</div> | |
</div> | |
<br> | |
<div class="review-box has-text-centered-touch"> | |
<p class="is-size-4 bagru_red-text mb-3">◉◉◉◉◉</p> | |
<p class=" | |
serif | |
title | |
is-size-4-desktop is-size-5-touch | |
has-text-black has-text-weight-normal | |
"> | |
Very informative and organized class! | |
</p> | |
<p class="is-size-5-desktop is-size-6-touch has-text-weight-normal"> | |
You'll learn in great detail about the process by an instructor | |
who speaks great English. Make sure to take good notes! My | |
girlfriend and I had a lot of fun and made two scarves. | |
</p> | |
<!-- <br> --> | |
<hr class="mb-0 has-background-success" style="height:0.5px;" /> <br> | |
<div class="level is-mobile"> | |
<div class="level-left"> | |
<div class="level-item"> | |
<div> | |
<p class="is-size-5">Eli J.</p> | |
<p class="heading">22 January 2019</p> | |
</div> | |
</div> | |
</div> | |
<div class="level-right"> | |
<button class="button is-black">View Review →</button> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
</div> | |
<!-- TODO COntact with nuxt content and manual push pull to DO and github --> | |
</section> | |
</div> | |
</template> | |
<script> | |
export default { | |
async fetch() { | |
this.page = await this.$content("stories") | |
.only(["title", "description", "hero_image", "workshop"]).limit(2) | |
.fetch(); | |
}, | |
data() { | |
return { | |
links: [{ | |
name: "Block Shop", | |
meta: "Guide to Jaipur", | |
img: "/static/press/bst.png", | |
link: "https://maptia.com/nomadichabit/stories/block-printing-in-bagru", | |
}, | |
{ | |
name: "ITV's Trevor McDonald’s Indian Train Adventure", | |
meta: "Guide to Jaipur", | |
img: "~/assets/ittv.png", | |
link: null, | |
}, | |
{ | |
name: "New York Times", | |
meta: "Block Printing in Bagru", | |
img: "~/assets/nytimes.png", | |
link: "https://maptia.com/nomadichabit/stories/block-printing-in-bagru", | |
}, | |
{ | |
name: "France TV", | |
meta: "France TV - Block Printing in Bagru", | |
img: "~/assets/francetv.png", | |
link: "https://maptia.com/nomadichabit/stories/block-printing-in-bagru", | |
}, | |
{ | |
name: "Times of India", | |
meta: "Bagru , Brand by Jai Texart", | |
img: "~/assets/toi-two.png", | |
link: "https://timesofindia.indiatimes.com/city/jaipur/whats-in-a-name-artisans-of-bagru-discover-it-the-hard-way/articleshow/74466629.cms", | |
}, | |
{ | |
name: "Times of India", | |
meta: "Bagru , Brand by Jai Texart", | |
img: "~/assets/trevor.png", | |
link: "https://timesofindia.indiatimes.com/city/jaipur/whats-in-a-name-artisans-of-bagru-discover-it-the-hard-way/articleshow/74466629.cms", | |
}, | |
], | |
page: [], | |
items: [{ | |
line1: "Experience", | |
line2: "Heritage", | |
button: "View Workshops →", | |
buttonlink: "/block-printing-workshops", | |
image: "/workshop/hero-head/process/DJI_0008.JPG", | |
}, | |
{ | |
line1: "Sustainability", | |
line2: "at Bagru", | |
button: "Our Practices →", | |
buttonlink: "/sustainability-at-bagru", | |
image: "/workshop/hero-head/process/DJI_0008.JPG", | |
class: "sus-bgr", | |
}, | |
{ | |
line1: "Block Printing", | |
image: "/workshop/hero-head/process/DJI_0008.JPG", | |
line2: "Process", | |
button: "Learn about the craft →", | |
buttonlink: "/about-us", | |
class: "prs-bgr", | |
}, | |
], | |
} | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment