Remove next Image elements

Author: AbhinavMV

.gitignore

@@ -13,7 +13,6 @@ package-lock.json
 
 # next.js
 /.next/
-/out/
 
 # production
 /build

components/Global/Blogs.jsx

@@ -1,4 +1,3 @@
-import Image from 'next/image'
 import Link from 'next/link'
 
 const Blogs = ({ articles, contentOnly = false, show = articles.length }) => {
@@ -21,11 +20,8 @@ const Blogs = ({ articles, contentOnly = false, show = articles.length }) => {
               <div className='flex flex-col justify-between items-stretch col-span-3 md:col-span-1 cursor-pointer p-2 shadow rounded-md focus:outline-none focus:shadow-outline transform transition hover:shadow-lg hover:scale-105 duration-300 ease-in-out'>
                 <div className='bg-white p-4 rounded-lg'>
                   <div className='relative bg-contain'>
-                    <Image
+                    <img
                       alt={article.title}
-                      layout='responsive'
-                      height={150}
-                      width={150}
                       className='lg:h-60 xl:h-56 md:h-64 sm:h-72 xs:h-72 h-72 rounded-md w-full object-cover object-center mb-6'
                       src={article.social_image}
                     />
@@ -36,13 +32,11 @@ const Blogs = ({ articles, contentOnly = false, show = articles.length }) => {
                   <p className='leading-relaxed text-sm text-gray-600'>{article.description}</p>
                 </div>
                 <time className='p-4 text-gray-500 text-xs flex items-end'>
-                  <Image
-                    layout='fixed'
-                    width={40}
-                    height={40}
+                  <img
+                    
                     src={article?.user?.profile_image}
                     alt={article.user.name}
-                    className='rounded-full'
+                    className='rounded-full w-16 h-16 mr-1'
                   />
                   <p className='ml-2 opacity-50'>
                     by {article.user.name} on

components/Global/Navbar.jsx

@@ -1,7 +1,6 @@
 import { useState } from 'react'
 import { HiMenuAlt4 } from 'react-icons/hi'
 import { AiOutlineClose } from 'react-icons/ai'
-import Image from 'next/image'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
@@ -39,7 +38,7 @@ const Navbar = () => {
             href='/'
             passHref
           >
-            <Image layout='fixed' width={150} height={80} src='/logo.png' alt='WebXDAO' />
+            <img src='/logo.png' alt='WebXDAO' className='w-24 h-14 md:w-36 md:h-20'/>
           </Link>
         </div>
         <ul className='lg:flex hidden list-none flex-row justify-end items-center ml-auto'>
@@ -67,7 +66,7 @@ const Navbar = () => {
               className='z-10 fixed -top-0 -right-2 p-3 w-[70vw] h-screen shadow-2xl lg:hidden list-none
 flex flex-col justify-start items-end rounded-md blue-glassmorphism'
             >
-              <li className='text-xl w-full my-2 text-blue-600'>
+              <li className='text-xl w-full my-2 text-blue-600 cursor-pointer '>
                 <AiOutlineClose onClick={() => setToggleMenu(false)} />
               </li>
               {navItems.map((item, index) => (

components/Home/DeveloperPath.jsx

@@ -50,11 +50,8 @@ const DeveloperPath = () => {
             >
               <div className='flex items-center justify-start overflow-hidden'>
                 <div className='relative bg-contain w-1/3'>
-                  <Image
+                  <img
                     alt={name}
-                    layout='responsive'
-                    height={150}
-                    width={150}
                     className='bg-gray-50 p-5 rounded-md'
                     src={imgUrl}
                   />

components/Home/DevprotocolBrands.jsx

@@ -1,4 +1,3 @@
-import Image from 'next/image'
 import Link from 'next/link'
 
 const DevprotocolBrands = () => {
@@ -43,7 +42,7 @@ const DevprotocolBrands = () => {
             <Link key={name + index} href={url} passHref className='h-full group'>
               <div className='mx-auto flex flex-col justify-evenly items-center h-full object-center text-center p-8 shadow cursor-pointer rounded-md focus:outline-none focus:shadow-outline transform bg-white transition hover:shadow-lg hover:scale-105 duration-300 ease-in-out'>
                 <div className='relative h-24 w-full flex-shrink-0'>
-                  <Image src={imgUrl} alt={name} layout='fill' objectFit='contain' />
+                  <img src={imgUrl} alt={name} className="object-contain" />
                 </div>
                 <p className='text-gray-800 mt-8 mb-2 text-sm px-8 sm:px-4 h-full'>{text}</p>
               </div>

components/Home/Hero.jsx

@@ -1,10 +1,9 @@
-import Image from 'next/image'
 
 const Hero = () => {
   return (
     <div className='text-white bg-[#00007F] pt-24 py-24'>
       <div className='container px-5 mx-auto flex flex-wrap flex-col md:flex-row items-center'>
-        <div className='px-5 flex flex-col w-full md:w-2/5 items-start text-center md:text-left'>
+        <div className='px-5 flex flex-col mx-auto w-full md:w-2/5 items-start text-center md:text-left'>
           <h1 className='my-4 text-3xl font-bold leading-tight'>
             A new community for Blockchain developers, designers, and Dapp Owners
           </h1>
@@ -21,8 +20,8 @@ const Hero = () => {
           </div>
         </div>
 
-        <div className='relative w-full md:w-3/5 h-96 py-6 text-center items-end'>
-          <Image src='/hero.gif' layout='fill' objectFit='contain' alt='Web3' />
+        <div className='w-full md:w-2/5 flex mx-auto items-end'>
+          <img src='/hero.gif' className='object-contain' alt='Web3' />
         </div>
       </div>
     </div>

components/Home/Testimonials.jsx

@@ -1,4 +1,3 @@
-import Image from 'next/image'
 
 const Testimonials = () => {
   const data = [
@@ -73,7 +72,7 @@ const Testimonials = () => {
               <p className='text-gray-600 text-base mb-2'>{text}</p>
               <div className='flex flex-row items-center justify-start py-2'>
                 <div className='relative h-16 w-16 flex-shrink-0'>
-                  <Image src={imgUrl} alt={name} layout='fill' objectFit='contain' />
+                  <img src={imgUrl} alt={name} className='object-contain' />
                 </div>
 
                 <div className='flex flex-col justify-center pl-3'>

out/_next/static/6noCD3vzjTiMBoYbnU8zr/_buildManifest.js

@@ -0,0 +1 @@
+self.__MIDDLEWARE_MANIFEST=[];self.__MIDDLEWARE_MANIFEST_CB&&self.__MIDDLEWARE_MANIFEST_CB()

out/_next/static/6noCD3vzjTiMBoYbnU8zr/_middlewareManifest.js

@@ -0,0 +1 @@
+self.__SSG_MANIFEST=new Set(["\u002F","\u002Fblog"]);self.__SSG_MANIFEST_CB&&self.__SSG_MANIFEST_CB()