updated

.babelrc

@@ -1,7 +1,8 @@
 {
-  "presets": ["next/babel", "@babel/preset-env", "@babel/preset-react"],
+  "presets": [["@babel/preset-env", { "loose": false }]],
   "plugins": [
-    ["@babel/plugin-proposal-decorators", { "legacy": true }],
-    ["@babel/plugin-proposal-class-properties", { "loose": true }]
+    ["@babel/plugin-transform-class-properties", { "loose": false }],
+    ["@babel/plugin-transform-private-methods", { "loose": false }],
+    ["@babel/plugin-transform-private-property-in-object", { "loose": false }]
   ]
 }

components/pages/homepage/HeroSection.jsx

@@ -71,6 +71,7 @@ const HeroHeaderSection = () => {
           height={500}
           layout="responsive"
           quality={50}
+          priority={true}
         />
       </div>
 

pages/_document.jsx

@@ -1,4 +1,5 @@
 import Document, { Html, Head, Main, NextScript } from "next/document";
+import React from "react";
 
 class MyDocument extends Document {
   render() {

pages/index.jsx

@@ -1,48 +1,22 @@
-import React, { Suspense } from "react";
-
-import LoadingDots from "@/components/ui/LoadingDots";
-
-const HeroHeaderSection = React.lazy(() =>
-  import("@/components/pages/homepage/HeroSection"),
-);
-const AboutSection = React.lazy(() =>
-  import("@/components/pages/homepage/About"),
-);
-const GallerySection = React.lazy(() =>
-  import("@/components/pages/homepage/Gallery"),
-);
-const CtaSection = React.lazy(() => import("@/components/pages/homepage/CTA"));
-const ContactSection = React.lazy(() =>
-  import("@/components/pages/homepage/Contact"),
-);
+import React from "react";
+import HeroHeaderSection from "@/components/pages/homepage/HeroSection";
+import AboutSection from "@/components/pages/homepage/About";
+import GallerySection from "@/components/pages/homepage/Gallery";
+import CtaSection from "@/components/pages/homepage/CTA";
+import ContactSection from "@/components/pages/homepage/Contact";
 
 const Home = () => {
   return (
     <React.Fragment>
-      <Suspense
-        fallback={
-          <div className="flex justify-center items-center h-screen">
-            Loading Hero Section...
-          </div>
-        }
-      >
-        <HeroHeaderSection />
-      </Suspense>
-      <Suspense fallback={<LoadingDots />}>
-        <AboutSection />
-      </Suspense>
-
-      <Suspense fallback={<LoadingDots />}>
-        <GallerySection />
-      </Suspense>
-
-      <Suspense fallback={<LoadingDots />}>
-        <CtaSection />
-      </Suspense>
-
-      <Suspense fallback={<LoadingDots />}>
-        <ContactSection />
-      </Suspense>
+      <HeroHeaderSection />
+      <br />
+      <AboutSection />
+      <br />
+      <GallerySection />
+      <br />
+      <CtaSection />
+      <br />
+      <ContactSection />
     </React.Fragment>
   );
 };