From 1ca4a3c5f1f559eec012385d4722e8784a99fcd7 Mon Sep 17 00:00:00 2001
From: Tavares Dylan <tavares.dylan03@gmail.com>
Date: Wed, 10 May 2023 10:26:08 +0200
Subject: [PATCH] feat: subscribe section (#38)

* feat: subscribe section wip

* feat: all placements with cards & mobile responsive

* refactor: quick style fixes
---
 app/src/components/SubscriptionPricing.vue | 177 ++++++++++++++-------
 app/src/main.js                            |   3 +
 app/src/shared/layout/Header.vue           |   6 +-
 app/src/views/Home.vue                     |   7 +-
 4 files changed, 125 insertions(+), 68 deletions(-)

diff --git a/app/src/components/SubscriptionPricing.vue b/app/src/components/SubscriptionPricing.vue
index 873b651..a2d99e3 100644
--- a/app/src/components/SubscriptionPricing.vue
+++ b/app/src/components/SubscriptionPricing.vue
@@ -1,76 +1,135 @@
 <template>
-  <v-container>
-    <h2>Abonnements</h2>
-    <v-card variant="outlined" border="2">
-      <v-row class="ma-0 pa-0">
-        <v-col class="pa-0 ma-0">
-          <v-expansion-panels
-            tile
-            v-model="expansionPanelState"
-            variant="accordion"
-          >
-            <v-expansion-panel
-              rounded="0"
-              value="little-kick"
-              class="bg-secondary"
+  <!-- TODO: Enchor to function to scroll on this section -->
+  <v-container fluid class="sub-container mt-8 mb-16 rounded-t-xl">
+    <v-container>
+      <h2 class="text-sm-h4 text-md-h3 font-weight-bold text-uppercase mb-4">
+        Abonnements
+      </h2>
+      <v-card variant="outlined" class="rounded-lg card mt-8">
+        <v-row class="ma-0 pa-0">
+          <v-col class="pa-0 ma-0">
+            <v-expansion-panels
+              tile
+              v-model="expansionPanelState"
+              variant="accordion"
+              class="exp-panels"
             >
-              <v-expansion-panel-title> Little Kick </v-expansion-panel-title>
-              <v-expansion-panel-text>
-                <div>
-                  <p>
-                    Lorem, ipsum dolor sit amet consectetur adipisicing elit.
-                    Accusantium fuga voluptatibus, mollitia autem laudantium
-                    odio nihil odit consectetur nobis earum architecto commodi
-                    voluptatem libero necessitatibus vel dicta dolorum maxime
-                    quae.
-                  </p>
-                  <v-btn>Les abonnements</v-btn>
-                </div>
-              </v-expansion-panel-text>
-            </v-expansion-panel>
+              <v-expansion-panel
+                rounded="0"
+                value="little-kick"
+                class="bg-primary"
+              >
+                <v-expansion-panel-title> Little Kick </v-expansion-panel-title>
+                <v-expansion-panel-text class="mt-2">
+                  <div>
+                    <p>
+                      Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+                      Accusantium fuga voluptatibus, mollitia autem laudantium
+                      odio nihil odit consectetur nobis earum architecto commodi
+                      voluptatem libero necessitatibus vel dicta dolorum maxime
+                      quae.
+                    </p>
+                    <v-btn
+                      color="darkBtn"
+                      class="rounded-xl mt-4 font-weight-bold"
+                      >Découvrir</v-btn
+                    >
+                  </div>
+                </v-expansion-panel-text>
+              </v-expansion-panel>
 
-            <v-expansion-panel
-              rounded="0"
-              value="high-kick"
-              class="bg-primary"
+              <v-expansion-panel
+                rounded="0"
+                value="high-kick"
+                class="bg-secondary"
+              >
+                <v-expansion-panel-title> High Kick </v-expansion-panel-title>
+                <v-expansion-panel-text class="mt-2">
+                  <div>
+                    <p>
+                      Lorem, ipsum dolor sit amet consectetur adipisicing elit.
+                      Accusantium fuga voluptatibus, mollitia autem laudantium
+                      odio nihil odit consectetur nobis earum architecto commodi
+                      voluptatem libero necessitatibus vel dicta dolorum maxime
+                      quae.
+                    </p>
+                    <v-btn
+                      color="darkBtn"
+                      class="rounded-xl mt-4 font-weight-bold"
+                      >Découvrir</v-btn
+                    >
+                  </div>
+                </v-expansion-panel-text>
+              </v-expansion-panel>
+            </v-expansion-panels>
+          </v-col>
+          <v-col id="right-container" class="pa-0 ma-0 d-none d-sm-flex">
+            <v-sheet
+              class="w-100 d-flex align-center justify-center"
+              color="secondary"
             >
-              <v-expansion-panel-title> High Kick </v-expansion-panel-title>
-              <v-expansion-panel-text>
-                <div>
-                  <p>
-                    Lorem, ipsum dolor sit amet consectetur adipisicing elit.
-                    Accusantium fuga voluptatibus, mollitia autem laudantium
-                    odio nihil odit consectetur nobis earum architecto commodi
-                    voluptatem libero necessitatibus vel dicta dolorum maxime
-                    quae.
-                  </p>
-                  <v-btn>Les abonnements</v-btn>
-                </div>
-              </v-expansion-panel-text>
-            </v-expansion-panel>
-          </v-expansion-panels>
+              <TermCard class="w-75 my-4">
+                <v-img cover src="https://picsum.photos/1920/1080"></v-img>
+              </TermCard>
+            </v-sheet>
+          </v-col>
+        </v-row>
+      </v-card>
+    </v-container>
+
+    <v-container class="mt-16">
+      <v-row>
+        <v-col cols="12" sm="4">
+          <TermCard>
+            <v-img cover src="https://picsum.photos/1920/1080"></v-img>
+          </TermCard>
         </v-col>
-        <v-col id="right-container" class="pa-0 ma-0 d-flex justify-center align-center">
-          <v-card height="300" width="300" class="ma-6">
-            <v-card-title> coucou ma couille </v-card-title>
-            <v-img
-              cover
-              src="https://picsum.photos/seed/picsum/200/300"
-            ></v-img>
-          </v-card>
+        <v-spacer></v-spacer>
+        <v-col cols="12" sm="6" class="d-flex flex-column">
+          <h2 class="text-h3 text-uppercase font-weight-thin">
+            <span class="font-weight-bold mr-2">Relax</span>Box
+          </h2>
+          <p class="my-4">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit.
+            Exercitationem animi debitis, libero corporis labore nisi excepturi
+            officiis reprehenderit laudantium ipsa quas delectus porro neque
+            aspernatur eius eligendi et amet vitae.
+          </p>
+          <v-btn
+            color="primary"
+            class="rounded-xl font-weight-bold mt-4 justify-self-center"
+            variant="outlined"
+            >Je découvre <v-icon class="ml-2" icon="mdi-arrow-right"
+          /></v-btn>
         </v-col>
       </v-row>
-    </v-card>
+    </v-container>
   </v-container>
 </template>
 
-<script setup>
+<script lang="ts" setup>
 import { ref } from "vue";
-const expansionPanelState = ref("little-kick");
+import TermCard from "../components/TermCard.vue";
+const expansionPanelState = ref<string>("little-kick");
+const littleKickExpPanelState = ref<boolean>(true);
+const highKickExpPanelState = ref<boolean>(false);
+// TODO: Add a function to change the expansion panel state and to avoid both panel being closed at the same time
 </script>
 
-<style scoped>
+<style lang="css" scoped>
 #right-container {
   border-left: 1px solid black;
 }
+.sub-container {
+  min-height: 100vh;
+  background-color: white;
+  border: 2px solid black;
+}
+.exp-panels {
+  min-height: 100% !important;
+}
+
+.card {
+  border: 2px solid black;
+}
 </style>
diff --git a/app/src/main.js b/app/src/main.js
index 2a7881c..2eb326d 100644
--- a/app/src/main.js
+++ b/app/src/main.js
@@ -30,9 +30,12 @@ const myCustomLightTheme = {
     info: "#2196F3",
     success: "#4CAF50",
     warning: "#FB8C00",
+    darkBtn: "#000000",
   },
 };
 
+// TODO: Add the dark theme
+
 const vuetify = createVuetify({
   components,
   directives,
diff --git a/app/src/shared/layout/Header.vue b/app/src/shared/layout/Header.vue
index a56d9eb..4f3a68d 100644
--- a/app/src/shared/layout/Header.vue
+++ b/app/src/shared/layout/Header.vue
@@ -12,7 +12,7 @@
         prepend-icon="mdi-currency-eur"
         title="Abonnements"
         value="abonnements"
-        to="/abonnements"
+        to="#abonnements"
       ></v-list-item>
       <v-list-item
         prepend-icon="mdi-wallet-giftcard"
@@ -55,9 +55,7 @@
     <div
       class="nav-links-container hidden-sm-and-down align-center mx-8 pa-2 rounded rounded-xl justify-space-around"
     >
-      <router-link class="router-links mx-4" to="/abonnements"
-        >Abonnements</router-link
-      >
+      <a class="router-links mx-4" href="/#abonnements">Abonnements</a>
       <router-link class="router-links mx-4" to="/cartes-cadeaux"
         >Cartes cadeaux</router-link
       >
diff --git a/app/src/views/Home.vue b/app/src/views/Home.vue
index 8828495..9040e99 100644
--- a/app/src/views/Home.vue
+++ b/app/src/views/Home.vue
@@ -40,12 +40,9 @@
       />
       <div class="banner-container"></div>
     </v-container>
-
-    <hr class="my-4" />
-    <SubscriptionPricing></SubscriptionPricing>
-    <hr class="my-4" />
-    <Introducing reversed="false"> </Introducing>
   </v-container>
+  <SubscriptionPricing id="abonnements"></SubscriptionPricing>
+  <Introducing reversed="false"> </Introducing>
   <Faq></Faq>
 </template>