fix(ui): replace Help with About in nav, refresh About page, microlearning spacing

src/components/FooterComponent.vue

@@ -1,20 +1,7 @@
-<script setup lang="ts">
-import { WL_FEEDBACK_FORM_URL } from '@/utils/constants';
-import { useFeatureFlipStore } from '@/stores/featureFlip';
-
-const featureFlip = useFeatureFlipStore();
-</script>
-
 <template>
   <div class="footer-wrapper">
     <div>
       <a href="mailto:welearn@learningplanetinstitute.org">welearn@learningplanetinstitute.org</a>
-    </div>
-    <div>
-      <a target="_blank" :href="WL_FEEDBACK_FORM_URL">{{ $t('giveFeedback') }}</a>
-      <router-link v-if="featureFlip.isFeatureEnabled('about')" class="about" to="/about">
-        <span class="item-name">{{ $t('nav.about') }}</span>
-      </router-link>
       <router-link class="terms" to="/terms">
         <span class="item-name">{{ $t('terms') }}</span>
       </router-link>
@@ -37,8 +24,7 @@ a {
   cursor: pointer;
 }
 
-a:first-child,
-.about {
+a:first-child {
   margin-right: 1rem;
   padding-right: 1rem;
   border-right: 1px solid var(--neutral-70);
@@ -55,8 +41,7 @@ a:hover {
     font-size: 0.8rem;
   }
 
-  a:first-child,
-  .about {
+  a:first-child {
     margin-right: 0.5rem;
     padding-right: 0.5rem;
   }

src/components/icons/AboutIcon.vue

@@ -1,7 +1,7 @@
 <template>
   <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path
-      d="M9.99902 14.5V14.5396M7.75 7.22999C7.75 5.96388 8.75736 4.9375 10 4.9375C11.2426 4.9375 12.25 5.96388 12.25 7.22999C12.25 8.4961 11.2426 9.52249 10 9.52249C10 9.52249 9.99902 10.2067 9.99902 11.0508M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z"
+      d="M10 6V6.04M10 9V14M19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1C14.9706 1 19 5.02944 19 10Z"
       stroke="black"
       stroke-width="2"
       stroke-linecap="round"

src/components/microlearning/AutoEvaluationEnd.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="fullPageEvaluation">
     <p class="abadge">{{ $t('autoEvaluation.end.badge') }}</p>
-    <p class="title is-4">{{ $t('autoEvaluation.end.title') }}</p>
+    <p class="title is-spaced is-4">{{ $t('autoEvaluation.end.title') }}</p>
     <p class="subtitle is-6">
       {{ $t('autoEvaluation.end.subtitle') }}
     </p>
@@ -57,6 +57,7 @@ defineEmits<{
 <style lang="css" scoped>
 .fullPageEvaluation {
   padding-top: 1%;
+  padding-inline: 1.5rem;
   display: flex;
   flex-direction: column;
   justify-content: center;

src/components/microlearning/AutoEvaluationStart.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="fullPageEvaluation">
     <p class="abadge">{{ $t('autoEvaluation.start.badge') }}</p>
-    <p class="title is-4">{{ $t('autoEvaluation.start.title') }}</p>
+    <p class="title is-spaced is-4">{{ $t('autoEvaluation.start.title') }}</p>
     <p class="subtitle is-6">
       {{ locked ? $t('autoEvaluation.start.lockedNotice') : $t('autoEvaluation.start.subtitle') }}
     </p>
@@ -48,6 +48,7 @@ defineEmits<{
 <style lang="css" scoped>
 .fullPageEvaluation {
   padding-top: 5%;
+  padding-inline: 1.5rem;
   display: flex;
   flex-direction: column;
   justify-content: center;

src/components/microlearning/CompleteScreen.vue

@@ -3,7 +3,7 @@
     <div class="complete-inner">
       <div class="complete-icon">🌱</div>
 
-      <h1 class="title">{{ $t('microLearning.completeScreen.title') }}</h1>
+      <h1 class="title is-spaced">{{ $t('microLearning.completeScreen.title') }}</h1>
 
       <p class="subtitle">
         {{ $t('microLearning.completeScreen.subtitle') }}

src/components/microlearning/TrailHeader.vue

@@ -120,6 +120,7 @@ function confirmRestart() {
 @media (max-width: 900px) {
   .trail-header {
     grid-template-columns: 1fr;
+    row-gap: 0.75rem;
 
     text-align: center;
 

src/components/microlearning/WelcomeScreen.vue

@@ -1,9 +1,11 @@
 <template>
   <section class="welcome-screen">
     <div class="welcome-inner">
-      <h1 class="title is-size-3">{{ $t('microLearning.welcomeScreen.title') }}</h1>
+      <h1 class="title is-spaced is-size-3 is-size-4-mobile">
+        {{ $t('microLearning.welcomeScreen.title') }}
+      </h1>
 
-      <p class="subtitle">
+      <p class="subtitle is-size-6-mobile">
         {{ $t('microLearning.welcomeScreen.subtitle') }}
       </p>
 
@@ -71,7 +73,7 @@ function start() {
 
 .welcome-inner {
   width: 100%;
-  max-width: 50%;
+  max-width: 44rem;
   text-align: center;
 }
 
@@ -80,10 +82,10 @@ function start() {
 }
 
 .subtitle {
-  max-width: 80%;
+  max-width: 36rem;
   margin: auto;
   margin-bottom: 2.5rem;
-  line-height: 1.7;
+  line-height: 1.5;
   color: var(--neutral-80);
 }
 

src/components/nav/NavComponent.vue

@@ -2,7 +2,7 @@
 import SearchIcon from '@/components/icons/SearchIcon.vue';
 import LinesLeaningIcon from '@/components/icons/LinesLeaningIcon.vue';
 import QnAIcon from '@/components/icons/QnAIcon.vue';
-import HelpComponent from '@/components/nav/HelpComponent.vue';
+import AboutIcon from '@/components/icons/AboutIcon.vue';
 
 import BookIcon from '@/components/icons/BookIcon.vue';
 import NavBookmarkIcon from '@/components/icons/NavBookmarkIcon.vue';
@@ -12,7 +12,7 @@ import LanguageSelector from './LanguageSelector.vue';
 
 const featureFlip = useFeatureFlipStore();
 
-// Features (tools) on the left; personal/utility items on the right. About lives in the footer.
+// Features (tools) on the left; personal/utility items on the right.
 const toolEntries = [
   {
     name: 'chat',
@@ -46,6 +46,13 @@ const utilityEntries = [
     to: '/bookmarks',
     icon: NavBookmarkIcon,
     isFeatureEnabled: featureFlip.isFeatureEnabled('bookmarks')
+  },
+  // ponytail: Help (HelpComponent) removed from nav, its instructions are obsolete; files kept for a future rewrite
+  {
+    name: 'about',
+    to: '/about',
+    icon: AboutIcon,
+    isFeatureEnabled: featureFlip.isFeatureEnabled('about')
   }
 ];
 </script>
@@ -71,8 +78,6 @@ const utilityEntries = [
           />
         </template>
 
-        <HelpComponent />
-
         <LanguageSelector />
       </div>
     </div>

src/localisation/en.ts

@@ -196,57 +196,55 @@ export const en = {
   },
   languages: 'Languages',
   landing: {
-    toolPresentation: 'Tool presentation',
-    sourceNameTitle: 'Resource Name',
-    sourceUrlTitle: 'Resource Link',
-    sourceNumberTitle: 'Number of Documents',
-    sourcesTitle: 'About Our Resources',
+    sourceNameTitle: 'Resource name',
+    sourceUrlTitle: 'Resource link',
+    sourceNumberTitle: 'Number of documents',
+    sourcesTitle: 'About our resources',
     sourcesDescription_1:
-      'WeLearn provides access to a curated collection of open, reliable, and high-quality resources related to the Sustainable Development Goals (SDGs). These resources are identified through the large-scale analysis of more than 16 million online documents.',
+      'WeLearn provides access to a curated collection of open, reliable, and high-quality resources related to the Sustainable Development Goals (SDGs). These resources were identified through a large-scale analysis of more than 16 million online documents.',
     sourcesDescription_2:
-      'All resources made available on the platform meet three core selection criteria: \nopenness, through the use of open-access documents;\nreliability, by drawing from recognized and trusted collections; and \nrelevance, ensured by a classification model that retains only content explicitly linked to one of the 17 SDGs.',
-    sourcesDescription_3: 'The table below presents the distribution of documents by source.',
+      'All resources on the platform meet three core selection criteria:\nopenness, through the use of open-access documents;\nreliability, by drawing on recognized and trusted collections; and\nrelevance, ensured by a classification model that only retains content explicitly linked to one of the 17 SDGs.',
+    sourcesDescription_3: 'The table below shows how documents are distributed by source.',
 
-    slogan: 'Sustainability Education Made Easy',
-    description:
-      'Explore resources, learn, and boost sustainability integration in your courses with AI.',
+    slogan: 'Sustainability education made easy',
+    description: 'Explore resources, learn, and use AI to bring sustainability into your courses.',
     aboutTitle: 'About WeLearn',
     aboutDescription:
-      'WeLearn is a cutting-edge AI-powered learning platform designed to support educators in creating impactful, SDG-focused curricula. Our mission is to make the integration of sustainability into educational content seamless and intuitive. By leveraging advanced AI technologies, WeLearn supports the learning and teaching experience by curating and indexing high-quality, open resources from trusted databases, and using them as grounding for innovative pedagogical features.',
+      'WeLearn is an AI-powered platform that helps educators bring sustainability into their teaching. It draws on a curated collection of open, reliable resources linked to the Sustainable Development Goals (SDGs) and uses them to power practical teaching tools: search, a Q&A assistant, syllabus design, and micro-learning.',
     partnership:
-      'WeLearn is developed by the Learning Planet Institute as part of the “Ecological Transition for Sustainable Development” (TEDS) project. Funded by the French National Research Agency under "France 2030“ (reference: ANR-17-NCUN-0016) and the call for projects ”New University Curricula", the TEDS project is jointly led by the Learning Planet Institute, the UVED Foundation, and CY Cergy Paris University.',
+      'WeLearn is developed by the Learning Planet Institute as part of the TEDS project (“Ecological Transition for Sustainable Development”), jointly led with the UVED Foundation and CY Cergy Paris University. TEDS is funded by the French National Research Agency under France 2030 and the “New University Curricula” call for projects (ref. ANR-17-NCUN-0016).',
     horizontal: {
       section_one: {
-        title: 'Curated Knowledge on Sustainability',
+        title: 'Curated knowledge on sustainability',
         content:
-          'Carefully selected from over 16 million resources, WeLearn features open and reliable content related to the Sustainable Development Goals (SDGs).'
+          'WeLearn features open, reliable content on the Sustainable Development Goals (SDGs), carefully selected from trusted sources.'
       },
       section_two: {
-        title: 'Find What Matters, Fast',
+        title: 'Find what matters, fast',
         content:
-          'Dive into sustainability topics and find the right resources quickly and easily with WeLearn’s semantic search engine.'
+          'Explore sustainability topics and quickly find the right resources with WeLearn’s semantic search engine.'
       },
       section_three: {
-        title: 'Sourced Answers, Tailored to You',
+        title: 'Sourced answers, tailored to you',
         content:
-          'Get precise, referenced answers adapted to your context by chatting with the WeLearn virtual assistant.'
+          'Chat with the WeLearn virtual assistant to get precise, referenced answers adapted to your context.'
       }
     },
     vertical: {
       section_one: {
-        title: 'Supporting Sustainability with AI',
+        title: 'Supporting sustainability with AI',
         content:
           'We place sustainability at the heart of our mission, using technology to support a responsible future.'
       },
       section_two: {
-        title: 'Simplifying Sustainability Education',
+        title: 'Simplifying sustainability education',
         content:
           'We are dedicated to empowering educators worldwide to learn and teach about sustainability.'
       },
       section_three: {
-        title: 'Upholding Responsible AI Principles',
+        title: 'Upholding responsible AI principles',
         content:
-          'We are committed to a transparent and eco-conscious usage of Artificial Intelligence.'
+          'We are committed to a transparent and eco-conscious use of artificial intelligence.'
       }
     }
   },
@@ -338,7 +336,6 @@ export const en = {
     exportingBibliography: 'Exporting...'
   },
   terms: 'Privacy Policy',
-  giveFeedback: 'Feedback Form',
   subjects: {
     Anthropology: 'Anthropology',
     Arts: 'Arts',

src/localisation/fr.ts

@@ -199,39 +199,38 @@ export const fr = {
   },
   languages: 'Langues',
   landing: {
-    toolPresentation: 'Présentation de l’outil',
     sourceNameTitle: 'Nom de la ressource',
     sourceUrlTitle: 'Lien vers la ressource',
     sourceNumberTitle: 'Nombre de documents',
     sourcesTitle: 'À propos de nos ressources',
     sourcesDescription_1:
-      'WeLearn donne accès à un ensemble de ressources ouvertes, fiables et de haute qualité, en lien avec les Objectifs de développement durable (ODD). Ces ressources sont identifiées à partir de l’analyse à grande échelle de plus de 16 millions de documents en ligne.',
+      'WeLearn donne accès à un ensemble de ressources ouvertes, fiables et de haute qualité, en lien avec les Objectifs de développement durable (ODD). Ces ressources ont été identifiées grâce à l’analyse à grande échelle de plus de 16 millions de documents en ligne.',
     sourcesDescription_2:
-      'L’ensemble des ressources proposées sur la plateforme répond à trois critères de sélection fondamentaux : \nl’ouverture, à travers l’utilisation de documents en libre accès ; \nla fiabilité, en s’appuyant sur des collections reconnues ; \nla pertinence, garantie par un modèle de classification qui identifie exclusivement les contenus associés à l’un des 17 ODD.',
+      'L’ensemble des ressources proposées sur la plateforme répond à trois critères de sélection fondamentaux :\nl’ouverture, grâce à l’utilisation de documents en libre accès ;\nla fiabilité, en s’appuyant sur des collections reconnues ;\nla pertinence, garantie par un modèle de classification qui ne retient que les contenus explicitement associés à l’un des 17 ODD.',
     sourcesDescription_3: 'Le tableau ci-dessous présente la répartition des documents par source.',
     slogan: 'L’éducation à la durabilité, facilitée',
     description:
-      'Explorez des ressources, apprenez et renforcez l’intégration de la durabilité dans vos cours avec l’IA.',
+      'Explorez des ressources, apprenez et intégrez la durabilité dans vos cours grâce à l’IA.',
     aboutTitle: 'À propos de WeLearn',
     aboutDescription:
-      'WeLearn est une plateforme d’apprentissage innovante, alimentée par l’intelligence artificielle, conçue pour accompagner les enseignants dans la création de contenus pédagogiques percutants centrés sur les Objectifs de Développement Durable (ODD). Notre mission est de rendre l’intégration de la durabilité dans les contenus éducatifs fluide et intuitive. En s’appuyant sur des technologies d’IA avancées, WeLearn augmente l’apprentissage et l’enseignement en sélectionnant et en indexant des ressources ouvertes de haute qualité, issues de bases de données fiables, qui servent de socle de référence à des fonctionnalités pédagogiques innovantes.',
+      'WeLearn est une plateforme qui s’appuie sur l’intelligence artificielle pour aider les enseignants à intégrer la durabilité dans leurs cours. Elle repose sur une sélection de ressources ouvertes et fiables liées aux Objectifs de développement durable (ODD), qui alimentent des outils pédagogiques concrets : recherche, assistant questions-réponses, conception de syllabus et micro-learning.',
     partnership:
-      'WeLearn est développé par le Learning Planet Institute dans le cadre du projet « Transition Écologique pour un Développement Soutenable » (TEDS). Financé par l’Agence Nationale de la Recherche, au titre de « France 2030 » (référence ANR-17-NCUN-0016) et l’appel à projets « Nouveaux Cursus à l’Université », le projet TEDS est porté conjointement par le Learning Planet Institute, la Fondation UVED et CY Cergy Paris Université.',
+      'WeLearn est développé par le Learning Planet Institute dans le cadre du projet TEDS (« Transition écologique pour un développement soutenable »), porté conjointement avec la Fondation UVED et CY Cergy Paris Université. TEDS est financé par l’Agence nationale de la recherche au titre de France 2030 et de l’appel à projets « Nouveaux cursus à l’université » (référence ANR-17-NCUN-0016).',
     horizontal: {
       section_one: {
-        title: 'Connaissances sur la durabilité',
+        title: 'Une sélection de savoirs sur la durabilité',
         content:
-          'Sélectionnés avec soin parmi plus de 16 millions de ressources, WeLearn propose des contenus ouverts et fiables liés aux Objectifs de développement durable (ODD).'
+          'WeLearn propose des contenus ouverts et fiables sur les Objectifs de développement durable (ODD), sélectionnés avec soin parmi des sources reconnues.'
       },
       section_two: {
         title: 'Trouver ce qui compte, rapidement',
         content:
-          'Plongez dans des sujets de durabilité et trouvez les bonnes ressources rapidement et facilement grâce au moteur de recherche sémantique de WeLearn.'
+          'Explorez les sujets liés à la durabilité et trouvez rapidement les bonnes ressources grâce au moteur de recherche sémantique de WeLearn.'
       },
       section_three: {
-        title: 'Des réponses sourcées, adaptées à vous',
+        title: 'Des réponses sourcées et personnalisées',
         content:
-          'Obtenez des réponses précises et référencées, adaptées à votre contexte, grâce à l’assistant virtuel de WeLearn.'
+          'Échangez avec l’assistant virtuel de WeLearn pour obtenir des réponses précises et référencées, adaptées à votre contexte.'
       }
     },
     vertical: {
@@ -243,12 +242,12 @@ export const fr = {
       section_two: {
         title: 'Simplifier l’éducation à la durabilité',
         content:
-          'Nous nous engageons à donner aux éducateurs du monde entier les moyens d’apprendre et d’enseigner la durabilité.'
+          'Nous nous engageons à donner aux enseignants du monde entier les moyens d’apprendre et d’enseigner la durabilité.'
       },
       section_three: {
-        title: 'Des principes d’IA responsable',
+        title: 'Respecter les principes d’une IA responsable',
         content:
-          'Nous nous engageons pour une utilisation de l’intelligence artificielle transparente et respectueuse de l’environnement'
+          'Nous nous engageons pour une utilisation de l’intelligence artificielle transparente et respectueuse de l’environnement.'
       }
     }
   },
@@ -341,7 +340,6 @@ export const fr = {
     exportingBibliography: 'Export en cours...'
   },
   terms: 'Politique de confidentialité',
-  giveFeedback: 'Formulaire de retour',
   subjects: {
     Anthropology: 'Anthropologie',
     Arts: 'Arts',

src/utils/constants.ts

@@ -9,8 +9,6 @@ export const subjects = [
 ];
 
 export const RELEVANCE_FACTOR = 0.75;
-export const WL_FEEDBACK_FORM_URL =
-  'https://docs.google.com/forms/d/e/1FAIpQLSfL_zKY3aHMMKO-Hunm0LYo4Yp_fjbL87Ryi85qT_pbSqUX8g/viewform';
 
 export const HELP_USER = {
   'q-and-a': [