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

web/src/app/page.tsx

@@ -60,21 +60,25 @@ export default async function Home() {
       <FeaturedEvents events={featuredEvents} />
       <UpcomingEvents events={events} />
       <div className="infoBlock">
-        <h2>Skal du besøke Chateau Neuf?</h2>
+        <div>
-        <p>
+          <h2>Skal du besøke Chateau Neuf?</h2>
-          Vi hjelper deg med å finne frem, og sørger for at du har en fin
+          <p>
-          opplevelse
+            Vi hjelper deg med å finne frem, og sørger for at du har en fin
-        </p>
+            opplevelse
-        <Link href="/praktisk#adkomst" className="button">
+          </p>
-          Adresse og adkomst &rarr;
+          <Link href="/praktisk#adkomst" className="button">
-        </Link>
+            Adresse og adkomst &rarr;
-        <Link href="/praktisk#adkomst" className="button">
+          </Link>
-          Billetter &rarr;
+          <Link href="/praktisk#adkomst" className="button">
-        </Link>
+            Billetter &rarr;
-        <Link href="/praktisk#adkomst" className="button">
+          </Link>
-          Åpningstider &rarr;
+          <Link href="/praktisk#adkomst" className="button">
-        </Link>
+            Åpningstider &rarr;
-        <Pig type="point" />
+          </Link>
+        </div>
+        <div className="pig">
+          <Pig type="point" />
+        </div>
       </div>
       <NewsList heading="Siste nytt" limit={3} featured news={news} />
     </main>

web/src/components/events/EventItem.tsx

@@ -48,10 +48,12 @@ export const EventItem = ({
               nextOccurrence?.start &&
               formatDate(nextOccurrence.start, commonDateTimeFormat)}
             {numOccurrences > 1 && nextOccurrence?.start && (
-              <span>
+              <div>
-                <em>Neste:</em>{" "}
+                <span>
-                {formatDate(nextOccurrence.start, commonDateTimeFormat)}
+                  {formatDate(nextOccurrence.start, commonDateTimeFormat)}
-              </span>
+                </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}>
+    <section>
-      {events.slice(0, 3).map((event) => (
+      <h2 className="circlehead">
-        <EventItem key={event.id} event={event} mode="list" />
+        <span className="circle"></span>
-      ))}
+        <span className="circle"></span>
-    </ul>
+        <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} />

web/src/css/base.scss

@@ -294,4 +294,36 @@ input[type="text"] {
   width: 50%;
   vertical-align: top;
   margin-bottom: var(--spacing-section-bottom);
+}
+
+.infoBlock {
+  background: var(--color-goldenBeige);
+  margin: 0 calc(var(--spacing-sitepadding)*-1);
+  padding: var(--spacing-sitepadding) var(--spacing-sitepadding) var(--spacing-section-bottom);
+  position: relative;
+  overflow: hidden;
+
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  align-items: center;
+  min-height: 16rem;
+
+  h2 {
+    margin-bottom: 1rem;
+  }
+
+  p {
+    margin-bottom: 2rem;
+  }
+
+  .button {
+    margin-right: .5rem;
+  }
+
+  .pig {
+    transform: scaleX(-1);
+    position: absolute;
+    right: 0;
+    bottom: -50%;
+  }
 }