vercel · delbaoliveira · Oct 6, 2023 · Oct 5, 2023 · Oct 5, 2023 · Oct 5, 2023
diff --git a/dashboard/15-final/app/layout.tsx b/dashboard/15-final/app/layout.tsx
@@ -1,7 +1,6 @@
-import clsx from 'clsx';
 import '@/app/ui/global.css';
-import type { Metadata } from 'next';
 import { inter } from '@/app/ui/fonts';
+import type { Metadata } from 'next';
 
 export const metadata: Metadata = {
   title: 'Create Next App',
@@ -15,7 +14,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={clsx(inter.className, 'antialiased')}>{children}</body>
+      <body className={`${inter.className} antialiased`}>{children}</body>
     </html>
   );
 }
diff --git a/dashboard/15-final/app/lib/dummy-data.js b/dashboard/15-final/app/lib/dummy-data.js
@@ -98,7 +98,7 @@ const invoices = [
   },
   {
     customer_id: customers[6].id,
-    amount: 8945,
+    amount: 666,
     status: 'pending',
     date: '2023-06-27',
   },
@@ -116,7 +116,7 @@ const invoices = [
   },
   {
     customer_id: customers[5].id,
-    amount: 8945,
+    amount: 8546,
     status: 'paid',
     date: '2023-06-07',
   },

diff --git a/dashboard/15-final/app/page.tsx b/dashboard/15-final/app/page.tsx
@@ -1,8 +1,8 @@
 import AcmeLogo from '@/app/ui/acme-logo';
+import { ArrowRightIcon } from '@heroicons/react/24/outline';
 import { lusitana } from '@/app/ui/fonts';
 import Image from 'next/image';
 import Link from 'next/link';
-import { ArrowRightIcon } from '@heroicons/react/24/outline';
 export default function Page() {
   return (
     <main className="flex min-h-screen flex-col p-6">
@@ -24,24 +24,25 @@ export default function Page() {
           </p>
           <Link
             href="/login"
-            className="flex items-center gap-5 self-start rounded-lg bg-blue-500 px-6 py-3 text-sm text-white transition-colors hover:bg-blue-400 md:text-base"
+            className="flex items-center gap-5 self-start rounded-lg bg-blue-500 px-6 py-3 text-sm font-medium text-white transition-colors hover:bg-blue-400 md:text-base"
           >
             <span>Log in</span> <ArrowRightIcon className="w-5 md:w-6" />
           </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.png"
+            src="/hero-desktop.png"
             width={1000}
             height={760}
-            alt="Dashboard Hero"
+            alt="Screenshots of the dashboard project showing desktop and mobile versions"
             className="hidden md:block"
           />
           <Image
             src="/hero-mobile.png"
-            width={436}
-            height={604}
-            alt="Dashboard Hero"
+            width={560}
+            height={620}
+            alt="Screenshot of the dashboard project showing mobile version"
             className="block md:hidden"
           />
         </div>

diff --git a/dashboard/15-final/app/ui/button.tsx b/dashboard/15-final/app/ui/button.tsx
@@ -9,7 +9,7 @@ export function Button({ children, className, ...rest }: ButtonProps) {
     <button
       {...rest}
       className={clsx(
-        'flex h-10 items-center rounded-lg bg-blue-600 px-4 text-sm font-medium text-white transition-colors hover:bg-blue-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600',
+        'flex h-10 items-center rounded-lg bg-blue-500 px-4 text-sm font-medium text-white transition-colors hover:bg-blue-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500',
         className,
       )}
     >

diff --git a/dashboard/15-final/app/ui/dashboard/card.tsx b/dashboard/15-final/app/ui/dashboard/card.tsx
@@ -5,7 +5,6 @@ import {
   InboxIcon,
 } from '@heroicons/react/24/outline';
 import { lusitana } from '@/app/ui/fonts';
-import clsx from 'clsx';
 
 const iconMap = {
   collected: BanknotesIcon,
@@ -32,10 +31,8 @@ export default function Card({
         <h3 className="ml-2 text-sm font-medium">{title}</h3>
       </div>
       <p
-        className={clsx(
-          lusitana.className,
-          'truncate rounded-xl bg-white px-4 py-8 text-center text-2xl',
-        )}
+        className={`${lusitana.className}
+          truncate rounded-xl bg-white px-4 py-8 text-center text-2xl`}
       >
         {value}
       </p>

diff --git a/dashboard/15-final/app/ui/dashboard/latest-invoices.tsx b/dashboard/15-final/app/ui/dashboard/latest-invoices.tsx
@@ -11,7 +11,7 @@ export default async function LatestInvoices({
 }) {
   return (
     <div className="flex w-full flex-col md:col-span-4 lg:col-span-4">
-      <h2 className={clsx(lusitana.className, 'mb-4 text-xl md:text-2xl')}>
+      <h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
         Latest Invoices
       </h2>
       <div className="flex grow flex-col justify-between rounded-xl bg-gray-50 p-4">
@@ -45,10 +45,7 @@ export default async function LatestInvoices({
                   </div>
                 </div>
                 <p
-                  className={clsx(
-                    lusitana.className,
-                    'truncate text-sm font-medium md:text-base',
-                  )}
+                  className={`${lusitana.className} md:text-base, truncate text-sm font-medium`}
                 >
                   {invoice.amount}
                 </p>

diff --git a/dashboard/15-final/app/ui/dashboard/revenue-chart.tsx b/dashboard/15-final/app/ui/dashboard/revenue-chart.tsx
@@ -2,7 +2,6 @@ import { generateYAxis } from '@/app/lib/utils';
 import { fetchRevenue } from '@/app/lib/data';
 import { CalendarIcon } from '@heroicons/react/24/outline';
 import { lusitana } from '@/app/ui/fonts';
-import clsx from 'clsx';
 // This component is representational only.
 // For data visualization UI, check out:
 // https://www.tremor.so/
@@ -21,7 +20,7 @@ export default async function RevenueChart() {
 
   return (
     <div className="w-full md:col-span-4">
-      <h2 className={clsx(lusitana.className, 'mb-4 text-xl md:text-2xl')}>
+      <h2 className={`${lusitana.className} mb-4 text-xl md:text-2xl`}>
         Recent Revenue
       </h2>
       <div className="rounded-xl bg-gray-50 p-4">
@@ -54,7 +53,7 @@ export default async function RevenueChart() {
         </div>
         <div className="flex items-center pb-2 pt-6">
           <CalendarIcon className="h-5 w-5 text-gray-500" />
-          <h3 className="ml-2 text-sm text-gray-500 ">Last 6 months</h3>
+          <h3 className="ml-2 text-sm text-gray-500 ">Last 12 months</h3>
         </div>
       </div>
     </div>

diff --git a/dashboard/15-final/app/ui/login-form.tsx b/dashboard/15-final/app/ui/login-form.tsx
@@ -4,11 +4,10 @@ import { signIn } from 'next-auth/react';
 import { useRouter } from 'next/navigation';
 import React, { useState } from 'react';
 import { lusitana } from '@/app/ui/fonts';
-import clsx from 'clsx';
 import { AtSymbolIcon, KeyIcon } from '@heroicons/react/24/outline';
 import { Button } from './button';
 import { ArrowRightIcon } from '@heroicons/react/20/solid';
-import { Logo } from './logo';
+import AcmeLogo from './acme-logo';
 
 export default function LoginForm() {
   const [email, setEmail] = useState('');
@@ -39,12 +38,14 @@ export default function LoginForm() {
   return (
     <div className="flex items-center justify-center md:h-screen">
       <div className="relative mx-auto flex w-full max-w-[400px] flex-col space-y-2.5 p-4 md:-mt-32">
-        <div className="flex h-36 w-full items-end rounded-lg bg-blue-500 p-3">
-          <Logo />
+        <div className="flex h-20 w-full items-end rounded-lg bg-blue-500 p-3 md:h-36">
+          <div className="w-32 text-white md:w-36">
+            <AcmeLogo />
+          </div>
         </div>
         <form onSubmit={handleSubmit} className="space-y-3">
           <div className="flex-1 rounded-lg bg-gray-50 px-6 pb-6 pt-5">
-            <h1 className={clsx(lusitana.className, 'mb-3 text-2xl')}>
+            <h1 className={`${lusitana.className} mb-3 text-2xl`}>
               Please log in to continue.
             </h1>
             <div className="w-full">

diff --git a/dashboard/15-final/app/ui/logo.tsx b/dashboard/15-final/app/ui/logo.tsx
diff --git a/dashboard/15-final/public/hero-desktop.png b/dashboard/15-final/public/hero-desktop.png
diff --git a/dashboard/15-final/public/hero-mobile.png b/dashboard/15-final/public/hero-mobile.png
diff --git a/dashboard/15-final/public/hero.png b/dashboard/15-final/public/hero.png