feat: enhance homepage navigation and image loading

- Replaced anchor tags with Docusaurus Link components for better client-side navigation.
- Added eager loading and sync decoding attributes to icons for improved performance.
- Implemented image preloading in the HomepageFeatures component to reduce flashing during navigation.
- Updated CSS for list container links to improve styling and hover effects.

Author: nimrodkra

docusaurus.config.js

@@ -94,11 +94,10 @@ const config = {
           }
         ],
         createRedirects(existingPath) {
-          // Handle trailing slash normalization and ensure proper routing
-          if (existingPath.includes('/docs/')) {
+          // Handle trailing slash normalization for client-side routing
+          if (existingPath.includes('/docs/') && !existingPath.endsWith('/')) {
             return [
-              existingPath.replace('/docs/', '/docs'),
-              existingPath.replace('/docs', '/docs'),
+              existingPath + '/',
             ];
           }
           return undefined;

src/components/homepage/homeNavBoxes.js

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import clsx from 'clsx';
+import Link from '@docusaurus/Link';
 import styles from './homeNavBoxes.module.css';
 
 const FeatureList = [
@@ -113,18 +114,22 @@ const FeatureList = [
 
 function FeatureItem({url, text}){
   return (
-    <li><a className={styles.listContainerLink} href={url}>{text}</a></li>
+    <li><Link className={styles.listContainerLink} to={url}>{text}</Link></li>
   );
 }
 
 
 function Feature({title, icon, items }) {
-
-
   return (
     <article className={clsx('col col--4')}>
       <div className={styles.homecard}>
-        <img src={icon} className={styles.homeIcon}></img>
+        <img 
+          src={icon} 
+          className={styles.homeIcon}
+          loading="eager"
+          decoding="sync"
+          alt={`${title} icon`}
+        />
         <h2>{title}</h2>
         <div className={styles.listContainer}>
         <ul>
@@ -134,14 +139,21 @@ function Feature({title, icon, items }) {
         </ul>
         </div>
       </div>
-
     </article>
   );
 }
 
 
 
 export default function HomepageFeatures() {
+  useEffect(() => {
+    // Preload all images to prevent flashing during navigation
+    FeatureList.forEach(feature => {
+      const img = new Image();
+      img.src = feature.icon;
+    });
+  }, []);
+
   return (
     <section className={styles.features}>
         <ul className={styles.grid3col}>

src/components/homepage/homeNavBoxes.module.css

@@ -134,12 +134,30 @@ html[data-theme='dark'] .homecard h2 {
   text-decoration: underline;
 }
 
+.listContainerLink {
+  display: block;
+  padding: 0.25rem 0;
+  border-radius: 4px;
+  transition: background-color 0.2s ease, color 0.2s ease;
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.listContainerLink:hover {
+  background-color: rgba(0, 123, 255, 0.1);
+  text-decoration: none;
+}
+
 .homeIcon {
   width: 32px;
   height: 32px;
   border-radius: 0 !important;
   /* margin: 12px 0 4px 16px; */
   filter: brightness(0.9);
+  will-change: filter;
+  transition: filter 0.3s ease;
+  image-rendering: crisp-edges;
+  backface-visibility: hidden;
 }
 
 html[data-theme='light'] .homeIcon {