Fix buil issue

components/Header.tsx

@@ -8,9 +8,9 @@ const Header = () => {
   return (
     <nav className="fixed z-10 w-full mx-auto bg-indigo-50 border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-800 shadow">
       <div className="max-w-[1080px] container flex flex-wrap justify-between items-center mx-auto">
-        <a href="/" className="flex items-center flex-1">
+        <Link href="/" className="flex items-center flex-1">
           <span className="self-center text-xl font-semibold whitespace-nowrap dark:text-white">codechallenge</span>
-        </a>
+        </Link>
         <div className="flex md:order-2">
           <button type="button" className="text-white bg-[#b1b845] hover:bg-[#969c3b] focus:ring-4 focus:outline-none focus:ring-transparent font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 md:mr-0 ml-5">Sign In</button>
           <button data-collapse-toggle="mobile-menu-4" type="button" className="inline-flex items-center p-2 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" onClick={() => setIsOpenMenu(!isOpenMenu)}>
@@ -31,7 +31,7 @@ const Header = () => {
             </Link>
           </li>
           <li>
-            <a href="https://github.com/senali-d/codechallenges" target="_blank" className="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-[#b1b845] md:p-0 md:dark:hover:text-white dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"><AiOutlineGithub size="20" /></a>
+            <a href="https://github.com/senali-d/codechallenges" target="_blank" rel="noreferrer" className="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-[#b1b845] md:p-0 md:dark:hover:text-white dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700"><AiOutlineGithub size="20" /></a>
           </li>
           </ul>
         </div>

components/HorizontalCard.tsx

@@ -15,6 +15,8 @@ const HorizontalCard: NextPage<Props> = ({ image, title, level, desc}) => {
   return (
     <div className="h-full flex flex-col items-center">
       <Image
+        width="400px"
+        height="250px"
         alt={title}
         className="flex-shrink-0 rounded-lg w-full object-cover object-center mb-4"
         src={image}

components/VerticalCard.tsx

@@ -15,6 +15,8 @@ const VerticalCard: NextPage<Props> = ({ image, title, level, desc}) => {
   return (
     <>
       <Image
+        width="200px"
+        height="150px"
         className="object-cover w-full h-auto max-h-64 sm:max-h-[190px] rounded-t-lg sm:w-48 md:rounded-none md:rounded-l-lg"
         src={image}
         alt={title}

next.config.js

@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  images: {
+    domains: ['res.cloudinary.com'],
+  }
 }
 
 module.exports = nextConfig

pages/challenge/[slug].tsx

@@ -30,6 +30,8 @@ const ChallengeDetail: NextPage<Props> = ({ challenge }) => {
             <div className="flex lg:flex-row">
               <div className="lg:w-4/6 flex-1 h-full overflow-hidden">
                 <Image
+                  width="800px"
+                  height="500px"
                   alt={challenge.title}
                   className="object-cover object-center h-full w-full"
                   src={challenge.img}
@@ -39,6 +41,8 @@ const ChallengeDetail: NextPage<Props> = ({ challenge }) => {
                 <div className="text-center sm:pr-8 sm:pb-8 lg:pl-8">
                   <div className="w-20 h-20 rounded-full inline-flex items-center justify-center bg-gray-200 text-gray-200">
                     <Image
+                      width="100px"
+                      height="100px"
                       alt={challenge.title}
                       className="object-cover object-center h-full w-full rounded-full"
                       src={challenge.img}

pages/index.tsx

@@ -67,7 +67,7 @@ const Home: NextPage<Props> = ({ challenges }) => {
             </div>
           </div>
           <div className="md:flex hidden my-auto w-[30%] md:w-[50%]">
-            <Image src="/banner.png" alt="Banner" />
+            <Image src="/banner.png" alt="Banner" width="500px" height="300px" />
           </div>
         </div>
 

pages/solutions.tsx

@@ -22,7 +22,7 @@ const Solutions = () => {
             className="flex flex-col items-center bg-white rounded-lg border shadow-md sm:flex-row hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-800 dark:hover:bg-gray-700 w-[100%] xs:w-[48%] sm:w-full lg:w-[calc(50%-8px)]"
           >
             <VerticalCard
-              image={'https://dummyimage.com/200x200'}
+              image={'https://res.cloudinary.com/zencloude/image/upload/v1655196411/codechallenge/login_xntb63.png'}
               title={'Title'}
               level={i.toString()}
               desc={'Description'}