Reworking the layouts to allow for the new design
This commit is contained in:
@@ -1,9 +1,85 @@
|
||||
<template>
|
||||
|
||||
<footer>
|
||||
<div class="p-4 text-center font-sans">
|
||||
<script setup>
|
||||
import XIcon from '@/assets/icons/x.svg'
|
||||
import FacebookIcon from '@/assets/icons/facebook.svg'
|
||||
import InstagramIcon from '@/assets/icons/instagram.svg'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
||||
<footer class="py-8 flex flex-col gap-8">
|
||||
|
||||
<div class="flex justify-center">
|
||||
<router-link to="/">
|
||||
<img src="/images/hutopymedia/banners/hutopy.png" alt="hutopy"
|
||||
width="300px"
|
||||
height="64px">
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row justify-center gap-10">
|
||||
<a href="https://www.facebook.com/profile.php?id=61556819217561">
|
||||
<facebook-icon class="icon"></facebook-icon>
|
||||
</a>
|
||||
|
||||
<a href="https://www.instagram.com/hutopy.inc/">
|
||||
<instagram-icon class="icon"></instagram-icon>
|
||||
</a>
|
||||
|
||||
<a href="https://x.com/Hutopyinc/">
|
||||
<x-icon class="icon"></x-icon>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row flex-wrap justify-center gap-4">
|
||||
<router-link to="/helpandcontact">
|
||||
Aide & Contact
|
||||
</router-link>
|
||||
<router-link to="/faq">
|
||||
FAQ
|
||||
</router-link>
|
||||
<router-link to="/guideforcreators">
|
||||
Guide pour les créateurs
|
||||
</router-link>
|
||||
<router-link to="/termsandconditions">
|
||||
Termes et Conditions
|
||||
</router-link>
|
||||
<router-link to="/contentpolicy">
|
||||
Politique de Contenu
|
||||
</router-link>
|
||||
<router-link to="/about">
|
||||
À Propos
|
||||
</router-link>
|
||||
<router-link to="/pricing">
|
||||
Frais
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center base-text">
|
||||
Hutopy ©{{ new Date().getFullYear() }} - {{ $t('footer.allRightsReserved') }}
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
fill: #6a0065;
|
||||
}
|
||||
|
||||
.base-text {
|
||||
@apply text-gray-600 tracking-widest font-sans text-sm uppercase
|
||||
}
|
||||
|
||||
a {
|
||||
@apply base-text
|
||||
}
|
||||
|
||||
a:hover {
|
||||
@apply text-gray-400
|
||||
}
|
||||
|
||||
</style>
|
||||
@@ -1,41 +1,51 @@
|
||||
<template>
|
||||
<div class="bg-gray-100">
|
||||
<div class="bg-gray-100">
|
||||
<div class="py-6">
|
||||
<div class=" mx-auto flex justify-center">
|
||||
<img src="/images/hutopymedia/banners/hutopy.png" alt="Hutopy Logo" class="h-24">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mx-auto flex justify-center pt-10 max-w-[980px]">
|
||||
<img src="/images/hutopymedia/homepage/bannierehomepage.png" alt="Create CallToAction" class="max-w-full block rounded-none md:rounded-2xl">
|
||||
<img src="/images/hutopymedia/homepage/bannierehomepage.png" alt="Create CallToAction"
|
||||
class="max-w-full block rounded-none md:rounded-2xl">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="mx-auto flex flex-col md:flex-row justify-center max-w-[1000px] space-y-2 md:space-x-4 md:space-y-0 py-5">
|
||||
<div>
|
||||
<div
|
||||
class="mx-auto flex flex-col md:flex-row justify-center max-w-[1000px] space-y-2 md:space-x-4 md:space-y-0 py-5">
|
||||
<div class="relative group w-full max-w-[250px] md:max-w-[306px] rounded-2xl overflow-hidden mx-auto">
|
||||
<img src="/images/hutopymedia/homepage/creer.png" alt="Create CallToAction" class="w-full rounded-2xl">
|
||||
<div class="absolute inset-0 bg-fuchsia-600 bg-opacity-0 group-hover:bg-opacity-80 flex items-center justify-center transition duration-300">
|
||||
<div
|
||||
class="absolute inset-0 bg-fuchsia-600 bg-opacity-0 group-hover:bg-opacity-80 flex items-center justify-center transition duration-300">
|
||||
<p class="text-white text-lg opacity-0 group-hover:opacity-100 transition duration-300 m-3 text-justify">
|
||||
Libérez votre créativité sur Hutopy, où chaque idée trouve sa place et chaque créateur détient la clé d'un monde rempli de possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.
|
||||
Libérez votre créativité sur Hutopy, où chaque idée trouve sa place et chaque créateur détient la clé d'un
|
||||
monde rempli de possibilités infinies. Rejoignez-nous et transformez votre passion en réalité.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative group w-full max-w-[250px] md:max-w-[306px] rounded-2xl overflow-hidden mx-auto">
|
||||
<img src="/images/hutopymedia/homepage/partager.png" alt="Share CallToAction" class="w-full rounded-2xl">
|
||||
<div class="absolute inset-0 bg-fuchsia-600 bg-opacity-0 group-hover:bg-opacity-80 flex items-center justify-center transition duration-300">
|
||||
<div
|
||||
class="absolute inset-0 bg-fuchsia-600 bg-opacity-0 group-hover:bg-opacity-80 flex items-center justify-center transition duration-300">
|
||||
<p class="text-white text-lg opacity-0 group-hover:opacity-100 transition duration-300 m-3 text-justify">
|
||||
Plongez dans l'univers Hutopy et découvrez un espace où profiter rime avec s'enrichir. Savourez des contenus uniques, des interactions authentiques et une expérience personnalisée conçue pour éveiller vos sens et enrichir votre quotidien.
|
||||
Plongez dans l'univers Hutopy et découvrez un espace où profiter rime avec s'enrichir. Savourez des contenus
|
||||
uniques, des interactions authentiques et une expérience personnalisée conçue pour éveiller vos sens et
|
||||
enrichir votre quotidien.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="relative group w-full max-w-[250px] md:max-w-[306px] rounded-2xl overflow-hidden mx-auto">
|
||||
<img src="/images/hutopymedia/homepage/inspirer.png" alt="Inspire CallToAction" class="w-full rounded-2xl">
|
||||
<div class="absolute inset-0 bg-fuchsia-600 bg-opacity-0 group-hover:bg-opacity-80 flex items-center justify-center transition duration-300">
|
||||
<div
|
||||
class="absolute inset-0 bg-fuchsia-600 bg-opacity-0 group-hover:bg-opacity-80 flex items-center justify-center transition duration-300">
|
||||
<p class="text-white text-lg opacity-0 group-hover:opacity-100 transition duration-300 m-3 text-justify">
|
||||
Devenez une source d'inspiration sur Hutopy, en partageant votre vision, votre talent et vos histoires. Influencez positivement la communauté, éveillez la curiosité et inspirez les autres à poursuivre leurs rêves dans un cercle vertueux de créativité et d'inspiration.
|
||||
Devenez une source d'inspiration sur Hutopy, en partageant votre vision, votre talent et vos histoires.
|
||||
Influencez positivement la communauté, éveillez la curiosité et inspirez les autres à poursuivre leurs rêves
|
||||
dans un cercle vertueux de créativité et d'inspiration.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@@ -43,7 +53,7 @@
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
|
||||
<!-- Main Content Section -->
|
||||
<div class="max-w-4xl mx-auto px-6 py-8 space-y-6">
|
||||
<img src="/images/hutopymedia/homepage/votrehutopy.png" alt="YourHutopy" class="mx-auto mb-8">
|
||||
@@ -84,43 +94,39 @@
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div class="flex justify-center items-center">
|
||||
<RouterLink to="/@Hutopy">
|
||||
<img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile02.png" alt="Profile Image" class="rounded-2xl shadow-lg">
|
||||
<img src="/images/usersmedia/HutopyProfile/profilepictures/profileHutopyProfile02.png" alt="Profile Image"
|
||||
class="rounded-2xl shadow-lg">
|
||||
</RouterLink>
|
||||
</div>
|
||||
<div class="flex justify-center items-center">
|
||||
<RouterLink to="/@guillaumem">
|
||||
<img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.jpg" alt="Profile Image" class="rounded-2xl shadow-lg">
|
||||
<img src="/images/usersmedia/guillaumeMousseau/profilepictures/profileGuillaumeMousseau01.jpg"
|
||||
alt="Profile Image" class="rounded-2xl shadow-lg">
|
||||
</RouterLink>
|
||||
</div>
|
||||
<div class="flex justify-center items-center">
|
||||
<RouterLink to="/@chloebeaugrand">
|
||||
<img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png" alt="Profile Image" class="rounded-2xl shadow-lg">
|
||||
<img src="/images/usersmedia/chloebeaugrand/profilepictures/profileChloeBeaugrand02.png"
|
||||
alt="Profile Image" class="rounded-2xl shadow-lg">
|
||||
</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center">
|
||||
|
||||
|
||||
<RouterLink to="/browse">
|
||||
<v-btn variant="tonal" density="default" class="mb-2 w-full">
|
||||
Découvre les autres créateurs
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<selected-footer></selected-footer>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import SelectedFooter from "@/views/main/SelectedFooter.vue";
|
||||
</script>
|
||||
|
||||
<RouterLink to="/browse">
|
||||
<v-btn variant="tonal" density="default" class="mb-2 w-full">
|
||||
Découvre les autres créateurs
|
||||
</v-btn>
|
||||
</RouterLink>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
|
||||
@@ -10,14 +10,10 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<selected-footer></selected-footer>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import SelectedFooter from "@/views/main/SelectedFooter.vue";
|
||||
import RegisterForm from "@/views/main/RegisterForm.vue";
|
||||
import { useRouter } from 'vue-router';
|
||||
const router = useRouter();
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
@@ -1,55 +0,0 @@
|
||||
<template>
|
||||
<div class="flex justify-center items-center max-w-[300px] pt-28 mx-auto">
|
||||
<router-link to="/">
|
||||
<img src="/images/hutopymedia/banners/hutopy.png" alt="hutopy">
|
||||
</router-link>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row justify-center space-x-10 py-10">
|
||||
<a href="https://www.facebook.com/profile.php?id=61556819217561">
|
||||
<v-icon size="40px" class="text-fuchsia-900">mdi-facebook</v-icon>
|
||||
</a>
|
||||
|
||||
<a href="https://www.instagram.com/hutopy.inc/">
|
||||
<v-icon size="40px" class="text-fuchsia-900">mdi-instagram</v-icon>
|
||||
</a>
|
||||
|
||||
<a href="https://x.com/Hutopyinc/">
|
||||
<img src="/images/hutopymedia/icons/x.svg" width="34px" height="34px" class="mt-1 filter-fushia ">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-row flex-wrap justify-center space-x-2 py-2 pb-6">
|
||||
<router-link to="/helpandcontact">
|
||||
<v-btn variant="plain"> Aide & Contact</v-btn>
|
||||
</router-link>
|
||||
<router-link to="/faq">
|
||||
<v-btn variant="plain"> FAQ</v-btn>
|
||||
</router-link>
|
||||
<router-link to="/guideforcreators">
|
||||
<v-btn variant="plain"> Guide pour les créateurs</v-btn>
|
||||
</router-link>
|
||||
<router-link to="/termsandconditions">
|
||||
<v-btn variant="plain">Termes et Conditions </v-btn>
|
||||
</router-link>
|
||||
<router-link to="/contentpolicy">
|
||||
<v-btn variant="plain"> Politique de Contenu </v-btn>
|
||||
</router-link>
|
||||
<router-link to="/about">
|
||||
<v-btn variant="plain"> À Propos</v-btn>
|
||||
</router-link>
|
||||
<router-link to="/pricing">
|
||||
<v-btn variant="plain"> Frais</v-btn>
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.filter-fushia{
|
||||
filter: invert(14%) sepia(60%) saturate(4103%) hue-rotate(285deg) brightness(84%) contrast(93%);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,12 +1,11 @@
|
||||
<script setup>
|
||||
import SiteMenu from "@/views/main/SiteMenu.vue";
|
||||
import SubscriptionList from "@/views/creators/SubscriptionList.vue";
|
||||
import { useAuthStore } from "@/stores/authStore.js";
|
||||
import { useRouter } from 'vue-router';
|
||||
import { ref } from "vue";
|
||||
import { useI18n } from 'vue-i18n';
|
||||
import {useAuthStore} from "@/stores/authStore.js";
|
||||
import {useRouter} from 'vue-router';
|
||||
import {ref} from "vue";
|
||||
import {useI18n} from 'vue-i18n';
|
||||
|
||||
const { locale } = useI18n();
|
||||
const {locale} = useI18n();
|
||||
const router = useRouter();
|
||||
const selectedLanguage = ref(locale.value);
|
||||
|
||||
@@ -37,14 +36,12 @@ initializeLocale();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<nav class="flex flex-col h-full overflow-y-auto custom-scrollbar">
|
||||
<div class="mt-16"></div>
|
||||
|
||||
|
||||
<nav class="flex flex-col h-full overflow-y-auto custom-scrollbar bg-white">
|
||||
|
||||
<div class="flex justify-center py-3">
|
||||
<v-btn v-if="authStore.isAuthenticated" variant="plain" class="p-8" @click="feedHandler">
|
||||
<img src="/images/hutopymedia/icons/feedfollow.svg" alt="feed follow icon"
|
||||
style="filter: invert(0.5) brightness(0.0); width: 32px; height: 32px;" />
|
||||
style="filter: invert(0.5) brightness(0.0); width: 32px; height: 32px;"/>
|
||||
</v-btn>
|
||||
<v-btn variant="plain" class="p-8" @click="explorerHandler">
|
||||
<v-icon style="font-size: 28px;">mdi-earth</v-icon>
|
||||
@@ -61,25 +58,21 @@ initializeLocale();
|
||||
|
||||
|
||||
<div v-if="authStore.isAuthenticated" class="flex-grow px-5 py-4">
|
||||
<div class="font-bold"> {{ $t('sidebar.subscriptionTitle') }}</div>
|
||||
<div class="font-bold"> {{ $t('sidebar.subscriptionTitle') }}</div>
|
||||
<div v-if="authStore.isAuthenticated" class="flex-grow px-5">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<subscription-list>
|
||||
<template v-slot:default>
|
||||
<span v-if="subscriptionListIsEmpty">Aucun abonnement</span>
|
||||
</template>
|
||||
</subscription-list>
|
||||
</div>
|
||||
|
||||
<div v-else class="flex-grow px-5 py-4 flex justify-center font-bold ">
|
||||
|
||||
<div v-else class="flex-grow px-5 py-4 flex justify-center font-bold ">
|
||||
<span>Connectez-vous</span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="border-t w-full py-10 mt-auto">
|
||||
<SiteMenu></SiteMenu>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
@@ -92,7 +85,7 @@ nav {
|
||||
|
||||
/* Firefox */
|
||||
.custom-scrollbar {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #903175 #f1f1f1;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,44 +0,0 @@
|
||||
<template>
|
||||
<div class="flex flex-col">
|
||||
|
||||
<div class="flex flex-row justify-center pb-4 pt-2 py-4">
|
||||
<!-- Facebook -->
|
||||
<a href="https://www.facebook.com/profile.php?id=61556819217561" class="social">
|
||||
<v-icon>mdi-facebook</v-icon>
|
||||
</a>
|
||||
<!-- Instagram -->
|
||||
<a href="https://www.instagram.com/hutopy.inc/" class="social">
|
||||
<v-icon>mdi-instagram</v-icon>
|
||||
</a>
|
||||
<!-- X / Twitter -->
|
||||
<a href="https://twitter.com/Hutopyinc" class="social">
|
||||
<img src="/images/hutopymedia/icons/x.svg" width="23px" height="23px" class="mb-5 mr-2">
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="text-center ">
|
||||
<RouterLink class="nav-button" to="/helpandcontact">{{ $t('sitemenu.HelpAndContact') }}</RouterLink>
|
||||
<RouterLink class="nav-button" to="/faq">{{ $t('sitemenu.FAQ') }}</RouterLink>
|
||||
<RouterLink class="nav-button" to="/guideforcreators">{{ $t('sitemenu.CreatorGuide') }}</RouterLink>
|
||||
<RouterLink class="nav-button" to="/termsandconditions">{{ $t('sitemenu.TermsAndConditions') }}</RouterLink>
|
||||
<RouterLink class="nav-button" to="/contentpolicy">{{ $t('sitemenu.ContentPolicy') }}</RouterLink>
|
||||
<RouterLink class="nav-button" to="/about">{{ $t('sitemenu.About') }}</RouterLink>
|
||||
<RouterLink class="nav-button" to="/pricing">{{ $t('sitemenu.Pricing') }}</RouterLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.nav-button {
|
||||
@apply rounded flex justify-center font-sans py-1;
|
||||
}
|
||||
|
||||
.nav-button:hover {
|
||||
@apply text-purple-800 bg-gray-50;
|
||||
}
|
||||
|
||||
.social {
|
||||
@apply m-2 w-10 h-10;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user