Add CTA design #1 - Need to be connected

src/App.vue

@@ -17,7 +17,7 @@
 
         <div class="flex flex-col  w-full" style="background-color: #f4f4f4">
           <RouterView></RouterView>
-          <Footer></Footer>
+<!--          <Footer></Footer>-->
         </div>
       </div>
     </div>

src/router/router.js

@@ -23,9 +23,15 @@ import {useAuthStore} from "@/stores/authStore.js";
 import ForYouPage from "@/views/profile/ForYouPage.vue";
 import CreatorPresentation from "@/views/creators/CreatorPresentation.vue";
 import CreatorExclusiveContent from "@/views/creators/CreatorExclusiveContent.vue";
+import CTA01 from "@/views/CTA01.vue";
 
 
 const routes = [
+    {
+        path: '/CTA01',
+        component: CTA01,
+        meta: { hideSideBar: true }
+    },
     {
         path: '/',
         component: Home,

src/views/CTA01.vue

@@ -0,0 +1,134 @@
+<template>
+  
+<!--  lg et xl-->
+  <div class="hidden lg:block xl:block background-container-lg">
+    <img src="/images/hutopymedia/banners/hutopy.png" alt="Image bgwhite" class="block mx-auto max-w-[500px] mt-15"/>
+    <div class="flex flex-row space-x-3.5 justify-center py-15">
+           <div class="flex flex-column max-w-[500px]">
+        <img src="/images/hutopymedia/others/ctaappdemo.png" alt="Image bgwhite" class="max-w-[500px]"/>
+      </div>
+      <div class="flex flex-column space-y-16 max-w-[475px] ma-12 text-justify">
+        <h1 class="font-bold text-4xl font-serif">Monétisez votre contenu à sa vraie valeur.</h1>
+
+        <p>Nous créons une plateforme qui vous rémunère équitablement et vous aide à évoluer comme créateur. Rejoignez-nous et participez au prototype !</p>
+
+        <div class="flex flex-col items-center">
+          <!-- Boîte pour courriel et bouton Participez -->
+          <div class="flex items-center space-x-2 w-full">
+            <v-text-field
+                v-model="email"
+                label="Votre courriel"
+                variant="outlined"
+                type="email"
+                placeholder="Votre courriel"
+                class="w-full mt-6"
+            />
+            <v-btn class="text-white " height="60px" style="border-radius: 8px; background-color: #9F2E8D;">
+              Participez
+            </v-btn>
+          </div>
+        </div>
+
+
+
+      </div>
+    </div>
+
+    <div class="min-h-[170px] border-t-[4px] p-8 flex justify-center text-3xl text-white" style="background-color: #9F2E8D; border-color: #23393B;">
+
+      <div class="flex flex-row space-x-[250px]">
+        <a href="https://www.facebook.com/Hutopy" target="_blank" aria-label="Facebook" class="hover:scale-125 transition-transform duration-300">
+          <v-icon>mdi-facebook</v-icon>
+        </a>
+        <a href="https://www.instagram.com/hutopy.inc/" target="_blank" aria-label="Instagram" class="hover:scale-125 transition-transform duration-300">
+          <v-icon>mdi-instagram</v-icon>
+        </a>
+        <a href="https://x.com/Hutopyinc" target="_blank" aria-label="X" class="hover:scale-125 transition-transform duration-300">
+          <img src="/images/hutopymedia/icons/x.svg" alt="X" class="h-10 w-10 invert">
+        </a>
+      </div>
+
+    </div>
+     </div>
+
+  
+<!--  md et plus petit-->
+  <div class="background-container-md block lg:hidden xl:hidden mt-10">
+    <img src="/images/hutopymedia/banners/hutopy.png" alt="Image bgwhite" class="block mx-auto max-w-[400px]"/>
+  
+      <div class="max-w-[400px] mx-auto py-5">
+        <img src="/images/hutopymedia/others/ctaappdemo.png" alt="Image bgwhite"/>
+      </div>
+      <div class="text-justify  px-10">
+        <h1 class="font-bold text-3xl font-serif hyphenated-text mb-10">Monétisez votre contenu à sa vraie valeur.</h1>
+
+       
+          
+          <v-text-field
+              v-model="email"
+              label="Votre courriel"
+              variant="outlined"
+              type="email"
+              placeholder="Votre courriel"
+              class="w-full"
+              density="compact"
+          />
+        <v-btn class="text-white w-100" height="100px" style=" border-radius: 8px; background-color: #9F2E8D; font-size: 24px;">
+          Participez
+        </v-btn>
+
+
+
+        <p class="py-15">Nous créons une plateforme qui vous rémunère équitablement et vous aide à évoluer comme créateur. Rejoignez-nous et participez au prototype !</p>
+
+        <!-- Boîte pour courriel et bouton Participez -->
+    
+
+      </div>
+  
+
+    <div class="min-h-[170px] border-t-[4px] p-8 flex justify-center text-3xl text-white" style="background-color: #9F2E8D; border-color: #23393B;">
+
+      <div class="flex flex-row space-x-[100px]">
+        <a href="https://www.facebook.com/Hutopy" target="_blank" aria-label="Facebook" class="hover:scale-125 transition-transform duration-300">
+          <v-icon>mdi-facebook</v-icon>
+        </a>
+        <a href="https://www.instagram.com/hutopy.inc/" target="_blank" aria-label="Instagram" class="hover:scale-125 transition-transform duration-300">
+          <v-icon>mdi-instagram</v-icon>
+        </a>
+        <a href="https://x.com/Hutopyinc" target="_blank" aria-label="X" class="hover:scale-125 transition-transform duration-300">
+          <img src="/images/hutopymedia/icons/x.svg" alt="X" class="h-10 w-10 invert">
+        </a>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.background-container-lg {
+  width: 100%;
+  height: 100%;
+
+  background-image: url('/images/hutopymedia/others/ctabgwhite.png');
+  background-size: cover;
+  background-position: center;
+}
+
+.background-container-md {
+  width: 100%;
+  height: 100%;
+
+  max-height: 1600px;
+  background-image: url('/images/hutopymedia/others/ctabgwhite.png');
+  background-size: cover;
+  background-position: center;
+}
+
+.hyphenated-text {
+  text-align: justify;
+  hyphens: auto;
+}
+</style>
+<script setup lang="ts">
+</script>