Added logo modified site-name

frontend/components/hero.tsx

@@ -2,8 +2,9 @@ import { ExternalLink } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
-import { API_URL } from "@/lib/constants";
+import { API_URL, SITE_NAME } from "@/lib/constants";
 import Image from "next/image";
+import Logo from "./logo";
 
 const Hero: React.FC<{ background: string }> = ({ background }) => {
 	return (
@@ -22,17 +23,13 @@ const Hero: React.FC<{ background: string }> = ({ background }) => {
 				<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
-							src="https://shadcnblocks.com/images/block/block-1.svg"
-							alt="logo"
-							className="h-16"
-						/>
+						<Logo className="min-w-16 min-h-16 max-h-44 max-w-44 text-white" />
 						<div>
 							<h1 className="mb-6 text-pretty text-2xl font-bold text-primary lg:text-5xl font-times">
 								Trouvez votre <em>équilibre</em> avec
 								<br />
 								<span className="font-extrabold text-3xl lg:text-6xl">
-									Latosa Escrima
+									{SITE_NAME}
 								</span>
 							</h1>
 							<p className="text-muted-foreground lg:text-xl">
@@ -44,8 +41,13 @@ const Hero: React.FC<{ background: string }> = ({ background }) => {
 								<Link href="/contact">Nous contacter</Link>
 							</Button>
 							<Button variant="outline">
-								À propos
-								<ExternalLink className="ml-2 h-4" />
+								<Link
+									href="/about"
+									className="flex items-center"
+								>
+									À propos
+									<ExternalLink className="ml-2 h-4" />
+								</Link>
 							</Button>
 						</div>
 					</div>