Skip to content

Instantly share code, notes, and snippets.

@highoncarbs

highoncarbs/index.vue

Created July 12, 2022 12:46
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save highoncarbs/3ae3f6088efddd1671090536ea7f0118 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save highoncarbs/3ae3f6088efddd1671090536ea7f0118 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. highoncarbs created this gist Jul 12, 2022.
    409 changes: 409 additions & 0 deletions index.vue
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,409 @@
    <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>