Template update

src/layouts/Profile.vue

@@ -0,0 +1,41 @@
+<template>
+
+
+    <div class="md:flex hidden items-center justify-between flex-col">
+
+    </div>
+
+
+
+
+
+    <div class="md:hidden flex flex-col items-center justify-center">
+        <v-container class=" footer-donate-container">
+
+            <h1 style="text-align: center; color: rgb(107, 0, 101); margin-bottom: 4%;"> ENCOURAGEZ-MOI </h1>
+
+
+            <v-text-field label="Montant"
+                style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
+
+            <v-text-field label="Message"
+                style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
+
+            <v-btn style="margin-bottom: 3px; background-color: rgb(163, 14, 121); color: white;" rounded="xl"
+                size="x-large" block>Faire un don</v-btn>
+
+        </v-container>
+    </div>
+</template>
+
+
+
+
+
+<style>
+.footer-donate-container {
+
+    background-color: rgb(255, 255, 255);
+
+}
+</style>

src/views/main/CreatorFolio.vue

@@ -1,15 +1,24 @@
 <template>
-
-
   <DefaultLayout></DefaultLayout>
+  <v-container class="image-container" style="margin-top: -6%;">
+    <img src="../../../images/guillaimeaime2x.png" alt="" class="image-banner">
+  </v-container>
+
+  <v-container>
+    <img src="../../../images/guillaume.png" class="image-profile">
+  </v-container>
+
+
+
 
-  <CreatorHeader></CreatorHeader>
 
   <!-- PC-->
   <div class="md:flex hidden items-center justify-between flex-col">
 
+
+
     <v-container fluid class="menu-creator-position donate-menu">
-      <v-row>
+      <v-row class="d-flex justify-center"> <!-- Centrer les rangées -->
         <v-col cols="3" class="d-flex" style="justify-content: end;">
           <!-- Menu à gauche -->
           <v-card class="label-paiement-color"
@@ -41,47 +50,137 @@
 
         </v-col>
 
-
         <!-- Center -->
         <v-col cols="6" class="d-flex flex-column justify-center" style="max-width: 1400px;">
           <!-- Premier composant -->
-          <v-card class="flow-menu"
+
+
+
+
+          <v-card class="flow-menu m-0"
             style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%;">
-            <v-card-text class="color">
+
+            <div class="card-header"> <!-- Div pour l'en-tête de la carte -->
+              <v-col>
+                <h1 class="text-center"
+                  style="color: rgb(255, 255, 255); margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
+                  MA MISSION</h1>
+              </v-col>
+
+              <v-col>
+                <h1 style=" color: rgb(255, 255, 255);margin-top: 5%; margin-left: 10%;" class="card-date text-left">
+                  10-03-2024</h1>
+              </v-col>
+
+              <v-col style="margin-right: 1%;" class="text-right">
+                <v-btn dense icon color="white" style="margin-right: 5px;"><v-icon
+                    style="color: rgb(163, 14, 121);">mdi-pencil</v-icon></v-btn>
+              </v-col>
+            </div>
+
+            <div
+              style="background-color: rgba(255, 255, 255, 0.1); margin-left: -4%; margin-right: -4%; margin-bottom: -5%;">
               <v-container>
-                <h1 style="margin-top: 25px;" class="h1profilemobile">MA MISSION</h1>
+
-                <h1 class="card-date" style="margin-bottom: 4%; text-align: right; margin-right: 5%;">10-03-2024
+                <v-img style="margin-top: -2%;" src="../../../images/guillaumepublication.jpg"></v-img>
-                </h1>
+                <p class="text-justify pa-10" style="margin-bottom: -3%; font-size: 1.2em">Ma mission est claire :
-                <v-img src="../../../images/guillaumepublication.jpg"></v-img>
+                  mettre en lumière le côté humain des entrepreneurs. Chaque service, chaque produit est porteur d’une
-                <p class="text-justify pa-4" style="font-size: 1.2em">Ma mission est claire : mettre en lumière le
+                  histoire, d’une passion, d’une vision unique. Mon objectif est de faire rayonner cette unicité, de
-                  côté
+                  créer des connexions authentiques entre ces entrepreneurs et leurs clients potentiels. Parce que
-                  humain des entrepreneurs. Chaque service, chaque produit est porteur d’une histoire, d’une passion,
+                  derrière chaque entreprise, il y a des personnes inspirantes qui méritent d’être entendues et
-                  d’une vision unique. Mon objectif est de faire rayonner cette unicité, de créer des connexions
+                  comprises. Et toi, quel est ton objectif pour cette année?</p>
-                  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,
+                <div
-                  quel
+                  style="margin-bottom: 5%; background-color: rgba(163, 14, 121, 1); height: 3px; width: 100%; margin-top: 20px;">
-                  est ton objectif pour cette année?</p>
+                </div>
+
+                <div style="background-color: rgba(163, 14, 121, 1); height: 3px; width: 100%; margin-top: 20px;"></div>
+
               </v-container>
-            </v-card-text>
+            </div>
+
           </v-card>
 
-          <!-- Deuxième composant -->
-          <v-card class="flow-menu" style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto;">
-            <h1 style="margin-top: 25px;" class="h1profilemobile">PODCAST #01</h1>
-            <h1 class="card-date" style="align-items: center; margin-bottom: 4%; text-align: right; margin-right: 5%;">
-              10-03-2024 </h1>
-            <v-container style="height: 700px;">
-              <iframe width="100%" height="100%"
-                src="https://www.youtube.com/embed/CDlj1IUhBqg?si=ot1YPBMKbmviOXvD"></iframe>
-            </v-container>
 
-            <p class="text-justify pa-4" style="font-size: 1.2em">Voici mon nouveau podcast!</p>
+          <v-card class="flow-menu m-0"
+            style="max-width: 1200px; min-width: 800px; width: 80%; margin: auto; margin-bottom: 5%;">
+
+            <div class="card-header"> <!-- Div pour l'en-tête de la carte -->
+              <v-col>
+                <h1 class="text-center"
+                  style="color: rgb(255, 255, 255); margin-left: 15%; font-size: 2rem; display: flex; align-items: center;">
+                  PODCAST #01</h1>
+              </v-col>
+
+              <v-col>
+                <h1 style=" color: rgb(255, 255, 255);margin-top: 5%; margin-left: 10%;" class="card-date text-left">
+                  16-03-2024</h1>
+              </v-col>
+
+              <v-col style="margin-right: 1%;" class="text-right">
+                <v-btn dense icon color="white" style="margin-right: 5px;"><v-icon
+                    style="color: rgb(163, 14, 121);">mdi-pencil</v-icon></v-btn>
+              </v-col>
+            </div>
+
+            <div
+              style="background-color: rgba(255, 255, 255, 0.1); margin-left: -4%; margin-right: -4%; margin-bottom: -5%;">
+              <v-container>
+                <v-container style="height: 700px; margin-top: -3%;">
+                  <iframe width="100%" height="100%"
+                    src="https://www.youtube.com/embed/CDlj1IUhBqg?si=ot1YPBMKbmviOXvD"></iframe>
+                </v-container>
+
+                <p class="text-justify pa-10" style="margin-top: -5%; font-size: 1.2em">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>
+
+
+              </v-container>
+            </div>
+
           </v-card>
+
+
         </v-col>
 
 
-        <v-col cols="3" class="d-flex justify-end">
+        <v-col cols="3" class="d-flex justify-start">
           <!-- Menu à droite -->
+          <v-col cols="3" class="d-flex" style="justify-content: start;">
+            <!-- Menu à gauche -->
+            <v-card class="label-paiement-color"
+              style="max-width: 75%; max-height: 350px; min-width: 340px; position: sticky; top: 0;">
+              <v-card-text>
+                <v-container>
+                  <v-row>
+                    <v-col>
+                      <h1 class="tips-h1">ENCOURAGEZ-MOI</h1>
+                    </v-col>
+                  </v-row>
+                  <v-row>
+                    <v-col>
+                      <v-sheet class="mx-auto" width="250">
+                        <v-form @submit.prevent>
+                          <v-text-field label="Montant ($)"
+                            style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
+                          <v-text-field label="Message"
+                            style="color: rgb(107, 0, 101); background-color: rgb(255, 255, 255);"></v-text-field>
+                          <v-btn style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
+                            class="mt-4" block>Envoyez</v-btn>
+                        </v-form>
+                      </v-sheet>
+                    </v-col>
+                  </v-row>
+                </v-container>
+              </v-card-text>
+            </v-card>
+
+          </v-col>
+
           <!-- Ajoutez ici votre menu de droite -->
         </v-col>
       </v-row>
@@ -90,6 +189,7 @@
     </v-container>
 
 
+
   </div>
 
 
@@ -154,7 +254,7 @@
 <script setup>
 import DefaultLayout from '@/layouts/DefaultLayout.vue';
 import FooterLayout from '@/layouts/FooterLayout.vue';
-import CreatorHeader from '@/layouts/CreatorHeader.vue';
+
 
 import SimpleVideoCard from '@/layouts/SimpleVideoCard.vue';
 
@@ -171,6 +271,27 @@ export default {
 </script>
 
 <style scoped>
+/*Banner */
+.image-container {
+  width: 100%;
+  overflow: hidden;
+}
+
+.image-banner {
+  width: 100%;
+  clip-path: polygon(0 20%, 100% 20%, 100% 80%, 0 80%);
+}
+
+/*Profile*/
+
+.image-profile {
+  border-radius: 50%;
+}
+
+
+
+
+
 .sticky-column {
   position: sticky;
   top: 0;
@@ -183,7 +304,7 @@ export default {
 }
 
 .label-paiement-color {
-  color: rgba(163, 14, 121, 0.85);
+  color: rgba(163, 14, 121, 0.5);
   /* Couleur du texte (utilisez la couleur souhaitée) */
   background-color: rgba(255, 255, 255, 0.2);
   /* Couleur de fond */
@@ -192,7 +313,18 @@ export default {
 
 }
 
+.card-header {
+  background-color: rgba(163, 14, 121, 1);
+  /* Couleur de l'en-tête */
+  padding: 10px;
+  /* Marge intérieure */
+  display: flex;
+  /* Utilisation de flexbox */
+  justify-content: space-between;
+  /* Alignement des éléments sur l'en-tête */
+  margin: 0 -24px 0;
 
+}
 
 .tips-h1 {
   text-align: center;