add translation fr & en

messages/en.json

@@ -0,0 +1,37 @@
+{
+  "HomePage": {
+    "title": "Hello world!",
+    "about": "Go to the about page"
+  },
+  "ProjectsSection": {
+    "title": "What we made",
+    "pixel-war": "Pixel War",
+    "hacker-journey": "Hacker Journey",
+    "forum-associatif": "Associatif Forum"
+  },
+  "AboutSection": {
+    "title": "Who we are",
+    "description": "404 Devinci is an association focused on web development and UI/UX design. We're also interested in emerging technologies such as AI and IoT. Our aim is to bring together students who are passionate about the digital world and create innovative projects together.",
+    "description-2": "We work on the creation of web sites and applications, both in-house and in collaboration with our partners. We are also involved in communication activities and organize various events related to our field."
+  },
+  "TeamSection": {
+    "title": "Our team",
+    "meet-the-team": "Meet the team",
+    "secretary": "Secretary ・ Fullstack Developer",
+    "president": "President ・ Fullstack Developer",
+    "treasurer": "Treasurer ・ Fullstack Developer"
+  },
+  "FaqSection": {
+    "title": "questions &",
+    "answers": "answers",
+    "question-1": "Who can join the 404 Devinci association?",
+    "answer-1": "Whether you are a beginner or an expert, if you are a student at the Léonard de Vinci University, you can join us!",
+    "question-2": "Do I need coding skills to join the association?",
+    "answer-2": "No! We recruit UX/UI designers, communication officers, and of course developers. If you are passionate about the web, you are welcome!",
+    "question-3": "Are there any fees to become a member of 404 Devinci?",
+    "answer-3": "No, membership in the association is free. Our goal is to create a group accessible to all to work on concrete projects and improve our skills.",
+    "question-4": "What are the benefits of joining 404 Devinci?",
+    "answer-4": "By joining us, you will have the opportunity to work on real projects, improve your technical skills, and meet other web development enthusiasts. You will also be able to enhance your resume with practical experiences."
+}
+
+}

messages/fr.json

@@ -0,0 +1,41 @@
+{
+  "HomePage": {
+    "title": "Bonjour le monde!",
+    "about": "Aller à la page d'à propos"
+  },
+  "ProjectsSection": {
+    "title": "Ce que nous avons fait",
+    "pixel-war": "Pixel War",
+    "hacker-journey": "Hacker Journey",
+    "forum-associatif": "Forum Associatif"
+  },
+  "AboutSection": {
+    "title": "Qui sommes-nous",
+    "description": "404 Devinci est une association indépendante et autonome qui se consacre à la création de sites web et d'applications pour les personnes à mobilité réduite. Nous sommes également intéressés par l'économie numérique et l'innovation, et nous sommes fiers de contribuer à la société en créant des projets concrets et en améliorant nos compétences techniques.",
+    "description-2": "Nous travaillons sur la création de sites web et d'applications, à la fois en tant que membre de l'association et en tant que contributeur externe. Nous sommes également impliqués dans des communications et organisons des événements liés à notre secteur."
+  },
+  "TeamSection": {
+    "title": "Notre équipe",
+    "meet-the-team": "Rencontrer l'équipe",
+    "secretary": "Secrétaire ・ Fullstack Développeur",
+    "president": "Président ・ Fullstack Développeur",
+    "treasurer": "Trésorier ・ Fullstack Développeur"
+  },
+  "FaqSection": {
+    "title": "questions &",
+    "answers": "réponses",
+    "question-1": "Qui peut rejoindre l'association 404 Devinci ?",
+    "answer-1": "Que tu sois débutant ou expert, si tu es étudiant au pôle universitaire Léonard de Vinci, tu peux nous rejoindre !",
+    "question-2": "Dois-je avoir des compétences en coding pour rejoindre l'association ?",
+    "answer-2": "Non ! Nous recrutons des designers UX/UI, des chargés de communication, et bien sûr des développeurs. Si tu es passionné par le web, tu es le bienvenu !",
+    "question-3": "Y a-t-il des frais pour devenir membre de la 404 Devinci ?",
+    "answer-3": "Non, l'adhésion à l'association est gratuite. Notre objectif est de créer un groupe accessible à tous pour travailler sur des projets concrets et améliorer nos skills.",
+    "question-4": "Quels sont les avantages à rejoindre la 404 Devinci ?",
+    "answer-4": "En nous rejoingnant, tu auras l'opportunité de travailler sur des projets concrets, d'améliorer tes compétences techniques, et de rencontrer d'autres passionnés du développement web. Tu pourras également enrichir ton CV avec des expériences pratiques."
+  }, 
+  "Footer": {
+    "copyright": "2024 © Tous droits réservés",
+    "legal-notices": "Mentions légales", 
+    "social-media": "Réseaux sociaux"
+  }
+}

src/components/buttons/SelectLocale.tsx

@@ -1,8 +1,6 @@
 'use client';
 import { useLocale } from 'next-intl';
-import clsx from 'clsx';
-import { useParams } from 'next/navigation';
-import { ReactNode, useTransition, useState } from 'react';
+import { useTransition, useState } from 'react';
 import { usePathname, useRouter } from '@/i18n/routing';
 import {
   Select,
@@ -18,23 +16,22 @@ export default function LocaleSwitcherSelect() {
   const router = useRouter();
   const [isPending, startTransition] = useTransition();
   const pathname = usePathname();
-  const params = useParams();
-  const initialLocale = useLocale();
-  const [locale, setLocale] = useState<string>(initialLocale);
+  const initialLocale = useLocale() as 'en' | 'fr'; 
+  const [locale, setLocale] = useState<'en' | 'fr'>(initialLocale);
 
-  function onValueChange(nextLocale: string) {
+  function onValueChange(nextLocale: 'en' | 'fr') {
     setLocale(nextLocale);
-    console.log(nextLocale);
+
     startTransition(() => {
       router.replace(
-        pathname, // Changer ici pour passer un string
-        { query: params, locale: nextLocale as string } // Regrouper les options
+        pathname,
+        { locale: nextLocale } 
       );
     });
   }
 
   return (
-    <Select value={locale} onValueChange={onValueChange}>
+    <Select value={locale} onValueChange={onValueChange} disabled={isPending}>
       <SelectTrigger className="w-[180px]">
         <SelectValue placeholder="Select language" />
       </SelectTrigger>
@@ -43,7 +40,7 @@ export default function LocaleSwitcherSelect() {
           <SelectLabel>Select Language</SelectLabel>
           <SelectItem value="en">English</SelectItem>
           <SelectItem value="fr">Français</SelectItem>
-          {/* Ajoutez d'autres options de langue ici */}
+
         </SelectGroup>
       </SelectContent>
     </Select>

src/components/content.tsx

@@ -2,6 +2,7 @@ import { gasoekOne } from "@/app/[locale]/font"
 import cn from "@/utils/function"
 import Arrow from "./arrow"
 import LocaleSwitcherSelect from "../components/buttons/SelectLocale";
+import { useTranslations } from "next-intl";
 
 
 export default function Content() {
@@ -15,6 +16,7 @@ export default function Content() {
 
 
 const BottomFooter = () => {
+  const t = useTranslations('Footer');
     return (
       <div className="flex flex-col gap-8">
         <h2 className={cn(
@@ -25,18 +27,21 @@ const BottomFooter = () => {
         </h2>
         <div className="w-full h-[1px] bg-gray-900" />
         <div className='flex items-center justify-between text-gray-900'>
-          <p>2024 © All Rights Reserved</p>
-          <p>Legal notices</p>
+          <p>{t('copyright')}</p>
+          <p>{t('legal-notices')}</p>
         </div>
       </div>
     )
 }
 
 const Nav = () => {
+  const t = useTranslations('Footer');
     return (
       <div className="w-full flex justify-between">
         <div className="flex flex-col gap-3 text-gray-900">
-          <h3 className="uppercase text-lg sm:text-xl font-semibold">Social media</h3>
+          <h3 className="uppercase text-lg sm:text-xl font-semibold">
+            {t('social-media')}
+          </h3>
           <div className="flex flex-col">
             <div>
               <a 

src/components/sections/faq.tsx

@@ -1,77 +1,60 @@
-import { montserrat } from "@/app/[locale]/font"
+import { montserrat } from "@/app/[locale]/font";
 import cn from "@/utils/function";
 import H2 from "../heading2";
+import {useTranslations} from 'next-intl';
 
-const faqData = {
-  "fr": [
-    {
-      question: "Qui peut rejoindre l'association 404 Devinci ?",
-      answer:
-        "Que tu sois débutant ou expert, si tu es étudiant au pôle universitaire Léonard de Vinci, tu peux nous rejoindre !",
-    },
-    {
-      question:
-        "Dois-je avoir des compétences en coding pour rejoindre l'association ?",
-      answer:
-        "Non ! Nous recrutons des designers UX/UI, des chargés de communication, et bien sûr des développeurs. Si tu es passionné par le web, tu es le bienvenu !",
-    },
-    {
-      question: "Y a-t-il des frais pour devenir membre de la 404 Devinci ?",
-      answer:
-        "Non, l'adhésion à l'association est gratuite. Notre objectif est de créer un groupe accessible à tous pour travailler sur des projets concrets et améliorer nos skills.",
-    },
-    {
-      question: "Quels sont les avantages à rejoindre la 404 Devinci ?",
-      answer:
-        "En nous rejoingnant, tu auras l'opportunité de travailler sur des projets concrets, d'améliorer tes compétences techniques, et de rencontrer d'autres passionnés du développement web. Tu pourras également enrichir ton CV avec des expériences pratiques.",
-    },
-  ],
-  "en": [
-    {
-      question: "Who can join the 404 Devinci association?",
-      answer:
-        "Whether you're a beginner or an expert, if you're a student at the Léonard de Vinci university campus, you can join us!",
-    },
-    {
-      question:
-        "Do I need coding skills to join the association?",
-      answer:
-        "No! We recruit UX/UI designers, communication officers, and of course, developers. If you're passionate about the web, you're welcome!",
-    },
-    {
-      question: "Are there any fees to become a member of 404 Devinci?",
-      answer:
-        "No, membership is free. Our goal is to create an accessible group for everyone to work on real projects and improve our skills.",
-    },
-    {
-      question: "What are the benefits of joining 404 Devinci?",
-      answer:
-        "By joining us, you'll have the opportunity to work on real projects, improve your technical skills, and meet other web development enthusiasts. You can also enhance your CV with practical experience.",
-    },
-  ]
-};
-
+const faqData = [
+  {
+    question: "Qui peut rejoindre l'association 404 Devinci ?",
+    answer:
+      "Que tu sois débutant ou expert, si tu es étudiant au pôle universitaire Léonard de Vinci, tu peux nous rejoindre !",
+  },
+  {
+    question:
+      "Dois-je avoir des compétences en coding pour rejoindre l'association ?",
+    answer:
+      "Non ! Nous recrutons des designers UX/UI, des chargés de communication, et bien sûr des développeurs. Si tu es passionné par le web, tu es le bienvenu !",
+  },
+  {
+    question: "Y a-t-il des frais pour devenir membre de la 404 Devinci ?",
+    answer:
+      "Non, l'adhésion à l'association est gratuite. Notre objectif est de créer un groupe accessible à tous pour travailler sur des projets concrets et améliorer nos skills.",
+  },
+  {
+    question: "Quels sont les avantages à rejoindre la 404 Devinci ?",
+    answer:
+      "En nous rejoingnant, tu auras l'opportunité de travailler sur des projets concrets, d'améliorer tes compétences techniques, et de rencontrer d'autres passionnés du développement web. Tu pourras également enrichir ton CV avec des expériences pratiques.",
+  },
+];
 
 const FaqSection = () => {
+
+  const t = useTranslations('FaqSection');
+
   return (
-    <div className="w-full max-w-[1700px] mx-auto my-80 px-5 lg:px-10 flex flex-col 
+    <div
+      className="w-full max-w-[1700px] mx-auto my-80 px-5 lg:px-10 flex flex-col 
       lg:flex-row lg: justify-between gap-y-12 gap-x-10 "
     >
       <H2 className="flex flex-col flex-shrink-0">
-        <span className={cn(montserrat.className)}>questions &</span>
-        <span> answers</span>
+        <span className={cn(montserrat.className)}>{t('title')}</span>
+        <span> {t('answers')}</span>
       </H2>
       <div className="flex flex-col w-full max-w-3xl">
-        {faqData.en.map(({ question, answer }, index) => (
-          <div 
-            key={`faq:${index}`} 
+        {faqData.map((faq, index) => (
+          <div
+            key={`faq:${index}`}
             className={cn(
               "flex flex-col gap-2 py-8 px-2",
-              index === 0 ? "border-t border-b border-gray-800" : "border-b border-gray-800"
+              index === 0
+                ? "border-t border-b border-gray-800"
+                : "border-b border-gray-800"
             )}
           >
-            <h3 className="text-lg font-semibold text-gray-50">{question}</h3>
-            <p className="text-gray-300">{answer}</p>
+            <h3 className="text-lg font-semibold text-gray-50">
+              {t(`question-${index + 1}`)}
+            </h3>
+            <p className="text-gray-300">{t(`answer-${index + 1}`)}</p>
           </div>
         ))}
       </div>

src/components/sections/team.tsx

@@ -1,46 +1,54 @@
 import Arrow from "../arrow";
 import H2 from "../heading2";
 import MemberCard from "../member-card";
+import {useTranslations} from 'next-intl';
 
 const members = [
   {
     "name": "Nicolas",
     "position": "President・Fullstack Developer",
+    "slug": "president",
     "image": "nicolas.jpg",
   },
   {
     "name": "Mattéo",
     "position": "Secretary・Fullstack Developer",
     "image": "matteo.jpg",
+    "slug": "secretary",
   },
   {
     "name": "Michel",
     "position": "Treasurer・Fullstack Developer",
     "image": "michel.png",
+    "slug": "treasurer",
   },
 ]
 
 
 
 const TeamSection = () => {
+
+  const t = useTranslations('TeamSection');
   return ( 
     <div className="w-full max-w-[1700px] mx-auto mt-80 px-5 lg:px-10">
       <div className="flex justify-between sm:items-end flex-col 
         sm:flex-row"
         >
         <H2>
-          Our team
+          {t('title')}
         </H2>
         <div className="flex items-center gap-2 max-sm:my-4">
           <Arrow color={50} />
           <span className="uppercase text-lg ">
-            Meet the team
+            {t('meet-the-team')}
           </span>
         </div>
       </div>
       <div className="grid grid-cols-1 sm:grid-cols-3 items-center gap-5 sm:mt-12 flex-wrap">
         {members.map((member, index) => (
-          <MemberCard key={index} member={member} />
+          <MemberCard key={index} member={{
+            ...member, 
+            position: t(`${member.slug}`) as string }} />
         ))}
       </div>
     </div>

src/i18n/request.ts

@@ -4,7 +4,7 @@ import {routing} from './routing';
 
 export default getRequestConfig(async ({locale}) => {
   // Validate that the incoming `locale` parameter is valid
-  if (!routing.locales.includes(locale as any)) notFound();
+  if (!routing.locales.includes(locale as 'fr' || "en")) notFound();
 
   return {
     messages: (await import(`../../messages/${locale}.json`)).default

src/i18n/routing.ts

@@ -6,10 +6,8 @@ export const routing = defineRouting({
   locales: ['en', 'fr'],
 
   // Used when no locale matches
-  defaultLocale: 'en'
+  defaultLocale: 'fr'
 });
 
-// Lightweight wrappers around Next.js' navigation APIs
-// that will consider the routing configuration
 export const {Link, redirect, usePathname, useRouter} =
   createSharedPathnamesNavigation(routing);