jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add CTA design #1 - Need to be connected

Browse Source
This commit is contained in:
PascalMarchesseault
2024-10-01 18:13:48 -04:00
parent b3fec80607
commit e5629779f0
6 changed files with 141 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/images/hutopymedia/others/ctaappdemo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 806 KiB

BIN
public/images/hutopymedia/others/ctabg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.8 MiB

BIN
public/images/hutopymedia/others/ctabgwhite.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 MiB

2
src/App.vue
View File

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

6
src/router/router.js
View File

@@ -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,

134
src/views/CTA01.vue Normal file
View File

@@ -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>