feat: add fonts & hero imgs

Asa0oo0o0o · Asa0oo0o0o · commit 22cfe4a55ef3 · 2025-04-23T16:41:55.000+08:00
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,11 +1,14 @@
+import "@/app/ui/global.css";
+import { inter } from "@/app/ui/fonts";
+
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
   return (
     <html lang="en">
-      <body>{children}</body>
+      <body className={`${inter.className} antialiased`}>{children}</body>
     </html>
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,17 +1,21 @@
-import AcmeLogo from '@/app/ui/acme-logo';
-import { ArrowRightIcon } from '@heroicons/react/24/outline';
-import Link from 'next/link';
+import AcmeLogo from "@/app/ui/acme-logo";
+import { ArrowRightIcon } from "@heroicons/react/24/outline";
+import Link from "next/link";
+import { lusitana } from "./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">
-          <p className={`text-xl text-gray-800 md:text-3xl md:leading-normal`}>
-            <strong>Welcome to Acme.</strong> This is the example for the{' '}
+          <p
+            className={`text-xl text-gray-800 md:text-3xl md:leading-normal ${lusitana.className}`}
+          >
+            <strong>Welcome to Acme.</strong> This is the example for the{" "}
             <a href="https://nextjs.org/learn/" className="text-blue-500">
               Next.js Learn Course
             </a>
@@ -25,7 +29,20 @@ export default function Page() {
           </Link>
         </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={700}
+            className="hidden md:block"
+            alt="Screenshots of the dashboard project showing desktop version"
+          />
+          <Image
+            src="/hero-mobile.png"
+            width={560}
+            height={620}
+            className="hidden max-md:block"
+            alt="Screenshots of the dashboard project showing mobile version"
+          />
         </div>
       </div>
     </main>
diff --git a/app/ui/fonts.ts b/app/ui/fonts.ts
@@ -0,0 +1,8 @@
+import { Inter, Lusitana } from "next/font/google";
+
+export const inter = Inter({ subsets: ["latin"] });
+
+export const lusitana = Lusitana({
+  subsets: ["latin"],
+  weight: ["400", "700"],
+});
