diff --git a/src/app/(home)/kontakt/page.tsx b/src/app/(home)/kontakt/page.tsx index 393b630..62a9fcc 100644 --- a/src/app/(home)/kontakt/page.tsx +++ b/src/app/(home)/kontakt/page.tsx @@ -1,11 +1,39 @@ import { PageHeader } from '@/compositions/PageHeader/PageHeader' +import { Section } from '@/components/Section/Section' +import { Container } from '@/components/Container/Container' +import { ContactSection } from '@/compositions/ContactSection/ContactSection' +import { Title } from '@/components/Title/Title' +import { P } from '@/components/Text/Paragraph' export default function ContactPage() { return ( <> + +
+ + +

+ Briesestraße 13
+ 12053 Berlin
+ 030-6889120
+ kontakt@dreikoenige.berlin +

+

+ Geöffnet:
+ Mo. 09 – 13 Uhr
+ Di. 12 – 15 Uhr
+ Do. 10 – 14 Uhr +

+
+
+ + ) diff --git a/src/app/(home)/mithelfen/page.tsx b/src/app/(home)/mithelfen/page.tsx index 4651586..778582a 100644 --- a/src/app/(home)/mithelfen/page.tsx +++ b/src/app/(home)/mithelfen/page.tsx @@ -1,9 +1,95 @@ +import styles from './styles.module.scss' import { PageHeader } from '@/compositions/PageHeader/PageHeader' +import { Section } from '@/components/Section/Section' +import { Container } from '@/components/Container/Container' +import { Title } from '@/components/Title/Title' +import { P } from '@/components/Text/Paragraph' +import { Input } from '@/components/Input/Input' +import { Button } from '@/components/Button/Button' export default function Page() { return ( <> - + + +
+ + + <P width={'3/4'}> + Gemeinsam können wir mehr erreichen! Wie wäre es zum Beispiel mit der Mitarbeit in der Jugendarbeit? Oder du + unterstützt ältere Menschen durch Besuche und bringst ihnen etwas Abwechslung in den Alltag. Auch bei der + Organisation von Gemeinde-Events sind helfende Hände immer willkommen. Vielleicht entdeckst du ja auch ein + Talent für den Kirchenchor oder möchtest die Messdienergruppe unterstützen? + </P> + <P width={'1/2'}> + Und vergiss nicht die vielen Möglichkeiten, dich über die Gemeinde hinaus sozial zu engagieren. Ob in der + Flüchtlingshilfe, der Obdachlosenhilfe oder der Nachbarschaftshilfe – es gibt viele Menschen, die deine + Unterstützung brauchen.<br /><br /> + </P> + + <Title + title={'Finanziell unterstützen'} + color={'contrast'} + fontStyle={'sans-serif'} + size={'md'} /> + <P width={'1/2'}> + Mit einer Spende ermöglichst du die vielfältigen Aktivitäten unserer Gemeinde und trägst dazu bei, dass wir + auch weiterhin Menschen in Not helfen können. Jeder Betrag, ob groß oder klein, ist wertvoll und kommt + direkt dort an, wo er gebraucht wird. + </P> + </Container> + </Section> + + <Section backgroundColor={'off-white'}> + <Container> + <Title + title={'Ihre Hilfe kommt an'} + size={'sm'} + /> + <P width={'1/2'}> + Mit Ihrer Spende leisten Sie einen wertvollen Beitrag für unsere Arbeit. Ihr Engagement ermöglicht es uns, + Menschen in Not zu helfen und ihnen eine bessere Zukunft zu ermöglichen. <br/><br/> + </P> + <form> + <div className={styles.form}> + <Input + name={'Amount'} + type={'number'} + placeholder={"10.00"} + /> + <Button size={'md'} type={'submit'}>Spenden</Button> + </div> + </form> + </Container> + </Section> + + <Section> + <Container> + <Title + title={'Im Gebet verbunden'} + color={'contrast'} + fontStyle={'sans-serif'} + size={'md'} /> + <P width={'1/2'}> + Das Gebet ist die stärkste Waffe des Christen. Es verbindet uns miteinander und mit Gott. Nimm an unseren + Gebetsgruppen teil oder bete für die Anliegen der Gemeinde und der Welt in deinem persönlichen Gebet. Auch + so + kannst du helfen! + </P> + <P width={'1/2'}> + Schau doch einfach mal im Pfarrbüro vorbei und informiere dich über die verschiedenen Möglichkeiten, dich zu + engagieren. Wir freuen uns auf dich! + </P> + </Container> + </Section> + <Section></Section> </> ) } \ No newline at end of file diff --git a/src/app/(home)/mithelfen/styles.module.scss b/src/app/(home)/mithelfen/styles.module.scss new file mode 100644 index 0000000..6bd1a0e --- /dev/null +++ b/src/app/(home)/mithelfen/styles.module.scss @@ -0,0 +1,7 @@ +@import "template.scss"; + +.form { + display: flex; + gap: 10px; + margin-bottom: 50px; +} \ No newline at end of file diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 2414c15..7327a5b 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -193,7 +193,7 @@ export default function RootLayout({ href: "/gruppe/dicke-linda" }, { - href: 'http://', + href: '/gruppe/die-unterstuetzer', title: 'Mitwirken', description: 'Reinigung, liturgischer Dienst & Co.', }, @@ -205,17 +205,17 @@ export default function RootLayout({ { title: "Exerzitien", description: "Zeit für Gott", - href: "https://" + href: "/gruppe/exerzitien" }, { title: "Reisen", description: "Gemeinsam Zeit verbringen", - href: "https://" + href: "/gruppe/reisen" }, { - title: "Wahlfahrt", + title: "Wallfahrt", description: "Gott näher kommen", - href: "https://" + href: "/gruppe/wallfahrt" } ] } diff --git a/src/components/Button/styles.module.scss b/src/components/Button/styles.module.scss index dec4b49..a87bd9f 100644 --- a/src/components/Button/styles.module.scss +++ b/src/components/Button/styles.module.scss @@ -10,7 +10,7 @@ transition: all 0.2s; cursor: pointer; text-decoration: none; - margin: 5px 0; + margin: 0; display: inline-block; } diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx index bc4709e..9de2ec9 100644 --- a/src/components/Input/Input.tsx +++ b/src/components/Input/Input.tsx @@ -2,7 +2,7 @@ import styles from "./styles.module.scss" type InputProps = { name: string; - type: 'textarea' | 'text' | 'email' + type: 'textarea' | 'text' | 'email' | 'number' placeholder?: string rows?: number }