page.js 2.8 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. import Image from "next/image";
  2. export default function Home() {
  3. return (
  4. <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
  5. <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
  6. <Image
  7. className="dark:invert"
  8. src="/next.svg"
  9. alt="Next.js logo"
  10. width={100}
  11. height={20}
  12. priority
  13. />
  14. <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
  15. <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
  16. To get started, edit the page.js file.
  17. </h1>
  18. <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
  19. Looking for a starting point or more instructions? Head over to{" "}
  20. <a
  21. href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
  22. className="font-medium text-zinc-950 dark:text-zinc-50"
  23. >
  24. Templates
  25. </a>{" "}
  26. or the{" "}
  27. <a
  28. href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
  29. className="font-medium text-zinc-950 dark:text-zinc-50"
  30. >
  31. Learning
  32. </a>{" "}
  33. center.
  34. </p>
  35. </div>
  36. <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
  37. <a
  38. className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
  39. href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
  40. target="_blank"
  41. rel="noopener noreferrer"
  42. >
  43. <Image
  44. className="dark:invert"
  45. src="/vercel.svg"
  46. alt="Vercel logomark"
  47. width={16}
  48. height={16}
  49. />
  50. Deploy Now
  51. </a>
  52. <a
  53. className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
  54. href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
  55. target="_blank"
  56. rel="noopener noreferrer"
  57. >
  58. Documentation
  59. </a>
  60. </div>
  61. </main>
  62. </div>
  63. );
  64. }