From ab8f5028b0122bd4653956d3675af321c1b4afd7 Mon Sep 17 00:00:00 2001 From: Benno Tielen Date: Wed, 11 Dec 2024 12:07:55 +0100 Subject: [PATCH] feature: more information on homepage --- .../CollapsibleArrow.stories.tsx | 15 +++ .../CollapsibleArrow/CollapsibleArrow.tsx | 30 ++++++ .../CollapsibleArrow/styles.module.scss | 7 ++ src/components/Title/styles.module.scss | 3 +- .../CollapsibleImageWithText.stories.tsx | 33 ++++++ .../CollapsibleImageWithText.tsx | 102 ++++++++++++++++++ .../styles.module.scss | 34 ++++++ .../ImageWithText/ImageWithText.stories.tsx | 1 - src/pageComponents/Home/Home.tsx | 8 +- src/pageComponents/Home/MoreInformation.tsx | 83 ++++++++++++++ 10 files changed, 311 insertions(+), 5 deletions(-) create mode 100644 src/components/CollapsibleArrow/CollapsibleArrow.stories.tsx create mode 100644 src/components/CollapsibleArrow/CollapsibleArrow.tsx create mode 100644 src/components/CollapsibleArrow/styles.module.scss create mode 100644 src/compositions/CollapsibleImageWithText/CollapsibleImageWithText.stories.tsx create mode 100644 src/compositions/CollapsibleImageWithText/CollapsibleImageWithText.tsx create mode 100644 src/compositions/CollapsibleImageWithText/styles.module.scss create mode 100644 src/pageComponents/Home/MoreInformation.tsx diff --git a/src/components/CollapsibleArrow/CollapsibleArrow.stories.tsx b/src/components/CollapsibleArrow/CollapsibleArrow.stories.tsx new file mode 100644 index 0000000..e8a393b --- /dev/null +++ b/src/components/CollapsibleArrow/CollapsibleArrow.stories.tsx @@ -0,0 +1,15 @@ +import { Meta, StoryObj } from '@storybook/react' +import { CollapsibleArrow } from './CollapsibleArrow' + +const meta: Meta = { + component: CollapsibleArrow, +} + +type Story = StoryObj; +export default meta + +export const Default: Story = { + args: { + direction: "DOWN" + }, +} \ No newline at end of file diff --git a/src/components/CollapsibleArrow/CollapsibleArrow.tsx b/src/components/CollapsibleArrow/CollapsibleArrow.tsx new file mode 100644 index 0000000..6e3ed5f --- /dev/null +++ b/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 ( + + + + ) +} \ No newline at end of file diff --git a/src/components/CollapsibleArrow/styles.module.scss b/src/components/CollapsibleArrow/styles.module.scss new file mode 100644 index 0000000..ff465aa --- /dev/null +++ b/src/components/CollapsibleArrow/styles.module.scss @@ -0,0 +1,7 @@ +.arrow { + transition: transform 200ms ease-out; +} + +.arrowUp { + transform: rotate(180deg); +} \ No newline at end of file diff --git a/src/components/Title/styles.module.scss b/src/components/Title/styles.module.scss index 95ec5bf..b891cc7 100644 --- a/src/components/Title/styles.module.scss +++ b/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; } diff --git a/src/compositions/CollapsibleImageWithText/CollapsibleImageWithText.stories.tsx b/src/compositions/CollapsibleImageWithText/CollapsibleImageWithText.stories.tsx new file mode 100644 index 0000000..71c2685 --- /dev/null +++ b/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 = { + component: CollapsibleImageWithText, +} + +type Story = StoryObj; +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: <> + + <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> + </> + }, +} \ No newline at end of file diff --git a/src/compositions/CollapsibleImageWithText/CollapsibleImageWithText.tsx b/src/compositions/CollapsibleImageWithText/CollapsibleImageWithText.tsx new file mode 100644 index 0000000..10f037c --- /dev/null +++ b/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> + + ) +} \ No newline at end of file diff --git a/src/compositions/CollapsibleImageWithText/styles.module.scss b/src/compositions/CollapsibleImageWithText/styles.module.scss new file mode 100644 index 0000000..076d2a3 --- /dev/null +++ b/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; + } +} \ No newline at end of file diff --git a/src/compositions/ImageWithText/ImageWithText.stories.tsx b/src/compositions/ImageWithText/ImageWithText.stories.tsx index c1bf63b..60a5183 100644 --- a/src/compositions/ImageWithText/ImageWithText.stories.tsx +++ b/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, diff --git a/src/pageComponents/Home/Home.tsx b/src/pageComponents/Home/Home.tsx index 4c02210..cc5da3c 100644 --- a/src/pageComponents/Home/Home.tsx +++ b/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'} /> diff --git a/src/pageComponents/Home/MoreInformation.tsx b/src/pageComponents/Home/MoreInformation.tsx new file mode 100644 index 0000000..b3f52d6 --- /dev/null +++ b/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> + </> + ) +} \ No newline at end of file