Add the Subscription table - need to tweak and clean code.

src/router/router.js

@@ -23,6 +23,7 @@ import ContentPage from "@/views/contents/ContentPage.vue";
 import CreatorContent from "@/views/creators/CreatorContent.vue";
 import CreatorHome from "@/views/creators/CreatorHome.vue";
 import CTA01 from "@/views/CTA01.vue";
+import SubscriptionMenu from "@/views/creators/SubscriptionMenu.vue";
 
 
 const routes = [
@@ -58,6 +59,10 @@ const routes = [
                 path: 'content',
                 component: CreatorContent
             },
+            {
+                path: 'subscription',
+                component: SubscriptionMenu
+            },
         ]
     },
     {

src/views/creators/SubscriptionMenu.vue

@@ -0,0 +1,88 @@
+<script setup>
+import { useBrandingStore } from "@/stores/brandingStore.js";
+import { ref } from 'vue';
+
+const branding = useBrandingStore();
+const selectedTier = ref(null);
+const tiers = ref([
+  {
+    id: 1,
+    name: 'Les Visionnaires',
+    description: 'Container blablal HtmlContainer blablal HtmlContainer blablalContainer blablal HtmlContainer blablal HtmlContainer blablalContainer blablal HtmlContainer blablal HtmlContainer blablalContainer blablal HtmlContainer blablal HtmlContainer blablalContainer blablal HtmlContainer blablal HtmlContainer blablalContainer blablal HtmlContainer blablal HtmlContainer blablalContainer blablal HtmlContainer blablal HtmlContainer blablalContainer blablal HtmlContainer blablal HtmlContainer blablalContainer blablal HtmlContainer blablal HtmlContainer blablal...',
+    price: 15,
+  },
+]);
+
+// Colors
+
+const onPrimary = { color: branding.colors.onPrimary}
+const Primary = { backgroundColor: branding.colors.primary}
+
+const onSecondaryColor = { color: branding.colors.onSecondary}
+const secondaryColor = { backgroundColor: branding.colors.secondary}
+
+function selectTier(id) {
+  selectedTier.value = id;
+}
+</script>
+
+<template>
+  <v-container class="d-flex justify-center">
+    <v-row justify="center">
+      <!-- Tiers -->
+      <v-col
+          :cols="12 / Math.min(tiers.length, 3)"
+          md="4"
+          v-for="tier in tiers"
+          :key="tier.id"
+      >
+        <div class="bg-white shadow-2xl rounded-2xl">
+          <v-img src="/images/hutopymedia/loginpage/loginhutopy.png" class="rounded-t-2xl"></v-img>
+          <div class="pa-6" :style="[Primary, onPrimary]">
+            <v-card-title class="text-h4 text-center py-4 ">{{ tier.name }}</v-card-title>
+           
+           <div class="text-justify">{{ tier.description }}</div> 
+          </div>
+          <div class="text-center bg-fuchsia-800 py-10" :style="[Primary]">
+            <v-btn
+                :color="selectedTier === tier.id ? 'primary' : ''"
+                @click="selectTier(tier.id)"
+                class="mx-auto"
+                width="200px"
+                :style="{ backgroundColor: selectedTier === tier.id ? branding.colors.primary : branding.colors.secondary, color: branding.colors.onSecondary }"
+            >
+              {{ selectedTier === tier.id ? 'Sélectionné' : 'Choisir' }}
+            </v-btn>
+
+          </div>
+          <v-card-text class="text-center rounded-b-2xl" :style="[secondaryColor,onSecondaryColor]" >
+            <span class="text-h5">{{ tier.price }} $ / par mois </span>
+          </v-card-text>
+        </div>
+      </v-col>
+    </v-row>
+  </v-container>
+
+  <v-card-actions class="d-flex justify-center mt-10">
+    <v-btn
+        :style="{ backgroundColor: branding.colors.secondary, color: branding.colors.onBackground }"
+        width="250px"
+        variant="elevated"
+    >
+      Payer
+    </v-btn>
+
+
+  </v-card-actions>
+</template>
+
+<style scoped>
+.v-card {
+  border-radius: 12px;
+}
+
+.dotted-border {
+  border: 2px dotted ;
+  padding: 1px;
+}
+</style>