lighthouse-web3 · pranavkonde · May 10, 2025 · Jun 5, 2025
diff --git a/components/ImageBox/ImageBox.jsx b/components/ImageBox/ImageBox.jsx
@@ -1,5 +1,5 @@
 import Image from "next/image";
-import React from "react";
+import React, { useMemo } from "react";
 import Styles from "./ImageBox.module.scss";
 
 function ImageBox({
@@ -10,35 +10,39 @@ function ImageBox({
   alt,
   src,
   style,
-  layout,
+  layout = "fill",
   aspectRatio,
+  priority = false,
   ...rest
 }) {
-  let dimensions = {};
-  width ? (dimensions["width"] = width) : "100%";
-  maxWidth ? (dimensions["maxWidth"] = maxWidth) : "100%";
-  height ? (dimensions["height"] = height) : "unset";
-  maxHeight ? (dimensions["maxHeight"] = maxHeight) : "unset";
+  const dimensions = useMemo(() => {
+    const dims = {};
+    if (width) dims.width = width;
+    if (maxWidth) dims.maxWidth = maxWidth;
+    if (height) dims.height = height;
+    if (maxHeight) dims.maxHeight = maxHeight;
+    return dims;
+  }, [width, maxWidth, height, maxHeight]);
+
+  const containerClass = aspectRatio ? 
+    Styles.imageRatioContainer : 
+    Styles.imageContainer;
 
   return (
-    <div
-      className={
-        aspectRatio ? Styles.imageRatioContainer : Styles.imageContainer
-      }
-      style={dimensions}
-    >
+    <div className={containerClass} style={dimensions}>
       <Image
         className={Styles.image}
         {...rest}
         style={{ objectFit: "cover", ...style }}
-        // style={style}
-        alt={alt ? alt : "icon"}
+        alt={alt || "image"}
         src={src}
-        objectFit={"contain"}
-        layout={layout ? layout : "fill"}
+        objectFit="contain"
+        layout={layout}
+        priority={priority}
+        loading={priority ? "eager" : "lazy"}
       />
     </div>
   );
 }
 
-export default ImageBox;
+export default React.memo(ImageBox);
diff --git a/components/QuestionBox/QuestionBox.jsx b/components/QuestionBox/QuestionBox.jsx
@@ -1,31 +1,44 @@
-import React, { useState } from "react";
+import React, { useState, useCallback, useMemo } from "react";
 import Styles from "./QuestionBox.module.scss";
 import { BiChevronRight, BiChevronDown } from "react-icons/bi";
 
 function QuestionBox({ question }) {
   const [isOpen, setIsOpen] = useState(false);
+
+  const toggleOpen = useCallback(() => {
+    setIsOpen(prev => !prev);
+  }, []);
+
+  const sanitizedAnswer = useMemo(() => {
+    return question?.attributes?.answer.replace(
+      /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,
+      ''
+    );
+  }, [question?.attributes?.answer]);
+
   return (
     <div className={Styles.QuestionBox}>
-      <div
+      <button
         className={Styles.title}
-        onClick={() => {
-          isOpen ? setIsOpen(false) : setIsOpen(true);
-        }}
+        onClick={toggleOpen}
+        aria-expanded={isOpen}
+        aria-controls={`answer-${question?.id}`}
       >
         <p className={Styles.question}>{question?.attributes?.question}</p>
-        <div className={Styles.icon}>
+        <div className={Styles.icon} aria-hidden="true">
           {isOpen ? <BiChevronDown /> : <BiChevronRight />}
         </div>
-      </div>
+      </button>
 
       {isOpen && (
         <div
+          id={`answer-${question?.id}`}
           className={Styles.answer}
-          dangerouslySetInnerHTML={{ __html: question?.attributes?.answer }}
-        ></div>
+          dangerouslySetInnerHTML={{ __html: sanitizedAnswer }}
+        />
       )}
     </div>
   );
 }
 
-export default QuestionBox;
+export default React.memo(QuestionBox);
diff --git a/components/metadata/Metadata.jsx b/components/metadata/Metadata.jsx
@@ -1,47 +1,57 @@
 import Head from "next/head";
-import { useRouter } from "next/router";
-import React, { useEffect } from "react";
 import Script from "next/script";
+import React from "react";
 
 function Metadata({
   title = "Lighthouse Storage - Store Data Permanently & Securely",
   description = "Decentralized storage powered by Filecoin. Secure, scalable, and ideal for individuals, developers, and enterprises.",
   url = "https://lighthouse.storage/",
   image = "https://gateway.lighthouse.storage/ipfs/Qmd7rR9EPKomhmoRUw2WB7FJAeSWAtC8c1nkKgGZL39LpB",
+  keywords = "decentralized storage, IPFS, Filecoin, permanent storage",
 }) {
-  const router = useRouter();
-
   return (
     <>
       <Head>
         <title>{title}</title>
         <meta name="title" content={title} />
         <meta name="description" content={description} />
+        <meta name="keywords" content={keywords} />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <meta httpEquiv="Content-Type" content="text/html; charset=utf-8" />
+
+        {/* Open Graph */}
         <meta property="og:type" content="website" />
         <meta property="og:url" content={url} />
         <meta property="og:title" content={title} />
         <meta property="og:description" content={description} />
         <meta property="og:image" content={image} />
 
-        {/* <!-- Twitter --> */}
+        {/* Twitter */}
         <meta property="twitter:card" content="summary_large_image" />
         <meta property="twitter:url" content={url} />
         <meta property="twitter:title" content={title} />
-        <meta name="msvalidate.01" content="604856DE8115C3F615EDBDB485DD021A" />
         <meta property="twitter:description" content={description} />
         <meta property="twitter:image" content={image} />
+
+        <meta name="msvalidate.01" content="604856DE8115C3F615EDBDB485DD021A" />
+
+        <link rel="icon" href="/favicon.ico" />
       </Head>
 
-      <Script src="https://www.googletagmanager.com/gtag/js?id=G-20157XPF9Y"></Script>
-      <Script id="google-analytics">
-        {`  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-
-  gtag('config', 'G-20157XPF9Y');`}
+      <Script 
+        src="https://www.googletagmanager.com/gtag/js?id=G-20157XPF9Y"
+        strategy="afterInteractive"
+      />
+      <Script id="google-analytics" strategy="afterInteractive">
+        {`
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+          gtag('config', 'G-20157XPF9Y');
+        `}
       </Script>
     </>
   );
 }
 
-export default Metadata;
+export default React.memo(Metadata);
diff --git a/containers/EcosystemGrid/EcosystemGrid.jsx b/containers/EcosystemGrid/EcosystemGrid.jsx
@@ -1,10 +1,10 @@
-import React, { useState, useContext } from "react";
+import React, { useState, useContext, useMemo, useCallback } from "react";
 import styles from "./EcosystemGrid.module.scss";
 import { RiTwitterXLine } from "react-icons/ri";
 import { FaTelegramPlane } from "react-icons/fa";
 import { SlGlobe } from "react-icons/sl";
 import ThemeContext from "../../utils/services/Themecontext";
-import { ImageBox } from "../../components";
+import ImageBox from "../../components/ImageBox/ImageBox";
 
 const badgeOptions = [
   "Artificial Intelligence (AI)",
@@ -391,21 +391,30 @@ const ecosystemData = [
 
 const EcosystemGrid = () => {
   const [activeTag, setActiveTag] = useState("Artificial Intelligence (AI)");
-  const filtered = ecosystemData.filter((item) =>
-    item.tags.includes(activeTag)
+  const { theme } = useContext(ThemeContext);
+
+  const filtered = useMemo(() => 
+    ecosystemData.filter(item => item.tags.includes(activeTag)),
+    [activeTag]
   );
-  const { theme, setTheme } = useContext(ThemeContext);
+
+  const handleTagClick = useCallback((tag) => {
+    setActiveTag(tag);
+  }, []);
+
+  const imageStyle = useMemo(() => ({
+    filter: theme === "dark" ? "brightness(100%)" : "brightness(10%)"
+  }), [theme]);
 
   return (
     <section className={styles.ecosystemSection}>
       <div className={styles.badgeContainer}>
         {badgeOptions.map((tag) => (
           <button
             key={tag}
-            className={`${styles.badge} ${
-              activeTag === tag ? styles.active : ""
-            }`}
-            onClick={() => setActiveTag(tag)}
+            className={`${styles.badge} ${activeTag === tag ? styles.active : ""}`}
+            onClick={() => handleTagClick(tag)}
+            aria-pressed={activeTag === tag}
           >
             {tag}
           </button>
@@ -416,39 +425,24 @@ const EcosystemGrid = () => {
         {filtered
           .filter((item) => item.image)
           .map((item, idx) => (
-            <div key={idx} className={styles.highlightCard}>
+            <div key={item.name || idx} className={styles.highlightCard}>
               <img
                 src={item.image}
                 alt={item.name}
                 className={styles.highlightImage}
+                loading="lazy"
               />
               <div className={styles.highlightRight}>
-                {/* <img
-                  src={item.icon}
-                  alt={item.name}
-                  className={styles.logo}
-                  style={
-                    theme === "dark"
-                      ? { filter: "brightness(100%)" }
-                      : { filter: "brightness(10%)" }
-                  }
-                /> */}
                 <span>
-                <ImageBox
-                  src={item?.icon}
-                  width={"200px"}
-                  height={"50px"}
-                  // className={styles.logo}
-                  style={
-                    theme === "dark"
-                      ? { filter: "brightness(100%)" }
-                      : { filter: "brightness(10%)" }
-                  }
-                  aspectRatio={true}
-                />
-
+                  <ImageBox
+                    src={item?.icon}
+                    width={"200px"}
+                    height={"50px"}
+                    style={imageStyle}
+                    aspectRatio={true}
+                    alt={`${item.name} icon`}
+                  />
                 </span>
-
                 <p className={styles.desc}>{item.description}</p>
                 <div className={styles.footerIcons}>
                   <span
@@ -540,4 +534,4 @@ const EcosystemGrid = () => {
   );
 };
 
-export default EcosystemGrid;
+export default React.memo(EcosystemGrid);
diff --git a/package.json b/package.json
@@ -6,26 +6,26 @@
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
-    "lint": "next lint"
+    "lint": "next lint",
+    "analyze": "ANALYZE=true next build"
   },
   "dependencies": {
     "aos": "^2.3.4",
     "axios": "^1.1.3",
-    "lighthouse_ui_2.0": "file:",
-    "next": "12.3.1",
+    "next": "^12.3.1",
     "react": "18.2.0",
     "react-countup": "^6.5.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.7.1",
     "react-markdown": "^8.0.5",
     "react-paginate": "^8.1.4",
-    "react-pagination": "^1.0.0",
     "react-toastify": "^9.1.1",
     "rfs": "^10.0.0",
     "sass": "^1.55.0",
     "swiper": "^8.4.7"
   },
   "devDependencies": {
+    "@next/bundle-analyzer": "^12.3.1",
     "eslint": "8.25.0",
     "eslint-config-next": "12.3.1"
   }