add a contact page

Author: CommanderStorm

app/layout.tsx

@@ -1,6 +1,7 @@
 import "./globals.css";
 import type { Metadata } from "next";
 import { ThemeProvider } from "next-themes";
+import { Toaster } from "sonner";
 import { Footer } from "@/components/footer";
 import { Header } from "@/components/header";
 
@@ -23,6 +24,7 @@ export default async function RootLayout({
 					<Header />
 					{children}
 					<Footer />
+					<Toaster />
 				</ThemeProvider>
 			</body>
 		</html>

app/page.tsx

@@ -235,11 +235,14 @@ export default function HomePage() {
 					</p>
 					<div className="flex flex-col sm:flex-row gap-4 justify-center">
 						<Button
+							asChild
 							className="dark:from-blue-600 dark:to-blue-700 dark:hover:from-blue-700 dark:hover:to-blue-800 bg-gradient-to-r from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700"
 							size="lg"
 						>
-							<Users className="w-5 h-5 mr-2" />
-							Jetzt mitmachen
+							<Link href="https://groups.google.com/u/0/a/tum.dev/g/announce/about">
+								<Users className="w-5 h-5 mr-2" />
+								Jetzt mitmachen
+							</Link>
 						</Button>
 						<Button
 							asChild
@@ -518,16 +521,25 @@ export default function HomePage() {
 								uns findest du spannende Projekte und ein tolles Team.
 							</p>
 							<div className="flex flex-col sm:flex-row gap-4 justify-center">
-								<Button className="bg-gradient-to-r dark:from-blue-600 dark:to-blue-700 dark:hover:from-blue-700 dark:hover:to-blue-800 from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700">
-									<Users className="w-4 h-4 mr-2" />
-									Team beitreten
+								<Button
+									asChild
+									className="bg-gradient-to-r dark:from-blue-600 dark:to-blue-700 dark:hover:from-blue-700 dark:hover:to-blue-800 from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700"
+								>
+									<Link href="https://groups.google.com/u/0/a/tum.dev/g/announce/about">
+										<Users className="w-4 h-4 mr-2" />
+										Team beitreten
+									</Link>
 								</Button>
+
 								<Button
+									asChild
 									className="dark:hover:bg-slate-600 dark:hover:text-gray-50 dark:text-gray-100 dark:bg-slate-700 bg-black text-white hover:text-gray-50 hover:bg-gray-900"
 									variant="secondary"
 								>
-									<Github className="w-4 h-4 mr-2" />
-									Projekte ansehen
+									<Link href="#projects">
+										<Github className="w-4 h-4 mr-2" />
+										Projekte ansehen
+									</Link>
 								</Button>
 							</div>
 						</div>

components/header.tsx

@@ -28,30 +28,33 @@ export const Header = () => {
 					</Link>
 					<div className="flex items-center space-x-3">
 						{pathName !== "/about" ? (
-							<Link href="/about">
-								<Button
-									className="dark:text-gray-300 text-gray-600 hover:underline underline-offset-2"
-									size="sm"
-									variant="ghost"
-								>
-									Über uns
-								</Button>
-							</Link>
+							<Button
+								asChild
+								className="dark:text-gray-300 text-gray-600 hover:underline underline-offset-2"
+								size="sm"
+								variant="ghost"
+							>
+								<Link href="/about">Über uns</Link>
+							</Button>
 						) : (
-							<Link href="/">
-								<Button
-									className="dark:text-gray-300 text-gray-600  hover:underline underline-offset-2"
-									size="sm"
-									variant="ghost"
-								>
-									Zurück
-								</Button>
-							</Link>
+							<Button
+								asChild
+								className="dark:text-gray-300 text-gray-600  hover:underline underline-offset-2"
+								size="sm"
+								variant="ghost"
+							>
+								<Link href="/">Zurück</Link>
+							</Button>
 						)}
 						<ThemeToggle />
-						<Button className="bg-gradient-to-r dark:from-blue-600 dark:to-blue-700 dark:hover:from-blue-700 dark:hover:to-blue-800 from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 hidden lg:flex">
-							<Mail className="w-4 h-4 mr-2" />
-							Kontakt
+						<Button
+							asChild
+							className="bg-gradient-to-r dark:from-blue-600 dark:to-blue-700 dark:hover:from-blue-700 dark:hover:to-blue-800 from-blue-500 to-blue-600 hover:from-blue-600 hover:to-blue-700 hidden lg:flex"
+						>
+							<Link href="/contact">
+								<Mail className="w-4 h-4 mr-2" />
+								Kontakt
+							</Link>
 						</Button>
 					</div>
 				</div>