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>
   );
 };

web/src/components/general/logo.module.scss

@@ -1,10 +1,10 @@
 .logo {
   color: currentColor;
-  width: 16rem;
+  width: 12rem;
   transition: width .3s ease;
 
   &.index {
-    width: 20rem;
+    width: 16rem;
   }
 
   svg {

web/src/components/general/pigs/fun/NeonChillPig.tsx

@@ -4,8 +4,6 @@ export const NeonChillPig = () => {
     <div className={styles.neonChillPig}>
       <svg
         className={styles.static}
-        width="258"
-        height="161"
         viewBox="0 0 258 161"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"
@@ -58,8 +56,6 @@ export const NeonChillPig = () => {
 
       <svg
         className={styles.animate}
-        width="258"
-        height="161"
         viewBox="0 0 258 161"
         fill="none"
         xmlns="http://www.w3.org/2000/svg"

web/src/components/general/pigs/fun/neonChillPig.module.scss

@@ -1,7 +1,6 @@
 .neonChillPig {
   position: relative;
   width: 20rem;
-  height: 8rem;
 
   .static,
   .animate {

web/src/components/layout/Footer.tsx

@@ -7,9 +7,6 @@ import { LogoNeuf } from "../general/Logo";
 export const Footer = () => {
   return (
     <footer className={styles.footer}>
-      <div className={styles.logo}>
-        <LogoNeuf />
-      </div>
       <div className={styles.contact}>
         <ul className={styles.contactList}>
           <li className={styles.contactItem}>
@@ -87,7 +84,9 @@ export const Footer = () => {
           </li>
         </ul>
       </div>
-      <NeonChillPig />
+      <div className={styles.pig}>
+        <NeonChillPig />
+      </div>
       <ToTop />
     </footer>
   );

web/src/components/layout/footer.module.scss

@@ -1,5 +1,4 @@
 .footer {
-  min-height: 60vh;
   padding: var(--spacing-sitepadding);
   background: var(--color-chateauBlue);
   color: var(--color-betongGray);
@@ -47,4 +46,12 @@
   >div {
     width: 100%;
   }
+}
+
+.pig {
+  position: relative;
+  top: 0;
+  right: 0;
+  transform: translate(1vw, 40%);
+  z-index: 800;
 }

web/src/components/news/NewsList.tsx

@@ -17,7 +17,14 @@ export const NewsList = ({
 
   return (
     <section className={styles.newsWrapper}>
-      {heading && <h2 className="suphead">{heading}</h2>}
+      {heading && (
+        <h2 className="circlehead">
+          <span className="circle"></span>
+          <span className="circle"></span>
+          <span className="circle"></span>
+          {heading}
+        </h2>
+      )}
       <ul className={`${styles.newsList} ${featured && styles.featured}`}>
         {filteredNews.map((singleNews) => (
           <NewsItem key={singleNews.id} news={singleNews} />