Added CSRF & YouTube and dark mode

2025-01-22 17:39:03 +01:00
parent 48e761667f
commit 5a5846d853
29 changed files with 1186 additions and 280 deletions
--- a/frontend/app/(main)/blogs/[slug]/page.tsx
+++ b/frontend/app/(main)/blogs/[slug]/page.tsx
@@ -9,21 +9,19 @@ export default async function HistoryDetails({
 	params: Promise<{ blog_id: string }>;
 }) {
 	const { blog_id } = await params;
-	let blog = {}
+	let blog = {};
 	try {
-		const res = await fetch('http://localhost:3001/blogs/' + blog_id, {method: "GET"})
-		blog = await res.json() 
-		console.log(blog as Blog)
-	} catch(e) {
+		const res = await fetch("http://localhost:3001/blogs/" + blog_id, {
+			method: "GET",
+		});
+		blog = await res.json();
+		console.log(blog as Blog);
+	} catch (e) {
 		console.log(e);
 	}

-	if(blog == null) {
-		return(
-			<>
-				Error
-			</>
-		)
+	if (blog == null) {
+		return <>Error</>;
 	}

 	const blog_item_params: BlogItemParams = {
--- a/frontend/app/(main)/page.tsx
+++ b/frontend/app/(main)/page.tsx
@@ -4,8 +4,16 @@ import Features, { FeatureItem } from "@/components/features";
 import Gallery from "@/components/gallery";
 import Hero from "@/components/hero";
 import Testimonial from "@/components/testimonial";
+import { CarouselItem } from "@/components/ui/carousel";
+import { IYoutube } from "@/interfaces/youtube";

 export default async function Home() {
+	let videos: IYoutube | null = null;
+	if (process.env.YOUTUBE_API_KEY) {
+		const query = `https://www.googleapis.com/youtube/v3/search?key=${process.env.YOUTUBE_API_KEY}&channelId=UCzuFLl5I0WxSMqbeMaiq_FQ&part=snippet,id&order=date&maxResults=50`;
+		const res = await fetch(query);
+		videos = await res.json();
+	}
 	return (
 		<main>
 			<Hero />
@@ -20,10 +28,10 @@ export default async function Home() {
 						position="left"
 						image="https://shadcnblocks.com/images/block/placeholder-2.svg"
 					>
-						<ol className="list-decimal text-justify flex flex-col gap-4">
+						<ol className="flex list-decimal flex-col gap-4 text-justify">
 							<li>
 								Un Système Centré sur les Concepts{" "}
-								<ul className="list-disc list-inside">
+								<ul className="list-inside list-disc">
 									<li>
 										Étude et application des meilleurs
 										concepts et stratégies issus de
@@ -37,7 +45,7 @@ export default async function Home() {
 							</li>
 							<li>
 								Éducation au Mouvement et à l’Efficacité
-								<ul className="list-disc list-inside">
+								<ul className="list-inside list-disc">
 									<li>
 										Plus qu’un enchaînement de techniques :
 										une véritable éducation aux mouvements
@@ -56,12 +64,12 @@ export default async function Home() {
 						position="right"
 						image="https://shadcnblocks.com/images/block/placeholder-2.svg"
 					>
-						<ol className="list-none text-justify flex flex-col gap-4">
+						<ol className="flex list-none flex-col gap-4 text-justify">
 							<li>
 								<span className="font-bold">
 									Les Premières Étapes
 								</span>
-								<ul className="list-disc list-inside">
+								<ul className="list-inside list-disc">
 									<li>
 										Initialement centré sur les techniques
 										et mouvements, le système s’est montré
@@ -78,10 +86,10 @@ export default async function Home() {
 								<span className="font-bold">
 									La Découverte des Concepts Clés
 								</span>{" "}
-								<ul className="list-disc list-inside">
+								<ul className="list-inside list-disc">
 									<li>
 										Rôle central des concepts de combat :
-										<ul className="list-disc list-inside pl-4">
+										<ul className="list-inside list-disc pl-4">
 											<li>Puissance dans les frappes.</li>
 											<li>Blocage ferme.</li>
 											<li>Équilibre et attitude.</li>
@@ -103,7 +111,7 @@ export default async function Home() {
 					>
 						Latosa Escrima Concepts repose sur cinq concepts
 						fondamentaux :
-						<ul className="list-disc list-inside">
+						<ul className="list-inside list-disc">
 							<li>Équilibre</li>
 							<li>Vitesse (Timing et Distance)</li>
 							<li>Puissance</li>
@@ -112,8 +120,35 @@ export default async function Home() {
 						</ul>
 					</FeatureItem>
 				</Features>
-				<Gallery />
-				<Gallery />
+				<Gallery
+					tagLine="Tag Line"
+					cta="Book a demo"
+					ctaHref="#"
+					title="Gallery"
+				/>
+				{videos && (
+					<Gallery
+						tagLine=""
+						cta="Accéder à la chaîne"
+						ctaHref="https://youtube.com/@WingTsunPicardie"
+						title="Vidéos YouTube"
+					>
+						{videos.items.map((video) => {
+							return (
+								<CarouselItem
+									key={video.id.videoId}
+									className="pl-[20px] md:max-w-[452px]"
+								>
+									<iframe
+										width="424"
+										height="238"
+										src={`https://www.youtube.com/embed/${video.id.videoId}`}
+									></iframe>
+								</CarouselItem>
+							);
+						})}
+					</Gallery>
+				)}
 				<Testimonial />
 			</div>
 		</main>
--- a/frontend/app/(main)/planning/page.tsx
+++ b/frontend/app/(main)/planning/page.tsx
@@ -0,0 +1,199 @@
+"use client";
+
+import "@schedule-x/theme-shadcn/dist/index.css";
+import { useNextCalendarApp, ScheduleXCalendar } from "@schedule-x/react";
+import { createEventsServicePlugin } from "@schedule-x/events-service";
+import {
+	CalendarEventExternal,
+	createViewDay,
+	createViewWeek,
+} from "@schedule-x/calendar";
+import { useEffect, useState } from "react";
+import { format } from "date-fns";
+import { Dialog } from "@radix-ui/react-dialog";
+import {
+	DialogContent,
+	DialogDescription,
+	DialogFooter,
+	DialogHeader,
+	DialogTitle,
+} from "@/components/ui/dialog";
+import { Label } from "@/components/ui/label";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import {
+	Popover,
+	PopoverContent,
+	PopoverTrigger,
+} from "@/components/ui/popover";
+import { CalendarIcon } from "lucide-react";
+import { Calendar } from "@/components/ui/calendar";
+import { cn } from "@/lib/utils";
+
+const Planning = () => {
+	const plugins = [createEventsServicePlugin()];
+	const [eventSelected, setEventSelected] =
+		useState<CalendarEventExternal | null>(null);
+	const [events, setEvents] = useState<CalendarEventExternal[]>([
+		{
+			id: "1",
+			title: "Event 1",
+			start: format(new Date(Date.now()), "yyyy-MM-dd HH:mm"),
+			end: format(
+				new Date(Date.now() + 1 * 3600 * 1000),
+				"yyyy-MM-dd HH:mm",
+			),
+		},
+	]);
+	const calendar = useNextCalendarApp(
+		{
+			theme: "shadcn",
+			views: [createViewDay(), createViewWeek()],
+			defaultView: "week",
+			isDark: true,
+			isResponsive: true,
+			locale: "fr-FR",
+			dayBoundaries: {
+				start: "06:00",
+				end: "00:00",
+			},
+			events,
+			callbacks: {
+				onEventClick(event, e) {
+					setEventSelected(event);
+				},
+			},
+		},
+		plugins,
+	);
+
+	useEffect(() => {
+		// get all events
+		calendar?.events.getAll();
+	}, []);
+
+	return (
+		<div>
+			<div className="m-8">
+				<ScheduleXCalendar calendarApp={calendar} />
+			</div>
+			<Dialog
+				open={eventSelected !== null}
+				onOpenChange={(open) => {
+					setEventSelected((e) => (open ? e : null));
+				}}
+			>
+				<DialogContent className="sm:max-w-md">
+					<DialogHeader>
+						<DialogTitle>{eventSelected?.title}</DialogTitle>
+						<DialogDescription>
+							{eventSelected?.description}
+						</DialogDescription>
+					</DialogHeader>
+
+					<div className="grid gap-4 py-4">
+						<div className="grid grid-cols-4 items-center gap-4">
+							<Label htmlFor="start" className="text-right">
+								Début
+							</Label>
+							{/*<Popover>
+								<PopoverTrigger asChild>
+									<Button
+										variant={"outline"}
+										className={cn(
+											"w-[240px] pl-3 text-left font-normal",
+											!eventSelected?.start &&
+												"text-muted-foreground",
+										)}
+									>
+										{eventSelected?.start ? (
+											format(eventSelected?.start, "PPP")
+										) : (
+											<span>Choisissez une date.</span>
+										)}
+										<CalendarIcon className="ml-auto h-4 w-4 opacity-50" />
+									</Button>
+								</PopoverTrigger>
+								<PopoverContent
+									className="w-auto p-0"
+									align="start"
+								>
+									<Calendar
+										mode="single"
+										selected={
+											new Date(
+												eventSelected?.start ??
+													Date.now(),
+											)
+										}
+										// onSelect={field.onChange}
+										disabled={(date) =>
+											date > new Date() ||
+											date < new Date("1900-01-01")
+										}
+										initialFocus
+									/>
+								</PopoverContent>
+							</Popover> */}
+							<Input
+								id="start"
+								value={eventSelected?.start}
+								onChange={(e) => {
+									const val = e.currentTarget.value;
+									console.log(val);
+									setEventSelected((ev) => {
+										if (ev)
+											return {
+												...ev,
+												start: val,
+											};
+										return ev;
+									});
+								}}
+								className="col-span-3"
+							/>
+						</div>
+						<div className="grid grid-cols-4 items-center gap-4">
+							<Label htmlFor="end" className="text-right">
+								Fin
+							</Label>
+							<Input
+								id="end"
+								value={eventSelected?.end}
+								onChange={(e) =>
+									setEventSelected((ev) => {
+										if (ev)
+											return {
+												...ev,
+												end: e.currentTarget.value,
+											};
+										return ev;
+									})
+								}
+								className="col-span-3"
+							/>
+						</div>
+					</div>
+					<DialogFooter>
+						<Button
+							onClick={() => {
+								setEvents((evs) => {
+									evs = evs.filter(
+										(e) => e.id !== eventSelected?.id,
+									);
+									evs.push(eventSelected!);
+									return evs;
+								});
+							}}
+							type="submit"
+						>
+							Mettre à jour
+						</Button>
+					</DialogFooter>
+				</DialogContent>
+			</Dialog>
+		</div>
+	);
+};
+
+export default Planning;
--- a/frontend/app/globals.css
+++ b/frontend/app/globals.css
@@ -8,75 +8,59 @@ body {

@layer base {
 	:root {
-		/* Define your custom padding value */
-		--background: 0 0% 100%;
-		--foreground: 0 0% 3.9%;
+		--background: 0 0% 98%;
+		--foreground: 226 32% 15%;
 		--card: 0 0% 100%;
-		--card-foreground: 0 0% 3.9%;
+		--card-foreground: 226 32% 15%;
 		--popover: 0 0% 100%;
-		--popover-foreground: 0 0% 3.9%;
-		--primary: 0 0% 9%;
+		--popover-foreground: 226 32% 15%;
+		--primary: 354 70% 44%;
 		--primary-foreground: 0 0% 98%;
-		--secondary: 0 0% 96.1%;
-		--secondary-foreground: 0 0% 9%;
-		--muted: 0 0% 96.1%;
-		--muted-foreground: 0 0% 45.1%;
-		--accent: 0 0% 96.1%;
-		--accent-foreground: 0 0% 9%;
-		--destructive: 0 84.2% 60.2%;
+		--secondary: 0 0% 94%;
+		--secondary-foreground: 226 32% 15%;
+		--muted: 0 0% 94%;
+		--muted-foreground: 226 32% 70%;
+		--accent: 354 70% 44%;
+		--accent-foreground: 0 0% 98%;
+		--destructive: 0 84% 60%;
 		--destructive-foreground: 0 0% 98%;
-		--border: 0 0% 89.8%;
-		--input: 0 0% 89.8%;
-		--ring: 0 0% 3.9%;
-		--chart-1: 12 76% 61%;
-		--chart-2: 173 58% 39%;
-		--chart-3: 197 37% 24%;
-		--chart-4: 43 74% 66%;
-		--chart-5: 27 87% 67%;
-		--radius: 0.5rem;
-		--sidebar-background: 0 0% 98%;
-		--sidebar-foreground: 240 5.3% 26.1%;
-		--sidebar-primary: 240 5.9% 10%;
-		--sidebar-primary-foreground: 0 0% 98%;
-		--sidebar-accent: 240 4.8% 95.9%;
-		--sidebar-accent-foreground: 240 5.9% 10%;
-		--sidebar-border: 220 13% 91%;
-		--sidebar-ring: 217.2 91.2% 59.8%;
+		--border: 0 0% 90%;
+		--input: 0 0% 94%;
+		--ring: 354 70% 44%;
+		--radius: 0.75rem;
+		--chart-1: 354 70% 44%;
+		--chart-2: 20 90% 50%;
+		--chart-3: 200 90% 50%;
+		--chart-4: 300 90% 50%;
+		--chart-5: 60 90% 50%;
 	}

 	.dark {
-		--background: 0 0% 3.9%;
+		--background: 226 32% 15%;
 		--foreground: 0 0% 98%;
-		--card: 0 0% 3.9%;
+		--card: 226 32% 20%;
 		--card-foreground: 0 0% 98%;
-		--popover: 0 0% 3.9%;
+		--popover: 226 32% 20%;
 		--popover-foreground: 0 0% 98%;
-		--primary: 0 0% 98%;
-		--primary-foreground: 0 0% 9%;
-		--secondary: 0 0% 14.9%;
+		--primary: 354 70% 44%;
+		--primary-foreground: 0 0% 98%;
+		--secondary: 226 32% 25%;
 		--secondary-foreground: 0 0% 98%;
-		--muted: 0 0% 14.9%;
-		--muted-foreground: 0 0% 63.9%;
-		--accent: 0 0% 14.9%;
+		--muted: 226 32% 25%;
+		--muted-foreground: 0 0% 70%;
+		--accent: 354 70% 44%;
 		--accent-foreground: 0 0% 98%;
-		--destructive: 0 62.8% 30.6%;
+		--destructive: 0 84% 60%;
 		--destructive-foreground: 0 0% 98%;
-		--border: 0 0% 14.9%;
-		--input: 0 0% 14.9%;
-		--ring: 0 0% 83.1%;
-		--chart-1: 220 70% 50%;
-		--chart-2: 160 60% 45%;
-		--chart-3: 30 80% 55%;
-		--chart-4: 280 65% 60%;
-		--chart-5: 340 75% 55%;
-		--sidebar-background: 240 5.9% 10%;
-		--sidebar-foreground: 240 4.8% 95.9%;
-		--sidebar-primary: 224.3 76.3% 48%;
-		--sidebar-primary-foreground: 0 0% 100%;
-		--sidebar-accent: 240 3.7% 15.9%;
-		--sidebar-accent-foreground: 240 4.8% 95.9%;
-		--sidebar-border: 240 3.7% 15.9%;
-		--sidebar-ring: 217.2 91.2% 59.8%;
+		--border: 226 32% 35%;
+		--input: 226 32% 25%;
+		--ring: 354 70% 44%;
+		--radius: 0.75rem;
+		--chart-1: 354 70% 44%;
+		--chart-2: 20 90% 50%;
+		--chart-3: 200 90% 50%;
+		--chart-4: 300 90% 50%;
+		--chart-5: 60 90% 50%;
 	}
 }

--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "@/app/globals.css";
 import SWRLayout from "@/components/layouts/swr-layout";
+import { ThemeProvider } from "@/components/ThemeProvider";

 const geistSans = Geist({
 	variable: "--font-geist-sans",
@@ -28,7 +29,14 @@ export default function RootLayout({
 			<body
 				className={`${geistSans.variable} ${geistMono.variable} antialiased`}
 			>
-				<SWRLayout>{children}</SWRLayout>
+				<ThemeProvider
+					attribute="class"
+					defaultTheme="dark"
+					enableSystem
+					disableTransitionOnChange
+				>
+					<SWRLayout>{children}</SWRLayout>
+				</ThemeProvider>
 			</body>
 		</html>
 	);
--- a/frontend/components/ThemeProvider.tsx
+++ b/frontend/components/ThemeProvider.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+export function ThemeProvider({
+	children,
+	...props
+}: React.ComponentProps<typeof NextThemesProvider>) {
+	return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}
--- a/frontend/components/contact.tsx
+++ b/frontend/components/contact.tsx
@@ -1,9 +1,71 @@
+"use client";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { Textarea } from "@/components/ui/textarea";
+import { ApiResponse } from "@/hooks/use-api";
+import { API_URL } from "@/lib/constants";
+import { useEffect, useState } from "react";
+
+interface FormData {
+	firstname: string;
+	lastname: string;
+	email: string;
+	subject: string;
+	message: string;
+}

 const Contact = () => {
+	const [formData, setFormData] = useState<FormData>({
+		firstname: "",
+		lastname: "",
+		subject: "",
+		email: "",
+		message: "",
+	});
+
+	const [csrfToken, setCsrfToken] = useState("");
+
+	const handleChange = (
+		e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
+	) => {
+		console.log(e.currentTarget);
+		setFormData({
+			...formData,
+			[e.currentTarget.name]: e.currentTarget.value,
+		});
+	};
+
+	useEffect(() => {
+		const fetchCsrfToken = async () => {
+			try {
+				const response = await fetch(`${API_URL}/csrf-token`, {
+					credentials: "include",
+				});
+				const data: ApiResponse<{ csrf: string }> =
+					await response.json();
+				if (data.data) setCsrfToken(data.data.csrf);
+			} catch (e: any) {
+				console.log(e);
+			}
+		};
+
+		fetchCsrfToken();
+	}, []);
+
+	const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+		e.preventDefault();
+		const res = await fetch(`${API_URL}/contact`, {
+			headers: {
+				"Content-Type": "application/json",
+				"X-CSRF-Token": csrfToken,
+			},
+			method: "POST",
+			body: JSON.stringify(formData),
+			credentials: "include",
+		});
+	};
+
 	return (
 		<section className="py-32">
 			<div className="p-4">
@@ -38,50 +100,75 @@ const Contact = () => {
 							</ul>
 						</div>
 					</div>
-					<div className="mx-auto flex max-w-screen-md flex-col gap-6 rounded-lg border p-10">
+					<form
+						onSubmit={handleSubmit}
+						className="mx-auto flex max-w-screen-md flex-col gap-6 rounded-lg border p-10"
+					>
 						<div className="flex gap-4">
 							<div className="grid w-full items-center gap-1.5">
 								<Label htmlFor="firstname">Prénom</Label>
 								<Input
+									value={formData.firstname}
+									onChange={handleChange}
 									type="text"
 									id="firstname"
+									name="firstname"
 									placeholder="Prénom"
+									required
 								/>
 							</div>
 							<div className="grid w-full items-center gap-1.5">
 								<Label htmlFor="lastname">Nom de famille</Label>
 								<Input
+									value={formData.lastname}
+									onChange={handleChange}
 									type="text"
 									id="lastname"
+									name="lastname"
 									placeholder="Nom de famille"
+									required
 								/>
 							</div>
 						</div>
 						<div className="grid w-full items-center gap-1.5">
 							<Label htmlFor="email">Email</Label>
 							<Input
+								value={formData.email}
+								onChange={handleChange}
 								type="email"
 								id="email"
+								name="email"
 								placeholder="Email"
+								required
 							/>
 						</div>
 						<div className="grid w-full items-center gap-1.5">
 							<Label htmlFor="subject">Objet</Label>
 							<Input
+								value={formData.subject}
+								onChange={handleChange}
 								type="text"
 								id="subject"
+								name="subject"
 								placeholder="Objet"
+								required
 							/>
 						</div>
 						<div className="grid w-full gap-1.5">
 							<Label htmlFor="message">Message</Label>
 							<Textarea
+								value={formData.message}
+								onChange={handleChange}
 								placeholder="Écrivez votre message ici."
 								id="message"
+								name="message"
+								required
 							/>
 						</div>
-						<Button className="w-full">Envoyer</Button>
-					</div>
+						<Button type="submit" className="w-full">
+							Envoyer
+						</Button>
+					</form>
 				</div>
 			</div>
 		</section>
--- a/frontend/components/gallery.tsx
+++ b/frontend/components/gallery.tsx
@@ -54,7 +54,14 @@ const data = [
 	},
 ];

-const Gallery = () => {
+const Gallery: React.FC<
+	React.PropsWithChildren<{
+		tagLine: string;
+		title: string;
+		cta: string;
+		ctaHref: string;
+	}>
+> = ({ children, tagLine, title, cta, ctaHref }) => {
 	const [carouselApi, setCarouselApi] = useState<CarouselApi>();
 	const [canScrollPrev, setCanScrollPrev] = useState(false);
 	const [canScrollNext, setCanScrollNext] = useState(false);
@@ -73,21 +80,21 @@ const Gallery = () => {
 		};
 	}, [carouselApi]);
 	return (
-		<section className="lg:md:py-24 sm:py-12 flex flex-col items-center overflow-visible">
+		<section className="flex flex-col items-center overflow-visible sm:py-12 lg:md:py-24">
 			<div className="container">
 				<div className="mb-8 flex flex-col justify-between md:mb-14 md:flex-row md:items-end lg:mb-16">
 					<div>
 						<p className="mb-6 text-xs font-medium uppercase tracking-wider">
-							Tag Line
+							{tagLine}
 						</p>
 						<h2 className="mb-3 text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6">
-							Gallery
+							{title}
 						</h2>
 						<a
-							href="#"
+							href={ctaHref}
 							className="group flex items-center text-xs font-medium md:text-base lg:text-lg"
 						>
-							Book a demo{" "}
+							{cta}
 							<ArrowRight className="ml-2 size-4 transition-transform group-hover:translate-x-1" />
 						</a>
 					</div>
@@ -129,41 +136,16 @@ const Gallery = () => {
 					}}
 				>
 					<CarouselContent className="">
-						{data.map((item) => (
-							<CarouselItem
-								key={item.id}
-								className="pl-[20px] md:max-w-[452px]"
-							>
-								<a
-									href={item.href}
-									className="group flex flex-col justify-between"
-								>
-									<div>
-										<div className="flex aspect-[3/2] overflow-clip rounded-xl">
-											<div className="flex-1">
-												<div className="relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105">
-													<img
-														src={item.image}
-														alt={item.title}
-														className="h-full w-full object-cover object-center"
-													/>
-												</div>
-											</div>
-										</div>
-									</div>
-									<div className="mb-2 line-clamp-3 break-words pt-4 text-lg font-medium md:mb-3 md:pt-4 md:text-xl lg:pt-4 lg:text-2xl">
-										{item.title}
-									</div>
-									<div className="mb-8 line-clamp-2 text-sm text-muted-foreground md:mb-12 md:text-base lg:mb-9">
-										{item.summary}
-									</div>
-									<div className="flex items-center text-sm">
-										Read more{" "}
-										<ArrowRight className="ml-2 size-5 transition-transform group-hover:translate-x-1" />
-									</div>
-								</a>
-							</CarouselItem>
-						))}
+						{children
+							? children
+							: data.map((item) => (
+									<CarouselItem
+										key={item.id}
+										className="pl-[20px] md:max-w-[452px]"
+									>
+										<DefaultGalleryItem item={item} />
+									</CarouselItem>
+								))}
 					</CarouselContent>
 				</Carousel>
 			</div>
@@ -171,4 +153,36 @@ const Gallery = () => {
 	);
 };

+export const DefaultGalleryItem: React.FC<{ item: (typeof data)[0] }> = ({
+	item,
+}) => {
+	return (
+		<a href={item.href} className="group flex flex-col justify-between">
+			<div>
+				<div className="flex aspect-[3/2] overflow-clip rounded-xl">
+					<div className="flex-1">
+						<div className="relative h-full w-full origin-bottom transition duration-300 group-hover:scale-105">
+							<img
+								src={item.image}
+								alt={item.title}
+								className="h-full w-full object-cover object-center"
+							/>
+						</div>
+					</div>
+				</div>
+			</div>
+			<div className="mb-2 line-clamp-3 break-words pt-4 text-lg font-medium md:mb-3 md:pt-4 md:text-xl lg:pt-4 lg:text-2xl">
+				{item.title}
+			</div>
+			<div className="mb-8 line-clamp-2 text-sm text-muted-foreground md:mb-12 md:text-base lg:mb-9">
+				{item.summary}
+			</div>
+			<div className="flex items-center text-sm">
+				Read more{" "}
+				<ArrowRight className="ml-2 size-5 transition-transform group-hover:translate-x-1" />
+			</div>
+		</a>
+	);
+};
+
 export default Gallery;
--- a/frontend/components/hero.tsx
+++ b/frontend/components/hero.tsx
@@ -8,9 +8,9 @@ import Link from "next/link";

 const Hero = () => {
 	return (
-		<section className="flex h-[calc(100vh-68px)] justify-center items-center relative overflow-hidden py-32">
+		<section className="relative flex h-[calc(100vh-68px)] items-center justify-center overflow-hidden py-32">
 			<div className="">
-				<div className="bg-blue-50 magicpattern absolute inset-x-0 top-0 -z-10 flex h-full w-full items-center justify-center opacity-100" />
+				<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" />
 				<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
@@ -20,7 +20,7 @@ const Hero = () => {
 						/>
 						<Badge variant="outline">Latosa-Escrima</Badge>
 						<div>
-							<h1 className="mb-6 text-pretty text-2xl font-bold lg:text-5xl">
+							<h1 className="mb-6 text-pretty text-2xl font-bold text-primary lg:text-5xl">
 								Trouvez votre équilibre avec Latosa-Escrima
 							</h1>
 							<p className="text-muted-foreground lg:text-xl">
--- a/frontend/components/login-form.tsx
+++ b/frontend/components/login-form.tsx
@@ -3,10 +3,12 @@ import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
 import useLogin from "@/hooks/use-login";
 import { Loader2 } from "lucide-react";
+import { API_URL } from "@/lib/constants";
+import { ApiResponse } from "@/hooks/use-api";

 export function LoginForm({
 	className,
--- a/frontend/components/nav-bar.tsx
+++ b/frontend/components/nav-bar.tsx
@@ -68,7 +68,7 @@ const subMenuItemsTwo = [

 const Navbar = () => {
 	return (
-		<section className="p-4 bg-white top-0 sticky z-50">
+		<section className="sticky top-0 z-50 bg-background p-4">
 			<div>
 				<nav className="hidden justify-between lg:flex">
 					<div className="flex items-center gap-6">
@@ -103,7 +103,7 @@ const Navbar = () => {
 										variant: "ghost",
 									}),
 								)}
-								href="/"
+								href="/planning"
 							>
 								Planning
 							</a>
--- a/frontend/components/ui/calendar.tsx
+++ b/frontend/components/ui/calendar.tsx
@@ -0,0 +1,82 @@
+"use client";
+
+import * as React from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { DayPicker } from "react-day-picker";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({
+	className,
+	classNames,
+	showOutsideDays = true,
+	...props
+}: CalendarProps) {
+	return (
+		<DayPicker
+			showOutsideDays={showOutsideDays}
+			className={cn("p-3", className)}
+			classNames={{
+				months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0",
+				month: "space-y-4",
+				caption: "flex justify-center pt-1 relative items-center",
+				caption_label: "text-sm font-medium",
+				nav: "space-x-1 flex items-center",
+				nav_button: cn(
+					buttonVariants({ variant: "outline" }),
+					"h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
+				),
+				nav_button_previous: "absolute left-1",
+				nav_button_next: "absolute right-1",
+				table: "w-full border-collapse space-y-1",
+				head_row: "flex",
+				head_cell:
+					"text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
+				row: "flex w-full mt-2",
+				cell: cn(
+					"relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
+					props.mode === "range"
+						? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+						: "[&:has([aria-selected])]:rounded-md",
+				),
+				day: cn(
+					buttonVariants({ variant: "ghost" }),
+					"h-8 w-8 p-0 font-normal aria-selected:opacity-100",
+				),
+				day_range_start: "day-range-start",
+				day_range_end: "day-range-end",
+				day_selected:
+					"bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+				day_today: "bg-accent text-accent-foreground",
+				day_outside:
+					"day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground",
+				day_disabled: "text-muted-foreground opacity-50",
+				day_range_middle:
+					"aria-selected:bg-accent aria-selected:text-accent-foreground",
+				day_hidden: "invisible",
+				...classNames,
+			}}
+			components={{
+				IconLeft: ({ className, ...props }) => (
+					<ChevronLeft
+						className={cn("h-4 w-4", className)}
+						{...props}
+					/>
+				),
+				IconRight: ({ className, ...props }) => (
+					<ChevronRight
+						className={cn("h-4 w-4", className)}
+						{...props}
+					/>
+				),
+			}}
+			{...props}
+		/>
+	);
+}
+Calendar.displayName = "Calendar";
+
+export { Calendar };
--- a/frontend/components/ui/dialog.tsx
+++ b/frontend/components/ui/dialog.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+	React.ComponentRef<typeof DialogPrimitive.Overlay>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+	<DialogPrimitive.Overlay
+		ref={ref}
+		className={cn(
+			"fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+			className,
+		)}
+		{...props}
+	/>
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+	React.ComponentRef<typeof DialogPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+	<DialogPortal>
+		<DialogOverlay />
+		<DialogPrimitive.Content
+			ref={ref}
+			className={cn(
+				"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+				className,
+			)}
+			{...props}
+		>
+			{children}
+			<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
+				<X className="h-4 w-4" />
+				<span className="sr-only">Close</span>
+			</DialogPrimitive.Close>
+		</DialogPrimitive.Content>
+	</DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn(
+			"flex flex-col space-y-1.5 text-center sm:text-left",
+			className,
+		)}
+		{...props}
+	/>
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+	<div
+		className={cn(
+			"flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+			className,
+		)}
+		{...props}
+	/>
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+	React.ComponentRef<typeof DialogPrimitive.Title>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+	<DialogPrimitive.Title
+		ref={ref}
+		className={cn(
+			"text-lg font-semibold leading-none tracking-tight",
+			className,
+		)}
+		{...props}
+	/>
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+	React.ComponentRef<typeof DialogPrimitive.Description>,
+	React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+	<DialogPrimitive.Description
+		ref={ref}
+		className={cn("text-sm text-muted-foreground", className)}
+		{...props}
+	/>
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+	Dialog,
+	DialogPortal,
+	DialogOverlay,
+	DialogTrigger,
+	DialogClose,
+	DialogContent,
+	DialogHeader,
+	DialogFooter,
+	DialogTitle,
+	DialogDescription,
+};
--- a/frontend/components/ui/popover.tsx
+++ b/frontend/components/ui/popover.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import * as React from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+import { cn } from "@/lib/utils";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = React.forwardRef<
+	React.ComponentRef<typeof PopoverPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+	<PopoverPrimitive.Portal>
+		<PopoverPrimitive.Content
+			ref={ref}
+			align={align}
+			sideOffset={sideOffset}
+			className={cn(
+				"z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				className,
+			)}
+			{...props}
+		/>
+	</PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
--- a/frontend/components/ui/switch.tsx
+++ b/frontend/components/ui/switch.tsx
@@ -1,29 +1,29 @@
-"use client"
+"use client";

-import * as React from "react"
-import * as SwitchPrimitives from "@radix-ui/react-switch"
+import * as React from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";

-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";

 const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+	React.ComponentRef<typeof SwitchPrimitives.Root>,
+	React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
 >(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-      className
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
-      )}
-    />
-  </SwitchPrimitives.Root>
-))
-Switch.displayName = SwitchPrimitives.Root.displayName
+	<SwitchPrimitives.Root
+		className={cn(
+			"peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+			className,
+		)}
+		{...props}
+		ref={ref}
+	>
+		<SwitchPrimitives.Thumb
+			className={cn(
+				"pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0",
+			)}
+		/>
+	</SwitchPrimitives.Root>
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;

-export { Switch }
+export { Switch };
--- a/frontend/hooks/use-api.tsx
+++ b/frontend/hooks/use-api.tsx
@@ -16,6 +16,7 @@ async function request<T>(
 		method?: "GET" | "POST" | "PATCH" | "DELETE";
 		body?: any;
 		requiresAuth?: boolean;
+		csrfToken?: boolean;
 	} = {},
 ): Promise<ApiResponse<T>> {
 	const { method = "GET", body, requiresAuth = true } = options;
@@ -23,6 +24,13 @@ async function request<T>(
 		"Content-Type": "application/json",
 	};

+	if (options.csrfToken) {
+		const res: ApiResponse<{ csrf: string }> = await (
+			await fetch(`${API_URL}/csrf-token`)
+		).json();
+		if (res.data) headers["X-CSRF-Token"] = res.data.csrf;
+	}
+
 	if (requiresAuth) {
 		const authToken = getCookie("auth_token");
 		if (!authToken) {
@@ -35,6 +43,7 @@ async function request<T>(
 		method,
 		headers,
 		body: body ? JSON.stringify(body) : undefined,
+		credentials: options.csrfToken ? "include" : "omit",
 	});

 	const apiResponse: ApiResponse<T> = await response.json();
@@ -49,8 +58,9 @@ async function request<T>(
 async function fetcher<T>(
 	url: string,
 	requiresAuth: boolean = true,
+	csrfToken?: boolean,
 ): Promise<ApiResponse<T>> {
-	return request(url, { requiresAuth });
+	return request(url, { requiresAuth, csrfToken });
 }

 async function mutationHandler<T, A>(
@@ -59,23 +69,26 @@ async function mutationHandler<T, A>(
 		arg,
 		method,
 		requiresAuth,
+		csrfToken,
 	}: {
 		arg: A;
 		method: "GET" | "POST" | "PATCH" | "DELETE";
 		requiresAuth: boolean;
+		csrfToken?: boolean;
 	},
 ): Promise<ApiResponse<T>> {
-	return request(url, { method, body: arg, requiresAuth });
+	return request(url, { method, body: arg, requiresAuth, csrfToken });
 }

 export function useApi<T>(
 	url: string,
 	config?: SWRConfiguration,
 	requiresAuth: boolean = true,
+	csrfToken?: boolean,
 ) {
 	const swr = useSWR<ApiResponse<T>>(
 		url,
-		() => fetcher(url, requiresAuth),
+		() => fetcher(url, requiresAuth, csrfToken),
 		config,
 	);

@@ -92,10 +105,12 @@ export default function useApiMutation<T, A>(
 	config?: SWRMutationConfiguration<ApiResponse<T>, Error, string, A>,
 	method: "GET" | "POST" | "PATCH" | "DELETE" = "GET",
 	requiresAuth: boolean = false,
+	csrfToken?: boolean,
 ) {
 	const mutation = useSWRMutation<ApiResponse<T>, Error, string, A>(
 		endpoint,
-		(url, { arg }) => mutationHandler(url, { arg, method, requiresAuth }),
+		(url, { arg }) =>
+			mutationHandler(url, { arg, method, requiresAuth, csrfToken }),
 		config,
 	);
 	return {
--- a/frontend/hooks/use-login.tsx
+++ b/frontend/hooks/use-login.tsx
@@ -1,7 +1,9 @@
 "use client";

 import { setCookie } from "cookies-next";
-import useApiMutation from "./use-api";
+import useApiMutation, { ApiResponse } from "./use-api";
+import { useEffect, useState } from "react";
+import { API_URL } from "@/lib/constants";

 export interface LoginArgs {
 	email: string;
@@ -13,7 +15,13 @@ export default function useLogin() {
 		trigger,
 		isMutating: loading,
 		isSuccess,
-	} = useApiMutation<string, LoginArgs>("/users/login", undefined, "POST");
+	} = useApiMutation<string, LoginArgs>(
+		"/users/login",
+		undefined,
+		"POST",
+		false,
+		true,
+	);

 	const login = async (inputs: LoginArgs) => {
 		try {
--- a/frontend/interfaces/youtube.ts
+++ b/frontend/interfaces/youtube.ts
@@ -0,0 +1,48 @@
+export interface IYoutube {
+	kind: string;
+	etag: string;
+	nextPageToken: string;
+	regionCode: string;
+	pageInfo: IYoutubePageInfo;
+	items: IYoutubeItem[];
+}
+
+export interface IYoutubeItem {
+	kind: string;
+	etag: string;
+	id: IYoutubeID;
+	snippet: IYoutubeSnippet;
+}
+
+export interface IYoutubeID {
+	kind: string;
+	videoId: string;
+}
+
+export interface IYoutubeSnippet {
+	publishedAt: Date;
+	channelId: string;
+	title: string;
+	description: string;
+	thumbnails: IYoutubeThumbnails;
+	channelTitle: string;
+	liveBroadcastContent: string;
+	publishTime: Date;
+}
+
+export interface IYoutubeThumbnails {
+	default: IYoutubeDefault;
+	medium: IYoutubeDefault;
+	high: IYoutubeDefault;
+}
+
+export interface IYoutubeDefault {
+	url: string;
+	width: number;
+	height: number;
+}
+
+export interface IYoutubePageInfo {
+	totalResults: number;
+	resultsPerPage: number;
+}
--- a/frontend/next.config.ts
+++ b/frontend/next.config.ts
@@ -8,10 +8,6 @@ const apiUrl =
 const nextConfig: NextConfig = {
 	/* config options here */
 	output: "standalone",
-	// webpack: (config) => {
-	// 	config.resolve.alias["@"] = path.resolve(__dirname, "./");
-	// 	return config;
-	// },
 	images: {
 		remotePatterns: [
 			{
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,17 +16,24 @@
 		"@radix-ui/react-dropdown-menu": "^2.1.4",
 		"@radix-ui/react-label": "^2.1.1",
 		"@radix-ui/react-navigation-menu": "^1.2.3",
+		"@radix-ui/react-popover": "^1.1.4",
 		"@radix-ui/react-select": "^2.1.4",
 		"@radix-ui/react-separator": "^1.1.1",
 		"@radix-ui/react-slot": "^1.1.1",
 		"@radix-ui/react-switch": "^1.1.2",
 		"@radix-ui/react-tooltip": "^1.1.6",
+		"@schedule-x/events-service": "^2.14.3",
+		"@schedule-x/react": "^2.13.3",
+		"@schedule-x/theme-default": "^2.14.3",
+		"@schedule-x/theme-shadcn": "^2.14.3",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"cookies-next": "^5.1.0",
+		"date-fns": "^3.0.0",
 		"embla-carousel-react": "^8.5.2",
 		"lucide-react": "^0.471.1",
 		"next": "15.1.4",
+		"next-themes": "^0.4.4",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0",
 		"react-icons": "^5.4.0",
@@ -42,6 +49,8 @@
 		"eslint": "^9",
 		"eslint-config-next": "15.1.4",
 		"postcss": "^8",
+		"prettier": "^3.4.2",
+		"prettier-plugin-tailwindcss": "^0.6.10",
 		"tailwindcss": "^3.4.1",
 		"typescript": "^5.7.3"
 	}