fix errors, add links

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

@@ -1,7 +1,7 @@
 const BackgroundBlob = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="876" height="869" viewBox="0 0 876 869" fill="none">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M333.29 131.733C447.782 79.8495 564.518 -31.3045 674.772 8.81219C785.005 48.9214 758.472 195.657 792.159 298.697C823.193 393.618 910.295 483.018 861.189 579.002C811.797 675.545 673.364 692.414 566.745 739.297C449.014 791.067 334.284 893.223 216.537 862.472C95.4793 830.856 49.2788 705.885 18.2766 596.058C-9.96956 495.995 -9.2723 384.268 54.8629 289.734C114.123 202.385 231.921 177.67 333.29 131.733Z" fill="#B91456"/>
+      <path fillRule="evenodd" clipRule="evenodd" d="M333.29 131.733C447.782 79.8495 564.518 -31.3045 674.772 8.81219C785.005 48.9214 758.472 195.657 792.159 298.697C823.193 393.618 910.295 483.018 861.189 579.002C811.797 675.545 673.364 692.414 566.745 739.297C449.014 791.067 334.284 893.223 216.537 862.472C95.4793 830.856 49.2788 705.885 18.2766 596.058C-9.96956 495.995 -9.2723 384.268 54.8629 289.734C114.123 202.385 231.921 177.67 333.29 131.733Z" fill="#B91456"/>
     </svg>
   );
 };

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

@@ -28,7 +28,7 @@ const Description = () => {
         <ImageBlob />
       </div>  
       <div className={style.imageContainer}>
-        <img src='/images/varianttur/street.png' />
+        <img src='/images/varianttur/street.png' alt='Street' />
       </div>  
     </div>
   );

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

@@ -1,7 +1,7 @@
 const ImageBlob = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="451" height="465" viewBox="0 0 451 465" fill="none">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M361.732 71.7524C407.042 111.299 445.917 161.161 450.048 221.149C454.098 279.964 424.31 335.563 382.78 377.393C344.839 415.607 290.992 423.661 238.235 434.493C175.1 447.455 101.067 487.629 52.5362 445.196C4.02915 402.783 45.3083 323.875 38.4589 259.816C31.4307 194.086 -22.0263 127.176 12.5065 70.8214C48.3009 12.4073 128.8 0.381397 197.321 0.564077C259.398 0.729579 314.958 30.927 361.732 71.7524Z" fill="#EB4889"/>
+      <path fillRule="evenodd" clipRule="evenodd" d="M361.732 71.7524C407.042 111.299 445.917 161.161 450.048 221.149C454.098 279.964 424.31 335.563 382.78 377.393C344.839 415.607 290.992 423.661 238.235 434.493C175.1 447.455 101.067 487.629 52.5362 445.196C4.02915 402.783 45.3083 323.875 38.4589 259.816C31.4307 194.086 -22.0263 127.176 12.5065 70.8214C48.3009 12.4073 128.8 0.381397 197.321 0.564077C259.398 0.729579 314.958 30.927 361.732 71.7524Z" fill="#EB4889"/>
     </svg>
   );
 };

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

@@ -1,7 +1,7 @@
 const TravelBlob = () => { 
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="159" height="179" viewBox="0 0 159 179" fill="none">
-      <path 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="#423D89"/>
+      <path fillRule="evenodd" clipRule="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="#423D89"/>
     </svg>
 )};
 

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

@@ -15,7 +15,7 @@ const Hero = () => {
           <HeroBlob />
         </div>
         <div className={style.iconContainer}>
-          <img src='/images/varianttur/happy-traveller.png' />
+          <img src='/images/varianttur/happy-traveller.png' alt='Happy traveller' />
         </div>
       </div>
     </div>

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

@@ -1,7 +1,7 @@
 const HeroBlob = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="862" height="894" viewBox="0 0 862 894" fill="none">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M258.958 -19.17C367.054 -97.3288 495.909 -122.407 622.774 -118.194C745.484 -114.12 865.675 -82.8543 944.145 3.58147C1023.14 90.5992 1044.47 213.51 1035.73 336.69C1026.61 465.382 988.054 594.457 895.202 693.478C792.637 802.857 656.959 895.031 514.052 893.032C371.865 891.044 273.363 783.343 182.562 683.513C90.6761 582.493 -13.2457 473.614 2.32182 330.426C17.879 187.334 136.736 69.2032 258.958 -19.17Z" fill="#8B0F40"/>
+      <path fillRule="evenodd" clipRule="evenodd" d="M258.958 -19.17C367.054 -97.3288 495.909 -122.407 622.774 -118.194C745.484 -114.12 865.675 -82.8543 944.145 3.58147C1023.14 90.5992 1044.47 213.51 1035.73 336.69C1026.61 465.382 988.054 594.457 895.202 693.478C792.637 802.857 656.959 895.031 514.052 893.032C371.865 891.044 273.363 783.343 182.562 683.513C90.6761 582.493 -13.2457 473.614 2.32182 330.426C17.879 187.334 136.736 69.2032 258.958 -19.17Z" fill="#8B0F40"/>
     </svg>
   );
 };

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

@@ -1,7 +1,7 @@
 const FoodBlob = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="669" height="648" viewBox="0 0 669 648" fill="none">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M8.40576 304.673C22.9669 231.745 78.8015 180.973 132.698 129.766C191.384 74.008 246.983 6.19189 327.752 1.26261C417.202 -4.19651 503.532 38.4676 565.38 103.359C630.836 172.036 677.722 263.199 667.32 357.539C657.134 449.915 587.879 521.739 513.161 576.939C444.241 627.855 361.39 653.068 275.969 646.658C190.064 640.212 103.451 610.088 50.347 542.212C-1.14347 476.4 -7.96097 386.644 8.40576 304.673Z" fill="#B91456"/>
+      <path fillRule="evenodd" clipRule="evenodd" d="M8.40576 304.673C22.9669 231.745 78.8015 180.973 132.698 129.766C191.384 74.008 246.983 6.19189 327.752 1.26261C417.202 -4.19651 503.532 38.4676 565.38 103.359C630.836 172.036 677.722 263.199 667.32 357.539C657.134 449.915 587.879 521.739 513.161 576.939C444.241 627.855 361.39 653.068 275.969 646.658C190.064 640.212 103.451 610.088 50.347 542.212C-1.14347 476.4 -7.96097 386.644 8.40576 304.673Z" fill="#B91456"/>
     </svg>
   );
 };

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

@@ -1,7 +1,7 @@
 const HotelBlob = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="835" height="853" viewBox="0 0 835 853" fill="none">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M410.432 3.67756C505.312 14.8308 576.062 81.112 647.17 144.867C724.597 214.287 817.148 278.515 831.757 381.435C847.938 495.417 802.176 610.348 725.436 696.214C644.221 787.087 532.303 856.492 410.432 852.864C291.098 849.312 192.012 768.008 113.652 678.001C41.3731 594.978 0.576815 491.477 0.00809276 381.435C-0.563852 270.769 29.1126 156.764 110.571 81.7893C189.554 9.09289 303.786 -8.85866 410.432 3.67756Z" fill="#B91456"/>
+      <path fillRule="evenodd" clipRule="evenodd" d="M410.432 3.67756C505.312 14.8308 576.062 81.112 647.17 144.867C724.597 214.287 817.148 278.515 831.757 381.435C847.938 495.417 802.176 610.348 725.436 696.214C644.221 787.087 532.303 856.492 410.432 852.864C291.098 849.312 192.012 768.008 113.652 678.001C41.3731 594.978 0.576815 491.477 0.00809276 381.435C-0.563852 270.769 29.1126 156.764 110.571 81.7893C189.554 9.09289 303.786 -8.85866 410.432 3.67756Z" fill="#B91456"/>
     </svg>
   );
 };

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

@@ -7,16 +7,24 @@
   height: 80rem;
 }
 
+.navbarContainer {
+  position: absolute;
+  top: 5rem;
+  width: 50%;
+  left: 50%;
+  transform: translate(-50%);
+}
+
 .hotelBlobContainer {
   position: absolute;
-  top: 7rem;
+  top: 10rem;
   left: 0;
 }
 
 .hotelTextContainer {
   position: absolute;
   z-index: 10;
-  top: 10rem;
+  top: 13rem;
 }
 
 .foodBlobContainer {
@@ -35,13 +43,13 @@
 
 .hotelImageContainer {
   position: absolute;
-  top: 3rem;
-  right: 0;
+  top: 8rem;
+  right: 3rem;
 }
 
 .restaurantImageContainer {
   position: absolute;
-  top: 15rem;
+  top: 20rem;
   right: 15rem;
 }
 

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

@@ -1,10 +1,14 @@
 import style from './info.module.css';
 import HotelBlob from './hotelBlob';
 import FoodBlob from './foodBlob';
+import Navbar, { NavItem } from './../navbar/navbar';
 
 const Info = () => {
   return (
     <div id="info" className={style.infoContainer}>
+      <div className={style.navbarContainer}>
+        <Navbar selectedNavItem={NavItem.INFO} />
+      </div>
       <div className={style.hotelBlobContainer}>
         <HotelBlob />
       </div>
@@ -44,10 +48,10 @@ const Info = () => {
       </div>
       <div className={style.imageContainer}>
         <div className={style.hotelImageContainer}>
-          <img src='/images/varianttur/hotel.png' />
+          <img src='/images/varianttur/hotel.png' alt='Hotel' />
         </div>
         <div className={style.restaurantImageContainer}>
-          <img src='/images/varianttur/restaurant.png' />
+          <img src='/images/varianttur/restaurant.png' alt='Restaurant' />
         </div>
       </div>
     </div>

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

@@ -1,7 +1,7 @@
 const FridayBlob = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="584" height="563" viewBox="0 0 584 563" fill="none">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M212.211 1.00006C284.454 -6.19672 334.196 63.5479 395.738 102.063C460.278 142.455 551.247 156.209 575.522 228.373C600.996 304.101 560.925 386.436 512.872 450.268C467.742 510.218 400.258 548.639 326.049 559.764C255.625 570.322 186.061 548.099 127.149 508.094C69.0425 468.636 24.3048 412.323 8.23498 343.948C-8.32596 273.484 3.04734 199.709 40.0494 137.496C78.9676 72.0625 136.453 8.54693 212.211 1.00006Z" fill="#8B0F40"/>
+      <path fillRule="evenodd" clipRule="evenodd" d="M212.211 1.00006C284.454 -6.19672 334.196 63.5479 395.738 102.063C460.278 142.455 551.247 156.209 575.522 228.373C600.996 304.101 560.925 386.436 512.872 450.268C467.742 510.218 400.258 548.639 326.049 559.764C255.625 570.322 186.061 548.099 127.149 508.094C69.0425 468.636 24.3048 412.323 8.23498 343.948C-8.32596 273.484 3.04734 199.709 40.0494 137.496C78.9676 72.0625 136.453 8.54693 212.211 1.00006Z" fill="#8B0F40"/>
     </svg>
   );
 };

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

@@ -1,15 +1,17 @@
-.oddDay {
-  background-color: var(--color-primary__shade2);
+.day {
   padding: 4rem 8rem 12rem;
   position: relative;
   height: 60rem;
 }
 
+.oddDay {
+  composes: day;
+  background-color: var(--color-primary__shade2);
+}
+
 .evenDay {
+  composes: day;
   background-color: var(--color-primary__shade1);
-  padding: 4rem 8rem 12rem;
-  position: relative;
-  height: 60rem;
 }
 
 .backgroundBlobContainer {
@@ -57,15 +59,22 @@ time {
   margin-top: -1rem;
 }
 
+.list .listItemTitle::before {
+  content: url('./itinirary-blob.svg');
+  margin-left: -0.875rem;
+}
+
 .listItemInfo {
   font-size: 0.813rem;
   line-height: 0.938rem;
   margin-left: 1rem;
   margin-top: 0;
   width: 21rem;
+  display: flex;
 }
 
-.list .listItemTitle::before {
-  content: url('./itinirary-blob.svg');
-  margin-left: -0.875rem;
+.externalLink {
+  font-size: 0.813rem;
+  margin-left: 0.2rem;
+  text-decoration: underline;
 }

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

@@ -2,6 +2,7 @@ import FridayBlob from './fridayBlob';
 import style from './itinerary.module.css';
 import SaturdayBlob from './saturdayBlob';
 import SundayBlob from './sundayBlob';
+import Navbar, { NavItem } from './../navbar/navbar';
 
 const Itinerary = () => {
   return (
@@ -11,7 +12,7 @@ const Itinerary = () => {
           <FridayBlob />
         </div>
         <div className={style.textContainer}>
-          <h2 className={style.dayHeading}>Fredag</h2>
+          <Navbar selectedNavItem={NavItem.FRIDAY} />
           <ol className={style.list}>
             <li>
               <time>10:00</time>
@@ -59,7 +60,7 @@ const Itinerary = () => {
               <time>19:00</time>
               <div>
                 <p className={style.listItemTitle}>Festmiddag & fest 🍴 💃🏼 🕺🏽</p>
-                <p className={style.listItemInfo}>I hotellrestauranten, Long bar and grill</p>
+                <p className={style.listItemInfo}>I hotellrestauranten, <a href='https://www.harbourhotels.co.uk/guildford/eat-and-drink/the-long-bar' target='_blank' className={style.externalLink}>Long bar and grill</a></p>
               </div>
             </li>
           </ol>
@@ -70,7 +71,7 @@ const Itinerary = () => {
           <SaturdayBlob />
         </div>
         <div className={style.textContainer}>
-          <h2 className={style.dayHeading}>Lørdag</h2>
+        <Navbar selectedNavItem={NavItem.SATURDAY} />
           <ol className={style.list}>
             <li>
               <time>07:30-11:00</time>
@@ -104,7 +105,7 @@ const Itinerary = () => {
               <time>19:30</time>
               <div className={style.borderedListItem}>
                 <p className={style.listItemTitle}>Middag 🍴</p>
-                <p className={style.listItemInfo}>Red Lion</p>
+                <p className={style.listItemInfo}><a href='https://www.redlionshamleygreen.com/dine/' target='_blank' className={style.externalLink}>Red Lion</a></p>
               </div>
             </li>
             <li>
@@ -122,7 +123,7 @@ const Itinerary = () => {
           <SundayBlob />
         </div>
         <div className={style.textContainer}>
-          <h2 className={style.dayHeading}>Søndag</h2>
+        <Navbar selectedNavItem={NavItem.SUNDAY} />
           <ol className={style.list}>
             <li>
               <time>07:30-11:00</time>

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

@@ -1,7 +1,7 @@
 const SaturdayBlob = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="650" height="619" viewBox="0 0 650 619" fill="none">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M442.444 57.8209C515.033 88.3615 595.026 116.121 629.463 186.945C664.395 258.788 649.191 343.968 617.161 417.151C587.061 485.924 529.247 534.618 462.369 568.723C391.967 604.624 313.934 632.853 238.155 610.427C158.152 586.751 99.065 522.666 59.1545 449.397C15.9003 369.99 -17.4998 278.87 10.7644 192.977C39.7605 104.86 115.844 35.8119 204.371 8.09444C284.799 -17.087 364.761 25.1374 442.444 57.8209Z" fill="#B91456"/>
+      <path fillRule="evenodd" clipRule="evenodd" d="M442.444 57.8209C515.033 88.3615 595.026 116.121 629.463 186.945C664.395 258.788 649.191 343.968 617.161 417.151C587.061 485.924 529.247 534.618 462.369 568.723C391.967 604.624 313.934 632.853 238.155 610.427C158.152 586.751 99.065 522.666 59.1545 449.397C15.9003 369.99 -17.4998 278.87 10.7644 192.977C39.7605 104.86 115.844 35.8119 204.371 8.09444C284.799 -17.087 364.761 25.1374 442.444 57.8209Z" fill="#B91456"/>
     </svg>
   );
 };

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

@@ -1,7 +1,7 @@
 const SundayBlob = () => {
   return (
     <svg xmlns="http://www.w3.org/2000/svg" width="557" height="517" viewBox="0 0 557 517" fill="none">
-      <path fill-rule="evenodd" clip-rule="evenodd" d="M556.006 237.9C557.346 298.544 495.639 342.059 448.669 388.19C396.918 439.019 353.1 504.014 274.766 514.124C189.877 525.079 98.8305 495.589 43.5193 440.477C-8.40613 388.74 -3.29877 314.448 6.59368 246.921C14.9302 190.015 48.3683 141.285 93.6363 98.3716C141.551 52.9497 194.492 1.869 266.336 0.690896C338.179 -0.487195 390.714 50.5441 442.141 92.6568C493.447 134.671 554.67 177.409 556.006 237.9Z" fill="#8B0F40"/>
+      <path fillRule="evenodd" clipRule="evenodd" d="M556.006 237.9C557.346 298.544 495.639 342.059 448.669 388.19C396.918 439.019 353.1 504.014 274.766 514.124C189.877 525.079 98.8305 495.589 43.5193 440.477C-8.40613 388.74 -3.29877 314.448 6.59368 246.921C14.9302 190.015 48.3683 141.285 93.6363 98.3716C141.551 52.9497 194.492 1.869 266.336 0.690896C338.179 -0.487195 390.714 50.5441 442.141 92.6568C493.447 134.671 554.67 177.409 556.006 237.9Z" fill="#8B0F40"/>
     </svg>
   );
 };

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

@@ -2,6 +2,7 @@
   display: flex;
   justify-content: space-between;
   margin-left: 8rem;
+  margin-bottom: 5rem;
 }
 
 a {
@@ -10,6 +11,7 @@ a {
   color: var(--color-standard__white) !important;
 }
 
+.selected,
 a:hover {
   text-decoration: underline;
   text-decoration-color: var(--color-standard__white);

src/varianttur/guildford23/components/navbar/navbar.tsx

@@ -1,12 +1,19 @@
 import style from './navbar.module.css';
 
-const Navbar = () => {
+export enum NavItem {
+  FRIDAY,
+  SATURDAY,
+  SUNDAY,
+  INFO
+};
+
+const Navbar = ({ selectedNavItem }: { selectedNavItem?: NavItem }) => {
   return (
     <div className={style.navbarContainer}>
-      <a href="#friday">Fredagen</a>
-      <a href="#saturday">Lørdagen</a>
-      <a href="#sunday">Søndagen</a>
-      <a href="#info">Praktisk info</a>
+      <a href="#friday" className={selectedNavItem === NavItem.FRIDAY ? style.selected : ''}>Fredagen</a>
+      <a href="#saturday" className={selectedNavItem === NavItem.SATURDAY ? style.selected : ''}>Lørdagen</a>
+      <a href="#sunday" className={selectedNavItem === NavItem.SUNDAY ? style.selected : ''}>Søndagen</a>
+      <a href="#info" className={selectedNavItem === NavItem.INFO ? style.selected : ''}>Praktisk info</a>
     </div>
   );
 };

yarn.lock

@@ -877,9 +877,9 @@ callsites@^3.0.0:
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
 caniuse-lite@^1.0.30001400, caniuse-lite@^1.0.30001406, caniuse-lite@^1.0.30001407:
-  version "1.0.30001419"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001419.tgz#3542722d57d567c8210d5e4d0f9f17336b776457"
-  integrity sha512-aFO1r+g6R7TW+PNQxKzjITwLOyDhVRLjW0LcwS/HCZGUUKTGNp9+IwLC4xyDSZBygVL/mxaFR3HIV6wEKQuSzw==
+  version "1.0.30001520"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001520.tgz"
+  integrity sha512-tahF5O9EiiTzwTUqAeFjIZbn4Dnqxzz7ktrgGlMYNLH43Ul26IgTMH/zvL3DG0lZxBYnlT04axvInszUsZULdA==
 
 chai@^4.3.6:
   version "4.3.6"