seo-change

package.json

@@ -27,6 +27,7 @@
     "rough-notation": "^0.5.1",
     "svelte-fa": "^3.0.3",
     "svelte-flag-icons": "^0.2.1",
+    "svelte-lazy-image": "^0.5.1",
     "svelte-loading-spinners": "0.3.4",
     "svelte-rough-notation": "^0.1.4",
     "svelte-select": "^5.2.1"

src/components/Calendar.svelte

@@ -70,7 +70,7 @@
 <style>
   .root {
     font-size: 1rem;
-
+    background-color: #FFFFFF;
     width: 315px;
     border: 1px solid var(--calendar-border-color);
     border-radius: 5px;
@@ -101,8 +101,8 @@
   }
 
   .regular-day {
-    color: #dac5b6;
-    opacity: 0.7;
+    color: #6E533A;
+    opacity: contrast(5.17);
   }
 
   .highlighted-day {

src/components/Header.svelte

@@ -3,11 +3,12 @@
   import { base, assets } from "$app/paths"
   import LanguageSwitcher from "./LanguageSwitcher.svelte"
   import ThemeSwitcher from "./ThemeSwitcher.svelte"
+  import { useLazyImage as lazyImage } from 'svelte-lazy-image';
 </script>
 
 <header>
   <a href={`${base}/`}>
-    <img src={`${assets}/logo.png`} alt="logo" />
+    <img class="logo-header" src={`${assets}/logo.png`} alt="logo" use:lazyImage />
   </a>
 
   <nav>
@@ -34,6 +35,7 @@
     left: 5vw;
 
     height: 60px;
+    width: 90px;
 
     filter: drop-shadow(0px 17px 17px rgba(0, 0, 0, 11%));
   }
@@ -53,6 +55,7 @@
       left: 10vw;
 
       height: 70px;
+      width: 90px;
     }
 
     nav {

src/components/Hero.svelte

@@ -3,10 +3,11 @@
   import { assets } from "$app/paths"
   import Button from "./Button.svelte"
   import Link from "./Link.svelte"
+  import { useLazyImage as lazyImage } from 'svelte-lazy-image';
 </script>
 
 <section>
-  <div class="background-overlay" />
+  <img class="hero-background" src="/hero-background.png" alt="hero-background" use:lazyImage>
 
   <div class="message">
     <div class="mascot">
@@ -24,15 +25,15 @@
       </p>
     </div>
 
-    <h4 class="date">
+    <span class="date">
       <span>
         <Localized id="hero--date-first-line" />
       </span>
 
       <span>
         <Localized id="hero--date-second-line" />
       </span>
-    </h4>
+    </span>
 
     <p class="location">
       <span>
@@ -62,16 +63,11 @@
     height: 55vh;
   }
 
-  .background-overlay {
+  .hero-background{
     position: absolute;
-
     width: 100%;
     height: 100%;
-
-    background-image: url("/hero-background.png");
     background-position: center center;
-    background-repeat: no-repeat;
-    background-size: cover;
     mix-blend-mode: overlay;
   }
 
@@ -112,7 +108,6 @@
     opacity: 70%;
   }
 
-  h4,
   p {
     margin: 0;
   }
@@ -121,6 +116,8 @@
     display: flex;
     flex-direction: column;
     margin-bottom: 10px;
+    font-size: 33.6px;
+    font-weight: bold;
   }
 
   .location {

src/components/LanguageSwitcher.svelte

@@ -22,6 +22,7 @@
   searchable={false}
   clearable={false}
   {items}
+  id="language-select"
   --background="none"
   --width="100px"
   --height="36px"
@@ -36,7 +37,6 @@
     {:else}
       <Us />
     {/if}
-
     {selection.label}
   </div>
 

src/components/RowPartners.svelte

@@ -26,11 +26,11 @@
     grid-template-columns: repeat(2, 1fr);
     justify-items: center;
     gap: 25px;
-
     padding: 25px;
   }
 
   .content img {
+    width:175px;
     height: 175px;
     transition: filter 0.75s;
     filter: grayscale(1);

src/components/RowSchedule.svelte

@@ -14,7 +14,7 @@
 <div id="schedule">
   <Window title={$t("schedule--title")}>
     <article class="content">
-      <h3><Localized id="schedule--25-november" /></h3>
+      <p class="schedule--date"><Localized id="schedule--25-november" /></p>
 
       <TimeSlot
         title={$t("schedule--presentation-opening-ceremony-first-day-title")}
@@ -206,7 +206,7 @@
         <div class="division" />
       </div>
 
-      <h3><Localized id="schedule--26-november" /></h3>
+      <p class="schedule--date"><Localized id="schedule--26-november" /></p>
 
       <TimeSlot
         title={$t("schedule--presentation-opening-ceremony-second-day-title")}
@@ -306,14 +306,6 @@
     padding: 25px;
   }
 
-  h3 {
-    margin-bottom: 25px;
-  }
-
-  .content > h3:first-of-type {
-    margin-top: 0;
-  }
-
   .division-wrapper {
     display: flex;
     flex-direction: row;
@@ -332,4 +324,10 @@
   .break {
     text-align: center;
   }
+  .schedule--date {
+    font-size: 38.4px;
+    font-weight: bold;
+    margin-bottom: 25px;
+    margin-top: 0;
+  }
 </style>

src/components/RowWhatIsGambiConf.svelte

@@ -54,6 +54,8 @@
 
   .icon {
     float: left;
+    width: 128px;
+    height: 128px;
   }
 
   .content p:first-of-type {

src/components/TimeSlot.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { useLazyImage as lazyImage } from 'svelte-lazy-image';
   import { Localized } from "@nubolab-ffwd/svelte-fluent"
   import { getGoogleCalendarLink } from "../utils/calendar"
   import SocialLinks from "./SocialLinks.svelte"
@@ -21,15 +22,15 @@
 
 <article class="talk">
   <div class="speaker-image-column">
-    <img class="speaker-image" src={image} alt="Speaker" />
+    <img class="speaker-image" src={image} alt="Speaker" use:lazyImage  />
 
     <SocialLinks links={socialLinks} />
   </div>
 
   <div class="description-column">
-    <h6>
+    <p class="description-schedule-event">
       {title}
-    </h6>
+    </p>
 
     {#if hours}
       <p class="time">
@@ -42,10 +43,10 @@
     </p>
 
     {#each members as { name, bio }}
-      <h6 class="talk-speaker">
+      <p class="talk-speaker">
         <Localized id="event-time-slot--by"/>
         {name}{#if bio}:{/if}
-      </h6>
+      </p>
 
       <p>
         {@html bio ?? ""}
@@ -55,11 +56,6 @@
 </article>
 
 <style>
-  h6 {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-
   .time {
     margin: 0;
     font-weight: bold;
@@ -74,12 +70,10 @@
   }
 
   .speaker-image {
-    min-height: 200px;
-    max-height: 200px;
-    min-width: 200px;
-    max-width: 200px;
+    width: 200px;
+    height: 200px;
     object-fit: contain;
-    border-radius: 100px;
+    border-radius: 50%;
     border: solid 1px #f34b2122;
   }
 
@@ -91,6 +85,17 @@
     margin-bottom: 0;
   }
 
+  .talk-speaker{
+    font-size: 24px;
+    font-weight: bold;
+  }
+
+  .description-schedule-event {
+    font-size: 24px;
+    font-weight: bold;
+    margin-bottom: 0;
+  }
+
   @media screen and (min-width: 768px) {
     .talk {
       display: flex;