Use new EventCards on homepage

backend/samfundet/homepage/homepage.py

@@ -82,7 +82,7 @@ def generate() -> dict[str, Any]:  # noqa: C901
             carousel(
                 title_nb='Hva skjer?',
                 title_en="What's happening?",
-                events=list(upcoming_events[:10]),
+                events=list(upcoming_events[:4]),
             )
         )
 

frontend/src/Components/Block/Block.module.scss

@@ -52,7 +52,7 @@ $transition-duration: 0.4s;
 }
 
 .inner_content {
-  padding: 1rem;
+  padding: 0.75rem 1rem;
   z-index: 2;
   position: relative;
 }
@@ -136,22 +136,23 @@ $transition-duration: 0.4s;
   bottom: 0;
   background: linear-gradient(to bottom,
     hsla(0, 0%, 0%, 0) 0%,
-    hsla(0, 0%, 0%, 0.01) 8.1%,
-    hsla(0, 0%, 0%, 0.039) 15.5%,
-    hsla(0, 0%, 0%, 0.083) 22.5%,
-    hsla(0, 0%, 0%, 0.14) 29%,
-    hsla(0, 0%, 0%, 0.207) 35.3%,
-    hsla(0, 0%, 0%, 0.282) 41.2%,
-    hsla(0, 0%, 0%, 0.36) 47.1%,
-    hsla(0, 0%, 0%, 0.44) 52.9%,
-    hsla(0, 0%, 0%, 0.518) 58.8%,
-    hsla(0, 0%, 0%, 0.593) 64.7%,
-    hsla(0, 0%, 0%, 0.66) 71%,
-    hsla(0, 0%, 0%, 0.717) 77.5%,
-    hsla(0, 0%, 0%, 0.761) 84.5%,
-    hsla(0, 0%, 0%, 0.79) 91.9%,
-    hsla(0, 0%, 0%, 0.8) 100%
+    hsla(0, 0%, 0%, 0.009) 8.1%,
+    hsla(0, 0%, 0%, 0.035) 15.5%,
+    hsla(0, 0%, 0%, 0.074) 22.5%,
+    hsla(0, 0%, 0%, 0.125) 29%,
+    hsla(0, 0%, 0%, 0.184) 35.3%,
+    hsla(0, 0%, 0%, 0.25) 41.2%,
+    hsla(0, 0%, 0%, 0.32) 47.1%,
+    hsla(0, 0%, 0%, 0.39) 52.9%,
+    hsla(0, 0%, 0%, 0.46) 58.8%,
+    hsla(0, 0%, 0%, 0.526) 64.7%,
+    hsla(0, 0%, 0%, 0.585) 71%,
+    hsla(0, 0%, 0%, 0.636) 77.5%,
+    hsla(0, 0%, 0%, 0.675) 84.5%,
+    hsla(0, 0%, 0%, 0.701) 91.9%,
+    hsla(0, 0%, 0%, 0.71) 100%
   );
+
 }
 
 

frontend/src/Components/EventCard/EventCard.module.scss

@@ -25,6 +25,7 @@
   align-items: center;
   gap: 0.25rem;
   white-space: nowrap;
+  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.45);
 }
 
 .details {

frontend/src/Pages/HomePage/HomePage.tsx

@@ -1,11 +1,13 @@
 import { type ReactNode, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { toast } from 'react-toastify';
+import { EventCardContainer } from '~/Components';
 import { EventCarousel, LargeCard } from '~/Pages/HomePage/components';
 import { getHomeData } from '~/api';
 import type { HomePageDto, HomePageElementDto } from '~/dto';
 import { useTitle } from '~/hooks';
 import { KEY } from '~/i18n/constants';
+import { dbT } from '~/utils';
 import styles from './HomePage.module.scss';
 import { Splash } from './components/Splash/Splash';
 
@@ -31,7 +33,11 @@ export function HomePage() {
   function renderElement(key: number, element: HomePageElementDto): ReactNode {
     switch (element.variation) {
       case 'carousel': {
-        if (element.events.length > 0) return <EventCarousel key={key} element={element} />;
+        if (element.events.length > 0) {
+          return (
+            <EventCardContainer title={dbT(element, 'title')} events={element.events} key={key} />
+          );
+        }
         return <div key={key} />;
       }
       case 'large-card':