Added CSRF & YouTube and dark mode

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>;
+}

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>

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;

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">

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,

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>

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 };

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,
+};

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 };

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 };