From 091c4327ae1c59f1fa52f6c8de3d45c1835ead65 Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Sun, 7 Apr 2024 15:46:38 -0400
Subject: [PATCH] =?UTF-8?q?Modifications=20de=20plusieurs=20=C3=A9l=C3=A9m?=
 =?UTF-8?q?ents=20visuels=20dans=20default,=20footer,=20stripe=20et=20crea?=
 =?UTF-8?q?torFolio.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 public/favicon.ico              | Bin 4286 -> 15086 bytes
 src/layouts/DefaultLayout.vue   |   4 +-
 src/layouts/FooterLayout.vue    |  22 +-
 src/views/StripePayment.vue     | 127 +++---
 src/views/main/CreatorFolio.vue | 696 ++++++++++++++++++++++++--------
 5 files changed, 622 insertions(+), 227 deletions(-)

diff --git a/public/favicon.ico b/public/favicon.ico
index df36fcfb72584e00488330b560ebcf34a41c64c2..964730e860fc2c904f27a6850dc90cd704b18dc4 100644
GIT binary patch
literal 15086
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

literal 4286
zcmds*O-Phc6o&64GDVCEQHxsW(p4>LW*W<827=Unuo8sGpRux(DN@jWP-e29Wl%wj
zY84_aq9}^Am9-cWTD5GGEo#+5Fi2wX_P*bo+xO!)p*7B;iKlbFd(U~_d(U?#hLj56
zPhFkj-|A6~Qk#@g^#D^U0XT1cu=c-vu1+SElX9NR;kzAUV(q0|dl0|%h|dI$%VICy
zJnu2^L*Te9JrJMGh%-P79CL0}dq92RGU6gI{v2~|)p}sG5x0U*z<8U;Ij*hB9z?ei
z@g6Xq-pDoPl=MANPiR7%172VA%r)kev<ISBgE$F{SFy+(=9Z)f)De0Se}ZDZW}Z3B
zElCeVrw;K0Fdl_Cg=gZOFXXc3pL)Q05CAuT+XucQ<8g~3dteP~|7s7c6QYP;fy;mF
zMN;>tV-_5H*QJKFmd;8yA$98zCxBZYXTNZ#QFk2(TX0;Y2dt&WitL#$96|gJY=3xX
zpCoi|YNzgO3R`f@IiEeSmKrPSf#h#Qd<$%Ej^RIeeYfsxhPMOG`S`Pz8q``=511zm
zAm)MX5AV^5xIWPyEu7u>qYs?pn$I4nL9J!=K=SGlKLXpE<5x+2cDTXq?brj?n6sp=
zphe9;_JHf40^9~}9i08r{XM$7HB!`{Ys~TK0kx<}ZQng`UPvH*11|q7&l9?@FQz;8
zx!=3<4seY*%=OlbCbcae?<QnEgvj4i?s}Yk=qA2z`-^*<eK3c)MS4JOdbsTQEOa0)
z0NWqlna2rzs>5^V_}*K>Uo6ZWV8mTyE^B=DKy7-sdLYkR5Z?paTgK-zyIkKjIcpyO
z{+uIt&YSa_$QnN_@t~L014dyK(fOOo+W*MIxbA6Ndgr=Y!f#Tokqv}n<7-9qfHkc3
z=>a|HWqcX8fzQCT=dqVbogRq!-S>H%yA{1w#2Pn;=e>JiEj7Hl;zdt-2f+j2%DeVD
zsW0Ab)ZK@0cIW%W7<X*Er!BfRbvU93$DH%#v6dRt^6HBxz1xBNHx=$&_Gv<&J}Ljk
zJN<Fzx(`Oe@KgQ0F$<14=XV#WK`o#6Ku>z}H{&~yGhn~D;aiP4=;m-HCo`BEI+Kd6
z={Xwx{T<?%b6i9IjI)Ls)S{-*mq<@~R{?$}ZKjf;^k75i_}(2MXt}^SEBVg7AI@28
zo_uPg2V)_e-`2Ois=PYoe%9u*n9({PFR)OnHJPi{dNx>Kx<YG`4QQ>D#iCLfl2<BD
h7L=-;Q>vQGDitKtN>z|-AdCN|$jTFDg0m3O`WLD4_s#$S

diff --git a/src/layouts/DefaultLayout.vue b/src/layouts/DefaultLayout.vue
index b44472d..75eebfc 100644
--- a/src/layouts/DefaultLayout.vue
+++ b/src/layouts/DefaultLayout.vue
@@ -3,8 +3,8 @@
   <body style="background-color: #f4f4f4;">
 
     <!-- Version pour ordinateur -->
-    <v-card style="z-index: 9000; background-color: #f4f4f4;" class="hidden-sm-and-down" hidden-sm-and-down>
-      <v-container style="z-index: 2000; margin-bottom: .5%; margin-top: -.6%; margin-right: 1%;">
+    <v-card style="z-index: 9000; background-color: #ffff;" class="hidden-sm-and-down" hidden-sm-and-down elevation="5">
+      <v-container style="z-index: 2000; margin-bottom: .8%; margin-top: -.3%; margin-right: 1%;">
         <v-row justify="end" style="margin-top: .2%; margin-bottom: -1.2%;">
           <v-col cols="auto" class="d-flex align-end justify-end">
             <router-link :to="{ name: 'yourprofile' }">
diff --git a/src/layouts/FooterLayout.vue b/src/layouts/FooterLayout.vue
index 9fc4c83..934abb5 100644
--- a/src/layouts/FooterLayout.vue
+++ b/src/layouts/FooterLayout.vue
@@ -37,9 +37,10 @@
         </v-container>
 
         <v-container class="text-center" style="flex-grow: 1;">
-          <v-btn v-for="link in links" :key="link" class="mx-2" color="black" rounded="xl" variant="text">
-            {{ link }}
-          </v-btn>
+          <router-link v-for="link in links" :key="link" :to="getLinkUrl(link)"
+            class="mx-2 text-decoration-none text-black">
+            <v-btn class="black--text" rounded="xl" variant="text">{{ link }}</v-btn>
+          </router-link>
         </v-container>
 
         <v-container class="text-black text-center ">
@@ -67,8 +68,21 @@ export default {
       'conditions utilisation',
       'anti-exploitation',
     ],
+    linkRoutes: {
+      'Aide & Contact': { name: 'home' },
+      'Conditions générales': { name: 'home' },
+      'Politique des contenus': { name: 'home' },
+      'Programme Ambassadeurs': { name: 'home' },
+      'conditions utilisation': { name: 'home' },
+      'anti-exploitation': { name: 'home' },
+    },
   }),
-}
+  methods: {
+    getLinkUrl(link) {
+      return this.linkRoutes[link] || { name: 'home' };
+    },
+  },
+};
 </script>
 
 <style>
diff --git a/src/views/StripePayment.vue b/src/views/StripePayment.vue
index 0a2eb34..3c5d9f0 100644
--- a/src/views/StripePayment.vue
+++ b/src/views/StripePayment.vue
@@ -1,42 +1,49 @@
 <template>
   <v-container>
-    <v-row>
-      <v-col>
-        <v-text-field
-          label="Montant ($)"
-          v-model="price"
-          style="color: rgb(0, 109, 119); background-color: #f4f4f4">
-        </v-text-field>
-      </v-col>
 
-      <v-col>
-        <v-btn
-          @click="goPay()"
-          style=" background-color: rgb(11, 170, 178); color: white; font-weight: bold;"
-          >Envoyez
-        </v-btn>
-      </v-col>
+    <v-row>
+      <v-text-field label="Message"
+        style="border-radius: 10px; margin-top: 10px; margin-bottom: 10px; color: #a30e79; background-color: #f4f4f4">
+      </v-text-field>
     </v-row>
 
+
+    <v-row>
+      <v-text-field label="Montant ($)" v-model="price"
+        style="border-radius: 10px; margin-bottom: 10px; color: #a30e79; background-color: #f4f4f4">
+      </v-text-field>
+    </v-row>
+
+    <v-row justify="center">
+      <v-btn @click="goPay()"
+        style="margin-bottom: 10px; width: 200px;  background-color: #6b0065; color: white; font-weight: bold;">
+        <v-icon left style="margin-right: 10px;">
+          mdi-gift
+        </v-icon>
+        Envoyez
+      </v-btn>
+    </v-row>
+
+
     <v-dialog v-model="isPaymentDialogActive" max-width="720" persistent>
       <template v-slot:default>
         <v-card>
-            <div id="checkout">
-                <!-- Checkout will insert the payment form here -->
-            </div>
-            <v-card-actions>
-                <v-spacer></v-spacer>
-                <v-btn
-                    text="Annuler"
-                    @click="closeDialog()"
-                ></v-btn>
-            </v-card-actions>
+          <div id="checkout">
+            <!-- Checkout will insert the payment form here -->
+          </div>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn block class="ma-auto" style="width: 200px;" text="Annuler" @click="closeDialog()"></v-btn>
+          </v-card-actions>
         </v-card>
       </template>
     </v-dialog>
   </v-container>
 
 
+
+
+
 </template>
 
 <script setup>
@@ -44,44 +51,44 @@ import { useClient } from '@/plugins/api.js';
 import { loadStripe } from '@stripe/stripe-js';
 import { onMounted, ref } from "vue";
 
-  let stripe = null;
-  const client = useClient();
-  const price = ref(0);
-  const isPaymentDialogActive = ref(false);
-  var checkout;
+let stripe = null;
+const client = useClient();
+const price = ref(0);
+const isPaymentDialogActive = ref(false);
+var checkout;
 
-  onMounted(async () => {
-    // I removed api key to push. Need to get it from backend.
-    stripe = await loadStripe('');
-  })
+onMounted(async () => {
+  // I removed api key to push. Need to get it from backend.
+  stripe = await loadStripe('');
+})
 
-  const fetchClientSecret = async () => {
-    const clientSecret = await createCheckoutSession();
-    return clientSecret;
-  };
+const fetchClientSecret = async () => {
+  const clientSecret = await createCheckoutSession();
+  return clientSecret;
+};
 
-  async function createCheckoutSession() {
-    let clientSecret = await client.post('/api/Stripe', {
-      price: price.value * 100
-    });
-
-    let secret = clientSecret["data"];
-    return secret;
-  }
-
-  function closeDialog(){
-    isPaymentDialogActive.value = false;
-    checkout.destroy();
-  }
-
-  async function goPay() {
-    isPaymentDialogActive.value = true;
-
-    checkout = await stripe.initEmbeddedCheckout({
-      fetchClientSecret,
+async function createCheckoutSession() {
+  let clientSecret = await client.post('/api/Stripe', {
+    price: price.value * 100
   });
 
-    await checkout.mount('#checkout');
-  }
+  let secret = clientSecret["data"];
+  return secret;
+}
 
-</script>
+function closeDialog() {
+  isPaymentDialogActive.value = false;
+  checkout.destroy();
+}
+
+async function goPay() {
+  isPaymentDialogActive.value = true;
+
+  checkout = await stripe.initEmbeddedCheckout({
+    fetchClientSecret,
+  });
+
+  await checkout.mount('#checkout');
+}
+
+</script>
\ No newline at end of file
diff --git a/src/views/main/CreatorFolio.vue b/src/views/main/CreatorFolio.vue
index c1dac89..505386e 100644
--- a/src/views/main/CreatorFolio.vue
+++ b/src/views/main/CreatorFolio.vue
@@ -2,113 +2,155 @@
   <div style="background-color: #f4f4f4;">
     <DefaultLayout></DefaultLayout>
 
-    <!-- Bannière -->
-    <v-row class="fluid" style="margin-top: -25px; position: relative; z-index: 0;">
+
+    <!-- "Mobile -->
+    <v-row class="fluid hidden-md-and-up social-mobile-container"
+      style="margin-top: -10px; position: relative; z-index: 0; " hidden-md-and-down>
       <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>
 
+    <!-- "PurpleLine" -->
+    <v-row style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);">
+    </v-row>
 
+    <!-- "Mobile-Profile" -->
+    <v-row class="d-flex justify-center align-center d-sm-none" style="margin-top: 50px; margin-bottom: -10px">
+      <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
+    </v-row>
+    <v-container style="margin-top: -70px; padding: 0;" class="hidden-md-and-up social-container-mobile-icons"
+      hidden-md-and-down>
+      <v-row no-gutters class="d-flex justify-space-between align-center" style="margin-left: 3%; margin-right: 3%;">
+        <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
+          <a href="https://www.facebook.com/profile.php?id=61556819217561">
+            <v-img class="socialicons-mobile invert-color" src="../../../images/facebookicon.png"
+              alt="Facebook"></v-img>
+          </a>
+        </v-col>
 
-    <!-- "profile xs sm md" -->
+        <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
+          <a href="https://www.instagram.com/">
+            <v-img class="socialicons-mobile" src="../../../images/instaicon.png" alt="Instagram"></v-img>
+          </a>
+        </v-col>
 
-    <v-card
-      style="margin-top: 2px; border-bottom-left-radius:30px; border-bottom-right-radius:30px; background-color: rgba(11, 170, 178, 0); width: 101vw;"
-      class="profile-container-mobile hidden-md-and-up" hidden-md-and-down>
+        <v-col cols="4" sm="4" xs="0" class="hidden-xs">
+          <v-row class="d-flex justify-center align-center">
+            <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
+          </v-row>
+        </v-col>
 
-      <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator "></v-img>
+        <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
+          <a href="https://www.x.com/">
+            <v-img class="socialicons-mobile invert-color" src="../../../images/xicon.png" alt="X"></v-img>
+          </a>
+        </v-col>
 
-      <v-row style="z-index: 400;" class="social-container-mobile">
-        <h1 style="z-index: 400;" class="name-info-mobile">{{ name }}</h1>
-      </v-row>
-      <v-row class="social-container2-mobile">
-        <h1 class="occupation-info-mobile">{{ title }}</h1>
+        <v-col cols="2" sm="2" xs="3" style="margin-top: 60px; z-index: 50;" class="d-flex justify-center align-center">
+          <a href="https://www.tiktok.com/">
+            <v-img class="socialicons-mobile invert-color" src="../../../images/tiktok.png" alt="TikTok"></v-img>
+          </a>
+        </v-col>
       </v-row>
 
-      <v-col class="social-icon-group-mobile">
-        <v-row style="margin-left: 160px; margin-top: 5px; margin-bottom: 5px;">
-          <a href="https://www.facebook.com/profile.php?id=61556819217561">
-            <img class="socialicons-mobile" src="../../../images/facebookicon.png" alt="Description image 2">
-          </a>
-          <a href="https://www.facebook.com/profile.php?id=61556819217561">
-            <img class="socialicons-mobile invert-color" src="../../../images/instaicon.png" alt="Description image 2">
-          </a>
-          <a href="https://www.facebook.com/profile.php?id=61556819217561">
-            <img class="socialicons-mobile " src="../../../images/xicon.png" alt="Description image 2">
-          </a>
-          <a href="https://www.facebook.com/profile.php?id=61556819217561">
-            <img class="socialicons-mobile " src="../../../images/tiktok.png" alt="Description image 2">
-          </a>
-        </v-row>
-      </v-col>
+      <v-row class="social-container-mobile social-container-mobile-spacer">
+        <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
+          <v-row justify="center name-info-mobile">
+            <v-typography>{{ name }}</v-typography>
+          </v-row>
+        </v-col>
 
+        <v-spacer xs="12" sm="4"></v-spacer>
+
+        <v-col cols="12" xs="12" sm="4" class="d-flex justify-center">
+          <v-row justify="center name-info-mobile">
+            <v-typography>{{ title }}</v-typography>
+          </v-row>
+        </v-col>
+      </v-row>
 
       <v-row>
-        <v-container style="border-bottom-left-radius: 15px; border-bottom-right-radius: 15px;"
+        <v-container style="border-bottom-left-radius: 15px; margin-top: -12px; border-bottom-right-radius: 15px;"
           class="social-icon-group-mobile">
           <v-expansion-panels style="min-width: 320px;">
             <v-col cols="12" offset="-1">
               <v-expansion-panel class="background-pink" style="color: white;" :key="i"
                 text="mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et comprises. Et toi, quel est ton objectif pour cette année?"
-                title="À propos : Ma mission est claire :">
-
-              </v-expansion-panel>
+                title="À propos : Ma mission est claire :"></v-expansion-panel>
             </v-col>
           </v-expansion-panels>
         </v-container>
       </v-row>
-    </v-card>
+    </v-container>
+    <!-- "Mobile-End" -->
 
+    <!-- Bannière Pc -->
+    <v-row class="fluid hidden-sm-and-down" style="margin-top: -65px; position: relative; z-index: 0; "
+      hidden-sm-and-up>
+      <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 class="hidden-sm-and-down" style="background-color: #6b0065; height: 5px; box-shadow: rgba(0, 0, 0, 0.7);"
+      hidden-sm-and-up>
+    </v-row>
 
-    <!-- "Creator Core (Menu / Feed / Donation)" -->
+    <!-- "Core (Menu / Center / Donation)" -->
     <v-row>
       <!-- "Menu" -->
-      <v-col cols="2" md="3" lg="2" xl="3" xxl="3" class="hidden-sm-and-down" hidden-sm-and-down>
-
-        <v-img src="../../../images/hutopy.png" alt="Description de l'image" style="height: 150px; width: 300px;"
-          class="mx-auto" :elevation="10"></v-img>
+      <v-col cols="2" md="3" lg="4" xl="4" xxl="4" class="hidden-sm-and-down menu-col" hidden-sm-and-down>
         <v-col style="margin: 0;">
+          <v-row class="Hutopy-menu-sticky">
+            <v-spacer></v-spacer>
+            <v-col>
+              <v-container style=" overflow-y: hidden;">
+                <!-- Nav-Btn -->
+                <v-col cols="12" class="px-0">
+                  <v-img src="../../../images/hutopy.png" alt="Description de l'image"
+                    style="height: 150px; width: 300px;" class="mx-auto" :elevation="10"></v-img>
+                  <v-list dense class="main-background">
+                    <v-list-item-group>
+                      <router-link v-for="(item, index) in navigationItems" :key="index" :to="item.link">
+                        <v-btn text class="d-flex align-start align-center main-background" elevation="0"
+                          outlined="false">
+                          <v-icon left class="mr-4">{{ item.icon }}</v-icon>
+                          {{ item.text }}
+                        </v-btn>
+                      </router-link>
+                    </v-list-item-group>
+                  </v-list>
+                </v-col>
+                <!-- Tools -->
+                <v-col cols="12" class="px-0">
+                  <v-list dense class="d-flex align-start align-center main-background">
+                    <v-list-item-group>
+                      <router-link v-for="(item, index) in tools" :key="index" :to="item.link">
+                        <v-btn text class="btn-custom" elevation="0" outlined="false">
+                          <v-icon left class="mr-4">{{ item.icon }}</v-icon>
+                          {{ item.text }}
+                        </v-btn>
+                      </router-link>
+                    </v-list-item-group>
+                  </v-list>
+                </v-col>
+                <!-- Log-out -->
+                <v-col cols="12" class="px-0 logout-button">
+                  <v-btn text class="d-flex align-start main-background align-center" elevation="0" outlined="false">
+                    <v-icon left class="mr-4">mdi-logout</v-icon>
+                    Déconnexion
+                  </v-btn>
+                </v-col>
+              </v-container>
 
-
-          <v-container style=" overflow-y: hidden;">
-            <!-- Nav-Btn -->
-            <v-col cols="12" class="px-0">
-              <v-list dense class="main-background">
-                <v-list-item-group>
-                  <router-link v-for="(item, index) in navigationItems" :key="index" :to="item.link">
-                    <v-btn text class="d-flex align-start align-center main-background" elevation="0" outlined="false">
-                      <v-icon left class="mr-4">{{ item.icon }}</v-icon>
-                      {{ item.text }}
-                    </v-btn>
-                  </router-link>
-                </v-list-item-group>
-              </v-list>
             </v-col>
-            <!-- Tools -->
-            <v-col cols="12" class="px-0">
-              <v-list dense class="d-flex align-start align-center main-background">
 
-                <v-list-item-group>
-                  <router-link v-for="(item, index) in tools" :key="index" :to="item.link">
-                    <v-btn text class="btn-custom" elevation="0" outlined="false">
-                      <v-icon left class="mr-4">{{ item.icon }}</v-icon>
-                      {{ item.text }}
-                    </v-btn>
-                  </router-link>
-                </v-list-item-group>
-              </v-list>
-            </v-col>
-            <!-- Log-out -->
-            <v-col cols="12" class="px-0 logout-button">
-              <v-btn text class="d-flex align-start main-background align-center" elevation="0" outlined="false">
-                <v-icon left class="mr-4">mdi-logout</v-icon>
-                Déconnexion
-              </v-btn>
-            </v-col>
-          </v-container>
 
+          </v-row>
+
+          <v-row style="height: 1400px;"></v-row>
 
           <!-- Wallet -->
           <v-row>
@@ -172,7 +214,7 @@
                 <v-card style="border-radius: 25px; margin-top: 3%; height: 30px;">
                   <v-row>
                     <v-col style="margin-right: -2%;" cols="1"
-                      class="text-truncate text-center font-weight-bold">T#</v-col>
+                      class="text-truncate text-center font-weight-bold">#T</v-col>
                     <v-col style="margin-right: -1%; background-color: #fbccee;" cols="1"
                       class="text-truncate text-center font-weight-bold">$</v-col>
                     <v-col cols="2" class="text-truncate text-center font-weight-bold">Date</v-col>
@@ -198,10 +240,11 @@
             </v-dialog>
           </v-row>
         </v-col>
+
       </v-col>
 
       <!-- Profile Info Picture name title & description -->
-      <v-col style="z-index: 5;" cols="12" xs="12" sm="12" md="9" lg="7" xl="6" xxl="6">
+      <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 hidden-sm-and-down" hidden-md-and-up>
           <v-container>
             <v-img :src="profilePicture" class="elevation-4 mobile-profile-picture-creator"></v-img>
@@ -258,7 +301,6 @@
           </v-container>
         </v-container>
 
-
         <!-- "Card youtube" -->
         <v-container>
           <v-card class="flow-menu m-0 youtube-card">
@@ -271,7 +313,7 @@
 
                 <v-col class="text-right">
                   <v-btn class="btn-card-options" flat tile elevation="0">
-                    <v-icon style="color: rgb(11, 170, 178); font-size: 24px;">mdi-dots-vertical</v-icon>
+                    <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
                   </v-btn>
                 </v-col>
               </v-row>
@@ -284,12 +326,12 @@
             <div
               style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%; margin-bottom: -5%;">
               <v-container>
-                <iframe style="margin-left: 2.1%; width: 96%;" src="https://www.youtube.com/embed/pf95whtA_xs?start=0"
-                  title="Guillaumem" frameborder="0"
+                <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
+                  src="https://www.youtube.com/embed/pf95whtA_xs?start=0" title="Guillaumem" frameborder="0"
                   allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                   allowfullscreen></iframe>
 
-                <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1.2em">Ma mission est claire :
+                <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1em">Ma mission est claire :
                   mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une
                   histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de
                   créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que
@@ -306,7 +348,60 @@
                 </div>
 
                 <!-- Comments -->
-                <v-text-field style="margin-left: 2%;"
+                <v-text-field style="margin-left: 2%; margin-bottom: 15px;"
+                  placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
+              </v-container>
+            </div>
+          </v-card>
+        </v-container>
+
+        <v-container>
+          <v-card class="flow-menu m-0 youtube-card">
+            <v-col>
+              <v-row>
+                <v-col>
+                  <h1 class="card-title">
+                    PODCAST #01</h1>
+                </v-col>
+
+                <v-col class="text-right">
+                  <v-btn class="btn-card-options" flat tile elevation="0">
+                    <v-icon style="color: #6e6e6e; font-size: 24px;">mdi-dots-vertical</v-icon>
+                  </v-btn>
+                </v-col>
+              </v-row>
+              <v-row>
+                <h1 class="card-date">
+                  10-03-2024</h1>
+              </v-row>
+            </v-col>
+
+            <div
+              style="background-color: rgba(255, 255, 255, 0.1); margin-left: -5%; margin-right: -5%; margin-bottom: -5%;">
+              <v-container>
+                <iframe class="card-youtube" style="margin-left: 2.1%; width: 96%;"
+                  src="https://www.youtube.com/embed/pf95whtA_xs?start=0" title="Guillaumem" frameborder="0"
+                  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                  allowfullscreen></iframe>
+
+                <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1em">Ma mission est claire :
+                  mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une
+                  histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de
+                  créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que
+                  derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et
+                  comprises. Et toi, quel est ton objectif pour cette année?</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;"
                   placeholder="Commentaire (Commentaire, Aime et Partagez sont non fonctionnel pour le moment)"></v-text-field>
               </v-container>
             </div>
@@ -315,43 +410,36 @@
       </v-col>
 
       <!-- "Large-Monitor-RightCol" Donation -->
-      <v-col cols="2" md="3" lg="3" xl="3" xxl="3" class="hidden-md-and-down" hidden-md-and-up>
-        <v-container class="sticky-bottom-label" style="max-width: 400px ;  bottom: 0; z-index: 1000;">
-          <!-- Donnation -->
-          <v-card style="border-radius: 20px;">
-            <v-container>
-              <v-row class="mb-0"
-                style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
-                <v-card-title class="text-soutiens" style="margin-top: 15px;">
-                  JE SOUTIENS!
-                </v-card-title>
-              </v-row>
-              <v-spacer style="height: 20px;"></v-spacer>
-              <v-textarea style="color: #a30e79;" label="Votre message" placeholder="Écrivez votre message ici" rows="3"
-                auto-grow></v-textarea>
-              <v-text-field style="color: #a30e79;" label="Montant ($)" placeholder="Écrivez votre message ici" rows="3"
-                auto-grow></v-text-field>
-              <v-btn block class="ma-auto" style="width: 200px;">
-                <v-icon left>
-                  mdi-gift
-                </v-icon>
-                Donnez
-              </v-btn>
+      <v-col cols="2" md="3" lg="3" xl="4" xxl="4" class="hidden-sm-and-down" hidden-sm-and-up>
+        <v-row>
+          <v-col>
+            <v-container class="sticky-bottom-label Je-soutien-container" style="max-width: 400px ;  bottom: 0;">
+              <!-- Donnation -->
+              <v-card style="border-radius: 20px;">
+                <v-container>
+                  <v-row class="mb-0"
+                    style="background-color: #6b0065; margin-left: -24px; margin-right: -24px; margin-top: -20px; justify-content: center;">
+                    <v-card-title class="text-soutiens" style="margin-top: 15px;">
+                      JE SOUTIENS!
+                    </v-card-title>
+                  </v-row>
+
+                  <StripePayment></StripePayment>
+                </v-container>
+              </v-card>
             </v-container>
-          </v-card>
-        </v-container>
+            <v-container style="height: 1600px;">
+            </v-container>
+
+          </v-col>
+          <v-spacer>
+          </v-spacer>
+        </v-row>
       </v-col>
-
-
-
-
-
-
     </v-row>
 
-
     <!-- "Mobile" Donation -->
-    <v-col class="hidden-lg-and-up sticky-bottom-label" hidden-md-and-down
+    <v-col class="hidden-md-and-up sticky-bottom-label" hidden-sm-and-down
       style="background-color: #6b0065; margin-top: 30px; text-align: center;">
 
       <!-- Barre cliquable pour ouvrir le drawer -->
@@ -363,23 +451,11 @@
     </v-col>
     <template>
       <div>
-
-
-
         <!-- Drawer du bas -->
         <v-bottom-sheet v-model="drawerbottom" class="sticky-bottom-label" hide-overlay>
           <v-container style="background-color: #6b0065; color: white; padding: 20px; text-align: center;">
             <h1 class="text-soutiens">JE SOUTIENS</h1>
-            <v-textarea style="color: white;" label="Votre message" placeholder="Écrivez votre message ici" rows="2"
-              auto-grow></v-textarea>
-            <v-text-field style="color: white;" label="Montant ($)" placeholder="Écrivez votre message ici" rows="2"
-              auto-grow></v-text-field>
-            <v-btn class="mx-auto">
-              <v-icon left class="mr-4">
-                mdi-gift
-              </v-icon>
-              Donnez
-            </v-btn>
+            <StripePayment></StripePayment>
           </v-container>
         </v-bottom-sheet>
 
@@ -398,6 +474,7 @@
 <script setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
+import StripePayment from '../StripePayment.vue';
 </script>
 
 <script>
@@ -414,6 +491,7 @@ export default {
       tiktokLink: 'tiktok.com',
       drawer: false,
       drawerbottom: false,
+
       items: [
         { title: 'Item 1' },
         { title: 'Item 2' },
@@ -436,6 +514,16 @@ export default {
 
 
 <style scoped>
+.Hutopy-menu-sticky {
+  position: sticky;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  z-index: 1000;
+  margin-top: -40px;
+}
+
 .sticky-bottom-label {
   position: sticky;
   top: 0;
@@ -443,6 +531,7 @@ export default {
   left: 0;
   width: 100%;
   z-index: 1000;
+  margin-top: 20px;
 }
 
 .sticky-top-label {
@@ -457,15 +546,15 @@ export default {
 .text-soutiens {
   margin-bottom: 15px;
   color: white;
-  font-size: 2rem;
-  letter-spacing: 10px;
+  font-size: 1.5rem;
+  letter-spacing: 7px;
   text-align: center;
 }
 
 .name-info {
   margin-top: -10px;
   margin-left: 15%;
-  font-size: larger
+
 }
 
 .occupation-info {
@@ -475,8 +564,8 @@ export default {
 
 .name-info-mobile {
 
-  margin-left: 38%;
-  font-size: larger
+  margin-left: 22px;
+  font-size: 1.3rem
 }
 
 .occupation-info-mobile {
@@ -590,15 +679,17 @@ export default {
 .socialicons-mobile {
   width: 35px;
   max-width: 100px;
-  margin-top: 15px;
-  margin-left: 40px;
+  margin-top: 27px;
+  margin-left: 20px;
 }
 
-.social-icon-group-mobile {}
+
 
 .youtube-card {
   margin-left: 2%;
   margin-right: 2%;
+  border-radius: 15px;
+
 
 
   background-color: #f4f4f4;
@@ -640,12 +731,19 @@ export default {
   font-size: 1.4rem;
   font-weight: 600;
   color: white;
-  margin-top: -8%;
+
   z-index: 1000;
 
 
+  margin: auto;
+  /* Centre verticalement */
+  text-align: center;
+  /* Centre horizontalement */
+
+
 }
 
+
 .social-container2-mobile {
   background-color: #0baab2;
   z-index: 1000;
@@ -673,7 +771,7 @@ export default {
 
 
 .mobile-profile-picture-creator {
-  transform: scale(1.5) translateY(25px);
+
 
   border-radius: 100px;
   height: 150px;
@@ -681,10 +779,10 @@ export default {
 
   border-radius: 50%;
   max-width: 150px;
-  margin-left: 3%;
+
 
   border: 4px solid white;
-  z-index: 200;
+  z-index: 1000;
 }
 
 .mobile-header {
@@ -725,18 +823,38 @@ export default {
   /* 80% de la hauteur de l'écran */
 }
 
-@media (min-width: 150px) and (max-width: 599px) {
+@media (min-width: 150px) and (max-width: 474px) {
+
+  .mobile-profile-picture-creator {
+    transform: scale(1.5) translateY(-30%) translateX(0%);
+  }
+
+  .socialicons-mobile {
+    width: 35px;
+    max-width: 100px;
+    margin-top: 0px;
+    margin-left: 20px;
+  }
+
+
+}
+
+
+@media (min-width: 475px) and (max-width: 599px) {
+
+
+  .socialicons-mobile {
+    width: 35px;
+    max-width: 100px;
+    margin-top: 0px;
+    margin-left: px;
+  }
 
 
   .mobile-profile-picture-creator {
-    transform: scale(1.2) translateY(40%) translateX(7%);
+    transform: scale(1.5) translateY(-30%) translateX(0%);
   }
 
-  .profile-container {
-
-    width: 110%;
-    margin-left: -3%;
-  }
 
   .profile-container-mobile {
 
@@ -745,22 +863,31 @@ export default {
     margin-top: -112px;
   }
 
-  .name-info {
-    font-size: 1.2rem;
-  }
+
 
   .occupation-info {
     font-size: 1rem;
   }
 
+  .card-youtube {
+    min-height: 250px;
+  }
+
+
+  .name-info-mobile {
+    font-size: 1.6rem;
+  }
+
+
 }
 
 
 
 
 @media (min-width: 599px) and (max-width: 749px) {
+
   .mobile-profile-picture-creator {
-    transform: scale(1.2) translateY(40%) translateX(7%);
+    transform: scale(1.5) translateY(25%) translateX(0%);
   }
 
   .profile-container {
@@ -784,12 +911,19 @@ export default {
     font-size: 1rem;
   }
 
+  .card-youtube {
+    min-height: 330px;
+  }
+
+
+
+
 }
 
 
 @media (min-width: 750px) and (max-width: 960px) {
   .mobile-profile-picture-creator {
-    transform: scale(1.2) translateY(40%) translateX(7%);
+    transform: scale(1.8) translateY(25%) translateX(0%);
   }
 
   .profile-container {
@@ -813,17 +947,80 @@ export default {
     font-size: 1rem;
   }
 
+  .card-youtube {
+    min-height: 425px;
+  }
+
 }
 
-@media (min-width: 959px) and (max-width: 1280px) {
+@media (min-width: 960px) and (max-width: 1280px) {
 
+  .middle-col {
+    margin-left: -30px;
+  }
 
+  .text-soutiens {
+    font-size: 1.2rem;
+    letter-spacing: 5px;
+
+  }
 
 
   .profile-container {
-    margin-top: -16%;
+    margin-top: -185px;
+    min-width: 480px
+  }
+
+  .card-youtube {
+    min-height: 270px;
+  }
+
+  .Je-soutien-container {
+    min-width: 325px;
+    margin-left: -35px;
 
   }
+
+
+  .mobile-profile-picture-creator {
+    transform: scale(1.3) translateY(25%) translateX(-50px);
+  }
+
+
+
+  .name-info {
+    font-size: 1.2rem;
+    margin-left: 20px;
+    margin-top: -6px
+  }
+
+  .occupation-info {
+
+    margin-left: 40px;
+    margin-top: -8px
+  }
+
+  .social-container {
+    margin-left: 80px;
+    min-width: 270px;
+    max-height: 40px
+  }
+
+
+  .social-container2 {
+
+    margin-left: 50px;
+    min-width: 250px;
+    max-height: 35px
+  }
+
+  .socialicons {
+    width: 34px;
+    max-width: 100px;
+    margin-top: 15px;
+    margin-left: 25px;
+  }
+
 }
 
 
@@ -834,42 +1031,219 @@ export default {
   }
 
   .mobile-profile-picture-creator {
-    transform: scale(1.2) translateY(25px) translateX(-8px);
+    transform: scale(1.3) translateY(25%) translateX(-50px);
   }
 
   .profile-container {
-    margin-top: -25%;
+    margin-top: -180px;
 
   }
 
+  .card-youtube {
+    min-height: 290px;
+  }
+
+  .menu-col {
+    margin-left: -4%;
+  }
+
+  .Je-soutien-container {
+    min-width: 350px;
+  }
+
+
+  .name-info {
+    font-size: 1.2rem;
+    margin-left: 20px;
+    margin-top: -6px
+  }
+
+  .social-container {
+    margin-left: 90px;
+    min-width: 350;
+    max-height: 40px
+  }
+
+
+  .occupation-info {
+
+    margin-left: 70px;
+    margin-top: -8px
+  }
+
+
+
+  .social-container2 {
+
+    margin-left: 40px;
+    min-width: 290px;
+    max-height: 35px
+  }
+
+  .socialicons {
+    width: 34px;
+    max-width: 100px;
+    margin-top: 15px;
+    margin-left: 25px;
+  }
+
 }
 
 
 @media (min-width: 1600px) and (max-width: 1919px) {
   .text-soutiens {
-    font-size: 1.5rem;
+    font-size: 1.3rem;
+
   }
 
   .mobile-profile-picture-creator {
-    transform: scale(1.3) translateY(25px) translateX(-5px);
+    transform: scale(1.4) translateY(25%) translateX(-40px);
   }
 
   .profile-container {
-    margin-top: -20%;
+    margin-top: -171px;
 
   }
+
+  .card-youtube {
+    min-height: 355px;
+  }
+
+  .menu-col {
+    margin-left: -4%;
+  }
+
+  .Je-soutien-container {
+    min-width: 400px;
+  }
+
+  .name-info {
+    font-size: 1.5rem;
+    margin-top: -4px;
+    margin-left: 35px;
+
+
+  }
+
+  .occupation-info {
+    font-size: 1.3rem;
+    margin-left: 75px;
+    margin-top: -2px
+  }
+
+
+
+  .social-container2 {
+
+    margin-left: 70px;
+    min-width: 300px;
+
+
+
+  }
+
+
 }
 
 @media (min-width: 1920px) and (max-width: 2559px) {
   .text-soutiens {
-    font-size: 1.5rem;
+    font-size: 1.3rem;
+
   }
 
   .profile-container {
-    margin-top: -12%;
+    margin-top: -160px;
 
   }
+
+  .card-youtube {
+    min-height: 380px;
+  }
+
+  .Je-soutien-container {
+    min-width: 400px;
+  }
+
+  .mobile-profile-picture-creator {
+    transform: scale(1.4) translateY(25%) translateX(-40px);
+  }
+
+  .name-info {
+    font-size: 1.5rem;
+    margin-left: 35px;
+    margin-top: -4px;
+  }
+
+  .social-container {
+    margin-left: 100px;
+
+  }
+
+  .occupation-info {
+    font-size: 1.3rem;
+    margin-left: 110px;
+    margin-top: -4px
+  }
+
+
+
+  .social-container2 {
+
+    margin-left: 30px;
+    min-width: 360px;
+
+  }
+
+  .socialicons {
+    width: 38px;
+    max-width: 100px;
+    margin-top: 13px;
+    margin-left: 40px;
+  }
+
+
 }
 
-@media (min-width: 2559px) {}
-</style>
+@media (min-width: 2560px) {
+  .mobile-profile-picture-creator {
+    transform: scale(1.5) translateY(25%) translateX(-20px);
+  }
+
+
+  .card-youtube {
+    min-height: 380px;
+  }
+
+  .text-soutiens {
+    font-size: 1.5rem;
+  }
+
+  .name-info {
+    font-size: 2rem;
+
+  }
+
+  .social-container {
+    margin-left: 140px;
+  }
+
+  .social-container2 {
+    margin-left: 130px;
+  }
+
+  .occupation-info {
+    font-size: 1.5rem;
+    margin-left: 65px;
+    margin-top: -6px
+  }
+
+  .socialicons {
+    width: 45px;
+    max-width: 100px;
+    margin-top: 15px;
+    margin-left: 40px;
+  }
+
+
+}
+</style>
\ No newline at end of file