init guildford 23

pages/varianttur/guildford23.tsx

@@ -0,0 +1 @@
+export { default } from 'src/varianttur/guildford23';

src/varianttur/guildford23/components/description/description.module.css

@@ -0,0 +1,16 @@
+.descriptionContainer {
+  background-color: var(--color-secondary4__tint2);
+  padding-left: 8rem;
+  padding-top: 4rem;
+  padding-bottom: 12rem;
+}
+
+.importantText {
+  text-transform: uppercase;
+  font-weight: bold;
+}
+
+.descriptionFooter {
+  font-style: italic;
+  margin-top: 7rem;
+}

src/varianttur/guildford23/components/description/description.tsx

@@ -0,0 +1,22 @@
+import style from './description.module.css';
+
+const Description = () => {
+  return (
+    <div className={style.descriptionContainer}>
+        <h2>Stop being so apple handome, this is going to be jolly good!</h2>
+        <p>
+          Hundre og <span className={style.importantText}>fem</span>ti mil sørover, litt vest og nedover ligger Guildford – en liten by i distriktet Surrey. Sjølberga med både slott og vinskole, shoppinggate og eget teater. Fritt for vær og vind(🤞), akkurat der vi skal bo på Harbour hotel. Her skal vi feire <span className={style.importantText}>5års</span> dagen til Variant🎉 
+        </p>
+        <p>
+          Det blir litt faglig opplegg 🤓, vi skal spise digg mat 🍴, og dra ut på livlige, typisk engelske aktiviteter 🏰 🎢 🍷 🍸🌆. Vi har prøvd å ha noe for alle og enhver, både med mat og utflukter – håper det faller i smak. Det er også lagt inn tid på lørdagen til å ha litt frilek 🛝, forslag til påfunn finner du under praktisk info.
+        </p>
+        <p className={style.descriptionFooter}>
+          <span>(“Og hva skjer med båtturen da?” tenker du,</span> 
+          <br/>
+          <span>og vi må faktisk skuffe dere: ingen båttur i år😱🚨)</span>
+        </p>
+    </div>
+  );
+};
+
+export default Description;

src/varianttur/guildford23/components/heading/arrow.tsx

@@ -0,0 +1,17 @@
+const Arrow = () => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="85" height="79" viewBox="0 0 85 79" fill="none">
+      <g clip-path="url(#clip0_1064_3133)">  
+        <path d="M50.2277 65.0902C46.13 66.6579 42.0334 68.2301 37.9325 69.7873C37.5246 69.9421 37.3998 70.1202 37.5566 70.4947C37.7082 70.8574 37.8485 71.2319 37.9288 71.62C38.0313 72.1147 38.2566 72.2179 38.7989 72.0645C41.8841 71.192 44.9654 70.2843 48.0701 69.5336C51.7051 68.6545 55.3625 67.9242 59.01 67.1285C59.2147 67.084 59.4183 67.0304 59.7073 66.9605C59.6115 66.715 59.5511 66.5156 59.4596 66.3335C56.6404 60.7286 54.2932 54.8988 52.1658 48.964C51.8385 48.0513 51.9785 48.0867 50.9394 48.4189C49.3882 48.9152 49.3994 48.9088 49.77 50.3686C50.7077 54.0622 51.6336 57.7592 52.563 61.4556C52.5876 61.5537 52.5919 61.6588 52.614 61.8239C52.4548 61.7822 52.348 61.7687 52.2564 61.7281C48.3712 60.0034 44.5945 58.1179 41.2341 55.595C34.2026 50.3163 29.399 43.5061 27.3434 34.8331C25.6802 27.8154 26.121 20.6545 28.3408 13.3999C29.5461 9.46052 31.2861 5.69963 33.4087 2.06604C33.8464 1.31701 33.838 1.31241 33.1048 0.97089C32.6927 0.778728 32.2701 0.603217 31.8679 0.394869C31.4492 0.17811 31.2091 0.30387 30.9572 0.738259C29.1459 3.86506 27.5477 7.06656 26.3237 10.4087C24.0123 16.7202 22.9604 23.0881 23.4176 29.5087C24.1543 39.8592 28.3293 48.4202 35.7077 55.2853C38.6596 58.032 41.9746 60.3297 45.6339 62.1798C47.1714 62.9573 48.7426 63.6802 50.2987 64.4272C50.4931 64.5205 50.6907 64.6081 50.8866 64.6982C50.8822 64.747 50.8776 64.7959 50.8728 64.8445C50.6579 64.9265 50.4426 65.0077 50.2276 65.0902L50.2277 65.0902Z" fill="white"/>
+        <path d="M50.8731 64.8449C50.658 64.9268 50.4427 65.008 50.2277 65.0905C46.13 66.6581 42.0334 68.2304 37.9325 69.7876C37.5246 69.9424 37.3998 70.1204 37.5566 70.495C37.7082 70.8577 37.8485 71.2321 37.9288 71.6202C38.0313 72.115 38.2566 72.2182 38.7989 72.0647C41.8841 71.1922 44.9654 70.2846 48.0701 69.5339C51.7051 68.6547 55.3625 67.9244 59.01 67.1288C59.2147 67.0842 59.4183 67.0306 59.7073 66.9607C59.6115 66.7153 59.5511 66.5159 59.4596 66.3337C56.6404 60.7288 54.2932 54.8991 52.1658 48.9642C51.8385 48.0515 51.9785 48.0869 50.9394 48.4191C49.3882 48.9154 49.3994 48.909 49.77 50.3688C50.7077 54.0625 51.6336 57.7594 52.563 61.4559C52.5876 61.5539 52.5919 61.659 52.614 61.8241C52.4548 61.7825 52.348 61.769 52.2564 61.7284C48.3712 60.0036 44.5945 58.1182 41.2341 55.5952C34.2026 50.3165 29.399 43.5063 27.3434 34.8334C25.6802 27.8156 26.121 20.6547 28.3408 13.4002C29.5461 9.46076 31.2861 5.69988 33.4087 2.06628C33.8464 1.31725 33.838 1.31265 33.1048 0.971135C32.6927 0.778972 32.2701 0.603462 31.8679 0.395113C31.4492 0.178354 31.2091 0.304115 30.9572 0.738503C29.1459 3.8653 27.5477 7.0668 26.3237 10.409C24.0123 16.7205 22.9604 23.0884 23.4176 29.5089C24.1543 39.8594 28.3293 48.4204 35.7077 55.2855C38.6596 58.0322 41.9746 60.3299 45.6339 62.18C47.1714 62.9575 48.7426 63.6804 50.2987 64.4275C50.4931 64.5207 50.6907 64.6084 50.8866 64.6985C50.8821 64.7474 50.8775 64.7964 50.873 64.8448L50.8731 64.8449Z" fill="#333333"/>
+      </g>
+      <defs>
+        <clipPath id="clip0_1064_3133">
+            <rect width="58.5851" height="62.7146" fill="white" transform="matrix(0.908453 0.417988 -0.494499 0.869178 31.0122 0)"/>
+        </clipPath>
+      </defs>
+    </svg>
+  );
+};
+
+export default Arrow;

src/varianttur/guildford23/components/heading/heading.module.css

@@ -0,0 +1,53 @@
+.headingContainer {
+  position: relative;
+  height: 30rem;
+  margin-bottom: 2rem;
+}
+
+.blobInfoContainer {
+  position: absolute;
+  top: 5rem;
+  left: 3rem;
+}
+
+.blobInfo {
+  position: relative;
+  width: 10rem;
+}
+
+.blobName {
+  position: absolute;
+  top: -3rem;
+  font-family: 'Recoleta';
+}
+
+.arrow {
+  transform: rotate(28.561deg);
+}
+
+.blobContainer {
+  position: absolute;
+  top: 8rem;
+  left: 4rem;
+}
+
+.heading {
+  position: absolute;
+  z-index: 10;
+  top: 11rem;
+  left: 8rem;
+}
+
+.supHeading {
+  color: var(--color-primary);
+  font-size: 1.875rem;
+}
+
+.mainHeading {
+  font-size: 6.25rem;
+}
+
+.subHeading {
+  font-size: 2.5rem;
+  margin-top: 1.875rem;
+}

src/varianttur/guildford23/components/heading/heading.tsx

@@ -0,0 +1,28 @@
+import style from './heading.module.css';
+import Arrow from './arrow';
+import Reisefeberblob from './reisefeberblob';
+
+const Heading = () => {
+  return (
+    <div className={style.headingContainer}>
+      <div className={style.blobInfoContainer}>
+        <div className={style.blobInfo}>
+          <span className={style.blobName}>Reisefeber-blob</span>
+          <div className={style.arrow}>
+            <Arrow />
+          </div>
+        </div>
+      </div>
+      <div className={style.blobContainer}>
+        <Reisefeberblob />
+      </div>
+      <div className={style.heading}>
+        <span className={style.supHeading}>Varianttur 2023</span>
+        <h1 className={style.mainHeading}>Guildford</h1>
+        <h2 className={style.subHeading}>1.-3. september</h2>
+      </div>
+    </div>
+  )
+};
+
+export default Heading;

src/varianttur/guildford23/components/heading/reisefeberblob.tsx

@@ -0,0 +1,8 @@
+const Reisefeberblob = () => { 
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="159" height="179" viewBox="0 0 159 179" fill="none">
+      <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M87.1991 0.0307069C109.16 1.09989 116.825 29.198 130.544 46.3867C141.732 60.4046 157.232 71.8803 158.806 89.7491C160.492 108.885 150.951 126.52 138.921 141.493C125.069 158.733 109.216 180.894 87.1991 178.871C65.4495 176.872 59.4547 148.404 44.18 132.786C29.2424 117.512 1.15408 111.088 0.035833 89.7491C-1.0875 68.3135 24.4655 57.3429 39.4198 41.9503C54.7682 26.152 65.2034 -1.04018 87.1991 0.0307069Z" fill="#B7B4DE"/>
+    </svg>
+)};
+
+export default Reisefeberblob;

src/varianttur/guildford23/components/hero/hero.module.css

@@ -0,0 +1,7 @@
+.heroContainer {
+  background-color: var(--color-secondary4);
+  width: 100%;
+  height: 50rem;
+  display: flex;
+  flex-direction: column;
+}

src/varianttur/guildford23/components/hero/hero.tsx

@@ -0,0 +1,14 @@
+import style from './hero.module.css';
+import Heading from '../heading/heading';
+import Navbar from '../navbar/navbar';
+
+const Hero = () => {
+  return (
+    <div className={style.heroContainer}>
+      <Heading />
+      <Navbar />
+    </div>
+  );
+};
+
+export default Hero; 

src/varianttur/guildford23/components/info/info.module.css

@@ -0,0 +1,60 @@
+.infoContainer {
+  background-color: var(--color-secondary4__tint2);
+  padding-left: 8rem;
+  padding-top: 4rem;
+  padding-bottom: 8rem;
+  display: flex;
+  width: 100%;
+}
+
+.textContainer {
+  width: 20rem;
+}
+
+.imageContainer {
+  position: relative;
+  width: 40rem;
+}
+
+.hotelImage {
+  position: absolute;
+  top: 3rem;
+  right: 0;
+}
+
+.restaurantImage {
+  position: absolute;
+  top: 15rem;
+  left: 0;
+}
+
+h3 {
+  font-size: 1.5rem;
+  font-weight: 500;
+  line-height: 1.5;
+  margin-bottom: 1rem;
+}
+
+.phone {
+  margin-top: 1rem;
+  margin-bottom: 2.5rem;
+}
+
+.addressContainer {
+  margin-bottom: 5rem;
+  display: flex;
+}
+
+.addressLine {
+  margin-top: 0;
+  margin-left: 0.5rem;
+}
+
+.foodContainer {
+  margin-bottom: 5rem;
+}
+
+.contactPerson {
+  display: flex;
+  justify-content: space-between;
+}

src/varianttur/guildford23/components/info/info.tsx

@@ -0,0 +1,50 @@
+import style from './info.module.css';
+
+const Info = () => {
+  return (
+    <div id="info" className={style.infoContainer}>
+      <div className={style.textContainer}>
+        <h2>Det praktiske</h2>
+        <h3>Harbour Hotel Guildford</h3>
+        <p className={style.phone}>☎️ +????</p>
+        <div className={style.addressContainer}>
+          <span>📍</span>
+          <div>
+            <p className={style.addressLine}>3 Alexandra Terrace,</p>
+            <p className={style.addressLine}>Guildford GU1 3DA,</p>
+            <p className={style.addressLine}>Storbritannia</p>
+          </div>
+        </div>
+        <div className={style.foodContainer}>
+          <h3>Allergier og matpreferanser</h3>
+          <p>Har du allergier eller matpreferanser og vil være helt sikker på at det er tatt hensyn til? Dobbeltsjekk heller med oss enn å lure, det gjør det bedre både for deg og oss!</p>
+        </div>
+        <div>
+          <h3>Lurer du på noe underveis?</h3>
+          <div className={style.contactPerson}>
+            <span>Linda</span>
+            <span>+47 ??</span>
+          </div>
+          <div className={style.contactPerson}>
+            <span>Falk</span>
+            <span>+47 ??</span>
+          </div>
+          <div className={style.contactPerson}>
+            <span>Lotta-Linn</span>
+            <span>+47 91 55 34 34</span>
+          </div>
+        </div>
+      </div>
+      <div className={style.imageContainer}>
+        <div className={style.hotelImage}>
+          <img src='/images/varianttur/hotel.png' />
+        </div>
+        <div className={style.restaurantImage}>
+          <img src='/images/varianttur/restaurant.png' />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Info;

src/varianttur/guildford23/components/itinerary/itinerary.module.css

@@ -0,0 +1,44 @@
+.oddDay {
+  background-color: var(--color-secondary4);
+  padding-left: 8rem;
+  padding-top: 4rem;
+  padding-bottom: 8rem;
+}
+
+.evenDay {
+  background-color: var(--color-secondary4__tint2);
+  padding-left: 8rem;
+  padding-top: 4rem;
+  padding-bottom: 8rem;
+}
+
+.dayHeading {
+  font-size: 2.813rem;
+  margin-bottom: 5rem;
+}
+
+.list {
+  margin: 0 auto;
+  list-style-type: none;
+  padding-left: 0;
+  border-left: solid var(--color-primary);
+  margin-left: 20rem;
+}
+
+li {
+  padding-bottom: 2rem;
+}
+
+time {
+  display: inline-block;
+  width: 8rem;
+  margin-left: -8rem;
+}
+
+.list span::before {
+  content: url('./itinirary-blob.svg');
+  color: var(--color-primary);
+  display: inline-block;
+  margin-left: -1rem;
+  margin-top: -0.5rem;
+}

src/varianttur/guildford23/components/itinerary/itinerary.tsx

@@ -0,0 +1,45 @@
+import style from './itinerary.module.css';
+
+const Itinerary = () => {
+  return (
+    <div>
+      <div id="friday" className={style.oddDay}>
+        <h2 className={style.dayHeading}>Fredag</h2>
+        <ol className={style.list}>
+          <li><time>09:00</time><span>Oppmøte Værnes 🧳</span></li>
+          <li><time>10:30</time><span>Flyet går✈️</span></li>
+          <li><time>Ca. 14:15</time><span>Buss til hotellet 🚍</span></li>
+          <li><time>15:00</time><span>Ankomst hotellet 🏨</span></li>
+          <li><time>15:00-17:30</time><span>Variantdag 🚀</span></li>
+          <li><time>17:30</time><span>Velkomst 🥂</span></li>
+          <li><time>19:00</time><span>Festmiddag & fest 🍴 💃🏼 🕺🏽</span></li>
+        </ol>
+      </div>
+      <div id="saturday" className={style.evenDay}>
+        <h2 className={style.dayHeading}>Lørdag</h2>
+        <ol className={style.list}>
+          <li><time>07:30-11:00</time><span>Frokost på hotellet 🍳</span></li>
+          <li><time>10:30</time><span>Transport til aktiviteter 🚍</span></li>
+          <li><time>11:30</time><span>Aktiviteter 🏰 🎢 🍷 🍸🌆</span></li>
+          <li><time>13:30/14:30</time><span>Tilbake til hotellet 🏨</span></li>
+          <li><time>14:00</time><span>Fritid 🛝</span></li>
+          <li><time>19:15</time><span>Buss til middag 🚍</span></li>
+          <li><time>19:30</time><span>Middag 🍴</span></li>
+          <li><time>23:30</time><span>Buss tilbake til hotellet 🚍</span></li>
+        </ol>
+      </div>
+      <div id="sunday" className={style.oddDay}>
+        <h2 className={style.dayHeading}>Søndag</h2>
+        <ol className={style.list}>
+          <li><time>07:30-11:00</time><span>Frokost på hotellet 🍳</span></li>
+          <li><time>11:00</time><span>Utsjekk 🧳</span></li>
+          <li><time>12:00</time><span>Buss til Heathrow 🚍</span></li>
+          <li><time>15:35-18:50</time><span>Fly Heathrow - Oslo ✈️</span></li>
+          <li><time>21:00-21:55</time><span>Fly Oslo - Værnes ✈️</span></li>
+        </ol>
+      </div>
+    </div>
+  );
+};
+
+export default Itinerary;