feat: origin protocol content update (#81)

* feat: origin protocol content update
* refactor(style): fei icon dropped
* refactor(style): rari icon dropped
* refactor(img): images fixed
* refactor(img): eth image replaced with the icon

Closes SUP-1036

package.json

@@ -52,9 +52,9 @@
     "axios": "1.1.3",
     "lite-youtube-embed": "0.2.0",
     "moments": "0.0.2",
-    "next": "13.0.3",
+    "next": "12.3.3",
     "next-gtag": "0.2.0",
-    "next-image-export-optimizer": "1.0.1",
+    "next-image-export-optimizer": "0.17.1",
     "next-seo": "5.14.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",

src/components/About.tsx

@@ -1,6 +1,6 @@
 import AtomTitle from "@/components/Atom/Title";
 import Container from "@/components/Container";
-import ExportedImage from "next-image-export-optimizer";
+import Image from "next/future/image";
 
 export default function About() {
   return (
@@ -46,10 +46,10 @@ export default function About() {
             className="relative mt-12 h-auto w-full object-scale-down md:col-span-7"
             data-aos="fade-left"
           >
-            <ExportedImage
+            <Image
+              priority={false}
               unoptimized={true}
               src="images/superCharged.svg"
-              layout="raw"
               width={823}
               height={370}
               loading="lazy"
@@ -67,8 +67,8 @@ export default function About() {
               className="relative mx-auto w-full pb-10 md:col-span-7 md:row-auto md:mx-0 md:mt-0 md:max-w-none md:pb-0"
               data-aos="fade-right"
             >
-              <ExportedImage
-                layout="raw"
+              <Image
+                priority={false}
                 width={823}
                 height={370}
                 src="images/stars4626.svg"
@@ -92,7 +92,7 @@ export default function About() {
                 intrinsically interest bearing tokens. This makes integration
                 difficult at the aggregator or plugin layer for protocols which
                 need to conform to many standards, and forces each protocol to
-                implement their own adapters which are error prone and waste
+                implement their own adapters which are error-prone and waste
                 development resources.
               </p>
               <p className="mb-4 text-lg leading-relaxed text-slate-700">

src/components/Adopters.tsx

@@ -84,9 +84,13 @@ export default function Adopters() {
         },
       },
       {
-        src: "origin.jpg",
-        title: "Origin Protocol",
-        url: { web: "https://www.originprotocol.com/" },
+        src: "ousd.svg",
+        title: "Origin Dollar",
+        url: { web: "https://ousd.com" },
+
+        extra: {
+          unoptimized: true,
+        },
       },
       {
         src: "resonate.svg",
@@ -190,7 +194,6 @@ export default function Adopters() {
                     >
                       <ExportedImage
                         src={`images/logos/${item.src}`}
-                        layout="raw"
                         loading="lazy"
                         height={128}
                         width={128}

src/components/Footer.tsx

@@ -1,24 +1,15 @@
 import Container from "@/components/Container";
-import ExportedImage from "next-image-export-optimizer";
-import { Component, PropsWithChildren, SVGProps } from "react";
+import { Component, SVGProps } from "react";
 import { HiOutlineBookmarkAlt } from "react-icons/hi";
 import { IoMdHeart, IoLogoGithub, IoLogoTwitter } from "react-icons/io";
+import { FaEthereum } from "react-icons/fa";
 
 const footerNavigation = {
   social: [
     {
       name: "Dev Docs",
       href: "https://ethereum.org/en/developers/docs/standards/tokens/erc-4626/",
-      icon: (props: PropsWithChildren) => (
-        <ExportedImage
-          src="images/logos/ethereum-logo.webp"
-          alt="ethereum.org"
-          height="70"
-          width="44"
-          layout="raw"
-          {...props}
-        />
-      ),
+      icon: (props: SVGProps<any>) => <FaEthereum {...props} />,
     },
     {
       name: "EIP",
@@ -43,22 +34,20 @@ export default class Footer extends Component {
         <Container>
           <div className="flex flex-col md:flex-row md:items-center md:justify-between">
             <div className="flex flex-row justify-center space-x-4 md:order-2">
-              {footerNavigation.social.map(
-                (item: { name: string; href?: string; icon: any }) => (
-                  <a
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    key={item.name}
-                    href={item.href}
-                    className="group inline-flex items-center text-sm font-medium text-pink-700 underline decoration-from-font underline-offset-4 md:font-normal md:no-underline md:hover:text-pink-900 md:hover:underline"
-                  >
-                    <item.icon className="mr-1.5 inline-flex h-4 w-auto md:opacity-25 md:group-hover:opacity-100" />
-                    {item.name}
-                  </a>
-                )
-              )}
+              {footerNavigation.social.map((item: { name: string; href?: string; icon: any }) => (
+                <a
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  key={item.name}
+                  href={item.href}
+                  className="group inline-flex items-center text-sm font-medium text-pink-700 underline decoration-from-font underline-offset-4 md:font-normal md:no-underline md:hover:text-pink-900 md:hover:underline"
+                >
+                  <item.icon className="relative mr-1.5 inline-flex h-4 w-auto md:opacity-25 md:group-hover:opacity-100" />
+                  {item.name}
+                </a>
+              ))}
             </div>
-            <div className="mt-4 md:mb-5 flex flex-wrap items-center justify-center space-y-1 whitespace-nowrap text-sm text-pink-700 md:order-1 md:my-0 md:justify-between md:space-y-0">
+            <div className="mt-4 flex flex-wrap items-center justify-center space-y-1 whitespace-nowrap text-sm text-pink-700 md:order-1 md:my-0 md:mb-5 md:justify-between md:space-y-0">
               <span>Website carefully handcrafted</span>
               <span className="block w-full md:hidden" />
               <span className="ml-1">with</span>