make separate component for section footer to show links below section content on mobile

web/src/components/events/FeaturedEvents.tsx

@@ -2,16 +2,18 @@ import { EventFragment } from "@/gql/graphql";
 import { EventItem } from "./EventItem";
 import styles from "./featuredEvents.module.scss";
 import { SectionHeader } from "../general/SectionHeader";
+import { SectionFooter } from "../general/SectionFooter";
 
 export const FeaturedEvents = ({ events }: { events: EventFragment[] }) => {
   return (
-    <section>
+    <section className={styles.featuredEvents}>
       <SectionHeader heading="Arrangementer" link="/arrangementer" linkText="Se alle arrangementer" />
       <ul className={styles.eventList}>
         {events.slice(0, 3).map((event) => (
           <EventItem key={event.id} event={event} mode="list" />
         ))}
       </ul>
+      <SectionFooter link="/arrangementer" linkText="Se alle arrangementer" />
     </section>
   );
 };

web/src/components/events/UpcomingEvents.tsx

@@ -10,6 +10,7 @@ import Link from "next/link";
 import { EventItem } from "./EventItem";
 import styles from "./upcomingEvents.module.scss";
 import { SectionHeader } from "../general/SectionHeader";
+import { SectionFooter } from "../general/SectionFooter";
 
 export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => {
   const upcomingSingularEvents = sortSingularEvents(
@@ -50,6 +51,7 @@ export const UpcomingEvents = ({ events }: { events: EventFragment[] }) => {
           })}
         </div>
       </div>
+      <SectionFooter link="/arrangementer?mode=calendar" linkText="Vis kalender" />
     </section>
   );
 };

web/src/components/events/featuredEvents.module.scss

@@ -1,9 +1,12 @@
+.featuredEvents {
+  padding-bottom: var(--spacing-section-bottom);
+}
+
 .eventList {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   column-gap: var(--spacing-gap-column);
   row-gap: var(--spacing-gap-row);
-  padding-bottom: var(--spacing-section-bottom);
 }
 
 @media (max-width: 900px) {

web/src/components/events/upcomingEvents.module.scss

@@ -6,11 +6,15 @@
   position: relative;
   overflow-x: hidden;
 
-  header {
+  header, footer {
     position: relative;
     z-index: 10;
   }
 
+  footer, footer a {
+    margin-top: 0;
+  }
+
   h2 {
     margin-bottom: var(--spacing-xs);
   }
@@ -52,4 +56,10 @@
   ul {
     display: flex;
   }
+}
+
+@media (max-width: 800px) {
+  .upcomingContent {
+    margin-top: var(--spacing-s);
+  }
 }