feature: more information on homepage

src/components/CollapsibleArrow/CollapsibleArrow.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { CollapsibleArrow } from './CollapsibleArrow'
+
+const meta: Meta<typeof CollapsibleArrow> = {
+  component: CollapsibleArrow,
+}
+
+type Story = StoryObj<typeof CollapsibleArrow>;
+export default meta
+
+export const Default: Story = {
+  args: {
+    direction: "DOWN"
+  },
+}

src/components/CollapsibleArrow/CollapsibleArrow.tsx

@@ -0,0 +1,30 @@
+import styles from './styles.module.scss'
+import classNames from 'classnames'
+
+type CollapsibleArrowProps = {
+  direction: "UP" | "DOWN",
+  onClick?: () => void,
+}
+
+
+export const CollapsibleArrow = ({direction, onClick}: CollapsibleArrowProps) => {
+
+  const style = classNames({
+    [styles.arrow]: true,
+    [styles.arrowUp]: direction == "UP"
+  })
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="12"
+      height="10"
+      viewBox="0 0 12 10"
+      fill="none"
+      className={style}
+      onClick={onClick}
+    >
+      <path d="M1 1L5.28326 8.50159C5.6627 9.16614 6.3373 9.16614 6.71674 8.50159L11 1" stroke="#426156"
+            strokeWidth="2" />
+    </svg>
+  )
+}

src/components/CollapsibleArrow/styles.module.scss

@@ -0,0 +1,7 @@
+.arrow {
+  transition: transform 200ms ease-out;
+}
+
+.arrowUp {
+  transform: rotate(180deg);
+}

src/components/Title/styles.module.scss

@@ -4,6 +4,7 @@
   margin-top: 20px;
   margin-bottom: 0.5em;
   line-height: 1em;
+  white-space: preserve;
 }
 
 .subtitle {
@@ -34,7 +35,7 @@
 }
 
 .medium {
-  font-size: 40px;
+  font-size: 33px;
   font-weight: 700;
 }
 

src/compositions/CollapsibleImageWithText/CollapsibleImageWithText.stories.tsx

@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/react'
+import forest from "../../assets/forest.jpeg"
+import { CollapsibleImageWithText } from './CollapsibleImageWithText'
+import { Title } from '@/components/Title/Title'
+import { P } from '@/components/Text/Paragraph'
+
+const meta: Meta<typeof CollapsibleImageWithText> = {
+  component: CollapsibleImageWithText,
+}
+
+type Story = StoryObj<typeof CollapsibleImageWithText>;
+export default meta
+
+export const AboutUs: Story = {
+  args: {
+    image: forest,
+    backgroundColor: "soft",
+    schema: 'base',
+    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.',
+    content: <>
+      <Title title={"Pastoralkonzept der Pfarrei \n" +
+        "Heilige Drei Könige Nord-Neukölln"}
+        size={"md"}
+      />
+      <P width={"3/4"}>
+        Das Pastoralkonzept soll die Frage beantworten, wie wir in unserem Bezirk als katholische Kirche wirken wollen. Es sollen Wege, Ziele und Maßnahmen aufgezeigt werden, wie wir in den nächsten Jahren den Glauben an Jesus Christus in unserem Bezirk gemeinsam leben und weitergeben wollen. Wie wir unsere Gemeindemitglieder – aber auch darüber hinaus – die Menschen vor Ort mit Gott, mit dem Evangelium und mit unserem Glauben in Berührung bringen. Nächstenliebe, sorgende Gemeinschaft und Begeisterung für unseren Glauben sollen dabei im Vordergrund stehen.
+      </P>
+    </>
+  },
+}

src/compositions/CollapsibleImageWithText/CollapsibleImageWithText.tsx

@@ -0,0 +1,102 @@
+"use client"
+
+import { BackgroundColor, Section } from '@/components/Section/Section'
+import { StaticImageData } from 'next/image'
+import { ImageWithText } from '@/compositions/ImageWithText/ImageWithText'
+import { CollapsibleArrow } from '@/components/CollapsibleArrow/CollapsibleArrow'
+import React, { useEffect, useRef, useState } from 'react'
+import { Container } from '@/components/Container/Container'
+import styles from "./styles.module.scss"
+import classNames from 'classnames'
+
+type ImageWithTextProps = {
+  backgroundColor?: BackgroundColor,
+  title: string,
+  image: StaticImageData,
+  text: string
+  schema?: 'base' | 'contrast'
+  content: React.ReactNode
+}
+
+type MoreInformationProps = {
+  isCollapsed: boolean,
+  onClick: () => void
+}
+
+const MoreInformation = ({isCollapsed, onClick}: MoreInformationProps) => {
+  const [direction, setDirection] = useState<"UP" | "DOWN">(isCollapsed ? "DOWN" : "UP")
+
+  const toggleDirection = () => {
+    setDirection(direction == "UP" ? "DOWN" : "UP")
+  }
+
+  const handleClick = () => {
+    toggleDirection();
+    onClick();
+  }
+
+  return (
+    <div
+      onClick={handleClick}
+      className={styles.more}
+      onTouchEnd={handleClick}
+      onMouseEnter={toggleDirection}
+      onMouseLeave={toggleDirection}
+    >Mehr erfahren <CollapsibleArrow direction={direction}/></div>
+  )
+};
+
+export const CollapsibleImageWithText = ({backgroundColor, title, image, text, schema, content}: ImageWithTextProps) => {
+
+  const ref = useRef<HTMLDivElement>(null)
+  const ref2 = useRef<HTMLDivElement>(null)
+  const [contentHeight, setContentHeight] = useState(0)
+  const [isCollapsed, setIsCollapsed] = useState(true)
+
+  const collapse = () => {
+    setIsCollapsed(true)
+    ref.current?.scrollIntoView({'behavior': 'smooth'})
+  }
+
+  useEffect(() => {
+    if (ref2.current) {
+      setContentHeight(ref2.current.scrollHeight)
+    }
+  }, [ref2])
+
+  return (
+    <div ref={ref}>
+      <ImageWithText
+        title={title}
+        image={image}
+        text={text}
+        schema={schema}
+        backgroundColor={backgroundColor}
+        link={<MoreInformation isCollapsed={isCollapsed} onClick={() => setIsCollapsed(!isCollapsed)} />}
+      />
+
+      <div
+        ref={ref2}
+        className={classNames({
+        [styles.content]: true,
+      })}
+        style={{maxHeight: isCollapsed ? undefined : contentHeight}}
+      >
+        <Section
+          backgroundColor={backgroundColor}
+          padding={"small"}
+          paddingBottom={"large"}
+        >
+          <Container>
+            {content}
+          </Container>
+
+          <div className={styles.endButton}>
+            <CollapsibleArrow direction={"UP"} onClick={collapse}/>
+          </div>
+        </Section>
+      </div>
+    </div>
+
+  )
+}

src/compositions/CollapsibleImageWithText/styles.module.scss

@@ -0,0 +1,34 @@
+@import "template.scss";
+
+.more {
+  font-size: 18px;
+  color: $base-color;
+  cursor: pointer;
+  font-weight: bold;
+  display: inline-flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.content {
+  margin: -50px 0;
+  transition: max-height 500ms ease-in;
+  max-height: 0;
+  overflow: hidden;
+}
+
+.endButton {
+  position: relative;
+  top: 75px;
+  text-align: center;
+}
+
+.endButton svg {
+  cursor: pointer;
+}
+
+@media screen and (max-width: 576px) {
+  .endButton {
+    top: 20px;
+  }
+}

src/compositions/ImageWithText/ImageWithText.stories.tsx

@@ -2,7 +2,6 @@ import { Meta, StoryObj } from '@storybook/react'
 import forest from "../../assets/forest.jpeg"
 import chris from "../../assets/christophorus.jpeg"
 import { ImageWithText } from './ImageWithText'
-import { Button } from '@/components/Button/Button'
 
 const meta: Meta<typeof ImageWithText> = {
   component: ImageWithText,

src/pageComponents/Home/Home.tsx

@@ -9,7 +9,6 @@ import { MassRow } from '@/components/MassTable/MassRow'
 import { MassTable } from '@/components/MassTable/MassTable'
 import { ImageCardSlider } from '@/compositions/ImageCardSlider/ImageCardSlider'
 import { blogToSlides } from '@/utils/dto/blog'
-import { ImageWithText } from '@/compositions/ImageWithText/ImageWithText'
 import forest from '@/assets/forest.jpeg'
 import { ContentWithSlider } from '@/compositions/ContentWithSlider/ContentWithSlider'
 import { EventRow } from '@/components/EventRow/EventRow'
@@ -17,6 +16,8 @@ import { highlightLink } from '@/utils/dto/highlight'
 import { Events } from '@/compositions/Events/Events'
 import { transformEvents } from '@/utils/dto/events'
 import { ContactSection } from '@/compositions/ContactSection/ContactSection'
+import { CollapsibleImageWithText } from '@/compositions/CollapsibleImageWithText/CollapsibleImageWithText'
+import { MoreInformation } from '@/pageComponents/Home/MoreInformation'
 
 type HomeProps = {
   events: Event[],
@@ -110,7 +111,7 @@ export const Home = ({
         </Section>
       </Container>
 
-      {<ImageWithText
+      <CollapsibleImageWithText
         backgroundColor={'soft'}
         title={'Über uns'}
         schema={"base"}
@@ -118,7 +119,8 @@ export const Home = ({
           '\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}
-      />}
+        content={<MoreInformation />}
+      />
 
       <ContentWithSlider slider={<>
         <Title title={'Akutelle Highlights'} size={'md'} fontStyle={'sans-serif'} color={'white'} />

src/pageComponents/Home/MoreInformation.tsx

@@ -0,0 +1,83 @@
+import { Title } from '@/components/Title/Title'
+import { P } from '@/components/Text/Paragraph'
+import { Section } from '@/components/Section/Section'
+import { Button } from '@/components/Button/Button'
+
+export const MoreInformation = () => {
+  return (
+    <>
+      <Title
+        size={'md'}
+        title={'Pastoralkonzept der Pfarrei \nHeilige Drei Könige Nord-Neukölln'}
+        fontStyle={'sans-serif'}
+      />
+
+      <P width={'3/4'}>
+        Das Pastoralkonzept soll die Frage beantworten, wie wir in unserem Bezirk als katholische Kirche wirken wollen.
+        Es sollen Wege, Ziele und Maßnahmen aufgezeigt werden, wie wir in den nächsten Jahren den Glauben an Jesus
+        Christus in unserem Bezirk gemeinsam leben und weitergeben wollen. Wie wir unsere Gemeindemitglieder – aber auch
+        darüber hinaus – die Menschen vor Ort mit Gott, mit dem Evangelium und mit unserem Glauben in Berührung bringen.
+        Nächstenliebe, sorgende Gemeinschaft und Begeisterung für unseren Glauben sollen dabei im Vordergrund stehen.
+      </P>
+
+      <P width={'1/2'}>
+        Seit 2006 machen sich die drei Gemeinden wie die drei Weisen aus dem Morgenland auf den Weg in eine gemeinsame
+        Zukunft. Dabei steht das Biblische Leitwort „Mit meinem Gott überspringe ich Mauern“ (Ps 18,30b) im Vordergrund
+        unseres pastoralen Handelns im bunten vielfältigen Nord-Neukölln, einem Stadtteil mit vielen kulturellen,
+        spirituellen sowie sozialen Unterschieden, die es zu überwinden geht. In einer großen Bevölkerungsdichte treffen
+        ein starkes interreligiöses und ein religionsfernes Milieu aufeinander. Als Kirche bemühen wir uns um Antworten
+        auf Nöte, Fragen und Sehnsüchte unserer Umgebung. Beim Gremientag 2023 entstand daraus der Leitsatz: „Ich habe
+        Gedanken des Heils und nicht des Unheils: denn ich will euch eine Zukunft und eine Hoffnung geben.“ (nach Jer
+        29,11) hinzu.
+      </P>
+      <p>
+        <Button
+          size={"md"}
+          schema={"contrast"}
+          href={"https://storage.googleapis.com/dreikoenige/documents/2018_Pastoralkonzept_Nord-Neukoelln_mit_Anhang.pdf"}
+        >Download Konzept</Button>
+      </p>
+      <Section padding={'small'}></Section>
+      <Title
+        size={'md'}
+        title={'Patronat Heilige Drei Könige'}
+        fontStyle={'sans-serif'}
+      />
+      <P width={'3/4'}>
+        Die katholische Kirche Nord-Neukölln stellt sich unter das Patronat der „Heiligen Drei Könige“. Die Heiligen
+        Drei Könige sollen Vorbild für uns und unser Handeln sein. Sie haben sich gemeinsam auf den Weg
+        gemacht.
+      </P>
+      <P width={'1/2'}>
+        Nach der Tradition vereinten sie in sich unterschiedliche Herkunft und verschiedene Kulturen. Sie ließen sich
+        darauf ein, auf einem Weg ins Unbekannte dem Stern zu folgen. Sie gehörten nicht zum auserwählten Volk. Dennoch
+        erkannten sie den großen Gott im kleinen Kind in der Krippe. Durch die Sternsinger-Aktion sind die Heiligen Drei
+        Könige auch in der Öffentlichkeit bekannt, unter anderem im Bezirksamt Neukölln und auf den Straßen.
+      </P>
+
+      <Section padding={'small'}></Section>
+      <Title
+        size={'md'}
+        title={'Orte kirchlichen Lebens \nin der Pfarrei Heilige Drei Könige'}
+        fontStyle={'sans-serif'}
+      />
+      <P width={'3/4'}>
+        Auf dem Pfarrgebiet sind einige Institutionen und Gemeinschaften zuhause, die wir als Orte kirchlichen Lebens
+        bezeichnen.
+        Damit sind kirchliche Institutionen, Gemeinschaften, Hilfswerke und Gruppen gemeint, die im kath- kirchlichen
+        Bezug stehen und direkt oder indirekt das Gemeindeleben befruchten, begleiten, unterstützen und ein Stück
+        unseren Zukunftsweg mitprägen.
+        Einige sind als Nachbarn und Mieter an den Kirchenstandorte oder im Pfarreirat oder im breiten sozialen
+        Hilfe-Netzwerk mit dem Gemeindeleben verbunden.
+        Wir stehen im guten bereichernden Kontakt zueinander und freuen uns auf die weitere Zusammenarbeit.
+      </P>
+      <p>
+        <Button
+          size={"md"}
+          schema={"contrast"}
+          href={"https://storage.googleapis.com/dreikoenige/documents/Orte-kirchlichen-Lebens.pdf"}
+        >Liste einsehen</Button>
+      </p>
+    </>
+  )
+}