perf: migrating to next/image in order to optimize images. (improve LCP while potentially reducing bandwidth conspumtion)

Author: ladunjexa

components/design/collaboration.tsx

@@ -1,13 +1,14 @@
 import { images } from "@/constants";
+import Image from "next/image";
 
 export const RightCurve = () => (
   <div className="pointer-events-none absolute left-full top-1/2 -mt-1 ml-10 hidden w-[10.125rem] xl:block">
-    <img src={images.curve2} width={162} height={76} alt="Curve 2" />
+    <Image src={images.curve2} width={162} height={76} alt="Curve 2" />
   </div>
 );
 
 export const LeftCurve = () => (
   <div className="pointer-events-none absolute right-full top-1/2 -mt-1 mr-10 hidden w-[32.625rem] xl:block">
-    <img src={images.curve1} width={522} height={182} alt="Curve 1" />
+    <Image src={images.curve1} width={522} height={182} alt="Curve 1" />
   </div>
 );

components/design/pricing.tsx

@@ -1,17 +1,18 @@
 import { lines } from "@/public/assets/index";
+import Image from "next/image";
 
 export const LeftLine = () => {
   return (
     <div className="pointer-events-none absolute right-full top-1/2 hidden h-[11.0625rem] w-[92.5rem] -translate-y-1/2 lg:block">
-      <img className="w-full" src={lines} width={1480} height={177} alt="Lines" />
+      <Image className="w-full" src={lines} width={1480} height={177} alt="Lines" />
     </div>
   );
 };
 
 export const RightLine = () => {
   return (
     <div className="pointer-events-none absolute left-full top-1/2 hidden h-[11.0625rem] w-[92.5rem] -translate-y-1/2 -scale-x-100 lg:block">
-      <img className="w-full" src={lines} width={1480} height={177} alt="Lines" />
+      <Image className="w-full" src={lines} width={1480} height={177} alt="Lines" />
     </div>
   );
 };

components/design/roadmap.tsx

@@ -1,10 +1,11 @@
 import { images } from "@/constants";
+import Image from "next/image";
 
 export const Gradient = () => {
   return (
     <div className="pointer-events-none absolute -left-[30.375rem] top-[18.25rem] w-[56.625rem] opacity-60 mix-blend-color-dodge">
       <div className="absolute left-1/2 top-1/2 size-[58.85rem] -translate-x-3/4 -translate-y-1/2">
-        <img className="w-full" src={images.gradient} width={942} height={942} alt="Gradient" />
+        <Image className="w-full" src={images.gradient} width={942} height={942} alt="Gradient" />
       </div>
     </div>
   );

components/design/services.tsx

@@ -1,10 +1,11 @@
 import ChatBubbleWing from "@/components/svg/chat-bubble-wing";
 import { images } from "@/constants";
+import Image from "next/image";
 
 export const Gradient = () => {
   return (
     <div className="pointer-events-none absolute -left-40 top-0 size-[56.625rem] opacity-50 mix-blend-color-dodge">
-      <img
+      <Image
         className="absolute left-1/2 top-1/2 h-[88.5625rem] w-[79.5625rem] max-w-[79.5625rem] -translate-x-1/2 -translate-y-1/2"
         src={images.gradient}
         width={1417}
@@ -29,7 +30,7 @@ export const VideoChatMessage = () => {
     <div className="absolute left-[3.125rem] top-8 w-full max-w-56 rounded-t-xl rounded-br-xl bg-n-6 pb-7 pl-5 pr-2.5 pt-2.5 font-code text-base md:max-w-[17.5rem]">
       Video generated!
       <div className="absolute -bottom-[1.125rem] left-5 flex size-9 items-center justify-center rounded-xl bg-color-1">
-        <img src={images.brainwaveWhiteSymbol} width={26} height={26} alt="Brainwave" />
+        <Image src={images.brainwaveWhiteSymbol} width={26} height={26} alt="Brainwave" />
       </div>
       <p className="tagline absolute bottom-1 right-2.5 text-[0.625rem] uppercase text-n-3">
         just now
@@ -45,7 +46,7 @@ export const VideoChatMessage = () => {
 export const VideoBar = () => {
   return (
     <div className="absolute bottom-0 left-0 flex w-full items-center p-6">
-      <img src={images.play} width={24} height={24} alt="Play" className="mr-3 object-contain" />
+      <Image src={images.play} width={24} height={24} alt="Play" className="mr-3 object-contain" />
 
       <div className="flex-1 bg-[#D9D9D9]">
         <div className="h-0.5 w-1/2 bg-color-1"></div>