From 2dab1937d2be383b94013a8451b59eef96e39866 Mon Sep 17 00:00:00 2001
From: elisejakob <hei@elisejakob.no>
Date: Mon, 10 Jun 2024 11:13:59 +0200
Subject: [PATCH] minor design stuff, style front page info block and add more
 circle headings

---
 web/src/app/page.tsx                          | 34 +++++++++++--------
 web/src/components/events/EventItem.tsx       | 10 +++---
 web/src/components/events/FeaturedEvents.tsx  | 18 +++++++---
 web/src/components/general/logo.module.scss   |  4 +--
 .../general/pigs/fun/NeonChillPig.tsx         |  4 ---
 .../general/pigs/fun/neonChillPig.module.scss |  1 -
 web/src/components/layout/Footer.tsx          |  7 ++--
 web/src/components/layout/footer.module.scss  |  9 ++++-
 web/src/components/news/NewsList.tsx          |  9 ++++-
 web/src/css/base.scss                         | 32 +++++++++++++++++
 10 files changed, 91 insertions(+), 37 deletions(-)

diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
index 027a3b8..5d4d4ff 100644
--- a/web/src/app/page.tsx
+++ b/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>
-        <p>
-          Vi hjelper deg med å finne frem, og sørger for at du har en fin
-          opplevelse
-        </p>
-        <Link href="/praktisk#adkomst" className="button">
-          Adresse og adkomst &rarr;
-        </Link>
-        <Link href="/praktisk#adkomst" className="button">
-          Billetter &rarr;
-        </Link>
-        <Link href="/praktisk#adkomst" className="button">
-          Åpningstider &rarr;
-        </Link>
-        <Pig type="point" />
+        <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
+            opplevelse
+          </p>
+          <Link href="/praktisk#adkomst" className="button">
+            Adresse og adkomst &rarr;
+          </Link>
+          <Link href="/praktisk#adkomst" className="button">
+            Billetter &rarr;
+          </Link>
+          <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>
diff --git a/web/src/components/events/EventItem.tsx b/web/src/components/events/EventItem.tsx
index e6f4879..c81b526 100644
--- a/web/src/components/events/EventItem.tsx
+++ b/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>
         )}
diff --git a/web/src/components/events/FeaturedEvents.tsx b/web/src/components/events/FeaturedEvents.tsx
index 6d055ba..5d5364e 100644
--- a/web/src/components/events/FeaturedEvents.tsx
+++ b/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>
   );
 };
diff --git a/web/src/components/general/logo.module.scss b/web/src/components/general/logo.module.scss
index e6419bf..ceaa38d 100644
--- a/web/src/components/general/logo.module.scss
+++ b/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 {
diff --git a/web/src/components/general/pigs/fun/NeonChillPig.tsx b/web/src/components/general/pigs/fun/NeonChillPig.tsx
index 1336bed..bc9d763 100644
--- a/web/src/components/general/pigs/fun/NeonChillPig.tsx
+++ b/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"
diff --git a/web/src/components/general/pigs/fun/neonChillPig.module.scss b/web/src/components/general/pigs/fun/neonChillPig.module.scss
index 64c88a1..a63e8cb 100644
--- a/web/src/components/general/pigs/fun/neonChillPig.module.scss
+++ b/web/src/components/general/pigs/fun/neonChillPig.module.scss
@@ -1,7 +1,6 @@
 .neonChillPig {
   position: relative;
   width: 20rem;
-  height: 8rem;
 
   .static,
   .animate {
diff --git a/web/src/components/layout/Footer.tsx b/web/src/components/layout/Footer.tsx
index 08c4343..fb8fde9 100644
--- a/web/src/components/layout/Footer.tsx
+++ b/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>
   );
diff --git a/web/src/components/layout/footer.module.scss b/web/src/components/layout/footer.module.scss
index c712025..ac2a469 100644
--- a/web/src/components/layout/footer.module.scss
+++ b/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;
 }
\ No newline at end of file
diff --git a/web/src/components/news/NewsList.tsx b/web/src/components/news/NewsList.tsx
index d4a0b9b..14a4a88 100644
--- a/web/src/components/news/NewsList.tsx
+++ b/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} />
diff --git a/web/src/css/base.scss b/web/src/css/base.scss
index aa0df5a..05c6a58 100644
--- a/web/src/css/base.scss
+++ b/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%;
+  }
 }
\ No newline at end of file