Refactor: replace all next/image components with Cloudinary wrapper

src/pages/beers/[id]/index.tsx

@@ -1,7 +1,5 @@
 import { NextPage, GetServerSideProps } from 'next';
 import Head from 'next/head';
-import Image from 'next/image';
-
 import getBeerPostById from '@/services/BeerPost/getBeerPostById';
 
 import BeerPostQueryResult from '@/services/BeerPost/schema/BeerPostQueryResult';
@@ -13,6 +11,7 @@ import { Carousel } from 'react-responsive-carousel';
 import useMediaQuery from '@/hooks/utilities/useMediaQuery';
 import { Tab } from '@headlessui/react';
 import dynamic from 'next/dynamic';
+import { CldImage } from 'next-cloudinary';
 
 const [BeerInfoHeader, BeerPostCommentsSection, BeerRecommendations] = [
   dynamic(() => import('@/components/BeerById/BeerInfoHeader')),
@@ -45,10 +44,11 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost }) => {
           {beerPost.beerImages.length
             ? beerPost.beerImages.map((image, index) => (
                 <div key={image.id} id={`image-${index}}`} className="w-full">
-                  <Image
+                  <CldImage
                     alt={image.alt}
                     src={image.path}
                     height={1080}
+                    crop="fill"
                     width={1920}
                     className="h-96 w-full object-cover lg:h-[42rem]"
                   />

src/pages/breweries/[id]/index.tsx

@@ -4,7 +4,7 @@ import { GetServerSideProps, NextPage } from 'next';
 
 import { z } from 'zod';
 import Head from 'next/head';
-import Image from 'next/image';
+
 import 'react-responsive-carousel/lib/styles/carousel.min.css'; // requires a loader
 import { Carousel } from 'react-responsive-carousel';
 import useMediaQuery from '@/hooks/utilities/useMediaQuery';
@@ -12,6 +12,7 @@ import { Tab } from '@headlessui/react';
 
 import dynamic from 'next/dynamic';
 import { MAPBOX_ACCESS_TOKEN } from '@/config/env';
+import { CldImage } from 'next-cloudinary';
 
 const [BreweryInfoHeader, BreweryBeersSection, BreweryCommentsSection, BreweryPostMap] = [
   dynamic(() => import('@/components/BreweryById/BreweryInfoHeader')),
@@ -47,9 +48,10 @@ const BreweryByIdPage: NextPage<BreweryPageProps> = ({ breweryPost, mapboxToken
           {breweryPost.breweryImages.length
             ? breweryPost.breweryImages.map((image, index) => (
                 <div key={image.id} id={`image-${index}}`} className="w-full">
-                  <Image
+                  <CldImage
                     alt={image.alt}
                     src={image.path}
+                    crop="fill"
                     height={1080}
                     width={1920}
                     className="h-96 w-full object-cover lg:h-[42rem]"

src/pages/login/index.tsx

@@ -1,13 +1,13 @@
 import { NextPage } from 'next';
 
 import LoginForm from '@/components/Login/LoginForm';
-import Image from 'next/image';
 
 import { FaUserCircle } from 'react-icons/fa';
 import Head from 'next/head';
 import Link from 'next/link';
 
 import useRedirectWhenLoggedIn from '@/hooks/auth/useRedirectIfLoggedIn';
+import { CldImage } from 'next-cloudinary';
 
 const LoginPage: NextPage = () => {
   useRedirectWhenLoggedIn();
@@ -20,11 +20,11 @@ const LoginPage: NextPage = () => {
 
       <div className="flex h-full flex-row">
         <div className="hidden h-full flex-col items-center justify-center bg-base-100 lg:flex lg:w-[55%]">
-          <Image
-            src="https://picsum.photos/5000/5000"
+          <CldImage
+            src="https://res.cloudinary.com/dxie9b7na/image/upload/v1701056793/cloudinary-images/pexels-elevate-1267700_jrno3s.jpg"
             alt="Login Image"
-            width={4920}
-            height={4080}
+            width={5000}
+            height={5000}
             className="h-full w-full object-cover"
           />
         </div>