Shortcodes

frontend/components/hero.tsx

@@ -5,19 +5,18 @@ 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`;
+const Hero: React.FC<{ background: string }> = ({ background }) => {
 	return (
 		<section className="relative flex h-[calc(100vh-68px)] items-center justify-center overflow-hidden py-32">
 			<div className="">
 				<Image
 					src={background}
 					layout="fill"
-					objectFit="cover"
+					// objectFit="cover"
 					priority
 					alt="Hero image"
 					unoptimized
-					className="grayscale"
+					className="grayscale object-cover "
 				/>
 				{/* 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>
@@ -29,10 +28,12 @@ const Hero = () => {
 							className="h-16"
 						/>
 						<div>
-							<h1 className="mb-6 text-pretty text-2xl font-bold text-primary lg:text-5xl">
-								Trouvez votre équilibre avec
+							<h1 className="mb-6 text-pretty text-2xl font-bold text-primary lg:text-5xl font-times">
+								Trouvez votre <em>équilibre</em> avec
 								<br />
-								Latosa-Escrima
+								<span className="font-extrabold text-3xl lg:text-6xl">
+									Latosa Escrima
+								</span>
 							</h1>
 							<p className="text-muted-foreground lg:text-xl">
 								Une évolution des arts martiaux Philippins