From 3c79fdba8d7214666e3be5254f3eaf23586bb1e2 Mon Sep 17 00:00:00 2001
From: ManUtopiK <emmanuel.salomon@gmail.com>
Date: Tue, 21 Sep 2021 09:04:10 +0200
Subject: [PATCH] =?UTF-8?q?Home=20call=20to=20action=20:=C2=A03min=20video?=
=?UTF-8?q?=20introduction?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
components/home/HomeCTA.vue | 33 ++++++++++++++++++++++++---------
components/home/HomeHero.vue | 4 +++-
content/ui/home-cta.md | 1 -
pages/index.vue | 4 +---
4 files changed, 28 insertions(+), 14 deletions(-)
delete mode 100644 content/ui/home-cta.md
diff --git a/components/home/HomeCTA.vue b/components/home/HomeCTA.vue
index e1f473b1..d3cb102a 100644
--- a/components/home/HomeCTA.vue
+++ b/components/home/HomeCTA.vue
@@ -1,18 +1,33 @@
<template>
<div id="container-cta" class="container mb-12">
- <nuxt-content :document="document" />
+ <t-button
+ class="flex items-center rounded-2xl"
+ variant="success"
+ @click="$modal.show('videoIntro')"
+ >
+ <fa :icon="['fab', 'youtube']" class="text-4xl mr-4" />
+ <div class="text-left pr-1">
+ <div class="text-xl font-bold">Introduction</div>
+ <div class="-mt-1">3 min en vidéo</div>
+ </div>
+ </t-button>
+
+ <t-modal name="videoIntro" variant="large">
+ <div style="padding: 56.25% 0 0 0; position: relative">
+ <iframe
+ src="https://player.vimeo.com/video/514975135?h=7f6183d68c&portrait=0"
+ style="position: absolute; top: 0; left: 0; width: 100%; height: 100%"
+ frameborder="0"
+ allow="autoplay; fullscreen; picture-in-picture"
+ allowfullscreen
+ ></iframe>
+ </div>
+ </t-modal>
</div>
</template>
<script>
-export default {
- props: {
- document: {
- type: Object,
- required: true,
- },
- },
-}
+export default {}
</script>
<style lang="postcss"></style>
diff --git a/components/home/HomeHero.vue b/components/home/HomeHero.vue
index 086eb7d9..9c14f040 100644
--- a/components/home/HomeHero.vue
+++ b/components/home/HomeHero.vue
@@ -1,7 +1,9 @@
<template>
<div class="hero container flex">
- <div class="lg:items-start max-w-2xl 2xl:max-w-3xl w-full z-10">
+ <div class="lg:items-start max-w-2xl 2xl:max-w-3xl w-full">
<nuxt-content :document="document" />
+
+ <HomeCTA class="pt-4" />
</div>
<SuperHero class="superhero w-full h-full" />
diff --git a/content/ui/home-cta.md b/content/ui/home-cta.md
deleted file mode 100644
index 86b27499..00000000
--- a/content/ui/home-cta.md
+++ /dev/null
@@ -1 +0,0 @@
-Introduction : 3min en vidéo !
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 1c9f3372..55276ce9 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,7 +1,7 @@
<template>
<div>
<HomeHero :document="hero" />
- <HomeCTA :document="cta" />
+
<AppFlatPlan :document="flatPlan" />
<section class="bg-gray-100 dark:bg-gray-800">
@@ -52,13 +52,11 @@ export default {
},
async asyncData({ $content }) {
const hero = await $content('ui/home-hero').fetch()
- const cta = await $content('ui/home-cta').fetch()
const flatPlan = await $content('ui/main-flatplan').fetch()
const document = await $content('ui/home').fetch()
return {
hero,
- cta,
flatPlan,
document,
}
--
GitLab