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

web/src/app/page.tsx

@@ -60,6 +60,7 @@ export default async function Home() {
       <FeaturedEvents events={featuredEvents} />
       <UpcomingEvents events={events} />
       <div className="infoBlock">
+        <div>
           <h2>Skal du besøke Chateau Neuf?</h2>
           <p>
             Vi hjelper deg med å finne frem, og sørger for at du har en fin
@@ -74,8 +75,11 @@ export default async function Home() {
           <Link href="/praktisk#adkomst" className="button">
             Åpningstider &rarr;
           </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 && (
+              <div>
                 <span>
-                <em>Neste:</em>{" "}
                   {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 (
+    <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>
+      <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);
@@ -48,3 +47,11 @@
     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

@@ -295,3 +295,35 @@ input[type="text"] {
   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%;
+  }
+}