From 3a1b1420eec301f798ad62b7dd26e1c37ce5f474 Mon Sep 17 00:00:00 2001
From: Barbara Peric <b.peric10@gmail.com>
Date: Mon, 1 Apr 2024 12:46:44 +0200
Subject: [PATCH 1/2] replace img with Image/Next

---
 components/Footer.js | 13 +++++++++----
 components/Header.js | 13 +++++++++----
 pages/index.js       | 26 ++++++++++++++------------
 sass/_about.scss     |  1 +
 4 files changed, 33 insertions(+), 20 deletions(-)

diff --git a/components/Footer.js b/components/Footer.js
index 8745203..7e9d5d6 100644
--- a/components/Footer.js
+++ b/components/Footer.js
@@ -1,6 +1,7 @@
 import React from "react";
 import { Col, Row } from "react-bootstrap";
 import FooterBg from "../svgs/FooterBg.js";
+import Image from 'next/image'
 
 function Footer(props) {
   const pagePos = props.pagePos;
@@ -91,17 +92,21 @@ function Footer(props) {
             </nav>
             <div className="logoWrapper">
               <a href="https://ipfs.io/" target="_blank" rel="noreferrer">
-                <img
+                <Image
                   className="logo ipfs"
-                  src="images/IPFS-logo.svg"
+                  src="/images/IPFS-logo.svg"
                   alt="IPFS Logo"
+                  height={30}
+                  width={30}
                 />
               </a>
               <a href="https://filecoin.io/" target="_blank" rel="noreferrer">
-                <img
+                <Image
                   className="logo"
-                  src="images/filecoin-logo.svg"
+                  src="/images/filecoin-logo.svg"
                   alt="Filecoin Logo"
+                  height={30}
+                  width={30}
                 />
               </a>
             </div>
diff --git a/components/Header.js b/components/Header.js
index ee5fb16..6783969 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from "react";
+import Image from "next/image";
 
 import {
   disableBodyScroll,
@@ -101,17 +102,21 @@ function Header(props) {
           </div>
           <div className="centerWrapper">
             <a href="https://ipfs.io/" target="_blank" rel="noreferrer">
-              <img
+              <Image
                 className="logo ipfs"
-                src="images/IPFS-logo.svg"
+                src="/images/IPFS-logo.svg"
                 alt="IPFS Logo"
+                height={36}
+                width={36}
               />
             </a>
             <a href="https://filecoin.io/" target="_blank" rel="noreferrer">
-              <img
+              <Image
                 className="logo"
-                src="images/filecoin-logo.svg"
+                src="/images/filecoin-logo.svg"
                 alt="Filecoin Logo"
+                height={36}
+                width={36}
               />
             </a>
           </div>
diff --git a/pages/index.js b/pages/index.js
index f41a419..9e60b13 100755
--- a/pages/index.js
+++ b/pages/index.js
@@ -6,6 +6,7 @@ import LookupBg from "../svgs/LookupBg.js";
 import { Waypoint } from "react-waypoint";
 import Slider from "react-slick";
 import cbor from "cbor";
+import Image from "next/image";
 
 export default function Home(props) {
   const setPagePos = props.setPagePos;
@@ -1071,7 +1072,7 @@ export default function Home(props) {
               <div className="rowWrapper">
                 <Row>
                   <Col xs={12} md={4} className="imgCol pe-md-5 mb-5 mb-md-0">
-                    <img src="images/about-1.svg" alt="Map" />
+                    <Image src="/images/about-1.svg" alt="Map" width={172} height={120} />
                   </Col>
                   <Col xs={12} md={8} className="textCol">
                     <p>
@@ -1085,7 +1086,7 @@ export default function Home(props) {
                 </Row>
                 <Row>
                   <Col xs={12} md={4} className="imgCol pe-md-5 mb-5 mb-md-0">
-                    <img src="images/about-2.svg" alt="Solarsystem" />
+                    <Image src="/images/about-2.svg" alt="Solarsystem" width={197}  height={120}/>
                   </Col>
                   <Col xs={12} md={8} className="textCol">
                     <p>
@@ -1101,7 +1102,7 @@ export default function Home(props) {
                 </Row>
                 <Row>
                   <Col xs={12} md={4} className="imgCol pe-md-5 mb-5 mb-md-0">
-                    <img src="images/about-3.svg" alt="Connected Circles" />
+                    <Image src="/images/about-3.svg" alt="Connected Circles" width={193}  height={120} />
                   </Col>
                   <Col xs={12} md={8} className="textCol">
                     <p>
@@ -1142,55 +1143,56 @@ export default function Home(props) {
                   target="_blank"
                   rel="noreferrer"
                 >
-                  <img src="images/kenLabs.svg" alt="Ken Labs Logo" />
+                  <Image src="/images/kenLabs.svg" alt="Ken Labs Logo" width={322} height={89}/>
                 </a>
                 <a
                   href="https://www.leewayhertz.com/"
                   target="_blank"
                   rel="noreferrer"
                 >
-                  <img src="images/LeewayHertz.svg" alt="Leeway Hertz Logo" />
+                  <Image src="/images/LeewayHertz.svg" alt="Leeway Hertz Logo" width={322} height={43} />
                 </a>
                 <a
                   href="https://www.piknik.com/"
                   target="_blank"
                   rel="noreferrer"
                 >
-                  <img src="images/PiKNiK.svg" alt="PiKNiK Logo" />
+                  <Image src="/images/PiKNiK.svg" alt="PiKNiK Logo" width={322} height={82}/>
                 </a>
                 <a
                   href="https://www.filswan.com/"
                   target="_blank"
                   rel="noreferrer"
                 >
-                  <img src="images/FilSwan-logo.svg" alt="FilSwan Logo" />
+                  <Image src="/images/FilSwan-logo.svg" alt="FilSwan Logo" width={322} height={76}/>
                 </a>
                 <a
                   href="https://www.sxxfuture.com/"
                   target="_blank"
                   rel="noreferrer"
                 >
-                  <img
-                    src="images/SanXiaXingFutureData.svg"
+                  <Image
+                    src="/images/SanXiaXingFutureData.svg"
                     alt="San Xia Xing Future Data Logo"
+                    width={322} height={82}
                   />
                 </a>
                 <a href="https://infura.io/" target="_blank" rel="noreferrer">
-                  <img src="images/Infura.svg" alt="Infura Logo" />
+                  <Image src="/images/Infura.svg" alt="Infura Logo" width={322} height={89} />
                 </a>
                 <a
                   href="https://distributedstorage.com/"
                   target="_blank"
                   rel="noreferrer"
                 >
-                  <img src="images/dss.svg" alt="DSS Logo" />
+                  <Image src="/images/dss.svg" alt="DSS Logo" width={322} height={112} />
                 </a>
                 <a
                   href="https://www.cloudflare.com/"
                   target="_blank"
                   rel="noreferrer"
                 >
-                  <img src="images/Cloudflare.svg" alt="Cloudflare Logo" />
+                  <Image src="/images/Cloudflare.svg" alt="Cloudflare Logo" width={322} height={89} />
                 </a>
               </Slider>
             </div>
diff --git a/sass/_about.scss b/sass/_about.scss
index 6e7cc52..e35f21a 100644
--- a/sass/_about.scss
+++ b/sass/_about.scss
@@ -96,6 +96,7 @@
         padding: 6px;
         border-radius: 6px;
         margin: 0;
+        overflow: auto;
       }
     }
   }

From 2ec1b1a175655c245bbcde3eab547903b41b4762 Mon Sep 17 00:00:00 2001
From: Barbara Peric <b.peric10@gmail.com>
Date: Mon, 1 Apr 2024 13:02:48 +0200
Subject: [PATCH 2/2] FIX build error

---
 next.config.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/next.config.js b/next.config.js
index 5a9f45a..33d6c4e 100755
--- a/next.config.js
+++ b/next.config.js
@@ -3,6 +3,10 @@ const nextConfig = {
   reactStrictMode: true,
   swcMinify: true,
   assetPrefix: './',
+  images: {
+    loader: 'akamai',
+    path: '',
+  },
 }
 
 module.exports = nextConfig