fix: fix translation of footer section

components/footer/Footer.tsx

@@ -1,88 +1,81 @@
 import Link from 'next/link';
 import React from 'react';
-
+import { useRouter } from 'next/router';
+import { useTranslation } from 'next-i18next';
 import { HeadingTypeStyle } from '@/types/typography/Heading';
 
 import AsyncAPILogoLight from '../logos/AsyncAPILogoLight';
 import Heading from '../typography/Heading';
 import type { InitiativeLink, SocialMediaLink } from './FooterList';
+interface FooterProps {
+  currentLanguage: string;
+}
 import { initiativeLinks, socialMediaLinks } from './FooterList';
 
-/**
- * @description The Footer component is the footer for the application.
- */
-export default function Footer() {
+export default function Footer({ currentLanguage }: FooterProps) {
+  const { t } = useTranslation('footer');
+
   return (
-    <footer className='margin: 0 auto mt-12 bg-dark'>
-      <div className='mx-auto max-w-screen-xl divide-y divide-cool-gray overflow-hidden px-3 py-4 sm:p-6 md:py-12 lg:px-8 xl:py-16'>
-        <nav className='flex flex-wrap justify-between py-4 sm:py-10'>
-          <div className='mr-14 w-full md:w-auto'>
-            <div className=''>
-              <Link href='/' aria-label='AsyncAPI'>
-                <span className='cursor-pointer' data-testid='Footer-logo-link'>
-                  <AsyncAPILogoLight className='mt-3 h-10 w-auto' />
-                </span>
-              </Link>
-            </div>
-            <div className=''>
-              <Heading className='mb-14 mt-12 text-white' typeStyle={HeadingTypeStyle.smSemibold}>
-                Building the future of <br /> Event-Driven Architectures.
-              </Heading>
-            </div>
+    <footer className='mt-12 bg-dark'>
+      <div className='mx-auto max-w-screen-xl px-3 py-4 sm:px-6 md:py-12 lg:px-8 xl:py-16'>
+        <nav className='flex flex-wrap justify-between gap-8 py-4 sm:py-10'>
+          {/* Logo & Main Heading */}
+          <div className='w-full md:w-auto'>
+            <Link href='/' aria-label='AsyncAPI'>
+              <span className='cursor-pointer' data-testid='Footer-logo-link'>
+                <AsyncAPILogoLight className='mt-3 h-10 w-auto' />
+              </span>
+            </Link>
+            <Heading className='mb-10 mt-8 text-white' typeStyle={HeadingTypeStyle.smSemibold}>
+              {t('buildingFuture')}
+            </Heading>
           </div>
 
-          <div className='flex flex-col sm:flex-row'>
-            <div className='flex'>
-              <div className='mb-5 px-0 lg:ml-5 lg:px-10'>
-                <div className='py-2'>
-                  <div className='text-white'>
-                    <Heading typeStyle={HeadingTypeStyle.smSemibold}>The Initiative</Heading>
-                  </div>
-                </div>
-                <ul className='justify-center'>
-                  {initiativeLinks.map((link: InitiativeLink, index: number) => (
-                    <li className='py-2' key={index} data-testid='Footer-initiative-links'>
-                      <Link href={link.url}>
-                        <span className='text-base leading-6 text-cool-gray transition duration-300 ease-in-out hover:text-white'>
-                          {link.label}
-                        </span>
-                      </Link>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-
-              <div className='mb-5 px-14 sm:ml-10 sm:px-8 md:ml-5'>
-                <div className='py-2'>
-                  <div className='text-white'>
-                    <Heading typeStyle={HeadingTypeStyle.smSemibold}>News</Heading>
-                  </div>
-                </div>
-                <ul className='justify-center'>
-                  <li className='py-2'>
-                    <div className='text-base leading-6 text-cool-gray transition duration-300 ease-in-out hover:text-white'>
-                      <a href='mailto:press@asyncapi.io'>Email Us</a>
-                    </div>
+          {/* Links Section */}
+          <div className='flex flex-wrap gap-6 md:gap-12'>
+            {/* Initiatives */}
+            <div className='min-w-[150px]'>
+              <Heading typeStyle={HeadingTypeStyle.smSemibold} className='text-white mb-2'>
+                {t('initiative')}
+              </Heading>
+              <ul>
+                {initiativeLinks.map((link: InitiativeLink, index: number) => (
+                  <li key={index} className='py-1'>
+                    <Link href={link.url}>
+                      <span className='text-base text-cool-gray transition duration-300 ease-in-out hover:text-white'>
+                        {t(link.label)}
+                      </span>
+                    </Link>
                   </li>
-                </ul>
-              </div>
+                ))}
+              </ul>
             </div>
 
-            <div className='mb-5 px-0 sm:ml-5 sm:px-10'>
-              <div className='hidden py-2 sm:block'>
-                <div className='mr-12 text-white'>
-                  <Heading typeStyle={HeadingTypeStyle.smSemibold}>Social</Heading>
-                </div>
-              </div>
-              <ul className='flex justify-start sm:flex-col' aria-label='AsyncAPI social media links'>
+            {/* News */}
+            <div className='min-w-[150px]'>
+              <Heading typeStyle={HeadingTypeStyle.smSemibold} className='text-white mb-2'>
+                {t('news')}
+              </Heading>
+              <ul>
+                <li className='py-1'>
+                  <a href='mailto:press@asyncapi.io' className='text-cool-gray transition hover:text-white'>
+                    {t('emailUs')}
+                  </a>
+                </li>
+              </ul>
+            </div>
+
+            {/* Social Media */}
+            <div className='min-w-[150px]'>
+              <Heading typeStyle={HeadingTypeStyle.smSemibold} className='text-white mb-2'>
+                {t('social')}
+              </Heading>
+              <ul className='flex flex-col'>
                 {socialMediaLinks.map((link: SocialMediaLink, index: number) => (
-                  <li className='mr-3 py-2 sm:mr-0' key={index} data-testid='Footer-social-media-links'>
-                    <a href={link.url} target='_blank' rel='noopener noreferrer'>
-                      <div className='flex items-center text-cool-gray transition duration-300 ease-in-out hover:text-white'>
-                        <span className='sr-only'>{`Follow AsyncAPI on ${link.label}`}</span>
-                        {link.icon}
-                        <span className='absolute hidden pl-8 pr-5 sm:block'>{link.label}</span>
-                      </div>
+                  <li key={index} className='py-1'>
+                    <a href={link.url} target='_blank' rel='noopener noreferrer' className='flex items-center gap-2 text-cool-gray transition hover:text-white'>
+                      {link.icon}
+                      <span className='hidden sm:inline'>{link.label}</span>
                     </a>
                   </li>
                 ))}
@@ -91,34 +84,23 @@ export default function Footer() {
           </div>
         </nav>
 
-        <div className='justify-between py-8 sm:flex sm:py-12 xl:mt-20' data-testid='Footer-content'>
-          <div className='w-full sm:w-2/3'>
-            <p className='mb-3 text-left text-base leading-6 text-cool-gray'>
-              Made with <span className='font-mono text-secondary-500'>:love:</span> by the AsyncAPI Initiative.
-            </p>
-            <p className='w-full text-left text-sm leading-6 text-cool-gray sm:w-2/3' data-testid='Footer-copyright'>
-              Copyright &copy; AsyncAPI Project a Series of LF Projects, LLC. For web site terms of use, trademark
-              policy and general project policies please see{' '}
-              <a
-                href='https://lfprojects.org'
-                className='text-secondary-500 underline transition duration-300 ease-in-out hover:text-white'
-                target='_blank'
-                rel='noopener noreferrer'
-              >
-                https://lfprojects.org
-              </a>
-            </p>
+        {/* Bottom Section */}
+        <div className='flex flex-wrap items-center justify-between py-8 sm:py-12'>
+          <div className='w-full sm:w-auto text-cool-gray text-sm'>
+            <p className='mb-3'>{t('madeWithLove')}</p>
+            <p>{t('copyright')}</p>
           </div>
-          <div className='mt-8 block sm:mt-0'>
-            <p className='block text-sm leading-6'>
-              <a href='https://netlify.com' target='_blank' rel='noopener noreferrer'>
-                <img
-                  src='https://www.netlify.com/img/global/badges/netlify-color-bg.svg'
-                  className='inline'
-                  alt='Deploys by Netlify'
-                />
-              </a>
-            </p>
+          <div className='mt-6 sm:mt-0'>
+            <a 
+            href='https://netlify.com' 
+            target='_blank'
+             rel='noopener noreferrer'>
+            <img
+             src='https://www.netlify.com/img/global/badges/netlify-color-bg.svg'
+              className='h-6'
+               alt='Deploys by Netlify'
+                />          
+                  </a>
           </div>
         </div>
       </div>

components/footer/FooterList.ts

@@ -6,6 +6,7 @@ import IconSlack from '../icons/Slack';
 import IconTwitch from '../icons/Twitch';
 import IconTwitter from '../icons/Twitter';
 import IconYoutubeGray from '../icons/YouTubeGray';
+import { useTranslation } from 'next-i18next';
 
 export interface SocialMediaLink {
   url: string;
@@ -73,3 +74,12 @@ export const initiativeLinks: InitiativeLink[] = [
     url: '/about#faqs'
   }
 ];
+
+export function TranslatedInitiativeLinks() {
+  const { t } = useTranslation('footer');
+
+  return initiativeLinks.map((link) => ({
+    ...link,
+    label: t(link.label)
+  }));
+}

next-i18next.config.cjs

@@ -1,17 +1,13 @@
-// The file is required to be named next-i18next.config.cjs so we can use it in next.config.js.
-// https://github.com/i18next/next-i18next/issues/2185#issuecomment-1618307556
-process.env.I18NEXT_DEFAULT_CONFIG_PATH = './next-i18next.config.cjs';
-
 module.exports = {
   i18n: {
     locales: ['en', 'de'],
     defaultLocale: 'en',
-    namespaces: ['landing-page', 'common', 'tools'],
+    namespaces: ['landing-page', 'common', 'tools', 'footer'],
     defaultNamespace: 'landing-page',
-    react: { useSuspense: false } // this line
+    react: { useSuspense: false },// this line
   },
   langMap: {
     en: 'English',
-    de: 'Deutsch'
-  }
+    de: 'Deutsch',
+  },
 };

next.config.mjs

@@ -1,11 +1,6 @@
-import frontmatter from 'remark-frontmatter';
-import images from 'remark-images';
-import gemoji from 'remark-gemoji-to-emoji';
-import a11yEmoji from '@fec/remark-a11y-emoji';
-import slug from 'remark-slug';
-import headingId from 'remark-heading-id';
-import remarkGfm from 'remark-gfm';
-import withMDX from '@next/mdx';
+import mdx from '@next/mdx';
+
+const withMDX = mdx();
 
 /**
  * @type {import('next').NextConfig}
@@ -18,20 +13,24 @@ const nextConfig = {
   output: 'export',
   webpack(config, { isServer }) {
     if (!isServer) {
-      config.resolve.fallback.fs = false;
+      config.resolve.fallback = { fs: false };
     }
-
     return config;
   }
 };
 
-const mdxConfig = withMDX({
+export default withMDX({
   extension: /\.mdx?$/,
-  providerImportSource: "@mdx-js/react",
   options: {
-    remarkPlugins: [frontmatter, gemoji, headingId, slug, images, a11yEmoji, remarkGfm],
+    remarkPlugins: [
+      require('remark-frontmatter'),
+      require('remark-gemoji-to-emoji'),
+      require('remark-heading-id'),
+      require('remark-slug'),
+      require('remark-images'),
+      require('@fec/remark-a11y-emoji'),
+      require('remark-gfm')
+    ],
     rehypePlugins: []
   }
-});
-
-export default mdxConfig(nextConfig);
+})(nextConfig);