feature: pages

_template.scss

@@ -2,7 +2,7 @@ $base-color: #426156;
 $shade1: #728F8D;
 $shade2: #CBD6D5;
 $shade3: #E3E9E8;
-$contrast-color: #9785A9;
+$contrast-color: #7D1224;
-$contrast-shade1: #E0DAE5;
+$contrast-shade1: #C14953;
 $text-color: #000000;
 $border-radius: 13px;

src/app/(home)/datenschutz/page.tsx

@@ -0,0 +1,116 @@
+import { PageHeader } from '@/compositions/PageHeader/PageHeader'
+import { Container } from '@/components/Container/Container'
+import { Section } from '@/components/Section/Section'
+import { P } from '@/components/Text/Paragraph'
+
+export default function CookiePage() {
+  return (
+    <>
+      <PageHeader
+        title={'Datenschutz'}
+        description={'damit Sie sich beim Besuch unserer Webseiten sicher und wohl fühlen, möchten wir Sie nachfolgend über den Umgang mit Ihren Daten informieren.'}
+      />
+
+      <Container>
+        <h3>Verantwortlicher</h3>
+        <P width="1/2">Verantwortlicher für die Verarbeitung von personenbezogenen Daten, die bei dem Besuch dieser Webseite erfasst
+          werden, ist die Katholische Kirchengemeinde Pfarrei Heilige Drei Könige Nord-Neukölln, Briesestraße 17, 12053
+          Berlin-Neukölln (im Folgenden „Pfarrei“ oder „wir“ benannt).</P>
+
+        <h3>Nutzungsdaten</h3>
+        <P width="1/2">Wenn Sie unsere Webseiten besuchen, speichern wir auf Grundlage von § 6 Absatz 1 Buchstabe g Gesetz über den
+          Kirchlichen Datenschutz temporär sogenannte Nutzungsdaten. Die Nutzungsdaten verwenden wir zu statistischen
+          Zwecken, um die Qualität unserer Webseiten zu verbessern sowie zu Sicherheitszwecken. Wir verwenden diese
+          Informationen außerdem, um den Aufruf unserer Webseite zu ermöglichen, zur Kontrolle und Administration
+          unserer Systeme sowie zur Verbesserung der Gestaltung der Webseiten. Diese von uns verfolgten Zwecke stellen
+          zugleich das berechtigte Interesse im Sinne von § 6 Absatz 1 Buchstabe g Gesetz über den Kirchlichen
+          Datenschutz dar.</P>
+
+
+        <P width="1/2">Der Datensatz besteht aus:</P>
+        <ul className="wp-block-list">
+          <li>der Seite, von der aus die Datei angefordert wurde</li>
+          <li>dem Namen der Datei</li>
+          <li>dem Datum und der Uhrzeit der Abfrage</li>
+          <li>der übertragenen Datenmenge</li>
+          <li>dem Zugriffsstatus (Datei übertragen, Datei nicht gefunden)</li>
+          <li>der Beschreibung des Typs des verwendeten Webbrowsers</li>
+          <li>der IP-Adresse des anfragenden Rechners verkürzt um die letzten drei Stellen.</li>
+        </ul>
+
+        <h3>Cookies</h3>
+        <P width="1/2">Cookies sind kleine Dateien, die auf der Festplatte eines Besuchers abgelegt werden. Sie erlauben es,
+          Informationen über einen bestimmten Zeitraum vorzuhalten und den Rechner des Besuchers zu identifizieren. Zur
+          Steuerung Ihres Besuchs auf unserer Webseite sowie zur besseren Benutzerführung und individuellen
+          Leistungsdarstellung werden Session-Cookies verwendet. Dies stellt das berechtigte Interesse der Pfarrei dar
+          im Sinne der Rechtsgrundlage für die Datenverarbeitung § 6 Absatz 1 Buchstabe g Gesetz über den Kirchlichen
+          Datenschutz. Sie können Ihren Browser so einstellen, dass er Sie über die Platzierung von Cookies informiert.
+          So wird der Gebrauch von Cookies für Sie transparent.</P>
+
+
+        <h3>Bewerbung</h3>
+        <P width="1/2">Wir bieten Ihnen die Möglichkeit an, Ihre Bewerbungsunterlagen mittels elektronischer Post an uns zu senden.
+          Ihre dabei anfallenden Daten nutzen wir, um das Bewerbungsverfahren durchzuführen. Zugriff auf Ihre Daten
+          haben die für die Stellenbesetzung Verantwortlichen innerhalb der Pfarrei. Die Rechtsgrundlage der
+          Datenverarbeitung ist § 53 Gesetz über den Kirchlichen Datenschutz. Ihre Daten werden sechs Monate nach
+          Abschluss des Bewerbungsverfahrens gelöscht. Dies gilt dann nicht, wenn wir Sie um Ihre Einwilligung zur
+          längeren Aufbewahrung bitten. Sobald Sie uns Ihre Einwilligung erteilt haben, nutzen wir Ihre Daten, um Sie zu
+          einem späteren Zeitpunkt für ein vergleichbares Stellenangebot zu berücksichtigen.</P>
+
+
+        <h3>Kontaktaufnahme</h3>
+        <P width="1/2">Sie haben die Möglichkeit, mit uns mittels elektronischer Post sowie telefonisch in Kontakt zu treten. Ihre
+          dabei anfallenden Daten werden lediglich zur Beantwortung Ihrer Anfrage verarbeitet. Eine Weitergabe an Dritte
+          erfolgt nur, soweit dies für die Bearbeitung Ihres Anliegens erforderlich ist. Die Rechtsgrundlage für die
+          Nutzung Ihrer dabei anfallenden Daten ist § 6 Absatz 1 Buchstabe g Gesetz über den Kirchlichen Datenschutz.
+          Die Pfarrei hat ein berechtigtes Interesse daran, im Kontakt mit den Nutzern der Webseite zu sein und
+          gegebenenfalls gestellte Fragen beantworten oder Informationen versenden zu können.</P>
+
+
+        <h3>Dauer der Datenspeicherung</h3>
+        <P width="1/2">Ihre Daten speichern wir nur solange, wie diese für die Erbringung unserer Dienstleistungen erforderlich sind
+          und der Löschung keine Aufbewahrungsfristen entgegenstehen.</P>
+
+
+        <h3>Einsatz von Dienstleistern</h3>
+         <P width="1/2">Wir setzen zur Erbringung von Leistungen und zur Verarbeitung Ihrer Daten Dienstleister ein (so genannte
+          Auftragsverarbeitung). Die Dienstleister verarbeiten die Daten nach unserer Weisung und sind zur Einhaltung
+          der geltenden Datenschutzbestimmungen verpflichtet. Sämtliche Auftragsverarbeiter wurden sorgfältig ausgewählt
+          und erhalten nur in dem Umfang und für den benötigten Zeitraum Zugang zu Ihren Daten, der für die Erbringung
+          der Leistungen erforderlich ist.</P>
+
+
+        <h3>Ihre Rechte als Nutzer</h3>
+        <P width="1/2">Sie haben als Nutzer das Recht, Auskunft darüber zu verlangen, welche Daten über Sie bei uns gespeichert sind
+          und zu welchem Zweck diese Speicherung erfolgt. Darüber hinaus können Sie unrichtige Daten berichtigen oder
+          solche Daten löschen lassen, deren Speicherung unzulässig oder nicht mehr erforderlich ist. Sie haben das
+          Recht auf Datenübertragbarkeit. Außerdem haben Sie das Recht, sich bei der Datenschutzaufsicht über die
+          stattfindende Datenverarbeitung zu beschweren. Für uns ist der Diözesandatenschutzbeauftragte Matthias
+          Ullrich, Chausseestr. 1, 39218 Schönebeck zuständig.</P>
+
+
+        <h3>Datenschutzbeauftragter</h3>
+        <P width="1/2">Unser betrieblicher Datenschutzbeauftragter steht Ihnen gerne für Auskünfte oder Anregungen zum Thema
+          Datenschutz zur Verfügung:</P>
+        <P width="1/2">datenschutz nord GmbH<br />Niederlassung Berlin-Charlottenburg<br />Kurfürstendamm 212<br />10719 Berlin</P>
+        <P width="1/2">Sitz der Gesellschaft:</P>
+        <P width="1/2">datenschutz nord GmbH<br />Konsul-Smidt-Str. 88<br />28217 Bremen</P>
+        <P width="1/2">Web: <a href="https://www.datenschutz-nord.de" target="_blank"
+                   rel="noreferrer noopener">www.datenschutz-nord.de</a><br />E-Mail: <a
+          href="mailto:office@datenschutz-nord.de" target="_blank"
+          rel="noreferrer noopener">office@datenschutz-nord.de</a></P>
+        <P width="1/2">Den Diözesandatenschutzbeauftragten erreichen Sie wie folgt:</P>
+        <P width="1/2">Diözesandatenschutzbeauftragter der ostdeutschen Bistümer<br />Matthias Ullrich<br />Margaretenstraße 1<br />39218
+          Schönebeck</P>
+
+
+        <P width="1/2">Telefon: 03928 / 7287181<br />Web: <a href="https://www.datenschutzbeauftragter-ost.de" target="_blank"
+                                                 rel="noreferrer noopener">www.datenschutzbeauftragter-ost.de</a><br />E-Mail: <a
+          href="mailto:matthias.ullrich@datenschutzbeauftragter-ost.de" target="_blank"
+          rel="noreferrer noopener">matthias.ullrich@datenschutzbeauftragter-ost.de</a></P>
+      </Container>
+
+      <Section />
+    </>
+  )
+}

src/app/(home)/ich-bin-neu/page.tsx

@@ -0,0 +1,9 @@
+import { PageHeader } from '@/compositions/PageHeader/PageHeader'
+
+export default function Page() {
+  return (
+    <>
+      <PageHeader title={'Neu hier?'} description={''} />
+    </>
+  )
+}

src/app/(home)/impressum/page.tsx

@@ -0,0 +1,9 @@
+import { PageHeader } from '@/compositions/PageHeader/PageHeader'
+
+export default function Page() {
+  return (
+    <>
+      <PageHeader title={'Impressum'} description={''} />
+    </>
+  )
+}

src/app/(home)/kontakt/page.tsx

@@ -0,0 +1,12 @@
+import { PageHeader } from '@/compositions/PageHeader/PageHeader'
+
+export default function ContactPage() {
+  return (
+    <>
+      <PageHeader
+        title={"Kontakt"}
+        description={""}
+      />
+    </>
+  )
+}

src/app/(home)/mithelfen/page.tsx

@@ -0,0 +1,9 @@
+import { PageHeader } from '@/compositions/PageHeader/PageHeader'
+
+export default function Page() {
+  return (
+    <>
+      <PageHeader title={'Mithelfen'} description={''} />
+    </>
+  )
+}

src/app/(home)/schutzkonzept/page.tsx

@@ -0,0 +1,12 @@
+import { PageHeader } from '@/compositions/PageHeader/PageHeader'
+
+export default function SafetyPage() {
+  return (
+    <>
+      <PageHeader
+        title='Institutionelles Schutzkonzept'
+        description={"Die Prävention von Gewalt, insbesondere sexualisierter Gewalt, an Kindern, Jugendlichen und schutz- und hilfebedürftigen Erwachsenen ist integraler Bestandteil der Aus- und Fortbildung aller beruflich und ehrenamtlich Mitarbeitenden in der Kinder- und Jugendpastoral unserer Pfarrei Hl. Drei Könige. "}
+      />
+    </>
+  )
+}

src/app/gemeinde/[slug]/page.tsx

@@ -29,7 +29,6 @@ export default async function ParishPage ({ params }: { params: Promise<{slug: s
   const events = await fetchEvents(id)
   const worship = await fetchWorship(churches.map(c => typeof c === "string" ? c : c.id))
   const announcement = await fetchLastAnnouncement(id);
-  console.log(gallery)
   return (
     <Parish
       title={name}

src/app/layout-comment.ts

@@ -0,0 +1,54 @@
+export const comment = `
+<!--
+                           |~~~~~~~|
+                           |       |
+                         |~~~~~~~~~~~|
+                         |  I N R I  |
+                         |___________|
+                           |       |
+|~.\\\\\\_\\~~~~~~~~~~~~~~xx~~~         ~~~~~~~~~~~~~~~~~~~~~/_//;~|
+|  \\  o \\_         ,XXXXX),                         _..-~ o /  |
+|    ~~\\  ~-.     XXXXX\`)))),                 _.--~~   .-~~~   |
+ ~~~~~~~\`\\   ~\\~~~XXX' _/ ';))     |~~~~~~..-~     _.-~ ~~~~~~~
+          \`\\   ~~--\`_\\~\\, ;;;\\)__.---.~~~      _.-~
+            ~-.       \`:;;/;; \\          _..-~~
+               ~-._      \`''        /-~-~
+                   \`\\              /  /
+                     |         ,   | |
+                      |  '        /  |
+                       \\/;          |
+                        ;;          |
+                        \`;   .       |
+                        |~~~-----.....|
+                       | \\             \\
+                      | /\\~~--...__    |
+                      (|  \`\\       __-\\|
+                      ||    \\_   /~    |
+                      |)     \\~-'      |
+                       |      | \\      '
+                       |      |  \\    :
+                        \\     |  |    |
+                         |    )  (    )
+                          \\  /;  /\\  |
+                          |    |/   |
+                          |    |   |
+                           \\  .'  ||
+                           |  |  | |
+                           (  | |  |
+                           |   \\ \\ |
+                           || o \`.)|
+                           |\`\\\\\\\\) |
+                           |       |
+                           |       |
+                           |       |
+                           
+                           
+         HEY DU!
+         Yes, YOU! You're reading our source-code... 
+         Great! We know it can get better.
+         How about joining our web-developer team?
+         Drop us a line at web(at)dreikoenige.berlin
+
+         We'd love to hear from you!
+-->
+`;

src/app/layout.tsx

@@ -3,6 +3,7 @@ import { defaultFont } from './fonts'
 import './globals.css'
 import { Menu } from '@/components/Menu/Menu'
 import { Footer } from '@/compositions/Footer/Footer'
+import { comment } from '@/app/layout-comment'
 
 export const metadata: Metadata = {
   title: 'Katholische Pfarrei Heilige drei Könige Berlin',
@@ -14,8 +15,9 @@ export default function RootLayout({
   children: React.ReactNode
 }>) {
   return (
-    <html lang="en" className={defaultFont.className}>
+    <html lang="de" className={defaultFont.className}>
       <body>
+      <div dangerouslySetInnerHTML={{ __html: comment }}></div>
       <Menu menu={{
         leftItems: [
           {

src/app/page.tsx

@@ -8,7 +8,7 @@ import { ContactSection } from '@/compositions/ContactSection/ContactSection'
 import { ContentWithSlider } from '@/compositions/ContentWithSlider/ContentWithSlider'
 import { Events } from '@/compositions/Events/Events'
 import { fetchEvents } from '@/fetch/events'
-import forest from "../assets/forest.jpeg"
+import forest from '../assets/forest.jpeg'
 import { fetchWorship } from '@/fetch/worship'
 import { Worship } from '@/payload-types'
 import { MassTable } from '@/components/MassTable/MassTable'
@@ -22,14 +22,14 @@ import { highlightLink } from '@/utils/dto/highlight'
 import { MassRow } from '@/components/MassTable/MassRow'
 
 const sortWorship = (worship: Worship[]) => {
-  const map = new Map<string, Worship[]>();
+  const map = new Map<string, Worship[]>()
 
   worship.map(w => {
-    if(typeof w.location === "object") {
+    if (typeof w.location === 'object') {
-      const title = w.location.name;
+      const title = w.location.name
 
       if (map.has(title)) {
-        map.get(title)?.push(w);
+        map.get(title)?.push(w)
       } else {
         map.set(title, [w])
       }
@@ -46,25 +46,25 @@ export default async function Home() {
   const events = await fetchEvents(undefined)
   const worship = await fetchWorship()
   const worshipPerLocation = Array.from(
-    sortWorship(worship?.docs || []).entries()
+    sortWorship(worship?.docs || []).entries(),
   ).sort(
     (a, b) => {
-      const nameA = a[0];
+      const nameA = a[0]
-      const nameB = b[0];
+      const nameB = b[0]
 
       if (nameA < nameB) {
-        return -1;
+        return -1
       }
       if (nameA > nameB) {
-        return 1;
+        return 1
       }
 
       // names must be equal
-      return 0;
+      return 0
-    }
+    },
   )
 
-  const blog = await fetchBlog();
+  const blog = await fetchBlog()
   const highlights = await fetchHighlights()
 
 
@@ -74,18 +74,19 @@ export default async function Home() {
 
       <Container>
         <Section>
-          <MainText text={"Wir begrüßen Sie herzlich in unserer Pfarrei Hl. Drei Könige und im bunten Neukölln mit einer Vielfalt von Kulturen und Nationalitäten. \n" +
+          <MainText
-            "Wie die drei Weisen aus dem Morgenland wollen wir uns immer wieder neu auf den Weg machen."} />
+            text={'Wir begrüßen Sie herzlich in unserer Pfarrei Hl. Drei Könige und im bunten Neukölln mit einer Vielfalt von Kulturen und Nationalitäten. \n' +
+              'Wie die drei Weisen aus dem Morgenland wollen wir uns immer wieder neu auf den Weg machen.'} />
         </Section>
 
-        <Section paddingBottom={"medium"}>
+        <Section paddingBottom={'medium'}>
           <Title
-            title={"Unsere Gottesdiensten"}
+            title={'Unsere Gottesdiensten'}
-            subtitle={"Komm einfach vorbei!"}
+            subtitle={'Komm einfach vorbei!'}
-            align={"center"}
+            align={'center'}
           />
 
-          <Section padding={"small"}>
+          <Section padding={'small'}>
             <MassRow>
               {worshipPerLocation.map(value => <MassTable key={value[0]} location={value[0]} masses={value[1]} />)}
             </MassRow>
@@ -96,21 +97,23 @@ export default async function Home() {
 
         {blog && blog.docs.length > 0 &&
           <Section>
-              <Title title={"Aktuelles"} />
+            <Title title={'Aktuelles'} />
             <ImageCardSlider slides={blogToSlides(blog.docs)} />
           </Section>
         }
       </Container>
 
-      {<ImageWithText backgroundColor={"soft"} title={"Über uns"} text={'Wir begrüßen Sie herzlich in unserer Pfarrei Hl. Drei Könige und im bunten Neukölln mit einer Vielfalt von Kulturen und Nationalitäten.\n' +
+      {<ImageWithText backgroundColor={'soft'} title={'Über uns'}
+                      text={'Wir begrüßen Sie herzlich in unserer Pfarrei Hl. Drei Könige und im bunten Neukölln mit einer Vielfalt von Kulturen und Nationalitäten.\n' +
                         '\n' +
-        'Unsere Pfarrei Hl. Drei Könige wurde am 01.01.2020 gegründet. Am 12.01.2020 feierte Erzbischof Dr. Heiner Koch mit den Gemeinden die Gründung in einer feierlichen Hl. Messe in der katholischen Marienschule. Anwesende Gäste waren Bürgermeister Martin Hikel, Christian Nottmeier, der Superintendent des evangelischen Kirchenkreises Neukölln und vielen Akteuren aus Kiez und Ökumene. Die Vielfalt der Glaubenswege in unserer Pfarrei sehen wir als Schatz. Wie die drei Weisen aus dem Morgenland wollen wir uns immer wieder neu auf den Weg machen.'} image={forest} />}
+                        'Unsere Pfarrei Hl. Drei Könige wurde am 01.01.2020 gegründet. Am 12.01.2020 feierte Erzbischof Dr. Heiner Koch mit den Gemeinden die Gründung in einer feierlichen Hl. Messe in der katholischen Marienschule. Anwesende Gäste waren Bürgermeister Martin Hikel, Christian Nottmeier, der Superintendent des evangelischen Kirchenkreises Neukölln und vielen Akteuren aus Kiez und Ökumene. Die Vielfalt der Glaubenswege in unserer Pfarrei sehen wir als Schatz. Wie die drei Weisen aus dem Morgenland wollen wir uns immer wieder neu auf den Weg machen.'}
+                      image={forest} />}
 
       <ContentWithSlider slider={<>
-            <Title title={"Akutelle Highlights"} size={"md"} fontStyle={"sans-serif"} color={"white"} />
+        <Title title={'Akutelle Highlights'} size={'md'} fontStyle={'sans-serif'} color={'white'} />
         {highlights?.docs.map(highlight => (
           <EventRow
-                color={"white"}
+            color={'white'}
             key={highlight.id}
             date={highlight.date}
             title={highlight.text}
@@ -119,15 +122,14 @@ export default async function Home() {
           />
         ))}
       </>}>
-            <Container position={"right"}>
         <Section>
-            <Title title={"Veranstaltungen"} />
+          <Title title={'Veranstaltungen'} />
           <Events events={transformEvents(events?.docs || [])} n={6} />
         </Section>
-            </Container>
       </ContentWithSlider>
 
-      <ContactSection title={"Kontakt"} description={"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec molestie ligula. Maecenas sollicitudin molestie velit id ultricies. Nulla luctus eleifend est, et hendrerit nunc pretium in. Nullam leo tortor, tincidunt in sodales dapibus, faucibus vel lacus. Nunc ornare lacus eu dui consequat, fermentum tincidunt felis blandit. Vivamus a turpis eros. Donec faucibus mi in magna cursus maximus. Duis ac elit posuere, bibendum nunc vel, consectetur neque. Aliquam non bibendum quam. Nulla facilisi. Vivamus eu iaculis felis. Donec elit augue, pretium eget pretium ullamcorper, vestibulum eu lorem. Praesent gravida condimentum tortor, in dignissim mauris elementum quis. Morbi a venenatis odio. Vivamus quis magna eget elit pellentesque elementum. Nulla facilisi."} />
+      <ContactSection title={'Kontakt'}
+                      description={'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec molestie ligula. Maecenas sollicitudin molestie velit id ultricies. Nulla luctus eleifend est, et hendrerit nunc pretium in. Nullam leo tortor, tincidunt in sodales dapibus, faucibus vel lacus. Nunc ornare lacus eu dui consequat, fermentum tincidunt felis blandit. Vivamus a turpis eros. Donec faucibus mi in magna cursus maximus. Duis ac elit posuere, bibendum nunc vel, consectetur neque. Aliquam non bibendum quam. Nulla facilisi. Vivamus eu iaculis felis. Donec elit augue, pretium eget pretium ullamcorper, vestibulum eu lorem. Praesent gravida condimentum tortor, in dignissim mauris elementum quis. Morbi a venenatis odio. Vivamus quis magna eget elit pellentesque elementum. Nulla facilisi.'} />
     </>
   )
 }

src/components/Arrow/Arrow.tsx

@@ -13,6 +13,7 @@ export const Arrow = ({ direction, onClick }: ArrowProps) => {
       xmlns="http://www.w3.org/2000/svg"
       style={{ transform: `rotate(${direction === 'left' ? 0 : 180}deg)` }}
       stroke="#426156"
+      onClick={onClick}
     >
       <path d="M19 1.53406L2.68974 27.0243C2.26927 27.6814 2.26927 28.5231 2.68974 29.1802L19 54.6704"
             strokeWidth="3" />

src/components/HorizontalRule/HorizontalRule.tsx

@@ -1,6 +1,6 @@
 import styles from "./styles.module.scss"
 import Image from "next/image"
-import cross from "./cross.svg"
+import cross from "./cross2.svg"
 
 export const HR = () => {
   return (

src/components/HorizontalRule/cross2.svg

@@ -0,0 +1,7 @@
+<svg id="Ebene_1" data-name="Ebene 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 39.69 49.61">
+    <defs>
+        <style>.cls-1{fill:#426156;}</style>
+    </defs>
+    <polygon class="cls-1"
+             points="33.89 14.81 19.89 14.81 19.89 0.8 18.89 0.8 18.89 14.81 4.89 14.81 4.89 15.81 18.89 15.81 18.89 48.8 19.89 48.8 19.89 15.81 33.89 15.81 33.89 14.81"/>
+</svg>

src/components/HorizontalRule/styles.module.scss

@@ -9,5 +9,5 @@
 .line {
   border-bottom: 1.5px solid $base-color;
   flex: 1 1 0;
-  height: 35px;
+  height: 28px;
 }

src/compositions/Footer/Footer.tsx

@@ -5,6 +5,7 @@ import styles from "./styles.module.scss"
 import { Row } from '@/components/Flex/Row'
 import { Col } from '@/components/Flex/Col'
 import { RandomPrayer } from '@/components/RandomPrayer/RandomPrayer'
+import Link from 'next/link'
 
 
 export const Footer = () => {
@@ -29,10 +30,11 @@ export const Footer = () => {
                     <strong>Navigation</strong>
                   </p>
                   <ul className={styles.list}>
-                      <li>Kontakt</li>
+                    <li><Link href={"/kontakt"}>Kontakt</Link></li>
-                      <li>Gottesdiensten</li>
+                    <li><Link href={"/gottesdiensten"}>Gottesdiensten</Link></li>
-                      <li>Impressum</li>
+                    <li><Link href={"/datenschutz"}>Datenschutz</Link></li>
-                      <li>Datenschutz</li>
+                    <li><Link href={"/schutzkonzept"}>Schutzkonzept</Link></li>
+                    <li><Link href={"/impressum"}>Impressum</Link></li>
                   </ul>
                 </Col>
                 <Col>

src/compositions/Footer/styles.module.scss

@@ -13,3 +13,13 @@
 .list {
   list-style: square;
 }
+
+.list a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.list li:hover::marker{
+  list-style: circle;
+  color: $contrast-color;
+}

src/compositions/ImageCardSlider/styles.module.scss

@@ -18,6 +18,10 @@
   cursor: pointer;
 }
 
+.arrowRight:hover svg, .arrowLeft:hover svg {
+  stroke: $contrast-color;
+}
+
 .container {
   display: flex;
   gap: 20px;

src/compositions/ImageWithText/ImageWithText.tsx

@@ -16,7 +16,6 @@ type ImageWithTextProps = {
 }
 
 export const ImageWithText = ({backgroundColor, title, image, text, link}: ImageWithTextProps) => {
-  console.log(image)
   return (
     <Section backgroundColor={backgroundColor}>
       <Container>

src/pageComponents/Home/Home.stories.tsx

@@ -8,7 +8,181 @@ const meta: Meta<typeof Home> = {
   decorators: [
     (Story) => (
       <>
-        <Menu/>
+        <Menu menu={{
+          leftItems: [
+            {
+              text: 'Home',
+              href: '/'
+            },
+            {
+              text: 'Gemeinschaft finden',
+              megaMenu: {
+                text: {
+                  quote: '',
+                  source: ''
+                },
+                groups: [
+                  {
+                    title: "Gemeinden",
+                    items: [
+                      {
+                        title: "St. Richard",
+                        description: "Mehr informationen",
+                        href: "/gemeinde/st-richard"
+                      },
+                      {
+                        title: "St. Christophorus",
+                        description: "Mehr informationen",
+                        href: "/gemeinde/st-christophorus"
+                      },
+                      {
+                        title: "St. Clara",
+                        description: "Mehr informationen",
+                        href: "/gemeinde/st-clara"
+                      },
+                    ]
+                  },
+                  {
+                    title: "Gruppen",
+                    items: [
+                      {
+                        title: "Kathoccino",
+                        description: "Begegnung mit Gott",
+                        href: "https://"
+                      },
+                      {
+                        title: "Credo & Agape",
+                        description: "Gebet der Meditation",
+                        href: "https://"
+                      },
+                      {
+                        title: "Mädchengruppe",
+                        description: "Stille Begegnung mit Gott",
+                        href: "https://"
+                      },
+                      {
+                        title: "Alphakurs",
+                        description: "Dank, Ehre und Freude",
+                        href: "https://"
+                      },
+                    ]
+                  },
+                  {
+                    title: "Aktivitaten",
+                    items: [
+                      {
+                        title: "Kochen",
+                        description: "Begegnung mit Gott",
+                        href: "https://"
+                      },
+                      {
+                        title: "Lernen",
+                        description: "Gebet der Meditation",
+                        href: "https://"
+                      },
+                      {
+                        title: "Wandern",
+                        description: "Stille Begegnung mit Gott",
+                        href: "https://"
+                      },
+                      {
+                        title: "Singen",
+                        description: "Dank, Ehre und Freude",
+                        href: "https://"
+                      },
+                    ]
+                  }
+                ]
+              }
+            },
+            {
+              text: 'Glauben lauben',
+              megaMenu: {
+                text: {
+                  quote: '',
+                  source: ''
+                },
+                groups: [
+                  {
+                    title: "Sakramenten",
+                    items: [
+                      {
+                        title: "Taufe",
+                        description: "Neues Leben in Christus",
+                        href: "/sakramente/taufe"
+                      },
+                      {
+                        title: "Eucharistie",
+                        description: "Gemeinschaft durch Brot und Wein",
+                        href: "/sakramente/eucharistie"
+                      },
+                      {
+                        title: "Firmung",
+                        description: "Stärkung im Heiligen Geist",
+                        href: "/sakramente/firmung"
+                      },
+                      {
+                        title: "Ehe",
+                        description: "Bund in Liebe, Treue",
+                        href: "/sakramente/ehe"
+                      },
+                      {
+                        title: "Beichte",
+                        description: "Sündenbekenntnis, Vergebung und Neuanfang mit Gottes Gnade",
+                        href: "/sakramente/beichte"
+                      },
+                      {
+                        title: "Krankensalbung",
+                        description: "Stärkung und Gottes Beistand",
+                        href: "/sakramente/krankensalbung"
+                      }
+                    ]
+                  },
+                  {
+                    title: "Gebet",
+                    items: [
+                      {
+                        title: "Gottesdienste",
+                        description: "Begegnung mit Gott",
+                        href: "https://"
+                      },
+                      {
+                        title: "Rosenkranz",
+                        description: "Gebet der Meditation",
+                        href: "https://"
+                      },
+                      {
+                        title: "Anbetung",
+                        description: "Stille Begegnung mit Gott",
+                        href: "https://"
+                      },
+                      {
+                        title: "Lobpreis",
+                        description: "Dank, Ehre und Freude",
+                        href: "https://"
+                      },
+                    ]
+                  }
+                ]
+              }
+            },
+            {
+              text: 'Kontakt',
+              href: '/kontakt'
+            }
+          ],
+          rightItems: [
+            {
+              text: 'Mithelfen',
+              href: '/mithelfen',
+            },
+            {
+              text: 'Neu hier?',
+              href: '/ich-bin-neu',
+              display: "button"
+            }
+          ]
+        }}/>
         <Story />
         <Footer />
       </>

src/pageComponents/Parish/Parish.stories.tsx

@@ -9,7 +9,181 @@ const meta: Meta<typeof Parish> = {
   decorators: [
     (Story) => (
       <>
-        <Menu/>
+        <Menu menu={{
+          leftItems: [
+            {
+              text: 'Home',
+              href: '/'
+            },
+            {
+              text: 'Gemeinschaft finden',
+              megaMenu: {
+                text: {
+                  quote: '',
+                  source: ''
+                },
+                groups: [
+                  {
+                    title: "Gemeinden",
+                    items: [
+                      {
+                        title: "St. Richard",
+                        description: "Mehr informationen",
+                        href: "/gemeinde/st-richard"
+                      },
+                      {
+                        title: "St. Christophorus",
+                        description: "Mehr informationen",
+                        href: "/gemeinde/st-christophorus"
+                      },
+                      {
+                        title: "St. Clara",
+                        description: "Mehr informationen",
+                        href: "/gemeinde/st-clara"
+                      },
+                    ]
+                  },
+                  {
+                    title: "Gruppen",
+                    items: [
+                      {
+                        title: "Kathoccino",
+                        description: "Begegnung mit Gott",
+                        href: "https://"
+                      },
+                      {
+                        title: "Credo & Agape",
+                        description: "Gebet der Meditation",
+                        href: "https://"
+                      },
+                      {
+                        title: "Mädchengruppe",
+                        description: "Stille Begegnung mit Gott",
+                        href: "https://"
+                      },
+                      {
+                        title: "Alphakurs",
+                        description: "Dank, Ehre und Freude",
+                        href: "https://"
+                      },
+                    ]
+                  },
+                  {
+                    title: "Aktivitaten",
+                    items: [
+                      {
+                        title: "Kochen",
+                        description: "Begegnung mit Gott",
+                        href: "https://"
+                      },
+                      {
+                        title: "Lernen",
+                        description: "Gebet der Meditation",
+                        href: "https://"
+                      },
+                      {
+                        title: "Wandern",
+                        description: "Stille Begegnung mit Gott",
+                        href: "https://"
+                      },
+                      {
+                        title: "Singen",
+                        description: "Dank, Ehre und Freude",
+                        href: "https://"
+                      },
+                    ]
+                  }
+                ]
+              }
+            },
+            {
+              text: 'Glauben lauben',
+              megaMenu: {
+                text: {
+                  quote: '',
+                  source: ''
+                },
+                groups: [
+                  {
+                    title: "Sakramenten",
+                    items: [
+                      {
+                        title: "Taufe",
+                        description: "Neues Leben in Christus",
+                        href: "/sakramente/taufe"
+                      },
+                      {
+                        title: "Eucharistie",
+                        description: "Gemeinschaft durch Brot und Wein",
+                        href: "/sakramente/eucharistie"
+                      },
+                      {
+                        title: "Firmung",
+                        description: "Stärkung im Heiligen Geist",
+                        href: "/sakramente/firmung"
+                      },
+                      {
+                        title: "Ehe",
+                        description: "Bund in Liebe, Treue",
+                        href: "/sakramente/ehe"
+                      },
+                      {
+                        title: "Beichte",
+                        description: "Sündenbekenntnis, Vergebung und Neuanfang mit Gottes Gnade",
+                        href: "/sakramente/beichte"
+                      },
+                      {
+                        title: "Krankensalbung",
+                        description: "Stärkung und Gottes Beistand",
+                        href: "/sakramente/krankensalbung"
+                      }
+                    ]
+                  },
+                  {
+                    title: "Gebet",
+                    items: [
+                      {
+                        title: "Gottesdienste",
+                        description: "Begegnung mit Gott",
+                        href: "https://"
+                      },
+                      {
+                        title: "Rosenkranz",
+                        description: "Gebet der Meditation",
+                        href: "https://"
+                      },
+                      {
+                        title: "Anbetung",
+                        description: "Stille Begegnung mit Gott",
+                        href: "https://"
+                      },
+                      {
+                        title: "Lobpreis",
+                        description: "Dank, Ehre und Freude",
+                        href: "https://"
+                      },
+                    ]
+                  }
+                ]
+              }
+            },
+            {
+              text: 'Kontakt',
+              href: '/kontakt'
+            }
+          ],
+          rightItems: [
+            {
+              text: 'Mithelfen',
+              href: '/mithelfen',
+            },
+            {
+              text: 'Neu hier?',
+              href: '/ich-bin-neu',
+              display: "button"
+            }
+          ]
+        }}/>
         <Story />
         <Footer />
       </>