Added CSRF & YouTube and dark mode

frontend/app/(main)/page.tsx

@@ -4,8 +4,16 @@ import Features, { FeatureItem } from "@/components/features";
 import Gallery from "@/components/gallery";
 import Hero from "@/components/hero";
 import Testimonial from "@/components/testimonial";
+import { CarouselItem } from "@/components/ui/carousel";
+import { IYoutube } from "@/interfaces/youtube";
 
 export default async function Home() {
+	let videos: IYoutube | null = null;
+	if (process.env.YOUTUBE_API_KEY) {
+		const query = `https://www.googleapis.com/youtube/v3/search?key=${process.env.YOUTUBE_API_KEY}&channelId=UCzuFLl5I0WxSMqbeMaiq_FQ&part=snippet,id&order=date&maxResults=50`;
+		const res = await fetch(query);
+		videos = await res.json();
+	}
 	return (
 		<main>
 			<Hero />
@@ -20,10 +28,10 @@ export default async function Home() {
 						position="left"
 						image="https://shadcnblocks.com/images/block/placeholder-2.svg"
 					>
-						<ol className="list-decimal text-justify flex flex-col gap-4">
+						<ol className="flex list-decimal flex-col gap-4 text-justify">
 							<li>
 								Un Système Centré sur les Concepts{" "}
-								<ul className="list-disc list-inside">
+								<ul className="list-inside list-disc">
 									<li>
 										Étude et application des meilleurs
 										concepts et stratégies issus de
@@ -37,7 +45,7 @@ export default async function Home() {
 							</li>
 							<li>
 								Éducation au Mouvement et à l’Efficacité
-								<ul className="list-disc list-inside">
+								<ul className="list-inside list-disc">
 									<li>
 										Plus qu’un enchaînement de techniques :
 										une véritable éducation aux mouvements
@@ -56,12 +64,12 @@ export default async function Home() {
 						position="right"
 						image="https://shadcnblocks.com/images/block/placeholder-2.svg"
 					>
-						<ol className="list-none text-justify flex flex-col gap-4">
+						<ol className="flex list-none flex-col gap-4 text-justify">
 							<li>
 								<span className="font-bold">
 									Les Premières Étapes
 								</span>
-								<ul className="list-disc list-inside">
+								<ul className="list-inside list-disc">
 									<li>
 										Initialement centré sur les techniques
 										et mouvements, le système s’est montré
@@ -78,10 +86,10 @@ export default async function Home() {
 								<span className="font-bold">
 									La Découverte des Concepts Clés
 								</span>{" "}
-								<ul className="list-disc list-inside">
+								<ul className="list-inside list-disc">
 									<li>
 										Rôle central des concepts de combat :
-										<ul className="list-disc list-inside pl-4">
+										<ul className="list-inside list-disc pl-4">
 											<li>Puissance dans les frappes.</li>
 											<li>Blocage ferme.</li>
 											<li>Équilibre et attitude.</li>
@@ -103,7 +111,7 @@ export default async function Home() {
 					>
 						Latosa Escrima Concepts repose sur cinq concepts
 						fondamentaux :
-						<ul className="list-disc list-inside">
+						<ul className="list-inside list-disc">
 							<li>Équilibre</li>
 							<li>Vitesse (Timing et Distance)</li>
 							<li>Puissance</li>
@@ -112,8 +120,35 @@ export default async function Home() {
 						</ul>
 					</FeatureItem>
 				</Features>
-				<Gallery />
-				<Gallery />
+				<Gallery
+					tagLine="Tag Line"
+					cta="Book a demo"
+					ctaHref="#"
+					title="Gallery"
+				/>
+				{videos && (
+					<Gallery
+						tagLine=""
+						cta="Accéder à la chaîne"
+						ctaHref="https://youtube.com/@WingTsunPicardie"
+						title="Vidéos YouTube"
+					>
+						{videos.items.map((video) => {
+							return (
+								<CarouselItem
+									key={video.id.videoId}
+									className="pl-[20px] md:max-w-[452px]"
+								>
+									<iframe
+										width="424"
+										height="238"
+										src={`https://www.youtube.com/embed/${video.id.videoId}`}
+									></iframe>
+								</CarouselItem>
+							);
+						})}
+					</Gallery>
+				)}
 				<Testimonial />
 			</div>
 		</main>