feat: lazy-load CodeModal component

Author: nhsz

src/pages/index.tsx

@@ -1,5 +1,6 @@
 import { ReactNode, useState } from "react"
 import type { GetStaticProps, InferGetStaticPropsType } from "next"
+import dynamic from "next/dynamic"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
@@ -25,7 +26,6 @@ import ActionCard from "@/components/ActionCard"
 import ButtonLink from "@/components/Buttons/ButtonLink"
 import CalloutBanner from "@/components/CalloutBanner"
 import Codeblock from "@/components/Codeblock"
-import CodeModal from "@/components/CodeModal"
 import CommunityEvents from "@/components/CommunityEvents"
 import HomeHero from "@/components/Hero/HomeHero"
 import { Image } from "@/components/Image"
@@ -333,6 +333,11 @@ const HomePage = ({
 
   const cardBoxShadow = useToken("colors", "cardBoxShadow")
 
+  // Lazy-load CodeModal component
+  const CodeModal = dynamic(() => import("@/components/CodeModal"), {
+    ssr: false,
+  })
+
   return (
     <Flex
       as={MainArticle}