From ab3690e951e6724b6b24fb9bbb7c4008e40f365c Mon Sep 17 00:00:00 2001
From: Nyavokevin <42602932+nyavokevin@users.noreply.github.com>
Date: Mon, 13 Oct 2025 19:28:35 +0300
Subject: [PATCH] add cta

---
 resources/js/layouts/app/LandingLayout.vue  |  2 +-
 resources/js/pages/cards/FreeCardResult.vue | 90 ++++++++++++++++++---
 resources/js/pages/cards/resultat.vue       | 90 ++++++++++++++++++---
 3 files changed, 163 insertions(+), 19 deletions(-)

diff --git a/resources/js/layouts/app/LandingLayout.vue b/resources/js/layouts/app/LandingLayout.vue
index c19c3a7..08443fd 100644
--- a/resources/js/layouts/app/LandingLayout.vue
+++ b/resources/js/layouts/app/LandingLayout.vue
@@ -301,7 +301,7 @@ onMounted(() => {
 
                         <!-- Copyright -->
                         <div class="w-full max-w-md border-t border-[var(--linen)] pt-8 text-center">
-                            <p class="text-sm text-[var(--midnight-blue)]/60">© 2024 Kris Saint Ange. Tous droits réservés.</p>
+                            <p class="text-sm text-[var(--midnight-blue)]/60">© 2025 Kris Saint Ange. Tous droits réservés.</p>
                         </div>
                     </div>
                 </div>
diff --git a/resources/js/pages/cards/FreeCardResult.vue b/resources/js/pages/cards/FreeCardResult.vue
index 2304664..8d12abd 100644
--- a/resources/js/pages/cards/FreeCardResult.vue
+++ b/resources/js/pages/cards/FreeCardResult.vue
@@ -94,15 +94,87 @@
                     class="border-linen rounded-lg border bg-white p-6 text-center shadow-sm transition-all duration-300 hover:shadow-md md:p-8 lg:p-12"
                 >
                     <div class="bg-subtle-gold mx-auto mb-6 h-1 w-16 rounded-full"></div>
-                    <p class="text-midnight-blue/80 mx-auto mb-6 max-w-2xl text-base leading-relaxed md:mb-8 md:text-lg">
-                        Pour une guidance plus approfondie, réservez une consultation personnalisée avec Kris Saint Ange.
-                    </p>
-                    <button
-                        @click="goToBooking"
-                        class="hover:bg-opacity-90 focus:ring-opacity-50 mt-4 inline-flex h-12 min-w-[160px] cursor-pointer items-center justify-center rounded-full bg-[var(--subtle-gold)] px-6 text-base font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:shadow-lg focus:ring-2 focus:ring-[var(--subtle-gold)] focus:outline-none md:mt-6 md:px-8"
-                    >
-                        Réserver une Consultation
-                    </button>
+
+                    <!-- Nouveau contenu -->
+                    <div class="space-y-6 text-left">
+                        <!-- En-tête -->
+                        <div class="text-center">
+                            <h3 class="text-midnight-blue mb-4 font-heading text-xl font-bold md:text-2xl">Cher.e Explorateur des Symboles,</h3>
+                        </div>
+
+                        <!-- Grilles de lecture -->
+                        <div class="space-y-3">
+                            <p class="text-midnight-blue/80 font-medium">Votre tirage en ligne vous a offert 3 grilles de lecture :</p>
+                            <div class="space-y-2 pl-4">
+                                <div class="flex items-start space-x-2">
+                                    <span class="text-subtle-gold mt-1">✦</span>
+                                    <p class="text-midnight-blue/80"><strong>La carte-miroir :</strong> votre reflet immédiat</p>
+                                </div>
+                                <div class="flex items-start space-x-2">
+                                    <span class="text-subtle-gold mt-1">✦</span>
+                                    <p class="text-midnight-blue/80"><strong>Les résonances croisées :</strong> interactions énergétiques</p>
+                                </div>
+                                <div class="flex items-start space-x-2">
+                                    <span class="text-subtle-gold mt-1">✦</span>
+                                    <p class="text-midnight-blue/80"><strong>Les flux prospectifs :</strong> potentialités à modeler</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Explication consultation -->
+                        <div class="space-y-3">
+                            <p class="text-midnight-blue/80">
+                                Ces révélations ne sont qu'un prélude à ce que nous pourrions accomplir en consultation directe. Parce que les arcanes
+                                :
+                            </p>
+                            <div class="space-y-1 pl-4">
+                                <p class="text-midnight-blue/80">• S'adaptent à votre voix et à vos micro-expressions</p>
+                                <p class="text-midnight-blue/80">• Se densifient grâce au dialogue intuitif en temps réel</p>
+                                <p class="text-midnight-blue/80">• Se transmuent en plan d'action sur-mesure</p>
+                            </div>
+                        </div>
+
+                        <!-- Offre Éclaireur -->
+                        <div class="space-y-3">
+                            <div class="flex items-center space-x-2">
+                                <span class="text-spiritual-earth text-lg">➤</span>
+                                <h4 class="text-midnight-blue font-heading text-lg font-bold">Offre Éclaireur :</h4>
+                            </div>
+                            <p class="text-midnight-blue/80">Bénéficiez d'une analyse approfondie où nous :</p>
+                            <div class="space-y-2 pl-4">
+                                <div class="flex items-start space-x-2">
+                                    <span class="text-spiritual-earth mt-1">1.</span>
+                                    <p class="text-midnight-blue/80">
+                                        Décrypterons les synchronicités entre votre tirage et celui que nous réaliserons ensemble
+                                    </p>
+                                </div>
+                                <div class="flex items-start space-x-2">
+                                    <span class="text-spiritual-earth mt-1">2.</span>
+                                    <p class="text-midnight-blue/80">Activerons les ponts cachés entre passé, présent et futur</p>
+                                </div>
+                                <div class="flex items-start space-x-2">
+                                    <span class="text-spiritual-earth mt-1">3.</span>
+                                    <p class="text-midnight-blue/80">Cristalliserons une boussole stratégique pour vos prochains choix</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Bouton CTA et informations -->
+                    <div class="mt-8 space-y-4">
+                        <button
+                            @click="goToBooking"
+                            class="hover:bg-opacity-90 focus:ring-opacity-50 mt-4 inline-flex h-12 min-w-[160px] items-center justify-center rounded-full bg-[var(--subtle-gold)] px-6 text-base font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:shadow-lg focus:ring-2 focus:ring-[var(--subtle-gold)] focus:outline-none md:mt-6 md:px-8"
+                        >
+                            Réserver ma session amplifiée ici
+                        </button>
+
+                        <!-- Informations tarif et durée -->
+                        <div class="space-y-2">
+                            <p class="text-spiritual-earth text-sm font-semibold">Durée limitée à 15 jours</p>
+                            <p class="text-midnight-blue text-lg font-bold">Tarif préférentiel pour les détenteurs de tirage numérique : 390 €</p>
+                        </div>
+                    </div>
                 </div>
             </div>
         </main>
diff --git a/resources/js/pages/cards/resultat.vue b/resources/js/pages/cards/resultat.vue
index 362a71c..dd643d5 100644
--- a/resources/js/pages/cards/resultat.vue
+++ b/resources/js/pages/cards/resultat.vue
@@ -94,15 +94,87 @@ onMounted(async () => {
                     class="border-linen rounded-lg border bg-white p-6 text-center shadow-sm transition-all duration-300 hover:shadow-md md:p-8 lg:p-12"
                 >
                     <div class="bg-subtle-gold mx-auto mb-6 h-1 w-16 rounded-full"></div>
-                    <p class="text-midnight-blue/80 mx-auto mb-6 max-w-2xl text-base leading-relaxed md:mb-8 md:text-lg">
-                        Pour une guidance plus approfondie, réservez une consultation personnalisée avec Kris Saint Ange.
-                    </p>
-                    <button
-                        @click="goToBooking"
-                        class="hover:bg-opacity-90 focus:ring-opacity-50 mt-4 inline-flex h-12 min-w-[160px] items-center justify-center rounded-full bg-[var(--subtle-gold)] px-6 text-base font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:shadow-lg focus:ring-2 focus:ring-[var(--subtle-gold)] focus:outline-none md:mt-6 md:px-8"
-                    >
-                        Réserver une Consultation
-                    </button>
+
+                    <!-- Nouveau contenu -->
+                    <div class="space-y-6 text-left">
+                        <!-- En-tête -->
+                        <div class="text-center">
+                            <h3 class="text-midnight-blue mb-4 font-heading text-xl font-bold md:text-2xl">Cher.e Explorateur des Symboles,</h3>
+                        </div>
+
+                        <!-- Grilles de lecture -->
+                        <div class="space-y-3">
+                            <p class="text-midnight-blue/80 font-medium">Votre tirage en ligne vous a offert 3 grilles de lecture :</p>
+                            <div class="space-y-2 pl-4">
+                                <div class="flex items-start space-x-2">
+                                    <span class="text-subtle-gold mt-1">✦</span>
+                                    <p class="text-midnight-blue/80"><strong>La carte-miroir :</strong> votre reflet immédiat</p>
+                                </div>
+                                <div class="flex items-start space-x-2">
+                                    <span class="text-subtle-gold mt-1">✦</span>
+                                    <p class="text-midnight-blue/80"><strong>Les résonances croisées :</strong> interactions énergétiques</p>
+                                </div>
+                                <div class="flex items-start space-x-2">
+                                    <span class="text-subtle-gold mt-1">✦</span>
+                                    <p class="text-midnight-blue/80"><strong>Les flux prospectifs :</strong> potentialités à modeler</p>
+                                </div>
+                            </div>
+                        </div>
+
+                        <!-- Explication consultation -->
+                        <div class="space-y-3">
+                            <p class="text-midnight-blue/80">
+                                Ces révélations ne sont qu'un prélude à ce que nous pourrions accomplir en consultation directe. Parce que les arcanes
+                                :
+                            </p>
+                            <div class="space-y-1 pl-4">
+                                <p class="text-midnight-blue/80">• S'adaptent à votre voix et à vos micro-expressions</p>
+                                <p class="text-midnight-blue/80">• Se densifient grâce au dialogue intuitif en temps réel</p>
+                                <p class="text-midnight-blue/80">• Se transmuent en plan d'action sur-mesure</p>
+                            </div>
+                        </div>
+
+                        <!-- Offre Éclaireur -->
+                        <div class="space-y-3">
+                            <div class="flex items-center space-x-2">
+                                <span class="text-spiritual-earth text-lg">➤</span>
+                                <h4 class="text-midnight-blue font-heading text-lg font-bold">Offre Éclaireur :</h4>
+                            </div>
+                            <p class="text-midnight-blue/80">Bénéficiez d'une analyse approfondie où nous :</p>
+                            <div class="space-y-2 pl-4">
+                                <div class="flex items-start space-x-2">
+                                    <span class="text-spiritual-earth mt-1">1.</span>
+                                    <p class="text-midnight-blue/80">
+                                        Décrypterons les synchronicités entre votre tirage et celui que nous réaliserons ensemble
+                                    </p>
+                                </div>
+                                <div class="flex items-start space-x-2">
+                                    <span class="text-spiritual-earth mt-1">2.</span>
+                                    <p class="text-midnight-blue/80">Activerons les ponts cachés entre passé, présent et futur</p>
+                                </div>
+                                <div class="flex items-start space-x-2">
+                                    <span class="text-spiritual-earth mt-1">3.</span>
+                                    <p class="text-midnight-blue/80">Cristalliserons une boussole stratégique pour vos prochains choix</p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Bouton CTA et informations -->
+                    <div class="mt-8 space-y-4">
+                        <button
+                            @click="goToBooking"
+                            class="hover:bg-opacity-90 focus:ring-opacity-50 mt-4 inline-flex h-12 min-w-[160px] items-center justify-center rounded-full bg-[var(--subtle-gold)] px-6 text-base font-bold tracking-wide text-[var(--midnight-blue)] transition-all duration-300 hover:shadow-lg focus:ring-2 focus:ring-[var(--subtle-gold)] focus:outline-none md:mt-6 md:px-8"
+                        >
+                            Réserver ma session amplifiée ici
+                        </button>
+
+                        <!-- Informations tarif et durée -->
+                        <div class="space-y-2">
+                            <p class="text-spiritual-earth text-sm font-semibold">Durée limitée à 15 jours</p>
+                            <p class="text-midnight-blue text-lg font-bold">Tarif préférentiel pour les détenteurs de tirage numérique : 390 €</p>
+                        </div>
+                    </div>
                 </div>
             </div>
         </main>