)
diff --git a/src/components/MassTable/bible.svg b/src/components/MassTable/bible.svg
index a8ebdac..68b2c89 100644
--- a/src/components/MassTable/bible.svg
+++ b/src/components/MassTable/bible.svg
@@ -1,2 +1,2 @@
-
\ No newline at end of file
+
\ No newline at end of file
diff --git a/src/components/MassTable/family.svg b/src/components/MassTable/family.svg
index 5c32659..448c2ee 100644
--- a/src/components/MassTable/family.svg
+++ b/src/components/MassTable/family.svg
@@ -2,7 +2,7 @@
)
diff --git a/src/components/Menu/styles.module.css b/src/components/Menu/styles.module.scss
similarity index 77%
rename from src/components/Menu/styles.module.css
rename to src/components/Menu/styles.module.scss
index df51614..e283214 100644
--- a/src/components/Menu/styles.module.css
+++ b/src/components/Menu/styles.module.scss
@@ -1,15 +1,19 @@
+@import "template.scss";
+
.nav {
display: flex;
align-items: center;
gap: 20px;
- color: #1f1f1f;
- padding: 15px;
- border-bottom: 1px solid rgba(255, 255, 255, 0.67);
- margin-bottom: 2.5em;
-}
-
-.white {
- color: #eeeeee;
+ color: $base-color;
+ padding: 15px 45px;
+ background: rgba(245, 245, 245, 0.65);
+ position: fixed;
+ left: 0;
+ top: 0;
+ width: 100%;
+ box-sizing: border-box;
+ z-index: 1;
+ backdrop-filter: blur(8px);
}
.navMobile {
diff --git a/src/components/Section/Section.stories.tsx b/src/components/Section/Section.stories.tsx
new file mode 100644
index 0000000..925be59
--- /dev/null
+++ b/src/components/Section/Section.stories.tsx
@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { Section } from './Section'
+
+const meta: Meta = {
+ component: Section,
+}
+
+type Story = StoryObj
+export default meta
+
+export const Default: Story = {
+ args: {
+ children: 'Default',
+ },
+}
+
+export const SoftBackground: Story = {
+ args: {
+ children: "some content",
+ backgroundColor: "soft"
+ }
+}
diff --git a/src/components/Section/Section.tsx b/src/components/Section/Section.tsx
new file mode 100644
index 0000000..ea5b17b
--- /dev/null
+++ b/src/components/Section/Section.tsx
@@ -0,0 +1,20 @@
+import classNames from 'classnames'
+import styles from "./styles.module.scss"
+
+export type BackgroundColor = "soft" | undefined
+
+type SectionProps = {
+ backgroundColor?: BackgroundColor
+ children: React.ReactNode;
+}
+
+export const Section = ({ children, backgroundColor }: SectionProps) => {
+ return (
+
+ {children}
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/Section/styles.module.scss b/src/components/Section/styles.module.scss
new file mode 100644
index 0000000..8fc4914
--- /dev/null
+++ b/src/components/Section/styles.module.scss
@@ -0,0 +1,15 @@
+@import "template.scss";
+
+.section {
+ padding: 130px 0;
+}
+
+.shade2 {
+ background-color: $shade2;
+}
+
+@media screen and (max-width: 576px) {
+ .section {
+ padding: 70px 0;
+ }
+}
\ No newline at end of file
diff --git a/src/components/SideSlider/SideSlider.stories.tsx b/src/components/SideSlider/SideSlider.stories.tsx
new file mode 100644
index 0000000..673532a
--- /dev/null
+++ b/src/components/SideSlider/SideSlider.stories.tsx
@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { SideSlider } from './SideSlider'
+
+const meta: Meta = {
+ component: SideSlider,
+}
+
+type Story = StoryObj;
+export default meta
+
+export const Default: Story = {
+ args: {},
+}
\ No newline at end of file
diff --git a/src/components/SideSlider/SideSlider.tsx b/src/components/SideSlider/SideSlider.tsx
new file mode 100644
index 0000000..386a210
--- /dev/null
+++ b/src/components/SideSlider/SideSlider.tsx
@@ -0,0 +1,22 @@
+import styles from "./styles.module.scss"
+
+type SideSliderProps = {
+ children: React.ReactNode;
+}
+
+export const SideSlider = ({ children }: SideSliderProps) => {
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/Title/styles.module.scss b/src/components/Title/styles.module.scss
new file mode 100644
index 0000000..fd84a2f
--- /dev/null
+++ b/src/components/Title/styles.module.scss
@@ -0,0 +1,43 @@
+@import "template.scss";
+
+.title {
+ color: $base-color;
+ margin-top: 20px;
+}
+
+.extraLarge {
+ font-size: 90px;
+ font-weight: 800;
+}
+
+.large {
+ font-size: 60px;
+ font-weight: 800;
+}
+
+.medium {
+ font-size: 40px;
+ font-weight: 700;
+}
+
+.left {
+ text-align: left;
+}
+
+.center {
+ text-align: center;
+}
+
+@media screen and (max-width: 576px) {
+ .extraLarge {
+ font-size: 60px;
+ }
+
+ .large {
+ font-size: 40px;
+ }
+
+ .medium {
+ font-size: 24px;
+ }
+}
\ No newline at end of file
diff --git a/src/components/TwoColumnText/TwoColumnText.stories.tsx b/src/components/TwoColumnText/TwoColumnText.stories.tsx
new file mode 100644
index 0000000..5c6e10f
--- /dev/null
+++ b/src/components/TwoColumnText/TwoColumnText.stories.tsx
@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { TwoColumnText } from './TwoColumnText'
+
+const meta: Meta = {
+ component: TwoColumnText,
+}
+
+type Story = StoryObj;
+export default meta
+
+export const Default: Story = {
+ args: {
+ text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consequat porttitor volutpat. Mauris fermentum mi auctor porttitor sagittis. Proin quis congue elit. Nunc blandit auctor risus, in vestibulum nulla convallis id. Suspendisse potenti. Vestibulum tellus justo, imperdiet id ultrices quis, fringilla eget mauris. Sed sit amet nisl sed lectus tempus dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Mauris pulvinar ex ligula, sit amet tristique nunc varius sit amet.\n" +
+ "\n" +
+ "Curabitur sollicitudin, nulla nec sodales bibendum, nisi magna consequat arcu, non mollis est ligula pharetra mauris. Integer vehicula dolor urna, pharetra ultrices lectus maximus ac. Aliquam a lacus ut tortor fringilla dignissim. Curabitur sapien neque, ullamcorper ut lobortis sed, lobortis interdum lectus. Fusce pharetra maximus quam sed porta. Sed fermentum nibh vel elit lacinia malesuada. Suspendisse potenti. Suspendisse a dictum dui. Nulla rhoncus a nisi eu lacinia. Vestibulum at porta augue. Aliquam fermentum, nulla et aliquet maximus, dui nisi bibendum justo, eget placerat massa nulla et risus. Phasellus eleifend ante facilisis hendrerit lacinia. Aliquam eget dignissim nisi, in vehicula ligula.\n" +
+ "\n" +
+ "Curabitur at urna ornare, pretium nisl vel, ornare lacus. Morbi ante odio, bibendum at nunc vitae, scelerisque eleifend nisi. Quisque finibus imperdiet nulla sed suscipit. Phasellus ex libero, elementum vitae mollis et, faucibus vel magna. Proin vitae quam quis ipsum rhoncus vehicula. Ut porta ligula rutrum orci posuere, nec consequat est semper. Suspendisse potenti. Donec cursus erat sit amet auctor iaculis. Quisque sit amet rhoncus ex. Morbi placerat tincidunt condimentum. Aenean auctor, arcu elementum dictum sagittis, nibh tellus varius nulla, non mollis dui metus at leo. Ut porta, tellus at convallis commodo, orci odio faucibus purus, et mollis sapien lacus ut arcu. Fusce eget nisi finibus, interdum leo non, pulvinar mauris. Phasellus egestas finibus libero, non porttitor eros accumsan ut. Morbi elementum lorem ac lorem malesuada, quis dictum lorem efficitur."
+ },
+}
\ No newline at end of file
diff --git a/src/components/TwoColumnText/TwoColumnText.tsx b/src/components/TwoColumnText/TwoColumnText.tsx
new file mode 100644
index 0000000..0357885
--- /dev/null
+++ b/src/components/TwoColumnText/TwoColumnText.tsx
@@ -0,0 +1,13 @@
+import styles from "./styles.module.scss"
+
+type TwoColumnTextProps = {
+ text: string;
+}
+
+export const TwoColumnText = ({text}: TwoColumnTextProps) => {
+ return (
+
+ {text}
+
+ )
+}
\ No newline at end of file
diff --git a/src/components/TwoColumnText/styles.module.scss b/src/components/TwoColumnText/styles.module.scss
new file mode 100644
index 0000000..0d1c333
--- /dev/null
+++ b/src/components/TwoColumnText/styles.module.scss
@@ -0,0 +1,20 @@
+@import "template.scss";
+
+.columns {
+ column-count: 2;
+ white-space: preserve;
+ column-gap: 80px;
+ column-rule: $shade2 1px solid;
+}
+
+@media screen and (max-width: 900px) {
+ .columns {
+ column-gap: 40px;
+ }
+}
+
+@media screen and (max-width: 576px) {
+ .columns {
+ column-count: 1;
+ }
+}
\ No newline at end of file
diff --git a/src/components/BannerText/BannerText.stories.ts b/src/components/archive/BannerText/BannerText.stories.ts
similarity index 100%
rename from src/components/BannerText/BannerText.stories.ts
rename to src/components/archive/BannerText/BannerText.stories.ts
diff --git a/src/components/BannerText/BannerText.tsx b/src/components/archive/BannerText/BannerText.tsx
similarity index 76%
rename from src/components/BannerText/BannerText.tsx
rename to src/components/archive/BannerText/BannerText.tsx
index 943f708..3162c12 100644
--- a/src/components/BannerText/BannerText.tsx
+++ b/src/components/archive/BannerText/BannerText.tsx
@@ -1,5 +1,5 @@
import styles from './bannerText.module.css'
-import { faustina, lato } from '@/app/fonts'
+import { faustina, defaultFont } from '@/app/fonts'
export const BannerText = () => {
return (
@@ -10,7 +10,7 @@ export const BannerText = () => {
HEILIGE
DREI KÖNIGE
-
+
Berlin Nord-Neukölln
diff --git a/src/components/BannerText/bannerText.module.css b/src/components/archive/BannerText/bannerText.module.css
similarity index 97%
rename from src/components/BannerText/bannerText.module.css
rename to src/components/archive/BannerText/bannerText.module.css
index 6cf278c..a0b8426 100644
--- a/src/components/BannerText/bannerText.module.css
+++ b/src/components/archive/BannerText/bannerText.module.css
@@ -11,6 +11,7 @@
.container {
position: absolute;
bottom: 100px;
+ color: #ffffff;
}
.name {
diff --git a/src/components/Card/Card.stories.tsx b/src/components/archive/Card/Card.stories.tsx
similarity index 100%
rename from src/components/Card/Card.stories.tsx
rename to src/components/archive/Card/Card.stories.tsx
diff --git a/src/components/Card/Card.tsx b/src/components/archive/Card/Card.tsx
similarity index 100%
rename from src/components/Card/Card.tsx
rename to src/components/archive/Card/Card.tsx
diff --git a/src/components/Card/styles.module.css b/src/components/archive/Card/styles.module.css
similarity index 100%
rename from src/components/Card/styles.module.css
rename to src/components/archive/Card/styles.module.css
diff --git a/src/components/HomeBanner/HomeBanner.css b/src/components/archive/HomeBanner/HomeBanner.css
similarity index 100%
rename from src/components/HomeBanner/HomeBanner.css
rename to src/components/archive/HomeBanner/HomeBanner.css
diff --git a/src/components/HomeBanner/HomeBanner.stories.ts b/src/components/archive/HomeBanner/HomeBanner.stories.ts
similarity index 77%
rename from src/components/HomeBanner/HomeBanner.stories.ts
rename to src/components/archive/HomeBanner/HomeBanner.stories.ts
index 2968071..a65f163 100644
--- a/src/components/HomeBanner/HomeBanner.stories.ts
+++ b/src/components/archive/HomeBanner/HomeBanner.stories.ts
@@ -1,5 +1,5 @@
import type { Meta, StoryObj } from '@storybook/react'
-import { HomeBanner } from '@/components/HomeBanner/HomeBanner'
+import { HomeBanner } from '@/components/archive/HomeBanner/HomeBanner'
const meta: Meta = {
component: HomeBanner,
diff --git a/src/components/HomeBanner/HomeBanner.tsx b/src/components/archive/HomeBanner/HomeBanner.tsx
similarity index 100%
rename from src/components/HomeBanner/HomeBanner.tsx
rename to src/components/archive/HomeBanner/HomeBanner.tsx
diff --git a/src/components/HomeBanner/bg.svg b/src/components/archive/HomeBanner/bg.svg
similarity index 100%
rename from src/components/HomeBanner/bg.svg
rename to src/components/archive/HomeBanner/bg.svg
diff --git a/src/components/MassTimer/MassTimer.stories.ts b/src/components/archive/MassTimer/MassTimer.stories.ts
similarity index 67%
rename from src/components/MassTimer/MassTimer.stories.ts
rename to src/components/archive/MassTimer/MassTimer.stories.ts
index 6ec86af..92c05ab 100644
--- a/src/components/MassTimer/MassTimer.stories.ts
+++ b/src/components/archive/MassTimer/MassTimer.stories.ts
@@ -13,7 +13,13 @@ export const OneDay: Story = {
args: {
nextMass: {
id: '1',
- location: '231234',
+ location: {
+ id: "d",
+ name: "St. Richard",
+ address: "Wegstraße 12",
+ updatedAt: "2025-08-23T15:00:00.000Z",
+ createdAt: '2025-08-23T15:00:00.000Z',
+ },
date: '2025-08-23T15:00:00.000Z',
type: 'WORD',
cancelled: false,
@@ -28,7 +34,13 @@ export const TimeOut: Story = {
args: {
nextMass: {
id: '1',
- location: '231234',
+ location: {
+ id: "d",
+ name: "St. Richard",
+ address: "Wegstraße 12",
+ updatedAt: "2025-08-23T15:00:00.000Z",
+ createdAt: '2025-08-23T15:00:00.000Z',
+ },
date: '2025-08-23T15:00:00.000Z',
type: 'WORD',
cancelled: false,
diff --git a/src/components/MassTimer/MassTimer.tsx b/src/components/archive/MassTimer/MassTimer.tsx
similarity index 88%
rename from src/components/MassTimer/MassTimer.tsx
rename to src/components/archive/MassTimer/MassTimer.tsx
index 22bb870..b4e5b11 100644
--- a/src/components/MassTimer/MassTimer.tsx
+++ b/src/components/archive/MassTimer/MassTimer.tsx
@@ -1,9 +1,9 @@
'use client'
-import { useCountdown } from '@/components/MassTimer/useCountdown'
+import { useCountdown } from '@/components/archive/MassTimer/useCountdown'
import styles from './masstimer.module.css'
import { useState } from 'react'
-import { MassTimerTooltip } from '@/components/MassTimerTooltip/MassTimerTooltip'
+import { MassTimerTooltip } from '@/components/archive/MassTimerTooltip/MassTimerTooltip'
import { Worship } from '@/payload-types'
type MassTimerProps = {
diff --git a/src/components/MassTimer/masstimer.module.css b/src/components/archive/MassTimer/masstimer.module.css
similarity index 100%
rename from src/components/MassTimer/masstimer.module.css
rename to src/components/archive/MassTimer/masstimer.module.css
diff --git a/src/components/MassTimer/useCountdown.ts b/src/components/archive/MassTimer/useCountdown.ts
similarity index 100%
rename from src/components/MassTimer/useCountdown.ts
rename to src/components/archive/MassTimer/useCountdown.ts
diff --git a/src/components/archive/MassTimerTooltip/MassTimerTooltip.stories.ts b/src/components/archive/MassTimerTooltip/MassTimerTooltip.stories.ts
new file mode 100644
index 0000000..e3936cc
--- /dev/null
+++ b/src/components/archive/MassTimerTooltip/MassTimerTooltip.stories.ts
@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { MassTimerTooltip } from './MassTimerTooltip'
+
+const meta: Meta = {
+ component: MassTimerTooltip,
+}
+
+type Story = StoryObj
+export default meta
+
+export const Default: Story = {
+ args: {
+ nextMass: {
+ id: "12",
+ date: '2024-08-23T15:00:00.000Z',
+ location: {
+ id: "d",
+ name: "St. Richard",
+ address: "Wegstraße 12",
+ updatedAt: "2025-08-23T15:00:00.000Z",
+ createdAt: '2025-08-23T15:00:00.000Z',
+ },
+ type: "MASS",
+ cancelled: false,
+ updatedAt: '2025-08-23T15:00:00.000Z',
+ createdAt: '2025-08-23T15:00:00.000Z'
+ }
+ },
+}
diff --git a/src/components/MassTimerTooltip/MassTimerTooltip.tsx b/src/components/archive/MassTimerTooltip/MassTimerTooltip.tsx
similarity index 100%
rename from src/components/MassTimerTooltip/MassTimerTooltip.tsx
rename to src/components/archive/MassTimerTooltip/MassTimerTooltip.tsx
diff --git a/src/components/MassTimerTooltip/clara.svg b/src/components/archive/MassTimerTooltip/clara.svg
similarity index 100%
rename from src/components/MassTimerTooltip/clara.svg
rename to src/components/archive/MassTimerTooltip/clara.svg
diff --git a/src/components/MassTimerTooltip/massTimerTooltip.module.css b/src/components/archive/MassTimerTooltip/massTimerTooltip.module.css
similarity index 97%
rename from src/components/MassTimerTooltip/massTimerTooltip.module.css
rename to src/components/archive/MassTimerTooltip/massTimerTooltip.module.css
index fa89f78..94b2365 100644
--- a/src/components/MassTimerTooltip/massTimerTooltip.module.css
+++ b/src/components/archive/MassTimerTooltip/massTimerTooltip.module.css
@@ -1,5 +1,5 @@
.tooltip {
- width: 300px;
+ width: 310px;
padding: 20px;
color: #4d4d4d;
background: rgb(244, 244, 244);
diff --git a/src/components/MassTitle/MassTitle.stories.tsx b/src/components/archive/MassTitle/MassTitle.stories.tsx
similarity index 100%
rename from src/components/MassTitle/MassTitle.stories.tsx
rename to src/components/archive/MassTitle/MassTitle.stories.tsx
diff --git a/src/components/MassTitle/MassTitle.tsx b/src/components/archive/MassTitle/MassTitle.tsx
similarity index 100%
rename from src/components/MassTitle/MassTitle.tsx
rename to src/components/archive/MassTitle/MassTitle.tsx
diff --git a/src/components/MassTitle/styles.module.css b/src/components/archive/MassTitle/styles.module.css
similarity index 100%
rename from src/components/MassTitle/styles.module.css
rename to src/components/archive/MassTitle/styles.module.css
diff --git a/src/components/MenuBaseLayer/MenuBaseLayer.stories.tsx b/src/components/archive/MenuBaseLayer/MenuBaseLayer.stories.tsx
similarity index 74%
rename from src/components/MenuBaseLayer/MenuBaseLayer.stories.tsx
rename to src/components/archive/MenuBaseLayer/MenuBaseLayer.stories.tsx
index 6bfeff1..9176bf3 100644
--- a/src/components/MenuBaseLayer/MenuBaseLayer.stories.tsx
+++ b/src/components/archive/MenuBaseLayer/MenuBaseLayer.stories.tsx
@@ -1,5 +1,5 @@
import { Meta, StoryObj } from '@storybook/react'
-import { MenuBaseLayer } from '@/components/MenuBaseLayer/MenuBaseLayer'
+import { MenuBaseLayer } from '@/components/archive/MenuBaseLayer/MenuBaseLayer'
const meta: Meta = {
component: MenuBaseLayer,
diff --git a/src/components/MenuBaseLayer/MenuBaseLayer.tsx b/src/components/archive/MenuBaseLayer/MenuBaseLayer.tsx
similarity index 100%
rename from src/components/MenuBaseLayer/MenuBaseLayer.tsx
rename to src/components/archive/MenuBaseLayer/MenuBaseLayer.tsx
diff --git a/src/components/MenuBaseLayer/bg.svg b/src/components/archive/MenuBaseLayer/bg.svg
similarity index 100%
rename from src/components/MenuBaseLayer/bg.svg
rename to src/components/archive/MenuBaseLayer/bg.svg
diff --git a/src/components/MenuBaseLayer/style.module.css b/src/components/archive/MenuBaseLayer/style.module.css
similarity index 78%
rename from src/components/MenuBaseLayer/style.module.css
rename to src/components/archive/MenuBaseLayer/style.module.css
index 3d36c91..dcd360b 100644
--- a/src/components/MenuBaseLayer/style.module.css
+++ b/src/components/archive/MenuBaseLayer/style.module.css
@@ -1,7 +1,7 @@
.background {
width: 100%;
height: 340px;
- background-image: url('./bg.svg');
+ background-image: url('bg.svg');
background-size: 100% 100%;
position: absolute;
top: 0;
diff --git a/src/compositions/ContactForm/ContactForm.stories.tsx b/src/compositions/ContactForm/ContactForm.stories.tsx
new file mode 100644
index 0000000..964a2bf
--- /dev/null
+++ b/src/compositions/ContactForm/ContactForm.stories.tsx
@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { ContactForm } from './ContactForm'
+
+const meta: Meta = {
+ component: ContactForm,
+}
+
+type Story = StoryObj;
+export default meta
+
+export const Default: Story = {
+ args: {},
+}
\ No newline at end of file
diff --git a/src/compositions/ContactForm/ContactForm.tsx b/src/compositions/ContactForm/ContactForm.tsx
new file mode 100644
index 0000000..db190eb
--- /dev/null
+++ b/src/compositions/ContactForm/ContactForm.tsx
@@ -0,0 +1,24 @@
+import { Input } from '@/components/Input/Input'
+import { Button } from '@/components/Button/Button'
+import styles from "./styles.module.scss"
+import classNames from 'classnames'
+
+export const ContactForm = () => {
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/src/compositions/ContactForm/styles.module.scss b/src/compositions/ContactForm/styles.module.scss
new file mode 100644
index 0000000..de4ae2d
--- /dev/null
+++ b/src/compositions/ContactForm/styles.module.scss
@@ -0,0 +1,8 @@
+.firsRow {
+ display: flex;
+ gap: 20px;
+}
+
+.row {
+ margin-top: 15px;
+}
\ No newline at end of file
diff --git a/src/compositions/ContactSection/ContactSection.stories.tsx b/src/compositions/ContactSection/ContactSection.stories.tsx
new file mode 100644
index 0000000..48bf914
--- /dev/null
+++ b/src/compositions/ContactSection/ContactSection.stories.tsx
@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { ContactSection } from './ContactSection'
+
+const meta: Meta = {
+ component: ContactSection,
+}
+
+type Story = StoryObj;
+export default meta
+
+export const Default: Story = {
+ args: {},
+}
\ No newline at end of file
diff --git a/src/compositions/ContactSection/ContactSection.tsx b/src/compositions/ContactSection/ContactSection.tsx
new file mode 100644
index 0000000..f1ff111
--- /dev/null
+++ b/src/compositions/ContactSection/ContactSection.tsx
@@ -0,0 +1,31 @@
+import { Section } from '@/components/Section/Section'
+import { Container } from '@/components/Container/Container'
+import { ContactForm } from '@/compositions/ContactForm/ContactForm'
+import { Title } from '@/components/Title/Title'
+
+type Col50Props = {
+ children?: React.ReactNode
+}
+
+const Col50 = ({children}: Col50Props) => {
+ return
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque lacinia efficitur sapien, vel molestie ligula fermentum rutrum. Maecenas vel mattis leo. Donec dictum convallis mi ac fermentum. Praesent imperdiet dictum arcu, vel lacinia est accumsan ut. Mauris ultrices leo ut mi eleifend, at porttitor mauris condimentum. Quisque a viverra tellus. Cras eu euismod augue. Morbi tristique a nisi vitae tincidunt. Nullam eget dignissim risus, ut tempor nulla. Proin suscipit mi sed leo posuere scelerisque. Sed vel semper ligula.
+
+
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/compositions/ContentWithSlider/ContentWithSlider.stories.tsx b/src/compositions/ContentWithSlider/ContentWithSlider.stories.tsx
new file mode 100644
index 0000000..7cbb01e
--- /dev/null
+++ b/src/compositions/ContentWithSlider/ContentWithSlider.stories.tsx
@@ -0,0 +1,46 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { ContentWithSlider } from './ContentWithSlider'
+import { Title } from '@/components/Title/Title'
+
+const meta: Meta = {
+ component: ContentWithSlider,
+}
+
+type Story = StoryObj;
+export default meta
+
+export const Default: Story = {
+ args: {
+ slider: "This is some content",
+ children: <>
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in vehicula ex, vel auctor sapien. Vestibulum ac
+ luctus sem. Proin ut pharetra nisl. Fusce id rutrum metus, in molestie nulla. Duis cursus mi nulla, vitae mollis
+ ex pellentesque sed. Nullam placerat, urna rhoncus aliquet vestibulum, metus lectus volutpat velit, ut molestie
+ est nisi lobortis sem. Mauris fermentum consectetur leo quis rutrum. Etiam non nisl convallis, volutpat lacus
+ vel, pharetra enim. Morbi sollicitudin molestie lorem et finibus. Pellentesque vitae convallis ligula, vitae
+ malesuada lectus. Nulla eleifend lacus commodo, condimentum magna sit amet, tempor nulla.
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in vehicula ex, vel auctor sapien. Vestibulum ac
+ luctus sem. Proin ut pharetra nisl. Fusce id rutrum metus, in molestie nulla. Duis cursus mi nulla, vitae mollis
+ ex pellentesque sed. Nullam placerat, urna rhoncus aliquet vestibulum, metus lectus volutpat velit, ut molestie
+ est nisi lobortis sem. Mauris fermentum consectetur leo quis rutrum. Etiam non nisl convallis, volutpat lacus
+ vel, pharetra enim. Morbi sollicitudin molestie lorem et finibus. Pellentesque vitae convallis ligula, vitae
+ malesuada lectus. Nulla eleifend lacus commodo, condimentum magna sit amet, tempor nulla.
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in vehicula ex, vel auctor sapien. Vestibulum ac
+ luctus sem. Proin ut pharetra nisl. Fusce id rutrum metus, in molestie nulla. Duis cursus mi nulla, vitae mollis
+ ex pellentesque sed. Nullam placerat, urna rhoncus aliquet vestibulum, metus lectus volutpat velit, ut molestie
+ est nisi lobortis sem. Mauris fermentum consectetur leo quis rutrum. Etiam non nisl convallis, volutpat lacus
+ vel, pharetra enim. Morbi sollicitudin molestie lorem et finibus. Pellentesque vitae convallis ligula, vitae
+ malesuada lectus. Nulla eleifend lacus commodo, condimentum magna sit amet, tempor nulla.
+
+ >
+ },
+}
\ No newline at end of file
diff --git a/src/compositions/ContentWithSlider/ContentWithSlider.tsx b/src/compositions/ContentWithSlider/ContentWithSlider.tsx
new file mode 100644
index 0000000..a45f5b4
--- /dev/null
+++ b/src/compositions/ContentWithSlider/ContentWithSlider.tsx
@@ -0,0 +1,22 @@
+import styles from "./styles.module.scss"
+import { SideSlider } from '@/components/SideSlider/SideSlider'
+
+type ContentWithSliderProps = {
+ children: React.ReactNode;
+ slider: React.ReactNode;
+}
+
+export const ContentWithSlider = ({children, slider}: ContentWithSliderProps) => {
+ return (
+
+
+ {children}
+
+
+
+ {slider}
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/compositions/ContentWithSlider/styles.module.scss b/src/compositions/ContentWithSlider/styles.module.scss
new file mode 100644
index 0000000..b2e1603
--- /dev/null
+++ b/src/compositions/ContentWithSlider/styles.module.scss
@@ -0,0 +1,32 @@
+.container {
+ position: relative;
+}
+
+.content {
+ max-width: 1100px;
+}
+
+.slider {
+ position: absolute;
+ right: 0;
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+@media screen and (max-width: 1350px) {
+ .content {
+ max-width: calc(100vw - 250px);
+ }
+}
+
+@media screen and (max-width: 700px) {
+ .content {
+ max-width: 100%;
+ }
+
+ .slider {
+ position: relative;
+ top: 20px;
+ transform: none;
+ }
+}
\ No newline at end of file
diff --git a/src/compositions/Footer/Footer.stories.tsx b/src/compositions/Footer/Footer.stories.tsx
new file mode 100644
index 0000000..85f6a6e
--- /dev/null
+++ b/src/compositions/Footer/Footer.stories.tsx
@@ -0,0 +1,13 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { Footer } from './Footer'
+
+const meta: Meta = {
+ component: Footer,
+}
+
+type Story = StoryObj;
+export default meta
+
+export const Default: Story = {
+ args: {},
+}
\ No newline at end of file
diff --git a/src/compositions/Footer/Footer.tsx b/src/compositions/Footer/Footer.tsx
new file mode 100644
index 0000000..84d96c7
--- /dev/null
+++ b/src/compositions/Footer/Footer.tsx
@@ -0,0 +1,31 @@
+import { Section } from '@/components/Section/Section'
+import { Container } from '@/components/Container/Container'
+import { Logo } from '@/components/Logo/Logo'
+import styles from "./styles.module.scss"
+
+
+export const Footer = () => {
+ return (
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/src/compositions/Footer/styles.module.scss b/src/compositions/Footer/styles.module.scss
new file mode 100644
index 0000000..f54a87d
--- /dev/null
+++ b/src/compositions/Footer/styles.module.scss
@@ -0,0 +1,10 @@
+@import "template.scss";
+
+
+.logo {
+ width: 200px;
+}
+
+.container {
+ color: $base-color;
+}
\ No newline at end of file
diff --git a/src/compositions/ImageCardSlider/ImageCardSlider.stories.tsx b/src/compositions/ImageCardSlider/ImageCardSlider.stories.tsx
new file mode 100644
index 0000000..1d8d528
--- /dev/null
+++ b/src/compositions/ImageCardSlider/ImageCardSlider.stories.tsx
@@ -0,0 +1,38 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { ImageCardSlider } from './ImageCardSlider'
+import { Container } from '@/components/Container/Container'
+
+const meta: Meta = {
+ component: ImageCardSlider,
+ decorators: [(Story) =>
+
+ ]
+}
+
+type Story = StoryObj;
+export default meta
+
+export const Default: Story = {
+ args: {
+ slides: [
+ {
+ id: "id1",
+ src: "https://www.sfcatholic.org/bishopsbulletin/wp-content/uploads/sites/3/2022/04/monstrance2-insta-1024x1024.jpg",
+ title: "Anbetung in Oktober",
+ href: "https://somelink"
+ },
+ {
+ id: "id2",
+ src: "https://www.dioezese-linz.at/img/ab/91/03938ac624e84d1cda12/Allerheiligen-Pfarre_miteinander_2_.png",
+ title: "Allerseelen",
+ href: "https://somelink"
+ },
+ {
+ id: "id3",
+ src: "https://i1.sndcdn.com/artworks-6CIZtxsNOaYIm98h-mL41yA-t500x500.jpg",
+ title: "Erntedankfest",
+ href: "https://somelink"
+ }
+ ]
+ },
+}
\ No newline at end of file
diff --git a/src/compositions/ImageCardSlider/ImageCardSlider.tsx b/src/compositions/ImageCardSlider/ImageCardSlider.tsx
new file mode 100644
index 0000000..2f087ab
--- /dev/null
+++ b/src/compositions/ImageCardSlider/ImageCardSlider.tsx
@@ -0,0 +1,36 @@
+import { ImageCard } from '@/components/ImageCard/ImageCard'
+import styles from "./styles.module.scss"
+import { StaticImageData } from 'next/image'
+import { Arrow } from '@/components/Arrow/Arrow'
+
+type Slide = {
+ id: string,
+ src: string | StaticImageData,
+ title: string,
+ href: string,
+}
+
+type ImageCardSliderProps = {
+ slides: Slide[]
+}
+
+export const ImageCardSlider = ({slides}: ImageCardSliderProps) => {
+ return (
+
+
+
+
+
+ {
+ slides.map(slide =>
+
+
)
+ }
+
+
+
+
+
+
+ )
+}
\ No newline at end of file
diff --git a/src/compositions/ImageCardSlider/styles.module.scss b/src/compositions/ImageCardSlider/styles.module.scss
new file mode 100644
index 0000000..205ff91
--- /dev/null
+++ b/src/compositions/ImageCardSlider/styles.module.scss
@@ -0,0 +1,40 @@
+@import "template.scss";
+
+.wrapper {
+ position: relative;
+}
+
+.arrowLeft {
+ position: absolute;
+ top: calc(50% - 25px);
+ left: -50px;
+}
+
+.arrowRight {
+ position: absolute;
+ right: -50px;
+ top: calc(50% - 25px);
+}
+
+.container {
+ display: flex;
+ gap: 20px;
+ align-items: center;
+ flex-wrap: wrap;
+}
+
+.item {
+ flex: 1 1 calc(33.333% - 20px);
+ aspect-ratio: 1 / 1;
+}
+
+@media screen and (max-width: 576px) {
+ .item {
+ flex: 0 0 100%;
+ margin-bottom: 20px;
+ }
+
+ .arrowLeft, .arrowRight {
+ display: none;
+ }
+}
\ No newline at end of file
diff --git a/src/compositions/ImageWithText/ImageWithText.stories.tsx b/src/compositions/ImageWithText/ImageWithText.stories.tsx
new file mode 100644
index 0000000..200f764
--- /dev/null
+++ b/src/compositions/ImageWithText/ImageWithText.stories.tsx
@@ -0,0 +1,33 @@
+import { Meta, StoryObj } from '@storybook/react'
+import forest from "./forest.jpeg"
+import chris from "./christophorus.jpeg"
+import { ImageWithText } from './ImageWithText'
+import { Button } from '@/components/Button/Button'
+
+const meta: Meta = {
+ component: ImageWithText,
+}
+
+type Story = StoryObj;
+export default meta
+
+export const AboutUs: Story = {
+ args: {
+ image: forest,
+ 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.',
+ link:
+ },
+}
+
+export const Christophorus: Story = {
+ args: {
+ image: chris,
+ backgroundColor: undefined,
+ title: 'St. Christhoporus',
+ text: 'Die St. Christophorus Kirche in Berlin-Neukölln ist ein bedeutendes Beispiel für modernen Kirchenbau in der Hauptstadt. Erbaut in den 1960er Jahren, spiegelt das Gebäude die Architektur und künstlerische Gestaltung dieser Zeit wider und zeichnet sich durch schlichte, klare Linien und einen funktionalen Stil aus. Die Kirche ist nach dem heiligen Christophorus benannt, dem Schutzpatron der Reisenden, und bietet den Gemeindemitgliedern und Besuchern einen Ort der Ruhe und Besinnung im lebhaften Stadtteil Neukölln. Neben Gottesdiensten finden hier regelmäßig kulturelle Veranstaltungen und soziale Projekte statt, die die Kirche zu einem wichtigen Treffpunkt im Kiez machen.',
+ },
+}
\ No newline at end of file
diff --git a/src/compositions/ImageWithText/ImageWithText.tsx b/src/compositions/ImageWithText/ImageWithText.tsx
new file mode 100644
index 0000000..8383dfb
--- /dev/null
+++ b/src/compositions/ImageWithText/ImageWithText.tsx
@@ -0,0 +1,42 @@
+import { BackgroundColor, Section } from '@/components/Section/Section'
+import { Title } from '@/components/Title/Title'
+import { Button } from '@/components/Button/Button'
+import { Container } from '@/components/Container/Container'
+import Image, { StaticImageData } from 'next/image'
+import styles from "./styles.module.scss"
+import classNames from 'classnames'
+
+type ImageWithTextProps = {
+ backgroundColor?: BackgroundColor,
+ title: string,
+ image: StaticImageData | string,
+ text: string
+ link?: React.ReactNode
+}
+
+export const ImageWithText = ({backgroundColor, title, image, text, link}: ImageWithTextProps) => {
+ return (
+
+
+