|
| 1 | +import Image from "next/image"; |
| 2 | + |
| 3 | +export default function Home() { |
| 4 | + return ( |
| 5 | + <div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]"> |
| 6 | + <main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start"> |
| 7 | + <Image |
| 8 | + className="dark:invert" |
| 9 | + src="/next.svg" |
| 10 | + alt="Next.js logo" |
| 11 | + width={180} |
| 12 | + height={38} |
| 13 | + priority |
| 14 | + /> |
| 15 | + <ol className="list-inside list-decimal text-sm/6 text-center sm:text-left font-[family-name:var(--font-geist-mono)]"> |
| 16 | + <li className="mb-2 tracking-[-.01em]"> |
| 17 | + Get started by editing{" "} |
| 18 | + <code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-[family-name:var(--font-geist-mono)] font-semibold"> |
| 19 | + app/page.tsx |
| 20 | + </code> |
| 21 | + . |
| 22 | + </li> |
| 23 | + <li className="tracking-[-.01em]"> |
| 24 | + Save and see your changes instantly. |
| 25 | + </li> |
| 26 | + </ol> |
| 27 | + |
| 28 | + <div className="flex gap-4 items-center flex-col sm:flex-row"> |
| 29 | + <a |
| 30 | + className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto" |
| 31 | + href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" |
| 32 | + target="_blank" |
| 33 | + rel="noopener noreferrer" |
| 34 | + > |
| 35 | + <Image |
| 36 | + className="dark:invert" |
| 37 | + src="/vercel.svg" |
| 38 | + alt="Vercel logomark" |
| 39 | + width={20} |
| 40 | + height={20} |
| 41 | + /> |
| 42 | + Deploy now |
| 43 | + </a> |
| 44 | + <a |
| 45 | + className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]" |
| 46 | + href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" |
| 47 | + target="_blank" |
| 48 | + rel="noopener noreferrer" |
| 49 | + > |
| 50 | + Read our docs |
| 51 | + </a> |
| 52 | + </div> |
| 53 | + </main> |
| 54 | + <footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center"> |
| 55 | + <a |
| 56 | + className="flex items-center gap-2 hover:underline hover:underline-offset-4" |
| 57 | + href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" |
| 58 | + target="_blank" |
| 59 | + rel="noopener noreferrer" |
| 60 | + > |
| 61 | + <Image |
| 62 | + aria-hidden |
| 63 | + src="/file.svg" |
| 64 | + alt="File icon" |
| 65 | + width={16} |
| 66 | + height={16} |
| 67 | + /> |
| 68 | + Learn |
| 69 | + </a> |
| 70 | + <a |
| 71 | + className="flex items-center gap-2 hover:underline hover:underline-offset-4" |
| 72 | + href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" |
| 73 | + target="_blank" |
| 74 | + rel="noopener noreferrer" |
| 75 | + > |
| 76 | + <Image |
| 77 | + aria-hidden |
| 78 | + src="/window.svg" |
| 79 | + alt="Window icon" |
| 80 | + width={16} |
| 81 | + height={16} |
| 82 | + /> |
| 83 | + Examples |
| 84 | + </a> |
| 85 | + <a |
| 86 | + className="flex items-center gap-2 hover:underline hover:underline-offset-4" |
| 87 | + href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app" |
| 88 | + target="_blank" |
| 89 | + rel="noopener noreferrer" |
| 90 | + > |
| 91 | + <Image |
| 92 | + aria-hidden |
| 93 | + src="/globe.svg" |
| 94 | + alt="Globe icon" |
| 95 | + width={16} |
| 96 | + height={16} |
| 97 | + /> |
| 98 | + Go to nextjs.org → |
| 99 | + </a> |
| 100 | + </footer> |
| 101 | + </div> |
| 102 | + ); |
| 103 | +} |
0 commit comments