Chapter 3 - add responsive image

app/page.tsx

@@ -3,6 +3,7 @@ import AcmeLogo from '@/app/ui/acme-logo';
 import { ArrowRightIcon } from '@heroicons/react/24/outline';
 import Link from 'next/link';
 import {lusitana} from "@/app/ui/fonts";
+import Image from 'next/image';
 
 export default function Page() {
   return (
@@ -30,6 +31,13 @@ export default function Page() {
         </div>
         <div className="flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12">
           {/* Add Hero Images Here */}
+            <Image
+                src="/hero-desktop.png"
+                width={1000}
+                height={760}
+                className="hidden md:block"
+                alt="Screenshots of the dashboard project showing desktop version"
+            />
         </div>
       </div>
     </main>