style: migrate home style and update components

laravelcm · Oct 7, 2024 · 2d2f172 · 2d2f172
1 parent 776d6b0
commit 2d2f172
Show file tree

Hide file tree

Showing 141 changed files with 1,089 additions and 1,055 deletions.
diff --git a/lang/en/actions.php b/lang/en/actions.php
@@ -0,0 +1,9 @@
+<?php
+
+declare(strict_types=1);
+
+return [
+
+    'new_thread' => 'Lancer un thread',
+
+];
diff --git a/lang/en/global.php b/lang/en/global.php
@@ -4,6 +4,8 @@
 
 return [
 
+    'site_name' => 'Laravel Cameroon',
+    'site_description' => 'Bienvenue sur le site de la communauté des développeurs PHP et Laravel du Cameroun, le plus gros rassemblement de développeurs au Cameroun.',
     'by' => 'by',
     'soon' => 'Soon',
     'navigation' => [

diff --git a/lang/en/pages/home.php b/lang/en/pages/home.php
@@ -6,5 +6,12 @@
 
     'title' => 'La plus grande communauté de développeurs Laravel & PHP au Cameroun',
     'description' => 'Laravel Cameroun est le portail de la communauté de développeurs PHP & Laravel au Cameroun, on partage, on apprend, on découvre et on construit une grande communauté.',
+    'sponsor' => [
+        'title' => 'Sponsor',
+        'description' => 'Soutenez Laravel Cameroun aujourd\'hui en sponsorisant',
+        'description_small' => 'Soutenez Laravel Cameroun',
+    ],
+    'join_community' => 'Join the community',
+    'visit_forum' => 'Visit the forum',
 
 ];
diff --git a/lang/fr/actions.php b/lang/fr/actions.php
@@ -0,0 +1,9 @@
+<?php
+
+declare(strict_types=1);
+
+return [
+
+    'new_thread' => 'Lancer un thread',
+
+];
diff --git a/lang/fr/global.php b/lang/fr/global.php
@@ -4,6 +4,8 @@
 
 return [
 
+    'site_name' => 'Laravel Cameroun',
+    'site_description' => 'Bienvenue sur le site de la communauté des développeurs PHP et Laravel du Cameroun, le plus gros rassemblement de développeurs au Cameroun.',
     'by' => 'par',
     'soon' => 'Bientôt',
     'navigation' => [

diff --git a/lang/fr/pages/home.php b/lang/fr/pages/home.php
@@ -6,5 +6,12 @@
 
     'title' => 'La plus grande communauté de développeurs Laravel & PHP au Cameroun',
     'description' => 'Laravel Cameroun est le portail de la communauté de développeurs PHP & Laravel au Cameroun, on partage, on apprend, on découvre et on construit une grande communauté.',
+    'sponsor' => [
+        'title' => 'Sponsor',
+        'description' => 'Soutenez Laravel Cameroun aujourd\'hui en sponsorisant',
+        'description_small' => 'Soutenez Laravel Cameroun',
+    ],
+    'join_community' => 'Rejoindre la communauté',
+    'visit_forum' => 'Visiter le Forum',
 
 ];
diff --git a/resources/css/file-upload.css b/resources/css/file-upload.css
@@ -49,7 +49,7 @@
 /* Download button styles */
 
 .filepond--download-icon {
-    @apply pointer-events-auto mr-1 inline-block h-4 w-4 bg-white align-bottom hover:bg-white/70;
+    @apply pointer-events-auto mr-1 inline-block size-4 bg-white align-bottom hover:bg-white/70;
     -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItZG93bmxvYWQiPjxwYXRoIGQ9Ik0yMSAxNXY0YTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0ydi00Ij48L3BhdGg+PHBvbHlsaW5lIHBvaW50cz0iNyAxMCAxMiAxNSAxNyAxMCI+PC9wb2x5bGluZT48bGluZSB4MT0iMTIiIHkxPSIxNSIgeDI9IjEyIiB5Mj0iMyI+PC9saW5lPjwvc3ZnPg==');
     mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItZG93bmxvYWQiPjxwYXRoIGQ9Ik0yMSAxNXY0YTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0ydi00Ij48L3BhdGg+PHBvbHlsaW5lIHBvaW50cz0iNyAxMCAxMiAxNSAxNyAxMCI+PC9wb2x5bGluZT48bGluZSB4MT0iMTIiIHkxPSIxNSIgeDI9IjEyIiB5Mj0iMyI+PC9saW5lPjwvc3ZnPg==');
     -webkit-mask-repeat: no-repeat;
@@ -59,7 +59,7 @@
 }
 
 .filepond--open-icon {
-    @apply pointer-events-auto mr-1 inline-block h-4 w-4 bg-white align-bottom hover:bg-white/70;
+    @apply pointer-events-auto mr-1 inline-block size-4 bg-white align-bottom hover:bg-white/70;
     -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJoLTYgdy02IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTEwIDZINmEyIDIgMCAwMC0yIDJ2MTBhMiAyIDAgMDAyIDJoMTBhMiAyIDAgMDAyLTJ2LTRNMTQgNGg2bTAgMHY2bTAtNkwxMCAxNCIgLz4KPC9zdmc+Cg==);
     mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJoLTYgdy02IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTEwIDZINmEyIDIgMCAwMC0yIDJ2MTBhMiAyIDAgMDAyIDJoMTBhMiAyIDAgMDAyLTJ2LTRNMTQgNGg2bTAgMHY2bTAtNkwxMCAxNCIgLz4KPC9zdmc+Cg==);
     -webkit-mask-repeat: no-repeat;

diff --git a/resources/js/utils/clipboard.js b/resources/js/utils/clipboard.js
@@ -39,10 +39,10 @@ codeBlocks.forEach((element, key) => {
             </div>
         </div>
         <button @click="copyToClipboard();" class="flex items-center justify-center h-8 text-xs bg-gray-700 rounded-md cursor-pointer w-9 hover:bg-gray-900/50 active:bg-gray-600 focus:bg-gray-700 focus:outline-none text-slate-300 hover:text-white group">
-            <svg x-show="copyNotification" class="w-4 h-4 text-primary-500 stroke-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" x-cloak>
+            <svg x-show="copyNotification" class="size-4 text-primary-500 stroke-current" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" x-cloak>
                 <path stroke-linecap="round" stroke-linejoin="round" d="M4.5 12.75l6 6 9-13.5" />
             </svg>
-            <svg x-show="!copyNotification" class="w-4 h-4 stroke-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+            <svg x-show="!copyNotification" class="size-4 stroke-current" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
                 <g fill="none" stroke="none">
                     <path d="M7.75 7.757V6.75a3 3 0 0 1 3-3h6.5a3 3 0 0 1 3 3v6.5a3 3 0 0 1-3 3h-.992" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
                     <path d="M3.75 10.75a3 3 0 0 1 3-3h6.5a3 3 0 0 1 3 3v6.5a3 3 0 0 1-3 3h-6.5a3 3 0 0 1-3-3v-6.5z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>

diff --git a/resources/views/about.blade.php b/resources/views/about.blade.php
@@ -2,8 +2,8 @@
     <x-container>
         <header class="py-8 sm:py-10 lg:grid lg:grid-cols-2 lg:gap-x-12 lg:py-12">
             <div class="sm:text-center md:mx-auto md:max-w-2xl lg:mx-0 lg:text-left">
-                <h1 class="text-skin-inverted">
-                    <span class="block text-sm font-semibold text-skin-primary sm:text-base lg:text-sm xl:text-base">
+                <h1 class="text-gray-900">
+                    <span class="block text-sm font-semibold text-primary-600 sm:text-base lg:text-sm xl:text-base">
                         À propos
                     </span>
                     <span
@@ -14,11 +14,11 @@ class="mt-2 block text-2xl font-extrabold tracking-tight sm:text-3xl xl:text-4xl
                 </h1>
             </div>
             <div class="mt-8 sm:text-center lg:text-left">
-                <p class="text-base font-normal leading-6 text-skin-base sm:text-lg">
-                    <span class="font-medium text-skin-inverted">
-                        <span class="italic text-skin-primary">"</span>
+                <p class="text-base font-normal leading-6 text-gray-500 dark:text-gray-400 sm:text-lg">
+                    <span class="font-medium text-gray-900">
+                        <span class="italic text-primary-600">"</span>
                         Tout le monde enseigne, tout le monde apprend
-                        <span class="italic text-skin-primary">"</span>
+                        <span class="italic text-primary-600">"</span>
                     </span>
                     . Tel est l'esprit qui est derrière la communauté. Une communauté qui se veut grandissante et qui
                     donne la possibilité à tout le monde de partager ses connaissances et d'apprendre.
@@ -44,16 +44,16 @@ class="mt-2 block text-2xl font-extrabold tracking-tight sm:text-3xl xl:text-4xl
         </section>
 
         <div class="mx-auto max-w-3xl py-8 sm:py-10 lg:max-w-none lg:py-12 xl:pb-20">
-            <h1 class="font-sans text-skin-inverted">
-                <span class="block text-sm font-semibold text-skin-primary sm:text-base lg:text-sm xl:text-base">
+            <h1 class="font-sans text-gray-900">
+                <span class="block text-sm font-semibold text-primary-600 sm:text-base lg:text-sm xl:text-base">
                     Notre histoire
                 </span>
                 <span class="mt-1 block font-heading text-xl font-extrabold tracking-tight sm:text-2xl xl:text-3xl">
                     Nous commençons tout juste
                 </span>
             </h1>
 
-            <div class="prose prose-lg prose-green mt-5 text-skin-base lg:max-w-none">
+            <div class="prose prose-lg prose-green mt-5 text-gray-500 dark:text-gray-400 lg:max-w-none">
                 <div class="lg:grid lg:grid-cols-2 lg:gap-x-12">
                     <div>
                         <p>
@@ -73,7 +73,7 @@ class="mt-2 block text-2xl font-extrabold tracking-tight sm:text-3xl xl:text-4xl
                             </li>
                             <li>
                                 L'entreprise
-                                <span class="font-medium text-skin-primary">Kerawa Cameroun</span>
+                                <span class="font-medium text-primary-600">Kerawa Cameroun</span>
                                 qui a été l'un de nos sponsors.
                             </li>
                             <li>
@@ -168,15 +168,15 @@ class="pointer-events-none absolute inset-0 rounded-xl ring-1 ring-inset ring-gr
             <div class="mt-12 border-t border-skin-base pt-12 sm:mt-14 sm:pt-14">
                 <div class="space-y-12 lg:grid lg:grid-cols-3 lg:gap-24 lg:space-y-0">
                     <div class="font-sans">
-                        <span class="text-sm font-semibold uppercase leading-5 tracking-wide text-skin-primary">
+                        <span class="text-sm font-semibold uppercase leading-5 tracking-wide text-primary-600">
                             Notre équipe
                         </span>
                         <h2
-                            class="mt-2 font-heading text-2xl font-extrabold tracking-tight text-skin-inverted sm:text-3xl"
+                            class="mt-2 font-heading text-2xl font-extrabold tracking-tight text-gray-900 sm:text-3xl"
                         >
                             Équipe de direction
                         </h2>
-                        <p class="mt-5 text-lg text-skin-base">
+                        <p class="mt-5 text-lg text-gray-500 dark:text-gray-400">
                             Laravel Cameroun est une idée qui a été initiée puis transformée en une communauté par 2
                             développeurs parmi les plus influents au Cameroun.
                         </p>
@@ -193,17 +193,17 @@ class="h-16 w-16 rounded-full lg:h-20 lg:w-20"
                                         src="https://avatars.githubusercontent.com/u/14105989?v=4"
                                         alt="Arthur Monney"
                                     />
-                                    <div class="space-y-1 text-lg font-medium leading-6 text-skin-inverted">
+                                    <div class="space-y-1 text-lg font-medium leading-6 text-gray-900">
                                         <h3>Arthur Monney</h3>
                                         <p class="font-sans text-base text-green-600">Développeur Web Fullstack</p>
                                     </div>
                                     <div class="text-lg">
-                                        <p class="text-skin-base">
+                                        <p class="text-gray-500 dark:text-gray-400">
                                             Créateur de
                                             <a
                                                 href="https://github.com/shopperlabs/shopper"
                                                 target="_blank"
-                                                class="text-skin-primary hover:text-skin-primary-hover"
+                                                class="text-primary-600 hover:text-primary-600-hover"
                                             >
                                                 @laravelshopper
                                             </a>
@@ -217,28 +217,28 @@ class="text-skin-primary hover:text-skin-primary-hover"
                                         <li>
                                             <a
                                                 href="https://twitter.com/MonneyArthur"
-                                                class="text-skin-muted hover:text-skin-base"
+                                                class="text-skin-muted hover:text-gray-500 dark:text-gray-400"
                                             >
                                                 <span class="sr-only">Twitter</span>
-                                                <x-icon.twitter class="h-6 w-6" />
+                                                <x-icon.twitter class="size-6" />
                                             </a>
                                         </li>
                                         <li>
                                             <a
                                                 href="https://github.com/mckenziearts"
-                                                class="text-skin-muted hover:text-skin-base"
+                                                class="text-skin-muted hover:text-gray-500 dark:text-gray-400"
                                             >
                                                 <span class="sr-only">Github</span>
-                                                <x-icon.github class="h-6 w-6" />
+                                                <x-icon.github class="size-6" />
                                             </a>
                                         </li>
                                         <li>
                                             <a
                                                 href="https://www.linkedin.com/in/arthurmonney"
-                                                class="text-skin-muted hover:text-skin-base"
+                                                class="text-skin-muted hover:text-gray-500 dark:text-gray-400"
                                             >
                                                 <span class="sr-only">LinkedIn</span>
-                                                <x-icon.linkedin class="h-6 w-6" />
+                                                <x-icon.linkedin class="size-6" />
                                             </a>
                                         </li>
                                     </ul>
@@ -251,14 +251,14 @@ class="h-16 w-16 rounded-full lg:h-20 lg:w-20"
                                         src="https://avatars.githubusercontent.com/u/4902424?v=4"
                                         alt="Fabrice Yopa"
                                     />
-                                    <div class="space-y-1 text-lg font-medium leading-6 text-skin-inverted">
+                                    <div class="space-y-1 text-lg font-medium leading-6 text-gray-900">
                                         <h3>Fabrice Yopa</h3>
                                         <p class="font-sans text-base text-green-600">
                                             Co-Founder & CTO IS Dev Experts
                                         </p>
                                     </div>
                                     <div class="text-lg">
-                                        <p class="font-normal text-skin-base">
+                                        <p class="font-normal text-gray-500 dark:text-gray-400">
                                             CTO at
                                             @isdevexperts
                                             , Expert Lead Dev Web. Laravel Cameroon Organizer
@@ -270,28 +270,28 @@ class="h-16 w-16 rounded-full lg:h-20 lg:w-20"
                                         <li>
                                             <a
                                                 href="https://twitter.com/yopafabrice"
-                                                class="text-skin-muted hover:text-skin-base"
+                                                class="text-skin-muted hover:text-gray-500 dark:text-gray-400"
                                             >
                                                 <span class="sr-only">Twitter</span>
-                                                <x-icon.twitter class="h-6 w-6" />
+                                                <x-icon.twitter class="size-6" />
                                             </a>
                                         </li>
                                         <li>
                                             <a
                                                 href="https://github.com/fabriceyopa"
-                                                class="text-skin-muted hover:text-skin-base"
+                                                class="text-skin-muted hover:text-gray-500 dark:text-gray-400"
                                             >
                                                 <span class="sr-only">Github</span>
-                                                <x-icon.github class="h-6 w-6" />
+                                                <x-icon.github class="size-6" />
                                             </a>
                                         </li>
                                         <li>
                                             <a
                                                 href="https://www.linkedin.com/in/fabriceyopa"
-                                                class="text-skin-muted hover:text-skin-base"
+                                                class="text-skin-muted hover:text-gray-500 dark:text-gray-400"
                                             >
                                                 <span class="sr-only">LinkedIn</span>
-                                                <x-icon.linkedin class="h-6 w-6" />
+                                                <x-icon.linkedin class="size-6" />
                                             </a>
                                         </li>
                                     </ul>