replace <img/> with <Image />

One-Click-Auth · Sep 26, 2023 · 479fcbe · 479fcbe
1 parent ad7a35c
commit 479fcbe
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 47 deletions.
diff --git a/src/components/Customize.tsx b/src/components/Customize.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Image from 'next/image';
 
 export default function Customize() {
   return (
@@ -48,7 +49,7 @@ export default function Customize() {
             <div className="  left-16 top-5  w-[316px] border border-[#9900FF] p-8 2xl:hidden">
               <div className="flex items-center gap-3">
                 {/* replace thsi with shadcn avatar compnent in regular codebase */}
-                <img
+                <Image
                   alt=""
                   src="https://s3-alpha-sig.figma.com/img/da73/1fd7/dc33e93cde3509aa78e24c0e19c74daa?Expires=1694390400&Signature=lTUbdJnWxxAKiJf3qsXeEttE4ZMV5EL~mbpsgtxv353l2ZGhD42sQ30g14TCItAQTrfEijaoua6qUqW1O5N7G6GQVl3DPkbcIuYl7S5T7SRfQT~aXHHsJsqfPDWczZtHylKzxh42sA7gyPhsrYZrvTO9c1iXU~Gb0Xs8N1X4TMv3888I10jV7pmCrXawdTFZSpSdOEgbQe0EhxcSTfkhnDB75TvLshvg~3yaxc6Vx4~vkngv7KZ1zKWqFHjLNIlPuYgi2oZMDPAh5IV7YHkkZXj7N-uVnTgBBsuJBSc0Grv3IZ9mzXe-N-Xg-bjAfcPmcEoGGKPyu64mnz2S3kkSOQ__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4"
                   className="h-[50px] rounded-full bg-cover"
@@ -70,7 +71,7 @@ export default function Customize() {
             <div className=" bottom-5  right-32  w-[316px] border border-[#0099FF] p-8 2xl:hidden">
               <div className="flex items-center gap-3">
                 {/* replace thsi with shadcn avatar compnent in regular codebase */}
-                <img
+                <Image
                   alt=""
                   src="https://s3-alpha-sig.figma.com/img/6e37/c23a/796cbd72327de48bed1e14b67a46f98e?Expires=1694390400&Signature=XAjvLPT0q9h2Ntmw6QZqCU-qJUOFkwdeS61MkTtGScCIord4F1CC1dZ3Ks2qEAWI73m70jZkgcbZ0GJXzhVoTssTg1isxULF2ThmSKRylHblRHnKhWWiyHAScp-OaZZHeTbki0lXHHQbzsGCHEIEJTCXdtCK8sbZCLs28R-XvsRiky5kjHkvWqqwjEBi0HCeDJMfD0kfnn14XH9b1G8S~qx7eJdVfnrw~U8d9jAcMvEe2mnld0Jq5Kr2Y7qi-vJFCc9zPrid1beNPbKg4vY4A1yeUEPtI5mrQTx6CaKS7t8IMj-OyRe-WW12dxz-xq5qzIh-E3GrimHatRIwh37oWw__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4"
                   className="h-[50px] rounded-full bg-cover"
@@ -90,7 +91,7 @@ export default function Customize() {
             <div className=" right-16 top-16  w-[316px] border border-[#9900FF] p-8 2xl:hidden">
               <div className="flex items-center gap-3">
                 {/* replace thsi with shadcn avatar compnent in regular codebase */}
-                <img
+                <Image
                   alt=""
                   src="https://s3-alpha-sig.figma.com/img/0393/bb53/1342dd46a5307c8fad2d3835d2242ce1?Expires=1694390400&Signature=LoHEzBgRrNzK61xk0Afvq6lXsM81cKSXcaH7RXJH2ZDwZISkawOZJpSqzcpF-13fKQCZTmvsXKnlp9yb681U3y8Zg~VswI5H6ugTyzu37kiFy3ZNJQobRr-iXkh-v7qKKD8VCrb4~8Ui7pXynIKL0OQ8wOpJRdZVjO7FnBNxAp9HjbezLwAGzqZ1C-NJd3h84ubjwxwQG2xAlNJFMLzcz8jwEySf0j1YjDW1xN6VrqtSjo2LD9m5CaC6ZjBfZJK32F1sOlMjL-te8YOSVOMr3w~CaPpRcUPSa6CwvfW5D~M21GgvaOQtTGdPmm1DvZv3r3W0n1w~hPzNf9fHdDwEJQ__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4"
                   className="h-[50px] rounded-full bg-cover"

diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
@@ -7,14 +7,15 @@ import {
 } from "@/components/ui/dropdown-menu";
 import { ChevronDown, LogOut, PersonStanding } from "lucide-react";
 import * as React from "react";
+import Image from 'next/image';
 
 export function AccountDropdown() {
   return (
     //dropdown needs to be wrapped in dialog for the trigger to work
     <div>
       <div className=" showcase-9-dropdown-shadow mt-2 w-96 max-w-[80vw] cursor-pointer overflow-hidden rounded-2xl bg-white py-6">
         <div className="sticky top-0 flex items-center gap-1 bg-white px-6 pb-4">
-          <img
+          <Image
             src="https://github.com/shadcn.png"
             className="h-10 w-10 rounded-full"
             alt="@shadcn"

diff --git a/src/components/GradientPlatform.tsx b/src/components/GradientPlatform.tsx
@@ -1,6 +1,7 @@
 import ArrowIcon from "./ArrowIcon";
 import AnimatedGradient from "./gradients/AnimatedGradient";
 import React from "react";
+import Image from 'next/image';
 
 export default function GradientPlatform() {
   return (
@@ -46,7 +47,7 @@ export default function GradientPlatform() {
                   "0px 1.18388px 37.88403px -7.27255px #000, 0px 24.24183px 37.88403px -6.06046px rgba(0, 0, 0, 0.10)",
               }}
             >
-              <img src="/page3.png" alt="imagetrustauthx" className="p-4" />
+              <Image src="/page3.png" alt="imagetrustauthx" className="p-4" />
             </div>
           </div>
         </div>

diff --git a/src/components/Showcase.tsx b/src/components/Showcase.tsx
@@ -10,6 +10,7 @@ import {
   ShowcaseSocialConnectionCard,
 } from "./showcase/Components";
 import CodeTabs from "./showcase/CodeTabs";
+import Image from 'next/image';
 
 function Showcase() {
   return (
@@ -53,7 +54,7 @@ function Showcase() {
           className="showcase-1  w-full  "
         >
           <div className="relative  mt-10 flex h-[300px] w-full items-center justify-center bg-transparent ">
-            <img
+            <Image
               src="/showcase/1.png"
               alt=""
               className="absolute  bottom-0 left-0 bg-cover"
@@ -101,7 +102,7 @@ function Showcase() {
             </div>
 
             <div className="relative hidden   h-[205px] w-full items-center justify-center bg-transparent sm:flex ">
-              <img
+              <Image
                 src="/showcase/2.png"
                 alt=""
                 className="absolute  bottom-0 left-0  w-full bg-cover"
@@ -169,12 +170,12 @@ function Showcase() {
                 <p className="underline underline-offset-[12px]">Depl</p>
               </div>
 
-              <img
+              <Image
                 src="/showcase/4.png"
                 alt=""
                 className="absolute -left-10 bottom-0 bg-cover"
               />
-              <img
+              <Image
                 src="/showcase/4-2.png"
                 alt=""
                 className="absolute bottom-0 right-20 bg-cover"
@@ -309,24 +310,24 @@ function Showcase() {
             </div>
 
             {/* things to make the background */}
-            <img
+            <Image
               src="/showcase/code-section/cone.svg"
               className="absolute bottom-[40%] left-0 "
               alt=""
             />
-            <img
+            <Image
               src="/showcase/code-section/circle-1.svg"
               className="absolute bottom-0 left-0 "
               alt=""
             />
 
-            <img
+            <Image
               src="/showcase/code-section/circle-2.svg"
               className="absolute bottom-28 left-20 "
               alt=""
             />
 
-            <img
+            <Image
               src="/showcase/code-section/circle-3.svg"
               className="absolute right-0 top-1/2 -translate-y-1/2 "
               alt=""
@@ -475,7 +476,7 @@ function Showcase() {
               className=" relative -mx-10   hidden   h-[325px] w-full items-center 
             justify-center bg-transparent sm:flex "
             >
-              <img
+              <Image
                 src="/showcase/9.svg"
                 alt=""
                 className="absolute -bottom-8   left-0   w-full max-w-[95%] bg-cover"

diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
@@ -8,25 +8,26 @@ import { TimelineCard } from "./timeline/TimelineCard";
 import { Information } from "./timeline/Information";
 import Carousel from "./timeline/CarouselSlider";
 import ArrowIcon from "./ArrowIcon";
+import Image from 'next/image'
 
 function Timeline() {
   return (
     <>
       <div className="flex px-12 py-12 2xl:py-0 2xl:pl-44 2xl:pr-[130px]">
         <div className="flex max-w-[160px] flex-col items-center justify-center">
-          <img src="/timeline/first.svg" alt="" />
+          <Image src="/timeline/first.svg" alt="" />
 
-          <img src="/timeline/8-icon.svg" alt="" />
+          <Image  src="/timeline/8-icon.svg" alt="" />
 
-          <img src="/timeline/8.svg" alt="" />
+          <Image src="/timeline/8.svg" alt="" />
 
-          <img src="/timeline/7-icon.svg" alt="" />
+          <Image src="/timeline/7-icon.svg" alt="" />
 
-          <img src="/timeline/7.svg" alt="" />
+          <Image src="/timeline/7.svg" alt="" />
 
-          <img src="/timeline/6-icon.svg" alt="" />
+          <Image src="/timeline/6-icon.svg" alt="" />
 
-          <img src="/timeline/6.svg" alt="" />
+          <Image src="/timeline/6.svg" alt="" />
         </div>
 
         <div className="mt-[750px] flex-1">
@@ -162,24 +163,24 @@ function Timeline() {
       <div className="timeline-radial-gradient flex flex-1 px-12 py-12 2xl:py-0 2xl:pl-44 2xl:pr-[130px]">
         <div className="flex max-w-[160px] flex-col items-center justify-center">
           <div className="relative ">
-            <img src="/timeline/glow.svg" className=" " alt="" />
+            <Image src="/timeline/glow.svg" className=" " alt="" />
 
-            <img
+            <Image
               src="/timeline/5-icon.svg"
               className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2"
               alt=""
             />
           </div>
-          <img src="/timeline/4.svg" alt="" />
+          <Image src="/timeline/4.svg" alt="" />
 
-          <img src="/timeline/3-icon.svg" alt="" />
+          <Image src="/timeline/3-icon.svg" alt="" />
 
-          <img src="/timeline/3.svg" alt="" />
+          <Image src="/timeline/3.svg" alt="" />
 
-          <img src="/timeline/2-icon.svg" alt="" />
-          <img src="/timeline/2.svg" alt="" />
-          <img src="/timeline/1-icon.svg" alt="" />
-          <img src="/timeline/1.svg" alt="" />
+          <Image src="/timeline/2-icon.svg" alt="" />
+          <Image src="/timeline/2.svg" alt="" />
+          <Image src="/timeline/1-icon.svg" alt="" />
+          <Image src="/timeline/1.svg" alt="" />
         </div>
         {/* required
          */}
@@ -331,15 +332,15 @@ function Timeline() {
                 </div>
 
                 <div className="flex flex-col gap-3 pb-6">
-                  <img src="/timeline/speedCard/1.svg" alt="" />
-                  <img src="/timeline/speedCard/2.svg" alt="" />
-                  <img src="/timeline/speedCard/3.svg" alt="" />
-                  <img src="/timeline/speedCard/4.svg" alt="" />
+                  <Image src="/timeline/speedCard/1.svg" alt="" />
+                  <Image src="/timeline/speedCard/2.svg" alt="" />
+                  <Image src="/timeline/speedCard/3.svg" alt="" />
+                  <Image src="/timeline/speedCard/4.svg" alt="" />
                 </div>
               </div>
 
               <div className="shad rounded-2xl bg-black shadow-lg shadow-zinc-800 ">
-                <img src="/timeline/lastcard.svg" className="" alt="" />
+                <Image src="/timeline/lastcard.svg" className="" alt="" />
 
                 <div className=" rounded-b-2xl bg-[#1A1A1A] px-12 py-7">
                   <div className=" w-96 text-lg font-bold leading-loose text-neutral-50">
@@ -363,8 +364,8 @@ function Timeline() {
 
       <div className="flex px-12 2xl:pl-44 2xl:pr-[130px]">
         <div className="flex max-w-[160px] flex-col items-center ">
-          <img src="/timeline/last-icon.svg" alt="" />
-          <img src="/timeline/last.svg" alt="" />
+          <Image src="/timeline/last-icon.svg" alt="" />
+          <Image src="/timeline/last.svg" alt="" />
         </div>
 
         <div className=" mt-40 flex flex-1 flex-col gap-9">
@@ -470,7 +471,7 @@ function GradientCard({
   return (
     <div className="timeline-gradientcard-gradient rounded-2xl p-10">
       <div className="flex items-center justify-between">
-        <img
+        <Image
           src="https://s3-alpha-sig.figma.com/img/9d6d/cfc1/fb8cd40116ca161e463af1ee400a729e?Expires=1694995200&Signature=h1x8zYIEcksM6fh5RDvQ4ECeihTfQdeHloWbzDadukMpZBhws9lPBpMFh-9XIsh2k3CKZCczKPLoIxMJ89vpq8As2DCiADJsSbOXBta1gsOFEXhmuZIO638pHgvaiGW-T-tD4RQEWmWp9Q~rhQYxDM7EuRFbVF6nim-zphAKrdfJXTsqypezfRZonQvppbMt35BOVo81-yGeDBtfmg1FJln3jr-AwlpSa95SZHA4~M4nd-FcwqDG00g5NDx~koYZpLylO-J2UTHAlxnHN6QGkuVfhCmGTvCOb9gAo9Nrp-Hw9Vsgz6gYT8WQYKeIP-3TWBZnTLX5mFgaiCfEks2u4Q__&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4"
           className="h-16 w-16 rounded-full"
           alt=""
@@ -480,7 +481,7 @@ function GradientCard({
       </div>
 
       <div className="mt-14 flex flex-col gap-4">
-        <img src={logo} className="max-w-[240px]" alt="" />
+        <Image src={logo} className="max-w-[240px]" alt="" />
 
         <div className="   text-5xl font-bold  text-white">{header}</div>
 

diff --git a/src/pages/access-management.tsx b/src/pages/access-management.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import Footer from "../components/Footer";
+import Image from 'next/image';
 
 function AccessManagement() {
   return (
@@ -29,13 +30,13 @@ function AccessManagement() {
             </div>
 
             <div className="flex-1">
-              <img src="./images/image1.svg" alt="" />
+              <Image src="./images/image1.svg" alt="" />
             </div>
           </div>
 
           <div className=" ud-row row1 flex flex-col  items-center gap-32   md:flex-row">
             <div className="col-md-5 flex flex-[0.5] items-center justify-center">
-              <img src="./images/image2.svg" alt="" />
+              <Image src="./images/image2.svg" alt="" />
             </div>
 
             <div className=" flex-1 ">
@@ -77,13 +78,13 @@ function AccessManagement() {
               </div>
             </div>
             <div className=" col-md-5 flex-1">
-              <img src="./images/image3.svg" alt="" className="w-100" />
+              <Image src="./images/image3.svg" alt="" className="w-100" />
             </div>
           </div>
 
           <div className=" ud-row row1 flex flex-col items-center  gap-32 md:flex-row">
             <div className="col-md-5 flex flex-1 items-center justify-center">
-              <img src="./images/image4.svg" alt="" className="w-100" />
+              <Image src="./images/image4.svg" alt="" className="w-100" />
             </div>
 
             <div className="col-md-6 flex-1">

diff --git a/src/pages/systems.tsx b/src/pages/systems.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import Footer from "../components/Footer";
+import Image from 'next/image';
 
 
 function Systems() {
@@ -25,21 +26,21 @@ function Systems() {
           </div>
 
           <div className=" flex flex-1  justify-end ">
-            <img
+            <Image
               src={"/systemspage.png"}
               className="bg-cover"
               alt="gridphotos"
             />
           </div>
         </div>
 
-        <img
+        <Image
           src={"/systemsgradientside.svg"}
           className="absolute left-0 top-12"
           alt="gridphotos"
         />
 
-        <img
+        <Image
           src={"/systemsgradienttop.svg"}
           className="absolute top-0"
           alt="gridphotos"
@@ -169,7 +170,7 @@ function Card({
     border-white border-opacity-25 bg-white bg-opacity-10   
        text-white shadow-inner  "
       >
-        <img src={icon} width={35} height={35} alt="icon" />
+        <Image src={icon} width={35} height={35} alt="icon" />
       </div>
 
       <div className="mb-2">