add hero images

README.md

@@ -129,6 +129,9 @@ When non existing tailwind class matches the value you need, a custom value can
 | group | defines a parent element for a group |
 | group-hover:<CLASS> | adds a class on hover over the parent of the group |
 | dark:<CLASS> | only apply styling in dark mode |
+| md:<CLASS> | media query for desktop devices |
+| hidden | display: none; |
+| block | display: block; |
 
 Tailwind uses a custom spacing scale. The translation table can be found [here](https://gist.github.com/crswll/5d91b14373f53d66317e407bbba6d3dd).
 
@@ -211,6 +214,30 @@ export default function RootLayout({
 
 The same way other fonts can be imported and also just applied on single objects.
 
+## Images
+Next.js comes with a built-in image component, which does many image optimizations like serving images as `webp` or `avif` where possible, automatically.
+
+The componennt is called `<Image>`.
+
+Example usage:
+```tsx
+import Image from 'next/image';
+
+export default function Page() {
+  return (
+          <Image
+            src="/hero-desktop.png"
+            width={1000}
+            height={760}
+            className="block"
+            alt="just an example"
+          />
+  );
+}
+```
+
+The `width` and `height` should be specified to prevent layout shift - the values set are just used for defining the right aspect ratio - Next.js decides by itself which size has to be rendered.
+
 ## Ressources
 - [Next.js Installation](https://nextjs.org/docs/app/getting-started/installation)
 - [Next.js React Foundations Course](https://nextjs.org/learn/react-foundations)

dashboard-app-course/app/page.tsx

@@ -2,12 +2,13 @@ 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 (
     <main className="flex min-h-screen flex-col p-6">
       <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52">
-        {<AcmeLogo />}
+      <AcmeLogo />
       </div>
       <div className="mt-4 flex grow flex-col gap-4 md:flex-row">
         <div className="flex flex-col justify-center gap-6 rounded-lg bg-gray-50 px-6 py-10 md:w-2/5 md:px-20">
@@ -28,6 +29,21 @@ 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 on desktop"
+          />
+          
+          <Image
+            src="/hero-mobile.png"
+            width={560}
+            height={620}
+            className="block md:hidden"
+            alt="Screenshots of the dashboard project on mobile"
+          />
         </div>
       </div>
     </main>