change: Header design

src/app/(frontend)/_components/Header.tsx

@@ -4,22 +4,26 @@ import { SignOutButton } from '@/app/(frontend)/_components/SignOutButton'
 import { SignInButton } from '@/app/(frontend)/_components/SignInButton'
 import React from 'react'
 import { getPayloadSession } from 'payload-authjs'
+import Link from 'next/link'
+import { Button } from '@/components/ui/button'
 
 
 export default async function Header(){
   const session = await getPayloadSession();
   return (
-    <header className="w-full h-20 bg-htl-red flex flex-row  items-center p-2 gap-4 shadow-lg justify-between">
-      <div className="w-auto flex items-center flex-row gap-4">
+    <header className="w-full h-20 flex flex-row  items-center  shadow-md justify-between pr-2">
+      <div className="w-auto flex h-full bg-htl-red items-center flex-row gap-4 px-2">
         <Image
-          className="h-16 w-auto"
+          className="h-16 w-auto rounded"
           src={HTLDLogo}
           alt={"HTL Dornbirn Logo"}
         />
         <p className="text-6xl text-white">Diplom- und Abschlussarbeiten</p>
       </div>
       <div className="w-auto">
-        {session ? <SignOutButton /> : <SignInButton />}
+        <Link href="/admin" className="text-sm/6 font-semibold text-gray-900">
+         Administration <span aria-hidden="true">&rarr;</span>
+        </Link>
       </div>
 
     </header>

src/app/(frontend)/globals.css

@@ -3,6 +3,7 @@
 
 @theme {
   --color-htl-red: #e4534dff;
+  --color-htl-gray: #3d4c5aff;
 }
 
 @custom-variant dark (&:is(.dark *));

src/app/(frontend)/page.tsx

@@ -10,8 +10,10 @@ const Page = async () => {
   return (
     <main>
 
+<div className="pt-8">
+  <DiplomarbeitSearch />
 
-          <DiplomarbeitSearch />
+</div>