feat: adds very early quick and dirty landingpage for refill (#448)

varianter · May 23, 2024 · 1183258 · 1183258
1 parent 24539b4
commit 1183258
Show file tree

Hide file tree

Showing 10 changed files with 446 additions and 3 deletions.
diff --git a/pages/refill.tsx b/pages/refill.tsx
@@ -0,0 +1,192 @@
+import RefillLayout from 'src/refill/layout';
+import Image from 'next/image';
+import style from 'src/refill/refill.module.css';
+
+const dev: ProgramItemProps[] = [
+  {
+    speaker: { name: 'Jacob Berglund', src: '/refill/kari.png' },
+    title: 'Det var en gång en request, en response och ett par headers',
+  },
+  {
+    speaker: { name: 'Jakob Endrestad Kielland', src: '/refill/kari.png' },
+    title: 'Hvordan bygge latterlig kule nettsider med View Transitions API',
+  },
+  {
+    speaker: {
+      name: 'Truls Henrik Jakobsen',
+      src: '/refill/kari.png',
+    },
+    title: 'Skjema-endringer med lave skuldre: Bakoverkompatible APIer',
+  },
+  {
+    speaker: { name: 'Christian Brevik', src: '/refill/kari.png' },
+    title: 'TestContainers er kulere enn ChatGPT',
+  },
+  {
+    speaker: { name: 'Thomas Hansen', src: '/refill/kari.png' },
+    title: 'Erfaringer med prosessarbeid',
+  },
+  {
+    speaker: { name: 'Anders Njøs Slinde', src: '/refill/kari.png' },
+    title: 'Plattform sa du? Ja det må vi selvfølgelig ha. Eller?',
+  },
+  {
+    speaker: { name: 'Mikael Brevik', src: '/refill/kari.png' },
+    title: 'RAG-arkitektur avmystifisert',
+  },
+];
+const design: ProgramItemProps[] = [
+  {
+    speaker: {
+      name: 'Jonas Lillevold',
+      src: '/refill/kari.png',
+    },
+    title: 'UX Metrics - Hva, hvorfor og hvordan?',
+  },
+  {
+    speaker: { name: 'Andreas Sætersdal Hartveit', src: '/refill/kari.png' },
+    title: 'En skikkelig nerdete preik om typografi',
+  },
+  {
+    speaker: { name: 'Simen Strøm Braaten', src: '/refill/kari.png' },
+    title: 'Fra å være en god designer til å bli en dårlig utvikler',
+  },
+  {
+    speaker: { name: 'Andreas Sætersdal Hartveit', src: '/refill/kari.png' },
+    title: 'Mitt voksende produkt / MVP arket',
+  },
+];
+
+export default function Refill() {
+  return (
+    <RefillLayout>
+      <div className={style.header}>
+        <Image
+          src="/refill/header.png"
+          alt="En mann og en kvinne som sitter i en sofa og ser på en laptop"
+          width={360}
+          height={360}
+          role="none"
+        />
+
+        <div className={style.header__inner}>
+          <h1>Refill 2024</h1>
+          <p>
+            Variant inviterer til første iterasjon av Refill-konferansen. En
+            tverrfaglig konferanse fylt til randen med læreglede.
+          </p>
+          <p>
+            Konferansen streames og har denne gang 2 tracks: utvikling og
+            design. Følg med på denne siden fredag 7. juni klokken 14:00, for
+            streams.
+          </p>
+
+          <div className={style.calendarContainer}>
+            <a href="/refill/event.ics" download="true">
+              <CalendarIcon />
+              Marker i kalender
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div className={style.programSection}>
+        <h2>Track: Utvikling</h2>
+
+        <ul className={style.programSectionGrid}>
+          {dev.map((item, i) => (
+            <ProgramItem key={i} {...item} />
+          ))}
+        </ul>
+      </div>
+
+      <div className={style.programSection}>
+        <h2>Track: Design</h2>
+
+        <ul className={style.programSectionGrid}>
+          {design.map((item, i) => (
+            <ProgramItem key={i} {...item} />
+          ))}
+        </ul>
+      </div>
+    </RefillLayout>
+  );
+}
+
+type ProgramItemProps = {
+  speaker: {
+    name: string;
+    src: string;
+  };
+  title: string;
+};
+function ProgramItem({ speaker, title }: ProgramItemProps) {
+  return (
+    <li className={style.programItem}>
+      <h3>{title}</h3>
+      <Speaker {...speaker} />
+    </li>
+  );
+}
+
+function Speaker({ name }: { name: string; src: string }) {
+  return (
+    <footer className={style.speaker}>
+      {/* <div className={style.avatarContainer}>
+        <Image src={src} alt={name} height={50} width={50} />
+      </div> */}
+      <h4>{name}</h4>
+    </footer>
+  );
+}
+
+function CalendarIcon() {
+  return (
+    <svg
+      fill="#000000"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg"
+      width="20px"
+      height="20px"
+      viewBox="0 0 612 612"
+      role="none"
+    >
+      <g>
+        <g>
+          <path
+            d="M612,463.781c0-70.342-49.018-129.199-114.75-144.379c-10.763-2.482-21.951-3.84-33.469-3.84
+			c-3.218,0-6.397,0.139-9.562,0.34c-71.829,4.58-129.725,60.291-137.69,131.145c-0.617,5.494-0.966,11.073-0.966,16.734
+			c0,10.662,1.152,21.052,3.289,31.078C333.139,561.792,392.584,612,463.781,612C545.641,612,612,545.641,612,463.781z
+			 M463.781,561.797c-54.133,0-98.016-43.883-98.016-98.016s43.883-98.016,98.016-98.016s98.016,43.883,98.016,98.016
+			S517.914,561.797,463.781,561.797z"
+          />
+          <polygon
+            points="482.906,396.844 449.438,396.844 449.438,449.438 396.844,449.438 396.844,482.906 482.906,482.906 
+			482.906,449.438 482.906,449.438 		"
+          />
+          <path
+            d="M109.969,0c-9.228,0-16.734,7.507-16.734,16.734v38.25v40.641c0,9.228,7.506,16.734,16.734,16.734h14.344
+			c9.228,0,16.734-7.507,16.734-16.734V54.984v-38.25C141.047,7.507,133.541,0,124.312,0H109.969z"
+          />
+          <path
+            d="M372.938,0c-9.228,0-16.734,7.507-16.734,16.734v38.25v40.641c0,9.228,7.507,16.734,16.734,16.734h14.344
+			c9.228,0,16.734-7.507,16.734-16.734V54.984v-38.25C404.016,7.507,396.509,0,387.281,0H372.938z"
+          />
+          <path
+            d="M38.25,494.859h236.672c-2.333-11.6-3.572-23.586-3.572-35.859c0-4.021,0.177-7.999,0.435-11.953H71.719
+			c-15.845,0-28.688-12.843-28.688-28.688v-229.5h411.188v88.707c3.165-0.163,6.354-0.253,9.562-0.253
+			c11.437,0,22.61,1.109,33.469,3.141V93.234c0-21.124-17.126-38.25-38.25-38.25h-31.078v40.641c0,22.41-18.23,40.641-40.641,40.641
+			h-14.344c-22.41,0-40.641-18.231-40.641-40.641V54.984H164.953v40.641c0,22.41-18.231,40.641-40.641,40.641h-14.344
+			c-22.41,0-40.641-18.231-40.641-40.641V54.984H38.25C17.126,54.984,0,72.111,0,93.234v363.375
+			C0,477.733,17.126,494.859,38.25,494.859z"
+          />
+          <circle cx="134.774" cy="260.578" r="37.954" />
+          <circle cx="248.625" cy="260.578" r="37.954" />
+          <circle cx="362.477" cy="260.578" r="37.954" />
+          <circle cx="248.625" cy="375.328" r="37.953" />
+          <circle cx="134.774" cy="375.328" r="37.953" />
+        </g>
+      </g>
+    </svg>
+  );
+}
diff --git a/public/refill/bg.jpg b/public/refill/bg.jpg
diff --git a/...dar-and-clock-time-administration-and-organization-tools-symbol-svgrepo-com.svg b/...dar-and-clock-time-administration-and-organization-tools-symbol-svgrepo-com.svg
diff --git a/public/refill/event.ics b/public/refill/event.ics
@@ -0,0 +1,15 @@
+BEGIN:VCALENDAR
+VERSION:2.0
+BEGIN:VEVENT
+SUMMARY:Refill 2024
+DTSTART:20240607T120000Z
+DTEND:20240607T150000Z
+DTSTAMP:20240523T204446Z
+UID:1716497086511-Refill2024
+DESCRIPTION:Placeholder for Refill 2024. Se https://variant.no/refill for streams for både design og utvikling.
+LOCATION:Stream
+ORGANIZER:Variant
+STATUS:CONFIRMED
+PRIORITY:0
+END:VEVENT
+END:VCALENDAR
diff --git a/public/refill/favicon.png b/public/refill/favicon.png
diff --git a/public/refill/header.png b/public/refill/header.png
diff --git a/public/refill/og.jpg b/public/refill/og.jpg
diff --git a/src/refill/layout.tsx b/src/refill/layout.tsx
@@ -0,0 +1,38 @@
+import Head from 'next/head';
+import { and } from 'src/utils/css';
+import style from './refill.module.css';
+
+import { PropsWithChildren } from 'react';
+import Link from 'next/link';
+
+export default function RefillLayout({ children }: PropsWithChildren<{}>) {
+  return (
+    <div className={style.layout}>
+      <Head>
+        <title>Refill - Variant</title>
+        <link rel="icon" href="/refill/favicon.png" />
+
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:site" content="@variant_as" />
+        <meta property="og:title" content="Refill" key="og:title" />
+        <meta property="og:type" content="website" key="og:type" />
+        <meta
+          property="og:url"
+          content="https://www.variant.no/refill"
+          key="og:url"
+        />
+        <meta
+          property="og:image"
+          content="https://www.variant.no/refill/og.jpg"
+          key="og:image"
+        />
+      </Head>
+
+      <main className={and(style.main)}>{children}</main>
+
+      <Link href="/" className={style.backLink}>
+        ← variant.no
+      </Link>
+    </div>
+  );
+}