feature: more pages

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 (
     <>
       <PageHeader
         title={"Kontakt"}
-        description={""}
+        description={"Haben Sie Fragen, Anregungen oder möchten Sie mit uns in Kontakt treten? Dann sind Sie hier genau richtig."}
+      />
+
+      <Section padding={"small"}>
+        <Container>
+          <Title title={"Pfarrei Heilige Drei Könige"} size="md"></Title>
+          <P width={"1/2"}>
+            Briesestraße 13<br/>
+            12053 Berlin <br/>
+            030-6889120 <br/>
+            kontakt@dreikoenige.berlin
+          </P>
+          <P width={"1/2"}>
+            <strong>Geöffnet:</strong><br/>
+            Mo. 09 – 13 Uhr <br/>
+            Di. 12 – 15 Uhr <br/>
+            Do. 10 – 14 Uhr
+          </P>
+        </Container>
+      </Section>
+
+      <ContactSection
+        title={"Kontaktformular"}
+        description={"Füllen Sie einfach unser Kontaktformular aus und wir werden uns umgehend mit Ihnen in Verbindung setzen. Oder senden Sie uns eine Nachricht auf kontakt@dreikoenige.berlin"}
       />
     </>
   )

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 (
     <>
-      <PageHeader title={'Mithelfen'} description={''} />
+      <PageHeader
+        title={'Mit anpacken und Gutes tun'}
+        description={'Du möchtest dich engagieren und etwas bewegen? Super! In unserer Gemeinde gibt es viele Wege, wie du deine Talente einsetzen und  Gottes Liebe weitergeben kannst. Ob du Zeit und Energie einbringen,  finanziell unterstützen oder im Gebet verbunden sein möchtest – jeder Beitrag zählt und bereichert unsere Gemeinschaft.'}
+      />
+
+      <Section padding={'small'} paddingBottom={"large"}>
+        <Container>
+          <Title
+            title={'Aktiv mitgestalten'}
+            color={'contrast'}
+            fontStyle={'sans-serif'}
+            size={'md'} />
+          <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>
     </>
   )
 }

src/app/(home)/mithelfen/styles.module.scss

@@ -0,0 +1,7 @@
+@import "template.scss";
+
+.form {
+  display: flex;
+  gap: 10px;
+  margin-bottom: 50px;
+}

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"
                     }
                   ]
                 }

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;
 }
 

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
 }