Member page

frontend/components/hero.tsx

@@ -2,12 +2,25 @@ import { ExternalLink } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
+import { API_URL } from "@/lib/constants";
+import Image from "next/image";
 
 const Hero = () => {
+	const background = `${API_URL}/media/591ab183-c72d-46ff-905c-ec04fed1bb34/file`;
 	return (
 		<section className="relative flex h-[calc(100vh-68px)] items-center justify-center overflow-hidden py-32">
 			<div className="">
-				<div className="magicpattern absolute inset-x-0 top-0 -z-10 flex h-full w-full items-center justify-center bg-blue-50 opacity-100" />
+				<Image
+					src={background}
+					layout="fill"
+					objectFit="cover"
+					priority
+					alt="Hero image"
+					unoptimized
+					className="grayscale"
+				/>
+				{/* Gradient and Blur Overlay */}
+				<div className="absolute inset-0 bg-gradient-to-r from-transparent via-transparent to-transparent bg-opacity-30 backdrop-blur-sm"></div>
 				<div className="mx-auto flex max-w-5xl flex-col items-center">
 					<div className="z-10 flex flex-col items-center gap-6 text-center">
 						<img
@@ -17,9 +30,9 @@ const Hero = () => {
 						/>
 						<div>
 							<h1 className="mb-6 text-pretty text-2xl font-bold text-primary lg:text-5xl">
-								Trouvez votre équilibre
+								Trouvez votre équilibre avec
 								<br />
-								avec Latosa-Escrima
+								Latosa-Escrima
 							</h1>
 							<p className="text-muted-foreground lg:text-xl">
 								Une évolution des arts martiaux Philippins