mirror of
https://github.com/vercel/next-learn.git
synced 2026-06-11 09:51:47 +00:00
Add landing page (#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 <49788645+StephDietz@users.noreply.github.com>
This commit is contained in:
Delba de Oliveira
committed by
GitHub
GitHub
parent
8f68049213
commit
1180db9b88
@@ -1,4 +1,4 @@
|
||||
import DashboardSkeleton from '@/app/ui/skeletons';
|
||||
import DashboardSkeleton from '@/app/ui/dashboard/skeletons';
|
||||
|
||||
export default function Loading() {
|
||||
return <DashboardSkeleton />;
|
||||
|
||||
@@ -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';
|
||||
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -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>
|
||||
);
|
||||
|
||||
29
dashboard/15-final/app/ui/acme-logo.tsx
Normal file
29
dashboard/15-final/app/ui/acme-logo.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
export default function BackgroundBlur() {
|
||||
return (
|
||||
<>
|
||||
<div className="absolute left-[55%] top-[15%] -z-10 h-40 w-40 rounded-full bg-gradient-to-r from-blue-200 via-blue-300 to-blue-500 opacity-90 blur-3xl"></div>
|
||||
<div className="absolute left-[50%] top-[25%] -z-10 h-40 w-40 transform rounded-full bg-gradient-to-r from-blue-200 via-blue-300 to-blue-500 opacity-60 blur-3xl"></div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
8
dashboard/15-final/app/ui/fonts.ts
Normal file
8
dashboard/15-final/app/ui/fonts.ts
Normal file
@@ -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'],
|
||||
});
|
||||
@@ -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
|
||||
|
||||
BIN
dashboard/15-final/public/hero-mobile.png
Normal file
BIN
dashboard/15-final/public/hero-mobile.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 117 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 696 KiB After Width: | Height: | Size: 372 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Reference in New Issue
Block a user