From 154bc1669ab17b1520ac9efc0068f3bbee4f866c Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Tue, 25 Jun 2024 01:16:55 -0400
Subject: [PATCH] Add - new template for creator (banner)

---
 package-lock.json              |  20 +-
 src/views/manualusers/ARPS.vue | 394 +++++++--------------------------
 2 files changed, 96 insertions(+), 318 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 0cb8264..596a93a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1286,11 +1286,11 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -2013,9 +2013,9 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -2060,9 +2060,9 @@
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.5",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz",
-      "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "funding": [
         {
           "type": "individual",
diff --git a/src/views/manualusers/ARPS.vue b/src/views/manualusers/ARPS.vue
index c6a0169..f405021 100644
--- a/src/views/manualusers/ARPS.vue
+++ b/src/views/manualusers/ARPS.vue
@@ -1,321 +1,99 @@
 <template>
+  <!--  Bannière-->
+  <div class="z-20">
+    <div class="relative flex flex-col">
+      <!-- Social Network-->
+      <div class="bg-black bg-opacity-50 flex flex-col md:flex-row items-center justify-between py-2 px-4">
+        <div class="text-white mb-2 md:mb-0 w-full md:w-auto flex justify-between md:block">
+          <div class="text-lg">1000+ Abonnés</div>
+          <div class="text-sm">500 Contacts en commun</div>
+        </div>
+        <div class="grid grid-cols-6  md:flex flex-wrap space-x-0 md:space-x-10 gap-6 ">
+          <a href="https://facebook.com" target="_blank"
+             class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-500">
+            <v-icon>mdi-facebook</v-icon>
+          </a>
+          <a href="https://twitter.com" target="_blank"
+             class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-blue-400">
+            <v-icon>mdi-twitter</v-icon>
+          </a>
+          <a href="https://instagram.com" target="_blank"
+             class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-pink-500">
+            <v-icon>mdi-instagram</v-icon>
+          </a>
+          <a href="https://tiktok.com" target="_blank"
+             class="transform transition-transform duration-200 hover:scale-110">
+            <img src="/images/hutopymedia/icons/white/tiktokwhite.png" alt="TikTok" class="w-9 h-9">
+          </a>
+          <a href="https://youtube.com" target="_blank"
+             class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-red-500">
+            <v-icon>mdi-youtube</v-icon>
+          </a>
+          <a href="https://yoursite.com" target="_blank"
+             class="text-white text-2xl transform transition-transform duration-200 hover:scale-125 hover:text-gray-500">
+            <v-icon>mdi-web</v-icon>
+          </a>
+        </div>
+      </div>
+    </div>
 
-  <v-row class="fluid" style="margin-top: -65px; position: relative; z-index: 0;">
-    <v-col cols="12" class="pa-0" style="width: 100vw; overflow: hidden;">
-      <v-img class="profile-banner" max-height="375" :src="imageSrc" cover
-             style="box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);"></v-img>
-    </v-col>
-  </v-row>
-  <v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
-  </v-row>
-
-  <!-- "Core (Menu / Center / Donation)" -->
-  <v-row>
-    <!-- Profile Info Picture name title & description -->
-    <v-col class="middle-col" style="z-index: 5;" cols="12" xs="12" sm="12" md="6" lg="5" xl="4" xxl="4">
-      <v-container class="profile-container">
-        <v-container>
-          <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
-          <!-- User informations Name & title  -->
-          <v-container class="background-profile-container" style="margin-top: -8%;">
-            <v-row>
-              <v-col style="height: 50px;" cols="7" offset="2" class="social-container">
-                <h1 class="name-info">{{ name }}</h1>
-              </v-col>
-              <v-col></v-col>
-            </v-row>
-            <v-row>
-              <v-col style="height: 50px;" cols="6" offset="2" class="social-container2">
-                <h1 class="occupation-info">{{ title }}</h1>
-              </v-col>
-              <v-col></v-col>
-            </v-row>
-
-            <!-- User Social Network Links -->
-            <v-row>
-              <v-spacer></v-spacer>
-              <v-col cols="10" style="margin-top: 1%; margin-bottom: -2%;">
-                <v-row>
-                  <a href="https://www.facebook.com/arps.company">
-                    <img class="socialicons" src="/images/hutopymedia/icons/black/facebookblack.png" alt="Facebook">
-                  </a>
-                  <a href="https://www.instagram.com/arps.co/">
-                    <img class="socialicons" src="/images/hutopymedia/icons/black/instagramblack.png" alt="Instagram">
-                  </a>
-                  <a href="https://www.youtube.com/channel/UCgnT_psydUXohYm5Yz_wFUg">
-                    <img class="socialicons" src="/images/hutopymedia/icons/black/youtube.png" alt="Youtube">
-                  </a>
-                  <a href="https://www.tiktok.com/@arps.co"> <img class="socialicons"
-                                                                  src="/images/hutopymedia/icons/black/tiktokblack.png"
-                                                                  alt="tiktokblack">
-                  </a>
-                  <a href="https://www.linkedin.com/in/mickael-simard-96079a90/"> <img class="socialicons"
-                                                                                       src="/images/hutopymedia/icons/black/linkedinblack.png"
-                                                                                       alt="linkedin">
-                  </a>
-                  <a href="https://www.arps.ca//"> <img class="socialicons"
-                                                        src="/images/hutopymedia/icons/black/arpsblack.png"
-                                                        alt="ARPS">
-                  </a>
-                </v-row>
-              </v-col>
-              <v-col background-color="primary"></v-col>
-            </v-row>
-
-            <!-- Description  -->
-            <v-row>
-              <v-container
-                  style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; margin-top: 15px;">
-
-                <v-expansion-panels style="min-width: 320px;">
-                  <v-col cols="12" offset="-1">
-                    <v-expansion-panel class="background-pink text-justify"
-                                       style="border-bottom-left-radius:0px; border-bottom-right-radius: 0px; color: white;"
-                                       text="
-                      Une agence créative spécialisée en production audiovisuelle, création de contenu et stratégie marketing située à Saint-Hyacinthe qui accompagne les PME, les entrepreneurs ainsi que les artistes afin d'affiner leur notoriété par le biais d'images à la hauteur de leur travail.
-" title="Qui sommes-nous ?">
-                    </v-expansion-panel>
-                    <v-expansion-panel class="background-pink text-justify"
-                                       style="border-top-left-radius: 0px; border-top-right-radius: 0px; color: white;"
-                                       text="
-                        Originairement une marque de vêtements fondée en 2012 en Montérégie par Mickael Simard, ARPS s'est fait connaître dans le milieu de la mode urbaine, de la musique et de l'art. Au travers les années, l'entreprise à su développer une expertise au niveau du développement d'un branding efficace. Aujourd’hui, nous sommes là pour raconter VOTRE histoire tout en partageant nos idées.
-
-" title="Notre histoire">
-                    </v-expansion-panel>
-                  </v-col>
-                </v-expansion-panels>
-              </v-container>
-            </v-row>
-          </v-container>
-        </v-container>
-      </v-container>
-
-      <!-- Création du studio -->
-      <v-container>
-        <v-card class="flow-menu m-0 youtube-card">
-
-          <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
-            <v-container style="margin-top: -15px;">
-              <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
-                      src="https://www.youtube.com/embed/VRMlRv9IrY0?si=cLyduREv81I-NDx5" title="Guillaumem"
-                      frameborder="0"
-                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                      allowfullscreen></iframe>
-
-              <!-- Date -->
-              <v-row class="text-right">
-                <v-col>
-                  <h1 style=" margin-right: 40px; margin-top: 10px; margin-bottom: -20px" class="card-date">
-                    27-05-2024
-                  </h1>
-                </v-col>
-              </v-row>
-
-              <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
-                ARPS | Podcast EP. 2 - La beauté du filmmaking (Avec Simon Bélanger)
-              </p>
-
-
-              <!-- Like dislike commment Section -->
-              <div style="height: 20px;"></div>
-              <div
-                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-              </div>
-              <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-              </div>
-
-              <!-- Comments -->
-              <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
-                            placeholder="Commentaire (Arrive bientôt)"></v-text-field>
-            </v-container>
-          </div>
-        </v-card>
-      </v-container>
-
-      <!-- Création du studio -->
-      <v-container>
-        <v-card class="flow-menu m-0 youtube-card">
-
-          <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
-            <v-container style="margin-top: -15px;">
-              <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
-                      src="https://www.youtube.com/embed/d9FXGyQgL5A?si=u2oTh_E2wZx9r9Y7" title="Guillaumem"
-                      frameborder="0"
-                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                      allowfullscreen></iframe>
-
-              <!-- Date -->
-              <v-row class="text-right">
-                <v-col>
-                  <h1 style=" margin-right: 40px; margin-top: 10px; margin-bottom: -20px" class="card-date">
-                    26-05-2024
-                  </h1>
-                </v-col>
-              </v-row>
-
-              <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
-                Regardez les coulisses qui vous montrent notre projet de création de studio de podcast, le premier à
-                Saint-Hyacinthe.
-              </p>
-
-
-              <!-- Like dislike commment Section -->
-              <div style="height: 20px;"></div>
-              <div
-                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-              </div>
-              <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-              </div>
-
-              <!-- Comments -->
-              <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
-                            placeholder="Commentaire (Arrive bientôt)"></v-text-field>
-            </v-container>
-          </div>
-        </v-card>
-      </v-container>
-
-      <!-- Demo Reel -->
-      <v-container>
-        <v-card class="flow-menu m-0 youtube-card">
-
-          <div style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%;">
-            <v-container style="margin-top: -15px;">
-              <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
-                      src="https://www.youtube.com/embed/XUeikVgYXwc?si=CxfP7MRcQvOMfaIl" title="Guillaumem"
-                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                      allowfullscreen></iframe>
-
-              <!-- Date -->
-              <v-row class="text-right">
-                <v-col>
-                  <h1 style=" margin-right: 40px; margin-top: 10px; margin-bottom: -20px" class="card-date">
-                    25-05-2024
-                  </h1>
-                </v-col>
-              </v-row>
-
-              <p class="text-justify pa-10" style="margin-bottom: -6%; font-size: 1em">
-                Nous vous présentons notre démo-reel d'ARPS. Comme le disait Albert Einstein : "La créativité est
-                l'intelligence qui s'amuse."
-              </p>
-
-
-              <!-- Like dislike commment Section -->
-              <div style="height: 20px;"></div>
-              <div
-                  style="z-index: 500; margin-bottom: 2%; background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-              </div>
-              <div style="background-color: rgba(0, 0, 0, 1); height: 3px; width: 100%; margin-top: 20px;">
-              </div>
-
-              <!-- Comments -->
-              <v-text-field style="margin-left: 2%; margin-bottom: 15px; margin-bottom: -20px"
-                            placeholder="Commentaire (Arrive bientôt)"></v-text-field>
-            </v-container>
-          </div>
-        </v-card>
-      </v-container>
-
-    </v-col>
-  </v-row>
+    <!--Banner & user info-->
+    <div class="relative">
+      <!--Banner-->
+      <div>
+        <img class="w-full  drop-shadow-[0_15px_10px_rgba(0,0,0,0.7)]" :src="imageSrc" alt="Profile Banner">
+      </div>
+      <!--User info -->
+      <div class="absolute top-1/2 right-10 text-white z-30 transform -translate-y-1/2">
+        <div class="text-white">
+          <div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">Guillaume</div>
+          <div class="text-2xl sm:text-3xl md:text-2xl lg:text-4xl xl:text-6xl font-bold">Mousseau</div>
+          <div class="text-1xl sm:text-xl md:text-lg lg:text-2xl xl:text-3xl">Agence Créative</div>
+        </div>
+      </div>
+    </div>
+  </div>
 
+  <!-- Actions Button & image profile -->
+  <div class="w-full ">
+    <div class="bg-gray-800 py-4 relative shadow-lg" style="background-color: #24120E">
+      <div class=" flex flex-col sm:flex-row items-center sm:justify-between">
+        <img
+            class=" left-5 rounded-full border-solid border-2 sm:absolute sm:top-1/2 sm:transform sm:-translate-y-1/2 md:left-20 z-30"
+            :src="profilePicture"
+            alt="Profile Picture"
+            style="border-color: rgb(70, 37, 24); max-width: 250px; width: 100%;">
+        <div class="flex flex-wrap sm:flex-nowrap items-center mt-4 sm:mt-0 sm:ml-auto space-x-2 sm:space-x-4">
+          <button
+              class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125">
+            <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-text-box-plus-outline</v-icon>
+          </button>
+          <button class="text-white py-2 px-4 rounded"
+                  style="background-color: #333; transition: background-color 0.3s ease;"
+                  onmouseover="this.style.backgroundColor='#555';" onmouseout="this.style.backgroundColor='#333';">
+            S'ABONNER
+          </button>
+          <button
+              class="flex items-center text-white transform transition-transform duration-200 hover:text-white hover:scale-125">
+            <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-comment-text</v-icon>
+          </button>
+          <button
+              class="flex items-center text-white transform transition-transform duration-200 hover:text-gray-300 hover:scale-125">
+            <v-icon style="font-size: 35px; height: 35px; width: 55px;">mdi-information</v-icon>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
-
 let imageSrc = '/images/usersmedia/ARPS/banners/bannerARPS01.png';
 let profilePicture = '/images/usersmedia/ARPS/profilepictures/profileARPS.png';
-let name = 'ARPS'
-let title = 'Agence créative'
-
 </script>
 
 <style scoped>
-
-.name-info {
-  margin-top: -10px;
-  margin-left: 15%;
+.shadow-lg {
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.8);
 }
-
-.occupation-info {
-  margin-left: 15%;
-  font-size: large;
-}
-
-.profile-container {
-  margin-top: -16%;
-}
-
-.background-profile-container {
-  background-color: #ececec;
-  color: white;
-  border-top: 3px solid #a30e79;
-  border-right: 3px solid #a30e79;
-  font-weight: 700;
-  font-size: 1.15rem;
-  border-radius: 25px;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3)
-}
-
-.background-pink {
-  background-color: #231f20;
-  color: white;
-  font-weight: 400;
-}
-
-.socialicons {
-  width: 35px;
-  max-width: 100px;
-  margin-top: 3px;
-  margin-left: 40px;
-}
-
-.youtube-card {
-  margin-left: 2%;
-  margin-right: 2%;
-  border-radius: 15px;
-  background-color: #f4f4f4;
-  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4)
-}
-
-.card-date {
-  margin-left: 10px;
-  margin-top: -18px;
-  margin-bottom: -20px;
-  font-size: .8rem;
-}
-
-.social-container {
-  background-color: #a35026;
-  border-top-right-radius: 30px;
-  border-bottom-right-radius: 30px;
-  font-size: 1.7rem;
-  font-weight: 600;
-  color: white;
-}
-
-.social-container2 {
-  background-color: #231f20;
-  border-bottom-right-radius: 30px;
-  font-size: 1.4rem;
-  font-weight: 500;
-  color: white;
-}
-
-.mobile-profile-picture-creator {
-  border-radius: 100px;
-  height: 150px;
-  width: 150px;
-  border-radius: 50%;
-  max-width: 150px;
-  border: 4px solid white;
-  z-index: 1000;
-}
-
-.profile-banner {
-  margin-top: 25px;
-  min-height: 200px
-}
-
 </style>
\ No newline at end of file