From 0afc27b02825c0bedd561cea5b83a0a0042f935f Mon Sep 17 00:00:00 2001
From: Benno Tielen <Benno@tielen.nl>
Date: Wed, 20 Nov 2024 15:21:45 +0100
Subject: [PATCH] feature: blog

---
 src/app/(payload)/admin/importMap.js          |  26 +--
 src/app/blog/[id]/page.tsx                    |  69 +++++--
 src/app/blog/[id]/styles.module.scss          |  11 ++
 src/app/globals.css                           |   6 +
 src/app/layout.tsx                            |   2 +-
 src/collections/Blog.ts                       |  53 ++---
 src/collections/Documents.ts                  |  18 ++
 src/collections/Media.ts                      |  29 ++-
 src/collections/blocks/Contactform.ts         |  39 ++++
 src/collections/blocks/Document.ts            |  30 +++
 src/collections/blocks/Paragraph.ts           |  32 +++
 src/components/Button/Button.tsx              |  18 +-
 src/components/Button/styles.module.scss      |   5 +-
 src/components/EventRow/styles.module.scss    |   1 +
 .../HorizontalRule/styles.module.scss         |   2 +-
 src/components/MassTable/styles.module.css    |   3 +-
 src/components/RawHTML/RawHTML.tsx            |   9 +
 src/components/Section/Section.tsx            |  13 +-
 src/components/Section/styles.module.scss     |  44 ++++-
 src/components/Text/HTMLText.tsx              |  19 ++
 src/components/Text/html.module.scss          |  17 ++
 .../ContactSection/ContactSection.tsx         |  17 +-
 src/pageComponents/Home/Home.tsx              |   1 -
 src/payload-types.ts                          | 182 +++++++++++++++---
 src/payload.config.ts                         |  34 +++-
 25 files changed, 563 insertions(+), 117 deletions(-)
 create mode 100644 src/app/blog/[id]/styles.module.scss
 create mode 100644 src/collections/Documents.ts
 create mode 100644 src/collections/blocks/Contactform.ts
 create mode 100644 src/collections/blocks/Document.ts
 create mode 100644 src/collections/blocks/Paragraph.ts
 create mode 100644 src/components/RawHTML/RawHTML.tsx
 create mode 100644 src/components/Text/HTMLText.tsx
 create mode 100644 src/components/Text/html.module.scss

diff --git a/src/app/(payload)/admin/importMap.js b/src/app/(payload)/admin/importMap.js
index dfe0789..bf0b4f9 100644
--- a/src/app/(payload)/admin/importMap.js
+++ b/src/app/(payload)/admin/importMap.js
@@ -1,22 +1,11 @@
 import { RscEntryLexicalCell as RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e } from '@payloadcms/richtext-lexical/rsc'
 import { RscEntryLexicalField as RscEntryLexicalField_44fe37237e0ebf4470c9990d8cb7b07e } from '@payloadcms/richtext-lexical/rsc'
 import { InlineToolbarFeatureClient as InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { HorizontalRuleFeatureClient as HorizontalRuleFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { UploadFeatureClient as UploadFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { BlockquoteFeatureClient as BlockquoteFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { RelationshipFeatureClient as RelationshipFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
+import { ParagraphFeatureClient as ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { LinkFeatureClient as LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { ChecklistFeatureClient as ChecklistFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { OrderedListFeatureClient as OrderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { UnorderedListFeatureClient as UnorderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { IndentFeatureClient as IndentFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { AlignFeatureClient as AlignFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { HeadingFeatureClient as HeadingFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { ParagraphFeatureClient as ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { InlineCodeFeatureClient as InlineCodeFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { SuperscriptFeatureClient as SuperscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { SubscriptFeatureClient as SubscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
-import { StrikethroughFeatureClient as StrikethroughFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { UnderlineFeatureClient as UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { BoldFeatureClient as BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
 import { ItalicFeatureClient as ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client'
@@ -25,22 +14,11 @@ export const importMap = {
   "@payloadcms/richtext-lexical/rsc#RscEntryLexicalCell": RscEntryLexicalCell_44fe37237e0ebf4470c9990d8cb7b07e,
   "@payloadcms/richtext-lexical/rsc#RscEntryLexicalField": RscEntryLexicalField_44fe37237e0ebf4470c9990d8cb7b07e,
   "@payloadcms/richtext-lexical/client#InlineToolbarFeatureClient": InlineToolbarFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#HorizontalRuleFeatureClient": HorizontalRuleFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#UploadFeatureClient": UploadFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#BlockquoteFeatureClient": BlockquoteFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#RelationshipFeatureClient": RelationshipFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
+  "@payloadcms/richtext-lexical/client#ParagraphFeatureClient": ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#LinkFeatureClient": LinkFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#ChecklistFeatureClient": ChecklistFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#OrderedListFeatureClient": OrderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#UnorderedListFeatureClient": UnorderedListFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#IndentFeatureClient": IndentFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#AlignFeatureClient": AlignFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#HeadingFeatureClient": HeadingFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#ParagraphFeatureClient": ParagraphFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#InlineCodeFeatureClient": InlineCodeFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#SuperscriptFeatureClient": SuperscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#SubscriptFeatureClient": SubscriptFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
-  "@payloadcms/richtext-lexical/client#StrikethroughFeatureClient": StrikethroughFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#UnderlineFeatureClient": UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#BoldFeatureClient": BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864,
   "@payloadcms/richtext-lexical/client#ItalicFeatureClient": ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864
diff --git a/src/app/blog/[id]/page.tsx b/src/app/blog/[id]/page.tsx
index 9e9aa16..b2f3bb9 100644
--- a/src/app/blog/[id]/page.tsx
+++ b/src/app/blog/[id]/page.tsx
@@ -1,10 +1,16 @@
 import { Section } from '@/components/Section/Section'
 import { Container } from '@/components/Container/Container'
 import { Title } from '@/components/Title/Title'
-import { ContentWithSlider } from '@/compositions/ContentWithSlider/ContentWithSlider'
 import { TextDiv } from '@/components/Text/TextDiv'
 import { Blog } from '@/payload-types'
 import { notFound } from 'next/navigation'
+import { readableDateTime } from '@/utils/readableDate'
+import { HR } from '@/components/HorizontalRule/HorizontalRule'
+import Image from 'next/image'
+import styles from "./styles.module.scss"
+import { HTMLText } from '@/components/Text/HTMLText'
+import { Button } from '@/components/Button/Button'
+import { ContactSection } from '@/compositions/ContactSection/ContactSection'
 
 async function fetchBlog(id: string) {
   const res = await fetch(`http://localhost:3000/api/blog/${id}`)
@@ -16,30 +22,67 @@ export default async function BlogPage({ params }: { params: Promise<{id: string
 
   const id = (await params).id;
   const data = await fetchBlog(id) as Blog;
+  const url = typeof data.photo === 'object' && data.photo?.sizes?.banner?.url;
 
   if(!data) {
     notFound();
   }
 
+  // determine if some margin at the bottom should be added
+  const length = data.content.length;
+  const shouldAddMargin = data.content[length - 1].blockType === "text"
+
   return (
-    <Section>
-      <Container>
-        <Title title={data.title}></Title>
-      </Container>
+    <>
+      <Section paddingBottom={"small"}>
+        <Container>
+          <Title title={data.title}></Title>
+          <strong><TextDiv text={data.excerpt} /></strong>
+          <p className={styles.published}>
+            Publiziert am {readableDateTime(data.createdAt)}
+          </p>
+        </Container>
+        <HR/>
+        <Container>
+          <div>
+            { typeof url === "string" &&
+              <Image className={styles.image} src={url} width={1100} height={400} alt={""} />
+            }
+          </div>
+        </Container>
+      </Section>
+
         <div>
-          {data.content && data.content.map(item => {
-            if (item.blockType === "ContentWithSlider") {
+          {data.content.map(item => {
+            if (item.blockType === "text" && item.content_html) {
               return (
-                <ContentWithSlider key={item.id} slider={item.sliderContent}>
-                  <Container position={"right"}>
-                    <TextDiv text={item.content} />
-                  </Container>
-                </ContentWithSlider>
+                <Container key={item.id}>
+                  <HTMLText width={item.width} html={item.content_html} />
+                </Container>
               );
             }
 
+            if (item.blockType === "document" && typeof item.file === "object") {
+              return (
+                <Container key={item.id}>
+                  <Section padding={"medium"}>
+                    <Button size={"lg"} href={item.file.url || "notfound"}>{item.button}</Button>
+                  </Section>
+                </Container>
+              )
+            }
+
+            if (item.blockType === "contactform") {
+              return (
+                <ContactSection key={item.id} title={item.title} description={item.description} />
+              )
+            }
           })}
         </div>
-    </Section>
+
+      { shouldAddMargin &&
+        <Section></Section>
+      }
+    </>
   )
 }
\ No newline at end of file
diff --git a/src/app/blog/[id]/styles.module.scss b/src/app/blog/[id]/styles.module.scss
new file mode 100644
index 0000000..3b17b46
--- /dev/null
+++ b/src/app/blog/[id]/styles.module.scss
@@ -0,0 +1,11 @@
+@import "template.scss";
+
+.image {
+  max-width: 100%;
+  height: auto;
+  border-radius: $border-radius;
+}
+
+.published {
+  font-size: 12px;
+}
\ No newline at end of file
diff --git a/src/app/globals.css b/src/app/globals.css
index 02109cc..94846a9 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -4,8 +4,14 @@ body {
   display: flex;
   flex-direction: column;
   min-height: 100vh;
+  color: #2c2c2c;
 }
 
 main {
   flex: 1;
 }
+
+.mainContent {
+  font-size: 20px;
+  line-height: 147%;
+}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 266eae1..9b3c770 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -17,7 +17,7 @@ export default function RootLayout({
     <html lang="en" className={defaultFont.className}>
       <body>
       <Menu />
-      <main>
+      <main className={"mainContent"}>
         {children}
       </main>
       <Footer />
diff --git a/src/collections/Blog.ts b/src/collections/Blog.ts
index f835bf2..49c6d99 100644
--- a/src/collections/Blog.ts
+++ b/src/collections/Blog.ts
@@ -1,36 +1,9 @@
-import { Block, CollectionConfig } from 'payload'
+import { CollectionConfig } from 'payload'
 import { isAdminOrEmployee } from '@/collections/access/admin'
+import { ParagraphBlock } from '@/collections/blocks/Paragraph'
+import { DocumentBlock } from '@/collections/blocks/Document'
+import { ContactformBlock } from '@/collections/blocks/Contactform'
 
-const QuoteBlock: Block = {
-  slug: 'Quote',
-  labels: {
-    singular: "Zitat",
-    plural: "Zitaten"
-  },
-  fields: [
-    {
-      name: 'quoteText',
-      type: 'text',
-      required: true
-    },
-  ],
-}
-
-const ContentWithSlider: Block = {
-  slug: 'ContentWithSlider',
-  fields: [
-    {
-      name: 'sliderContent',
-      type: 'textarea',
-      required: true
-    },
-    {
-      name: 'content',
-      type: 'textarea',
-      required: true
-    }
-  ]
-}
 
 export const Blog: CollectionConfig = {
   slug: 'blog',
@@ -65,16 +38,26 @@ export const Blog: CollectionConfig = {
         de: "Gemeinde"
       }
     },
+    {
+      name: 'excerpt',
+      type: 'textarea',
+      label: {
+        de: 'Auszug'
+      },
+      required: true,
+    },
     {
       name: 'content',
       type: 'blocks',
       minRows: 1,
       maxRows: 20,
       blocks: [
-        QuoteBlock,
-        ContentWithSlider
-      ]
-    }
+        ParagraphBlock,
+        DocumentBlock,
+        ContactformBlock
+      ],
+      required: true
+    },
   ],
   admin: {
     useAsTitle: 'title'
diff --git a/src/collections/Documents.ts b/src/collections/Documents.ts
new file mode 100644
index 0000000..438ecad
--- /dev/null
+++ b/src/collections/Documents.ts
@@ -0,0 +1,18 @@
+import type { CollectionConfig } from 'payload'
+
+export const Documents: CollectionConfig = {
+  slug: 'documents',
+  access: {
+    read: () => true,
+  },
+  fields: [
+    {
+      name: 'name',
+      type: 'text',
+      required: true
+    }
+  ],
+  upload: {
+    mimeTypes: ['application/pdf']
+  },
+}
\ No newline at end of file
diff --git a/src/collections/Media.ts b/src/collections/Media.ts
index 568cf42..fce39df 100644
--- a/src/collections/Media.ts
+++ b/src/collections/Media.ts
@@ -12,5 +12,32 @@ export const Media: CollectionConfig = {
       required: true,
     },
   ],
-  upload: true,
+  upload: {
+    imageSizes: [
+      {
+        name: 'thumbnail',
+        width: 350,
+        height: 350,
+        position: 'centre',
+      },
+      {
+        name: 'banner',
+        width: 1100,
+        height: 400,
+        position: 'centre',
+      },
+      {
+        name: 'tablet',
+        width: 1024,
+        // By specifying `undefined` or leaving a height undefined,
+        // the image will be sized to a certain width,
+        // but it will retain its original aspect ratio
+        // and calculate a height automatically.
+        height: undefined,
+        position: 'centre',
+      },
+    ],
+    adminThumbnail: 'thumbnail',
+    mimeTypes: ['image/*'],
+  },
 }
diff --git a/src/collections/blocks/Contactform.ts b/src/collections/blocks/Contactform.ts
new file mode 100644
index 0000000..be0226f
--- /dev/null
+++ b/src/collections/blocks/Contactform.ts
@@ -0,0 +1,39 @@
+import { Block } from 'payload'
+
+export const ContactformBlock: Block = {
+  slug: 'contactform',
+  labels: {
+    singular: {
+      de: "Kontaktformular"
+    },
+    plural: {
+      de: 'Kontaktformular'
+    }
+  },
+  fields: [
+    {
+      name: 'title',
+      type: 'text',
+      required: true,
+      defaultValue: 'Ich bin dabei!',
+      label: {
+        de: 'Titel'
+      }
+    },
+    {
+      name: 'description',
+      type: 'textarea',
+      label: {
+        de: 'Werbetext'
+      },
+      defaultValue: "Um dich anzumelden oder uns zu unterstützen, fülle bitte das Kontaktformular aus. Wir freuen uns sehr, dass du Teil unserer Gemeinschaft bist und mit deinem Engagement dazu beiträgst, unsere Ziele zu erreichen. Solltest du Fragen haben oder weitere Informationen benötigen, zögere nicht, uns zu kontaktieren – wir sind gerne für dich da!",
+      required: true
+    },
+    {
+      name: 'email',
+      type: 'email',
+      defaultValue: "kontakt@dreikoenige.berlin",
+      required: true
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/collections/blocks/Document.ts b/src/collections/blocks/Document.ts
new file mode 100644
index 0000000..a32424e
--- /dev/null
+++ b/src/collections/blocks/Document.ts
@@ -0,0 +1,30 @@
+import { Block } from 'payload'
+
+export const DocumentBlock: Block = {
+  slug: 'document',
+  labels: {
+    singular: {
+      de: "PDF Dokument"
+    },
+    plural: {
+      de: "PDF Dokumenten"
+    }
+  },
+  fields: [
+    {
+      name: 'file',
+      type: 'upload',
+      relationTo: 'documents',
+      required: true
+    },
+    {
+      name: 'button',
+      label: {
+        de: "Button text"
+      },
+      type: 'text',
+      defaultValue: 'Download Flyer',
+      required: true,
+    },
+  ]
+}
\ No newline at end of file
diff --git a/src/collections/blocks/Paragraph.ts b/src/collections/blocks/Paragraph.ts
new file mode 100644
index 0000000..5b719c7
--- /dev/null
+++ b/src/collections/blocks/Paragraph.ts
@@ -0,0 +1,32 @@
+import { Block } from 'payload'
+import { lexicalHTML } from '@payloadcms/richtext-lexical'
+
+export const ParagraphBlock: Block = {
+  slug: 'text',
+  labels: {
+    singular: {
+      de: 'Text'
+    },
+    plural: {
+      de: 'Text'
+    }
+  },
+  fields: [
+    {
+      name: 'content',
+      type: 'richText',
+      required: true
+    },
+    lexicalHTML('content', { name: 'content_html' }),
+    {
+      name: 'width',
+      label: {
+        de: "Breite"
+      },
+      type: 'radio',
+      options: ["1/2", "3/4"],
+      required: true,
+      defaultValue: "1/2"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
index 6192599..71f934f 100644
--- a/src/components/Button/Button.tsx
+++ b/src/components/Button/Button.tsx
@@ -4,6 +4,7 @@ import classNames from 'classnames'
 type ButtonProps = {
   size: 'lg' | 'md'
   type?: "button" | "submit" | "reset",
+  href?: string,
   children: React.ReactNode,
   onClick?: () => void,
 }
@@ -13,9 +14,24 @@ export function Button(
     type = "button",
     size,
     children,
-    onClick
+    onClick,
+    href
   }: ButtonProps
 ) {
+  if(href) {
+    return <a
+      href={href}
+      onClick={onClick}
+      className={classNames({
+        [styles.button]: true,
+        [styles.lg]: size === 'lg',
+        [styles.md]: size === 'md',
+      })}
+    >
+      {children}
+    </a>
+  }
+
   return (
     <button
       type={type}
diff --git a/src/components/Button/styles.module.scss b/src/components/Button/styles.module.scss
index 2c0fb36..0f58e06 100644
--- a/src/components/Button/styles.module.scss
+++ b/src/components/Button/styles.module.scss
@@ -2,13 +2,16 @@
 
 .button {
   background: $shade1;
-  color: $shade3;
+  color: #ffffff;
   border-radius: $border-radius;
   text-align: center;
   border: 0;
   font-weight: bold;
   transition: background 0.2s;
   cursor: pointer;
+  text-decoration: none;
+  margin: 5px 0;
+  display: inline-block;
 }
 
 .button:hover {
diff --git a/src/components/EventRow/styles.module.scss b/src/components/EventRow/styles.module.scss
index 72da9e1..c373760 100644
--- a/src/components/EventRow/styles.module.scss
+++ b/src/components/EventRow/styles.module.scss
@@ -26,6 +26,7 @@
   align-items: center;
   cursor: pointer;
   margin: 20px 0;
+  font-size: 18px;
 }
 
 .link {
diff --git a/src/components/HorizontalRule/styles.module.scss b/src/components/HorizontalRule/styles.module.scss
index d84fc92..303baa0 100644
--- a/src/components/HorizontalRule/styles.module.scss
+++ b/src/components/HorizontalRule/styles.module.scss
@@ -2,7 +2,7 @@
 
 .container {
   display: flex;
-  padding: 10px 5%;
+  padding: 20px 5%;
   gap: 10px;
 }
 
diff --git a/src/components/MassTable/styles.module.css b/src/components/MassTable/styles.module.css
index 4a8436b..85e86e9 100644
--- a/src/components/MassTable/styles.module.css
+++ b/src/components/MassTable/styles.module.css
@@ -4,6 +4,7 @@
   height: 24px;
   cursor: pointer;
   align-items: center;
+  font-size: 18px;
 }
 
 .link {
@@ -21,7 +22,7 @@
 }
 
 .time {
-  width: 70px;
+  width: 80px;
 }
 
 .table {
diff --git a/src/components/RawHTML/RawHTML.tsx b/src/components/RawHTML/RawHTML.tsx
new file mode 100644
index 0000000..b7f4fde
--- /dev/null
+++ b/src/components/RawHTML/RawHTML.tsx
@@ -0,0 +1,9 @@
+type RawHTMLProps = {
+  html: string
+}
+
+export const RawHTML = ({html}: RawHTMLProps) => {
+  return (
+    <div dangerouslySetInnerHTML={{__html: html}}></div>
+  )
+}
\ No newline at end of file
diff --git a/src/components/Section/Section.tsx b/src/components/Section/Section.tsx
index ce93a55..2a98023 100644
--- a/src/components/Section/Section.tsx
+++ b/src/components/Section/Section.tsx
@@ -5,13 +5,20 @@ export type BackgroundColor = "soft" | "off-white" | undefined
 
 type SectionProps = {
   backgroundColor?: BackgroundColor
-  children: React.ReactNode;
+  children?: React.ReactNode;
+  padding?: "small" | "medium" | "large"
+  paddingBottom?: "small" | "medium" | "large"
 }
 
-export const Section = ({ children, backgroundColor }: SectionProps) => {
+export const Section = ({ children, backgroundColor, padding = "large", paddingBottom }: SectionProps) => {
   return (
     <section className={classNames({
-      [styles.section]: true,
+      [styles.large]: padding == "large",
+      [styles.medium]: padding == "medium",
+      [styles.small]: padding == "small",
+      [styles.largeBottom]: paddingBottom == "large",
+      [styles.mediumBottom]: paddingBottom == "medium",
+      [styles.smallBottom]: paddingBottom == "small",
       [styles.shade2]: backgroundColor === "soft",
       [styles.shade3]: backgroundColor === "off-white"
     })}>
diff --git a/src/components/Section/styles.module.scss b/src/components/Section/styles.module.scss
index eb12880..823e7f9 100644
--- a/src/components/Section/styles.module.scss
+++ b/src/components/Section/styles.module.scss
@@ -1,9 +1,29 @@
 @import "template.scss";
 
-.section {
+.large {
   padding: 130px 0;
 }
 
+.medium {
+  padding: 70px 0;
+}
+
+.small {
+  padding: 30px 0;
+}
+
+.largeBottom {
+  padding-bottom: 130px;
+}
+
+.mediumBottom {
+  padding-bottom: 70px;
+}
+
+.smallBottom {
+  padding-bottom: 30px;
+}
+
 .shade2 {
   background-color: $shade2;
 }
@@ -13,7 +33,27 @@
 }
 
 @media screen and (max-width: 576px) {
-  .section {
+  .large {
     padding: 70px 0;
   }
+
+  .medium {
+    padding: 40px 0;
+  }
+
+  .small {
+    padding: 20px 0;
+  }
+
+  .largeBottom {
+    padding-bottom: 70px;
+  }
+
+  .mediumBottom {
+    padding-bottom: 40px;
+  }
+
+  .smallBottom {
+    padding-bottom: 20px;
+  }
 }
\ No newline at end of file
diff --git a/src/components/Text/HTMLText.tsx b/src/components/Text/HTMLText.tsx
new file mode 100644
index 0000000..a04c591
--- /dev/null
+++ b/src/components/Text/HTMLText.tsx
@@ -0,0 +1,19 @@
+import styles from "./html.module.scss"
+import { RawHTML } from '@/components/RawHTML/RawHTML'
+import classNames from 'classnames'
+
+type HTMLTextProps = {
+  width: "1/2" | "3/4",
+  html: string
+}
+
+export const HTMLText = ({width, html}: HTMLTextProps) => {
+  return (
+    <div className={classNames({
+      [styles.half]: width === "1/2",
+      [styles.threeFourth]: width === "3/4"
+    })}>
+      <RawHTML html={html} />
+    </div>
+  )
+}
\ No newline at end of file
diff --git a/src/components/Text/html.module.scss b/src/components/Text/html.module.scss
new file mode 100644
index 0000000..5249991
--- /dev/null
+++ b/src/components/Text/html.module.scss
@@ -0,0 +1,17 @@
+.half {
+  width: 50%;
+}
+
+.threeFourth {
+  width: 75%;
+}
+
+@media screen and (max-width: 576px){
+  .half {
+    width: 100%;
+  }
+
+  .threeFourth {
+    width: 100%;
+  }
+}
\ No newline at end of file
diff --git a/src/compositions/ContactSection/ContactSection.tsx b/src/compositions/ContactSection/ContactSection.tsx
index 72de1f4..67e5bcd 100644
--- a/src/compositions/ContactSection/ContactSection.tsx
+++ b/src/compositions/ContactSection/ContactSection.tsx
@@ -4,23 +4,22 @@ import { ContactForm } from '@/compositions/ContactForm/ContactForm'
 import { Title } from '@/components/Title/Title'
 import { Col } from '@/components/Flex/Col'
 import { Row } from '@/components/Flex/Row'
+import { TextDiv } from '@/components/Text/TextDiv'
 
-type Col50Props = {
-  children?: React.ReactNode
+type ContactSectionProps = {
+  title: string,
+  description: string
 }
 
 
-export const ContactSection = () => {
+export const ContactSection = ({title, description}: ContactSectionProps) => {
   return (
-    <Section>
+    <Section backgroundColor={"off-white"}>
       <Container>
         <Row>
           <Col>
-            <Title title="Kontakt" size={"lg"} />
-            <p>
-              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.
-            </p>
-
+            <Title title={title} size={"md"} />
+            <TextDiv text={description} />
           </Col>
           <Col>
             <ContactForm />
diff --git a/src/pageComponents/Home/Home.tsx b/src/pageComponents/Home/Home.tsx
index f6377e7..d49b7e2 100644
--- a/src/pageComponents/Home/Home.tsx
+++ b/src/pageComponents/Home/Home.tsx
@@ -10,7 +10,6 @@ import bread from '@/app/bread.jpg'
 import forest from "../../assets/forest.jpeg"
 import { ContentWithSlider } from '@/compositions/ContentWithSlider/ContentWithSlider'
 import { ContactSection } from '@/compositions/ContactSection/ContactSection'
-import { Events } from '@/compositions/Events/Events'
 import { ImageWithText } from '@/compositions/ImageWithText/ImageWithText'
 
 export const Home = () => {
diff --git a/src/payload-types.ts b/src/payload-types.ts
index be2d523..cfc2314 100644
--- a/src/payload-types.ts
+++ b/src/payload-types.ts
@@ -23,6 +23,7 @@ export interface Config {
     testimony: Testimony;
     page: Page;
     users: User;
+    documents: Document;
     media: Media;
     'payload-locked-documents': PayloadLockedDocument;
     'payload-preferences': PayloadPreference;
@@ -42,6 +43,7 @@ export interface Config {
     testimony: TestimonySelect<false> | TestimonySelect<true>;
     page: PageSelect<false> | PageSelect<true>;
     users: UsersSelect<false> | UsersSelect<true>;
+    documents: DocumentsSelect<false> | DocumentsSelect<true>;
     media: MediaSelect<false> | MediaSelect<true>;
     'payload-locked-documents': PayloadLockedDocumentsSelect<false> | PayloadLockedDocumentsSelect<true>;
     'payload-preferences': PayloadPreferencesSelect<false> | PayloadPreferencesSelect<true>;
@@ -146,6 +148,32 @@ export interface Media {
   height?: number | null;
   focalX?: number | null;
   focalY?: number | null;
+  sizes?: {
+    thumbnail?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    banner?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+    tablet?: {
+      url?: string | null;
+      width?: number | null;
+      height?: number | null;
+      mimeType?: string | null;
+      filesize?: number | null;
+      filename?: string | null;
+    };
+  };
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
@@ -184,26 +212,68 @@ export interface Blog {
   photo?: (string | null) | Media;
   title: string;
   parish?: (string | Parish)[] | null;
-  content?:
-    | (
-        | {
-            quoteText: string;
-            id?: string | null;
-            blockName?: string | null;
-            blockType: 'Quote';
-          }
-        | {
-            sliderContent: string;
-            content: string;
-            id?: string | null;
-            blockName?: string | null;
-            blockType: 'ContentWithSlider';
-          }
-      )[]
-    | null;
+  excerpt: string;
+  content: (
+    | {
+        content: {
+          root: {
+            type: string;
+            children: {
+              type: string;
+              version: number;
+              [k: string]: unknown;
+            }[];
+            direction: ('ltr' | 'rtl') | null;
+            format: 'left' | 'start' | 'center' | 'right' | 'end' | 'justify' | '';
+            indent: number;
+            version: number;
+          };
+          [k: string]: unknown;
+        };
+        content_html?: string | null;
+        width: '1/2' | '3/4';
+        id?: string | null;
+        blockName?: string | null;
+        blockType: 'text';
+      }
+    | {
+        file: string | Document;
+        button: string;
+        id?: string | null;
+        blockName?: string | null;
+        blockType: 'document';
+      }
+    | {
+        title: string;
+        description: string;
+        email: string;
+        id?: string | null;
+        blockName?: string | null;
+        blockType: 'contactform';
+      }
+  )[];
   updatedAt: string;
   createdAt: string;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "documents".
+ */
+export interface Document {
+  id: string;
+  name: string;
+  updatedAt: string;
+  createdAt: string;
+  url?: string | null;
+  thumbnailURL?: string | null;
+  filename?: string | null;
+  mimeType?: string | null;
+  filesize?: number | null;
+  width?: number | null;
+  height?: number | null;
+  focalX?: number | null;
+  focalY?: number | null;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "tweet".
@@ -392,6 +462,10 @@ export interface PayloadLockedDocument {
         relationTo: 'users';
         value: string | User;
       } | null)
+    | ({
+        relationTo: 'documents';
+        value: string | Document;
+      } | null)
     | ({
         relationTo: 'media';
         value: string | Media;
@@ -505,21 +579,33 @@ export interface BlogSelect<T extends boolean = true> {
   photo?: T;
   title?: T;
   parish?: T;
+  excerpt?: T;
   content?:
     | T
     | {
-        Quote?:
+        text?:
           | T
           | {
-              quoteText?: T;
+              content?: T;
+              content_html?: T;
+              width?: T;
               id?: T;
               blockName?: T;
             };
-        ContentWithSlider?:
+        document?:
           | T
           | {
-              sliderContent?: T;
-              content?: T;
+              file?: T;
+              button?: T;
+              id?: T;
+              blockName?: T;
+            };
+        contactform?:
+          | T
+          | {
+              title?: T;
+              description?: T;
+              email?: T;
               id?: T;
               blockName?: T;
             };
@@ -643,6 +729,24 @@ export interface UsersSelect<T extends boolean = true> {
   loginAttempts?: T;
   lockUntil?: T;
 }
+/**
+ * This interface was referenced by `Config`'s JSON-Schema
+ * via the `definition` "documents_select".
+ */
+export interface DocumentsSelect<T extends boolean = true> {
+  name?: T;
+  updatedAt?: T;
+  createdAt?: T;
+  url?: T;
+  thumbnailURL?: T;
+  filename?: T;
+  mimeType?: T;
+  filesize?: T;
+  width?: T;
+  height?: T;
+  focalX?: T;
+  focalY?: T;
+}
 /**
  * This interface was referenced by `Config`'s JSON-Schema
  * via the `definition` "media_select".
@@ -660,6 +764,40 @@ export interface MediaSelect<T extends boolean = true> {
   height?: T;
   focalX?: T;
   focalY?: T;
+  sizes?:
+    | T
+    | {
+        thumbnail?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        banner?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+        tablet?:
+          | T
+          | {
+              url?: T;
+              width?: T;
+              height?: T;
+              mimeType?: T;
+              filesize?: T;
+              filename?: T;
+            };
+      };
 }
 /**
  * This interface was referenced by `Config`'s JSON-Schema
diff --git a/src/payload.config.ts b/src/payload.config.ts
index faafda2..0c10cc6 100644
--- a/src/payload.config.ts
+++ b/src/payload.config.ts
@@ -1,6 +1,18 @@
 // storage-adapter-import-placeholder
 import { mongooseAdapter } from '@payloadcms/db-mongodb'
-import { lexicalEditor } from '@payloadcms/richtext-lexical'
+import {
+  lexicalEditor,
+  BoldFeature,
+  InlineToolbarFeature,
+  ItalicFeature,
+  UnderlineFeature,
+  ParagraphFeature,
+  HeadingFeature,
+  AlignFeature,
+  UnorderedListFeature,
+  LinkFeature,
+  HTMLConverterFeature,
+} from '@payloadcms/richtext-lexical'
 import path from 'path'
 import { buildConfig } from 'payload'
 import { fileURLToPath } from 'url'
@@ -20,6 +32,8 @@ import { Announcements } from '@/collections/Announcements'
 import { Blog } from '@/collections/Blog'
 import { Tweets } from '@/collections/Tweets'
 import { Pages } from '@/collections/Pages'
+import { Documents } from '@/collections/Documents'
+import { Underdog } from 'next/dist/compiled/@next/font/dist/google'
 
 const filename = fileURLToPath(import.meta.url)
 const dirname = path.dirname(filename)
@@ -41,9 +55,25 @@ export default buildConfig({
     Testimony,
     Pages,
     Users,
+    Documents,
     Media,
   ],
-  editor: lexicalEditor(),
+  editor: lexicalEditor(
+    {
+      features: () => [
+        BoldFeature(),
+        ItalicFeature(),
+        UnderlineFeature(),
+        HeadingFeature({ enabledHeadingSizes: ["h3","h4","h5"]}),
+        AlignFeature(),
+        UnorderedListFeature(),
+        LinkFeature(),
+        ParagraphFeature(),
+        InlineToolbarFeature(),
+        HTMLConverterFeature()
+      ]
+    }
+  ),
   secret: process.env.PAYLOAD_SECRET || '',
   typescript: {
     outputFile: path.resolve(dirname, 'payload-types.ts'),