1
- import AcmeLogo from '@/app/ui/acme-logo' ;
2
- import { ArrowRightIcon } from '@heroicons/react/24/outline' ;
3
- import Link from 'next/link' ;
1
+ import AcmeLogo from "@/app/ui/acme-logo" ;
2
+ import { ArrowRightIcon } from "@heroicons/react/24/outline" ;
3
+ import Link from "next/link" ;
4
+ import { lusitana } from "./ui/fonts" ;
5
+ import Image from "next/image" ;
4
6
5
7
export default function Page ( ) {
6
8
return (
7
9
< main className = "flex min-h-screen flex-col p-6" >
8
10
< div className = "flex h-20 shrink-0 items-end rounded-lg bg-blue-500 p-4 md:h-52" >
9
- { /* <AcmeLogo /> */ }
11
+ < AcmeLogo />
10
12
</ div >
11
13
< div className = "mt-4 flex grow flex-col gap-4 md:flex-row" >
12
14
< 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" >
13
- < p className = { `text-xl text-gray-800 md:text-3xl md:leading-normal` } >
14
- < strong > Welcome to Acme.</ strong > This is the example for the{ ' ' }
15
+ < p
16
+ className = { `text-xl text-gray-800 md:text-3xl md:leading-normal ${ lusitana . className } ` }
17
+ >
18
+ < strong > Welcome to Acme.</ strong > This is the example for the{ " " }
15
19
< a href = "https://nextjs.org/learn/" className = "text-blue-500" >
16
20
Next.js Learn Course
17
21
</ a >
@@ -25,7 +29,20 @@ export default function Page() {
25
29
</ Link >
26
30
</ div >
27
31
< div className = "flex items-center justify-center p-6 md:w-3/5 md:px-28 md:py-12" >
28
- { /* Add Hero Images Here */ }
32
+ < Image
33
+ src = "/hero-desktop.png"
34
+ width = { 1000 }
35
+ height = { 700 }
36
+ className = "hidden md:block"
37
+ alt = "Screenshots of the dashboard project showing desktop version"
38
+ />
39
+ < Image
40
+ src = "/hero-mobile.png"
41
+ width = { 560 }
42
+ height = { 620 }
43
+ className = "hidden max-md:block"
44
+ alt = "Screenshots of the dashboard project showing mobile version"
45
+ />
29
46
</ div >
30
47
</ div >
31
48
</ main >
0 commit comments