From e3c38f74e18e2ff2b8875659f5322a834b3f089a Mon Sep 17 00:00:00 2001
From: Nimrod Kramer <41470823+nimrodkra@users.noreply.github.com>
Date: Mon, 21 Jul 2025 09:30:23 +0300
Subject: [PATCH 1/3] style: update hero title styles for improved typography
 and responsiveness

- Changed font size and weight for the hero title to enhance visual impact.
- Adjusted media query styles for better responsiveness on smaller screens.
---
 src/pages/index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index cc04b78..3761549 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -86,12 +86,12 @@ export default function Home() {
         {/* Inline critical CSS for above-the-fold content */}
         <style>{`
           .heroBanner_KU2A{padding:2rem 0 0 0;text-align:center;position:relative;overflow:hidden}
-          .hero__title{font-size:3rem;font-weight:900;line-height:1.2;margin-bottom:0;color:var(--ifm-font-color-base)}
+          .hero__title{font-size:62px;font-weight:700;line-height:115%;margin-bottom:0;color:var(--ifm-font-color-base);font-family:'Montserrat',sans-serif;margin-top:2rem}
           .theme-layout-footer{min-height:350px}
           .footer__links{min-height:200px}
           .footer__col{min-height:180px}
           .footer__bottom{min-height:50px}
-          @media screen and (max-width:966px){.heroBanner_KU2A{padding:2rem}.hero__title{font-size:2rem}.theme-layout-footer{min-height:600px}.footer__links{min-height:450px}.footer__col{min-height:100px}}
+          @media screen and (max-width:966px){.heroBanner_KU2A{padding:2rem}.hero__title{font-size:48px}.theme-layout-footer{min-height:600px}.footer__links{min-height:450px}.footer__col{min-height:100px}}
         `}</style>
 
         {/* Prefetch important pages */}

From 551be95267b8a0ddeee2f225d0fff84d1636b4eb Mon Sep 17 00:00:00 2001
From: Nimrod Kramer <41470823+nimrodkra@users.noreply.github.com>
Date: Mon, 21 Jul 2025 09:37:45 +0300
Subject: [PATCH 2/3] style: enhance layout and loading indicators for improved
 user experience

- Added minimum height styles for main sections to ensure consistent layout across various screen sizes.
- Updated loading indicator's minimum height and added padding for better visibility and alignment.
---
 src/pages/index.js | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index 3761549..957d0cb 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -87,11 +87,15 @@ export default function Home() {
         <style>{`
           .heroBanner_KU2A{padding:2rem 0 0 0;text-align:center;position:relative;overflow:hidden}
           .hero__title{font-size:62px;font-weight:700;line-height:115%;margin-bottom:0;color:var(--ifm-font-color-base);font-family:'Montserrat',sans-serif;margin-top:2rem}
+          main section{min-height:2100px;padding:2rem 0}
           .theme-layout-footer{min-height:350px}
           .footer__links{min-height:200px}
           .footer__col{min-height:180px}
           .footer__bottom{min-height:50px}
+          @media screen and (max-width:1680px){main section{min-height:1900px}}
+          @media screen and (max-width:1180px){main section{min-height:3200px}}
           @media screen and (max-width:966px){.heroBanner_KU2A{padding:2rem}.hero__title{font-size:48px}.theme-layout-footer{min-height:600px}.footer__links{min-height:450px}.footer__col{min-height:100px}}
+          @media screen and (max-width:768px){main section{min-height:4800px}}
         `}</style>
 
         {/* Prefetch important pages */}
@@ -109,12 +113,13 @@ export default function Home() {
             fallback={
               <div
                 style={{
-                  minHeight: '200px',
+                  minHeight: '2100px',
                   display: 'flex',
                   alignItems: 'center',
                   justifyContent: 'center',
                   fontSize: '14px',
                   color: 'var(--ifm-color-emphasis-600)',
+                  padding: '2rem 0',
                 }}
               >
                 Loading navigation...

From 206200f0fa3c184c05cfe5bb513b58a4b157126e Mon Sep 17 00:00:00 2001
From: Nimrod Kramer <41470823+nimrodkra@users.noreply.github.com>
Date: Mon, 21 Jul 2025 09:41:04 +0300
Subject: [PATCH 3/3] refactor: import HomeNavBoxes directly for improved
 performance

- Replaced lazy loading of HomeNavBoxes with direct import to enhance loading speed for critical content.
- Removed unnecessary Suspense component, simplifying the rendering logic.
---
 src/pages/index.js | 32 ++++----------------------------
 1 file changed, 4 insertions(+), 28 deletions(-)

diff --git a/src/pages/index.js b/src/pages/index.js
index 957d0cb..c959dc3 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -1,4 +1,4 @@
-import React, { Suspense } from 'react';
+import React from 'react';
 import clsx from 'clsx';
 import Layout from '@theme/Layout';
 import Link from '@docusaurus/Link';
@@ -9,10 +9,8 @@ import { Redirect } from '@docusaurus/router';
 import ErrorBoundary from '../components/ErrorBoundary';
 import StructuredData from '../structured-data/schema';
 
-// Lazy load non-critical components
-const HomeNavBoxes = React.lazy(
-  () => import('../components/homepage/homeNavBoxes')
-);
+// Import HomeNavBoxes directly since it's above-the-fold critical content
+import HomeNavBoxes from '../components/homepage/homeNavBoxes';
 
 function HomepageHeader() {
   return (
@@ -87,15 +85,11 @@ export default function Home() {
         <style>{`
           .heroBanner_KU2A{padding:2rem 0 0 0;text-align:center;position:relative;overflow:hidden}
           .hero__title{font-size:62px;font-weight:700;line-height:115%;margin-bottom:0;color:var(--ifm-font-color-base);font-family:'Montserrat',sans-serif;margin-top:2rem}
-          main section{min-height:2100px;padding:2rem 0}
           .theme-layout-footer{min-height:350px}
           .footer__links{min-height:200px}
           .footer__col{min-height:180px}
           .footer__bottom{min-height:50px}
-          @media screen and (max-width:1680px){main section{min-height:1900px}}
-          @media screen and (max-width:1180px){main section{min-height:3200px}}
           @media screen and (max-width:966px){.heroBanner_KU2A{padding:2rem}.hero__title{font-size:48px}.theme-layout-footer{min-height:600px}.footer__links{min-height:450px}.footer__col{min-height:100px}}
-          @media screen and (max-width:768px){main section{min-height:4800px}}
         `}</style>
 
         {/* Prefetch important pages */}
@@ -109,25 +103,7 @@ export default function Home() {
       <HomepageHeader />
       <main>
         <ErrorBoundary>
-          <Suspense
-            fallback={
-              <div
-                style={{
-                  minHeight: '2100px',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  fontSize: '14px',
-                  color: 'var(--ifm-color-emphasis-600)',
-                  padding: '2rem 0',
-                }}
-              >
-                Loading navigation...
-              </div>
-            }
-          >
-            <HomeNavBoxes />
-          </Suspense>
+          <HomeNavBoxes />
         </ErrorBoundary>
       </main>
     </Layout>