How am I getting worse performance on my landing page when I'm using dynamic imports, if I'd use static imports then it would be 30%. Why is my performance so bad? What can I do?

Landingpage:
Ë›

import Link from "next/link";
import { styles } from "../utils/contants";

import CTA from "../components/Landingpage/CTA";
import Footer from "../components/Landingpage/Footer";
import { ToastContainer } from "react-toastify";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import SocialMedia from "@/components/Landingpage/SocialMedia";
import { useEffect } from "react";

import { serverSideTranslations } from "next-i18next/serverSideTranslations";
import Intro from "@/components/Landingpage/Intro";
import dynamic from "next/dynamic";




  const Navbar = dynamic(() => import("@/components/Landingpage/Navbar"));
  const Hero = dynamic(() => import("@/components/Landingpage/Hero"));
  const Features = dynamic(() => import("@/components/Landingpage/Features"));
  const Suggestion = dynamic(
    () => import("@/components/Landingpage/Suggestion")
  );
  const SuggestionMobile = dynamic(
    () => import("@/components/Landingpage/SuggestionMobile")
  );

  return (
    <div className="bg-primary w-full overflow-hidden">
      <div className={`sm:px-16 px-6 flex justify-center items-center`}>
        <div className={`xl:max-w-[1280px] w-full`}>
          <Navbar />
        </div>
      </div>

      <div className={`bg-primary hero-base flex justify-center items-start`}>
        <div className={`${styles.boxWidth}`}>
          <Hero />
        </div>
      </div>

      <div className={`bg-primary ${styles.paddingX} ${styles.flexCenter}`}>
        <div className={`${styles.boxWidth}`}>
          <Intro />
          <Features />
          <SuggestionMobile />
          <Suggestion />
          <SocialMedia />
          <CTA />
          <Footer />
        </div>
      </div>
    </div>
  );
};

export default Home;