improve

client/components/FeatureProduct.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="mainContent">
+    <div class="unified_widget pageBanner">
+      <h1>Book</h1>
+      <p>
+        <b>
+          Browse for more Book
+          <a href="#">leader of people</a>,or
+          <a href="#">leader of people</a>, like heaary thjrowns
+          <a href="#">leader of people</a>
+        </b>
+      </p>
+    </div>
+    <div class="bx-root">
+      <div class="row">
+        <div class="col-sm-5 text-center">
+          <div class="bx-root-image">
+            <img src="/img/amazonImg.jpg" alt="img-fluid">
+          </div>
+        </div>
+        <div class="col-sm-7 m-auto">
+          <div class="bx-root-dtls">
+            <div class="bx-root-heading">The Program</div>
+          </div>
+          <div class="bx-root-subtext">Lorem ipsum dolor sit amet consectetur</div>
+          <div class="bx-root-link">
+            <span>Order Now</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>

client/pages/index.vue

@@ -1,40 +1,123 @@
 <template>
-  <div class="container">
-    <div>
-      <logo />
-      <h1 class="title">
-        client
-      </h1>
-      <h2 class="subtitle">
-        My top-notch Nuxt.js project
-      </h2>
-      <div class="links">
-        <a
-          href="https://nuxtjs.org/"
-          target="_blank"
-          class="button--green"
-        >
-          Documentation
-        </a>
-        <a
-          href="https://github.com/nuxt/nuxt.js"
-          target="_blank"
-          class="button--grey"
-        >
-          GitHub
-        </a>
+  <main class="listingPage">
+    <div class="container-fluid">
+      <div class="row">
+        <div class="col-xl-2 col-lg-3 md-4 col-sm-4">
+          <!--SideBar -->
+        </div>
+        <!-- main content -->
+        <div class="col-xl-10 col-lg-9 md-8 col-sm-8">
+          <FeatureProduct />
+
+          <div class="mainResuts">
+            <div class="s-result-list">
+              <div class="s-result-item celwidget">
+                <div class="s-item-container">
+                  <div class="a-spacing-micro">
+                    <div class="bestSeller">
+                      <a href="#">Best seller</a>
+                    </div>
+                  </div>
+
+                  <div>
+                    <div class="row">
+                      <!--image-->
+                      <div class="col-sm-3 text-center">
+                        <a href="">
+                          <img src="/img/amazonImg.jpg" alt="" class="img-fluid" style="width: 200px">
+                        </a>
+                      </div>
+
+                      <div class="col-sm-9">
+                        <div class="a-row a-spacing-small">
+                          <!-- Title and date -->
+                          <a href="" class="a-link-normal">
+                            <h2 class="a-size-medium">
+                              Herryu Ppoert
+                              <span class="a-letter-space"></span>
+                              <span class="a-letter-space"></span>
+                              <span class="a-size-small a-color-secondary">Sep 3, 2019</span>
+                            </h2>
+                          </a>
+                        </div>
+
+                        <!--Author name -->
+                        <div class="a-row a-spacing-small">
+                          <span class="a-size-small a-color-secondary">by</span>
+                          <span class="a-size-small a-color-secondary">
+                            <a href="#" class="a-link-normal a-text-normal">waiter isancon</a>
+                          </span>
+                        </div>
+
+                        <!--Author name -->
+                        <div class="a-row">
+                          <span class="a-size-small">Ships to USA</span>
+                        </div>
+
+                        <div class="row">
+                          <div class="col-sm-7">
+                            <div class="a-row a-spacing-none">
+                              <a href="#" class="a-link-normal a-text-normal">Hardcover</a>
+                            </div>
+
+                            <!-- price-->
+                            <div class="a-row a-spacing-none">
+                              <a href="" class="a-link-normal a-text-normal">
+                                <span class="a-offscreen"></span>
+                                <span class="a-color-base sx-zero-spacing">
+                                  <span class="sx-price sx-price-large">
+                                    <sup class="sx-price-currency">$</sup>
+                                    <span class="sx-price-wholsup">99</span>
+                                    <sup class="sx-price-fractional">00</sup>
+                                  </span>
+                                </span>
+                              </a>
+                              <span class="a-letter-space"></span>
+                              <span class="a-size-base-plug a-color-secondary a-text-strike">$28.00</span>
+                            </div>
+
+                            <!-- Audible Trial -->
+                            <div class="a-row a-spacing-none">
+                              <span class="a-size-small a-color-secondary">Free wuith trial </span>
+                            </div>
+                            <hr/>
+
+                            <!-- Other Format -->
+                            <span class="a-size-small a-color-secondray">
+                              other form
+                              <span class="a-letter-space"></span>
+                              <a href="" class="a-size-small a-linkl-normal a-text-normal">Audio CD</a>
+                            </span>
+
+                            <!-- Ratiings -->
+                            <div class="col-sm-5">
+                              <div class="a-row a-spacing-mini">
+                                <!-- star rating -->
+
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+
+                      </div>
+                    </div>
+                  </div>
+
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
-  </div>
+  </main>
 </template>
 
 <script>
-import Logo from '~/components/Logo.vue'
-
+import FeatureProduct from '~/components/FeatureProduct'
 export default {
   components: {
-    Logo
+    FeatureProduct
   }
 }
 </script>
-