New: Hero Page und Navigation

2024-10-04 16:46:22 +02:00 · 2024-10-04 16:46:22 +02:00 · fd5aa79278
commit fd5aa79278
parent e2902457e2
45 changed files with 1804 additions and 1310 deletions
--- a/api/db/migrations/20241004120724_nachhilfeangebot_erstellen/migration.sql
+++ b/api/db/migrations/20241004120724_nachhilfeangebot_erstellen/migration.sql
@ -0,0 +1,7 @@
+-- CreateTable
+CREATE TABLE "Nachhilfeangebot" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "subject" TEXT NOT NULL,
+    "currentClass" TEXT NOT NULL,
+    "cost" DECIMAL NOT NULL
+);
--- a/api/db/migrations/20241004122139_created_at/migration.sql
+++ b/api/db/migrations/20241004122139_created_at/migration.sql
@ -0,0 +1,22 @@
+/*
+  Warnings:
+
+  - Added the required column `userId` to the `Nachhilfeangebot` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- RedefineTables
+PRAGMA defer_foreign_keys=ON;
+PRAGMA foreign_keys=OFF;
+CREATE TABLE "new_Nachhilfeangebot" (
+    "id" INTEGER NOT NULL PRIMARY KEY AUTOINCREMENT,
+    "subject" TEXT NOT NULL,
+    "currentClass" TEXT NOT NULL,
+    "cost" DECIMAL NOT NULL,
+    "userId" INTEGER NOT NULL,
+    CONSTRAINT "Nachhilfeangebot_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User" ("id") ON DELETE RESTRICT ON UPDATE CASCADE
+);
+INSERT INTO "new_Nachhilfeangebot" ("cost", "currentClass", "id", "subject") SELECT "cost", "currentClass", "id", "subject" FROM "Nachhilfeangebot";
+DROP TABLE "Nachhilfeangebot";
+ALTER TABLE "new_Nachhilfeangebot" RENAME TO "Nachhilfeangebot";
+PRAGMA foreign_keys=ON;
+PRAGMA defer_foreign_keys=OFF;
--- a/api/db/schema.prisma
+++ b/api/db/schema.prisma
@ -24,18 +24,19 @@ model UserExample {
 }

 model User {
-  id                  Int        @id @default(autoincrement())
-  email               String     @unique
+  id                  Int                @id @default(autoincrement())
+  email               String             @unique
  firstName           String?
  lastName            String?
  hashedPassword      String?
  salt                String?
-  identites           Identity[]
  resetToken          String?
  resetTokenExpiresAt DateTime?
-  createdAt           DateTime   @default(now())
-  updatedAt           DateTime   @updatedAt
-  roles               String     @default("user")
+  createdAt           DateTime           @default(now())
+  updatedAt           DateTime           @updatedAt
+  roles               String             @default("user")
+  identites           Identity[]
+  Nachhilfeangebot    Nachhilfeangebot[]
 }

 model Identity {
@ -61,3 +62,12 @@ model Post {
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
 }
+
+model Nachhilfeangebot {
+  id           Int     @id @default(autoincrement())
+  subject      String
+  currentClass String
+  cost         Decimal
+  userId       Int
+  user         User    @relation(fields: [userId], references: [id])
+}
--- a/api/src/functions/auth.ts
+++ b/api/src/functions/auth.ts
@ -25,6 +25,7 @@ export const handler = async (
  context: Context
 ) => {
  const forgotPasswordOptions: DbAuthHandlerOptions['forgotPassword'] = {
+    enabled: false,
    // handler() is invoked after verifying that a user was found with the given
    // username. This is where you can send the user an email with a link to
    // reset their password. With the default dbAuth routes and field names, the
@ -75,6 +76,7 @@ export const handler = async (
    // didn't validate their email yet), throw an error and it will be returned
    // by the `logIn()` function from `useAuth()` in the form of:
    // `{ message: 'Error message' }`
+    enabled: false,
    handler: (user) => {
      return user
    },
@ -100,6 +102,7 @@ export const handler = async (
    handler: (_user) => {
      return true
    },
+    enabled: false,

    // If `false` then the new password MUST be different from the current one
    allowReusedPassword: true,
@ -139,6 +142,7 @@ export const handler = async (
    //
    // If this returns anything else, it will be returned by the
    // `signUp()` function in the form of: `{ message: 'String here' }`.
+    enabled: false,
    handler: ({
      username,
      hashedPassword,
--- a/api/src/graphql/identities.sdl.ts
+++ b/api/src/graphql/identities.sdl.ts
@ -0,0 +1,36 @@
+export const schema = gql`
+  type Identity {
+    id: Int!
+    provider: String!
+    # uid: String!
+    userId: Int!
+    user: User!
+    # accessToken: String
+    # scope: String
+    lastLoginAt: DateTime!
+    createdAt: DateTime!
+    updatedAt: DateTime!
+  }
+
+  type Query {
+    identities: [Identity!]! @requireAuth
+  }
+
+  input CreateIdentityInput {
+    provider: String!
+    uid: String!
+    userId: Int!
+    accessToken: String
+    scope: String
+    lastLoginAt: DateTime!
+  }
+
+  input UpdateIdentityInput {
+    provider: String
+    uid: String
+    userId: Int
+    accessToken: String
+    scope: String
+    lastLoginAt: DateTime
+  }
+`
--- a/api/src/graphql/nachhilfeangebots.sdl.ts
+++ b/api/src/graphql/nachhilfeangebots.sdl.ts
@ -0,0 +1,37 @@
+export const schema = gql`
+  type Nachhilfeangebot {
+    id: Int!
+    subject: String!
+    currentClass: String!
+    cost: Float!
+    user: User!
+  }
+
+  type Query {
+    nachhilfeangebots: [Nachhilfeangebot!]! @requireAuth
+    nachhilfeangebot(id: Int!): Nachhilfeangebot @requireAuth
+  }
+
+  input CreateNachhilfeangebotInput {
+    subject: String!
+    currentClass: String!
+    cost: Float!
+  }
+
+  input UpdateNachhilfeangebotInput {
+    subject: String
+    currentClass: String
+    cost: Float
+  }
+
+  type Mutation {
+    createNachhilfeangebot(
+      input: CreateNachhilfeangebotInput!
+    ): Nachhilfeangebot! @requireAuth
+    updateNachhilfeangebot(
+      id: Int!
+      input: UpdateNachhilfeangebotInput!
+    ): Nachhilfeangebot! @requireAuth
+    deleteNachhilfeangebot(id: Int!): Nachhilfeangebot! @requireAuth
+  }
+`
--- a/api/src/graphql/users.sdl.ts
+++ b/api/src/graphql/users.sdl.ts
@ -0,0 +1,43 @@
+export const schema = gql`
+  type User {
+    id: Int!
+    email: String!
+    firstName: String
+    lastName: String
+    # hashedPassword: String
+    # salt: String
+    # resetToken: String
+    # resetTokenExpiresAt: DateTime
+    createdAt: DateTime!
+    updatedAt: DateTime!
+    roles: String!
+    identites: [Identity]!
+    Nachhilfeangebot: [Nachhilfeangebot]!
+  }
+
+  type Query {
+    users: [User!]! @requireAuth
+  }
+
+  input CreateUserInput {
+    email: String!
+    firstName: String
+    lastName: String
+    hashedPassword: String
+    salt: String
+    resetToken: String
+    resetTokenExpiresAt: DateTime
+    roles: String!
+  }
+
+  input UpdateUserInput {
+    email: String
+    firstName: String
+    lastName: String
+    hashedPassword: String
+    salt: String
+    resetToken: String
+    resetTokenExpiresAt: DateTime
+    roles: String
+  }
+`
--- a/api/src/lib/auth.ts
+++ b/api/src/lib/auth.ts
@ -36,7 +36,13 @@ export const getCurrentUser = async (session: Decoded) => {

  return await db.user.findUnique({
    where: { id: session.id },
-    select: { id: true, email: true, roles: true },
+    select: {
+      id: true,
+      email: true,
+      roles: true,
+      firstName: true,
+      lastName: true,
+    },
  })
 }

--- a/api/src/services/identities/identities.scenarios.ts
+++ b/api/src/services/identities/identities.scenarios.ts
@ -0,0 +1,35 @@
+import type { Prisma, Identity } from '@prisma/client'
+import type { ScenarioData } from '@redwoodjs/testing/api'
+
+export const standard = defineScenario<Prisma.IdentityCreateArgs>({
+  identity: {
+    one: {
+      data: {
+        provider: 'String',
+        uid: 'String',
+        updatedAt: '2024-10-04T12:47:55.457Z',
+        user: {
+          create: {
+            email: 'String3211260',
+            updatedAt: '2024-10-04T12:47:55.457Z',
+          },
+        },
+      },
+    },
+    two: {
+      data: {
+        provider: 'String',
+        uid: 'String',
+        updatedAt: '2024-10-04T12:47:55.457Z',
+        user: {
+          create: {
+            email: 'String2559297',
+            updatedAt: '2024-10-04T12:47:55.457Z',
+          },
+        },
+      },
+    },
+  },
+})
+
+export type StandardScenario = ScenarioData<Identity, 'identity'>
--- a/api/src/services/identities/identities.test.ts
+++ b/api/src/services/identities/identities.test.ts
@ -0,0 +1,18 @@
+import type { Identity } from '@prisma/client'
+
+import { identities } from './identities'
+import type { StandardScenario } from './identities.scenarios'
+
+// Generated boilerplate tests do not account for all circumstances
+// and can fail without adjustments, e.g. Float.
+//           Please refer to the RedwoodJS Testing Docs:
+//       https://redwoodjs.com/docs/testing#testing-services
+// https://redwoodjs.com/docs/testing#jest-expect-type-considerations
+
+describe('identities', () => {
+  scenario('returns all identities', async (scenario: StandardScenario) => {
+    const result = await identities()
+
+    expect(result.length).toEqual(Object.keys(scenario.identity).length)
+  })
+})
--- a/api/src/services/identities/identities.ts
+++ b/api/src/services/identities/identities.ts
@ -0,0 +1,19 @@
+import type { QueryResolvers, IdentityRelationResolvers } from 'types/graphql'
+
+import { db } from 'src/lib/db'
+
+export const identities: QueryResolvers['identities'] = () => {
+  return db.identity.findMany()
+}
+
+export const identity: QueryResolvers['identity'] = ({ id }) => {
+  return db.identity.findUnique({
+    where: { id },
+  })
+}
+
+export const Identity: IdentityRelationResolvers = {
+  user: (_obj, { root }) => {
+    return db.identity.findUnique({ where: { id: root?.id } }).user()
+  },
+}
--- a/api/src/services/nachhilfeangebots/nachhilfeangebots.scenarios.ts
+++ b/api/src/services/nachhilfeangebots/nachhilfeangebots.scenarios.ts
@ -0,0 +1,26 @@
+import type { Prisma, Nachhilfeangebot } from '@prisma/client'
+import type { ScenarioData } from '@redwoodjs/testing/api'
+
+export const standard = defineScenario<Prisma.NachhilfeangebotCreateArgs>({
+  nachhilfeangebot: {
+    one: {
+      data: {
+        subject: 'String',
+        currentClass: 'String',
+        cost: 9626711.68060984,
+      },
+    },
+    two: {
+      data: {
+        subject: 'String',
+        currentClass: 'String',
+        cost: 3400746.9395209556,
+      },
+    },
+  },
+})
+
+export type StandardScenario = ScenarioData<
+  Nachhilfeangebot,
+  'nachhilfeangebot'
+>
--- a/api/src/services/nachhilfeangebots/nachhilfeangebots.test.ts
+++ b/api/src/services/nachhilfeangebots/nachhilfeangebots.test.ts
@ -0,0 +1,75 @@
+import { Prisma, Nachhilfeangebot } from '@prisma/client'
+
+import {
+  nachhilfeangebots,
+  nachhilfeangebot,
+  createNachhilfeangebot,
+  updateNachhilfeangebot,
+  deleteNachhilfeangebot,
+} from './nachhilfeangebots'
+import type { StandardScenario } from './nachhilfeangebots.scenarios'
+
+// Generated boilerplate tests do not account for all circumstances
+// and can fail without adjustments, e.g. Float.
+//           Please refer to the RedwoodJS Testing Docs:
+//       https://redwoodjs.com/docs/testing#testing-services
+// https://redwoodjs.com/docs/testing#jest-expect-type-considerations
+
+describe('nachhilfeangebots', () => {
+  scenario(
+    'returns all nachhilfeangebots',
+    async (scenario: StandardScenario) => {
+      const result = await nachhilfeangebots()
+
+      expect(result.length).toEqual(
+        Object.keys(scenario.nachhilfeangebot).length
+      )
+    }
+  )
+
+  scenario(
+    'returns a single nachhilfeangebot',
+    async (scenario: StandardScenario) => {
+      const result = await nachhilfeangebot({
+        id: scenario.nachhilfeangebot.one.id,
+      })
+
+      expect(result).toEqual(scenario.nachhilfeangebot.one)
+    }
+  )
+
+  scenario('creates a nachhilfeangebot', async () => {
+    const result = await createNachhilfeangebot({
+      input: {
+        subject: 'String',
+        currentClass: 'String',
+        cost: 3443924.824820386,
+      },
+    })
+
+    expect(result.subject).toEqual('String')
+    expect(result.currentClass).toEqual('String')
+    expect(result.cost).toEqual(new Prisma.Decimal(3443924.824820386))
+  })
+
+  scenario('updates a nachhilfeangebot', async (scenario: StandardScenario) => {
+    const original = (await nachhilfeangebot({
+      id: scenario.nachhilfeangebot.one.id,
+    })) as Nachhilfeangebot
+    const result = await updateNachhilfeangebot({
+      id: original.id,
+      input: { subject: 'String2' },
+    })
+
+    expect(result.subject).toEqual('String2')
+  })
+
+  scenario('deletes a nachhilfeangebot', async (scenario: StandardScenario) => {
+    const original = (await deleteNachhilfeangebot({
+      id: scenario.nachhilfeangebot.one.id,
+    })) as Nachhilfeangebot
+    const result = await nachhilfeangebot({ id: original.id })
+
+    expect(result).toEqual(null)
+  })
+})
--- a/api/src/services/nachhilfeangebots/nachhilfeangebots.ts
+++ b/api/src/services/nachhilfeangebots/nachhilfeangebots.ts
@ -0,0 +1,43 @@
+import type { QueryResolvers, MutationResolvers } from 'types/graphql'
+
+import { db } from 'src/lib/db'
+
+export const nachhilfeangebots: QueryResolvers['nachhilfeangebots'] = () => {
+  return db.nachhilfeangebot.findMany()
+}
+
+export const nachhilfeangebot: QueryResolvers['nachhilfeangebot'] = ({
+  id,
+}) => {
+  return {
+    ...db.nachhilfeangebot.findUnique({
+      where: { id },
+    }),
+    user: db.nachhilfeangebot.findUnique({ where: { id } }).user(),
+  }
+}
+
+export const createNachhilfeangebot: MutationResolvers['createNachhilfeangebot'] =
+  ({ input }) => {
+    return db.nachhilfeangebot.create({
+      data: {
+        ...input,
+        userId: context.currentUser.id,
+      },
+    })
+  }
+
+export const updateNachhilfeangebot: MutationResolvers['updateNachhilfeangebot'] =
+  ({ id, input }) => {
+    return db.nachhilfeangebot.update({
+      data: input,
+      where: { id },
+    })
+  }
+
+export const deleteNachhilfeangebot: MutationResolvers['deleteNachhilfeangebot'] =
+  ({ id }) => {
+    return db.nachhilfeangebot.delete({
+      where: { id },
+    })
+  }
--- a/api/src/services/users/users.scenarios.ts
+++ b/api/src/services/users/users.scenarios.ts
@ -0,0 +1,15 @@
+import type { Prisma, User } from '@prisma/client'
+import type { ScenarioData } from '@redwoodjs/testing/api'
+
+export const standard = defineScenario<Prisma.UserCreateArgs>({
+  user: {
+    one: {
+      data: { email: 'String5874784', updatedAt: '2024-10-04T12:47:22.490Z' },
+    },
+    two: {
+      data: { email: 'String7499025', updatedAt: '2024-10-04T12:47:22.490Z' },
+    },
+  },
+})
+
+export type StandardScenario = ScenarioData<User, 'user'>
--- a/api/src/services/users/users.test.ts
+++ b/api/src/services/users/users.test.ts
@ -0,0 +1,18 @@
+import type { User } from '@prisma/client'
+
+import { users } from './users'
+import type { StandardScenario } from './users.scenarios'
+
+// Generated boilerplate tests do not account for all circumstances
+// and can fail without adjustments, e.g. Float.
+//           Please refer to the RedwoodJS Testing Docs:
+//       https://redwoodjs.com/docs/testing#testing-services
+// https://redwoodjs.com/docs/testing#jest-expect-type-considerations
+
+describe('users', () => {
+  scenario('returns all users', async (scenario: StandardScenario) => {
+    const result = await users()
+
+    expect(result.length).toEqual(Object.keys(scenario.user).length)
+  })
+})
--- a/api/src/services/users/users.ts
+++ b/api/src/services/users/users.ts
@ -0,0 +1,22 @@
+import type { QueryResolvers, UserRelationResolvers } from 'types/graphql'
+
+import { db } from 'src/lib/db'
+
+export const users: QueryResolvers['users'] = () => {
+  return db.user.findMany()
+}
+
+export const user: QueryResolvers['user'] = ({ id }) => {
+  return db.user.findUnique({
+    where: { id },
+  })
+}
+
+export const User: UserRelationResolvers = {
+  identites: (_obj, { root }) => {
+    return db.user.findUnique({ where: { id: root?.id } }).identites()
+  },
+  Nachhilfeangebot: (_obj, { root }) => {
+    return db.user.findUnique({ where: { id: root?.id } }).Nachhilfeangebot()
+  },
+}
--- a/package.json
+++ b/package.json
@ -28,6 +28,7 @@
    "@storybook/react-dom-shim@npm:7.6.17": "https://verdaccio.tobbe.dev/@storybook/react-dom-shim/-/react-dom-shim-8.0.8.tgz"
  },
  "dependencies": {
+    "@headlessui/react": "^2.1.9",
    "crypto-js": "^4.2.0"
  }
 }
--- a/web/.storybook/main.ts
+++ b/web/.storybook/main.ts
@ -0,0 +1,19 @@
+import type { StorybookConfig } from 'storybook-framework-redwoodjs-vite'
+
+import { getPaths, importStatementPath } from '@redwoodjs/project-config'
+
+const redwoodProjectPaths = getPaths()
+
+const config: StorybookConfig = {
+  framework: 'storybook-framework-redwoodjs-vite',
+
+  stories: [
+    `${importStatementPath(
+      redwoodProjectPaths.web.src
+    )}/**/*.stories.@(js|jsx|ts|tsx|mdx)`,
+  ],
+
+  addons: ['@storybook/addon-essentials'],
+}
+
+export default config
--- a/web/.storybook/preview-body.html
+++ b/web/.storybook/preview-body.html
@ -0,0 +1 @@
+<div id="redwood-app"></div>
--- a/web/package.json
+++ b/web/package.json
@ -11,6 +11,7 @@
    ]
  },
  "dependencies": {
+    "@heroicons/react": "^2.1.5",
    "@redwoodjs/auth-dbauth-web": "8.3.0",
    "@redwoodjs/forms": "8.3.0",
    "@redwoodjs/router": "8.3.0",
--- a/web/src/Routes.tsx
+++ b/web/src/Routes.tsx
@ -9,6 +9,7 @@

 import { Set, Router, Route, PrivateSet } from '@redwoodjs/router'

+import NavigationLayout from 'src/layouts/NavigationLayout'
 import ScaffoldLayout from 'src/layouts/ScaffoldLayout'

 import { useAuth } from './auth'
@ -16,18 +17,27 @@ import { useAuth } from './auth'
 const Routes = () => {
  return (
    <Router useAuth={useAuth}>
-      <PrivateSet unauthenticated="home" roles="admin">
-        <Set wrap={ScaffoldLayout} title="Posts" titleTo="posts" buttonLabel="New Post" buttonTo="newPost">
-          <Route path="/admin/posts/new" page={PostNewPostPage} name="newPost" />
-          <Route path="/admin/posts/{id:Int}/edit" page={PostEditPostPage} name="editPost" />
-          <Route path="/admin/posts/{id:Int}" page={PostPostPage} name="post" />
-          <Route path="/admin/posts" page={PostPostsPage} name="posts" />
-        </Set>
+      <PrivateSet wrap={NavigationLayout} unauthenticated="home">
+        <Route path="/dashboard" page={DashboardPage} name="dashboard" />
+        <PrivateSet unauthenticated="home" roles="admin">
+          <Set wrap={ScaffoldLayout} title="Posts" titleTo="posts" buttonLabel="New Post" buttonTo="newPost">
+            <Route path="/admin/posts/new" page={PostNewPostPage} name="newPost" />
+            <Route path="/admin/posts/{id:Int}/edit" page={PostEditPostPage} name="editPost" />
+            <Route path="/admin/posts/{id:Int}" page={PostPostPage} name="post" />
+            <Route path="/admin/posts" page={PostPostsPage} name="posts" />
+          </Set>
+          <Set wrap={ScaffoldLayout} title="Nachhilfeangebote" titleTo="nachhilfeangebote" buttonLabel="New Nachhilfeangebot" buttonTo="newNachhilfeangebot">
+            <Route path="/admin/nachhilfeangebote/new" page={NachhilfeangebotNewNachhilfeangebotPage} name="newNachhilfeangebot" />
+            <Route path="/admin/nachhilfeangebote/{id:Int}/edit" page={NachhilfeangebotEditNachhilfeangebotPage} name="editNachhilfeangebot" />
+            <Route path="/admin/nachhilfeangebote/{id:Int}" page={NachhilfeangebotNachhilfeangebotPage} name="nachhilfeangebot" />
+            <Route path="/admin/nachhilfeangebote" page={NachhilfeangebotNachhilfeangebotsPage} name="nachhilfeangebote" />
+          </Set>
+        </PrivateSet>
      </PrivateSet>
-      <Route path="/login" page={LoginPage} name="login" />
-      <Route path="/signup" page={SignupPage} name="signup" />
-      <Route path="/forgot-password" page={ForgotPasswordPage} name="forgotPassword" />
-      <Route path="/reset-password" page={ResetPasswordPage} name="resetPassword" />
+      {/* <Route path="/login" page={LoginPage} name="login" /> */}
+      {/* <Route path="/signup" page={SignupPage} name="signup" /> */}
+      {/* <Route path="/forgot-password" page={ForgotPasswordPage} name="forgotPassword" /> */}
+      {/* <Route path="/reset-password" page={ResetPasswordPage} name="resetPassword" /> */}
      <Route path="/" page={HomePage} name="home" />
      <Route notfound page={NotFoundPage} />
    </Router>
--- a/web/src/components/Hero/Hero.stories.tsx
+++ b/web/src/components/Hero/Hero.stories.tsx
@ -0,0 +1,26 @@
+// Pass props to your component by passing an `args` object to your story
+//
+// ```tsx
+// export const Primary: Story = {
+//  args: {
+//    propName: propValue
+//  }
+// }
+// ```
+//
+// See https://storybook.js.org/docs/react/writing-stories/args.
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Hero from './Hero'
+
+const meta: Meta<typeof Hero> = {
+  component: Hero,
+  tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof Hero>
+
+export const Primary: Story = {}
--- a/web/src/components/Hero/Hero.test.tsx
+++ b/web/src/components/Hero/Hero.test.tsx
@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import Hero from './Hero'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//    https://redwoodjs.com/docs/testing#testing-components
+
+describe('Hero', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<Hero />)
+    }).not.toThrow()
+  })
+})
--- a/web/src/components/Hero/Hero.tsx
+++ b/web/src/components/Hero/Hero.tsx
@ -0,0 +1,117 @@
+import React, { useEffect } from 'react'
+
+import { ChevronRightIcon } from '@heroicons/react/20/solid'
+
+import { navigate, routes } from '@redwoodjs/router'
+
+import { useAuth } from 'src/auth'
+
+export default function Hero() {
+  const { isAuthenticated } = useAuth()
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      navigate(routes.dashboard())
+    }
+  }, [isAuthenticated])
+
+  return (
+    <div className="bg-white">
+      <div className="relative isolate overflow-hidden bg-gradient-to-b from-indigo-100/20">
+        <div className="mx-auto max-w-7xl pb-24 pt-10 sm:pb-32 lg:grid lg:grid-cols-2 lg:gap-x-8 lg:px-8 lg:py-40">
+          <div className="px-6 lg:px-0 lg:pt-4">
+            <div className="mx-auto max-w-2xl">
+              <div className="max-w-lg">
+                <img
+                  className="h-11"
+                  src="https://tailwindui.com/plus/img/logos/mark.svg?color=indigo&shade=600"
+                  alt="Your Company"
+                />
+                <div className="mt-24 sm:mt-32 lg:mt-16">
+                  <a
+                    href="https://git.kocoder.xyz/kocoded/Nachhilfesystem24/releases"
+                    className="inline-flex space-x-6"
+                  >
+                    <span className="rounded-full bg-indigo-600/10 px-3 py-1 text-sm font-semibold leading-6 text-indigo-600 ring-1 ring-inset ring-indigo-600/10">
+                      What&quot;s new
+                    </span>
+                    <span className="inline-flex items-center space-x-2 text-sm font-medium leading-6 text-gray-600">
+                      <span>Just shipped v0.1.0</span>
+                      <ChevronRightIcon
+                        className="h-5 w-5 text-gray-400"
+                        aria-hidden="true"
+                      />
+                    </span>
+                  </a>
+                </div>
+                <h1 className="mt-10 text-4xl font-bold tracking-tight text-gray-900 sm:text-6xl">
+                  Nachhilfesystem SZU
+                </h1>
+                <p className="mt-6 text-lg leading-8 text-gray-600">
+                  Hier ist das neue Nachhilfesystem für das SZU! Klicke unten
+                  auf den Link, um dich mit deinem Microsoft Konto anzumelden.
+                </p>
+                <div className="mt-10 flex items-center gap-x-6">
+                  <a
+                    href={`https://login.microsoftonline.com/common/oauth2/v2.0/authorize?client_id=${
+                      process.env.MICROSOFT_OAUTH_CLIENT_ID
+                    }&grant_type=authorization_code&response_type=code&redirect_uri=${
+                      process.env.MICROSOFT_OAUTH_REDIRECT_URI
+                    }&scope=${process.env.MICROSOFT_OAUTH_SCOPES.split(' ').join('+')}`}
+                    className="rounded-md bg-indigo-600 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+                  >
+                    Anmelden
+                  </a>
+                  <a
+                    href="https://git.kocoder.xyz/kocoded/Nachhilfesystem24"
+                    className="text-sm font-semibold leading-6 text-gray-900"
+                  >
+                    View on Gitea <span aria-hidden="true">→</span>
+                  </a>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className="mt-20 sm:mt-24 md:mx-auto md:max-w-2xl lg:mx-0 lg:mt-0 lg:w-screen">
+            <div
+              className="absolute inset-y-0 right-1/2 -z-10 -mr-10 w-[200%] skew-x-[-30deg] bg-white shadow-xl shadow-indigo-600/10 ring-1 ring-indigo-50 md:-mr-20 lg:-mr-36"
+              aria-hidden="true"
+            />
+            <div className="shadow-lg md:rounded-3xl">
+              <div className="bg-indigo-500 [clip-path:inset(0)] md:[clip-path:inset(0_round_theme(borderRadius.3xl))]">
+                <div
+                  className="absolute -inset-y-px left-1/2 -z-10 ml-10 w-[200%] skew-x-[-30deg] bg-indigo-100 opacity-20 ring-1 ring-inset ring-white md:ml-20 lg:ml-36"
+                  aria-hidden="true"
+                />
+                <div className="relative px-6 pt-8 sm:pt-16 md:pl-16 md:pr-0">
+                  <div className="mx-auto max-w-2xl md:mx-0 md:max-w-none">
+                    <div className="w-screen overflow-hidden rounded-tl-xl bg-gray-900">
+                      <div className="flex bg-gray-800/40 ring-1 ring-white/5">
+                        <div className="-mb-px flex text-sm font-medium leading-6 text-gray-400">
+                          <div className="border-b border-r border-b-white/20 border-r-white/10 bg-white/5 px-4 py-2 text-white">
+                            NotificationSetting.jsx
+                          </div>
+                          <div className="border-r border-gray-600/10 px-4 py-2">
+                            App.jsx
+                          </div>
+                        </div>
+                      </div>
+                      <div className="px-6 pb-14 pt-6">
+                        {/* Your code example */}
+                      </div>
+                    </div>
+                  </div>
+                  <div
+                    className="pointer-events-none absolute inset-0 ring-1 ring-inset ring-black/10 md:rounded-3xl"
+                    aria-hidden="true"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="absolute inset-x-0 bottom-0 -z-10 h-24 bg-gradient-to-t from-white sm:h-32" />
+      </div>
+    </div>
+  )
+}
--- a/web/src/components/Nachhilfeangebot/EditNachhilfeangebotCell/EditNachhilfeangebotCell.tsx
+++ b/web/src/components/Nachhilfeangebot/EditNachhilfeangebotCell/EditNachhilfeangebotCell.tsx
@ -0,0 +1,92 @@
+import type {
+  EditNachhilfeangebotById,
+  UpdateNachhilfeangebotInput,
+  UpdateNachhilfeangebotMutationVariables,
+} from 'types/graphql'
+
+import { navigate, routes } from '@redwoodjs/router'
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@redwoodjs/web'
+import { useMutation } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
+
+import NachhilfeangebotForm from 'src/components/Nachhilfeangebot/NachhilfeangebotForm'
+
+export const QUERY: TypedDocumentNode<EditNachhilfeangebotById> = gql`
+  query EditNachhilfeangebotById($id: Int!) {
+    nachhilfeangebot: nachhilfeangebot(id: $id) {
+      id
+      subject
+      currentClass
+      cost
+    }
+  }
+`
+
+const UPDATE_NACHHILFEANGEBOT_MUTATION: TypedDocumentNode<
+  EditNachhilfeangebotById,
+  UpdateNachhilfeangebotMutationVariables
+> = gql`
+  mutation UpdateNachhilfeangebotMutation(
+    $id: Int!
+    $input: UpdateNachhilfeangebotInput!
+  ) {
+    updateNachhilfeangebot(id: $id, input: $input) {
+      id
+      subject
+      currentClass
+      cost
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Failure = ({ error }: CellFailureProps) => (
+  <div className="rw-cell-error">{error?.message}</div>
+)
+
+export const Success = ({
+  nachhilfeangebot,
+}: CellSuccessProps<EditNachhilfeangebotById>) => {
+  const [updateNachhilfeangebot, { loading, error }] = useMutation(
+    UPDATE_NACHHILFEANGEBOT_MUTATION,
+    {
+      onCompleted: () => {
+        toast.success('Nachhilfeangebot updated')
+        navigate(routes.nachhilfeangebots())
+      },
+      onError: (error) => {
+        toast.error(error.message)
+      },
+    }
+  )
+
+  const onSave = (
+    input: UpdateNachhilfeangebotInput,
+    id: EditNachhilfeangebotById['nachhilfeangebot']['id']
+  ) => {
+    updateNachhilfeangebot({ variables: { id, input } })
+  }
+
+  return (
+    <div className="rw-segment">
+      <header className="rw-segment-header">
+        <h2 className="rw-heading rw-heading-secondary">
+          Edit Nachhilfeangebot {nachhilfeangebot?.id}
+        </h2>
+      </header>
+      <div className="rw-segment-main">
+        <NachhilfeangebotForm
+          nachhilfeangebot={nachhilfeangebot}
+          onSave={onSave}
+          error={error}
+          loading={loading}
+        />
+      </div>
+    </div>
+  )
+}
--- a/web/src/components/Nachhilfeangebot/Nachhilfeangebot/Nachhilfeangebot.tsx
+++ b/web/src/components/Nachhilfeangebot/Nachhilfeangebot/Nachhilfeangebot.tsx
@ -0,0 +1,99 @@
+import type {
+  DeleteNachhilfeangebotMutation,
+  DeleteNachhilfeangebotMutationVariables,
+  FindNachhilfeangebotById,
+} from 'types/graphql'
+
+import { Link, routes, navigate } from '@redwoodjs/router'
+import { useMutation } from '@redwoodjs/web'
+import type { TypedDocumentNode } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
+
+import {} from 'src/lib/formatters'
+
+const DELETE_NACHHILFEANGEBOT_MUTATION: TypedDocumentNode<
+  DeleteNachhilfeangebotMutation,
+  DeleteNachhilfeangebotMutationVariables
+> = gql`
+  mutation DeleteNachhilfeangebotMutation($id: Int!) {
+    deleteNachhilfeangebot(id: $id) {
+      id
+    }
+  }
+`
+
+interface Props {
+  nachhilfeangebot: NonNullable<FindNachhilfeangebotById['nachhilfeangebot']>
+}
+
+const Nachhilfeangebot = ({ nachhilfeangebot }: Props) => {
+  const [deleteNachhilfeangebot] = useMutation(
+    DELETE_NACHHILFEANGEBOT_MUTATION,
+    {
+      onCompleted: () => {
+        toast.success('Nachhilfeangebot deleted')
+        navigate(routes.nachhilfeangebote())
+      },
+      onError: (error) => {
+        toast.error(error.message)
+      },
+    }
+  )
+
+  const onDeleteClick = (id: DeleteNachhilfeangebotMutationVariables['id']) => {
+    if (
+      confirm('Are you sure you want to delete nachhilfeangebot ' + id + '?')
+    ) {
+      deleteNachhilfeangebot({ variables: { id } })
+    }
+  }
+
+  return (
+    <>
+      <div className="rw-segment">
+        <header className="rw-segment-header">
+          <h2 className="rw-heading rw-heading-secondary">
+            Nachhilfeangebot {nachhilfeangebot.id} Detail
+          </h2>
+        </header>
+        <table className="rw-table">
+          <tbody>
+            <tr>
+              <th>Id</th>
+              <td>{nachhilfeangebot.id}</td>
+            </tr>
+            <tr>
+              <th>Subject</th>
+              <td>{nachhilfeangebot.subject}</td>
+            </tr>
+            <tr>
+              <th>Current class</th>
+              <td>{nachhilfeangebot.currentClass}</td>
+            </tr>
+            <tr>
+              <th>Cost</th>
+              <td>{nachhilfeangebot.cost}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <nav className="rw-button-group">
+        <Link
+          to={routes.editNachhilfeangebot({ id: nachhilfeangebot.id })}
+          className="rw-button rw-button-blue"
+        >
+          Edit
+        </Link>
+        <button
+          type="button"
+          className="rw-button rw-button-red"
+          onClick={() => onDeleteClick(nachhilfeangebot.id)}
+        >
+          Delete
+        </button>
+      </nav>
+    </>
+  )
+}
+
+export default Nachhilfeangebot
--- a/web/src/components/Nachhilfeangebot/NachhilfeangebotCell/NachhilfeangebotCell.tsx
+++ b/web/src/components/Nachhilfeangebot/NachhilfeangebotCell/NachhilfeangebotCell.tsx
@ -0,0 +1,45 @@
+import type {
+  FindNachhilfeangebotById,
+  FindNachhilfeangebotByIdVariables,
+} from 'types/graphql'
+
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@redwoodjs/web'
+
+import Nachhilfeangebot from 'src/components/Nachhilfeangebot/Nachhilfeangebot'
+
+export const QUERY: TypedDocumentNode<
+  FindNachhilfeangebotById,
+  FindNachhilfeangebotByIdVariables
+> = gql`
+  query FindNachhilfeangebotById($id: Int!) {
+    nachhilfeangebot: nachhilfeangebot(id: $id) {
+      id
+      subject
+      currentClass
+      cost
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => <div>Nachhilfeangebot not found</div>
+
+export const Failure = ({
+  error,
+}: CellFailureProps<FindNachhilfeangebotByIdVariables>) => (
+  <div className="rw-cell-error">{error?.message}</div>
+)
+
+export const Success = ({
+  nachhilfeangebot,
+}: CellSuccessProps<
+  FindNachhilfeangebotById,
+  FindNachhilfeangebotByIdVariables
+>) => {
+  return <Nachhilfeangebot nachhilfeangebot={nachhilfeangebot} />
+}
--- a/web/src/components/Nachhilfeangebot/NachhilfeangebotForm/NachhilfeangebotForm.tsx
+++ b/web/src/components/Nachhilfeangebot/NachhilfeangebotForm/NachhilfeangebotForm.tsx
@ -0,0 +1,109 @@
+import type {
+  EditNachhilfeangebotById,
+  UpdateNachhilfeangebotInput,
+} from 'types/graphql'
+
+import type { RWGqlError } from '@redwoodjs/forms'
+import {
+  Form,
+  FormError,
+  FieldError,
+  Label,
+  TextField,
+  Submit,
+} from '@redwoodjs/forms'
+
+type FormNachhilfeangebot = NonNullable<
+  EditNachhilfeangebotById['nachhilfeangebot']
+>
+
+interface NachhilfeangebotFormProps {
+  nachhilfeangebot?: EditNachhilfeangebotById['nachhilfeangebot']
+  onSave: (
+    data: UpdateNachhilfeangebotInput,
+    id?: FormNachhilfeangebot['id']
+  ) => void
+  error: RWGqlError
+  loading: boolean
+}
+
+const NachhilfeangebotForm = (props: NachhilfeangebotFormProps) => {
+  const onSubmit = (data: FormNachhilfeangebot) => {
+    props.onSave(data, props?.nachhilfeangebot?.id)
+  }
+
+  return (
+    <div className="rw-form-wrapper">
+      <Form<FormNachhilfeangebot> onSubmit={onSubmit} error={props.error}>
+        <FormError
+          error={props.error}
+          wrapperClassName="rw-form-error-wrapper"
+          titleClassName="rw-form-error-title"
+          listClassName="rw-form-error-list"
+        />
+
+        <Label
+          name="subject"
+          className="rw-label"
+          errorClassName="rw-label rw-label-error"
+        >
+          Subject
+        </Label>
+
+        <TextField
+          name="subject"
+          defaultValue={props.nachhilfeangebot?.subject}
+          className="rw-input"
+          errorClassName="rw-input rw-input-error"
+          validation={{ required: true }}
+        />
+
+        <FieldError name="subject" className="rw-field-error" />
+
+        <Label
+          name="currentClass"
+          className="rw-label"
+          errorClassName="rw-label rw-label-error"
+        >
+          Current class
+        </Label>
+
+        <TextField
+          name="currentClass"
+          defaultValue={props.nachhilfeangebot?.currentClass}
+          className="rw-input"
+          errorClassName="rw-input rw-input-error"
+          validation={{ required: true }}
+        />
+
+        <FieldError name="currentClass" className="rw-field-error" />
+
+        <Label
+          name="cost"
+          className="rw-label"
+          errorClassName="rw-label rw-label-error"
+        >
+          Cost
+        </Label>
+
+        <TextField
+          name="cost"
+          defaultValue={props.nachhilfeangebot?.cost}
+          className="rw-input"
+          errorClassName="rw-input rw-input-error"
+          validation={{ valueAsNumber: true, required: true }}
+        />
+
+        <FieldError name="cost" className="rw-field-error" />
+
+        <div className="rw-button-group">
+          <Submit disabled={props.loading} className="rw-button rw-button-blue">
+            Save
+          </Submit>
+        </div>
+      </Form>
+    </div>
+  )
+}
+
+export default NachhilfeangebotForm
--- a/web/src/components/Nachhilfeangebot/Nachhilfeangebots/Nachhilfeangebots.tsx
+++ b/web/src/components/Nachhilfeangebot/Nachhilfeangebots/Nachhilfeangebots.tsx
@ -0,0 +1,111 @@
+import type {
+  DeleteNachhilfeangebotMutation,
+  DeleteNachhilfeangebotMutationVariables,
+  FindNachhilfeangebots,
+} from 'types/graphql'
+
+import { Link, routes } from '@redwoodjs/router'
+import { useMutation } from '@redwoodjs/web'
+import type { TypedDocumentNode } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
+
+import { QUERY } from 'src/components/Nachhilfeangebot/NachhilfeangebotsCell'
+import { truncate } from 'src/lib/formatters'
+
+const DELETE_NACHHILFEANGEBOT_MUTATION: TypedDocumentNode<
+  DeleteNachhilfeangebotMutation,
+  DeleteNachhilfeangebotMutationVariables
+> = gql`
+  mutation DeleteNachhilfeangebotMutation($id: Int!) {
+    deleteNachhilfeangebot(id: $id) {
+      id
+    }
+  }
+`
+
+const NachhilfeangebotsList = ({
+  nachhilfeangebots,
+}: FindNachhilfeangebots) => {
+  const [deleteNachhilfeangebot] = useMutation(
+    DELETE_NACHHILFEANGEBOT_MUTATION,
+    {
+      onCompleted: () => {
+        toast.success('Nachhilfeangebot deleted')
+      },
+      onError: (error) => {
+        toast.error(error.message)
+      },
+      // This refetches the query on the list page. Read more about other ways to
+      // update the cache over here:
+      // https://www.apollographql.com/docs/react/data/mutations/#making-all-other-cache-updates
+      refetchQueries: [{ query: QUERY }],
+      awaitRefetchQueries: true,
+    }
+  )
+
+  const onDeleteClick = (id: DeleteNachhilfeangebotMutationVariables['id']) => {
+    if (
+      confirm('Are you sure you want to delete nachhilfeangebot ' + id + '?')
+    ) {
+      deleteNachhilfeangebot({ variables: { id } })
+    }
+  }
+
+  return (
+    <div className="rw-segment rw-table-wrapper-responsive">
+      <table className="rw-table">
+        <thead>
+          <tr>
+            <th>Id</th>
+            <th>Subject</th>
+            <th>Current class</th>
+            <th>Cost</th>
+            <th>&nbsp;</th>
+          </tr>
+        </thead>
+        <tbody>
+          {nachhilfeangebots.map((nachhilfeangebot) => (
+            <tr key={nachhilfeangebot.id}>
+              <td>{truncate(nachhilfeangebot.id)}</td>
+              <td>{truncate(nachhilfeangebot.subject)}</td>
+              <td>{truncate(nachhilfeangebot.currentClass)}</td>
+              <td>{truncate(nachhilfeangebot.cost)}</td>
+              <td>
+                <nav className="rw-table-actions">
+                  <Link
+                    to={routes.nachhilfeangebot({ id: nachhilfeangebot.id })}
+                    title={
+                      'Show nachhilfeangebot ' + nachhilfeangebot.id + ' detail'
+                    }
+                    className="rw-button rw-button-small"
+                  >
+                    Show
+                  </Link>
+                  <Link
+                    to={routes.editNachhilfeangebot({
+                      id: nachhilfeangebot.id,
+                    })}
+                    title={'Edit nachhilfeangebot ' + nachhilfeangebot.id}
+                    className="rw-button rw-button-small rw-button-blue"
+                  >
+                    Edit
+                  </Link>
+                  <button
+                    type="button"
+                    title={'Delete nachhilfeangebot ' + nachhilfeangebot.id}
+                    className="rw-button rw-button-small rw-button-red"
+                    onClick={() => onDeleteClick(nachhilfeangebot.id)}
+                  >
+                    Delete
+                  </button>
+                </nav>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  )
+}
+
+export default NachhilfeangebotsList
--- a/web/src/components/Nachhilfeangebot/NachhilfeangebotsCell/NachhilfeangebotsCell.tsx
+++ b/web/src/components/Nachhilfeangebot/NachhilfeangebotsCell/NachhilfeangebotsCell.tsx
@ -0,0 +1,50 @@
+import type {
+  FindNachhilfeangebots,
+  FindNachhilfeangebotsVariables,
+} from 'types/graphql'
+
+import { Link, routes } from '@redwoodjs/router'
+import type {
+  CellSuccessProps,
+  CellFailureProps,
+  TypedDocumentNode,
+} from '@redwoodjs/web'
+
+import Nachhilfeangebots from 'src/components/Nachhilfeangebot/Nachhilfeangebots'
+
+export const QUERY: TypedDocumentNode<
+  FindNachhilfeangebots,
+  FindNachhilfeangebotsVariables
+> = gql`
+  query FindNachhilfeangebots {
+    nachhilfeangebots {
+      id
+      subject
+      currentClass
+      cost
+    }
+  }
+`
+
+export const Loading = () => <div>Loading...</div>
+
+export const Empty = () => {
+  return (
+    <div className="rw-text-center">
+      Keine Nachhilfeangebote bis jetzt.{' '}
+      <Link to={routes.newNachhilfeangebot()} className="rw-link">
+        Ein neues erstellen?
+      </Link>
+    </div>
+  )
+}
+
+export const Failure = ({ error }: CellFailureProps<FindNachhilfeangebots>) => (
+  <div className="rw-cell-error">{error?.message}</div>
+)
+
+export const Success = ({
+  nachhilfeangebots,
+}: CellSuccessProps<FindNachhilfeangebots, FindNachhilfeangebotsVariables>) => {
+  return <Nachhilfeangebots nachhilfeangebots={nachhilfeangebots} />
+}
--- a/web/src/components/Nachhilfeangebot/NewNachhilfeangebot/NewNachhilfeangebot.tsx
+++ b/web/src/components/Nachhilfeangebot/NewNachhilfeangebot/NewNachhilfeangebot.tsx
@ -0,0 +1,59 @@
+import type {
+  CreateNachhilfeangebotMutation,
+  CreateNachhilfeangebotInput,
+  CreateNachhilfeangebotMutationVariables,
+} from 'types/graphql'
+
+import { navigate, routes } from '@redwoodjs/router'
+import { useMutation } from '@redwoodjs/web'
+import type { TypedDocumentNode } from '@redwoodjs/web'
+import { toast } from '@redwoodjs/web/toast'
+
+import NachhilfeangebotForm from 'src/components/Nachhilfeangebot/NachhilfeangebotForm'
+
+const CREATE_NACHHILFEANGEBOT_MUTATION: TypedDocumentNode<
+  CreateNachhilfeangebotMutation,
+  CreateNachhilfeangebotMutationVariables
+> = gql`
+  mutation CreateNachhilfeangebotMutation(
+    $input: CreateNachhilfeangebotInput!
+  ) {
+    createNachhilfeangebot(input: $input) {
+      id
+    }
+  }
+`
+
+const NewNachhilfeangebot = () => {
+  const [createNachhilfeangebot, { loading, error }] = useMutation(
+    CREATE_NACHHILFEANGEBOT_MUTATION,
+    {
+      onCompleted: () => {
+        toast.success('Nachhilfeangebot created')
+        navigate(routes.nachhilfeangebote())
+      },
+      onError: (error) => {
+        toast.error(error.message)
+      },
+    }
+  )
+
+  const onSave = (input: CreateNachhilfeangebotInput) => {
+    createNachhilfeangebot({ variables: { input } })
+  }
+
+  return (
+    <div className="rw-segment">
+      <header className="rw-segment-header">
+        <h2 className="rw-heading rw-heading-secondary">
+          New Nachhilfeangebot
+        </h2>
+      </header>
+      <div className="rw-segment-main">
+        <NachhilfeangebotForm onSave={onSave} loading={loading} error={error} />
+      </div>
+    </div>
+  )
+}
+
+export default NewNachhilfeangebot
--- a/web/src/layouts/NavigationLayout/NavigationLayout.stories.tsx
+++ b/web/src/layouts/NavigationLayout/NavigationLayout.stories.tsx
@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import NavigationLayout from './NavigationLayout'
+
+const meta: Meta<typeof NavigationLayout> = {
+  component: NavigationLayout,
+}
+
+export default meta
+
+type Story = StoryObj<typeof NavigationLayout>
+
+export const Primary: Story = {}
--- a/web/src/layouts/NavigationLayout/NavigationLayout.test.tsx
+++ b/web/src/layouts/NavigationLayout/NavigationLayout.test.tsx
@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import NavigationLayout from './NavigationLayout'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//   https://redwoodjs.com/docs/testing#testing-pages-layouts
+
+describe('NavigationLayout', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<NavigationLayout />)
+    }).not.toThrow()
+  })
+})
--- a/web/src/layouts/NavigationLayout/NavigationLayout.tsx
+++ b/web/src/layouts/NavigationLayout/NavigationLayout.tsx
@ -0,0 +1,266 @@
+type NavigationLayoutProps = {
+  children?: React.ReactNode
+}
+
+import { useState } from 'react'
+
+import {
+  Dialog,
+  DialogPanel,
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+  Popover,
+  PopoverButton,
+  PopoverGroup,
+  PopoverPanel,
+} from '@headlessui/react'
+import {
+  ChevronDownIcon,
+  PhoneIcon,
+  PlayCircleIcon,
+} from '@heroicons/react/20/solid'
+import {
+  Bars3Icon,
+  ChartPieIcon,
+  CursorArrowRaysIcon,
+  FingerPrintIcon,
+  XMarkIcon,
+} from '@heroicons/react/24/outline'
+
+import { Link, routes } from '@redwoodjs/router'
+
+import { useAuth } from 'src/auth'
+
+const adminsites = [
+  {
+    name: 'Posts',
+    description: 'Get a better understanding of your traffic',
+    href: '/admin/posts',
+    icon: ChartPieIcon,
+  },
+  {
+    name: 'Users',
+    description: 'Speak directly to your customers',
+    href: '/admin/posts',
+    icon: CursorArrowRaysIcon,
+  },
+  {
+    name: 'Nachhilfeangebote',
+    description: 'Your customers&quot; data will be safe and secure',
+    href: '/admin/nachhilfeangebote',
+    icon: FingerPrintIcon,
+  },
+]
+
+const callsToAction = [
+  { name: 'Watch demo', href: '#', icon: PlayCircleIcon },
+  { name: 'Contact sales', href: '#', icon: PhoneIcon },
+]
+
+export default function NavigationLayout({ children }: NavigationLayoutProps) {
+  const { logOut, hasRole } = useAuth()
+  const [mobileMenuOpen, setMobileMenuOpen] = useState(false)
+
+  return (
+    <>
+      <header className="bg-white">
+        <nav
+          aria-label="Global"
+          className="mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8"
+        >
+          <div className="flex lg:flex-1">
+            <Link to={routes.dashboard()} className="-m-1.5 p-1.5">
+              <span className="sr-only">Your Company</span>
+              <img
+                alt=""
+                src={`https://tailwindui.com/plus/img/logos/mark.svg?color=${hasRole('admin') ? 'red' : 'indigo'}&shade=600`}
+                className="h-8 w-auto"
+              />
+            </Link>
+          </div>
+          <div className="flex lg:hidden">
+            <button
+              type="button"
+              onClick={() => setMobileMenuOpen(true)}
+              className="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700"
+            >
+              <span className="sr-only">Open main menu</span>
+              <Bars3Icon aria-hidden="true" className="h-6 w-6" />
+            </button>
+          </div>
+          {}
+          <PopoverGroup className="hidden lg:flex lg:gap-x-12">
+            {hasRole('admin') && (
+              <Popover className="relative">
+                <PopoverButton className="flex items-center gap-x-1 text-sm font-semibold leading-6 text-gray-900">
+                  Admin
+                  <ChevronDownIcon
+                    aria-hidden="true"
+                    className="h-5 w-5 flex-none text-gray-400"
+                  />
+                </PopoverButton>
+                <PopoverPanel
+                  transition
+                  className="absolute -left-8 top-full z-10 mt-3 w-screen max-w-md overflow-hidden rounded-3xl bg-white shadow-lg ring-1 ring-gray-900/5 transition data-[closed]:translate-y-1 data-[closed]:opacity-0 data-[enter]:duration-200 data-[leave]:duration-150 data-[enter]:ease-out data-[leave]:ease-in"
+                >
+                  <div className="p-4">
+                    {adminsites.map((item) => (
+                      <div
+                        key={item.name}
+                        className="group relative flex items-center gap-x-6 rounded-lg p-4 text-sm leading-6 hover:bg-gray-50"
+                      >
+                        <div className="flex h-11 w-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white">
+                          <item.icon
+                            aria-hidden="true"
+                            className="h-6 w-6 text-gray-600 group-hover:text-indigo-600"
+                          />
+                        </div>
+                        <div className="flex-auto">
+                          <a
+                            href={item.href}
+                            className="block font-semibold text-gray-900"
+                          >
+                            {item.name}
+                            <span className="absolute inset-0" />
+                          </a>
+                          <p className="mt-1 text-gray-600">
+                            {item.description}
+                          </p>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                  <div className="grid grid-cols-2 divide-x divide-gray-900/5 bg-gray-50">
+                    {callsToAction.map((item) => (
+                      <a
+                        key={item.name}
+                        href={item.href}
+                        className="flex items-center justify-center gap-x-2.5 p-3 text-sm font-semibold leading-6 text-gray-900 hover:bg-gray-100"
+                      >
+                        <item.icon
+                          aria-hidden="true"
+                          className="h-5 w-5 flex-none text-gray-400"
+                        />
+                        {item.name}
+                      </a>
+                    ))}
+                  </div>
+                </PopoverPanel>
+              </Popover>
+            )}
+            <Link
+              to="#"
+              className="text-sm font-semibold leading-6 text-gray-900"
+            >
+              Features
+            </Link>
+            <Link
+              to="#"
+              className="text-sm font-semibold leading-6 text-gray-900"
+            >
+              Marketplace
+            </Link>
+            <Link
+              to="#"
+              className="text-sm font-semibold leading-6 text-gray-900"
+            >
+              Company
+            </Link>
+          </PopoverGroup>
+          <div className="hidden lg:flex lg:flex-1 lg:justify-end">
+            <button
+              onClick={logOut}
+              className="text-sm font-semibold leading-6 text-gray-900"
+            >
+              Log out
+            </button>
+          </div>
+        </nav>
+        <Dialog
+          open={mobileMenuOpen}
+          onClose={setMobileMenuOpen}
+          className="lg:hidden"
+        >
+          <div className="fixed inset-0 z-10" />
+          <DialogPanel className="fixed inset-y-0 right-0 z-10 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10">
+            <div className="flex items-center justify-between">
+              <Link to="#" className="-m-1.5 p-1.5">
+                <span className="sr-only">Your Company</span>
+                <img
+                  alt=""
+                  src={`https://tailwindui.com/plus/img/logos/mark.svg?color=${hasRole('admin') ? 'red' : 'indigo'}&shade=600`}
+                  className="h-8 w-auto"
+                />
+              </Link>
+              <button
+                type="button"
+                onClick={() => setMobileMenuOpen(false)}
+                className="-m-2.5 rounded-md p-2.5 text-gray-700"
+              >
+                <span className="sr-only">Close menu</span>
+                <XMarkIcon aria-hidden="true" className="h-6 w-6" />
+              </button>
+            </div>
+            <div className="mt-6 flow-root">
+              <div className="-my-6 divide-y divide-gray-500/10">
+                <div className="space-y-2 py-6">
+                  {hasRole('admin') && (
+                    <Disclosure as="div" className="-mx-3">
+                      <DisclosureButton className="group flex w-full items-center justify-between rounded-lg py-2 pl-3 pr-3.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50">
+                        Admin
+                        <ChevronDownIcon
+                          aria-hidden="true"
+                          className="h-5 w-5 flex-none group-data-[open]:rotate-180"
+                        />
+                      </DisclosureButton>
+                      <DisclosurePanel className="mt-2 space-y-2">
+                        {[...adminsites, ...callsToAction].map((item) => (
+                          <DisclosureButton
+                            key={item.name}
+                            as="a"
+                            href={item.href}
+                            className="block rounded-lg py-2 pl-6 pr-3 text-sm font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                          >
+                            {item.name}
+                          </DisclosureButton>
+                        ))}
+                      </DisclosurePanel>
+                    </Disclosure>
+                  )}
+                  <Link
+                    to="#"
+                    className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                  >
+                    Features
+                  </Link>
+                  <Link
+                    to="#"
+                    className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                  >
+                    Marketplace
+                  </Link>
+                  <Link
+                    to="#"
+                    className="-mx-3 block rounded-lg px-3 py-2 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                  >
+                    Company
+                  </Link>
+                </div>
+                <div className="py-6">
+                  <button
+                    onClick={logOut}
+                    className="-mx-3 block rounded-lg px-3 py-2.5 text-base font-semibold leading-7 text-gray-900 hover:bg-gray-50"
+                  >
+                    Log out
+                  </button>
+                </div>
+              </div>
+            </div>
+          </DialogPanel>
+        </Dialog>
+      </header>
+      <>{children}</>
+    </>
+  )
+}
--- a/web/src/pages/DashboardPage/DashboardPage.stories.tsx
+++ b/web/src/pages/DashboardPage/DashboardPage.stories.tsx
@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import DashboardPage from './DashboardPage'
+
+const meta: Meta<typeof DashboardPage> = {
+  component: DashboardPage,
+}
+
+export default meta
+
+type Story = StoryObj<typeof DashboardPage>
+
+export const Primary: Story = {}
--- a/web/src/pages/DashboardPage/DashboardPage.test.tsx
+++ b/web/src/pages/DashboardPage/DashboardPage.test.tsx
@ -0,0 +1,14 @@
+import { render } from '@redwoodjs/testing/web'
+
+import DashboardPage from './DashboardPage'
+
+//   Improve this test with help from the Redwood Testing Doc:
+//   https://redwoodjs.com/docs/testing#testing-pages-layouts
+
+describe('DashboardPage', () => {
+  it('renders successfully', () => {
+    expect(() => {
+      render(<DashboardPage />)
+    }).not.toThrow()
+  })
+})
--- a/web/src/pages/DashboardPage/DashboardPage.tsx
+++ b/web/src/pages/DashboardPage/DashboardPage.tsx
@ -0,0 +1,21 @@
+// import { Link, routes } from '@redwoodjs/router'
+import { Metadata } from '@redwoodjs/web'
+
+import { useAuth } from 'src/auth'
+
+const DashboardPage = () => {
+  const { currentUser } = useAuth()
+  return (
+    <>
+      <Metadata title="Dashboard" description="Dashboard page" />
+
+      <div className="mx-8 my-8">
+        <h1 className="text-2xl">
+          Hello {currentUser.firstName} {currentUser.lastName}
+        </h1>
+      </div>
+    </>
+  )
+}
+
+export default DashboardPage
--- a/web/src/pages/HomePage/HomePage.tsx
+++ b/web/src/pages/HomePage/HomePage.tsx
@ -1,26 +1,14 @@
 // import { Link, routes } from '@redwoodjs/router'
-import { Link } from '@redwoodjs/router'
 import { Metadata } from '@redwoodjs/web'

-import { useAuth } from 'src/auth'
+import Hero from 'src/components/Hero'

 const HomePage = () => {
-  const user = useAuth()
-
  return (
    <>
      <Metadata title="Home" description="Home page" />

-      <h1>HomePage</h1>
-      <p>
-        Find me in <code>./web/src/pages/HomePage/HomePage.tsx</code>
-      </p>
-      {/*
-          My default route is named `home`, link to me with:
-          `<Link to={routes.home()}>Home</Link>`
-      */}
-      {user && user.isAuthenticated + ' ' + user.hasRole('admin')}
-      <Link to={'/login'}>Login</Link>
+      <Hero />
    </>
  )
 }
--- a/web/src/pages/LoginPage/LoginPage.tsx
+++ b/web/src/pages/LoginPage/LoginPage.tsx
@ -8,7 +8,7 @@ import {
  Submit,
  FieldError,
 } from '@redwoodjs/forms'
-import { Link, navigate, routes } from '@redwoodjs/router'
+import { navigate, routes } from '@redwoodjs/router'
 import { Metadata } from '@redwoodjs/web'
 import { toast, Toaster } from '@redwoodjs/web/toast'

@ -101,12 +101,12 @@ const LoginPage = () => {
                  />

                  <div className="rw-forgot-link">
-                    <Link
+                    {/* <Link
                      to={routes.forgotPassword()}
                      className="rw-forgot-link"
                    >
                      Forgot Password?
-                    </Link>
+                    </Link> */}
                  </div>

                  <FieldError name="password" className="rw-field-error" />
@ -120,9 +120,9 @@ const LoginPage = () => {
          </div>
          <div className="rw-login-link">
            <span>Don&apos;t have an account?</span>{' '}
-            <Link to={routes.signup()} className="rw-link">
+            {/* <Link to={routes.signup()} className="rw-link">
              Sign up!
-            </Link>
+            </Link> */}
          </div>
        </div>
        <a
--- a/web/src/pages/Nachhilfeangebot/EditNachhilfeangebotPage/EditNachhilfeangebotPage.tsx
+++ b/web/src/pages/Nachhilfeangebot/EditNachhilfeangebotPage/EditNachhilfeangebotPage.tsx
@ -0,0 +1,11 @@
+import EditNachhilfeangebotCell from 'src/components/Nachhilfeangebot/EditNachhilfeangebotCell'
+
+type NachhilfeangebotPageProps = {
+  id: number
+}
+
+const EditNachhilfeangebotPage = ({ id }: NachhilfeangebotPageProps) => {
+  return <EditNachhilfeangebotCell id={id} />
+}
+
+export default EditNachhilfeangebotPage
--- a/web/src/pages/Nachhilfeangebot/NachhilfeangebotPage/NachhilfeangebotPage.tsx
+++ b/web/src/pages/Nachhilfeangebot/NachhilfeangebotPage/NachhilfeangebotPage.tsx
@ -0,0 +1,11 @@
+import NachhilfeangebotCell from 'src/components/Nachhilfeangebot/NachhilfeangebotCell'
+
+type NachhilfeangebotPageProps = {
+  id: number
+}
+
+const NachhilfeangebotPage = ({ id }: NachhilfeangebotPageProps) => {
+  return <NachhilfeangebotCell id={id} />
+}
+
+export default NachhilfeangebotPage
--- a/web/src/pages/Nachhilfeangebot/NachhilfeangebotsPage/NachhilfeangebotsPage.tsx
+++ b/web/src/pages/Nachhilfeangebot/NachhilfeangebotsPage/NachhilfeangebotsPage.tsx
@ -0,0 +1,7 @@
+import NachhilfeangebotsCell from 'src/components/Nachhilfeangebot/NachhilfeangebotsCell'
+
+const NachhilfeangebotsPage = () => {
+  return <NachhilfeangebotsCell />
+}
+
+export default NachhilfeangebotsPage
--- a/web/src/pages/Nachhilfeangebot/NewNachhilfeangebotPage/NewNachhilfeangebotPage.tsx
+++ b/web/src/pages/Nachhilfeangebot/NewNachhilfeangebotPage/NewNachhilfeangebotPage.tsx
@ -0,0 +1,7 @@
+import NewNachhilfeangebot from 'src/components/Nachhilfeangebot/NewNachhilfeangebot'
+
+const NewNachhilfeangebotPage = () => {
+  return <NewNachhilfeangebot />
+}
+
+export default NewNachhilfeangebotPage
--- a/yarn.lock
+++ b/yarn.lock