|
|
@@ -1,11 +1,557 @@
|
|
|
<template>
|
|
|
+ <div class="theme-artist">
|
|
|
+ <CommonMeta
|
|
|
+ title="Essai gratuit Opentalent Artist Premium - 30 jours sans engagement"
|
|
|
+ description="Essayez gratuitement Opentalent Artist Premium pendant 30 jours. Solution complète pour orchestres, chorales, compagnies de théâtre, de danse ou de cirque."
|
|
|
+ />
|
|
|
|
|
|
+ <div class="background-container">
|
|
|
+ <LayoutContainer class="trial-container">
|
|
|
+ <div id="anchor" />
|
|
|
+
|
|
|
+ <v-card class="form-card">
|
|
|
+ <v-card-text>
|
|
|
+ <h1 class="text-center mb-6">
|
|
|
+ Essayez gratuitement Opentalent Artist Premium pendant 30 jours !
|
|
|
+ </h1>
|
|
|
+
|
|
|
+ <div class="description mb-8">
|
|
|
+ <p>
|
|
|
+ Opentalent Artist Premium est une solution en ligne complète,
|
|
|
+ pensée pour les orchestres, chorales, compagnies de théâtre, de
|
|
|
+ danse ou de cirque. Elle vous aide à gagner du temps dans
|
|
|
+ l'organisation de vos activités, à mieux collaborer avec vos
|
|
|
+ équipes et à renforcer votre visibilité auprès de votre public.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ Pendant 30 jours, profitez de toutes les fonctionnalités
|
|
|
+ d'Opentalent Artist Premium, gratuitement et sans engagement :
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <ul class="benefits-list">
|
|
|
+ <li>
|
|
|
+ <span class="mr-1">✔️</span> Gestion intuitive des membres et
|
|
|
+ des événements
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="mr-1">✔️</span> Planification avancée des
|
|
|
+ répétitions, spectacles et tournées
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="mr-1">✔️</span> Outils de communication intégrés
|
|
|
+ (emails, publipostage, etc.)
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="mr-1">✔️</span> Site web personnalisable pour
|
|
|
+ présenter vos projets et votre structure
|
|
|
+ </li>
|
|
|
+ <li>
|
|
|
+ <span class="mr-1">✔️</span> Accès collaboratif pour vos
|
|
|
+ équipes, en temps réel
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ Il vous suffit de remplir le formulaire ci-dessous pour activer
|
|
|
+ votre essai gratuit.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <p>
|
|
|
+ Lancez-vous dès aujourd'hui et découvrez comment Opentalent peut
|
|
|
+ transformer votre organisation artistique !
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <v-form
|
|
|
+ v-if="!trialRequestSent"
|
|
|
+ ref="form"
|
|
|
+ validate-on="submit lazy"
|
|
|
+ @submit.prevent="submit"
|
|
|
+ >
|
|
|
+ <v-container>
|
|
|
+ <i
|
|
|
+ >Les champs dont le nom est suivi d'un astérisque (*) sont
|
|
|
+ obligatoires.</i
|
|
|
+ >
|
|
|
+
|
|
|
+ <h2 class="section-title">Coordonnées de la structure</h2>
|
|
|
+
|
|
|
+ <!-- Structure name -->
|
|
|
+ <v-row>
|
|
|
+ <v-col cols="12">
|
|
|
+ <v-text-field
|
|
|
+ v-model="trialRequest.structureName"
|
|
|
+ :rules="[validateRequired]"
|
|
|
+ label="Nom de la structure*"
|
|
|
+ required
|
|
|
+ />
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+
|
|
|
+ <!-- Structure address -->
|
|
|
+ <v-row>
|
|
|
+ <v-col cols="12" md="6">
|
|
|
+ <v-text-field
|
|
|
+ v-model="trialRequest.address"
|
|
|
+ :rules="[validateRequired]"
|
|
|
+ label="Adresse siège social de la structure*"
|
|
|
+ required
|
|
|
+ />
|
|
|
+ </v-col>
|
|
|
+ <v-col cols="12" md="6">
|
|
|
+ <v-text-field
|
|
|
+ v-model="trialRequest.addressComplement"
|
|
|
+ label="Adresse (suite)"
|
|
|
+ />
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+
|
|
|
+ <v-row>
|
|
|
+ <v-col cols="12" md="6">
|
|
|
+ <v-text-field
|
|
|
+ v-model="trialRequest.postalCode"
|
|
|
+ :rules="[validateRequired, validatePostalCode]"
|
|
|
+ label="Code postal*"
|
|
|
+ required
|
|
|
+ />
|
|
|
+ </v-col>
|
|
|
+
|
|
|
+ <v-col cols="12" md="6">
|
|
|
+ <v-text-field
|
|
|
+ v-model="trialRequest.city"
|
|
|
+ :rules="[validateRequired]"
|
|
|
+ label="Ville*"
|
|
|
+ required
|
|
|
+ />
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+
|
|
|
+ <!-- Structure email and SIREN -->
|
|
|
+ <v-row>
|
|
|
+ <v-col cols="12" md="6">
|
|
|
+ <v-text-field
|
|
|
+ v-model="trialRequest.structureEmail"
|
|
|
+ :rules="[validateRequired, validateEmail]"
|
|
|
+ label="Adresse mail de la structure*"
|
|
|
+ required
|
|
|
+ type="email"
|
|
|
+ />
|
|
|
+ </v-col>
|
|
|
+ <v-col cols="12" md="6">
|
|
|
+ <v-text-field
|
|
|
+ v-model="trialRequest.siren"
|
|
|
+ :rules="[validateSiren]"
|
|
|
+ label="SIREN (optionnel)"
|
|
|
+ hint="Numéro à 9 chiffres"
|
|
|
+ />
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+
|
|
|
+ <!-- Structure type and legal status -->
|
|
|
+ <v-row>
|
|
|
+ <v-col cols="12" md="6">
|
|
|
+ <v-select
|
|
|
+ v-model="trialRequest.structureType"
|
|
|
+ :rules="[validateRequired]"
|
|
|
+ label="Type de la structure*"
|
|
|
+ :items="structureTypes"
|
|
|
+ required
|
|
|
+ />
|
|
|
+ </v-col>
|
|
|
+ <v-col cols="12" md="6">
|
|
|
+ <v-select
|
|
|
+ v-model="trialRequest.legalStatus"
|
|
|
+ :rules="[validateRequired]"
|
|
|
+ label="Statut juridique*"
|
|
|
+ :items="legalStatuses"
|
|
|
+ required
|
|
|
+ />
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+
|
|
|
+ <h2 class="section-title">Représentée par</h2>
|
|
|
+
|
|
|
+ <!-- Representative function -->
|
|
|
+ <v-row>
|
|
|
+ <v-col cols="12">
|
|
|
+ <v-text-field
|
|
|
+ v-model="trialRequest.representativeFunction"
|
|
|
+ :rules="[validateRequired]"
|
|
|
+ label="Fonction*"
|
|
|
+ required
|
|
|
+ />
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+
|
|
|
+ <!-- Representative name -->
|
|
|
+ <v-row>
|
|
|
+ <v-col cols="12" md="6">
|
|
|
+ <v-text-field
|
|
|
+ v-model="trialRequest.representativeFirstName"
|
|
|
+ :rules="[validateRequired]"
|
|
|
+ label="Prénom*"
|
|
|
+ required
|
|
|
+ />
|
|
|
+ </v-col>
|
|
|
+
|
|
|
+ <v-col cols="12" md="6">
|
|
|
+ <v-text-field
|
|
|
+ v-model="trialRequest.representativeLastName"
|
|
|
+ :rules="[validateRequired]"
|
|
|
+ label="Nom*"
|
|
|
+ required
|
|
|
+ />
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+
|
|
|
+ <!-- Representative contact -->
|
|
|
+ <v-row>
|
|
|
+ <v-col cols="12" md="6">
|
|
|
+ <v-text-field
|
|
|
+ v-model="trialRequest.representativeEmail"
|
|
|
+ :rules="[validateRequired, validateEmail]"
|
|
|
+ label="Adresse mail*"
|
|
|
+ required
|
|
|
+ type="email"
|
|
|
+ />
|
|
|
+ </v-col>
|
|
|
+
|
|
|
+ <v-col cols="12" md="6">
|
|
|
+ <v-text-field
|
|
|
+ v-model="trialRequest.representativePhone"
|
|
|
+ :rules="[validateRequired, validatePhone]"
|
|
|
+ label="Téléphone*"
|
|
|
+ required
|
|
|
+ type="tel"
|
|
|
+ />
|
|
|
+ </v-col>
|
|
|
+ </v-row>
|
|
|
+
|
|
|
+ <h2 class="section-title">Accord de termes et conditions</h2>
|
|
|
+
|
|
|
+ <!-- Terms checkboxes -->
|
|
|
+ <v-checkbox
|
|
|
+ v-model="trialRequest.termsAccepted"
|
|
|
+ :rules="[validateCheckbox]"
|
|
|
+ label="Mon organisme accepte les conditions générales d'utilisation.*"
|
|
|
+ required
|
|
|
+ />
|
|
|
+
|
|
|
+ <v-checkbox
|
|
|
+ v-model="trialRequest.legalRepresentative"
|
|
|
+ :rules="[validateCheckbox]"
|
|
|
+ label="J'agis en tant que représentant légal de l'association.*"
|
|
|
+ required
|
|
|
+ />
|
|
|
+
|
|
|
+ <v-checkbox
|
|
|
+ v-model="trialRequest.newsletterSubscription"
|
|
|
+ label="J'accepte de recevoir la lettre d'information culturelle afin de découvrir des idées de sorties adaptées à ma région."
|
|
|
+ />
|
|
|
+
|
|
|
+ <div class="d-flex flex-row justify-center">
|
|
|
+ <LayoutCaptcha />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- Submit Button -->
|
|
|
+ <div class="d-flex flex-row justify-center my-10">
|
|
|
+ <v-btn
|
|
|
+ type="submit"
|
|
|
+ color="secondary"
|
|
|
+ size="large"
|
|
|
+ class="submit-btn"
|
|
|
+ >
|
|
|
+ COMMENCER MON ESSAI DE 30 JOURS
|
|
|
+ </v-btn>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <p class="text-center no-credit-card">
|
|
|
+ Aucune carte de crédit requise. En cliquant sur "Commencer Mon
|
|
|
+ essai de 30 jours", vous acceptez de démarrer votre période
|
|
|
+ d'essai gratuit.
|
|
|
+ </p>
|
|
|
+
|
|
|
+ <div v-if="errorMsg" class="error">
|
|
|
+ {{ errorMsg }}
|
|
|
+ </div>
|
|
|
+ </v-container>
|
|
|
+
|
|
|
+ <div class="legal">
|
|
|
+ Les données recueillies par Opentalent sont utilisées pour le
|
|
|
+ traitement de votre demande et pour vous informer sur nos
|
|
|
+ offres. Elles sont destinées aux services Opentalent et à ses
|
|
|
+ sous-traitants pour l'exécution des contrats. Conformément à la
|
|
|
+ loi "Informatique et Libertés du 6 Janvier 1978", vous disposez
|
|
|
+ d'un droit d'accès, de modifications, de rectification et de
|
|
|
+ suppression des données vous concernant. Pour toute demande,
|
|
|
+ adressez-vous à : OPENTALENT, 265 rue de la Grange 74950
|
|
|
+ SCIONZIER - FRANCE, opentalent.fr s'engage à la confidentialité
|
|
|
+ et à la protection de vos données."
|
|
|
+ </div>
|
|
|
+ </v-form>
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-else
|
|
|
+ class="confirmation-message d-flex flex-row justify-center"
|
|
|
+ >
|
|
|
+ <v-card>
|
|
|
+ <v-card-title class="text-center">
|
|
|
+ <v-icon
|
|
|
+ icon="fas fa-check mr-2"
|
|
|
+ color="success"
|
|
|
+ max-height="48"
|
|
|
+ />
|
|
|
+ Félicitations !
|
|
|
+ </v-card-title>
|
|
|
+ <v-card-text class="text-center">
|
|
|
+ <p>
|
|
|
+ Votre essai gratuit de 30 jours d'Opentalent Artist Premium
|
|
|
+ a bien été activé.
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ Vous allez recevoir un email avec vos identifiants de
|
|
|
+ connexion et toutes les informations nécessaires pour
|
|
|
+ commencer à utiliser la plateforme.
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ Notre équipe reste à votre disposition pour vous accompagner
|
|
|
+ durant cette période d'essai.
|
|
|
+ </p>
|
|
|
+ </v-card-text>
|
|
|
+ <v-card-actions class="justify-center">
|
|
|
+ <v-btn color="primary" to="/opentalent-artist">
|
|
|
+ Retour à la page Opentalent Artist
|
|
|
+ </v-btn>
|
|
|
+ </v-card-actions>
|
|
|
+ </v-card>
|
|
|
+ </div>
|
|
|
+ </v-card-text>
|
|
|
+ </v-card>
|
|
|
+ </LayoutContainer>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
+import { useRouter } from 'vue-router'
|
|
|
+import type { Ref } from 'vue'
|
|
|
+import { reactive } from 'vue'
|
|
|
+import type { TrialRequest } from '~/types/interface'
|
|
|
+
|
|
|
+const router = useRouter()
|
|
|
+
|
|
|
+const form: Ref<HTMLElement | null> = ref(null)
|
|
|
|
|
|
+// Structure types and legal statuses
|
|
|
+const structureTypes: Array<string> = [
|
|
|
+ 'Orchestre',
|
|
|
+ 'Chorale',
|
|
|
+ 'Compagnie de théâtre',
|
|
|
+ 'Compagnie de danse',
|
|
|
+ 'Compagnie de cirque',
|
|
|
+ 'Autre',
|
|
|
+]
|
|
|
+
|
|
|
+const legalStatuses: Array<string> = [
|
|
|
+ 'Association loi 1901',
|
|
|
+ 'SARL',
|
|
|
+ 'SAS',
|
|
|
+ 'EURL',
|
|
|
+ 'Auto-entrepreneur',
|
|
|
+ 'Établissement public',
|
|
|
+ 'Collectivité territoriale',
|
|
|
+ 'Autre',
|
|
|
+]
|
|
|
+
|
|
|
+// Trial request data
|
|
|
+const trialRequest = reactive<TrialRequest>({
|
|
|
+ structureName: '',
|
|
|
+ address: '',
|
|
|
+ addressComplement: '',
|
|
|
+ postalCode: '',
|
|
|
+ city: '',
|
|
|
+ structureEmail: '',
|
|
|
+ structureType: '',
|
|
|
+ legalStatus: '',
|
|
|
+ siren: '',
|
|
|
+ representativeFirstName: '',
|
|
|
+ representativeLastName: '',
|
|
|
+ representativeFunction: '',
|
|
|
+ representativeEmail: '',
|
|
|
+ representativePhone: '',
|
|
|
+ termsAccepted: false,
|
|
|
+ legalRepresentative: false,
|
|
|
+ newsletterSubscription: false,
|
|
|
+})
|
|
|
+
|
|
|
+// Validation rules
|
|
|
+const validateRequired = (value: string) =>
|
|
|
+ !!value || 'Ce champ est obligatoire'
|
|
|
+
|
|
|
+const validateEmail = (email: string) =>
|
|
|
+ /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email) || 'Adresse email invalide'
|
|
|
+
|
|
|
+const validatePostalCode = (postalCode: string) =>
|
|
|
+ /^\d{5}$/.test(postalCode) || 'Code postal invalide (5 chiffres)'
|
|
|
+
|
|
|
+const validatePhone = (phone: string) =>
|
|
|
+ /^((\+|00)33\s?|0)[1-9]([\s.-]?\d{2}){4}$/.test(phone) ||
|
|
|
+ 'Numéro de téléphone invalide'
|
|
|
+
|
|
|
+const validateSiren = (siren: string) =>
|
|
|
+ !siren || /^\d{9}$/.test(siren) || 'SIREN invalide (9 chiffres)'
|
|
|
+
|
|
|
+const validateCheckbox = (value: boolean) =>
|
|
|
+ value || 'Vous devez accepter cette condition'
|
|
|
+
|
|
|
+// Form state
|
|
|
+const trialRequestSent: Ref<boolean> = ref(false)
|
|
|
+const errorMsg: Ref<string | null> = ref(null)
|
|
|
+
|
|
|
+// Submit function
|
|
|
+const submit = async (): Promise<void> => {
|
|
|
+ const { valid } = await form.value!.validate()
|
|
|
+
|
|
|
+ if (!valid) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+
|
|
|
+ try {
|
|
|
+ // Here you would normally send the data to your backend
|
|
|
+ // For now, we'll just simulate a successful submission
|
|
|
+ console.log('Trial request submitted:', trialRequest)
|
|
|
+
|
|
|
+ // Simulate API call delay
|
|
|
+ await new Promise((resolve) => setTimeout(resolve, 1000))
|
|
|
+
|
|
|
+ trialRequestSent.value = true
|
|
|
+ errorMsg.value = null
|
|
|
+
|
|
|
+ // Scroll to top to show confirmation message
|
|
|
+ setTimeout(() => router.push({ path: '', hash: '#anchor' }), 30)
|
|
|
+ } catch (e) {
|
|
|
+ errorMsg.value =
|
|
|
+ "Une erreur s'est produite lors de l'activation de votre essai. Veuillez réessayer plus tard ou nous contacter directement."
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
+.background-container {
|
|
|
+ background-image: url('/images/logos/opentalent/Logo_Opentalent_Griffe.png');
|
|
|
+ background-size: 700px;
|
|
|
+ min-height: 100vh;
|
|
|
+}
|
|
|
+
|
|
|
+.trial-container {
|
|
|
+ max-width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 2rem;
|
|
|
+}
|
|
|
+
|
|
|
+.form-card {
|
|
|
+ box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
|
|
|
+ max-width: 90%;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 2rem;
|
|
|
+}
|
|
|
+
|
|
|
+h1 {
|
|
|
+ font-size: 2.5rem;
|
|
|
+ font-weight: 700;
|
|
|
+ color: var(--primary-color);
|
|
|
+ text-decoration: underline var(--artist-color) 3px solid;
|
|
|
+ margin-bottom: 2rem;
|
|
|
+
|
|
|
+ @media (max-width: 768px) {
|
|
|
+ font-size: 1.8rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.description {
|
|
|
+ font-size: 1.1rem;
|
|
|
+ line-height: 1.6;
|
|
|
+ margin-bottom: 2rem;
|
|
|
+
|
|
|
+ p {
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.benefits-list {
|
|
|
+ list-style: none;
|
|
|
+ padding-left: 1rem;
|
|
|
+ margin: 1.5rem 0;
|
|
|
+
|
|
|
+ li {
|
|
|
+ margin-bottom: 0.5rem;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.section-title {
|
|
|
+ margin-top: 2rem;
|
|
|
+ font-size: 1.5rem;
|
|
|
+ font-weight: 600;
|
|
|
+ color: var(--primary-color);
|
|
|
+ text-decoration: underline var(--artist-color) 3px solid;
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ text-transform: uppercase;
|
|
|
+ letter-spacing: 0.05em;
|
|
|
+}
|
|
|
+
|
|
|
+.v-form {
|
|
|
+ max-width: 1200px;
|
|
|
+ margin: 0 auto;
|
|
|
+
|
|
|
+ .submit-btn {
|
|
|
+ font-weight: 600;
|
|
|
+ letter-spacing: 0.05em;
|
|
|
+ padding: 0 2rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ .error {
|
|
|
+ color: var(--warning-color);
|
|
|
+ width: 80%;
|
|
|
+ margin: 0 auto 2em;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .legal {
|
|
|
+ opacity: 0.7;
|
|
|
+ font-size: 14px;
|
|
|
+ font-style: italic;
|
|
|
+ margin: 2rem auto;
|
|
|
+ max-width: 80%;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.no-credit-card {
|
|
|
+ font-size: 0.9rem;
|
|
|
+ opacity: 0.8;
|
|
|
+ margin-top: 1rem;
|
|
|
+}
|
|
|
+
|
|
|
+.confirmation-message {
|
|
|
+ .v-card {
|
|
|
+ max-width: 800px;
|
|
|
+ padding: 2rem;
|
|
|
+ margin: 4rem 0;
|
|
|
+
|
|
|
+ .v-card-title {
|
|
|
+ font-size: 1.8rem;
|
|
|
+ font-weight: 700;
|
|
|
+ color: var(--primary-color);
|
|
|
+ }
|
|
|
+
|
|
|
+ .v-card-text {
|
|
|
+ font-size: 1.1rem;
|
|
|
+ line-height: 1.6;
|
|
|
|
|
|
+ p {
|
|
|
+ margin-bottom: 1rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
Olivier Massot