fix: updated event design

src/components/ContactPerson2/styles.module.scss

@@ -2,6 +2,7 @@
   display: flex;
   gap: 20px;
   align-items: center;
+  justify-content: center;
 }
 
 .photo {

src/components/Title/styles.module.scss

@@ -9,6 +9,7 @@
 
 .subtitle {
   position: relative;
+  font-weight: 500;
   top: -20px;
 }
 

src/pageComponents/Event/Event.stories.tsx

@@ -76,3 +76,43 @@ export const WithPhoto: Story = {
     photo: photo
   }
 }
+
+export const WithOccurrences: Story = {
+  args: {
+    ...Default.args,
+    upcomingOccurrences: [
+      {
+        id: 'o1',
+        date: '2024-12-09T09:21:19Z',
+        title: 'Sing & Pray',
+        href: '/veranstaltungen/sing-and-pray-2',
+        location: 'St. Richard',
+        cancelled: false,
+      },
+      {
+        id: 'o2',
+        date: '2024-12-16T09:21:19Z',
+        title: 'Sing & Pray',
+        href: '/veranstaltungen/sing-and-pray-3',
+        location: 'St. Richard',
+        cancelled: true,
+      },
+      {
+        id: 'o3',
+        date: '2024-12-23T09:21:19Z',
+        title: 'Sing & Pray',
+        href: '/veranstaltungen/sing-and-pray-4',
+        location: 'St. Richard',
+        cancelled: false,
+      },
+      {
+        id: 'o4',
+        date: '2024-12-30T09:21:19Z',
+        title: 'Sing & Pray',
+        href: '/veranstaltungen/sing-and-pray-5',
+        location: 'St. Richard',
+        cancelled: false,
+      },
+    ],
+  },
+}

src/pageComponents/Event/Event.tsx

@@ -5,11 +5,9 @@ import { Title } from '@/components/Title/Title'
 import { Container } from '@/components/Container/Container'
 import { Col } from '@/components/Flex/Col'
 import { Pill } from '@/components/Pill/Pill'
-import { HR } from '@/components/HorizontalRule/HorizontalRule'
 import { useDate } from '@/hooks/useCompactDate'
 import { readableDateTime } from '@/utils/readableDate'
 import { TextDiv } from '@/components/Text/TextDiv'
-import { EventExcerpt, EventExcerptRow } from '@/components/EventExcerpt/EventExcerpt'
 import { Button } from '@/components/Button/Button'
 import Image, { StaticImageData } from 'next/image'
 import { locationString } from '@/utils/dto/location'
@@ -17,6 +15,8 @@ import { ContactPerson2 } from '@/components/ContactPerson2/ContactPerson2'
 import { getPhoto } from '@/utils/dto/gallery'
 import { AdminMenu } from '@/components/AdminMenu/AdminMenu'
 import { EventRow } from '@/components/EventRow/EventRow'
+import { Row } from '@/components/Flex/Row'
+import classNames from 'classnames'
 
 type UpcomingOccurrence = {
   id: string
@@ -71,10 +71,11 @@ export function EventPage(
   const where = locationString(location);
   const contactPersonPhoto = typeof contact === "object" ? getPhoto("thumbnail", contact.photo) : undefined;
   const isRecurring = recurrenceType && recurrenceType !== 'none'
+  const hasOccurrences = upcomingOccurrences && upcomingOccurrences.length > 0;
 
   return (
     <>
-      <Section paddingBottom={"small"}>
+      <Section paddingBottom={"small"} backgroundColor={"off-white"}>
         <Container>
           <Title
             title={title}
@@ -87,7 +88,7 @@ export function EventPage(
           <div className={styles.header}>
             <div className={styles.headerText}>
               <p>
-                Herzliche Einladungen an unseren kommenden Veranstaltungen und Events teilzunehmen.
+                {shortDescription}
               </p>
               <p className={styles.published}>
                 Publiziert am {published}
@@ -102,7 +103,7 @@ export function EventPage(
                 }
               </div>
             </div>
-            <Col>
+            <div>
               { photo &&
                 <Image
                   src={photo}
@@ -112,34 +113,56 @@ export function EventPage(
                 />
               }
 
-            </Col>
             </div>
-        <HR />
+          </div>
+
       </Section>
 
       <Section padding={"medium"}>
         <Container>
           <Title
             size={"md"}
-            title={`${title} - ${readableDate}`}
+            title={title}
+            subtitle={`${readableDate} - ${typeof location === "object" ? location.name : 'd'}`}
             fontStyle={"sans-serif"}
             align={"center"}
           />
 
-          {typeof location === "object" &&
-            <Title
-              size={"md"}
-              title={location.name}
-              fontStyle={"sans-serif"}
-              align={"center"}
-            />
-          }
 
 
           <Section padding={"medium"}>
-            <div className={styles.description}>
+            <Row>
+              <Col>
+                <Title
+                  size={"md"}
+                  title={"Einladung"}
+                  fontStyle={"sans-serif"}
+                  align={"center"}
+                />
+
+                <div className={classNames({
+                  [styles.description]: true,
+                  [styles.padding]: !hasOccurrences
+                })}>
                   <TextDiv text={description} />
 
+                  <br/>
+                  <Title title={"Location"} size={"sm"} align={"center"} fontStyle={"sans-serif"}/>
+                  <TextDiv text={where} />
+
+                  { typeof contact !== "undefined" &&
+                  <>
+                    <br/>
+                    <Title title={"Ansprechperson"} size={"sm"} align={"center"} fontStyle={"sans-serif"}/>
+                    <ContactPerson2
+                      contact={contact}
+                      photo={contactPersonPhoto}/>
+                  </>
+                  }
+
+                </div>
+
+
                 { (typeof flyer === "object" || group || rsvpLink) &&
                   <Section padding={"small"}>
                     <div className={styles.buttons}>
@@ -163,37 +186,15 @@ export function EventPage(
                     </div>
                   </Section>
                 }
-            </div>
-          </Section>
-        </Container>
-
-        <EventExcerpt>
-          <EventExcerptRow label={"Was:"}>
-            <TextDiv text={shortDescription} />
-          </EventExcerptRow>
-          <EventExcerptRow label={"Wo:"}>
-            <TextDiv text={where} />
-          </EventExcerptRow>
-          <EventExcerptRow label={"Ansprechperson:"}>
-            <ContactPerson2
-              contact={contact}
-              photo={contactPersonPhoto}
-            />
-          </EventExcerptRow>
-        </EventExcerpt>
-
-      </Section>
 
+              </Col>
                 { upcomingOccurrences && upcomingOccurrences.length > 0 &&
-        <Section padding={"medium"}>
+                  <Col>
-          <Container>
                     <Title
                       title={"Nächste Termine"}
                       size={"md"}
                       color={"contrast"}
-              align={"center"}
                     />
-            <Section padding={"small"}>
                       { upcomingOccurrences.map(o =>
                         <EventRow
                           key={o.id}
@@ -202,14 +203,16 @@ export function EventPage(
                           href={o.href}
                           location={o.location}
                           cancelled={o.cancelled}
+                          color={"contrast"}
                         />
                       )}
+                  </Col>
+                }
+            </Row>
           </Section>
         </Container>
       </Section>
-      }
 
-      <Section/>
       <AdminMenu
         collection={"event"}
         id={id}

src/pageComponents/Event/styles.module.scss

@@ -2,7 +2,11 @@
 
 .description {
   text-align: center;
-  padding: 0 100px;
+}
+
+.padding {
+  max-width: 600px;
+  margin: 0 auto;
 }
 
 .published {
@@ -28,6 +32,7 @@
   gap: 80px;
   margin: 0 auto;
   overflow: hidden;
+  justify-content: space-between;
 }
 
 .photo {