feat: our products (#37)

* feat: route and link in nav added * feat: product cards * refactor: icon of our-products page changed in mobile nav
TavaresDylan · May 8, 2023 · c8d9a0f · c8d9a0f
1 parent 8565fad
commit c8d9a0f
Show file tree

Hide file tree

Showing 4 changed files with 139 additions and 0 deletions.
diff --git a/app/src/components/TermCard.vue b/app/src/components/TermCard.vue
@@ -0,0 +1,21 @@
+<template>
+  <v-card class="card rounded-lg" height="240px">
+    <div class="top d-flex align-center">
+      <v-icon class="ml-2" size="x-small" icon="mdi-circle-outline" color="white" />
+      <v-icon size="x-small" icon="mdi-circle-outline" color="white" />
+      <v-icon size="x-small" icon="mdi-circle-outline" color="white" />
+    </div>
+    <slot></slot>
+  </v-card>
+</template>
+
+<style lang="css" scoped>
+.card {
+  border: 2px solid black;
+}
+.top {
+  width: 100%;
+  height: 33px;
+  background-color: black;
+}
+</style>
diff --git a/app/src/router/index.js b/app/src/router/index.js
@@ -5,6 +5,7 @@ import Subscriptions from "../views/Subscriptions.vue";
 import Ourhistory from "../views/Ourhistory.vue";
 import Login from "../views/Login.vue";
 import Signup from "../views/Signup.vue";
+import OurProducts from "../views/OurProducts.vue";
 
 const routes = [
   {
@@ -29,6 +30,10 @@ const routes = [
     path: "/abonnements",
     component: Subscriptions,
   },
+  {
+    path: "/nos-articles",
+    component: OurProducts,
+  },
   {
     path: "/page-not-found",
     component: Notfound,

diff --git a/app/src/shared/layout/Header.vue b/app/src/shared/layout/Header.vue
@@ -20,6 +20,12 @@
         value="cartes cadeaux"
         to="/cartes-cadeaux"
       ></v-list-item>
+      <v-list-item
+        prepend-icon="mdi-store-search"
+        title="Nos articles"
+        value="nos articles"
+        to="/nos-articles"
+      ></v-list-item>
       <v-list-item
         prepend-icon="mdi-history"
         title="Notre histoire"
@@ -55,6 +61,9 @@
       <router-link class="router-links mx-4" to="/cartes-cadeaux"
         >Cartes cadeaux</router-link
       >
+      <router-link class="router-links mx-4" to="/nos-articles"
+        >Nos articles</router-link
+      >
       <router-link class="router-links mx-4" to="/notre-histoire"
         >Notre histoire</router-link
       >

diff --git a/app/src/views/OurProducts.vue b/app/src/views/OurProducts.vue
@@ -0,0 +1,104 @@
+<template>
+  <v-container>
+    <h1 class="mb-6">Les box</h1>
+
+    <v-row justify="center" id="term-card-row">
+      <div id="bar"></div>
+      <v-col cols="8" md="6" lg="4">
+        <TermCard>
+          <v-img cover src="https://picsum.photos/1920/1080"></v-img>
+        </TermCard>
+        <v-card class="card rounded-lg mt-6">
+          <v-card-title class="font-weight-bold">Nutrition</v-card-title>
+          <v-list>
+            <v-list-item> <v-icon icon="mdi-check" />Collation </v-list-item>
+            <v-list-item> <v-icon icon="mdi-check" />Accessoires </v-list-item>
+            <v-list-item>
+              <v-icon icon="mdi-check" />Livret Conseil
+            </v-list-item>
+          </v-list>
+          <v-card-action class="d-flex justify-center pa-1 mb-1">
+            <v-btn class="rounded-xl" variant="outlined"
+              >Choisir ma boîte</v-btn
+            >
+          </v-card-action>
+        </v-card>
+      </v-col>
+      <v-col cols="8" md="6" lg="4">
+        <TermCard>
+          <v-img cover src="https://picsum.photos/1920/1080"></v-img>
+        </TermCard>
+        <v-card class="card rounded-lg mt-6">
+          <v-card-title class="font-weight-bold">Action</v-card-title>
+          <v-list>
+            <v-list-item> <v-icon icon="mdi-check" />Textile </v-list-item>
+            <v-list-item>
+              <v-icon icon="mdi-check" />Materiel d'entrainement
+            </v-list-item>
+            <v-list-item>
+              <v-icon icon="mdi-check" />Livret Conseil
+            </v-list-item>
+          </v-list>
+          <v-card-action class="d-flex justify-center pa-1 mb-1">
+            <v-btn class="rounded-xl" variant="outlined"
+              >Choisir ma boîte</v-btn
+            >
+          </v-card-action>
+        </v-card>
+      </v-col>
+      <v-col cols="8" md="6" lg="4">
+        <TermCard>
+          <v-img cover src="https://picsum.photos/1920/1080"></v-img>
+        </TermCard>
+        <v-card class="card rounded-lg mt-6">
+          <v-card-title class="font-weight-bold">Récupération</v-card-title>
+          <v-list>
+            <v-list-item> <v-icon icon="mdi-check" />Collation </v-list-item>
+            <v-list-item>
+              <v-icon icon="mdi-check" />Produits bien-être
+            </v-list-item>
+            <v-list-item>
+              <v-icon icon="mdi-check" />Livret Conseil
+            </v-list-item>
+          </v-list>
+          <v-card-action class="d-flex justify-center pa-1 mb-1">
+            <v-btn class="rounded-xl" variant="outlined"
+              >Choisir ma boîte</v-btn
+            >
+          </v-card-action>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script lang="ts" setup>
+import TermCard from "../components/TermCard.vue";
+</script>
+
+<style lang="css" scoped>
+.card {
+  border: 2px solid black;
+  transition: 0.2s;
+}
+.card:hover {
+  transition: 0.2s;
+  transform: translateY(-5px);
+}
+#term-card-row {
+  position: relative;
+  overflow: visible;
+  z-index: 1000;
+}
+#bar {
+  position: absolute;
+  width: 85vw;
+  height: 3px;
+  background: black;
+  border-radius: 1px;
+  top: 35px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  z-index: 0;
+}
+</style>