diff --git a/components/SneakPeek.tsx b/components/SneakPeek.tsx
index 67ad6296d6fd..7edbce00ecec 100644
--- a/components/SneakPeek.tsx
+++ b/components/SneakPeek.tsx
@@ -130,45 +130,55 @@ export default function SneakPeek() {
     </>
   );
 
-  const renderGenerationCode = () => (
-    <>
-      <div>
-        <span className='text-gray-500'>{'//'} Generated TypeScript code</span>
-      </div>
-      <div>
-        <span className='text-purple-400'>export</span> <span className='text-purple-400'>interface</span>{' '}
-        <span className='text-yellow-200'>UserSignedUp</span> {'{'}
-      </div>
-      <div>
-        &nbsp;&nbsp;<span className='text-white'>displayName</span>: <span className='text-teal-400'>string</span>;
-      </div>
-      <div>
-        &nbsp;&nbsp;<span className='text-white'>email</span>: <span className='text-teal-400'>string</span>;
-      </div>
-      <div>{'}'}</div>
-      <div>&nbsp;</div>
-      <div>
-        <span className='text-purple-400'>export</span> <span className='text-purple-400'>class</span>{' '}
-        <span className='text-yellow-200'>UserSignupService</span> {'{'}
-      </div>
-      <div>
-        &nbsp;&nbsp;<span className='text-purple-400'>async</span>{' '}
-        <span className='text-yellow-300'>processSignup</span>(<span className='text-orange-300'>message</span>:{' '}
-        <span className='text-yellow-200'>UserSignedUp</span>): <span className='text-yellow-200'>Promise</span>
-        {'<'}
-        <span className='text-teal-400'>void</span>
-        {'>'} {'{'}
-      </div>
-      <div>
-        &nbsp;&nbsp;&nbsp;&nbsp;<span className='text-gray-500'>{'//'} Your business logic here</span>
-      </div>
-      <div>
-        &nbsp;&nbsp;&nbsp;&nbsp;<span className='text-yellow-200'>console</span>{'.'}<span className='text-yellow-300'>log</span>{'('}<span className='text-teal-200'>{`\`Processing signup for \${message.displayName}\``}</span>{')'}{';'}
-      </div>
-      <div>&nbsp;&nbsp;{'}'}</div>
-      <div>{'}'}</div>
-    </>
-  );
+  const renderGenerationCode = () => {
+    const logStatement = String.raw`\`Processing signup for \${message.displayName}\``;
+
+    return (
+      <>
+        <div>
+          <span className='text-gray-500'>{'//'} Generated TypeScript code</span>
+        </div>
+        <div>
+          <span className='text-purple-400'>export</span> <span className='text-purple-400'>interface</span>{' '}
+          <span className='text-yellow-200'>UserSignedUp</span> {'{'}
+        </div>
+        <div>
+          &nbsp;&nbsp;<span className='text-white'>displayName</span>: <span className='text-teal-400'>string</span>;
+        </div>
+        <div>
+          &nbsp;&nbsp;<span className='text-white'>email</span>: <span className='text-teal-400'>string</span>;
+        </div>
+        <div>{'}'}</div>
+        <div>&nbsp;</div>
+        <div>
+          <span className='text-purple-400'>export</span> <span className='text-purple-400'>class</span>{' '}
+          <span className='text-yellow-200'>UserSignupService</span> {'{'}
+        </div>
+        <div>
+          &nbsp;&nbsp;<span className='text-purple-400'>async</span>{' '}
+          <span className='text-yellow-300'>processSignup</span>(<span className='text-orange-300'>message</span>:{' '}
+          <span className='text-yellow-200'>UserSignedUp</span>): <span className='text-yellow-200'>Promise</span>
+          {'<'}
+          <span className='text-teal-400'>void</span>
+          {'>'} {'{'}
+        </div>
+        <div>
+          &nbsp;&nbsp;&nbsp;&nbsp;<span className='text-gray-500'>{'//'} Your business logic here</span>
+        </div>
+        <div>
+          &nbsp;&nbsp;&nbsp;&nbsp;<span className='text-yellow-200'>console</span>
+          {'.'}
+          <span className='text-yellow-300'>log</span>
+          {'('}
+          <span className='text-teal-200'>{logStatement}</span>
+          {')'}
+          {';'}
+        </div>
+        <div>&nbsp;&nbsp;{'}'}</div>
+        <div>{'}'}</div>
+      </>
+    );
+  };
 
   const renderDocumentationCode = () => (
     <div className='font-sans text-gray-800'>
@@ -212,7 +222,10 @@ export default function SneakPeek() {
                   <div className='text-sm font-medium text-gray-700'>email</div>
                   <div>
                     <div className='font-bold text-green-500 text-sm'>
-                      String{' '}<span className='ml-2 rounded bg-yellow-300 px-1.5 py-0.5 text-xs text-black font-normal'>email</span>
+                      String{' '}
+                      <span className='ml-2 rounded bg-yellow-300 px-1.5 py-0.5 text-xs text-black font-normal'>
+                        email
+                      </span>
                     </div>
                     <div className='text-xs text-gray-600 mt-1'>Email of the user</div>
                   </div>
diff --git a/components/navigation/MobileNavMenu.tsx b/components/navigation/MobileNavMenu.tsx
index 56544e4bce77..941fc614593a 100644
--- a/components/navigation/MobileNavMenu.tsx
+++ b/components/navigation/MobileNavMenu.tsx
@@ -54,6 +54,15 @@ export default function MobileNavMenu({
   }
 
   const { langMap } = i18nextConfig;
+  const sectionToggleButtonClass =
+    'inline-flex items-center transition-transform duration-200 hover:text-secondary-600 dark:hover:text-secondary-400';
+  const otherLinkClass =
+    'mb-3 block rounded-lg px-3 py-2 text-base font-medium leading-6 text-gray-700 dark:text-gray-300';
+  const otherLinkHoverClass =
+    'transition-all duration-150 ease-in-out hover:bg-gray-100/60 dark:hover:bg-gray-700/40 hover:translate-x-1';
+  const languageButtonClass =
+    'mb-3 ml-2 block w-full rounded-lg px-3 py-2 text-start text-sm font-medium leading-6 transition-all duration-150';
+  const languageButtonHoverClass = 'ease-in-out hover:bg-gray-100/60 dark:hover:bg-gray-700/40 hover:translate-x-1';
 
   return (
     <div className='fixed inset-x-0 top-0 z-60 max-h-full origin-top-right overflow-y-auto py-2 transition lg:hidden animate-in fade-in slide-in-from-top-5 duration-300'>
@@ -104,9 +113,7 @@ export default function MobileNavMenu({
                 aria-expanded={open === 'learning'}
                 aria-label='Toggle Docs menu'
                 onClick={() => showMenu('learning')}
-                className={`inline-flex items-center transition-transform duration-200 hover:text-secondary-600 dark:hover:text-secondary-400 ${
-                  open === 'learning' ? 'rotate-180' : ''
-                }`}
+                className={`${sectionToggleButtonClass} ${open === 'learning' ? 'rotate-180' : ''}`}
               >
                 <NavItemDropdown />
               </button>
@@ -130,9 +137,7 @@ export default function MobileNavMenu({
                 aria-expanded={open === 'tooling'}
                 aria-label='Toggle Tools menu'
                 onClick={() => showMenu('tooling')}
-                className={`inline-flex items-center transition-transform duration-200 hover:text-secondary-600 dark:hover:text-secondary-400 ${
-                  open === 'tooling' ? 'rotate-180' : ''
-                }`}
+                className={`${sectionToggleButtonClass} ${open === 'tooling' ? 'rotate-180' : ''}`}
               >
                 <NavItemDropdown />
               </button>
@@ -156,9 +161,7 @@ export default function MobileNavMenu({
                 aria-expanded={open === 'community'}
                 aria-label='Toggle Community menu'
                 onClick={() => showMenu('community')}
-                className={`inline-flex items-center transition-transform duration-200 hover:text-secondary-600 dark:hover:text-secondary-400 ${
-                  open === 'community' ? 'rotate-180' : ''
-                }`}
+                className={`${sectionToggleButtonClass} ${open === 'community' ? 'rotate-180' : ''}`}
               >
                 <NavItemDropdown />
               </button>
@@ -179,22 +182,20 @@ export default function MobileNavMenu({
                     aria-expanded={open === 'others'}
                     aria-label='Toggle Others menu'
                     onClick={() => showMenu('others')}
-                    className={`inline-flex items-center transition-transform duration-200 hover:text-secondary-600 dark:hover:text-secondary-400 ${
-                      open === 'others' ? 'rotate-180' : ''
-                    }`}
+                    className={`${sectionToggleButtonClass} ${open === 'others' ? 'rotate-180' : ''}`}
                   >
                     <NavItemDropdown />
                   </button>
                 </h4>
                 {open === 'others' && (
                   <div className='animate-in fade-in slide-in-from-top-2 duration-200'>
-                    {otherItems.map((item: MenuItem, index: number) => (
+                    {otherItems.map((item: MenuItem) => (
                       <Link
                         href={item.href}
                         key={item.href}
                         target={item.target || '_self'}
                         rel='noopener noreferrer'
-                        className='mb-3 block rounded-lg px-3 py-2 text-base font-medium leading-6 text-gray-700 dark:text-gray-300 transition-all duration-150 ease-in-out hover:bg-gray-100/60 dark:hover:bg-gray-700/40 hover:translate-x-1'
+                        className={`${otherLinkClass} ${otherLinkHoverClass}`}
                         data-testid='MobileNav-others'
                       >
                         {item.text}
@@ -217,9 +218,7 @@ export default function MobileNavMenu({
                     aria-expanded={open === 'language'}
                     aria-label='Toggle Language menu'
                     onClick={() => showMenu('language')}
-                    className={`inline-flex items-center transition-transform duration-200 hover:text-secondary-600 dark:hover:text-secondary-400 ${
-                      open === 'language' ? 'rotate-180' : ''
-                    }`}
+                    className={`${sectionToggleButtonClass} ${open === 'language' ? 'rotate-180' : ''}`}
                   >
                     <NavItemDropdown />
                   </button>
@@ -230,7 +229,7 @@ export default function MobileNavMenu({
                       <button
                         key={lang.key}
                         onClick={() => changeLanguage(lang.value.toLowerCase(), true)}
-                        className={`mb-3 ml-2 block w-full rounded-lg px-3 py-2 text-start text-sm font-medium leading-6 transition-all duration-150 ease-in-out hover:bg-gray-100/60 dark:hover:bg-gray-700/40 hover:translate-x-1 ${
+                        className={`${languageButtonClass} ${languageButtonHoverClass} ${
                           currentLanguage.toLowerCase() === lang.text.toLowerCase()
                             ? 'text-secondary-600 dark:text-secondary-400 bg-secondary-100/70 dark:bg-gray-700/50'
                             : 'text-gray-700 dark:text-gray-300'