fix: use react memo and lazy importing

package.json

@@ -30,8 +30,7 @@
     "react-icons": "^5.3.0",
     "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7",
-    "zod": "^3.22.4",
-    "prism-wasm-lightclient": "github:deltadevsde/prism#prism-wasm:crates/node_types/wasm-lightclient"
+    "zod": "^3.22.4"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.6.1",

src/app/components/ContentSections.tsx

@@ -18,7 +18,7 @@ const ContentSection = () => {
           </div>
           <div className='w-full md:w-[40%]'>
             <video
-              src='/images/Verifiable.mp4'
+              src='/images/Verif_new3.mp4'
               autoPlay
               loop
               muted

src/app/components/InfoCard.tsx

@@ -10,14 +10,14 @@ interface InfoCardProps {
 const InfoCard = ({ title, description, imageSrc }: InfoCardProps) => {
   return (
     <div className='flex flex-col border-2 border-[#FFF1EE] bg-[#131111] p-8'>
-      <div className='mx-auto mb-8 flex h-60 w-60 items-center'>
+      <div className='mx-auto mb-8 flex h-60 w-60 items-center lg:h-80 lg:w-80'>
         {imageSrc && (
-          <div className='relative mx-auto h-60 w-60'>
+          <div className='relative mx-auto h-60 w-60 lg:h-80 lg:w-80'>
             <Image
               src={imageSrc}
               alt={`${title} icon`}
               className='object-contain'
-              sizes='10vw'
+              sizes='20vw'
               fill
               loading='lazy'
             />

src/app/components/LightNodeModal.tsx

@@ -1,7 +1,8 @@
-import Spline from '@splinetool/react-spline';
 import { X } from 'lucide-react';
 import React, { useEffect, useRef, useState } from 'react';
 
+const Spline = React.lazy(() => import('@splinetool/react-spline'));
+
 import { LogEntry, useLightClient } from '@/lib/use-light-client';
 
 interface ModalProps {
@@ -61,6 +62,15 @@ const LogContainer = ({ logs }: { logs: LogEntry[] }) => {
   );
 };
 
+const SplineContainer = React.memo(() => (
+  <React.Suspense fallback={<div>Loading...</div>}>
+    <Spline
+      style={{ height: 1000, width: 1000 }}
+      scene='https://prod.spline.design/V30jxm7Rt3T1ZpnJ/scene.splinecode'
+    />
+  </React.Suspense>
+));
+
 const LightNodeModal = ({ isOpen, onClose }: ModalProps) => {
   const [modalPosition, setModalPosition] = useState(0);
 
@@ -167,10 +177,7 @@ const LightNodeModal = ({ isOpen, onClose }: ModalProps) => {
             <div className='relative order-1 h-48 md:order-2 md:h-96'>
               <div className='absolute inset-0 flex items-center justify-center'>
                 <div className='origin-center scale-[0.2] md:scale-[0.35]'>
-                  <Spline
-                    style={{ height: 1000, width: 1000 }}
-                    scene='https://prod.spline.design/V30jxm7Rt3T1ZpnJ/scene.splinecode'
-                  />
+                  {isOpen && <SplineContainer />}
                 </div>
               </div>
             </div>