From 9ad535ead6738f585be195dc5ac4cb04de8c67aa Mon Sep 17 00:00:00 2001
From: ManUtopiK <emmanuel.salomon@gmail.com>
Date: Wed, 15 Sep 2021 02:40:55 +0200
Subject: [PATCH] Refactoring hero and CTA
---
components/home/HomeCTA.vue | 98 ++++++++++++++++++++++++++++++++++++
components/home/HomeHero.vue | 74 +++------------------------
content/ui/home-cta.md | 54 ++++++++++++++++++++
content/ui/home-hero.md | 39 ++++++--------
pages/index.vue | 9 ++--
5 files changed, 179 insertions(+), 95 deletions(-)
create mode 100644 components/home/HomeCTA.vue
create mode 100644 content/ui/home-cta.md
diff --git a/components/home/HomeCTA.vue b/components/home/HomeCTA.vue
new file mode 100644
index 00000000..f55d4d73
--- /dev/null
+++ b/components/home/HomeCTA.vue
@@ -0,0 +1,98 @@
+<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>
diff --git a/components/home/HomeHero.vue b/components/home/HomeHero.vue
index 5c1fa3bb..086eb7d9 100644
--- a/components/home/HomeHero.vue
+++ b/components/home/HomeHero.vue
@@ -1,7 +1,7 @@
<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 {
diff --git a/content/ui/home-cta.md b/content/ui/home-cta.md
new file mode 100644
index 00000000..c1955a62
--- /dev/null
+++ b/content/ui/home-cta.md
@@ -0,0 +1,54 @@
+<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
diff --git a/content/ui/home-hero.md b/content/ui/home-hero.md
index 43bea374..d85f8780 100644
--- a/content/ui/home-hero.md
+++ b/content/ui/home-hero.md
@@ -1,28 +1,17 @@
-<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é 🕊,
-d'égalité âš–ï¸ et de fraternité 🤠; 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 ✊
- <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
diff --git a/pages/index.vue b/pages/index.vue
index 1b10a607..89b74bdf 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,9 +1,8 @@
<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,
}
},
--
GitLab