Skip to content

Instantly share code, notes, and snippets.

@highoncarbs

highoncarbs/index.vue

Created July 12, 2022 12:46
Show Gist options
  • Save highoncarbs/3ae3f6088efddd1671090536ea7f0118 to your computer and use it in GitHub Desktop.
Save highoncarbs/3ae3f6088efddd1671090536ea7f0118 to your computer and use it in GitHub Desktop.
Download ZIP
Index.vue
Raw
index.vue
<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