feat: adds temporary refill link

varianter · Jun 4, 2024 · 2eabbf5 · 2eabbf5
1 parent 2cdb9ae
commit 2eabbf5
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 6 deletions.
diff --git a/src/index/index.module.css b/src/index/index.module.css
@@ -323,15 +323,29 @@
 
 /* Summerjob splash */
 .infoBlock {
+  align-items: center;
   display: flex;
   gap: 2rem;
+  padding: 1rem;
 }
 
+.infoBlock__imageContainer img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  border-radius: 50%;
+}
+.infoBlock__title {
+  margin-top: 0rem;
+}
+.infoBlock__content {
+  max-width: 30rem;
+}
 .infoBlock__text,
 .infoBlock__link {
   display: block;
-  color: var(--color-standard__white);
-  text-decoration-color: var(--color-standard__white);
+  color: var(--color-standard__black);
+  text-decoration-color: var(--color-standard__black);
 }
 
 .infoBlock__blob {
@@ -345,8 +359,4 @@
     flex-direction: column;
     align-items: center;
   }
-
-  .infoBlock__title {
-    margin-left: 6rem;
-  }
 }
diff --git a/src/index/index.tsx b/src/index/index.tsx
@@ -14,6 +14,7 @@ import Tjenesteomrader from 'src/tjenesteomrader';
 import { EmployeeItem } from 'src/employees/types';
 import { CaseJSON } from 'src/case/Case';
 import { HighlightedItemsLists } from 'src/rss/service';
+import Arrow from '@components/arrow';
 
 export type HomeProps = {
   randomEmployee: EmployeeItem;
@@ -114,6 +115,10 @@ const Home = ({ randomEmployee, randomCases, feeds }: HomeProps) => {
         </div>
       </section>
 
+      <section className={style.bergen}>
+        <RefillLink />
+      </section>
+
       <section className={style.join}>
         <h2 className={style.join_title}>Bli en Variant!</h2>
 
@@ -324,4 +329,37 @@ const Home = ({ randomEmployee, randomCases, feeds }: HomeProps) => {
   );
 };
 
+function RefillLink() {
+  return (
+    <div className={style.infoBlock}>
+      <div className={style.infoBlock__imageContainer}>
+        <Image
+          src={'/refill/header.png'}
+          alt={'Refill'}
+          width={300}
+          height={300}
+        />
+      </div>
+      <div className={style.infoBlock__content}>
+        <h2 className={style.infoBlock__title}>
+          <Link href="/refill" className={style.infoBlock__link}>
+            <span className={style.infoBlock__text}>Refill stream</span>
+            <Arrow className={style.infoBlock__arrow} color="standard__black" />
+          </Link>
+        </h2>
+
+        <p>
+          Vi inviterer til første iterasjon av Refill-konferansen. En
+          tverrfaglig konferanse fylt til randen med læreglede.
+        </p>
+
+        <p>
+          Konferansen streames fredag 7. juni klokken 14:00 i to parallelle
+          tracks: utvikling og design.
+        </p>
+      </div>
+    </div>
+  );
+}
+
 export default Home;