refactor(home): restructure home page and optimize image loading (#403)

Signed-off-by: vedantlavale <vedantlavale@gmail.com>
Signed-off-by: Vedant <145031740+vedantlavale@users.noreply.github.com>

Author: vedantlavale

src/app/blog/[slug]/page.tsx

@@ -1,4 +1,5 @@
 import type { Metadata } from "next";
+import Image from "next/image";
 import {
   getAllPosts,
   getPostBySlug,
@@ -92,12 +93,14 @@ export default async function BlogPostPage({
                     <Link
                       href={`/blog/${rp.slug}`}
                       className="no-underline grid grid-cols-1 sm:grid-cols-2 sm:gap-9 xl:gap-0 xl:grid-cols-1">
-                      {/* eslint-disable-next-line @next/next/no-img-element */}
-                      <img
+                      <Image
                         src={rp.featuredImage}
                         alt={rp.title}
+                        width={560}
+                        height={280}
+                        sizes="(min-width: 1280px) 25vw, (min-width: 640px) 50vw, 100vw"
                         className="w-full md:h-[140px] object-cover"
-                        loading="lazy"
+                        unoptimized
                       />
                       <div>
                         <h3 className="mt-3 sm:mt-0 xl:mt-3 text-[20px] font-medium text-black line-clamp-1">
@@ -142,12 +145,13 @@ function AuthorBlock({
   const inner = (
     <>
       {author.image && (
-        // eslint-disable-next-line @next/next/no-img-element
-        <img
+        <Image
           src={author.image}
           alt={author.name ?? ""}
+          width={72}
+          height={72}
           className="inline-block h-[72px] w-[72px] rounded-full bg-white"
-          loading="lazy"
+          unoptimized
         />
       )}
       <div className="font-normal">

src/app/page.tsx

@@ -2,6 +2,7 @@
 
 import { useState } from "react";
 import Link from "next/link";
+import Image from "next/image";
 import { format } from "date-fns";
 import type { PostMeta } from "@/lib/posts";
 
@@ -51,12 +52,13 @@ export default function BlogPostList({ posts, listTitle }: BlogPostListProps) {
                     key={post.slug}
                     href={`/blog/${post.slug}`}
                     className="grid grid-cols-[1fr] gap-0 sm:grid-cols-[280px_1fr] sm:gap-x-8 no-underline">
-                    {/* eslint-disable-next-line @next/next/no-img-element */}
-                    <img
+                    <Image
                       src={post.featuredImage}
                       alt={post.title}
+                      width={560}
+                      height={280}
+                      sizes="(min-width: 640px) 280px, 100vw"
                       className="w-full md:h-[140px] object-cover"
-                      loading="lazy"
                     />
                     <div>
                       <h3 className="mt-3 sm:mt-0 text-[20px] font-medium text-black">
@@ -83,79 +85,71 @@ export default function BlogPostList({ posts, listTitle }: BlogPostListProps) {
             {totalPages > 1 && (
               <ul className="pagination pagination-default">
                 <li className={`page-item ${page === 1 ? "disabled" : ""}`}>
-                  <a
-                    aria-disabled={page === 1 ? "true" : undefined}
+                  <button
+                    type="button"
+                    disabled={page === 1}
                     aria-label="First"
                     className="page-link"
-                    role="button"
-                    tabIndex={page === 1 ? -1 : 0}
-                    onClick={e => {
-                      e.preventDefault();
+                    onClick={() => {
                       if (page !== 1) goTo(1);
                     }}>
                     <span aria-hidden="true">&laquo;&laquo;</span>
-                  </a>
+                  </button>
                 </li>
                 <li className={`page-item ${page === 1 ? "disabled" : ""}`}>
-                  <a
-                    aria-disabled={page === 1 ? "true" : undefined}
+                  <button
+                    type="button"
+                    disabled={page === 1}
                     aria-label="Previous"
                     className="page-link"
-                    role="button"
-                    tabIndex={page === 1 ? -1 : 0}
-                    onClick={e => {
-                      e.preventDefault();
+                    onClick={() => {
                       if (page > 1) goTo(page - 1);
                     }}>
                     <span aria-hidden="true">&laquo;</span>
-                  </a>
+                  </button>
                 </li>
                 {visiblePages.map(p => (
                   <li
                     key={p}
                     className={`page-item ${p === page ? "active" : ""}`}>
-                    <a
+                    <button
+                      type="button"
+                      disabled={p === page}
                       aria-current={p === page ? "page" : undefined}
                       aria-label={`Page ${p}`}
                       className="page-link"
-                      role="button"
-                      onClick={e => {
-                        e.preventDefault();
+                      onClick={() => {
                         goTo(p);
                       }}>
                       {p}
-                    </a>
+                    </button>
                   </li>
                 ))}
                 <li
                   className={`page-item ${page === totalPages ? "disabled" : ""}`}>
-                  <a
-                    aria-disabled={page === totalPages ? "true" : undefined}
+                  <button
+                    type="button"
+                    disabled={page === totalPages}
                     aria-label="Next"
                     className="page-link"
-                    role="button"
-                    tabIndex={page === totalPages ? -1 : 0}
-                    onClick={e => {
-                      e.preventDefault();
+                    onClick={() => {
                       if (page < totalPages) goTo(page + 1);
                     }}>
                     <span aria-hidden="true">&raquo;</span>
-                  </a>
+                  </button>
                 </li>
                 <li
                   className={`page-item ${page === totalPages ? "disabled" : ""}`}>
-                  <a
-                    aria-disabled={page === totalPages ? "true" : undefined}
+                  <button
+                    type="button"
+                    disabled={page === totalPages}
                     aria-label="Last"
                     className="page-link"
-                    role="button"
-                    tabIndex={page === totalPages ? -1 : 0}
-                    onClick={e => {
-                      e.preventDefault();
+                    onClick={() => {
                       if (page < totalPages) goTo(totalPages);
                     }}>
                     <span aria-hidden="true">&raquo;&raquo;</span>
-                  </a>
+                  </button>
                 </li>
               </ul>
             )}

src/components/BlogPostList/index.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import Image from "next/image";
 import { useState, useEffect } from "react";
 
 interface Contributor {
@@ -46,12 +47,13 @@ export default function ContributorsGrid({ endpoint }: { endpoint: string }) {
             href={`https://github.com/${c.userName}`}
             className="no-underline">
             <div className="flex flex-col justify-center items-center">
-              {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img
+              <Image
                 className="rounded-full h-32 w-32 bg-slate-600 p-0.5"
                 src={c.avatarUrl}
                 alt={`Avatar of ${c.userName}`}
-                loading="lazy"
+                width={128}
+                height={128}
+                unoptimized
               />
               <span className="text-center mt-1">{c.userName}</span>
             </div>

src/components/ContributorsGrid/index.tsx

@@ -17,7 +17,9 @@ exports[`Header > renders the home link and menu 1`] = `
         <img
           alt="Hiero logo"
           class="h-[40px] w-[128px]"
+          height="40"
           src="/images/Hiero-Icon-wLogo.svg"
+          width="128"
         />
       </a>
       <div

src/components/Header/__tests__/__snapshots__/Header.test.tsx.snap

@@ -1,3 +1,4 @@
+import Image from "next/image";
 import Link from "next/link";
 import Container from "@/components/Container";
 import Menu from "@/components/Menu";
@@ -8,10 +9,11 @@ export default function Header() {
       <Container>
         <div className="flex flex-row justify-between items-center">
           <Link href="/" aria-label="Go to homepage">
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img
+            <Image
               src="/images/Hiero-Icon-wLogo.svg"
               alt="Hiero logo"
+              width={128}
+              height={40}
               className="h-[40px] w-[128px]"
             />
           </Link>

src/components/Header/index.tsx

@@ -1,12 +1,15 @@
 "use client";
 
+import Image from "next/image";
+import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { useEffect, useState } from "react";
 
 interface MenuItem {
   name: string;
   href: string;
   external?: boolean;
+  newTab?: boolean;
 }
 
 const menuItems: MenuItem[] = [
@@ -75,10 +78,11 @@ export default function Menu() {
         }}
         aria-label="Open menu"
         aria-expanded={isOpen}>
-        {/* eslint-disable-next-line @next/next/no-img-element */}
-        <img
+        <Image
           src="/images/Hiero-Icon-Nav-Menu.svg"
           alt="Open menu"
+          width={20}
+          height={20}
           className="w-5 h-5"
         />
       </button>
@@ -88,10 +92,11 @@ export default function Menu() {
         className={`absolute hidden items-center justify-center w-full h-screen bg-black top-0 left-0 text-white sm:relative sm:h-auto sm:top-auto sm:bg-transparent sm:left-auto sm:w-9/12 sm:max-w-xl sm:block ${isOpen ? "active-navigation" : ""}`}
         aria-hidden={isDesktop ? false : !isOpen}>
         <div className="absolute top-[27px] sm:hidden">
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img
+          <Image
             src="/images/Hiero-Icon-wLogo-white-text.svg"
             alt="Hiero logo"
+            width={128}
+            height={40}
             className="h-[40px] w-[128px]"
           />
         </div>
@@ -103,29 +108,48 @@ export default function Menu() {
             setIsOpen(false);
           }}
           aria-label="Close menu">
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img
+          <Image
             src="/images/Hiero-Icon-ModalClose.svg"
             alt="Close menu"
+            width={20}
+            height={20}
             className="w-5 h-5"
           />
         </button>
 
         <ul id="menu" className="flex flex-col sm:flex-row justify-between">
           {menuItems.map(item => {
+            const active = isActive(item.href);
+            const isExternal = item.external ?? item.href.startsWith("http");
+            const openInNewTab = item.newTab ?? isExternal;
+
             return (
               <li
                 key={item.name}
                 className={`text-center sm:text-left ${item.name === "Connect" ? "sm:hidden" : ""}`.trim()}>
-                <a
-                  href={item.href}
-                  className={isActive(item.href) ? "active" : ""}
-                  aria-current={isActive(item.href) ? "page" : undefined}
-                  onClick={() => {
-                    setIsOpen(false);
-                  }}>
-                  {item.name}
-                </a>
+                {isExternal ? (
+                  <a
+                    href={item.href}
+                    target={openInNewTab ? "_blank" : undefined}
+                    rel={openInNewTab ? "noopener noreferrer" : undefined}
+                    className={active ? "active" : ""}
+                    aria-current={active ? "page" : undefined}
+                    onClick={() => {
+                      setIsOpen(false);
+                    }}>
+                    {item.name}
+                  </a>
+                ) : (
+                  <Link
+                    href={item.href}
+                    className={active ? "active" : ""}
+                    aria-current={active ? "page" : undefined}
+                    onClick={() => {
+                      setIsOpen(false);
+                    }}>
+                    {item.name}
+                  </Link>
+                )}
               </li>
             );
           })}
@@ -134,12 +158,13 @@ export default function Menu() {
             <a
               href="https://github.com/hiero-ledger/"
               target="_blank"
-              rel="noopener"
+              rel="noopener noreferrer"
               className="flex">
-              {/* eslint-disable-next-line @next/next/no-img-element */}
-              <img
+              <Image
                 src="/images/Hiero-Icon-Github.svg"
                 alt="GitHub"
+                width={35}
+                height={35}
                 className="h-[35px] w-[35px] sm:h-[17px] sm:w-[17px]"
               />
             </a>