Member page

frontend/components/hero.tsx

@@ -2,12 +2,25 @@ import { ExternalLink } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
+import { API_URL } from "@/lib/constants";
+import Image from "next/image";
 
 const Hero = () => {
+	const background = `${API_URL}/media/591ab183-c72d-46ff-905c-ec04fed1bb34/file`;
 	return (
 		<section className="relative flex h-[calc(100vh-68px)] items-center justify-center overflow-hidden py-32">
 			<div className="">
-				<div className="magicpattern absolute inset-x-0 top-0 -z-10 flex h-full w-full items-center justify-center bg-blue-50 opacity-100" />
+				<Image
+					src={background}
+					layout="fill"
+					objectFit="cover"
+					priority
+					alt="Hero image"
+					unoptimized
+					className="grayscale"
+				/>
+				{/* Gradient and Blur Overlay */}
+				<div className="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-transparent bg-opacity-30 backdrop-blur-sm"></div>
 				<div className="mx-auto flex max-w-5xl flex-col items-center">
 					<div className="z-10 flex flex-col items-center gap-6 text-center">
 						<img
@@ -17,9 +30,9 @@ const Hero = () => {
 						/>
 						<div>
 							<h1 className="mb-6 text-pretty text-2xl font-bold text-primary lg:text-5xl">
-								Trouvez votre équilibre
+								Trouvez votre équilibre avec
 								<br />
-								avec Latosa-Escrima
+								Latosa-Escrima
 							</h1>
 							<p className="text-muted-foreground lg:text-xl">
 								Une évolution des arts martiaux Philippins

frontend/components/members-table.tsx

@@ -13,8 +13,8 @@ import { Button } from "@/components/ui/button";
 import { Checkbox } from "@/components/ui/checkbox";
 import { ScrollArea } from "@/components/ui/scroll-area";
 import MemberDialog, { Member } from "./member-dialog";
-import * as z from "zod";
-import { request, useApi } from "@/hooks/use-api";
+import { useApi } from "@/hooks/use-api";
+import request from "@/lib/request";
 import {
 	CircleX,
 	Loader2,
@@ -22,6 +22,7 @@ import {
 	UserRoundPen,
 	UserRoundPlus,
 } from "lucide-react";
+import Link from "next/link";
 
 export default function MembersTable() {
 	const {
@@ -107,7 +108,7 @@ export default function MembersTable() {
 							<TableRow>
 								{selectMode && (
 									<TableHead className="w-[50px]">
-										Selectionner
+										Sélectionner
 									</TableHead>
 								)}
 								<TableHead>Prénom</TableHead>
@@ -140,9 +141,23 @@ export default function MembersTable() {
 											</TableCell>
 										)}
 										<TableCell>
-											{member.firstname}
+											<Link
+												href={`/dashboard/members/${member.userId}`}
+											>
+												<span className="underline">
+													{member.firstname}
+												</span>
+											</Link>
+										</TableCell>
+										<TableCell>
+											<Link
+												href={`/dashboard/members/${member.userId}`}
+											>
+												<span className="underline">
+													{member.lastname}
+												</span>
+											</Link>
 										</TableCell>
-										<TableCell>{member.lastname}</TableCell>
 										<TableCell>{member.email}</TableCell>
 										<TableCell>{member.phone}</TableCell>
 										<TableCell>{member.role}</TableCell>

frontend/components/planning.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { ApiResponse, request } from "@/hooks/use-api";
+import { ApiResponse } from "@/types/types";
+import request from "@/lib/request";
 import "@schedule-x/theme-shadcn/dist/index.css";
 import { useNextCalendarApp, ScheduleXCalendar } from "@schedule-x/react";
 import { createEventsServicePlugin } from "@schedule-x/events-service";