Skip to content
Snippets Groups Projects
Commit 9ad535ea authored by Emmanuel Salomon's avatar Emmanuel Salomon :fist:
Browse files

Refactoring hero and CTA

parent 42b9db6d
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
components/home/HomeCTA.vue 0 → 100644
+ 98
− 0
View file @ 9ad535ea
<template>
<div id="container-cta" class="container mb-12">
<nuxt-content :document="document" />
</div>
</template>
<script>
export default {
props: {
document: {
type: Object,
required: true,
},
},
}
</script>
<style lang="postcss">
.list-cta > li {
position: relative;
padding-left: 1.75em;
margin: 0.5em 0;
line-height: 1.2em;
}
.list-cta > li::before {
content: '';
position: absolute;
background-color: #3b82f6;
border-radius: 50%;
width: 0.375em;
height: 0.375em;
top: 0.375em;
left: 0.25em;
}
#container-cta .svg-inline--fa {
animation: shake 10s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
animation-delay: 5s;
}
#container-cta .grid > a:nth-child(2) .svg-inline--fa {
animation-delay: 5.5s;
}
#container-cta .grid > a:nth-child(3) .svg-inline--fa {
animation-delay: 6s;
}
#container-cta .grid > a:nth-child(4) .svg-inline--fa {
animation-delay: 6.5s;
}
@keyframes shake {
0% {
-webkit-transform: translate(2px, 1px) rotate(0deg);
}
1% {
-webkit-transform: translate(-1px, -2px) rotate(-3deg);
}
2% {
-webkit-transform: translate(-3px, 0px) rotate(3deg);
}
3% {
-webkit-transform: translate(0px, 2px) rotate(0deg);
}
4% {
-webkit-transform: translate(1px, -1px) rotate(3deg);
}
5% {
-webkit-transform: translate(-1px, 2px) rotate(-3deg);
}
6% {
-webkit-transform: translate(-3px, 1px) rotate(0deg);
}
7% {
-webkit-transform: translate(2px, 1px) rotate(-3deg);
}
8% {
-webkit-transform: translate(-1px, -1px) rotate(3deg);
}
9% {
-webkit-transform: translate(2px, 2px) rotate(0deg);
}
10% {
-webkit-transform: translate(1px, -2px) rotate(-3deg);
}
11% {
transform: translate(0, 0) rotate(0deg);
}
}
</style>
components/home/HomeHero.vue
+ 8
− 66
View file @ 9ad535ea
<template>
<div class="hero container flex">
<div class="lg:items-start max-w-2xl 2xl:max-w-3xl w-full z-10">
<nuxt-content :document="hero" />
<nuxt-content :document="document" />
</div>
<SuperHero class="superhero w-full h-full" />
......@@ -16,7 +16,7 @@ export default {
SuperHero,
},
props: {
hero: {
document: {
type: Object,
required: true,
},
......@@ -26,65 +26,7 @@ export default {
<style lang="postcss" scoped>
.hero {
min-height: 50vh;
padding-top: 15vh;
}
.hero >>> .svg-inline--fa {
animation: shake 10s cubic-bezier(0.36, 0.07, 0.19, 0.97) infinite;
animation-delay: 5s;
}
.hero >>> .link-contribute svg {
animation-delay: 5.5s;
}
@keyframes shake {
0% {
-webkit-transform: translate(2px, 1px) rotate(0deg);
}
1% {
-webkit-transform: translate(-1px, -2px) rotate(-3deg);
}
2% {
-webkit-transform: translate(-3px, 0px) rotate(3deg);
}
3% {
-webkit-transform: translate(0px, 2px) rotate(0deg);
}
4% {
-webkit-transform: translate(1px, -1px) rotate(3deg);
}
5% {
-webkit-transform: translate(-1px, 2px) rotate(-3deg);
}
6% {
-webkit-transform: translate(-3px, 1px) rotate(0deg);
}
7% {
-webkit-transform: translate(2px, 1px) rotate(-3deg);
}
8% {
-webkit-transform: translate(-1px, -1px) rotate(3deg);
}
9% {
-webkit-transform: translate(2px, 2px) rotate(0deg);
}
10% {
-webkit-transform: translate(1px, -2px) rotate(-3deg);
}
11% {
transform: translate(0, 0) rotate(0deg);
}
padding: max(8vh, 8rem) 0;
}
@keyframes floatHero {
......@@ -98,7 +40,7 @@ export default {
transform: translate(0px, 0px);
}
}
@keyframes float {
@keyframes floatDots {
0% {
transform: translate(0px, 0px);
}
......@@ -180,17 +122,17 @@ export default {
}
/* red particles */
.superhero #dots path[fill='#DC2626']:nth-child(odd) {
animation: float 4s ease-in-out infinite;
animation: floatDots 4s ease-in-out infinite;
}
.superhero #dots path[fill='#DC2626']:nth-child(even) {
animation: float 3s ease-in-out infinite;
animation: floatDots 3s ease-in-out infinite;
}
/* blue particles */
.superhero #dots path[fill='#5222D0']:nth-child(odd) {
animation: float 5s ease-in-out infinite;
animation: floatDots 5s ease-in-out infinite;
}
.superhero #dots path[fill='#5222D0']:nth-child(even) {
animation: float 2s ease-in-out infinite;
animation: floatDots 2s ease-in-out infinite;
}
/* zigzags */
.superhero #zigzag path {
......
content/ui/home-cta.md 0 → 100644
+ 54
− 0
View file @ 9ad535ea
<section class="grid grid-cols-4 gap-6">
<nuxt-link
to="/decouvrir"
class="bg-blue-100 p-4 rounded transition hover:shadow-xl transform hover:-translate-y-0.5"
>
<div class="flex items-center justify-between">
<h2 class="font-semibold text-lg">Découvrir</h2>
<fa icon="arrow-right" class="ml-4"></fa>
</div>
<ul class="mt-1 font-light list-cta">
<li>D'où vient l'argent ?</li>
<li>La création monétaire en monnaie libre</li>
</ul>
</nuxt-link>
<nuxt-link
to="/comprendre"
class="bg-blue-100 p-4 rounded transition hover:shadow-xl transform hover:-translate-y-0.5"
>
<div class="flex items-center justify-between">
<h2 class="font-semibold text-lg">Comprendre</h2>
<fa icon="arrow-right" class="ml-4"></fa>
</div>
<ul class="mt-1 font-light list-cta">
<li>La théorie relative de la monnaie</li>
<li>La toile de confiance et la blockchain de la Ğ1</li>
</ul>
</nuxt-link>
<nuxt-link
to="/debuter"
class="bg-blue-100 p-4 rounded transition hover:shadow-xl transform hover:-translate-y-0.5"
>
<div class="flex items-center justify-between">
<h2 class="font-semibold text-lg">Débuter</h2>
<fa icon="arrow-right" class="ml-4"></fa>
</div>
<ul class="mt-1 font-light list-cta">
<li>Ouvrir un compte</li>
<li>Les outils de la Ğ1</li>
</ul>
</nuxt-link>
<nuxt-link
to="/contribuer"
class="bg-blue-100 p-4 rounded transition hover:shadow-xl transform hover:-translate-y-0.5"
>
<div class="flex items-center justify-between">
<h2 class="font-semibold text-lg">Contribuer</h2>
<fa icon="arrow-right" class="ml-4"></fa>
</div>
<ul class="mt-1 font-light list-cta">
<li>Rencontrer des utilisateurs</li>
<li>Participer</li>
</ul>
</nuxt-link>
</section>
\ No newline at end of file
content/ui/home-hero.md
+ 14
− 25
View file @ 9ad535ea
<h1 class="mb-4 text-3xl md:text-7xl 2xl:text-8xl bg-clip-text text-transparent bg-gradient-to-r from-purple-800 to-blue-600 font-extrabold leading-tight slide-in-bottom-h1">
La monnaie libre
</h1>
<section class="mr-20">
<h1 class="mb-4 text-3xl md:text-6xl 2xl:text-7xl bg-clip-text text-transparent bg-gradient-to-r from-purple-800 to-blue-600 font-extrabold leading-tight slide-in-bottom-h1">
La monnaie libre
</h1>
<p class="leading-normal text-base text-gray-700 dark:text-gray-300 md:text-5xl mb-8 slide-in-bottom-subtitle">
Repenser la création monétaire...<br />et l'expérimenter !
</p>
<p class="leading-normal text-base text-gray-700 dark:text-gray-300 md:text-4xl mb-12 font-semibold slide-in-bottom-subtitle">
Repenser la création monétaire...<br />et l'expérimenter !
</p>
<p class="leading-normal text-base text-gray-700 dark:text-gray-300 md:text-2xl mb-6 slide-in-bottom-subtitle">
Une économie garantissant plus de liberté&nbsp;🕊,
d'égalité&nbsp;⚖️&nbsp;et de fraternité&nbsp;🤝 ; c'est possible !
<nuxt-link
to="/decouvrir"
class="block hover:underline text-red-600 font-semibold mt-1"
>
<fa icon="arrow-right"></fa><span class="ml-2">Découvrir comment...</span>
</nuxt-link>
</p>
<p class="leading-normal text-base text-gray-700 dark:text-gray-300 md:text-xl mb-6 slide-in-bottom-subtitle">
Un modèle économique plus juste et durable est possible.<br />Une monnaie libre place l'homme au cœur de l'économie et prend en compte les générations futures.
</p>
<p class="leading-normal text-base text-gray-700 dark:text-gray-300 md:text-2xl mb-8 slide-in-bottom-subtitle">
Une expérience citoyenne, solidaire... et subversive&nbsp;✊
<nuxt-link
to="/contribuer"
class="link-contribute block hover:underline text-red-600 font-semibold mt-1"
>
<fa icon="arrow-right"></fa><span class="ml-2">Je participe !</span>
</nuxt-link>
</p>
<p class="leading-normal text-base text-gray-700 dark:text-gray-300 md:text-xl mb-6 slide-in-bottom-subtitle">
La Ğ1 (la "June") est la première monnaie libre. Conçue sur une blockchain écologique, c'est une expérience citoyenne, solidaire... et peut-être subversive !
</p>
</section>
\ No newline at end of file
pages/index.vue
+ 5
− 4
View file @ 9ad535ea
<template>
<div>
<div class="h-screen -mt-16 flex flex-col justify-between shadow-lg">
<HomeHero :hero="hero" />
<HomeSearch />
</div>
<HomeHero :document="hero" />
<HomeCTA :document="cta" />
<HomeSearch />
<nuxt-content
class="container my-12 prose dark:prose-dark"
......@@ -47,10 +46,12 @@ export default {
},
async asyncData({ $content }) {
const hero = await $content('ui/home-hero').fetch()
const cta = await $content('ui/home-cta').fetch()
const document = await $content('ui/home').fetch()
return {
hero,
cta,
document,
}
},
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment