From 7249c42c3be841eb4477291bab20761404f3736e Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sun, 13 Oct 2024 02:17:39 -0400
Subject: [PATCH] I added the card for exclusive content and a router link to
 allow viewing it.

---
 src/router/router.js                        |   5 +
 src/views/creators/ExclusiveContentCard.vue | 102 ++++++++++++++++++++
 2 files changed, 107 insertions(+)
 create mode 100644 src/views/creators/ExclusiveContentCard.vue

diff --git a/src/router/router.js b/src/router/router.js
index b769da4..9c53163 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -25,6 +25,7 @@ import CreatorHome from "@/views/creators/CreatorHome.vue";
 import CTA01 from "@/views/CTA01.vue";
 import SubscriptionMenu from "@/views/creators/SubscriptionMenu.vue";
 import Utilitylinks from "@/views/documentation/utilitylinks.vue";
+import ExclusiveContentCard from "@/views/creators/ExclusiveContentCard.vue";
 
 
 const routes = [
@@ -64,6 +65,10 @@ const routes = [
                 path: 'subscription',
                 component: SubscriptionMenu
             },
+            {
+                path: 'exclusivecontentcard',
+                component: ExclusiveContentCard
+            },
         ]
     },
     {
diff --git a/src/views/creators/ExclusiveContentCard.vue b/src/views/creators/ExclusiveContentCard.vue
new file mode 100644
index 0000000..8ab63b7
--- /dev/null
+++ b/src/views/creators/ExclusiveContentCard.vue
@@ -0,0 +1,102 @@
+<script setup>
+import { useBrandingStore } from "@/stores/brandingStore.js";
+import { ref } from "vue";
+
+const branding = useBrandingStore();
+const menu = ref(false); // C'est pour le menu déroulant!
+
+// Fonction pour convertir une couleur hexadécimale en RGB afin d'appliquer la transparence avec nos couleurs du backend hex a rgb
+function hexToRgb(hex) {
+  const bigint = parseInt(hex.replace('#', ''), 16);
+  const r = (bigint >> 16) & 255;
+  const g = (bigint >> 8) & 255;
+  const b = bigint & 255;
+  return `${r}, ${g}, ${b}`;
+}
+</script>
+
+<template>
+  <div class="flex items-center justify-center">
+    <!-- ExclusiveCard -->
+    <div
+        class="rounded-lg w-[290px] h-[380px] relative"
+        :style="{
+        backgroundColor: branding.colors.surface,
+        boxShadow: '0 10px 10px rgba(0, 0, 0, 0.3)',
+        borderColor: `rgba(${hexToRgb(branding.colors.secondary)}, 0.4)`,
+        borderWidth: '1px',
+      }"
+    >
+      <!-- Conteneur pour aligner le titre et le bouton -->
+      <div
+          class="flex items-center justify-between py-2 px-3"
+          :style="{ color: branding.colors.onPrimary }"
+      >
+        <div class="text-md">Comment créer un logo</div>
+
+        <!-- Bouton à trois points avec menu déroulant -->
+        <v-menu v-model="menu" activator="parent" offset-y>
+          <template #activator="{ props }">
+            <button
+                v-bind="props"
+                class="text-gray-600"
+                :style="{ color: branding.colors.onPrimary }"
+            >
+              <i class="mdi mdi-dots-vertical text-lg"></i>
+            </button>
+          </template>
+          <v-list
+              :style="{
+              backgroundColor: branding.colors.secondary,
+              color: branding.colors.onSecondary,
+            }"
+          >
+            <v-list-item title="Modifier" @click="modifier" />
+            <v-list-item title="Effacer" @click="effacer" />
+            <v-list-item title="Reporter" @click="reporter" />
+          </v-list>
+        </v-menu>
+      </div>
+
+      <div class="relative h-[170px] overflow-hidden">
+        <img
+            src="/images/hutopymedia/banners/hutopyul.png"
+            class="w-full h-full object-cover blur-md"
+            alt="image"
+        />
+        <div class="absolute inset-0 flex items-center justify-center">
+          <i
+              class="mdi mdi-lock text-7xl p-2 rounded-full"
+              :style="{
+              color: branding.colors.secondary,
+              border: `2px solid ${branding.colors.secondary}`,
+            }"
+          ></i>
+        </div>
+      </div>
+
+      <div class="text-end pa-2 px-4" :style="{ color: branding.colors.onPrimary }">
+        14-05-2024
+      </div>
+
+      <div class="text-justify px-4 text-md" :style="{ color: branding.colors.onPrimary }">
+        Tutoriel sur comment s'assurer d'avoir un logo unique et percutant
+        qui se démarque de la concurrence.
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
+
+<script>
+function modifier() {
+  console.log("Modifier l'élément");
+}
+function effacer() {
+  console.log("Effacer l'élément");
+}
+function reporter() {
+  console.log("Reporter l'élément");
+}
+</script>