resolving conflicts

2025-01-14 13:54:03 +01:00
parent 24e3272ab5 fd834ea84a
commit 5c1e846006
77 changed files with 2626 additions and 464 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1 @@
+.env
--- a/19
+++ b/19
@@ -1,19 +0,0 @@
-# Use Deno image
-FROM denoland/deno:alpine
-
-# Set working directory
-WORKDIR /app
-
-# Copy project files
-COPY ./latosa-frontend/ .
-
-RUN deno install
-
-# Install Next.js dependencies
-RUN deno task build
-
-# Expose the default Next.js port
-EXPOSE 3000
-
-# Start the Next.js app
-CMD ["deno", "task", "start"]
--- a/backend/Dockerfile
+++ b/backend/Dockerfile
@@ -0,0 +1,12 @@
+FROM golang:alpine
+
+WORKDIR /app
+
+COPY . .
+
+RUN go mod download
+RUN go mod tidy
+
+RUN go build main.go
+
+CMD ["./main"]
--- a/backend/go.mod
+++ b/backend/go.mod
@@ -0,0 +1,14 @@
+module fr.latosa-escrima
+
+go 1.23.4
+
+require (
+	github.com/jinzhu/inflection v1.0.0 // indirect
+	github.com/joho/godotenv v1.5.1 // indirect
+	github.com/puzpuzpuz/xsync/v3 v3.4.0 // indirect
+	github.com/tmthrgd/go-hex v0.0.0-20190904060850-447a3041c3bc // indirect
+	github.com/uptrace/bun v1.2.8 // indirect
+	github.com/vmihailenco/msgpack/v5 v5.4.1 // indirect
+	github.com/vmihailenco/tagparser/v2 v2.0.0 // indirect
+	golang.org/x/sys v0.29.0 // indirect
+)
--- a/backend/go.sum
+++ b/backend/go.sum
@@ -0,0 +1,16 @@
+github.com/jinzhu/inflection v1.0.0 h1:K317FqzuhWc8YvSVlFMCCUb36O/S9MCKRDI7QkRKD/E=
+github.com/jinzhu/inflection v1.0.0/go.mod h1:h+uFLlag+Qp1Va5pdKtLDYj+kHp5pxUVkryuEj+Srlc=
+github.com/joho/godotenv v1.5.1 h1:7eLL/+HRGLY0ldzfGMeQkb7vMd0as4CfYvUVzLqw0N0=
+github.com/joho/godotenv v1.5.1/go.mod h1:f4LDr5Voq0i2e/R5DDNOoa2zzDfwtkZa6DnEwAbqwq4=
+github.com/puzpuzpuz/xsync/v3 v3.4.0 h1:DuVBAdXuGFHv8adVXjWWZ63pJq+NRXOWVXlKDBZ+mJ4=
+github.com/puzpuzpuz/xsync/v3 v3.4.0/go.mod h1:VjzYrABPabuM4KyBh1Ftq6u8nhwY5tBPKP9jpmh0nnA=
+github.com/tmthrgd/go-hex v0.0.0-20190904060850-447a3041c3bc h1:9lRDQMhESg+zvGYmW5DyG0UqvY96Bu5QYsTLvCHdrgo=
+github.com/tmthrgd/go-hex v0.0.0-20190904060850-447a3041c3bc/go.mod h1:bciPuU6GHm1iF1pBvUfxfsH0Wmnc2VbpgvbI9ZWuIRs=
+github.com/uptrace/bun v1.2.8 h1:HEiLvy9wc7ehU5S02+O6NdV5BLz48lL4REPhTkMX3Dg=
+github.com/uptrace/bun v1.2.8/go.mod h1:JBq0uBKsKqNT0Ccce1IAFZY337Wkf08c6F6qlmfOHE8=
+github.com/vmihailenco/msgpack/v5 v5.4.1 h1:cQriyiUvjTwOHg8QZaPihLWeRAAVoCpE00IUPn0Bjt8=
+github.com/vmihailenco/msgpack/v5 v5.4.1/go.mod h1:GaZTsDaehaPpQVyxrf5mtQlH+pc21PIudVV/E3rRQok=
+github.com/vmihailenco/tagparser/v2 v2.0.0 h1:y09buUbR+b5aycVFQs/g70pqKVZNBmxwAhO7/IwNM9g=
+github.com/vmihailenco/tagparser/v2 v2.0.0/go.mod h1:Wri+At7QHww0WTrCBeu4J6bNtoV6mEfg5OIWRZA9qds=
+golang.org/x/sys v0.29.0 h1:TPYlXGxvx1MGTn2GiZDhnjPA9wZzZeGKHHmKhHYvgaU=
+golang.org/x/sys v0.29.0/go.mod h1:/VUhepiaJMQUp4+oa/7Zr1D23ma6VTLIYjOOTFZPUcA=
--- a/backend/main.go
+++ b/backend/main.go
@@ -0,0 +1,28 @@
+package main
+
+import (
+	"fmt"
+	"log"
+	"net/http"
+	"os"
+
+	"github.com/joho/godotenv"
+)
+
+func handler(w http.ResponseWriter, r *http.Request) {
+	fmt.Fprintf(w, "<html><body><h1>Hello, World!</h1></body></html>")
+}
+
+func main() {
+	err := godotenv.Load()
+	if err != nil {
+		log.Fatalf("Error loading .env file: %v", err)
+	}
+	port := os.Getenv("BACKEND_PORT")
+	http.HandleFunc("/", handler)
+	fmt.Printf("Serving on port %s\n", port)
+	err = http.ListenAndServe(fmt.Sprintf(":%s", port), nil)
+	if err != nil {
+		fmt.Printf("Error starting server: %s\n", err)
+	}
+}
--- a/docker-compose.yaml
+++ b/docker-compose.yaml
@@ -1,10 +1,44 @@
 services:
-  latosa-escrima:
-    build:
-      context: .
-      dockerfile: Dockerfile
+  latosa-escrima.fr-frontend:
+    container_name: latosa-frontend
+    image: cems.dev:5000/latosa-escrima.fr:latest
    ports:
-      - "3000:3000"
+      - 3000:${FRONTEND_PORT}
    environment:
      - NODE_ENV=production
+      - FRONTEND_PORT=${FRONTEND_PORT}
    restart: always # Ensures the container restarts on failure or Docker restart
+    networks:
+      - le-network
+  latosa-escrima.fr-backend:
+    container_name: latosa-backend
+    build:
+      context: ./backend/
+      dockerfile: Dockerfile
+    env_file: .env
+    environment:
+      - PORT="3001"
+    ports:
+      - "3001:${BACKEND_PORT}"
+    networks:
+      - le-network
+  psql:
+    container_name: latosa-database
+    image: postgres:17.2-alpine
+    restart: always
+    environment:
+      POSTGRES_USER: ${POSTGRES_USER}
+      POSTGRES_PASSWORD: ${POSTGRES_PASSWORD}
+      POSTGRES_DB: ${POSTGRES_DB}
+    ports:
+      - "5432:5432"
+    volumes:
+      - le-data:/var/lib/postgresql/data
+    networks:
+      - le-network
+
+volumes:
+  le-data:
+
+networks:
+  le-network:
--- a/frontend/.dockerignore
+++ b/frontend/.dockerignore
@@ -0,0 +1 @@
+./latosa-frontend/node_modules/
--- a/latosa-frontend/.gitignore
+++ b/latosa-frontend/.gitignore
--- a/frontend/Dockerfile
+++ b/frontend/Dockerfile
@@ -0,0 +1,27 @@
+# Use Deno image
+FROM denoland/deno:alpine
+
+# Set working directory
+WORKDIR /app
+
+# Copy project files
+COPY . .
+
+ENV NODE_ENV=production
+RUN deno install
+
+# Install Next.js dependencies
+RUN deno task build
+
+# Move everything to the standalone
+RUN cp -r public .next/standalone/public
+RUN cp -r .next/static .next/standalone/.next/static
+RUN mv .next/standalone/server.js .next/standalone/server.cjs
+
+RUN rm -r ./node_modules
+
+# Expose the default Next.js port
+EXPOSE 3000
+
+# Start the Next.js app
+CMD ["deno", "run", "--allow-env", "--allow-read", "--allow-sys", "--allow-net", ".next/standalone/server.cjs"]
--- a/frontend/app/(auth)/dashboard/page.tsx
+++ b/frontend/app/(auth)/dashboard/page.tsx
@@ -0,0 +1,57 @@
+import { AppSidebar } from "@/components/app-sidebar";
+import {
+	Breadcrumb,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbList,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import { Separator } from "@/components/ui/separator";
+import {
+	SidebarInset,
+	SidebarProvider,
+	SidebarTrigger,
+} from "@/components/ui/sidebar";
+
+export default function Page() {
+	return (
+		<SidebarProvider>
+			<AppSidebar />
+			<SidebarInset>
+				<header className="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12">
+					<div className="flex items-center gap-2 px-4">
+						<SidebarTrigger className="-ml-1" />
+						<Separator
+							orientation="vertical"
+							className="mr-2 h-4"
+						/>
+						{/*<Breadcrumb>
+							<BreadcrumbList>
+								<BreadcrumbItem className="hidden md:block">
+									<BreadcrumbLink href="#">
+										Building Your Application
+									</BreadcrumbLink>
+								</BreadcrumbItem>
+								<BreadcrumbSeparator className="hidden md:block" />
+								<BreadcrumbItem>
+									<BreadcrumbPage>
+										Data Fetching
+									</BreadcrumbPage>
+								</BreadcrumbItem>
+							</BreadcrumbList>
+						</Breadcrumb>*/}
+					</div>
+				</header>
+				<div className="flex flex-1 flex-col gap-4 p-4 pt-0">
+					<div className="grid auto-rows-min gap-4 md:grid-cols-3">
+						<div className="aspect-video rounded-xl bg-muted/50" />
+						<div className="aspect-video rounded-xl bg-muted/50" />
+						<div className="aspect-video rounded-xl bg-muted/50" />
+					</div>
+					<div className="min-h-[100vh] flex-1 rounded-xl bg-muted/50 md:min-h-min" />
+				</div>
+			</SidebarInset>
+		</SidebarProvider>
+	);
+}
--- a/frontend/app/(auth)/layout.tsx
+++ b/frontend/app/(auth)/layout.tsx
@@ -0,0 +1,35 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "@/app/globals.css";
+import Navbar from "@/components/nav-bar";
+
+const geistSans = Geist({
+	variable: "--font-geist-sans",
+	subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+	variable: "--font-geist-mono",
+	subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+	title: "Create Next App",
+	description: "Generated by create next app",
+};
+
+export default function RootLayout({
+	children,
+}: Readonly<{
+	children: React.ReactNode;
+}>) {
+	return (
+		<html lang="fr">
+			<body
+				className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+			>
+				{children}
+			</body>
+		</html>
+	);
+}
--- a/frontend/app/(main)/about/page.tsx
+++ b/frontend/app/(main)/about/page.tsx
@@ -2,7 +2,7 @@

 export default async function About() {
 	return (
-		<main>
+		<div>
 			<div>
 				About us
 				will :
@@ -11,6 +11,6 @@ export default async function About() {

 				+plannign for what will come next
 			</div>
-		</main>
+		</div>
 	)
 }
--- a/frontend/app/(main)/contact/page.tsx
+++ b/frontend/app/(main)/contact/page.tsx
--- a/frontend/app/(main)/history/[slug]/page.tsx
+++ b/frontend/app/(main)/history/[slug]/page.tsx
@@ -0,0 +1,31 @@
+"use server";
+
+import { BlogInterface, posts } from "@/components/blog";
+import BlogItem, { BlogItemParams } from "@/components/blogItem";
+
+export default async function HistoryDetails({
+	params,
+}: {
+	params: Promise<{ slug: string }>;
+}) {
+	const { slug } = await params;
+
+	const blog_item: BlogInterface = posts.find(
+		(value) => value.slug == slug,
+	) as BlogInterface;
+
+	const blog_item_params: BlogItemParams = {
+		slug: slug,
+		title_style:
+			"py-12 mb-3 text-pretty text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-3xl",
+		subtitle_style:
+			"py-12 mb-3 text-pretty text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-3xl",
+		p_style:
+			"blog-paragraph mb-5 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg",
+		default_img:
+			"https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
+		blog_content: blog_item,
+	};
+
+	return <BlogItem params={blog_item_params} />;
+}
--- a/frontend/app/(main)/history/page.tsx
+++ b/frontend/app/(main)/history/page.tsx
@@ -5,5 +5,5 @@ export default function History() {
 		<div className="flex flex-col">
 			<Blog />
 		</div>
-	)
+	);
 }
--- a/frontend/app/(main)/layout.tsx
+++ b/frontend/app/(main)/layout.tsx
@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
+import "@/app/globals.css";
 import Navbar from "@/components/nav-bar";
 import Footer from "@/components/footer";

--- a/frontend/app/(main)/login/page.tsx
+++ b/frontend/app/(main)/login/page.tsx
--- a/frontend/app/(main)/page.tsx
+++ b/frontend/app/(main)/page.tsx
--- a/latosa-frontend/app/favicon.ico
+++ b/latosa-frontend/app/favicon.ico
--- a/latosa-frontend/app/globals.css
+++ b/latosa-frontend/app/globals.css
@@ -34,6 +34,14 @@ body {
 		--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%;
 	}

 	.dark {
@@ -61,6 +69,14 @@ body {
 		--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%;
 	}
 }

--- a/latosa-frontend/components.json
+++ b/latosa-frontend/components.json
--- a/frontend/components/app-sidebar.tsx
+++ b/frontend/components/app-sidebar.tsx
@@ -0,0 +1,110 @@
+"use client";
+
+import * as React from "react";
+import {
+	AudioWaveform,
+	BookOpen,
+	Bot,
+	Command,
+	Users,
+	GalleryVerticalEnd,
+	Settings2,
+	Calendar,
+} from "lucide-react";
+
+import { NavMain } from "@/components/nav-main";
+import { NavProjects } from "@/components/nav-projects";
+import { NavUser } from "@/components/nav-user";
+import { TeamSwitcher } from "@/components/team-switcher";
+import {
+	Sidebar,
+	SidebarContent,
+	SidebarFooter,
+	SidebarHeader,
+	SidebarRail,
+} from "@/components/ui/sidebar";
+
+// This is sample data.
+const data = {
+	user: {
+		name: "shadcn",
+		email: "m@example.com",
+		avatar: "/avatars/shadcn.jpg",
+	},
+	teams: [
+		{
+			name: "Latosa-Escrima",
+			logo: GalleryVerticalEnd,
+			plan: "",
+		},
+		{
+			name: "Wing-Tsun",
+			logo: Command,
+			plan: "",
+		},
+	],
+	navMain: [
+		{
+			title: "Membres",
+			url: "/dashboard/members",
+			icon: Users,
+			isActive: true,
+			items: [
+				{
+					title: "Création d'un membre",
+					url: "/dashboard/members/new",
+				},
+			],
+		},
+		{
+			title: "Planning",
+			url: "/dashboard/planning",
+			icon: Calendar,
+		},
+		{
+			title: "Blogs",
+			url: "/dashboard/blogs",
+			icon: BookOpen,
+			items: [
+				{
+					title: "Catégorie 1",
+					url: "/dashboard/blogs/categorie-1",
+				},
+				{
+					title: "Catégorie 2",
+					url: "/dashboard/blogs/categorie-2",
+				},
+				{
+					title: "Nouvelle catégorie",
+					url: "/dashboard/blogs/categories/new",
+				},
+				{
+					title: "Nouvel article",
+					url: "/dashboard/blogs/new",
+				},
+			],
+		},
+		{
+			title: "Settings",
+			url: "/dashboard/settings",
+			icon: Settings2,
+		},
+	],
+};
+
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+	return (
+		<Sidebar collapsible="icon" {...props}>
+			<SidebarHeader>
+				<TeamSwitcher teams={data.teams} />
+			</SidebarHeader>
+			<SidebarContent>
+				<NavMain items={data.navMain} />
+			</SidebarContent>
+			<SidebarFooter>
+				<NavUser user={data.user} />
+			</SidebarFooter>
+			<SidebarRail />
+		</Sidebar>
+	);
+}
--- a/frontend/components/blog.tsx
+++ b/frontend/components/blog.tsx
@@ -0,0 +1,118 @@
+import { ArrowRight } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+
+export interface BlogInterface {
+	id: string;
+	slug: string;
+	title: string;
+	content: string;
+	label: string;
+	author: string;
+	published: string;
+}
+
+export interface BlogSummaryInterface extends BlogInterface {
+	summary: string;
+	image: string;
+	href: string;
+}
+
+export const posts: BlogSummaryInterface[] = [
+	{
+		id: "a1b2c3d4-e5f6-7g8h-9i0j-k1l2m3n4o5p6",
+		slug: "tech-advancements-2025",
+		title: "Tech Advancements in 2025",
+		content:
+			"The year 2025 promises groundbreaking technologies that will reshape industries. In this article, we explore the key advancements that could transform how we work, live, and communicate.",
+		label: "Technology",
+		author: "d3f5e6g7-h8i9j0k1-l2m3n4o5p6q7",
+		published: "2025-01-14",
+		summary:
+			"A look at the tech trends to expect in 2025 and beyond, from AI to quantum computing.",
+		image: "https://via.placeholder.com/600x400?text=Tech+2025",
+		href: "history/tech-advancements-2025",
+	},
+	{
+		id: "f7g8h9i0-j1k2l3m4-n5o6p7q8r9s0t1u2v3",
+		slug: "sustainable-fashion-2025",
+		title: "Sustainable Fashion in 2025",
+		content:
+			"Sustainability is no longer a trend, but a movement within the fashion industry. This article discusses how eco-friendly practices are influencing fashion designs and consumer behavior in 2025.",
+		label: "Fashion",
+		author: "w4x5y6z7-a8b9c0d1-e2f3g4h5i6j7",
+		published: "2025-01-12",
+		summary:
+			"Exploring how sustainable fashion is evolving in 2025 with innovative materials and ethical brands.",
+		image: "https://via.placeholder.com/600x400?text=Sustainable+Fashion",
+		href: "history/sustainable-fashion-2025",
+	},
+	{
+		id: "v1w2x3y4-z5a6b7c8-d9e0f1g2h3i4j5k6l7",
+		slug: "mental-health-awareness-2025",
+		title: "Mental Health Awareness in 2025",
+		content:
+			"As mental health awareness continues to grow, 2025 brings new challenges and opportunities to address psychological well-being. This article focuses on emerging trends in mental health support and public perception.",
+		label: "Health",
+		author: "m8n9o0p1-q2r3s4t5-u6v7w8x9y0z1a2b3",
+		published: "2025-01-10",
+		summary:
+			"Highlighting the importance of mental health awareness in 2025, focusing on new treatments and societal changes.",
+		image: "https://via.placeholder.com/600x400?text=Mental+Health+2025",
+		href: "/history/mental-health-awareness-2025",
+	},
+];
+
+const Blog = () => {
+	return (
+		<section className="self-center lg:md:py-24 sm:py-12">
+			<div className="container flex flex-col items-center gap-16 lg:px-16">
+				<div className="text-center">
+					<h2 className="mb-3 text-pretty text-3xl font-semibold md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl">
+						En savoir plus sur ce sport
+					</h2>
+					<p className="mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg">
+						Lorem ipsum dolor sit amet consectetur adipisicing elit.
+						Elig doloremque mollitia fugiat omnis! Porro facilis quo
+						animi consequatur. Explicabo.
+					</p>
+					<Button variant="link" className="w-full sm:w-auto">
+						Explore all posts
+						<ArrowRight className="ml-2 size-4" />
+					</Button>
+				</div>
+				<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
+					{posts.map((post) => (
+						<a
+							key={post.id}
+							href={post.href}
+							className="flex flex-col overflow-clip rounded-xl border border-border"
+						>
+							<div>
+								<img
+									src={post.image}
+									alt={post.title}
+									className="aspect-[16/9] h-full w-full object-cover object-center"
+								/>
+							</div>
+							<div className="px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12">
+								<h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-xl lg:mb-6">
+									{post.title}
+								</h3>
+								<p className="mb-3 text-muted-foreground md:mb-4 lg:mb-6">
+									{post.summary}
+								</p>
+								<p className="flex items-center hover:underline">
+									Read more
+									<ArrowRight className="ml-2 size-4" />
+								</p>
+							</div>
+						</a>
+					))}
+				</div>
+			</div>
+		</section>
+	);
+};
+
+export default Blog;
--- a/latosa-frontend/components/blogItem.tsx
+++ b/latosa-frontend/components/blogItem.tsx
@@ -1,17 +1,15 @@
 import { BlogInterface } from "@/components/blog";

 export interface BlogItemParams {
-	slug: string
-	title_style: string,
-	subtitle_style: string,
-	p_style: string, 
-	default_img: string
-	blog_content: BlogInterface
+	slug: string;
+	title_style: string;
+	subtitle_style: string;
+	p_style: string;
+	default_img: string;
+	blog_content: BlogInterface;
 }

-export default function BlogItem({ params } 
-	: { params: BlogItemParams }
-) {
+export default function BlogItem({ params }: { params: BlogItemParams }) {
 	return (
 		<main className="flex flex-col w-full lg:md:py-24 sm:py-24">
 			<section className="container self-center max-w-2xl">
@@ -24,7 +22,11 @@ export default function BlogItem({ params }
 					<div>
 						<h2 className={params.subtitle_style}>Subtitle 1</h2>
 						<p className={params.p_style}>
-							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti architecto incidunt, hic in consectetur eligendi nobis numquam tenetur sit repellat et unde, maxime ducimus autem esse temporibus omnis eum molestias!
+							Lorem ipsum dolor sit amet, consectetur adipisicing
+							elit. Deleniti architecto incidunt, hic in
+							consectetur eligendi nobis numquam tenetur sit
+							repellat et unde, maxime ducimus autem esse
+							temporibus omnis eum molestias!
 						</p>
 					</div>
 					<div>
@@ -33,12 +35,15 @@ export default function BlogItem({ params }
 							alt={params.slug}
 							className="aspect-[16/9] mb-5 rounded-sm h-full w-full object-cover object-center"
 						/>
-
 					</div>
 					<div>
 						<h2 className={params.subtitle_style}>Subtitle 2</h2>
 						<p className={params.p_style}>
-							Lorem ipsm dolor sit amet, consectetur adipisicing elit. Deleniti architecto incidunt, hic in consectetur eligendi nobis numquam tenetur sit repellat et unde, maxime ducimus autem esse temporibus omnis eum molestias!
+							Lorem ipsm dolor sit amet, consectetur adipisicing
+							elit. Deleniti architecto incidunt, hic in
+							consectetur eligendi nobis numquam tenetur sit
+							repellat et unde, maxime ducimus autem esse
+							temporibus omnis eum molestias!
 						</p>
 					</div>
 					<div>
@@ -47,19 +52,26 @@ export default function BlogItem({ params }
 							alt={params.slug}
 							className="aspect-[16/9] mb-5 rounded-sm h-full w-full object-cover object-center"
 						/>
-
 					</div>
 					<div>
 						<h2 className={params.subtitle_style}>Subtitle 3</h2>
 						<p className={params.p_style}>
-							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti architecto incidunt, hic in consectetur eligendi nobis numquam tenetur sit repellat et unde, maxime ducimus autem esse temporibus omnis eum molestias!
+							Lorem ipsum dolor sit amet, consectetur adipisicing
+							elit. Deleniti architecto incidunt, hic in
+							consectetur eligendi nobis numquam tenetur sit
+							repellat et unde, maxime ducimus autem esse
+							temporibus omnis eum molestias!
 						</p>
 						<p className={params.p_style}>
-							Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti architecto incidunt, hic in consectetur eligendi nobis numquam tenetur sit repellat et unde, maxime ducimus autem esse temporibus omnis eum molestias!
+							Lorem ipsum dolor sit amet, consectetur adipisicing
+							elit. Deleniti architecto incidunt, hic in
+							consectetur eligendi nobis numquam tenetur sit
+							repellat et unde, maxime ducimus autem esse
+							temporibus omnis eum molestias!
 						</p>
 					</div>
 				</div>
 			</section>
 		</main>
-	)
+	);
 }
--- a/latosa-frontend/components/contact.tsx
+++ b/latosa-frontend/components/contact.tsx
--- a/latosa-frontend/components/features.tsx
+++ b/latosa-frontend/components/features.tsx
--- a/latosa-frontend/components/footer.tsx
+++ b/latosa-frontend/components/footer.tsx
--- a/latosa-frontend/components/gallery.tsx
+++ b/latosa-frontend/components/gallery.tsx
--- a/latosa-frontend/components/hero.tsx
+++ b/latosa-frontend/components/hero.tsx
--- a/latosa-frontend/components/login-form.tsx
+++ b/latosa-frontend/components/login-form.tsx
--- a/latosa-frontend/components/nav-bar.tsx
+++ b/latosa-frontend/components/nav-bar.tsx
@@ -9,9 +9,7 @@ import {
 	AccordionTrigger,
 } from "@/components/ui/accordion";
 import { Button, buttonVariants } from "@/components/ui/button";
-import {
-	navigationMenuTriggerStyle,
-} from "@/components/ui/navigation-menu";
+import { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";
 import {
 	Sheet,
 	SheetContent,
@@ -70,7 +68,7 @@ const subMenuItemsTwo = [

 const Navbar = () => {
 	return (
-		<section className="p-4 top-0 sticky bg-white z-[100]">
+		<section className="p-4 bg-white top-0 sticky z-[100]">
 			<div className="">
 				<nav className="hidden justify-between lg:flex">
 					<div className="flex items-center gap-6">
@@ -97,16 +95,23 @@ const Navbar = () => {
 							>
 								Accueil
 							</Link>
-							<a className={cn(
+							<a
+								className={cn(
 									"text-muted-foreground",
 									navigationMenuTriggerStyle,
 									buttonVariants({
 										variant: "ghost",
 									}),
 								)}
+<<<<<<< HEAD:latosa-frontend/components/nav-bar.tsx

 								href="/">
 								Planning	
+=======
+								href="/"
+							>
+								Calendar
+>>>>>>> dev/cedric:frontend/components/nav-bar.tsx
 							</a>
 							<a
 								className={cn(
--- a/frontend/components/nav-main.tsx
+++ b/frontend/components/nav-main.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import { ChevronRight, type LucideIcon } from "lucide-react";
+
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from "@/components/ui/collapsible";
+import {
+	SidebarGroup,
+	SidebarGroupLabel,
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarMenuSub,
+	SidebarMenuSubButton,
+	SidebarMenuSubItem,
+} from "@/components/ui/sidebar";
+
+export function NavMain({
+	items,
+}: {
+	items: {
+		title: string;
+		url: string;
+		icon?: LucideIcon;
+		isActive?: boolean;
+		items?: {
+			title: string;
+			url: string;
+		}[];
+	}[];
+}) {
+	return (
+		<SidebarGroup>
+			<SidebarGroupLabel>Platform</SidebarGroupLabel>
+			<SidebarMenu>
+				{items.map((item) => (
+					<Collapsible
+						key={item.title}
+						asChild
+						defaultOpen={item.isActive}
+						className="group/collapsible"
+					>
+						<SidebarMenuItem>
+							<CollapsibleTrigger asChild>
+								<SidebarMenuButton tooltip={item.title}>
+									{item.icon && <item.icon />}
+									<span>{item.title}</span>
+									<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
+								</SidebarMenuButton>
+							</CollapsibleTrigger>
+							<CollapsibleContent>
+								<SidebarMenuSub>
+									{item.items?.map((subItem) => (
+										<SidebarMenuSubItem key={subItem.title}>
+											<SidebarMenuSubButton asChild>
+												<a href={subItem.url}>
+													<span>{subItem.title}</span>
+												</a>
+											</SidebarMenuSubButton>
+										</SidebarMenuSubItem>
+									))}
+								</SidebarMenuSub>
+							</CollapsibleContent>
+						</SidebarMenuItem>
+					</Collapsible>
+				))}
+			</SidebarMenu>
+		</SidebarGroup>
+	);
+}
--- a/frontend/components/nav-projects.tsx
+++ b/frontend/components/nav-projects.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import {
+	Folder,
+	Forward,
+	MoreHorizontal,
+	Trash2,
+	type LucideIcon,
+} from "lucide-react";
+
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+	SidebarGroup,
+	SidebarGroupLabel,
+	SidebarMenu,
+	SidebarMenuAction,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	useSidebar,
+} from "@/components/ui/sidebar";
+
+export function NavProjects({
+	projects,
+}: {
+	projects: {
+		name: string;
+		url: string;
+		icon: LucideIcon;
+	}[];
+}) {
+	const { isMobile } = useSidebar();
+
+	return (
+		<SidebarGroup className="group-data-[collapsible=icon]:hidden">
+			<SidebarGroupLabel>Projects</SidebarGroupLabel>
+			<SidebarMenu>
+				{projects.map((item) => (
+					<SidebarMenuItem key={item.name}>
+						<SidebarMenuButton asChild>
+							<a href={item.url}>
+								<item.icon />
+								<span>{item.name}</span>
+							</a>
+						</SidebarMenuButton>
+						<DropdownMenu>
+							<DropdownMenuTrigger asChild>
+								<SidebarMenuAction showOnHover>
+									<MoreHorizontal />
+									<span className="sr-only">More</span>
+								</SidebarMenuAction>
+							</DropdownMenuTrigger>
+							<DropdownMenuContent
+								className="w-48 rounded-lg"
+								side={isMobile ? "bottom" : "right"}
+								align={isMobile ? "end" : "start"}
+							>
+								<DropdownMenuItem>
+									<Folder className="text-muted-foreground" />
+									<span>View Project</span>
+								</DropdownMenuItem>
+								<DropdownMenuItem>
+									<Forward className="text-muted-foreground" />
+									<span>Share Project</span>
+								</DropdownMenuItem>
+								<DropdownMenuSeparator />
+								<DropdownMenuItem>
+									<Trash2 className="text-muted-foreground" />
+									<span>Delete Project</span>
+								</DropdownMenuItem>
+							</DropdownMenuContent>
+						</DropdownMenu>
+					</SidebarMenuItem>
+				))}
+				<SidebarMenuItem>
+					<SidebarMenuButton className="text-sidebar-foreground/70">
+						<MoreHorizontal className="text-sidebar-foreground/70" />
+						<span>More</span>
+					</SidebarMenuButton>
+				</SidebarMenuItem>
+			</SidebarMenu>
+		</SidebarGroup>
+	);
+}
--- a/frontend/components/nav-user.tsx
+++ b/frontend/components/nav-user.tsx
@@ -0,0 +1,128 @@
+"use client";
+
+import {
+	BadgeCheck,
+	Bell,
+	ChevronsUpDown,
+	CreditCard,
+	LogOut,
+	Sparkles,
+} from "lucide-react";
+
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuGroup,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	useSidebar,
+} from "@/components/ui/sidebar";
+
+export function NavUser({
+	user,
+}: {
+	user: {
+		name: string;
+		email: string;
+		avatar: string;
+	};
+}) {
+	const { isMobile } = useSidebar();
+
+	return (
+		<SidebarMenu>
+			<SidebarMenuItem>
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<SidebarMenuButton
+							size="lg"
+							className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+						>
+							<Avatar className="h-8 w-8 rounded-lg">
+								<AvatarImage
+									src={user.avatar}
+									alt={user.name}
+								/>
+								<AvatarFallback className="rounded-lg">
+									CN
+								</AvatarFallback>
+							</Avatar>
+							<div className="grid flex-1 text-left text-sm leading-tight">
+								<span className="truncate font-semibold">
+									{user.name}
+								</span>
+								<span className="truncate text-xs">
+									{user.email}
+								</span>
+							</div>
+							<ChevronsUpDown className="ml-auto size-4" />
+						</SidebarMenuButton>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent
+						className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+						side={isMobile ? "bottom" : "right"}
+						align="end"
+						sideOffset={4}
+					>
+						<DropdownMenuLabel className="p-0 font-normal">
+							<div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+								<Avatar className="h-8 w-8 rounded-lg">
+									<AvatarImage
+										src={user.avatar}
+										alt={user.name}
+									/>
+									<AvatarFallback className="rounded-lg">
+										CN
+									</AvatarFallback>
+								</Avatar>
+								<div className="grid flex-1 text-left text-sm leading-tight">
+									<span className="truncate font-semibold">
+										{user.name}
+									</span>
+									<span className="truncate text-xs">
+										{user.email}
+									</span>
+								</div>
+							</div>
+						</DropdownMenuLabel>
+						<DropdownMenuSeparator />
+						<DropdownMenuGroup>
+							<DropdownMenuItem>
+								<Sparkles />
+								Upgrade to Pro
+							</DropdownMenuItem>
+						</DropdownMenuGroup>
+						<DropdownMenuSeparator />
+						<DropdownMenuGroup>
+							<DropdownMenuItem>
+								<BadgeCheck />
+								Account
+							</DropdownMenuItem>
+							<DropdownMenuItem>
+								<CreditCard />
+								Billing
+							</DropdownMenuItem>
+							<DropdownMenuItem>
+								<Bell />
+								Notifications
+							</DropdownMenuItem>
+						</DropdownMenuGroup>
+						<DropdownMenuSeparator />
+						<DropdownMenuItem>
+							<LogOut />
+							Log out
+						</DropdownMenuItem>
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</SidebarMenuItem>
+		</SidebarMenu>
+	);
+}
--- a/frontend/components/team-switcher.tsx
+++ b/frontend/components/team-switcher.tsx
@@ -0,0 +1,95 @@
+"use client";
+
+import * as React from "react";
+import { ChevronsUpDown, Plus } from "lucide-react";
+
+import {
+	DropdownMenu,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import {
+	SidebarMenu,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	useSidebar,
+} from "@/components/ui/sidebar";
+
+export function TeamSwitcher({
+	teams,
+}: {
+	teams: {
+		name: string;
+		logo: React.ElementType;
+		plan: string;
+	}[];
+}) {
+	const { isMobile } = useSidebar();
+	const [activeTeam, setActiveTeam] = React.useState(teams[0]);
+
+	return (
+		<SidebarMenu>
+			<SidebarMenuItem>
+				<DropdownMenu>
+					<DropdownMenuTrigger asChild>
+						<SidebarMenuButton
+							size="lg"
+							className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+						>
+							<div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+								<activeTeam.logo className="size-4" />
+							</div>
+							<div className="grid flex-1 text-left text-sm leading-tight">
+								<span className="truncate font-semibold">
+									{activeTeam.name}
+								</span>
+								<span className="truncate text-xs">
+									{activeTeam.plan}
+								</span>
+							</div>
+							<ChevronsUpDown className="ml-auto" />
+						</SidebarMenuButton>
+					</DropdownMenuTrigger>
+					<DropdownMenuContent
+						className="w-[--radix-dropdown-menu-trigger-width] min-w-56 rounded-lg"
+						align="start"
+						side={isMobile ? "bottom" : "right"}
+						sideOffset={4}
+					>
+						<DropdownMenuLabel className="text-xs text-muted-foreground">
+							Teams
+						</DropdownMenuLabel>
+						{teams.map((team, index) => (
+							<DropdownMenuItem
+								key={team.name}
+								onClick={() => setActiveTeam(team)}
+								className="gap-2 p-2"
+							>
+								<div className="flex size-6 items-center justify-center rounded-sm border">
+									<team.logo className="size-4 shrink-0" />
+								</div>
+								{team.name}
+								<DropdownMenuShortcut>
+									⌘{index + 1}
+								</DropdownMenuShortcut>
+							</DropdownMenuItem>
+						))}
+						{/*<DropdownMenuSeparator />*/}
+						{/*<DropdownMenuItem className="gap-2 p-2">
+							<div className="flex size-6 items-center justify-center rounded-md border bg-background">
+								<Plus className="size-4" />
+							</div>
+							<div className="font-medium text-muted-foreground">
+								Add team
+							</div>
+						</DropdownMenuItem> */}
+					</DropdownMenuContent>
+				</DropdownMenu>
+			</SidebarMenuItem>
+		</SidebarMenu>
+	);
+}
--- a/latosa-frontend/components/testimonial.tsx
+++ b/latosa-frontend/components/testimonial.tsx
--- a/latosa-frontend/components/ui/accordion.tsx
+++ b/latosa-frontend/components/ui/accordion.tsx
--- a/latosa-frontend/components/ui/avatar.tsx
+++ b/latosa-frontend/components/ui/avatar.tsx
--- a/latosa-frontend/components/ui/badge.tsx
+++ b/latosa-frontend/components/ui/badge.tsx
--- a/frontend/components/ui/breadcrumb.tsx
+++ b/frontend/components/ui/breadcrumb.tsx
@@ -0,0 +1,115 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { ChevronRight, MoreHorizontal } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const Breadcrumb = React.forwardRef<
+	HTMLElement,
+	React.ComponentPropsWithoutRef<"nav"> & {
+		separator?: React.ReactNode;
+	}
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<
+	HTMLOListElement,
+	React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+	<ol
+		ref={ref}
+		className={cn(
+			"flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+			className,
+		)}
+		{...props}
+	/>
+));
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<
+	HTMLLIElement,
+	React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+	<li
+		ref={ref}
+		className={cn("inline-flex items-center gap-1.5", className)}
+		{...props}
+	/>
+));
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = React.forwardRef<
+	HTMLAnchorElement,
+	React.ComponentPropsWithoutRef<"a"> & {
+		asChild?: boolean;
+	}
+>(({ asChild, className, ...props }, ref) => {
+	const Comp = asChild ? Slot : "a";
+
+	return (
+		<Comp
+			ref={ref}
+			className={cn("transition-colors hover:text-foreground", className)}
+			{...props}
+		/>
+	);
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<
+	HTMLSpanElement,
+	React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+	<span
+		ref={ref}
+		role="link"
+		aria-disabled="true"
+		aria-current="page"
+		className={cn("font-normal text-foreground", className)}
+		{...props}
+	/>
+));
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({
+	children,
+	className,
+	...props
+}: React.ComponentProps<"li">) => (
+	<li
+		role="presentation"
+		aria-hidden="true"
+		className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
+		{...props}
+	>
+		{children ?? <ChevronRight />}
+	</li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({
+	className,
+	...props
+}: React.ComponentProps<"span">) => (
+	<span
+		role="presentation"
+		aria-hidden="true"
+		className={cn("flex h-9 w-9 items-center justify-center", className)}
+		{...props}
+	>
+		<MoreHorizontal className="h-4 w-4" />
+		<span className="sr-only">More</span>
+	</span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+
+export {
+	Breadcrumb,
+	BreadcrumbList,
+	BreadcrumbItem,
+	BreadcrumbLink,
+	BreadcrumbPage,
+	BreadcrumbSeparator,
+	BreadcrumbEllipsis,
+};
--- a/latosa-frontend/components/ui/button.tsx
+++ b/latosa-frontend/components/ui/button.tsx
--- a/latosa-frontend/components/ui/card.tsx
+++ b/latosa-frontend/components/ui/card.tsx
--- a/frontend/components/ui/carousel.tsx
+++ b/frontend/components/ui/carousel.tsx
@@ -0,0 +1,263 @@
+"use client";
+
+import * as React from "react";
+import useEmblaCarousel, {
+	type UseEmblaCarouselType,
+} from "embla-carousel-react";
+import { ArrowLeft, ArrowRight } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+
+type CarouselApi = UseEmblaCarouselType[1];
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
+type CarouselOptions = UseCarouselParameters[0];
+type CarouselPlugin = UseCarouselParameters[1];
+
+type CarouselProps = {
+	opts?: CarouselOptions;
+	plugins?: CarouselPlugin;
+	orientation?: "horizontal" | "vertical";
+	setApi?: (api: CarouselApi) => void;
+};
+
+type CarouselContextProps = {
+	carouselRef: ReturnType<typeof useEmblaCarousel>[0];
+	api: ReturnType<typeof useEmblaCarousel>[1];
+	scrollPrev: () => void;
+	scrollNext: () => void;
+	canScrollPrev: boolean;
+	canScrollNext: boolean;
+} & CarouselProps;
+
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
+
+function useCarousel() {
+	const context = React.useContext(CarouselContext);
+
+	if (!context) {
+		throw new Error("useCarousel must be used within a <Carousel />");
+	}
+
+	return context;
+}
+
+const Carousel = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+	(
+		{
+			orientation = "horizontal",
+			opts,
+			setApi,
+			plugins,
+			className,
+			children,
+			...props
+		},
+		ref,
+	) => {
+		const [carouselRef, api] = useEmblaCarousel(
+			{
+				...opts,
+				axis: orientation === "horizontal" ? "x" : "y",
+			},
+			plugins,
+		);
+		const [canScrollPrev, setCanScrollPrev] = React.useState(false);
+		const [canScrollNext, setCanScrollNext] = React.useState(false);
+
+		const onSelect = React.useCallback((api: CarouselApi) => {
+			if (!api) {
+				return;
+			}
+
+			setCanScrollPrev(api.canScrollPrev());
+			setCanScrollNext(api.canScrollNext());
+		}, []);
+
+		const scrollPrev = React.useCallback(() => {
+			api?.scrollPrev();
+		}, [api]);
+
+		const scrollNext = React.useCallback(() => {
+			api?.scrollNext();
+		}, [api]);
+
+		const handleKeyDown = React.useCallback(
+			(event: React.KeyboardEvent<HTMLDivElement>) => {
+				if (event.key === "ArrowLeft") {
+					event.preventDefault();
+					scrollPrev();
+				} else if (event.key === "ArrowRight") {
+					event.preventDefault();
+					scrollNext();
+				}
+			},
+			[scrollPrev, scrollNext],
+		);
+
+		React.useEffect(() => {
+			if (!api || !setApi) {
+				return;
+			}
+
+			setApi(api);
+		}, [api, setApi]);
+
+		React.useEffect(() => {
+			if (!api) {
+				return;
+			}
+
+			onSelect(api);
+			api.on("reInit", onSelect);
+			api.on("select", onSelect);
+
+			return () => {
+				api?.off("select", onSelect);
+			};
+		}, [api, onSelect]);
+
+		return (
+			<CarouselContext.Provider
+				value={{
+					carouselRef,
+					api: api,
+					opts,
+					orientation:
+						orientation ||
+						(opts?.axis === "y" ? "vertical" : "horizontal"),
+					scrollPrev,
+					scrollNext,
+					canScrollPrev,
+					canScrollNext,
+				}}
+			>
+				<div
+					ref={ref}
+					onKeyDownCapture={handleKeyDown}
+					className={cn("relative", className)}
+					role="region"
+					aria-roledescription="carousel"
+					{...props}
+				>
+					{children}
+				</div>
+			</CarouselContext.Provider>
+		);
+	},
+);
+Carousel.displayName = "Carousel";
+
+const CarouselContent = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+	const { carouselRef, orientation } = useCarousel();
+
+	return (
+		<div ref={carouselRef} className="overflow-hidden">
+			<div
+				ref={ref}
+				className={cn(
+					"flex",
+					orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+					className,
+				)}
+				{...props}
+			/>
+		</div>
+	);
+});
+CarouselContent.displayName = "CarouselContent";
+
+const CarouselItem = React.forwardRef<
+	HTMLDivElement,
+	React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
+	const { orientation } = useCarousel();
+
+	return (
+		<div
+			ref={ref}
+			role="group"
+			aria-roledescription="slide"
+			className={cn(
+				"min-w-0 shrink-0 grow-0 basis-full",
+				orientation === "horizontal" ? "pl-4" : "pt-4",
+				className,
+			)}
+			{...props}
+		/>
+	);
+});
+CarouselItem.displayName = "CarouselItem";
+
+const CarouselPrevious = React.forwardRef<
+	HTMLButtonElement,
+	React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+	const { orientation, scrollPrev, canScrollPrev } = useCarousel();
+
+	return (
+		<Button
+			ref={ref}
+			variant={variant}
+			size={size}
+			className={cn(
+				"absolute  h-8 w-8 rounded-full",
+				orientation === "horizontal"
+					? "-left-12 top-1/2 -translate-y-1/2"
+					: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+				className,
+			)}
+			disabled={!canScrollPrev}
+			onClick={scrollPrev}
+			{...props}
+		>
+			<ArrowLeft className="h-4 w-4" />
+			<span className="sr-only">Previous slide</span>
+		</Button>
+	);
+});
+CarouselPrevious.displayName = "CarouselPrevious";
+
+const CarouselNext = React.forwardRef<
+	HTMLButtonElement,
+	React.ComponentProps<typeof Button>
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
+	const { orientation, scrollNext, canScrollNext } = useCarousel();
+
+	return (
+		<Button
+			ref={ref}
+			variant={variant}
+			size={size}
+			className={cn(
+				"absolute h-8 w-8 rounded-full",
+				orientation === "horizontal"
+					? "-right-12 top-1/2 -translate-y-1/2"
+					: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
+				className,
+			)}
+			disabled={!canScrollNext}
+			onClick={scrollNext}
+			{...props}
+		>
+			<ArrowRight className="h-4 w-4" />
+			<span className="sr-only">Next slide</span>
+		</Button>
+	);
+});
+CarouselNext.displayName = "CarouselNext";
+
+export {
+	type CarouselApi,
+	Carousel,
+	CarouselContent,
+	CarouselItem,
+	CarouselPrevious,
+	CarouselNext,
+};
--- a/frontend/components/ui/collapsible.tsx
+++ b/frontend/components/ui/collapsible.tsx
@@ -0,0 +1,11 @@
+"use client";
+
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
--- a/frontend/components/ui/dropdown-menu.tsx
+++ b/frontend/components/ui/dropdown-menu.tsx
@@ -0,0 +1,204 @@
+"use client";
+
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuSubTrigger = React.forwardRef<
+	React.ComponentRef<typeof DropdownMenuPrimitive.SubTrigger>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+		inset?: boolean;
+	}
+>(({ className, inset, children, ...props }, ref) => (
+	<DropdownMenuPrimitive.SubTrigger
+		ref={ref}
+		className={cn(
+			"flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	>
+		{children}
+		<ChevronRight className="ml-auto" />
+	</DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+	DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+	React.ComponentRef<typeof DropdownMenuPrimitive.SubContent>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+	<DropdownMenuPrimitive.SubContent
+		ref={ref}
+		className={cn(
+			"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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}
+	/>
+));
+DropdownMenuSubContent.displayName =
+	DropdownMenuPrimitive.SubContent.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+	React.ComponentRef<typeof DropdownMenuPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+	<DropdownMenuPrimitive.Portal>
+		<DropdownMenuPrimitive.Content
+			ref={ref}
+			sideOffset={sideOffset}
+			className={cn(
+				"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+				"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}
+		/>
+	</DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuItem = React.forwardRef<
+	React.ComponentRef<typeof DropdownMenuPrimitive.Item>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+		inset?: boolean;
+	}
+>(({ className, inset, ...props }, ref) => (
+	<DropdownMenuPrimitive.Item
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+	React.ComponentRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+	<DropdownMenuPrimitive.CheckboxItem
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className,
+		)}
+		checked={checked}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<DropdownMenuPrimitive.ItemIndicator>
+				<Check className="h-4 w-4" />
+			</DropdownMenuPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</DropdownMenuPrimitive.CheckboxItem>
+));
+DropdownMenuCheckboxItem.displayName =
+	DropdownMenuPrimitive.CheckboxItem.displayName;
+
+const DropdownMenuRadioItem = React.forwardRef<
+	React.ComponentRef<typeof DropdownMenuPrimitive.RadioItem>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+	<DropdownMenuPrimitive.RadioItem
+		ref={ref}
+		className={cn(
+			"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+			className,
+		)}
+		{...props}
+	>
+		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+			<DropdownMenuPrimitive.ItemIndicator>
+				<Circle className="h-2 w-2 fill-current" />
+			</DropdownMenuPrimitive.ItemIndicator>
+		</span>
+		{children}
+	</DropdownMenuPrimitive.RadioItem>
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+	React.ComponentRef<typeof DropdownMenuPrimitive.Label>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+		inset?: boolean;
+	}
+>(({ className, inset, ...props }, ref) => (
+	<DropdownMenuPrimitive.Label
+		ref={ref}
+		className={cn(
+			"px-2 py-1.5 text-sm font-semibold",
+			inset && "pl-8",
+			className,
+		)}
+		{...props}
+	/>
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+	React.ComponentRef<typeof DropdownMenuPrimitive.Separator>,
+	React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+	<DropdownMenuPrimitive.Separator
+		ref={ref}
+		className={cn("-mx-1 my-1 h-px bg-muted", className)}
+		{...props}
+	/>
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+	return (
+		<span
+			className={cn(
+				"ml-auto text-xs tracking-widest opacity-60",
+				className,
+			)}
+			{...props}
+		/>
+	);
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+export {
+	DropdownMenu,
+	DropdownMenuTrigger,
+	DropdownMenuContent,
+	DropdownMenuItem,
+	DropdownMenuCheckboxItem,
+	DropdownMenuRadioItem,
+	DropdownMenuLabel,
+	DropdownMenuSeparator,
+	DropdownMenuShortcut,
+	DropdownMenuGroup,
+	DropdownMenuPortal,
+	DropdownMenuSub,
+	DropdownMenuSubContent,
+	DropdownMenuSubTrigger,
+	DropdownMenuRadioGroup,
+};
--- a/latosa-frontend/components/ui/input.tsx
+++ b/latosa-frontend/components/ui/input.tsx
--- a/latosa-frontend/components/ui/label.tsx
+++ b/latosa-frontend/components/ui/label.tsx
--- a/latosa-frontend/components/ui/navigation-menu.tsx
+++ b/latosa-frontend/components/ui/navigation-menu.tsx
--- a/latosa-frontend/components/ui/select.tsx
+++ b/latosa-frontend/components/ui/select.tsx
--- a/frontend/components/ui/separator.tsx
+++ b/frontend/components/ui/separator.tsx
@@ -0,0 +1,33 @@
+"use client";
+
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+
+import { cn } from "@/lib/utils";
+
+const Separator = React.forwardRef<
+	React.ComponentRef<typeof SeparatorPrimitive.Root>,
+	React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
+>(
+	(
+		{ className, orientation = "horizontal", decorative = true, ...props },
+		ref,
+	) => (
+		<SeparatorPrimitive.Root
+			ref={ref}
+			decorative={decorative}
+			orientation={orientation}
+			className={cn(
+				"shrink-0 bg-border",
+				orientation === "horizontal"
+					? "h-[1px] w-full"
+					: "h-full w-[1px]",
+				className,
+			)}
+			{...props}
+		/>
+	),
+);
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+export { Separator };
--- a/latosa-frontend/components/ui/sheet.tsx
+++ b/latosa-frontend/components/ui/sheet.tsx
--- a/frontend/components/ui/sidebar.tsx
+++ b/frontend/components/ui/sidebar.tsx
@@ -0,0 +1,788 @@
+"use client";
+
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { VariantProps, cva } from "class-variance-authority";
+import { PanelLeft } from "lucide-react";
+
+import { useIsMobile } from "@/hooks/use-mobile";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Separator } from "@/components/ui/separator";
+import { Sheet, SheetContent } from "@/components/ui/sheet";
+import { Skeleton } from "@/components/ui/skeleton";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipProvider,
+	TooltipTrigger,
+} from "@/components/ui/tooltip";
+
+const SIDEBAR_COOKIE_NAME = "sidebar:state";
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+const SIDEBAR_WIDTH = "16rem";
+const SIDEBAR_WIDTH_MOBILE = "18rem";
+const SIDEBAR_WIDTH_ICON = "3rem";
+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+type SidebarContext = {
+	state: "expanded" | "collapsed";
+	open: boolean;
+	setOpen: (open: boolean) => void;
+	openMobile: boolean;
+	setOpenMobile: (open: boolean) => void;
+	isMobile: boolean;
+	toggleSidebar: () => void;
+};
+
+const SidebarContext = React.createContext<SidebarContext | null>(null);
+
+function useSidebar() {
+	const context = React.useContext(SidebarContext);
+	if (!context) {
+		throw new Error("useSidebar must be used within a SidebarProvider.");
+	}
+
+	return context;
+}
+
+const SidebarProvider = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		defaultOpen?: boolean;
+		open?: boolean;
+		onOpenChange?: (open: boolean) => void;
+	}
+>(
+	(
+		{
+			defaultOpen = true,
+			open: openProp,
+			onOpenChange: setOpenProp,
+			className,
+			style,
+			children,
+			...props
+		},
+		ref,
+	) => {
+		const isMobile = useIsMobile();
+		const [openMobile, setOpenMobile] = React.useState(false);
+
+		// This is the internal state of the sidebar.
+		// We use openProp and setOpenProp for control from outside the component.
+		const [_open, _setOpen] = React.useState(defaultOpen);
+		const open = openProp ?? _open;
+		const setOpen = React.useCallback(
+			(value: boolean | ((value: boolean) => boolean)) => {
+				const openState =
+					typeof value === "function" ? value(open) : value;
+				if (setOpenProp) {
+					setOpenProp(openState);
+				} else {
+					_setOpen(openState);
+				}
+
+				// This sets the cookie to keep the sidebar state.
+				document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+			},
+			[setOpenProp, open],
+		);
+
+		// Helper to toggle the sidebar.
+		const toggleSidebar = React.useCallback(() => {
+			return isMobile
+				? setOpenMobile((open) => !open)
+				: setOpen((open) => !open);
+		}, [isMobile, setOpen, setOpenMobile]);
+
+		// Adds a keyboard shortcut to toggle the sidebar.
+		React.useEffect(() => {
+			const handleKeyDown = (event: KeyboardEvent) => {
+				if (
+					event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+					(event.metaKey || event.ctrlKey)
+				) {
+					event.preventDefault();
+					toggleSidebar();
+				}
+			};
+
+			window.addEventListener("keydown", handleKeyDown);
+			return () => window.removeEventListener("keydown", handleKeyDown);
+		}, [toggleSidebar]);
+
+		// We add a state so that we can do data-state="expanded" or "collapsed".
+		// This makes it easier to style the sidebar with Tailwind classes.
+		const state = open ? "expanded" : "collapsed";
+
+		const contextValue = React.useMemo<SidebarContext>(
+			() => ({
+				state,
+				open,
+				setOpen,
+				isMobile,
+				openMobile,
+				setOpenMobile,
+				toggleSidebar,
+			}),
+			[
+				state,
+				open,
+				setOpen,
+				isMobile,
+				openMobile,
+				setOpenMobile,
+				toggleSidebar,
+			],
+		);
+
+		return (
+			<SidebarContext.Provider value={contextValue}>
+				<TooltipProvider delayDuration={0}>
+					<div
+						style={
+							{
+								"--sidebar-width": SIDEBAR_WIDTH,
+								"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+								...style,
+							} as React.CSSProperties
+						}
+						className={cn(
+							"group/sidebar-wrapper flex min-h-svh w-full has-[[data-variant=inset]]:bg-sidebar",
+							className,
+						)}
+						ref={ref}
+						{...props}
+					>
+						{children}
+					</div>
+				</TooltipProvider>
+			</SidebarContext.Provider>
+		);
+	},
+);
+SidebarProvider.displayName = "SidebarProvider";
+
+const Sidebar = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		side?: "left" | "right";
+		variant?: "sidebar" | "floating" | "inset";
+		collapsible?: "offcanvas" | "icon" | "none";
+	}
+>(
+	(
+		{
+			side = "left",
+			variant = "sidebar",
+			collapsible = "offcanvas",
+			className,
+			children,
+			...props
+		},
+		ref,
+	) => {
+		const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+
+		if (collapsible === "none") {
+			return (
+				<div
+					className={cn(
+						"flex h-full w-[--sidebar-width] flex-col bg-sidebar text-sidebar-foreground",
+						className,
+					)}
+					ref={ref}
+					{...props}
+				>
+					{children}
+				</div>
+			);
+		}
+
+		if (isMobile) {
+			return (
+				<Sheet
+					open={openMobile}
+					onOpenChange={setOpenMobile}
+					{...props}
+				>
+					<SheetContent
+						data-sidebar="sidebar"
+						data-mobile="true"
+						className="w-[--sidebar-width] bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
+						style={
+							{
+								"--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+							} as React.CSSProperties
+						}
+						side={side}
+					>
+						<div className="flex h-full w-full flex-col">
+							{children}
+						</div>
+					</SheetContent>
+				</Sheet>
+			);
+		}
+
+		return (
+			<div
+				ref={ref}
+				className="group peer hidden md:block text-sidebar-foreground"
+				data-state={state}
+				data-collapsible={state === "collapsed" ? collapsible : ""}
+				data-variant={variant}
+				data-side={side}
+			>
+				{/* This is what handles the sidebar gap on desktop */}
+				<div
+					className={cn(
+						"duration-200 relative h-svh w-[--sidebar-width] bg-transparent transition-[width] ease-linear",
+						"group-data-[collapsible=offcanvas]:w-0",
+						"group-data-[side=right]:rotate-180",
+						variant === "floating" || variant === "inset"
+							? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4))]"
+							: "group-data-[collapsible=icon]:w-[--sidebar-width-icon]",
+					)}
+				/>
+				<div
+					className={cn(
+						"duration-200 fixed inset-y-0 z-10 hidden h-svh w-[--sidebar-width] transition-[left,right,width] ease-linear md:flex",
+						side === "left"
+							? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+							: "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+						// Adjust the padding for floating and inset variants.
+						variant === "floating" || variant === "inset"
+							? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)_+_theme(spacing.4)_+2px)]"
+							: "group-data-[collapsible=icon]:w-[--sidebar-width-icon] group-data-[side=left]:border-r group-data-[side=right]:border-l",
+						className,
+					)}
+					{...props}
+				>
+					<div
+						data-sidebar="sidebar"
+						className="flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow"
+					>
+						{children}
+					</div>
+				</div>
+			</div>
+		);
+	},
+);
+Sidebar.displayName = "Sidebar";
+
+const SidebarTrigger = React.forwardRef<
+	React.ComponentRef<typeof Button>,
+	React.ComponentProps<typeof Button>
+>(({ className, onClick, ...props }, ref) => {
+	const { toggleSidebar } = useSidebar();
+
+	return (
+		<Button
+			ref={ref}
+			data-sidebar="trigger"
+			variant="ghost"
+			size="icon"
+			className={cn("h-7 w-7", className)}
+			onClick={(event) => {
+				onClick?.(event);
+				toggleSidebar();
+			}}
+			{...props}
+		>
+			<PanelLeft />
+			<span className="sr-only">Toggle Sidebar</span>
+		</Button>
+	);
+});
+SidebarTrigger.displayName = "SidebarTrigger";
+
+const SidebarRail = React.forwardRef<
+	HTMLButtonElement,
+	React.ComponentProps<"button">
+>(({ className, ...props }, ref) => {
+	const { toggleSidebar } = useSidebar();
+
+	return (
+		<button
+			ref={ref}
+			data-sidebar="rail"
+			aria-label="Toggle Sidebar"
+			tabIndex={-1}
+			onClick={toggleSidebar}
+			title="Toggle Sidebar"
+			className={cn(
+				"absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=left]:-right-4 group-data-[side=right]:left-0 sm:flex",
+				"[[data-side=left]_&]:cursor-w-resize [[data-side=right]_&]:cursor-e-resize",
+				"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+				"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full group-data-[collapsible=offcanvas]:hover:bg-sidebar",
+				"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+				"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+				className,
+			)}
+			{...props}
+		/>
+	);
+});
+SidebarRail.displayName = "SidebarRail";
+
+const SidebarInset = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"main">
+>(({ className, ...props }, ref) => {
+	return (
+		<main
+			ref={ref}
+			className={cn(
+				"relative flex min-h-svh flex-1 flex-col bg-background",
+				"peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow",
+				className,
+			)}
+			{...props}
+		/>
+	);
+});
+SidebarInset.displayName = "SidebarInset";
+
+const SidebarInput = React.forwardRef<
+	React.ComponentRef<typeof Input>,
+	React.ComponentProps<typeof Input>
+>(({ className, ...props }, ref) => {
+	return (
+		<Input
+			ref={ref}
+			data-sidebar="input"
+			className={cn(
+				"h-8 w-full bg-background shadow-none focus-visible:ring-2 focus-visible:ring-sidebar-ring",
+				className,
+			)}
+			{...props}
+		/>
+	);
+});
+SidebarInput.displayName = "SidebarInput";
+
+const SidebarHeader = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+	return (
+		<div
+			ref={ref}
+			data-sidebar="header"
+			className={cn("flex flex-col gap-2 p-2", className)}
+			{...props}
+		/>
+	);
+});
+SidebarHeader.displayName = "SidebarHeader";
+
+const SidebarFooter = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+	return (
+		<div
+			ref={ref}
+			data-sidebar="footer"
+			className={cn("flex flex-col gap-2 p-2", className)}
+			{...props}
+		/>
+	);
+});
+SidebarFooter.displayName = "SidebarFooter";
+
+const SidebarSeparator = React.forwardRef<
+	React.ComponentRef<typeof Separator>,
+	React.ComponentProps<typeof Separator>
+>(({ className, ...props }, ref) => {
+	return (
+		<Separator
+			ref={ref}
+			data-sidebar="separator"
+			className={cn("mx-2 w-auto bg-sidebar-border", className)}
+			{...props}
+		/>
+	);
+});
+SidebarSeparator.displayName = "SidebarSeparator";
+
+const SidebarContent = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+	return (
+		<div
+			ref={ref}
+			data-sidebar="content"
+			className={cn(
+				"flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+});
+SidebarContent.displayName = "SidebarContent";
+
+const SidebarGroup = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div">
+>(({ className, ...props }, ref) => {
+	return (
+		<div
+			ref={ref}
+			data-sidebar="group"
+			className={cn(
+				"relative flex w-full min-w-0 flex-col p-2",
+				className,
+			)}
+			{...props}
+		/>
+	);
+});
+SidebarGroup.displayName = "SidebarGroup";
+
+const SidebarGroupLabel = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+	const Comp = asChild ? Slot : "div";
+
+	return (
+		<Comp
+			ref={ref}
+			data-sidebar="group-label"
+			className={cn(
+				"duration-200 flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 outline-none ring-sidebar-ring transition-[margin,opa] ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				"group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+});
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+
+const SidebarGroupAction = React.forwardRef<
+	HTMLButtonElement,
+	React.ComponentProps<"button"> & { asChild?: boolean }
+>(({ className, asChild = false, ...props }, ref) => {
+	const Comp = asChild ? Slot : "button";
+
+	return (
+		<Comp
+			ref={ref}
+			data-sidebar="group-action"
+			className={cn(
+				"absolute right-3 top-3.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+				// Increases the hit area of the button on mobile.
+				"after:absolute after:-inset-2 after:md:hidden",
+				"group-data-[collapsible=icon]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+});
+SidebarGroupAction.displayName = "SidebarGroupAction";
+
+const SidebarGroupContent = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		data-sidebar="group-content"
+		className={cn("w-full text-sm", className)}
+		{...props}
+	/>
+));
+SidebarGroupContent.displayName = "SidebarGroupContent";
+
+const SidebarMenu = React.forwardRef<
+	HTMLUListElement,
+	React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+	<ul
+		ref={ref}
+		data-sidebar="menu"
+		className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+		{...props}
+	/>
+));
+SidebarMenu.displayName = "SidebarMenu";
+
+const SidebarMenuItem = React.forwardRef<
+	HTMLLIElement,
+	React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+	<li
+		ref={ref}
+		data-sidebar="menu-item"
+		className={cn("group/menu-item relative", className)}
+		{...props}
+	/>
+));
+SidebarMenuItem.displayName = "SidebarMenuItem";
+
+const sidebarMenuButtonVariants = cva(
+	"peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-none ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-[[data-sidebar=menu-action]]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:!size-8 group-data-[collapsible=icon]:!p-2 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+	{
+		variants: {
+			variant: {
+				default:
+					"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+				outline:
+					"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+			},
+			size: {
+				default: "h-8 text-sm",
+				sm: "h-7 text-xs",
+				lg: "h-12 text-sm group-data-[collapsible=icon]:!p-0",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+			size: "default",
+		},
+	},
+);
+
+const SidebarMenuButton = React.forwardRef<
+	HTMLButtonElement,
+	React.ComponentProps<"button"> & {
+		asChild?: boolean;
+		isActive?: boolean;
+		tooltip?: string | React.ComponentProps<typeof TooltipContent>;
+	} & VariantProps<typeof sidebarMenuButtonVariants>
+>(
+	(
+		{
+			asChild = false,
+			isActive = false,
+			variant = "default",
+			size = "default",
+			tooltip,
+			className,
+			...props
+		},
+		ref,
+	) => {
+		const Comp = asChild ? Slot : "button";
+		const { isMobile, state } = useSidebar();
+
+		const button = (
+			<Comp
+				ref={ref}
+				data-sidebar="menu-button"
+				data-size={size}
+				data-active={isActive}
+				className={cn(
+					sidebarMenuButtonVariants({ variant, size }),
+					className,
+				)}
+				{...props}
+			/>
+		);
+
+		if (!tooltip) {
+			return button;
+		}
+
+		if (typeof tooltip === "string") {
+			tooltip = {
+				children: tooltip,
+			};
+		}
+
+		return (
+			<Tooltip>
+				<TooltipTrigger asChild>{button}</TooltipTrigger>
+				<TooltipContent
+					side="right"
+					align="center"
+					hidden={state !== "collapsed" || isMobile}
+					{...tooltip}
+				/>
+			</Tooltip>
+		);
+	},
+);
+SidebarMenuButton.displayName = "SidebarMenuButton";
+
+const SidebarMenuAction = React.forwardRef<
+	HTMLButtonElement,
+	React.ComponentProps<"button"> & {
+		asChild?: boolean;
+		showOnHover?: boolean;
+	}
+>(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+	const Comp = asChild ? Slot : "button";
+
+	return (
+		<Comp
+			ref={ref}
+			data-sidebar="menu-action"
+			className={cn(
+				"absolute right-1 top-1.5 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-none ring-sidebar-ring transition-transform hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground [&>svg]:size-4 [&>svg]:shrink-0",
+				// Increases the hit area of the button on mobile.
+				"after:absolute after:-inset-2 after:md:hidden",
+				"peer-data-[size=sm]/menu-button:top-1",
+				"peer-data-[size=default]/menu-button:top-1.5",
+				"peer-data-[size=lg]/menu-button:top-2.5",
+				"group-data-[collapsible=icon]:hidden",
+				showOnHover &&
+					"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground md:opacity-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+});
+SidebarMenuAction.displayName = "SidebarMenuAction";
+
+const SidebarMenuBadge = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div">
+>(({ className, ...props }, ref) => (
+	<div
+		ref={ref}
+		data-sidebar="menu-badge"
+		className={cn(
+			"absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums text-sidebar-foreground select-none pointer-events-none",
+			"peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+			"peer-data-[size=sm]/menu-button:top-1",
+			"peer-data-[size=default]/menu-button:top-1.5",
+			"peer-data-[size=lg]/menu-button:top-2.5",
+			"group-data-[collapsible=icon]:hidden",
+			className,
+		)}
+		{...props}
+	/>
+));
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
+
+const SidebarMenuSkeleton = React.forwardRef<
+	HTMLDivElement,
+	React.ComponentProps<"div"> & {
+		showIcon?: boolean;
+	}
+>(({ className, showIcon = false, ...props }, ref) => {
+	// Random width between 50 to 90%.
+	const width = React.useMemo(() => {
+		return `${Math.floor(Math.random() * 40) + 50}%`;
+	}, []);
+
+	return (
+		<div
+			ref={ref}
+			data-sidebar="menu-skeleton"
+			className={cn(
+				"rounded-md h-8 flex gap-2 px-2 items-center",
+				className,
+			)}
+			{...props}
+		>
+			{showIcon && (
+				<Skeleton
+					className="size-4 rounded-md"
+					data-sidebar="menu-skeleton-icon"
+				/>
+			)}
+			<Skeleton
+				className="h-4 flex-1 max-w-[--skeleton-width]"
+				data-sidebar="menu-skeleton-text"
+				style={
+					{
+						"--skeleton-width": width,
+					} as React.CSSProperties
+				}
+			/>
+		</div>
+	);
+});
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+
+const SidebarMenuSub = React.forwardRef<
+	HTMLUListElement,
+	React.ComponentProps<"ul">
+>(({ className, ...props }, ref) => (
+	<ul
+		ref={ref}
+		data-sidebar="menu-sub"
+		className={cn(
+			"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5",
+			"group-data-[collapsible=icon]:hidden",
+			className,
+		)}
+		{...props}
+	/>
+));
+SidebarMenuSub.displayName = "SidebarMenuSub";
+
+const SidebarMenuSubItem = React.forwardRef<
+	HTMLLIElement,
+	React.ComponentProps<"li">
+>(({ ...props }, ref) => <li ref={ref} {...props} />);
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+
+const SidebarMenuSubButton = React.forwardRef<
+	HTMLAnchorElement,
+	React.ComponentProps<"a"> & {
+		asChild?: boolean;
+		size?: "sm" | "md";
+		isActive?: boolean;
+	}
+>(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+	const Comp = asChild ? Slot : "a";
+
+	return (
+		<Comp
+			ref={ref}
+			data-sidebar="menu-sub-button"
+			data-size={size}
+			data-active={isActive}
+			className={cn(
+				"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-none ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+				"data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+				size === "sm" && "text-xs",
+				size === "md" && "text-sm",
+				"group-data-[collapsible=icon]:hidden",
+				className,
+			)}
+			{...props}
+		/>
+	);
+});
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+
+export {
+	Sidebar,
+	SidebarContent,
+	SidebarFooter,
+	SidebarGroup,
+	SidebarGroupAction,
+	SidebarGroupContent,
+	SidebarGroupLabel,
+	SidebarHeader,
+	SidebarInput,
+	SidebarInset,
+	SidebarMenu,
+	SidebarMenuAction,
+	SidebarMenuBadge,
+	SidebarMenuButton,
+	SidebarMenuItem,
+	SidebarMenuSkeleton,
+	SidebarMenuSub,
+	SidebarMenuSubButton,
+	SidebarMenuSubItem,
+	SidebarProvider,
+	SidebarRail,
+	SidebarSeparator,
+	SidebarTrigger,
+	useSidebar,
+};
--- a/frontend/components/ui/skeleton.tsx
+++ b/frontend/components/ui/skeleton.tsx
@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils";
+
+function Skeleton({
+	className,
+	...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+	return (
+		<div
+			className={cn("animate-pulse rounded-md bg-primary/10", className)}
+			{...props}
+		/>
+	);
+}
+
+export { Skeleton };
--- a/latosa-frontend/components/ui/textarea.tsx
+++ b/latosa-frontend/components/ui/textarea.tsx
--- a/frontend/components/ui/tooltip.tsx
+++ b/frontend/components/ui/tooltip.tsx
@@ -0,0 +1,32 @@
+"use client";
+
+import * as React from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+
+import { cn } from "@/lib/utils";
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = React.forwardRef<
+	React.ComponentRef<typeof TooltipPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+	<TooltipPrimitive.Portal>
+		<TooltipPrimitive.Content
+			ref={ref}
+			sideOffset={sideOffset}
+			className={cn(
+				"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-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}
+		/>
+	</TooltipPrimitive.Portal>
+));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
--- a/frontend/dashboard.yaml
+++ b/frontend/dashboard.yaml
@@ -0,0 +1,17 @@
+- Gestion des membres:
+    - Et par conséquent des utilisateurs
+    - Gestions des licences membres ?
+- Gestion du planning:
+    - Pouvoir gérer les séances (il y a un planning par défaut qui peut être modifier de jour en jour, en cas de toute éventualité).
+    - Membres peuvent suivre certains jours du planning (voulant dire qu'il seront présents)
+    - Mettre une limite totale par séance (on peut pas être une centaine)
+    - En cas d'annulation, les membres peuvent être prévenus par mail (s'il active sur le compte membre)
+    - Liaison avec Google Calendar et abonnement ics
+- Gesion des blogs:
+    - Intérêt: Actualités, Histoire (de l'art martial), Cours ? -> Donc création de catégories
+    - Editeur d'article
+- Paramètres:
+    - Paramètres compte
+    - Paramètres site:
+        - Lien API (Google)
+        - Activation de l'auto-inscription des comptes utilisateurs
--- a/latosa-frontend/deno.json
+++ b/latosa-frontend/deno.json
--- a/latosa-frontend/deno.lock
+++ b/latosa-frontend/deno.lock
--- a/latosa-frontend/eslint.config.mjs
+++ b/latosa-frontend/eslint.config.mjs
--- a/frontend/hooks/use-mobile.tsx
+++ b/frontend/hooks/use-mobile.tsx
@@ -0,0 +1,23 @@
+import * as React from "react";
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+	const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
+		undefined,
+	);
+
+	React.useEffect(() => {
+		const mql = window.matchMedia(
+			`(max-width: ${MOBILE_BREAKPOINT - 1}px)`,
+		);
+		const onChange = () => {
+			setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		};
+		mql.addEventListener("change", onChange);
+		setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+		return () => mql.removeEventListener("change", onChange);
+	}, []);
+
+	return !!isMobile;
+}
--- a/latosa-frontend/lib/utils.ts
+++ b/latosa-frontend/lib/utils.ts
--- a/latosa-frontend/next.config.ts
+++ b/latosa-frontend/next.config.ts
@@ -2,6 +2,7 @@ import type { NextConfig } from "next";

 const nextConfig: NextConfig = {
 	/* config options here */
+	output: "standalone",
 };

 export default nextConfig;
--- a/latosa-frontend/package-lock.json
+++ b/latosa-frontend/package-lock.json
@@ -10,15 +10,19 @@
 			"dependencies": {
 				"@radix-ui/react-accordion": "^1.2.2",
 				"@radix-ui/react-avatar": "^1.1.2",
+				"@radix-ui/react-collapsible": "^1.1.2",
 				"@radix-ui/react-dialog": "^1.1.4",
+				"@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-select": "^2.1.4",
+				"@radix-ui/react-separator": "^1.1.1",
 				"@radix-ui/react-slot": "^1.1.1",
+				"@radix-ui/react-tooltip": "^1.1.6",
 				"class-variance-authority": "^0.7.1",
 				"clsx": "^2.1.1",
 				"embla-carousel-react": "^8.5.2",
-				"lucide-react": "^0.471.0",
+				"lucide-react": "^0.471.1",
 				"next": "15.1.4",
 				"react": "^19.0.0",
 				"react-dom": "^19.0.0",
@@ -1173,6 +1177,35 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-dropdown-menu": {
+			"version": "2.1.4",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-dropdown-menu/-/react-dropdown-menu-2.1.4.tgz",
+			"integrity": "sha512-iXU1Ab5ecM+yEepGAWK8ZhMyKX4ubFdCNtol4sT9D0OVErG9PNElfx3TQhjw7n7BC5nFVz68/5//clWy+8TXzA==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.1",
+				"@radix-ui/react-compose-refs": "1.1.1",
+				"@radix-ui/react-context": "1.1.1",
+				"@radix-ui/react-id": "1.1.0",
+				"@radix-ui/react-menu": "2.1.4",
+				"@radix-ui/react-primitive": "2.0.1",
+				"@radix-ui/react-use-controllable-state": "1.1.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-focus-guards": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
@@ -1254,6 +1287,46 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-menu": {
+			"version": "2.1.4",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.4.tgz",
+			"integrity": "sha512-BnOgVoL6YYdHAG6DtXONaR29Eq4nvbi8rutrV/xlr3RQCMMb3yqP85Qiw/3NReozrSW+4dfLkK+rc1hb4wPU/A==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.1",
+				"@radix-ui/react-collection": "1.1.1",
+				"@radix-ui/react-compose-refs": "1.1.1",
+				"@radix-ui/react-context": "1.1.1",
+				"@radix-ui/react-direction": "1.1.0",
+				"@radix-ui/react-dismissable-layer": "1.1.3",
+				"@radix-ui/react-focus-guards": "1.1.1",
+				"@radix-ui/react-focus-scope": "1.1.1",
+				"@radix-ui/react-id": "1.1.0",
+				"@radix-ui/react-popper": "1.2.1",
+				"@radix-ui/react-portal": "1.1.3",
+				"@radix-ui/react-presence": "1.1.2",
+				"@radix-ui/react-primitive": "2.0.1",
+				"@radix-ui/react-roving-focus": "1.1.1",
+				"@radix-ui/react-slot": "1.1.1",
+				"@radix-ui/react-use-callback-ref": "1.1.0",
+				"aria-hidden": "^1.1.1",
+				"react-remove-scroll": "^2.6.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-navigation-menu": {
 			"version": "1.2.3",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-navigation-menu/-/react-navigation-menu-1.2.3.tgz",
@@ -1393,6 +1466,37 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-roving-focus": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.1.tgz",
+			"integrity": "sha512-QE1RoxPGJ/Nm8Qmk0PxP8ojmoaS67i0s7hVssS7KuI2FQoc/uzVlZsqKfQvxPE6D8hICCPHJ4D88zNhT3OOmkw==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.1",
+				"@radix-ui/react-collection": "1.1.1",
+				"@radix-ui/react-compose-refs": "1.1.1",
+				"@radix-ui/react-context": "1.1.1",
+				"@radix-ui/react-direction": "1.1.0",
+				"@radix-ui/react-id": "1.1.0",
+				"@radix-ui/react-primitive": "2.0.1",
+				"@radix-ui/react-use-callback-ref": "1.1.0",
+				"@radix-ui/react-use-controllable-state": "1.1.0"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-select": {
 			"version": "2.1.4",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-2.1.4.tgz",
@@ -1436,6 +1540,29 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-separator": {
+			"version": "1.1.1",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.1.1.tgz",
+			"integrity": "sha512-RRiNRSrD8iUiXriq/Y5n4/3iE8HzqgLHsusUSg5jVpU2+3tqcUFPJXHDymwEypunc2sWxDUS3UC+rkZRlHedsw==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/react-primitive": "2.0.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-slot": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
@@ -1454,6 +1581,40 @@
 				}
 			}
 		},
+		"node_modules/@radix-ui/react-tooltip": {
+			"version": "1.1.6",
+			"resolved": "https://registry.npmjs.org/@radix-ui/react-tooltip/-/react-tooltip-1.1.6.tgz",
+			"integrity": "sha512-TLB5D8QLExS1uDn7+wH/bjEmRurNMTzNrtq7IjaS4kjion9NtzsTGkvR5+i7yc9q01Pi2KMM2cN3f8UG4IvvXA==",
+			"license": "MIT",
+			"dependencies": {
+				"@radix-ui/primitive": "1.1.1",
+				"@radix-ui/react-compose-refs": "1.1.1",
+				"@radix-ui/react-context": "1.1.1",
+				"@radix-ui/react-dismissable-layer": "1.1.3",
+				"@radix-ui/react-id": "1.1.0",
+				"@radix-ui/react-popper": "1.2.1",
+				"@radix-ui/react-portal": "1.1.3",
+				"@radix-ui/react-presence": "1.1.2",
+				"@radix-ui/react-primitive": "2.0.1",
+				"@radix-ui/react-slot": "1.1.1",
+				"@radix-ui/react-use-controllable-state": "1.1.0",
+				"@radix-ui/react-visually-hidden": "1.1.1"
+			},
+			"peerDependencies": {
+				"@types/react": "*",
+				"@types/react-dom": "*",
+				"react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+				"react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+			},
+			"peerDependenciesMeta": {
+				"@types/react": {
+					"optional": true
+				},
+				"@types/react-dom": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@radix-ui/react-use-callback-ref": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz",
@@ -4603,9 +4764,9 @@
 			"license": "ISC"
 		},
 		"node_modules/lucide-react": {
-			"version": "0.471.0",
-			"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.471.0.tgz",
-			"integrity": "sha512-3L0OOJClsKDETJGK7nABqW8ftaVmUjWzluzPpw/6dGdI1bOmzsLsCjZpAEpg24Xs/U7xdYveQU+CBkHxWy7MrA==",
+			"version": "0.471.1",
+			"resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.471.1.tgz",
+			"integrity": "sha512-syOxwPhf62gg2YOsz72HRn+CIpeudFy67AeKnSR8Hn/fIIF4ubhNbRF+pQ2CaJrl+X9Os4PL87z2DXQi3DVeDA==",
 			"license": "ISC",
 			"peerDependencies": {
 				"react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
--- a/latosa-frontend/package.json
+++ b/latosa-frontend/package.json
@@ -3,7 +3,7 @@
 	"version": "0.1.0",
 	"private": true,
 	"scripts": {
-		"dev": "next dev --turbopack",
+		"dev": "next dev --turbopack -p 8000",
 		"build": "next build",
 		"start": "next start",
 		"lint": "next lint"
@@ -11,15 +11,19 @@
 	"dependencies": {
 		"@radix-ui/react-accordion": "^1.2.2",
 		"@radix-ui/react-avatar": "^1.1.2",
+		"@radix-ui/react-collapsible": "^1.1.2",
 		"@radix-ui/react-dialog": "^1.1.4",
+		"@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-select": "^2.1.4",
+		"@radix-ui/react-separator": "^1.1.1",
 		"@radix-ui/react-slot": "^1.1.1",
+		"@radix-ui/react-tooltip": "^1.1.6",
 		"class-variance-authority": "^0.7.1",
 		"clsx": "^2.1.1",
 		"embla-carousel-react": "^8.5.2",
-		"lucide-react": "^0.471.0",
+		"lucide-react": "^0.471.1",
 		"next": "15.1.4",
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0",
--- a/latosa-frontend/postcss.config.mjs
+++ b/latosa-frontend/postcss.config.mjs
--- a/latosa-frontend/public/file.svg
+++ b/latosa-frontend/public/file.svg
--- a/latosa-frontend/public/globe.svg
+++ b/latosa-frontend/public/globe.svg
--- a/latosa-frontend/public/next.svg
+++ b/latosa-frontend/public/next.svg
--- a/latosa-frontend/public/vercel.svg
+++ b/latosa-frontend/public/vercel.svg
--- a/latosa-frontend/public/window.svg
+++ b/latosa-frontend/public/window.svg
--- a/latosa-frontend/tailwind.config.ts
+++ b/latosa-frontend/tailwind.config.ts
@@ -50,6 +50,18 @@ export default {
 					"4": "hsl(var(--chart-4))",
 					"5": "hsl(var(--chart-5))",
 				},
+				sidebar: {
+					DEFAULT: "hsl(var(--sidebar-background))",
+					foreground: "hsl(var(--sidebar-foreground))",
+					primary: "hsl(var(--sidebar-primary))",
+					"primary-foreground":
+						"hsl(var(--sidebar-primary-foreground))",
+					accent: "hsl(var(--sidebar-accent))",
+					"accent-foreground":
+						"hsl(var(--sidebar-accent-foreground))",
+					border: "hsl(var(--sidebar-border))",
+					ring: "hsl(var(--sidebar-ring))",
+				},
 			},
 			borderRadius: {
 				lg: "var(--radius)",
@@ -80,7 +92,5 @@ export default {
 			},
 		},
 	},
-	plugins: [
-		require("tailwindcss-animate")
-	],
+	plugins: [require("tailwindcss-animate")],
 } satisfies Config;
--- a/latosa-frontend/tsconfig.json
+++ b/latosa-frontend/tsconfig.json
--- a/init.sh
+++ b/init.sh
@@ -0,0 +1,4 @@
+#!/usr/bin/sh
+printf "POSTGRES_USER=\nPOSTGRES_PASSWORD=\nPOSTGRES_DB=\n# Docker inner port container\nPOSTGRES_PORT=5432\nBACKEND_PORT=3000\nFRONTEND_PORT=3000\n" > .env
+ln $(pwd)/.env $(pwd)/backend
+ln $(pwd)/.env $(pwd)/frontend
--- a/latosa-frontend/app/history/[slug]/page.tsx
+++ b/latosa-frontend/app/history/[slug]/page.tsx
@@ -1,28 +0,0 @@
-"use server"
-
-import { BlogInterface, posts } from "@/components/blog";
-import BlogItem, { BlogItemParams } from "@/components/blogItem";
-
-export default async function HistoryDetails({
-	params,
-}: {
-	params: Promise<{ slug: string }>;
-}) {
-	const { slug } = await params;
-
-	const blog_item: BlogInterface = posts.find((value) => value.slug == slug) as BlogInterface
-
-	const blog_item_params: BlogItemParams = {
-		slug: slug,
-		title_style: "py-12 mb-3 text-pretty text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-3xl",	
-		subtitle_style: "py-12 mb-3 text-pretty text-xl font-semibold md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-3xl"
-,
-		p_style: "blog-paragraph mb-5 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg",
-		default_img: "https://shadcnblocks.com/images/block/placeholder-dark-1.svg",
-		blog_content: blog_item, 
-	} 
-
-	return (	
-		<BlogItem params={blog_item_params} />	
-	)
-}
--- a/latosa-frontend/components/blog.tsx
+++ b/latosa-frontend/components/blog.tsx
@@ -1,112 +0,0 @@
-import { ArrowRight } from "lucide-react";
-
-import { Button } from "@/components/ui/button";
-
-export interface BlogInterface {
-	id: string,
-	slug: string,
-	title: string,
-	content: string,
-	label: string,
-	author: string,
-	published: string,
-}
-
-export interface BlogSummaryInterface extends BlogInterface {
-	summary: string,
-	image: string, 
-	href: string
-}
-
-export const posts: BlogSummaryInterface[] = [
-	{
-		id: 'a1b2c3d4-e5f6-7g8h-9i0j-k1l2m3n4o5p6',
-		slug: 'tech-advancements-2025',
-		title: 'Tech Advancements in 2025',
-		content: 'The year 2025 promises groundbreaking technologies that will reshape industries. In this article, we explore the key advancements that could transform how we work, live, and communicate.',
-		label: 'Technology',
-		author: 'd3f5e6g7-h8i9j0k1-l2m3n4o5p6q7',
-		published: '2025-01-14',
-		summary: 'A look at the tech trends to expect in 2025 and beyond, from AI to quantum computing.',
-		image: 'https://via.placeholder.com/600x400?text=Tech+2025',
-		href: 'history/tech-advancements-2025'
-	},
-	{
-		id: 'f7g8h9i0-j1k2l3m4-n5o6p7q8r9s0t1u2v3',
-		slug: 'sustainable-fashion-2025',
-		title: 'Sustainable Fashion in 2025',
-		content: 'Sustainability is no longer a trend, but a movement within the fashion industry. This article discusses how eco-friendly practices are influencing fashion designs and consumer behavior in 2025.',
-		label: 'Fashion',
-		author: 'w4x5y6z7-a8b9c0d1-e2f3g4h5i6j7',
-		published: '2025-01-12',
-		summary: 'Exploring how sustainable fashion is evolving in 2025 with innovative materials and ethical brands.',
-		image: 'https://via.placeholder.com/600x400?text=Sustainable+Fashion',
-		href: 'history/sustainable-fashion-2025'
-	},
-	{
-		id: 'v1w2x3y4-z5a6b7c8-d9e0f1g2h3i4j5k6l7',
-		slug: 'mental-health-awareness-2025',
-		title: 'Mental Health Awareness in 2025',
-		content: 'As mental health awareness continues to grow, 2025 brings new challenges and opportunities to address psychological well-being. This article focuses on emerging trends in mental health support and public perception.',
-		label: 'Health',
-		author: 'm8n9o0p1-q2r3s4t5-u6v7w8x9y0z1a2b3',
-		published: '2025-01-10',
-		summary: 'Highlighting the importance of mental health awareness in 2025, focusing on new treatments and societal changes.',
-		image: 'https://via.placeholder.com/600x400?text=Mental+Health+2025',
-		href: '/history/mental-health-awareness-2025'
-	}
-];
-
-const Blog = () => {
-	return (
-		<section className="self-center lg:md:py-24 sm:py-12">
-			<div className="container flex flex-col items-center gap-16 lg:px-16">
-				<div className="text-center">
-					<h2 className="mb-3 text-pretty text-3xl font-semibold md:mb-4 md:text-4xl lg:mb-6 lg:max-w-3xl lg:text-5xl">
-						En savoir plus sur ce sport
-					</h2>
-					<p className="mb-8 text-muted-foreground md:text-base lg:max-w-2xl lg:text-lg">
-						Lorem ipsum dolor sit amet consectetur adipisicing elit. Elig
-						doloremque mollitia fugiat omnis! Porro facilis quo animi
-						consequatur. Explicabo.
-					</p>
-					<Button variant="link" className="w-full sm:w-auto">
-						Explore all posts
-						<ArrowRight className="ml-2 size-4" />
-					</Button>
-				</div>
-				<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3 lg:gap-8">
-					{posts.map((post) => (
-						<a
-							key={post.id}
-							href={post.href}
-							className="flex flex-col overflow-clip rounded-xl border border-border"
-						>
-							<div>
-								<img
-									src={post.image}
-									alt={post.title}
-									className="aspect-[16/9] h-full w-full object-cover object-center"
-								/>
-							</div>
-							<div className="px-6 py-8 md:px-8 md:py-10 lg:px-10 lg:py-12">
-								<h3 className="mb-3 text-lg font-semibold md:mb-4 md:text-xl lg:mb-6">
-									{post.title}
-								</h3>
-								<p className="mb-3 text-muted-foreground md:mb-4 lg:mb-6">
-									{post.summary}
-								</p>
-								<p className="flex items-center hover:underline">
-									Read more
-									<ArrowRight className="ml-2 size-4" />
-								</p>
-							</div>
-						</a>
-					))}
-				</div>
-			</div>
-		</section>
-	);
-};
-
-export default Blog;
--- a/latosa-frontend/components/ui/carousel.tsx
+++ b/latosa-frontend/components/ui/carousel.tsx
@@ -1,262 +0,0 @@
-"use client"
-
-import * as React from "react"
-import useEmblaCarousel, {
-  type UseEmblaCarouselType,
-} from "embla-carousel-react"
-import { ArrowLeft, ArrowRight } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-
-type CarouselApi = UseEmblaCarouselType[1]
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
-type CarouselOptions = UseCarouselParameters[0]
-type CarouselPlugin = UseCarouselParameters[1]
-
-type CarouselProps = {
-  opts?: CarouselOptions
-  plugins?: CarouselPlugin
-  orientation?: "horizontal" | "vertical"
-  setApi?: (api: CarouselApi) => void
-}
-
-type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
-  api: ReturnType<typeof useEmblaCarousel>[1]
-  scrollPrev: () => void
-  scrollNext: () => void
-  canScrollPrev: boolean
-  canScrollNext: boolean
-} & CarouselProps
-
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
-
-function useCarousel() {
-  const context = React.useContext(CarouselContext)
-
-  if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
-  }
-
-  return context
-}
-
-const Carousel = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
-  (
-    {
-      orientation = "horizontal",
-      opts,
-      setApi,
-      plugins,
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const [carouselRef, api] = useEmblaCarousel(
-      {
-        ...opts,
-        axis: orientation === "horizontal" ? "x" : "y",
-      },
-      plugins
-    )
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
-    const [canScrollNext, setCanScrollNext] = React.useState(false)
-
-    const onSelect = React.useCallback((api: CarouselApi) => {
-      if (!api) {
-        return
-      }
-
-      setCanScrollPrev(api.canScrollPrev())
-      setCanScrollNext(api.canScrollNext())
-    }, [])
-
-    const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev()
-    }, [api])
-
-    const scrollNext = React.useCallback(() => {
-      api?.scrollNext()
-    }, [api])
-
-    const handleKeyDown = React.useCallback(
-      (event: React.KeyboardEvent<HTMLDivElement>) => {
-        if (event.key === "ArrowLeft") {
-          event.preventDefault()
-          scrollPrev()
-        } else if (event.key === "ArrowRight") {
-          event.preventDefault()
-          scrollNext()
-        }
-      },
-      [scrollPrev, scrollNext]
-    )
-
-    React.useEffect(() => {
-      if (!api || !setApi) {
-        return
-      }
-
-      setApi(api)
-    }, [api, setApi])
-
-    React.useEffect(() => {
-      if (!api) {
-        return
-      }
-
-      onSelect(api)
-      api.on("reInit", onSelect)
-      api.on("select", onSelect)
-
-      return () => {
-        api?.off("select", onSelect)
-      }
-    }, [api, onSelect])
-
-    return (
-      <CarouselContext.Provider
-        value={{
-          carouselRef,
-          api: api,
-          opts,
-          orientation:
-            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-          scrollPrev,
-          scrollNext,
-          canScrollPrev,
-          canScrollNext,
-        }}
-      >
-        <div
-          ref={ref}
-          onKeyDownCapture={handleKeyDown}
-          className={cn("relative", className)}
-          role="region"
-          aria-roledescription="carousel"
-          {...props}
-        >
-          {children}
-        </div>
-      </CarouselContext.Provider>
-    )
-  }
-)
-Carousel.displayName = "Carousel"
-
-const CarouselContent = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel()
-
-  return (
-    <div ref={carouselRef} className="overflow-hidden">
-      <div
-        ref={ref}
-        className={cn(
-          "flex",
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
-          className
-        )}
-        {...props}
-      />
-    </div>
-  )
-})
-CarouselContent.displayName = "CarouselContent"
-
-const CarouselItem = React.forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel()
-
-  return (
-    <div
-      ref={ref}
-      role="group"
-      aria-roledescription="slide"
-      className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
-        className
-      )}
-      {...props}
-    />
-  )
-})
-CarouselItem.displayName = "CarouselItem"
-
-const CarouselPrevious = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
-
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute  h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-left-12 top-1/2 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollPrev}
-      onClick={scrollPrev}
-      {...props}
-    >
-      <ArrowLeft className="h-4 w-4" />
-      <span className="sr-only">Previous slide</span>
-    </Button>
-  )
-})
-CarouselPrevious.displayName = "CarouselPrevious"
-
-const CarouselNext = React.forwardRef<
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
-
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-right-12 top-1/2 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRight className="h-4 w-4" />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  )
-})
-CarouselNext.displayName = "CarouselNext"
-
-export {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-}