Helsinki Varianttur for Bergen (#395)

* Initial content and design for Helsinki trip

* Add and translate alt text

* Small responsiveness fixes

* Add content

---------

Co-authored-by: Vegard Feste <vif@variant.no>

pages/helsinki23/index.tsx

@@ -0,0 +1 @@
+export { default } from 'src/helsinki23/index';

pages/helsinki23/tips.tsx

@@ -0,0 +1 @@
+export { default } from 'src/helsinki23/tips';

src/helsinki23/components/Container.module.css

@@ -0,0 +1,29 @@
+.container {
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0 2rem;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}

src/helsinki23/components/Container.tsx

@@ -0,0 +1,6 @@
+import { ReactNode } from "react";
+import styles from './Container.module.css';
+
+export default function Container({ children, className, ...props }: { children: ReactNode } & React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>) {
+  return <div className={`${className ? className : ''} ${styles.container}`} {...props}>{children}</div>
+}

src/helsinki23/components/Day.module.css

@@ -0,0 +1,63 @@
+.day {
+  padding: 1rem;
+  margin-top: 2.5rem;
+}
+
+.with_background {
+  background-color: rgb(83 77 172);
+}
+
+.day > h2 {
+  padding-left: 3rem;
+  padding-top: 3rem;
+  padding-bottom: 1rem;
+  font-weight: 700;
+  font-size: 2rem;
+  line-height: 2.25rem;
+}
+
+.day ul {
+  list-style: none;
+  padding: 0;
+  margin: 0 auto;
+  max-width: 28rem;
+  margin-bottom: 4rem;
+  font-size: 20px;
+  line-height: 24px;
+  font-weight: 500;
+}
+
+.day ul > li {
+  line-height: 46px;
+  margin-bottom: 1rem;
+  margin-top: 0;
+}
+
+.day a {
+  all: unset;
+  text-underline-offset: 8px !important;
+  text-decoration: underline !important;
+  text-decoration-thickness: 2px !important;
+  text-decoration-color: #03dac6 !important;
+  display: inline-flex !important;
+  gap: 10px !important;
+  cursor: pointer;
+}
+
+@media (min-width: 1024px) {
+  .with_background {
+    border-radius: 1.5rem;
+  }
+}
+
+@media (max-width: 767px) {
+  .day > h2 {
+    padding-left: 1rem;
+  }
+
+  .day ul {
+    list-style: none;
+    padding-left: 1rem;
+    margin: 0 0;
+  }
+}

src/helsinki23/components/Day.tsx

@@ -0,0 +1,17 @@
+import { ReactNode } from "react";
+
+import styles from './Day.module.css';
+import Container from "./Container";
+
+export default function Day({ title, children, background = false }: { title: string, children: ReactNode, background?: boolean }) {
+  return <section>
+    <Container className={`${styles.day} ${background && styles.with_background}`}>
+      <h2>
+        {title}
+      </h2>
+      <div>
+        {children}
+      </div>
+    </Container>
+  </section>;
+}

src/helsinki23/components/Hero.module.css

@@ -0,0 +1,90 @@
+.container {
+  display: flex;
+  position: relative;
+  margin-top: 8rem;
+  flex-direction: column;
+}
+
+.left {
+  display: flex;
+  margin-bottom: 1.5rem;
+  margin-top: 1rem;
+  flex-direction: column;
+  margin-left: 4rem;
+}
+
+.text {
+  z-index: 10;
+  width: 100%;
+  font-size: 2.25rem;
+  line-height: 2.5rem;
+  text-align: left;
+}
+
+.text > h1 {
+  font-size: 5rem;
+}
+
+.text > h2 {
+  font-size: 2rem;
+  line-height: 2.25rem;
+  margin-top: 0;
+}
+
+.arrow {
+  position: absolute;
+  left: 1rem;
+  top: -3rem;
+  width: 100px;
+  font-family: 'Recoleta';
+  z-index: 5;
+}
+
+.arrow > span {
+  position: absolute;
+  top: -2.5rem;
+}
+
+.arrow > img {
+  width: 60px;
+  transform: rotate(45deg);
+}
+
+.blob {
+  position: absolute;
+  left: 0.5rem;
+  top: -2.5rem;
+  z-index: auto;
+  width: 33.333333%;
+}
+
+@media (min-width: 1024px) {
+  .container {
+    align-items: center;
+    flex-direction: row;
+  }
+
+  .left {
+    width: 50%;
+  }
+
+  .arrow {
+    top: 3.5rem;
+    left: -3rem;
+    width: 20%;
+  }
+
+  .arrow > span {
+    top: -2rem;
+  }
+
+  .arrow > img {
+    transform: rotate(0);
+  }
+
+  .blob {
+    left: -2rem;
+    top: 5rem;
+    width: 50%;
+  }
+}

src/helsinki23/components/Hero.tsx

@@ -0,0 +1,28 @@
+import styles from "./Hero.module.css";
+
+import arrow from "../images/curved-arrow.svg";
+import blob from "../images/blob.svg";
+import helsinkiHero from "../images/helsinki-hero.png";
+import Container from "./Container";
+
+export default function Hero() {
+  return <section id="hero">
+    <Container className={styles.container}>
+      <div className={styles.left}>
+        <div className={styles.arrow}>
+          <span>Jippi-blob</span>
+          <img src={arrow} alt="pil til blobben" />
+        </div>
+        <div className={styles.blob}>
+          <img src={blob} alt="blobben" />
+        </div>
+        <div className={styles.text}>
+          <p>Varianttur</p>
+          <h1>Helsinki</h1>
+          <h2>1.-3. september</h2>
+        </div>
+      </div>
+      <img src={helsinkiHero} alt="helsinki" style={{ margin: "0 auto", maxWidth: '100%', zIndex: 10 }} />
+    </Container>
+  </section>;
+}

src/helsinki23/components/Tip.module.css

@@ -0,0 +1,85 @@
+.tip {
+  display: flex;
+  align-items: center;
+  padding-top: 3rem;
+  padding-bottom: 3rem;
+  position: relative;
+  flex-direction: column-reverse;
+  gap: 3rem;
+}
+
+.tip:last-child {
+  padding-bottom: 12rem;
+}
+
+.tip h2 {
+  font-weight: 500;
+  font-size: 2rem;
+}
+
+.tip ul {
+  font-size: 1.2rem;
+  line-height: 1.7rem;
+  margin-top: 2rem;
+  margin-bottom: 0;
+}
+
+.tip ul > li:last-child {
+  margin-bottom: 0;
+}
+
+.tip > div {
+  width: 100%;
+  padding: 4rem;
+  border-radius: 1.5rem;
+  background-color: rgb(53 49 110);
+  display: flex;
+  justify-content: left;
+}
+
+.tip > img {
+  max-width: 100%;
+}
+
+.tip li > a {
+  display: flex;
+  gap: 20px;
+}
+
+@media (max-width: 1023px) {
+  .tip ul {
+    list-style: none;
+    padding-left: 0;
+  }
+}
+
+@media (min-width: 1024px) {
+  .tip {
+    flex-direction: row;
+    padding-top: 6rem;
+    padding-bottom: 6rem;
+  }
+
+  .tip > div {
+    width: 80%;
+  }
+
+  .reversed > div {
+    justify-content: right;
+  }
+
+  .reversed {
+    flex-direction: row-reverse;
+  }
+
+  .tip > img {
+    position: absolute;
+    right: 0;
+    max-width: 50%;
+  }
+
+  .tip.reversed > img {
+    left: 0;
+    right: auto;
+  }
+}

src/helsinki23/components/Tip.tsx

@@ -0,0 +1,38 @@
+import Image from 'next/image';
+
+import styles from './Tip.module.css';
+
+import shopping from '../images/shopping.png';
+import culture from '../images/culture.png';
+import chill from '../images/chill.png';
+
+import externalLink from '../images/external-link.svg';
+
+type Tip = {
+  title: string,
+  suggestions: {
+    title: string,
+    link: string
+  }[],
+  image: string
+};
+
+const images: { [key: string]: string } = {
+  chill, culture, shopping
+};
+
+export default function Tip({ tip, reversed }: { tip: Tip, reversed?: boolean }) {
+
+  return <div className={`${styles.tip} ${reversed ? styles.reversed : ''}`}>
+    <div>
+      <div>
+        <h2>{tip.title}</h2>
+        <ul>
+          {tip.suggestions.map((suggestion, i) => <li key={i}><a href={suggestion.link} target='_blank'>{suggestion.title} <Image src={externalLink} height={24} width={24} alt="ekstern lenke" /></a></li>)}
+        </ul>
+      </div>
+    </div>
+
+    {tip.image in images && <img className={`${reversed ? styles.reversed : ''}`} alt={tip.image} src={images[tip.image]!} />}
+  </div>
+}