Merge branch 'rebranding' of github.com:nuxt/nuxtjs.org into rebranding

pages/shop.vue

@@ -1,6 +1,6 @@
 <template>
   <nui-container class="py-16">
-    <div class="flex justify-between">
+    <div ref="shop" class="flex justify-between mb-16">
       <div class="lg:w-1/2 xl:w-8/12 text-center lg:text-left p-4 sm:p-0">
         <h1 class="text-3xl xl:text-4xl text-nuxt-gray font-medium leading-normal mb-6">
           The NUXT<span class="text-nuxt-lightgreen">JS</span> Shop<br>
@@ -9,13 +9,26 @@
           Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga magni cum, nisi animi quae sit in, corporis explicabo architecto natus vero voluptate maiores beatae, et quo possimus. Rerum, consequatur aperiam!
         </h3>
       </div>
-      <i-shop class="hidden lg:inline-block my-8" />
+      <i-shop class="hidden lg:inline-block" />
     </div>
-    <section class="flex bg-gray-100 p-8 rounded my-12">
-      1
-    </section>
-    <section class="text-center">
-      2
+    <section class="flex flex-wrap items-stretch -mx-4">
+      <div v-for="(product, i) in products" :key="i" class="w-full lg:w-1/2 p-4">
+        <div class="block sm:flex w-full bg-gray-100 hover:bg-gray-200 p-6 rounded">
+          <img :src="'/shop/' + product.img + '.png'" :srcset="'/shop/' + product.img + '-2x.png 2x'" :alt="product.name" class="w-full sm:w-auto rounded border border-gray-300">
+          <div class="w-full px-6 py-2">
+            <h4 class="block w-full font-medium text-xl pb-4">
+              {{ product.name }}
+            </h4>
+            <p class="mb-4 text-gray-600 leading-relaxed">{{ product.description }}</p>
+            <button class="snipcart-add-item inline-block bg-nuxt-lightgreen text-white font-medium text-sm px-4 py-2 shadow uppercase rounded hover:bg-nuxt-green hover:shadow-md sm:mr-4 p-3 mt-3 text-sm text-left" :data-item-id="i + 1" :data-item-name="product.name" :data-item-description="product.description" :data-item-image="'/shop/' + product.img + '.png'" :data-item-price="product.price" :data-item-url="localePath('shop')">
+              <!-- <div class="inline-block fill-current stroke-current mr-1">
+                <slot name="icon" />
+              </div> -->
+              GET IT for only {{ product.price }}€
+            </button>
+          </div>
+        </div>
+      </div>
     </section>
   </nui-container>
 </template>
@@ -30,23 +43,72 @@ export default {
   head: {
     title: 'The NuxtJS Shop',
     meta: [
-      { hid: 'description', name: 'description', content: '' }
+      { hid: 'description', name: 'description', content: '' },
+      { }
     ]
   },
   data () {
     return {
-      products: {
-        tshirt: [
-          { name: 'Storyblok', img: 'storyblok-logo.svg', url: 'https://www.storyblok.com/?ref=nuxt', class: 'h-24' }
-        ],
-        sweatshirt: [
-          { name: 'Blokt', img: 'blokt-logo.png', url: 'https://blokt.com/?ref=nuxt', class: 'h-10' }
-        ],
-        stickers: [
-          { name: 'Icons8', img: 'icons8.png', url: 'https://icons8.com/?ref=nuxt', class: 'h-10' }
-        ]
-      }
+      products: [
+        {
+          name: 'Classic T-shirt White',
+          description: 'Ce superbe t-shirt en coton bio, eleve en plein air sans pesticide, ogm, nourriture, eau.. Bref sans rien du tout vous avez bien compris!',
+          img: 'tshirt_white',
+          price: 29
+        },
+        {
+          name: 'Classic T-shirt Blue',
+          description: 'Ce superbe t-shirt en coton bio, eleve en plein air sans pesticide, ogm, nourriture, eau.. Bref sans rien du tout vous avez bien compris!',
+          img: 'tshirt_blue',
+          url: '',
+          price: 29
+        },
+        {
+          name: 'NuxtJS Sweatshirt White',
+          description: 'Ce superbe t-shirt en coton bio, eleve en plein air sans pesticide, ogm, nourriture, eau.. Bref sans rien du tout vous avez bien compris!',
+          img: 'sweat_white',
+          url: '',
+          price: 49
+        },
+        {
+          name: 'NuxtJS Sweatshirt Blue',
+          description: 'Ce superbe t-shirt en coton bio, eleve en plein air sans pesticide, ogm, nourriture, eau.. Bref sans rien du tout vous avez bien compris!',
+          img: 'sweat_blue',
+          url: '',
+          price: 49
+        },
+        {
+          name: 'New Stickers Pack',
+          description: '8 New Design stickers: <br> - 4 Mountains Logo Stickers <br> - 4 NuxtJS Logo Stickers',
+          img: 'new_stickers',
+          url: '',
+          price: 5
+        },
+        {
+          name: 'Vintage Stickers Pack',
+          description: '8 Vintage design stickers: <br> - 4 Mountains Logo Stickers <br> - 4 Are You Nuxt? Stickers',
+          img: 'vintage_stickers',
+          url: '',
+          price: 5
+        }
+      ]
     }
+  },
+  mounted () {
+    const jquery = document.createElement('script')
+    jquery.setAttribute('type', 'text/javascript')
+    jquery.setAttribute('src', '//ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js')
+    const script = document.createElement('script')
+    script.setAttribute('type', 'text/javascript')
+    script.setAttribute('src', '//cdn.snipcart.com/scripts/2.0/snipcart.js')
+    script.setAttribute('id', 'snipcart')
+    script.setAttribute('data-api-key', 'YzRlMjRiNmItNWJjNC00OWMxLWE1ODgtZmIyNzAwYmIyMmI5NjM3MDM3MTc0OTkxOTU5OTA0')
+    this.$refs.shop.appendChild(jquery)
+    this.$refs.shop.appendChild(script)
   }
 }
 </script>
+
+<style>
+@import url('https://cdn.snipcart.com/themes/2.0/base/snipcart.min.css');
+</style>