|
|
@@ -0,0 +1,136 @@
|
|
|
+<template>
|
|
|
+ <AnchoredSection id="trial" class="alt-theme main">
|
|
|
+ <LayoutContainer class="mb-12">
|
|
|
+ <div class="center-90">
|
|
|
+ <v-row class="subtitle">
|
|
|
+ <v-col cols="12">
|
|
|
+ <LayoutUISubTitle class="mt-12 ml-3">
|
|
|
+ Vous souhaitez découvrir le logiciel Opentalen Artist Premium ?
|
|
|
+ </LayoutUISubTitle>
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+ </div>
|
|
|
+ </LayoutContainer>
|
|
|
+
|
|
|
+ <v-row>
|
|
|
+ <v-col cols="12" lg="6" class="content">
|
|
|
+ <h3 class="my-6">
|
|
|
+ Essayez Opentalent Artist Premium gratuitement pendant 30 jours
|
|
|
+ </h3>
|
|
|
+
|
|
|
+ <v-btn
|
|
|
+ to="shop/try/artist-premium"
|
|
|
+ height="48"
|
|
|
+ aria-label="Essayez Opentalent Artist Premium gratuitement pendant 30 jours"
|
|
|
+ class="inv-theme"
|
|
|
+ >
|
|
|
+ Commencer l'essai gratuit
|
|
|
+ </v-btn>
|
|
|
+ </v-col>
|
|
|
+
|
|
|
+ <v-col cols="12" lg="6" class="badges">
|
|
|
+ <div>
|
|
|
+ <v-img
|
|
|
+ src="/images/pages/opentalent_artist/trial/credit_card_off.svg"
|
|
|
+ alt="Icône représentant une carte de crédit barrée"
|
|
|
+ />
|
|
|
+ <p>Aucune carte bleue requise</p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <v-img
|
|
|
+ src="/images/pages/opentalent_artist/trial/handshake.svg"
|
|
|
+ alt="Icône représentant une poignée de mains"
|
|
|
+ />
|
|
|
+ <p class="text-btn">
|
|
|
+ Essai sans engagement
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+ </AnchoredSection>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup lang="ts">
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss">
|
|
|
+.main {
|
|
|
+ min-height: 560px;
|
|
|
+ background-image: url('/images/pages/opentalent_artist/trial/Boutique_en_ligne-Opentalent_Visuel_site.png');
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center 15%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ &::before {
|
|
|
+ content: "";
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgba(0, 0, 0, 0.4);
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.v-container, .v-row {
|
|
|
+ z-index: 2;
|
|
|
+}
|
|
|
+
|
|
|
+h3 {
|
|
|
+ font-size: 28px;
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ @media (max-width: 1280px) {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ text-align: center;
|
|
|
+ max-width: 90%;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ h3 {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.badges {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ > div {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: flex-start;
|
|
|
+ height: 84px;
|
|
|
+ width: 360px;
|
|
|
+ margin: 12px 0;
|
|
|
+ border: solid 1px var(--on-alt-theme);
|
|
|
+ border-radius: 6px;
|
|
|
+ color: var(--on-alt-theme);
|
|
|
+ font-weight: 700;
|
|
|
+ text-transform: uppercase;
|
|
|
+
|
|
|
+ .v-img {
|
|
|
+ height: 32px;
|
|
|
+ width: 32px;
|
|
|
+ max-width: 32px;
|
|
|
+ margin: 0 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
Olivier Massot
