minor design stuff, style front page info block and add more circle headings

web/src/components/events/EventItem.tsx

@@ -48,10 +48,12 @@ export const EventItem = ({
               nextOccurrence?.start &&
               formatDate(nextOccurrence.start, commonDateTimeFormat)}
             {numOccurrences > 1 && nextOccurrence?.start && (
-              <span>
-                <em>Neste:</em>{" "}
-                {formatDate(nextOccurrence.start, commonDateTimeFormat)}
-              </span>
+              <div>
+                <span>
+                  {formatDate(nextOccurrence.start, commonDateTimeFormat)}
+                </span>
+                <p>Flere datoer ({numOccurrences}) &rarr;</p>
+              </div>
             )}
           </p>
         )}

web/src/components/events/FeaturedEvents.tsx

@@ -4,10 +4,18 @@ import styles from "./featuredEvents.module.scss";
 
 export const FeaturedEvents = ({ events }: { events: EventFragment[] }) => {
   return (
-    <ul className={styles.eventList}>
-      {events.slice(0, 3).map((event) => (
-        <EventItem key={event.id} event={event} mode="list" />
-      ))}
-    </ul>
+    <section>
+      <h2 className="circlehead">
+        <span className="circle"></span>
+        <span className="circle"></span>
+        <span className="circle"></span>
+        Arrangementer
+      </h2>
+      <ul className={styles.eventList}>
+        {events.slice(0, 3).map((event) => (
+          <EventItem key={event.id} event={event} mode="list" />
+        ))}
+      </ul>
+    </section>
   );
 };