feat(landing): timeline, comparaison

assets/sass/card.scss

@@ -0,0 +1,6 @@
+.card {
+    padding: 1rem;
+    border: 1px solid gray;
+    border-radius: 2px;
+    background-color: #ecf0f1;
+}

assets/sass/footer.scss

@@ -49,6 +49,40 @@ body {
 
 .site-footer__links {
     padding-top: 1rem;
+    .inline-menu-list {
+    }
+}
+
+
+.site-footer-socials {
+    margin: 0;
+    padding: 0;
+    margin-bottom: 1rem;
+    display: flex;
+    justify-content: flex-end;
+    list-style-type: none;
+    li {
+        margin-right: 1.5rem;
+    }
+    li:last-of-type {
+        margin-right: 0;
+    }
+
+    a {
+        display: flex;
+        align-items: center;
+        opacity: 0.8;
+        height: 100%;
+        cursor: pointer;
+    }
+    a:hover {
+        opacity: 1;
+    }
+
+    .site-footer-socials__logo {
+        width: 2rem;
+        fill: white;
+    }
 }
 
 @media (max-width: $md-breakpoint) {

assets/sass/general.scss

@@ -76,3 +76,14 @@ a:hover {
  .w-200 {
      width: 200px;
  }
+
+ img {
+     max-width: 100%;
+ }
+
+ .grid {
+     display: grid;
+ }
+ .grid-2 {
+     grid-template-columns: 1fr 1fr;
+ }

assets/sass/header.scss

@@ -45,12 +45,14 @@ $header-height: 6rem;
 .site-header__logo {
     width: auto;
     height: 100%;
+    transition: all 0.5s ease;
 }
 
+// .site-header__logo:hover {
+//     transform: scale3d(1, 1, 1);
+// }
+
 @media (max-width: $md-breakpoint) {
-    .site-header .page-container {
-        width: 100% !important;
-    }
     .site-header__title {
         padding-right: 1rem;
     }

assets/sass/landing.scss

@@ -77,9 +77,51 @@
     border-bottom: .3rem solid $accent;
 }
 
+@import 'landing/timeline.scss';
+
 @media (min-width: $lg-breakpoint) {
     .cover__back {
         background-position-x: center;
         background-position-y: -1.5rem;
     }
 }
+
+
+.compare-section {
+    .compare-items {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        grid-column-gap: 1rem;
+        figure {
+            margin: 0;
+        }
+    }
+    .compare-item {
+        display: block;
+        margin-bottom: 1rem; 
+        img {
+            display: block;
+            width: 100%;
+            object-fit: contain;
+        }
+    }
+
+}
+
+.history-summary {
+    display: grid;
+    grid-template-columns: 3fr 1fr;
+    grid-column-gap: 2rem;
+}
+
+.history-summary__image {
+    display: flex;
+    align-items: center;
+
+}
+
+.landing-main {
+    section {
+        border-bottom: 1px solid rgba(1, 1, 1, 0.2);
+    }
+}

assets/sass/landing/timeline.scss

@@ -0,0 +1,83 @@
+.history-section {
+    // background-color: rgba(0.5, 0.5, 0.5, 1);
+}
+
+.timeline-section {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+
+.timeline {
+    position: relative;
+
+    .timeline-list {
+        position: sticky;
+        z-index: 2;
+    }
+
+    .timeline-item {
+        display: grid;
+        grid-template-columns: 1fr 4fr;
+        padding-bottom: 1rem;
+    }
+    .timeline-item:last-of-type {
+        padding-bottom: 0;
+    }
+
+    .timeline-item__inner {
+        display: grid;
+
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .timeline-item__point-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+    }
+
+    .timeline__point-container > div {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+    }
+
+    .timeline-item__dot-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .timeline-item__dot {
+        width: 2rem;
+        aspect-ratio: 1/1;
+        background: white;
+        border-radius: 50%;
+        border: .5rem solid red;
+        box-shadow: 0 2px 1px -1px rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 1px 3px 0 rgba(0,0,0,.12);
+
+    }
+
+    .timeline-item__summary {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+    }
+
+    .timeline-item.timeline-back-decoration {
+        z-index: 1;
+        position: absolute;
+        height: 100%;
+        width: 100%;
+        padding: 0;
+    }
+    .timeline-trace {
+        width: 1px;
+        height: 100%;
+        background: gray;
+    }
+}
+
+@media (min-width: $lg-breakpoint) {
+}
+

assets/sass/main.scss

@@ -35,4 +35,5 @@ $accent: #F2A71B;
 
 // components
 @import 'tags.scss';
+@import 'card.scss';