Updated so that the rules and class text can be updated through the admin page

app/components/Header.tsx

@@ -1,15 +1,18 @@
 // app/components/Header.tsx
 import Link from 'next/link';
+import Image from 'next/image';
+import logo from '../../public/images/logo.svg';
 
 export default function Header() {
     return (
         <header className="bg-black flex justify-center sticky top-0 z-40 shadow-lg">
-            <div className="w-85 mx-auto text-center">
+            <div className="w-fit mx-auto text-center">
                 <Link href="/" className="inline-block group">
-                    <img
-                        src="/images/logo.svg"
+                    <Image
+                        src={logo}
+                        loading="eager"
                         alt="Lerbergets Volleybollsällskap"
-                        className="max-h-32 min-h-16 my-4 md:max-h-52 md:min-h-24 md:my-6 mx-auto block transition-all duration-500 ease-out group-hover:scale-105 group-active:scale-95"
+                        className="max-h-24 min-h-16 my-4 md:max-h-32 md:min-h-24 md:my-6 mx-auto block transition-all duration-500 ease-out group-hover:scale-105 group-active:scale-95"
                     />
                 </Link>
             </div>

app/components/HomeClientContent.tsx

@@ -10,6 +10,9 @@ import MemberModal from './Modals/Member';
 import SubscribeModal from './Modals/Subscribe';
 import { FaFacebookSquare, FaInstagram } from "react-icons/fa";
 import { IoIosMail } from "react-icons/io";
+import Image from 'next/image';
+import player from "../../public/images/player.svg";
+import laget from "../../public/images/laget.se.svg";
 
 export default function HomeClientContent() {
     const [activeModal, setActiveModal] = useState<'member' | 'subscribe' | null>(null);
@@ -36,7 +39,7 @@ export default function HomeClientContent() {
                         </div>
                     </div>
                     <div className="hidden md:flex md:relative w-64 md:w-75 player-animation">
-                        <img src="/images/player.svg" alt="Spelare" className="w-full h-auto" />
+                        <Image src={player} alt="Spelare" className="w-full h-auto" />
                     </div>
                 </div>
             </section>
@@ -73,7 +76,7 @@ export default function HomeClientContent() {
                         </SocialIcon>
 
                         <SocialIcon title="Laget.se" href="https://www.laget.se/LVS">
-                            <img src="/images/laget.se.svg" alt="Laget.se" className="h-18 w-18" />
+                            <Image src={laget} alt="Laget.se" className="h-18 w-18" />
                         </SocialIcon>
                     </div>
 

app/components/Modals/Member.tsx

@@ -3,11 +3,13 @@
 import { ModalProps } from "@/app/types";
 import Modal from "./Modal";
 import ModalAction from "./ModalAction";
+import Image from 'next/image';
+import logo from "../../../public/images/logo-black.svg";
 
 export default function MemberModal({ onClose }: ModalProps) {
     return (
         <Modal onClose={onClose}>
-            <img src="/images/logo-black.svg" alt="Logo" className="h-25" />
+            <Image src={logo} alt="Logo" className="h-25 max-w-fit" />
             <h2 className="text-[#406185] my-2.5 text-2xl font-bold uppercase">Registrera dig</h2>
             <p className="text-[#406185] my-2.5">Trycka på knappen nedan för att starta registreringen. Du kommer att skickas till laget.se</p>