feat: redesign home #4

Code-for-Senegal · Aug 22, 2024 · c0d5967 · c0d5967
1 parent e1587ce
commit c0d5967
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 61 deletions.
diff --git a/app.vue b/app.vue
@@ -7,42 +7,24 @@ const links = [{
   icon: 'i-heroicons-home',
   to: '/',
 }, {
-  label: "Rapports",
-  description: "Cours des Comptes, OFNAC, IGE, CENTIF, ARMP, IGF",
-  photo: '/unknown_member.webp',
-  icon: 'i-heroicons-document-text',
-  to: '/rapport-senegal',
-},
-{
-  label: 'JO',
-  description: 'Textes législatifs, Lois, Décrets, Arrêtés',
+  label: 'Actualités',
+  description: 'Communiqués, Annonces, Articles',
   photo: '/unknown_member.webp',
   icon: 'i-heroicons-newspaper',
-  to: '/journal-officiel-senegal',
-},
-{
-  label: 'Codes',
-  description: 'Constitution, Code de la famille, etc',
-  photo: '/unknown_member.webp',
-  icon: 'i-heroicons-clipboard-document-list',
-  to: '/code-senegal',
+  to: '/publications/actualites',
 },
 {
-  label: 'Nominations',
-  description: 'Annuaire des nominations du président',
-  photo: '/unknown_member.webp',
-  icon: 'i-heroicons-identification',
-  to: '/nomination-senegal',
+  label: 'Annuaires',
+  description: "Gouvernement, Sites Web, Justice...",
+  icon: 'i-heroicons-rectangle-stack',
+  to: '/annuaires',
 },
 {
-  label: "Sites Web",
-  description: 'Annuaire des sites internet publics',
-  photo: '/unknown_member.webp',
-  icon: 'i-heroicons-computer-desktop',
-  to: '/annuaire-sites-publics-senegal',
-},
-
-]
+  label: 'Documents',
+  description: "Journal officiel, Codes, Rapports OFNAC Cours des comptes...",
+  icon: 'i-heroicons-document-text',
+  to: '/documents',
+}];
 
 const aboutUslinks = [
   {
@@ -70,14 +52,13 @@ const aboutUslinks = [
     label: 'À Propos',
     to: '/about/us',
     icon: 'i-heroicons-information-circle',
-  }
-]
+  }];
 
 
 </script>
 
 <template>
-  <div class="md:px-10 lg:px-28 xl:px-40 top-header flex justify-between items-center top-0 z-50 sticky opacity-100">
+  <div class="md:px-10 lg:px-18 xl:px-32 top-header flex justify-between items-center top-0 z-50 sticky opacity-100">
     <!-- HeaderBrand à gauche -->
     <AppHeader />
 

diff --git a/pages/annuaires.vue b/pages/annuaires.vue
@@ -0,0 +1,69 @@
+<script setup lang="ts">
+useHead({
+    title: "Annuaires du Sénégal",
+    meta: [
+        {
+            name: 'description',
+            content: "Accédez aux annuaires du Sénégal: Nominations Gouvernement, Justice, Media, Sites Web publics et plus encore.",
+        },
+    ],
+})
+
+const menuCategories = [
+    {
+        title: 'Annuaire Gouvernement',
+        description: "Nominations, Ministres, DG...",
+        icon: 'i-heroicons-identification',
+        to: '/nomination-senegal',
+        color: 'bg-green-100 text-green-700'
+    },
+    {
+        title: 'Annuaire Justice',
+        description: 'Magistrature, Acteurs de la justice...',
+        icon: 'i-heroicons-scale',
+        to: '/justice/magistrature',
+        color: 'bg-purple-100 text-purple-700'
+    }, {
+        title: 'Annuaire Médias',
+        description: 'Presse, Radio, Télévision, Médias en ligne',
+        icon: 'i-heroicons-radio',
+        to: '/medias',
+        color: 'bg-red-100 text-red-700'
+    }, {
+        title: "Annuaire Sites Web",
+        description: 'Annuaire des sites internet publics',
+        icon: 'i-heroicons-computer-desktop',
+        to: '/annuaire-sites-publics-senegal',
+        color: 'bg-blue-100 text-blue-700'
+    }
+]
+</script>
+
+<template>
+    <div class="container mx-auto p-2 sm:p-4">
+
+        <!-- <h1 class="text-3xl font-bold text-center text-gray-800 mb-8">Documents</h1> -->
+
+        <div class="prose prose-sm sm:prose mx-auto my-2">
+            <h1 class="text-center">Annuaires</h1>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-2">
+            <UCard v-for="menu in menuCategories" :key="menu.title" class="p-4 custom-shadow hover:shadow-xl">
+                <NuxtLink :to="menu.to" class="flex items-start">
+                    <div class="flex-shrink-0 mr-4">
+                        <div :class="['w-14 h-14 rounded-full flex items-center justify-center', menu.color]">
+                            <UIcon :name="menu.icon" class="w-8 h-8" />
+                        </div>
+                    </div>
+                    <div>
+                        <h2 class="font-bold">{{ menu.title }}</h2>
+                        <!-- <h2 class="text-xl font-semibold mb-2">{{ category.title }}</h2> -->
+                        <p class="text-gray-700 text-sm">{{ menu.description }}</p>
+                    </div>
+                </NuxtLink>
+            </UCard>
+        </div>
+
+    </div>
+</template>
diff --git a/pages/documents.vue b/pages/documents.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 useHead({
-    title: "Documents officiels du Sénégal | Vie-Publique.sn",
+    title: "Documents officiels du Sénégal",
     meta: [
         {
             name: 'description',
@@ -57,7 +57,7 @@ const documentCategories = [
         </div>
 
         <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mt-2">
-            <UCard v-for="menu in documentCategories" :key="menu.label" class="p-4 custom-shadow hover:shadow-xl">
+            <UCard v-for="menu in documentCategories" :key="menu.title" class="p-4 custom-shadow hover:shadow-xl">
                 <NuxtLink :to="menu.to" class="flex items-start">
                     <div class="flex-shrink-0 mr-4">
                         <div :class="['w-14 h-14 rounded-full flex items-center justify-center', menu.color]">

diff --git a/pages/index.vue b/pages/index.vue
@@ -22,43 +22,27 @@ const { data: latestNews } = await useAsyncData('latestNews', () =>
 )
 
 const links = [
-
     {
-        label: 'Annuaire Gouvernement',
-        description: "Nominations, Ministres, DG...",
-        photo: '/unknown_member.webp',
-        icon: 'i-heroicons-identification',
-        to: '/nomination-senegal',
-    }, {
         label: 'Conseil des ministres',
-        description: 'Communiqués conseil des ministres...',
-        photo: '/unknown_member.webp',
+        description: 'Communiqués des conseil des ministres...',
         icon: 'i-heroicons-document',
         to: '/conseil-des-ministres',
     },
+    {
+        label: 'Annuaires',
+        description: "Nominations gouvernement, Sites Web, Justice, Medias...",
+        icon: 'i-heroicons-rectangle-stack',
+        to: '/annuaires',
+    },
     {
         label: 'Documents',
         description: "Journal officiel, Codes, Rapports OFNAC Cours des comptes...",
         icon: 'i-heroicons-document-text',
         to: '/documents',
     },
-    {
-        label: "Sites Web",
-        description: 'Annuaire des sites internet publics',
-        photo: '/unknown_member.webp',
-        icon: 'i-heroicons-computer-desktop',
-        to: '/annuaire-sites-publics-senegal',
-    }, {
-        label: 'Annuaire Justice',
-        description: 'Annuaire Magistrature, Fonctionnement de la justice etc.',
-        photo: '/unknown_member.webp',
-        icon: 'i-heroicons-scale',
-        to: '/justice',
-    },
     {
         label: 'Quiz Jeux',
-        description: 'Jeux QCM sur les institutions publiques',
-        photo: '/unknown_member.webp',
+        description: "Jeux QCM sur les institutions et l'organisation de l'Etat",
         icon: 'i-heroicons-puzzle-piece',
         to: '/quiz',
     }
@@ -69,6 +53,9 @@ const links = [
 
 <template>
     <div class="container mx-auto p-2 sm:p-4">
+        <!-- Section des liens -->
+        <HomeMenuCards2 :menus="links" />
+
         <!-- Section des dernières actualités -->
         <div class="">
             <div class="prose prose-sm sm:prose mx-auto my-2">
@@ -119,8 +106,6 @@ const links = [
             </div>
         </div>
 
-        <!-- Section des liens -->
-        <HomeMenuCards2 :menus="links" />
     </div>
 </template>