chore: add navbar animation and fix article footer size

Author: MaryWylde

src/components/Heading/Heading.module.scss

@@ -1,3 +1,13 @@
+@keyframes drawRedLine {
+  from {
+    clip-path: inset(0 100% 0 0);
+  }
+
+  to {
+    clip-path: inset(0 0% 0 0);
+  }
+}
+
 .headingAndUnderline {
   .headingWrapper {
     .heading {
@@ -51,10 +61,17 @@
     }
   }
 
-  .underline,
+  .underline {
+    width: 100%;
+    padding: 16px 0 24px 0;
+  }
+
   .redUnderline {
     width: 100%;
     padding: 16px 0 24px 0;
+    animation: drawRedLine 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+    animation-delay: 0.1s;
+    clip-path: inset(0 100% 0 0);
   }
 
   .left {

src/components/longevity/LongevitySubSection/LongevitySubSection.module.scss

@@ -1,5 +1,15 @@
 @import '@styles/fonts.scss';
 
+@keyframes drawRedLine {
+  from {
+    clip-path: inset(0 100% 0 0);
+  }
+
+  to {
+    clip-path: inset(0 0% 0 0);
+  }
+}
+
 .subSection {
   max-width: 948px;
   padding-bottom: 40px;
@@ -55,6 +65,9 @@
         background-image: url('/keepsimple_/assets/longevity/red-short-line.png');
         background-size: contain;
         background-repeat: no-repeat;
+        clip-path: inset(0 100% 0 0);
+        animation: drawRedLine 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+        animation-delay: 0.2s;
       }
     }
 
@@ -204,6 +217,7 @@
       }
     }
   }
+
   .whyDoThisMobileModal {
     display: flex;
     flex-direction: column;
@@ -216,9 +230,11 @@
   0% {
     filter: drop-shadow(0px 0px 18px rgba(53, 35, 13, 0.2));
   }
+
   70% {
     filter: drop-shadow(0px 0px 18px rgba(255, 0, 0, 0.8));
   }
+
   100% {
     filter: drop-shadow(0px 0px 18px rgba(53, 35, 13, 0.2));
   }

src/components/longevity/Navigation/Navigation.module.scss

@@ -22,8 +22,26 @@
 
     &:hover {
       cursor: pointer;
+    }
+  }
+
+  .item {
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 0;
       background-image: url('/keepsimple_/assets/longevity/navbar-borders.svg');
       background-color: #fff;
+      background-repeat: no-repeat;
+      background-size: cover;
+      opacity: 0;
+      transition: opacity 200ms ease;
+    }
+
+    &:hover::after {
+      opacity: 1;
     }
   }
 
@@ -51,6 +69,11 @@
     cursor: pointer;
     background-image: url('/keepsimple_/assets/longevity/nav-hover-bg.png');
     background-size: cover;
+
+    &::after {
+      display: none;
+    }
+
     .subLink,
     .link {
       color: #fff;
@@ -64,7 +87,6 @@
 
     &:hover {
       cursor: pointer;
-
       background-image: url('/keepsimple_/assets/longevity/nav-hover-bg.png');
     }
   }
@@ -128,10 +150,12 @@
     justify-content: center;
     align-items: center;
     gap: 4px;
+    transition: color 200ms ease;
 
     svg {
       path {
         fill: #bdbdbd;
+        transition: fill 200ms ease;
       }
     }
   }

src/layouts/ArticleLayout/ArticleLayout.module.scss

@@ -63,6 +63,7 @@
 @media (max-width: 960px) {
   .footerImage {
     height: 50px;
+    width: 100%;
   }
   .main {
     display: block;

src/layouts/ArticleLayout/ArticleLayout.tsx

@@ -30,7 +30,6 @@ const ArticleLayout: FC<ArticleLayoutProps> = ({ children }) => {
           height={314}
           className={styles.coverImage}
           width={1920}
-          // unoptimized
           priority
         />
       )}

src/pages/articles/page.module.scss

@@ -1,3 +1,21 @@
 .section {
   background-color: #ffffff;
+
+  .coverImage,
+  .footerImage {
+    width: 100%;
+    object-position: center;
+    object-fit: cover;
+  }
+
+  .footerImage {
+    margin-top: 64px;
+  }
+}
+
+@media (max-width: 960px) {
+  .footerImage {
+    height: 50px;
+    width: 100%;
+  }
 }