Add header to team and add optimized hero

src/components/navbar/Hero.tsx

@@ -13,7 +13,7 @@ export default function Hero() {
 				<img
 					id="hero-image"
 					className="clip-hero w-full max-w-full h-full max-h-full"
-					src="/assets/images/hero.jpg"
+					src="/assets/images/hero.webp"
 					alt="hero"
 				/>
 				<svg

src/pages/csapatunk/index.tsx

@@ -17,6 +17,11 @@ export default function Team() {
 	return (
 		<Layout>
 			<Hero />
+			<div className="team-header-bg relative flex items-center justify-center h-24">
+				<h2 className="z-10 text-center text-white text-2xl font-semibold">
+					Tagjaink
+				</h2>
+			</div>
 			<section className="container grid gap-6 grid-cols-1 justify-items-center mx-auto my-8 sm:grid-cols-2 lg:grid-cols-3">
 				{Array(7)
 					// eslint-disable-next-line etc/no-assign-mutated-array

src/styles/components.css

@@ -20,6 +20,13 @@ code {
 	background-position: left top;
 }
 
+.team-header-bg {
+	background-image: url("../../public/assets/images/hero.webp");
+	background-repeat: repeat;
+	background-size: cover;
+	background-position: center 70%;
+}
+
 body {
 	@apply background-figures;
 }

src/utils/carouselFormatters.ts

@@ -7,24 +7,24 @@ const carouselFormatters = {
 		views,
 	}: {
 		currentIndex: number;
-    views: { [key: string]: any }[];
+		views: Array<{ [key: string]: any }>;
 	}) => `Mutasd a(z) ${currentIndex + 2}. képet a(z) ${views.length} közül`,
 	getPrevLabel: ({
 		currentIndex,
 		views,
 	}: {
 		currentIndex: number;
-    views: { [key: string]: any }[];
+		views: Array<{ [key: string]: any }>;
 	}) => `Mutasd a(z) ${currentIndex}. képet a(z) ${views.length} közül`,
 
-  getNextTitle: () => 'Következő (jobbra nyíl)',
-  getPrevTitle: () => 'Előző (balra nyíl)',
+	getNextTitle: () => "Következő (jobbra nyíl)",
+	getPrevTitle: () => "Előző (balra nyíl)",
 
-  getCloseLabel: () => 'Bezárás (esc)',
+	getCloseLabel: () => "Bezárás (esc)",
 	getFullscreenLabel: ({ isFullscreen }: { isFullscreen: boolean }) =>
 		isFullscreen
-      ? 'Kilépés a teljes képernyős nézetből (f)'
-      : 'Teljes képernyőre váltás (f)',
+			? "Kilépés a teljes képernyős nézetből (f)"
+			: "Teljes képernyőre váltás (f)",
 };
 
 export default carouselFormatters;