add component for associationheader, misc association design adjustments

web/src/app/foreninger/[slug]/page.tsx

@@ -1,11 +1,8 @@
 import { getClient } from "@/app/client";
-import { Breadcrumb } from "@/components/general/Breadcrumb";
-import Icon from "@/components/general/Icon";
-import { Image } from "@/components/general/Image";
+import { AssociationHeader } from "@/components/associations/AssociationHeader";
 import { PageContent } from "@/components/general/PageContent";
 import { graphql } from "@/gql";
 import { AssociationFragment } from "@/gql/graphql";
-import Link from "next/link";
 import { notFound } from "next/navigation";
 
 export async function generateStaticParams() {
@@ -54,25 +51,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
 
   return (
     <main className="site-main" id="main">
-      <Breadcrumb link="/foreninger" text={association.associationType ? association.associationType : "Foreninger"} />
-      <section className="page-header">
-        <h1>{association.title}</h1>
-        {association.websiteUrl && (
-          <a className="button" href={association.websiteUrl} target="_blank">
-            <span>Besøk nettside</span>
-            <Icon type="externalLink" />
-          </a>
-        )}
-        {association.logo && (
-          <Image
-            src={association.logo.url}
-            alt={`Logoen til ${association.title}`}
-            width={association.logo.width}
-            height={association.logo.height}
-            sizes="100vw"
-          />
-        )}
-      </section>
+      <AssociationHeader association={association} />
       {association.lead && (
           <div
             className="lead"