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

@@ -75,4 +75,44 @@ export const WithPhoto: Story = {
     ...Default.args,
     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,104 +113,106 @@ export function EventPage(
                 />
               }
 
-            </Col>
+            </div>
           </div>
-        <HR />
+
       </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>
-              <TextDiv text={description} />
+              <Col>
+                <Title
+                  size={"md"}
+                  title={"Einladung"}
+                  fontStyle={"sans-serif"}
+                  align={"center"}
+                />
 
-              { (typeof flyer === "object" || group || rsvpLink) &&
+                <div className={classNames({
-                <Section padding={"small"}>
+                  [styles.description]: true,
-                  <div className={styles.buttons}>
+                  [styles.padding]: !hasOccurrences
-                    { rsvpLink &&
+                })}>
-                      <Button size={"md"} href={rsvpLink} target={"_blank"} schema={"contrast"}>
+                  <TextDiv text={description} />
-                        Anmelden
-                      </Button>
-                    }
 
-                    { typeof flyer === "object" && flyer.url &&
+                  <br/>
-                      <Button size={"md"} href={flyer.url}>Flyer herunterladen</Button>
+                  <Title title={"Location"} size={"sm"} align={"center"} fontStyle={"sans-serif"}/>
-                    }
+                  <TextDiv text={where} />
 
-                    { group &&
+                  { typeof contact !== "undefined" &&
-                      <Button
+                  <>
-                        size={"md"}
+                    <br/>
-                        schema={"shade"}
+                    <Title title={"Ansprechperson"} size={"sm"} align={"center"} fontStyle={"sans-serif"}/>
-                        href={`/gruppe/${group}`}
+                    <ContactPerson2
-                      >Erfahre mehr zur Gruppe</Button>
+                      contact={contact}
-                    }
+                      photo={contactPersonPhoto}/>
-                  </div>
+                  </>
-                </Section>
+                  }
-              }
+
-            </div>
+                </div>
+
+
+                { (typeof flyer === "object" || group || rsvpLink) &&
+                  <Section padding={"small"}>
+                    <div className={styles.buttons}>
+                      { rsvpLink &&
+                        <Button size={"md"} href={rsvpLink} target={"_blank"} schema={"contrast"}>
+                          Anmelden
+                        </Button>
+                      }
+
+                      { typeof flyer === "object" && flyer.url &&
+                        <Button size={"md"} href={flyer.url}>Flyer herunterladen</Button>
+                      }
+
+                      { group &&
+                        <Button
+                          size={"md"}
+                          schema={"shade"}
+                          href={`/gruppe/${group}`}
+                        >Erfahre mehr zur Gruppe</Button>
+                      }
+                    </div>
+                  </Section>
+                }
+
+              </Col>
+                { upcomingOccurrences && upcomingOccurrences.length > 0 &&
+                  <Col>
+                    <Title
+                      title={"Nächste Termine"}
+                      size={"md"}
+                      color={"contrast"}
+                    />
+                      { upcomingOccurrences.map(o =>
+                        <EventRow
+                          key={o.id}
+                          date={o.date}
+                          title={o.title}
+                          href={o.href}
+                          location={o.location}
+                          cancelled={o.cancelled}
+                          color={"contrast"}
+                        />
+                      )}
+                  </Col>
+                }
+            </Row>
           </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>
 
-      { upcomingOccurrences && upcomingOccurrences.length > 0 &&
-        <Section padding={"medium"}>
-          <Container>
-            <Title
-              title={"Nächste Termine"}
-              size={"md"}
-              color={"contrast"}
-              align={"center"}
-            />
-            <Section padding={"small"}>
-              { upcomingOccurrences.map(o =>
-                <EventRow
-                  key={o.id}
-                  date={o.date}
-                  title={o.title}
-                  href={o.href}
-                  location={o.location}
-                  cancelled={o.cancelled}
-                />
-              )}
-            </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 {