Add landing page (vercel#187)

* Re-organize

* Add images

* Delete background-blur.tsx

* Create acme-logo.tsx

* Create fonts.ts

* Update page.tsx

* Update page.tsx

* Use 4x image

* Update page.tsx

---------

Co-authored-by: Stephanie Dietz <[email protected]>

Author: delbaoliveira

dashboard/15-final/app/dashboard/(overview)/loading.tsx

@@ -1,4 +1,4 @@
-import DashboardSkeleton from '@/app/ui/skeletons';
+import DashboardSkeleton from '@/app/ui/dashboard/skeletons';
 
 export default function Loading() {
   return <DashboardSkeleton />;

dashboard/15-final/app/dashboard/(overview)/page.tsx

@@ -7,7 +7,7 @@ import {
   fetchTotalAmountByStatus,
 } from '@/app/lib/data';
 import { Suspense } from 'react';
-import { RevenueChartSkeleton } from '@/app/ui/skeletons';
+import { RevenueChartSkeleton } from '@/app/ui/dashboard/skeletons';
 
 export const dynamic = 'force-dynamic';
 

dashboard/15-final/app/layout.tsx

@@ -1,8 +1,6 @@
-import './global.css';
+import '@/app/ui/global.css';
 import type { Metadata } from 'next';
-import { Inter } from 'next/font/google';
-
-const inter = Inter({ subsets: ['latin'] });
+import { inter } from '@/app/ui/fonts';
 
 export const metadata: Metadata = {
   title: 'Create Next App',

dashboard/15-final/app/page.tsx

@@ -1,30 +1,50 @@
-import BackgroundBlur from '@/app/ui/background-blur';
+import AcmeLogo from '@/app/ui/acme-logo';
+import { lusitana } from '@/app/ui/fonts';
 import Image from 'next/image';
-import HeroImage from '@/public/hero.png';
 import Link from 'next/link';
-
+import { ArrowRightIcon } from '@heroicons/react/24/outline';
 export default function Page() {
   return (
-    <main className="flex flex-col gap-4 lg:h-screen lg:flex-row lg:items-center lg:justify-end">
-      <div className="min-w-xl my-8 flex flex-col items-start gap-4 px-4 lg:max-w-xl lg:gap-6">
-        <BackgroundBlur />
-        <h1 className="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">
-          Acme
-        </h1>
-        <p className="leading-6 text-gray-900">
-          Welcome to Acme. This demo is part of the{' '}
-          <a href="https://nextjs.org/learn/">Next.js Learn</a> guide, brought
-          to you by Vercel.
-        </p>
-        <Link
-          href="/login"
-          className="rounded-md bg-black px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-gray-800"
-        >
-          Log in
-        </Link>
+    <main className="flex min-h-screen flex-col p-6">
+      <div className="flex h-20 shrink-0 items-end rounded-lg bg-blue-600 p-4 md:h-52">
+        <div className="w-32 text-white md:w-48">
+          <AcmeLogo />
+        </div>
       </div>
-      <div className="w-full sm:w-1/2">
-        <Image src={HeroImage} alt="Dashboard Hero" />
+      <div className="mt-4 flex h-full min-h-[500px] 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={`${lusitana.className} text-xl text-gray-800 md:text-3xl md:leading-normal`}
+          >
+            <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>
+            , brought to you by Vercel.
+          </p>
+          <Link
+            href="/login"
+            className="flex items-center gap-5 self-start rounded-lg bg-blue-600 px-6 py-3 text-sm text-white 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:p-24">
+          <Image
+            src="/hero.png"
+            width={1000}
+            height={760}
+            alt="Dashboard Hero"
+            className="hidden md:block"
+          />
+          <Image
+            src="/hero-mobile.png"
+            width={436}
+            height={604}
+            alt="Dashboard Hero"
+            className="block md:hidden"
+          />
+        </div>
       </div>
     </main>
   );

dashboard/15-final/app/ui/acme-logo.tsx

@@ -0,0 +1,29 @@
+export default function AcmeLogo() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 139 32"
+      fill="none"
+      aria-labelledby="title"
+    >
+      <title id="title">Acme Logo</title>
+      <g clipPath="url(#globe-logo)">
+        <path
+          fill="#fff"
+          fillRule="evenodd"
+          d="M14.416 29.996a12.032 12.032 0 0 0 9.165-4.765 56.353 56.353 0 0 1-5.417-.768c-1.094 2.361-2.402 4.28-3.748 5.533Zm-4.035 1.528c7.467 1.998 15.141-2.434 17.142-9.9 2.001-7.47-2.431-15.146-9.9-17.147-7.468-2.001-15.145 2.431-17.146 9.9-2.001 7.468 2.431 15.145 9.9 17.146l.004.001Zm.511-1.934.002.001h.002c.179.048.52.058 1.098-.262.592-.329 1.305-.943 2.065-1.894.724-.907 1.437-2.05 2.086-3.383a77.767 77.767 0 0 1-7.028-1.883c-.104 1.478-.06 2.825.115 3.972.183 1.204.493 2.093.841 2.673.34.567.641.728.82.776Zm-3.73-8.075c-.233 2.592-.059 4.907.48 6.666a12.032 12.032 0 0 1-5.555-8.71c1.506.701 3.216 1.392 5.076 2.044Zm2.18-1.374c1.208.392 2.474.768 3.784 1.119 1.311.351 2.596.659 3.837.923a29.32 29.32 0 0 0 1.021-3.115c.295-1.101.518-2.177.674-3.209a75.466 75.466 0 0 0-3.784-1.119 75.535 75.535 0 0 0-3.837-.923 29.343 29.343 0 0 0-1.021 3.115 29.346 29.346 0 0 0-.674 3.209Zm-.297-6.717a31.526 31.526 0 0 0-.961 2.99c-.28 1.042-.5 2.07-.663 3.071-2.036-.73-3.86-1.499-5.398-2.264a12.058 12.058 0 0 1 1.215-4.535c1.714.106 3.68.352 5.807.738Zm2.81-1.476a77.897 77.897 0 0 1 7.029 1.883c.103-1.478.058-2.825-.116-3.972-.182-1.204-.493-2.093-.841-2.673-.342-.57-.643-.73-.821-.777-.178-.048-.52-.06-1.1.262-.591.329-1.304.943-2.065 1.894-.724.907-1.436 2.05-2.086 3.383Zm1.729-5.944c-1.346 1.254-2.654 3.172-3.748 5.533a56.354 56.354 0 0 0-5.417-.768 12.032 12.032 0 0 1 9.165-4.765Zm5.371 16.572c.359-.948.682-1.949.961-2.99.28-1.042.5-2.07.663-3.071 2.036.73 3.861 1.499 5.398 2.264a12.068 12.068 0 0 1-1.215 4.535c-1.714-.106-3.68-.352-5.807-.738Zm1.883-8.091c1.86.652 3.57 1.343 5.075 2.043a12.032 12.032 0 0 0-5.554-8.709c.538 1.759.712 4.074.478 6.666Z"
+          clipRule="evenodd"
+        />
+      </g>
+      <path
+        fill="#fff"
+        d="m36.808 29.372-3.328.128-.32-1.472h.192c.981-.107 1.728-.373 2.24-.8.533-.448.981-1.173 1.344-2.176L43.72 6.78h1.536l7.552 18.784c.448 1.045.843 1.728 1.184 2.048.363.32.939.48 1.728.48l.352 1.408a71.114 71.114 0 0 0-4.512-.16c-1.323 0-2.613.053-3.872.16l-.288-1.376h.128c1.685-.021 2.528-.32 2.528-.896 0-.277-.768-2.176-2.304-5.696h-7.968l-1.568 4.352a2.82 2.82 0 0 0-.096.672c0 .448.203.79.608 1.024.405.235 1.099.384 2.08.448l.384 1.472-4.384-.128Zm6.656-17.952-3.072 8.448h6.624l-3.552-8.448Zm23.955 6.912c-.363-.363-.864-.725-1.504-1.088-.64-.363-1.376-.544-2.208-.544-.832 0-1.6.459-2.304 1.376-.704.896-1.056 2.165-1.056 3.808 0 1.643.426 3.061 1.28 4.256.853 1.173 2.122 1.76 3.808 1.76 1.344 0 2.453-.437 3.328-1.312a.217.217 0 0 1 .16-.064c.064 0 .117.021.16.064l.64.736c-1.579 1.707-3.414 2.56-5.504 2.56-2.07 0-3.723-.661-4.96-1.984-1.216-1.323-1.824-2.987-1.824-4.992 0-2.475.682-4.352 2.048-5.632 1.386-1.28 3.114-1.92 5.184-1.92.896 0 1.802.128 2.72.384.938.256 1.642.576 2.112.96a.284.284 0 0 1 .032.128c0 .299-.33.928-.992 1.888a.476.476 0 0 1-.352.128c-.128 0-.384-.17-.768-.512Zm4.652-.64-.48.032-.288-.928c1.493-.363 2.592-.725 3.296-1.088.704-.363 1.099-.565 1.184-.608.277 0 .437.021.48.064.085.085.15.768.192 2.048 1.707-1.237 3.253-1.856 4.64-1.856 1.835 0 3.115.64 3.84 1.92 1.792-1.28 3.456-1.92 4.992-1.92 3.093 0 4.64 1.59 4.64 4.768v7.104c0 .384.096.65.288.8.192.128.661.224 1.408.288l.288 1.28-3.136-.096-3.456.096-.256-1.28c1.024-.085 1.632-.17 1.824-.256.213-.107.32-.384.32-.832v-6.016c0-1.365-.267-2.315-.8-2.848-.533-.555-1.365-.832-2.496-.832-1.11 0-2.165.352-3.168 1.056a7.83 7.83 0 0 1 .16 1.536v7.104c0 .384.096.65.288.8.192.128.661.224 1.408.288l.288 1.28-3.136-.096-3.456.096-.256-1.28c1.024-.085 1.632-.17 1.824-.256.213-.107.32-.384.32-.832v-6.016c0-1.365-.267-2.325-.8-2.88-.512-.555-1.28-.832-2.304-.832-1.024 0-2.09.299-3.2.896v8.832c0 .384.096.65.288.8.192.128.661.224 1.408.288l.288 1.28-3.136-.096-3.456.096-.256-1.28c1.024-.085 1.632-.17 1.824-.256.213-.107.32-.384.32-.832V19.74c0-.768-.139-1.301-.416-1.6-.277-.299-.715-.448-1.312-.448Zm38.587 4.032h-9.28v.416c0 1.557.437 2.912 1.312 4.064.875 1.13 2.037 1.696 3.488 1.696s2.645-.47 3.584-1.408c.064-.064.117-.096.16-.096s.096.032.16.096l.704.8c-1.6 1.728-3.456 2.592-5.568 2.592-2.091 0-3.744-.661-4.96-1.984-1.195-1.323-1.792-3.083-1.792-5.28 0-2.219.683-3.979 2.048-5.28 1.365-1.323 2.923-1.984 4.672-1.984 1.749 0 3.125.533 4.128 1.6 1.003 1.045 1.504 2.517 1.504 4.416 0 .235-.053.352-.16.352Zm-3.04-1.504c0-2.347-.907-3.52-2.72-3.52-.96 0-1.739.341-2.336 1.024-.597.661-.96 1.493-1.088 2.496h6.144Z"
+      />
+      <defs>
+        <clipPath id="globe-logo">
+          <path fill="#fff" d="M0 4h28v28H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}

dashboard/15-final/app/ui/background-blur.tsx

@@ -0,0 +1,8 @@
+import { Inter, Lusitana } from 'next/font/google';
+
+export const inter = Inter({ subsets: ['latin'] });
+
+export const lusitana = Lusitana({
+  weight: ['400', '700'],
+  subsets: ['latin'],
+});

dashboard/15-final/app/ui/skeletons.tsx renamed to dashboard/15-final/app/ui/dashboard/skeletons.tsx

@@ -3,7 +3,6 @@
 import Link from 'next/link';
 import { signIn } from 'next-auth/react';
 import { useRouter } from 'next/navigation';
-import BackgroundBlur from '@/app/ui/background-blur';
 import React, { useState } from 'react';
 import Image from 'next/image';
 
@@ -35,8 +34,6 @@ export default function LoginForm() {
   };
   return (
     <div className="relative mx-auto mt-40 p-4">
-      <BackgroundBlur />
-
       <div className="mx-auto flex w-full flex-col items-center space-y-2 rounded-xl border bg-white px-4 py-6 shadow-sm sm:max-w-sm sm:space-y-4 sm:px-8 sm:py-12">
         <Link href="/">
           <Image