Added theme switcher + optimized youtube loading + about changes

frontend/app/(main)/about/page.tsx

@@ -23,22 +23,18 @@ export default async function About() {
 	);
 	return (
 		<>
-			<div className="px-4 py-8 lg:px-24 lg:py-32">
-				<div className="
-					flex flex-col lg:flex-row gap-4 
-					justify-center w-full pb-24">
-					<div className="
-						flex flex-col gap-4 w-full 
-						lg:w-3/5 justify-center">
-						<Card className="py-5 sm:mx-10 max-h-fit">
+			<div className="">
+				<div className="flex flex-col lg:flex-row gap-4 justify-between w-full p-12">
+					<div className="flex flex-col lg:w-1/2 xl:w-full gap-4 w-full justify-center">
+						<Card className="py-5 max-h-fit">
 							<CardHeader className="text-center p-2">
-								<CardTitle className="m-5">
-									Entraîneur depuis 60 ans
+								<CardTitle className="text-5xl">
+									Nicolas GORUK
 								</CardTitle>
-								<span className="font-bold text-4xl 
-									sm:text-4xl">
-									Robert Louis Jean Jacke
-								</span>
+								<CardDescription>
+									Président l'association française de Latosa
+									Escrima
+								</CardDescription>
 							</CardHeader>
 							<CardContent className="px-8 sm:px-10 py-14">
 								<div className="flex flex-col gap-4 justify-center">
@@ -47,74 +43,30 @@ export default async function About() {
 									</h2>
 									<p className="blog-paragraph text-muted-foreground">
 										Lorem ipsum dolor sit amet consectetur
-										adipisicing elit. Debitis accusamus illum,
-										nam nemo quod delectus velit repellat odio
-										dolorum sapiente soluta, aliquam atque
-										praesentium ea placeat ad, neque eveniet
-										adipisci?
+										adipisicing elit. Debitis accusamus
+										illum, nam nemo quod delectus velit
+										repellat odio dolorum sapiente soluta,
+										aliquam atque praesentium ea placeat ad,
+										neque eveniet adipisci?
 									</p>
 									<h2 className="text-pretty text-center text-xl font-semibold md:mb-0.5 lg:mb-1 lg:max-w-3xl sm:text-3xl">
 										Lorem ipsum, dolor sit amet
 									</h2>
 									<p className="blog-paragraph text-muted-foreground">
 										Lorem ipsum dolor sit amet consectetur
-										adipisicing elit. Debitis accusamus illum,
-										nam nemo quod delectus velit repellat odio
-										dolorum sapiente soluta, aliquam atque
-										praesentium ea placeat ad, neque eveniet
-										adipisci?
+										adipisicing elit. Debitis accusamus
+										illum, nam nemo quod delectus velit
+										repellat odio dolorum sapiente soluta,
+										aliquam atque praesentium ea placeat ad,
+										neque eveniet adipisci?
 									</p>
 								</div>
 							</CardContent>
 						</Card>
-						<div className="max-w-full my-8 text-center lg:hidden" >
-							<h2 className="text-pretty text-xl font-semibold mb-4 sm:mb-8 sm:text-3xl lg:mb-1 lg:max-w-3xl">
-								Mes associés
-							</h2>
-							<div className="relative flex flex-col lg:flex-row items-center justify-center overflow-y-visible gap-6 w-full">
-								<Avatar className="flex flex-row gap-9 w-20 h-20 m-1">
-									<AvatarImage className="rounded-full z-50 ld:md:z-10" src="https://github.com/shadcn.png" alt="@shadcn" />
-
-									<div className="
-										md:absolute border self-center rounded-xl font-bold 
-										text-center 
-										py-4 px-8 lg:md:px-5 w-fit opacity-100 lg:md:top-20 
-										md:left-[calc(50%-11em)] translate-x-[-50%] lg:left-[calc(50% -4em)] 
-										sm:translate-x-[100%] lg:translate-x-[50%] z-40 lg:md:z-50">
-										Richard Vagneur
-									</div>
-
-									<AvatarFallback>CN</AvatarFallback>
-								</Avatar>
-								<Avatar className="flex flex-row translate-x-[-8em] gap-9 w-20 h-20 m-1">
-									<AvatarImage className="rounded-full z-50 ld:md:z-10" src="https://github.com/shadcn.png" alt="@shadcn" />
-									<div className="
-										md:absolute border rounded-xl font-bold text-center 
-										py-4 px-8 lg:md:px-5 w-fit opacity-100 lg:md:top-20 
-										md:left-[calc(50%)] translate-x-[-50%] z-40 lg:md:z-50
-										sm:translate-x-[-50%] lg:translate-x-[-50%] self-center">
-										Robert Lewis
-									</div>
-									<AvatarFallback>CN</AvatarFallback>
-								</Avatar>
-								<Avatar className="flex flex-row gap-9 w-20 h-20 m-1">
-									<AvatarImage className="rounded-full z-50 ld:md:z-10" src="https://github.com/shadcn.png" alt="@shadcn" />
-									<div className="
-										md:absolute border rounded-xl font-bold text-center 
-										py-4 px-8 lg:md:px-5 w-fit opacity-100 lg:md:top-20 
-										md:left-[calc(50%-11em)] translate-x-[-50%] z-40 
-										lg:md:z-50 sm:translate-x-[125%] sm:self-center
-										lg:translate-x-[-100%]">
-										Marria Caré
-									</div>
-									<AvatarFallback>CN</AvatarFallback>
-								</Avatar>
-							</div>
-						</div>
 					</div>
-					<div className="w-full lg:w-2/5 sm:self-center sm:w-3/5 h-fit border rounded">
+					<div className="w-full lg:w-1/2 border rounded">
 						<img
-							className="w-full"
+							className="w-full aspect-square"
 							src="https://shadcnblocks.com/images/block/placeholder-dark-1.svg"
 							alt="president profile image"
 						/>
@@ -129,7 +81,8 @@ export default async function About() {
 						l'état" possible.
 					</p>
 					<p className="mt-1 text-muted-foreground">
-						equipement (gants, casque) pris en compte. Prévoir une tenue sportive adaptée.
+						equipement (gants, casque) pris en compte. Prévoir une
+						tenue sportive adaptée.
 					</p>
 				</div>
 				<div className="mt-12 flex flex-col sm:flex-row px-12 justify-center gap-6 lg:items-center">

frontend/app/(main)/page.tsx

@@ -5,6 +5,7 @@ import Gallery from "@/components/gallery";
 import Hero from "@/components/hero";
 import Testimonial from "@/components/testimonial";
 import { CarouselItem } from "@/components/ui/carousel";
+import YouTubeEmbed from "@/components/youtube-embed";
 import { IYoutube } from "@/interfaces/youtube";
 
 export default async function Home() {
@@ -17,6 +18,15 @@ export default async function Home() {
 	return (
 		<main>
 			<Hero />
+			<div className="p-12">
+				<YouTubeEmbed
+					loadIframe
+					width="full"
+					height="full"
+					video="cbxWxPDXgNM"
+					autoPlay={false}
+				/>
+			</div>
 			<div className="flex flex-col p-12">
 				<Features
 					title="DÉVELOPPEMENT DU SYSTÈME"
@@ -139,11 +149,7 @@ export default async function Home() {
 									key={video.id.videoId}
 									className="pl-[20px] md:max-w-[452px]"
 								>
-									<iframe
-										width="424"
-										height="238"
-										src={`https://www.youtube.com/embed/${video.id.videoId}`}
-									></iframe>
+									<YouTubeEmbed video={video} />
 								</CarouselItem>
 							);
 						})}

frontend/app/layout.tsx

@@ -36,7 +36,7 @@ export default function RootLayout({
 	children: React.ReactNode;
 }>) {
 	return (
-		<html lang="fr">
+		<html lang="fr" suppressHydrationWarning>
 			<body
 				className={`${geistSans.variable} ${geistMono.variable} antialiased`}
 			>