From 6234e02fa7245510a5fef92d314c2a2cf61fb8ea Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mr=C2=A4KayJayDee?= Date: Thu, 26 Jun 2025 10:06:19 +0200 Subject: [PATCH] =?UTF-8?q?feat(formation):=20ajout=20de=20la=20page=20de?= =?UTF-8?q?=20formation=20et=20des=20animations=20d'entr=C3=A9e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Création d'une nouvelle page de formation avec des sections pour les plans tarifaires et les FAQ. - Ajout de nouvelles animations CSS pour les entrées de page et les éléments. - Mise à jour des traductions pour inclure la section de formation en anglais et en français. - Intégration de la nouvelle route pour accéder à la page de formation. - Amélioration des styles CSS pour la page de formation. --- src/assets/main.css | 59 +++- src/components/layout/AppHeader.vue | 1 + src/locales/en.ts | 73 +++++ src/locales/fr.ts | 73 +++++ src/router/index.ts | 5 + src/views/AboutPage.vue | 2 +- src/views/ContactPage.vue | 16 +- src/views/FiverrPage.vue | 21 +- src/views/FormationPage.vue | 170 +++++++++++ src/views/HomePage.vue | 2 +- src/views/ProjectDetailPage.vue | 4 +- src/views/ProjectsPage.vue | 8 +- src/views/styles/FormationPage.css | 435 ++++++++++++++++++++++++++++ 13 files changed, 843 insertions(+), 26 deletions(-) create mode 100644 src/views/FormationPage.vue create mode 100644 src/views/styles/FormationPage.css diff --git a/src/assets/main.css b/src/assets/main.css index 0da21c7..22ce8bd 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -718,6 +718,18 @@ a:hover { } /* Animations */ +/* Page Entrance Animations */ +@keyframes pageEnter { + from { + opacity: 0; + transform: translateY(20px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + @keyframes fadeInUp { from { opacity: 0; @@ -749,16 +761,57 @@ a:hover { } } +@keyframes slideInLeft { + from { + opacity: 0; + transform: translateX(-30px); + } + to { + opacity: 1; + transform: translateX(0); + } +} + +@keyframes scaleIn { + from { + opacity: 0; + transform: scale(0.9); + } + to { + opacity: 1; + transform: scale(1); + } +} + +/* Page Animation Classes */ +.page-enter { + animation: pageEnter 0.6s ease-out; +} + +/* Enhanced Load Animation Classes */ .animate-fade-in-up { - animation: fadeInUp 0.6s ease-out; + animation: fadeInUp 0.6s ease-out forwards; + opacity: 0; } .animate-fade-in { - animation: fadeIn 0.6s ease-out; + animation: fadeIn 0.6s ease-out forwards; + opacity: 0; } .animate-slide-in-right { - animation: slideInRight 0.6s ease-out; + animation: slideInRight 0.6s ease-out forwards; + opacity: 0; +} + +.animate-slide-in-left { + animation: slideInLeft 0.6s ease-out forwards; + opacity: 0; +} + +.animate-scale-in { + animation: scaleIn 0.6s ease-out forwards; + opacity: 0; } /* Mobile Menu */ diff --git a/src/components/layout/AppHeader.vue b/src/components/layout/AppHeader.vue index 7fca8b4..72528ac 100644 --- a/src/components/layout/AppHeader.vue +++ b/src/components/layout/AppHeader.vue @@ -14,6 +14,7 @@ const navigation = computed(() => [ { name: t('nav.projects'), path: '/projects' }, { name: t('nav.about'), path: '/about' }, { name: t('nav.contact'), path: '/contact' }, + { name: t('nav.formation'), path: '/formation' }, { name: t('nav.fiverr'), path: '/fiverr' }, ]) diff --git a/src/locales/en.ts b/src/locales/en.ts index ff17e72..9b2a9cd 100644 --- a/src/locales/en.ts +++ b/src/locales/en.ts @@ -5,6 +5,7 @@ export default { projects: 'Portfolio Projects', about: 'About', contact: 'Contact', + formation: 'Training', fiverr: 'Fiverr Services' }, @@ -440,5 +441,77 @@ export default { ] } } + }, + pricing: { + title: 'Choose your learning plan', + subtitle: 'Access comprehensive web development training with our flexible plans tailored for all levels', + monthly: 'Monthly', + annual: 'Annual', + mostPopular: 'Most Popular', + startTrial: 'Start Free Trial', + trialInfo: '14-day free trial, then billing', + plans: { + starter: { + name: 'Starter', + description: 'Perfect to begin your web development journey' + }, + pro: { + name: 'Pro', + description: 'Ideal for developers who want to accelerate their learning' + }, + expert: { + name: 'Expert', + description: 'For those aiming for excellence and a professional career' + } + }, + features: { + basicCourses: 'Access to basic courses (HTML, CSS, JavaScript)', + communityAccess: 'Access to learning community', + mobileApp: 'Mobile app to learn anywhere', + basicSupport: 'Email support', + certificates: 'Completion certificates', + allCourses: 'Access to all courses and technologies', + liveWorkshops: 'Live workshops every week', + mentorship: 'Monthly mentorship sessions', + prioritySupport: '24/7 priority support', + jobBoard: 'Access to exclusive job board', + portfolioReview: 'Portfolio review by experts', + everythingPro: 'Everything in Pro plan included', + oneOnOneCoaching: 'Weekly one-on-one coaching', + customProjects: 'Custom projects based on your goals', + internshipPlacement: 'Internship placement assistance', + careerGuidance: 'Personalized career guidance', + exclusiveContent: 'Exclusive and early-access content', + networkingEvents: 'Networking events with professionals' + }, + faq: { + title: 'Frequently Asked Questions', + items: { + trial: { + question: 'How does the free trial work?', + answer: 'Enjoy 14 days of full access to your chosen plan. No commitment, you can cancel anytime during the trial period.' + }, + cancel: { + question: 'Can I cancel my subscription anytime?', + answer: 'Yes, you can cancel your subscription anytime from your dashboard. Access remains active until the end of your billing period.' + }, + refund: { + question: 'Do you offer a money-back guarantee?', + answer: 'We offer a 30-day money-back guarantee if you\'re not satisfied with your training.' + }, + upgrade: { + question: 'Can I change plans during my subscription?', + answer: 'Absolutely! You can upgrade to a higher plan anytime. The difference will be prorated.' + }, + certificates: { + question: 'Are the certificates recognized?', + answer: 'Our certificates are recognized by many tech companies and can be added to your LinkedIn profile.' + }, + support: { + question: 'What type of support is available?', + answer: 'Depending on your plan, you have access to email support, live chat, or personalized mentorship sessions.' + } + } + } } } diff --git a/src/locales/fr.ts b/src/locales/fr.ts index 21fe18a..c8476ba 100644 --- a/src/locales/fr.ts +++ b/src/locales/fr.ts @@ -5,6 +5,7 @@ export default { projects: 'Projets Portfolio', about: 'À propos', contact: 'Contact', + formation: 'Formation', fiverr: 'Services Fiverr' }, @@ -440,5 +441,77 @@ export default { ] } } + }, + pricing: { + title: 'Choisissez votre plan de formation', + subtitle: 'Accédez à une formation complète en développement web avec nos plans flexibles adaptés à tous les niveaux', + monthly: 'Mensuel', + annual: 'Annuel', + mostPopular: 'Le plus populaire', + startTrial: 'Commencer l\'essai gratuit', + trialInfo: '14 jours d\'essai gratuit, puis facturation', + plans: { + starter: { + name: 'Débutant', + description: 'Parfait pour commencer votre parcours en développement web' + }, + pro: { + name: 'Pro', + description: 'Idéal pour les développeurs qui veulent accélérer leur apprentissage' + }, + expert: { + name: 'Expert', + description: 'Pour ceux qui visent l\'excellence et une carrière professionnelle' + } + }, + features: { + basicCourses: 'Accès aux cours de base (HTML, CSS, JavaScript)', + communityAccess: 'Accès à la communauté d\'apprentissage', + mobileApp: 'Application mobile pour apprendre partout', + basicSupport: 'Support par email', + certificates: 'Certificats de completion', + allCourses: 'Accès à tous les cours et technologies', + liveWorkshops: 'Ateliers en direct chaque semaine', + mentorship: 'Sessions de mentorat mensuel', + prioritySupport: 'Support prioritaire 24/7', + jobBoard: 'Accès au tableau d\'emploi exclusif', + portfolioReview: 'Révision de portfolio par des experts', + everythingPro: 'Tout du plan Pro inclus', + oneOnOneCoaching: 'Coaching individuel hebdomadaire', + customProjects: 'Projets personnalisés selon vos objectifs', + internshipPlacement: 'Aide au placement en stage', + careerGuidance: 'Conseils carrière personnalisés', + exclusiveContent: 'Contenu exclusif et avant-première', + networkingEvents: 'Événements de networking avec les pros' + }, + faq: { + title: 'Questions fréquentes', + items: { + trial: { + question: 'Comment fonctionne l\'essai gratuit ?', + answer: 'Profitez de 14 jours d\'accès complet à votre plan choisi. Aucun engagement, vous pouvez annuler à tout moment pendant la période d\'essai.' + }, + cancel: { + question: 'Puis-je annuler mon abonnement à tout moment ?', + answer: 'Oui, vous pouvez annuler votre abonnement à tout moment depuis votre tableau de bord. L\'accès reste actif jusqu\'à la fin de votre période de facturation.' + }, + refund: { + question: 'Offrez-vous une garantie de remboursement ?', + answer: 'Nous offrons une garantie de remboursement de 30 jours si vous n\'êtes pas satisfait de votre formation.' + }, + upgrade: { + question: 'Puis-je changer de plan en cours d\'abonnement ?', + answer: 'Absolument ! Vous pouvez passer à un plan supérieur à tout moment. La différence sera calculée au prorata.' + }, + certificates: { + question: 'Les certificats sont-ils reconnus ?', + answer: 'Nos certificats sont reconnus par de nombreuses entreprises tech et peuvent être ajoutés à votre profil LinkedIn.' + }, + support: { + question: 'Quel type de support est disponible ?', + answer: 'Selon votre plan, vous avez accès au support par email, chat en direct, ou sessions de mentorat personnalisées.' + } + } + } } } diff --git a/src/router/index.ts b/src/router/index.ts index d3a7145..277d687 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -35,6 +35,11 @@ const router = createRouter({ name: 'fiverr', component: () => import('../views/FiverrPage.vue') }, + { + path: '/formation', + name: 'formation', + component: () => import('../views/FormationPage.vue') + }, // TODO: page 404 { path: '/:pathMatch(.*)*', diff --git a/src/views/AboutPage.vue b/src/views/AboutPage.vue index fb66960..b3c873f 100644 --- a/src/views/AboutPage.vue +++ b/src/views/AboutPage.vue @@ -91,7 +91,7 @@ const approachCards = computed(() => [