chore: add payload and some fixes

.vscode/settings.json

@@ -0,0 +1,22 @@
+{
+  "workbench.colorCustomizations": {
+    "activityBar.activeBackground": "#fa1b49",
+    "activityBar.background": "#fa1b49",
+    "activityBar.foreground": "#e7e7e7",
+    "activityBar.inactiveForeground": "#e7e7e799",
+    "activityBarBadge.background": "#155e02",
+    "activityBarBadge.foreground": "#e7e7e7",
+    "commandCenter.border": "#e7e7e799",
+    "sash.hoverBorder": "#fa1b49",
+    "statusBar.background": "#dd0531",
+    "statusBar.foreground": "#e7e7e7",
+    "statusBarItem.hoverBackground": "#fa1b49",
+    "statusBarItem.remoteBackground": "#dd0531",
+    "statusBarItem.remoteForeground": "#e7e7e7",
+    "titleBar.activeBackground": "#dd0531",
+    "titleBar.activeForeground": "#e7e7e7",
+    "titleBar.inactiveBackground": "#dd053199",
+    "titleBar.inactiveForeground": "#e7e7e799"
+  },
+  "peacock.color": "#dd0531"
+}

package.json

@@ -9,16 +9,24 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@payloadcms/db-mongodb": "3.0.0-alpha.2",
+    "@payloadcms/next": "3.0.0-alpha.2",
+    "@payloadcms/richtext-slate": "3.0.0-alpha.2",
+    "@payloadcms/ui": "3.0.0-alpha.2",
+    "next": "14.1.1-canary.26",
+    "payload": "3.0.0-alpha.2",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.1.0"
+    "react-router": "^6.22.2",
+    "react-router-dom": "^6.22.2",
+    "sass": "^1.71.1"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
-    "eslint-config-next": "14.1.0"
+    "eslint-config-next": "14.1.0",
+    "typescript": "^5"
   }
 }

payload.config.ts

@@ -0,0 +1,20 @@
+import path from "path";
+
+import { mongooseAdapter } from "@payloadcms/db-mongodb"; // database-adapter-import
+import { slateEditor } from "@payloadcms/richtext-slate"; // editor-import
+import { buildConfig } from "payload/config";
+
+export default buildConfig({
+  editor: slateEditor({}), // editor-config
+  collections: [],
+  secret: "asdfasdf",
+  typescript: {
+    outputFile: path.resolve(__dirname, "payload-types.ts"),
+  },
+  graphQL: {
+    schemaOutputFile: path.resolve(__dirname, "generated-schema.graphql"),
+  },
+  db: mongooseAdapter({
+    url: "mongodb://localhost:27017/next-payload-3",
+  }),
+});

src/app/(payload)/admin/(dashboard)/account/page.tsx

@@ -0,0 +1,8 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import { Account, generateMetadata as generateMeta } from '@payloadcms/next/pages/Account'
+import config from '@payload-config'
+
+export const generateMetadata = async () => generateMeta({ config })
+
+export default ({ searchParams }) => Account({ config, searchParams })

src/app/(payload)/admin/(dashboard)/collections/[collection]/[...segments]/layout.tsx

@@ -0,0 +1,11 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
+import { DocumentLayout } from '@payloadcms/next/layouts/Document'
+import configPromise from '@payload-config'
+
+export default async ({ children, params }: { children: React.ReactNode; params }) => (
+  <DocumentLayout config={configPromise} collectionSlug={params.collection}>
+    {children}
+  </DocumentLayout>
+)

src/app/(payload)/admin/(dashboard)/collections/[collection]/[...segments]/page.tsx

@@ -0,0 +1,13 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import { Document, generateMetadata as generateMeta } from '@payloadcms/next/pages/Document'
+import config from '@payload-config'
+
+export const generateMetadata = async ({ params }) => generateMeta({ config, params })
+
+export default ({ params, searchParams }) =>
+  Document({
+    params,
+    searchParams,
+    config,
+  })

src/app/(payload)/admin/(dashboard)/collections/[collection]/page.tsx

@@ -0,0 +1,14 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import { ListView, generateMetadata as generateMeta } from '@payloadcms/next/pages/List'
+import config from '@payload-config'
+
+export const generateMetadata = async ({ params }) => generateMeta({ config, params })
+
+export default ({ params, searchParams }) =>
+  ListView({
+    collectionSlug: params.collection,
+    searchParams,
+    config,
+    route: `/collections/${params.collection + (params.segments?.length ? `/${params.segments.join('/')}` : '')}`,
+  })

src/app/(payload)/admin/(dashboard)/globals/[global]/[[...segments]]/page.tsx

@@ -0,0 +1,13 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import { Document, generateMetadata as generateMeta } from '@payloadcms/next/pages/Document'
+import config from '@payload-config'
+
+export const generateMetadata = async ({ params }) => generateMeta({ config, params })
+
+export default ({ params, searchParams }) =>
+  Document({
+    config,
+    params,
+    searchParams,
+  })

src/app/(payload)/admin/(dashboard)/globals/[global]/layout.tsx

@@ -0,0 +1,11 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
+import { DocumentLayout } from '@payloadcms/next/layouts/Document'
+import configPromise from '@payload-config'
+
+export default async ({ children, params }: { children: React.ReactNode; params }) => (
+  <DocumentLayout config={configPromise} globalSlug={params.global}>
+    {children}
+  </DocumentLayout>
+)

src/app/(payload)/admin/(dashboard)/layout.tsx

@@ -0,0 +1,11 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
+import {AdminLayout} from '@payloadcms/next/layouts/Admin/index'
+import configPromise from '@payload-config'
+
+const Layout = async ({ children }: { children: React.ReactNode }) => (
+  <AdminLayout config={configPromise}>{children}</AdminLayout>
+)
+
+export default Layout

src/app/(payload)/admin/(dashboard)/page.tsx

@@ -0,0 +1,9 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import { Dashboard, generateMetadata as generateMeta } from '@payloadcms/next/pages/Dashboard/index'
+import { Metadata } from 'next'
+import config from '@payload-config'
+
+export const generateMetadata = async (): Promise<Metadata> => generateMeta({ config })
+
+export default async ({ searchParams }) => Dashboard({ config, searchParams })

src/app/(payload)/admin/create-first-user/page.tsx

@@ -0,0 +1,13 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
+import {
+  CreateFirstUser,
+  generateMetadata as generateMeta,
+} from '@payloadcms/next/pages/CreateFirstUser'
+import { Metadata } from 'next'
+import config from '@payload-config'
+
+export const generateMetadata = async (): Promise<Metadata> => generateMeta({ config })
+
+export default async () => <CreateFirstUser config={config} />

src/app/(payload)/admin/forgot/page.tsx

@@ -0,0 +1,13 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
+import {
+  ForgotPassword,
+  generateMetadata as generateMeta,
+} from '@payloadcms/next/pages/ForgotPassword'
+import { Metadata } from 'next'
+import config from '@payload-config'
+
+export const generateMetadata = async (): Promise<Metadata> => generateMeta({ config })
+
+export default async () => <ForgotPassword config={config} />

src/app/(payload)/admin/login/page.tsx

@@ -0,0 +1,10 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
+import { Login, generateMetadata as generateMeta } from '@payloadcms/next/pages/Login'
+import { Metadata } from 'next'
+import config from '@payload-config'
+
+export const generateMetadata = async (): Promise<Metadata> => generateMeta({ config })
+
+export default async ({ searchParams }) => <Login config={config} searchParams={searchParams} />

src/app/(payload)/admin/logout-inactivity/page.tsx

@@ -0,0 +1,12 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
+import { Logout, generateMetadata as generateMeta } from '@payloadcms/next/pages/Logout'
+import { Metadata } from 'next'
+import config from '@payload-config'
+
+export const generateMetadata = async (): Promise<Metadata> => generateMeta({ config })
+
+export default async ({ searchParams }) => (
+  <Logout config={config} searchParams={searchParams} inactivity />
+)

src/app/(payload)/admin/logout/page.tsx

@@ -0,0 +1,10 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
+import { Logout, generateMetadata as generateMeta } from '@payloadcms/next/pages/Logout'
+import { Metadata } from 'next'
+import config from '@payload-config'
+
+export const generateMetadata = async (): Promise<Metadata> => generateMeta({ config })
+
+export default async ({ searchParams }) => <Logout config={config} searchParams={searchParams} />

src/app/(payload)/admin/reset/[token]/page.tsx

@@ -0,0 +1,13 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
+import {
+  ResetPassword,
+  generateMetadata as generateMeta,
+} from '@payloadcms/next/pages/ResetPassword'
+import { Metadata } from 'next'
+import config from '@payload-config'
+
+export const generateMetadata = async (): Promise<Metadata> => generateMeta({ config })
+
+export default async ({ params }) => <ResetPassword config={config} token={params.token} />

src/app/(payload)/admin/unauthorized/page.tsx

@@ -0,0 +1,10 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
+import { Unauthorized, generateMetadata as generateMeta } from '@payloadcms/next/pages/Unauthorized'
+import { Metadata } from 'next'
+import config from '@payload-config'
+
+export const generateMetadata = async (): Promise<Metadata> => generateMeta({ config })
+
+export default async () => <Unauthorized config={config} />

src/app/(payload)/admin/verify/[token]/page.tsx

@@ -0,0 +1,10 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
+import { Verify, generateMetadata as generateMeta } from '@payloadcms/next/pages/Verify'
+import { Metadata } from 'next'
+import config from '@payload-config'
+
+export const generateMetadata = async (): Promise<Metadata> => generateMeta({ config })
+
+export default async ({ params }) => <Verify config={config} token={params.token} />

src/app/(payload)/api/[...slug]/route.ts

@@ -0,0 +1,9 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { REST_GET, REST_DELETE, REST_PATCH, REST_POST } from '@payloadcms/next/routes'
+
+export const GET = REST_GET(config)
+export const POST = REST_POST(config)
+export const DELETE = REST_DELETE(config)
+export const PATCH = REST_PATCH(config)

src/app/(payload)/api/[collection]/file/[filename]/route.ts

@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { GET_STATIC_FILE } from '@payloadcms/next/routes'
+
+export const GET = GET_STATIC_FILE(config)

src/app/(payload)/api/graphql-playground/route.ts

@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { GRAPHQL_PLAYGROUND_GET } from '@payloadcms/next/routes'
+
+export const GET = GRAPHQL_PLAYGROUND_GET(config)

src/app/(payload)/api/graphql/route.ts

@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY it because it could be re-written at any time. */
+import config from '@payload-config'
+import { GRAPHQL_POST } from '@payloadcms/next/routes'
+
+export const POST = GRAPHQL_POST(config)

src/app/(payload)/layout.tsx

@@ -0,0 +1,9 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import React from 'react'
+import { RootLayout } from '@payloadcms/next/layouts/Root'
+import configPromise from '@payload-config'
+
+export default async ({ children }: { children: React.ReactNode }) => (
+  <RootLayout config={configPromise}>{children}</RootLayout>
+)

src/app/(payload)/page.tsx

@@ -0,0 +1,6 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import { RootPage } from '@payloadcms/next/pages/Root'
+import config from '@payload-config'
+
+export default () => RootPage({ config })

src/app/globals.css

@@ -1,107 +0,0 @@
-:root {
-  --max-width: 1100px;
-  --border-radius: 12px;
-  --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono",
-    "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro",
-    "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
-
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
-
-  --primary-glow: conic-gradient(
-    from 180deg at 50% 50%,
-    #16abff33 0deg,
-    #0885ff33 55deg,
-    #54d6ff33 120deg,
-    #0071ff33 160deg,
-    transparent 360deg
-  );
-  --secondary-glow: radial-gradient(
-    rgba(255, 255, 255, 1),
-    rgba(255, 255, 255, 0)
-  );
-
-  --tile-start-rgb: 239, 245, 249;
-  --tile-end-rgb: 228, 232, 233;
-  --tile-border: conic-gradient(
-    #00000080,
-    #00000040,
-    #00000030,
-    #00000020,
-    #00000010,
-    #00000010,
-    #00000080
-  );
-
-  --callout-rgb: 238, 240, 241;
-  --callout-border-rgb: 172, 175, 176;
-  --card-rgb: 180, 185, 188;
-  --card-border-rgb: 131, 134, 135;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
-
-    --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0));
-    --secondary-glow: linear-gradient(
-      to bottom right,
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0),
-      rgba(1, 65, 255, 0.3)
-    );
-
-    --tile-start-rgb: 2, 13, 46;
-    --tile-end-rgb: 2, 5, 19;
-    --tile-border: conic-gradient(
-      #ffffff80,
-      #ffffff40,
-      #ffffff30,
-      #ffffff20,
-      #ffffff10,
-      #ffffff10,
-      #ffffff80
-    );
-
-    --callout-rgb: 20, 20, 20;
-    --callout-border-rgb: 108, 108, 108;
-    --card-rgb: 100, 100, 100;
-    --card-border-rgb: 200, 200, 200;
-  }
-}
-
-* {
-  box-sizing: border-box;
-  padding: 0;
-  margin: 0;
-}
-
-html,
-body {
-  max-width: 100vw;
-  overflow-x: hidden;
-}
-
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
-}
-
-a {
-  color: inherit;
-  text-decoration: none;
-}
-
-@media (prefers-color-scheme: dark) {
-  html {
-    color-scheme: dark;
-  }
-}

src/app/layout.tsx

@@ -1,22 +0,0 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
-
-const inter = Inter({ subsets: ["latin"] });
-
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
-
-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
-  return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
-  );
-}

src/app/my-route/route.ts

@@ -0,0 +1,10 @@
+export const GET = async () => {
+  console.log('1')
+  console.log('1')
+  console.log('1')
+  console.log('1')
+  console.log('1')
+  return Response.json({
+    hello: 'elliot',
+  })
+}

src/app/page.module.css

@@ -1,230 +0,0 @@
-.main {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  padding: 6rem;
-  min-height: 100vh;
-}
-
-.description {
-  display: inherit;
-  justify-content: inherit;
-  align-items: inherit;
-  font-size: 0.85rem;
-  max-width: var(--max-width);
-  width: 100%;
-  z-index: 2;
-  font-family: var(--font-mono);
-}
-
-.description a {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.description p {
-  position: relative;
-  margin: 0;
-  padding: 1rem;
-  background-color: rgba(var(--callout-rgb), 0.5);
-  border: 1px solid rgba(var(--callout-border-rgb), 0.3);
-  border-radius: var(--border-radius);
-}
-
-.code {
-  font-weight: 700;
-  font-family: var(--font-mono);
-}
-
-.grid {
-  display: grid;
-  grid-template-columns: repeat(4, minmax(25%, auto));
-  max-width: 100%;
-  width: var(--max-width);
-}
-
-.card {
-  padding: 1rem 1.2rem;
-  border-radius: var(--border-radius);
-  background: rgba(var(--card-rgb), 0);
-  border: 1px solid rgba(var(--card-border-rgb), 0);
-  transition: background 200ms, border 200ms;
-}
-
-.card span {
-  display: inline-block;
-  transition: transform 200ms;
-}
-
-.card h2 {
-  font-weight: 600;
-  margin-bottom: 0.7rem;
-}
-
-.card p {
-  margin: 0;
-  opacity: 0.6;
-  font-size: 0.9rem;
-  line-height: 1.5;
-  max-width: 30ch;
-  text-wrap: balance;
-}
-
-.center {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  padding: 4rem 0;
-}
-
-.center::before {
-  background: var(--secondary-glow);
-  border-radius: 50%;
-  width: 480px;
-  height: 360px;
-  margin-left: -400px;
-}
-
-.center::after {
-  background: var(--primary-glow);
-  width: 240px;
-  height: 180px;
-  z-index: -1;
-}
-
-.center::before,
-.center::after {
-  content: "";
-  left: 50%;
-  position: absolute;
-  filter: blur(45px);
-  transform: translateZ(0);
-}
-
-.logo {
-  position: relative;
-}
-/* Enable hover only on non-touch devices */
-@media (hover: hover) and (pointer: fine) {
-  .card:hover {
-    background: rgba(var(--card-rgb), 0.1);
-    border: 1px solid rgba(var(--card-border-rgb), 0.15);
-  }
-
-  .card:hover span {
-    transform: translateX(4px);
-  }
-}
-
-@media (prefers-reduced-motion) {
-  .card:hover span {
-    transform: none;
-  }
-}
-
-/* Mobile */
-@media (max-width: 700px) {
-  .content {
-    padding: 4rem;
-  }
-
-  .grid {
-    grid-template-columns: 1fr;
-    margin-bottom: 120px;
-    max-width: 320px;
-    text-align: center;
-  }
-
-  .card {
-    padding: 1rem 2.5rem;
-  }
-
-  .card h2 {
-    margin-bottom: 0.5rem;
-  }
-
-  .center {
-    padding: 8rem 0 6rem;
-  }
-
-  .center::before {
-    transform: none;
-    height: 300px;
-  }
-
-  .description {
-    font-size: 0.8rem;
-  }
-
-  .description a {
-    padding: 1rem;
-  }
-
-  .description p,
-  .description div {
-    display: flex;
-    justify-content: center;
-    position: fixed;
-    width: 100%;
-  }
-
-  .description p {
-    align-items: center;
-    inset: 0 0 auto;
-    padding: 2rem 1rem 1.4rem;
-    border-radius: 0;
-    border: none;
-    border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25);
-    background: linear-gradient(
-      to bottom,
-      rgba(var(--background-start-rgb), 1),
-      rgba(var(--callout-rgb), 0.5)
-    );
-    background-clip: padding-box;
-    backdrop-filter: blur(24px);
-  }
-
-  .description div {
-    align-items: flex-end;
-    pointer-events: none;
-    inset: auto 0 0;
-    padding: 2rem;
-    height: 200px;
-    background: linear-gradient(
-      to bottom,
-      transparent 0%,
-      rgb(var(--background-end-rgb)) 40%
-    );
-    z-index: 1;
-  }
-}
-
-/* Tablet and Smaller Desktop */
-@media (min-width: 701px) and (max-width: 1120px) {
-  .grid {
-    grid-template-columns: repeat(2, 50%);
-  }
-}
-
-@media (prefers-color-scheme: dark) {
-  .vercelLogo {
-    filter: invert(1);
-  }
-
-  .logo {
-    filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70);
-  }
-}
-
-@keyframes rotate {
-  from {
-    transform: rotate(360deg);
-  }
-  to {
-    transform: rotate(0deg);
-  }
-}

src/app/page.tsx

@@ -1,95 +0,0 @@
-import Image from "next/image";
-import styles from "./page.module.css";
-
-export default function Home() {
-  return (
-    <main className={styles.main}>
-      <div className={styles.description}>
-        <p>
-          Get started by editing&nbsp;
-          <code className={styles.code}>src/app/page.tsx</code>
-        </p>
-        <div>
-          <a
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{" "}
-            <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className={styles.vercelLogo}
-              width={100}
-              height={24}
-              priority
-            />
-          </a>
-        </div>
-      </div>
-
-      <div className={styles.center}>
-        <Image
-          className={styles.logo}
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-
-      <div className={styles.grid}>
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Docs <span>-&gt;</span>
-          </h2>
-          <p>Find in-depth information about Next.js features and API.</p>
-        </a>
-
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Learn <span>-&gt;</span>
-          </h2>
-          <p>Learn about Next.js in an interactive course with&nbsp;quizzes!</p>
-        </a>
-
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Templates <span>-&gt;</span>
-          </h2>
-          <p>Explore starter templates for Next.js.</p>
-        </a>
-
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className={styles.card}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2>
-            Deploy <span>-&gt;</span>
-          </h2>
-          <p>
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
-      </div>
-    </main>
-  );
-}