feat: use TwImage over NextImage

Author: wackerow

src/components/BentoBox/BentoCard.tsx

@@ -1,8 +1,8 @@
 import { HTMLAttributes } from "react"
-import NextImage from "next/image"
 import { type StaticImageData } from "next/image"
 import { MdChevronRight } from "react-icons/md"
 
+import { TwImage } from "@/components/Image"
 import { ButtonLink } from "@/components/ui/buttons/Button"
 
 import { cn } from "@/lib/utils/cn"
@@ -33,7 +33,7 @@ const BentoCard = ({
     )}
   >
     <div className="mb-6 grid place-items-center">
-      <NextImage src={imgSrc} alt="" width={imgWidth} height={imgHeight} />
+      <TwImage src={imgSrc} alt="" width={imgWidth} height={imgHeight} />
     </div>
     <div>
       <h3 className="mb-2 text-3xl font-black">{title}</h3>

src/components/Hero/HomeHero/index.tsx

@@ -1,18 +1,19 @@
-import NextImage from "next/image"
 import { useTranslation } from "next-i18next"
 
 import type { ClassNameProp, CommonHeroProps } from "@/lib/types"
 
+import { TwImage } from "@/components/Image"
 import Morpher from "@/components/Morpher"
 
 export type HomeHeroProps = Pick<CommonHeroProps, "heroImg"> & ClassNameProp
 
 const HomeHero = ({ heroImg, className }: HomeHeroProps) => {
   const { t } = useTranslation("page-index")
+
   return (
     <div className={className}>
       <div className="h-[300px] sm:h-[350px] md:h-[380px] lg:h-[440px]">
-        <NextImage
+        <TwImage
           src={heroImg}
           alt={t("page-index:page-index-hero-image-alt")}
           // TODO: adjust value when the old theme breakpoints are removed (src/theme.ts)

src/pages/index.tsx

@@ -1,6 +1,5 @@
 import { Fragment, lazy, Suspense, useState } from "react"
 import type { GetStaticProps, InferGetStaticPropsType } from "next"
-import NextImage from "next/image"
 import { useRouter } from "next/router"
 import { useTranslation } from "next-i18next"
 import { serverSideTranslations } from "next-i18next/serverSideTranslations"
@@ -386,7 +385,7 @@ const HomePage = ({
 
         <Section>
           <SectionBanner>
-            <NextImage src={ActivityImage} alt="" />
+            <TwImage src={ActivityImage} alt="" />
           </SectionBanner>
 
           <SectionContent>
@@ -405,7 +404,7 @@ const HomePage = ({
 
         <Section className="md:flex-row-reverse">
           <SectionBanner>
-            <NextImage src={LearnImage} alt="" />
+            <TwImage src={LearnImage} alt="" />
           </SectionBanner>
 
           <SectionContent>
@@ -450,7 +449,7 @@ const HomePage = ({
 
         <Section>
           <SectionBanner>
-            <NextImage src={BuildersImage} alt="" />
+            <TwImage src={BuildersImage} alt="" />
           </SectionBanner>
 
           <SectionContent>
@@ -518,7 +517,7 @@ const HomePage = ({
 
         <Section className="md:flex-row-reverse">
           <SectionBanner>
-            <NextImage src={CommunityImage} alt="" />
+            <TwImage src={CommunityImage} alt="" />
           </SectionBanner>
 
           <SectionContent>