update

packages/storyteller.io/src/App.scss

@@ -133,29 +133,30 @@ p {
 #navbar {
   position: fixed;
   z-index: 15;
-  transition: 0.3s all ease;
+  width: 100%;
+  min-height: auto !important;
+  transition: all 0.2s;
+  padding-top: 12px;
+  padding-bottom: 12px;
 }
 
 .nav-scroll {
-  margin-top: -100px;
-  opacity: 0;
-}
-
-.topnav {
-  z-index: 10;
+  background-color: rgba(11, 12, 20, 0.8);
+  backdrop-filter: blur(10px);
 }
 
 .nav-link {
   font-size: 16px;
   font-weight: 500;
-  color: rgba($white, 0.6);
+  color: rgba($white, 0.7);
   padding: 4px 0;
-  margin: auto 24px;
+  margin: auto 20px;
   position: relative;
   text-decoration: none;
+  letter-spacing: 0.3px;
 
   &:focus {
-    color: rgba($white, 0.6);
+    color: rgba($white, 0.7);
   }
 
   &:hover {
@@ -599,9 +600,9 @@ p {
 .card {
   height: 100%;
   padding: 28px;
-  border-radius: 12px;
-  border: 2px solid;
-  border-color: rgba(#4d4d66, 0.6);
+  border-radius: 8px;
+  border: 1px solid;
+  border-color: rgba(#4d4d66, 0.8);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -928,7 +929,7 @@ $font: montserrat, sans-serif;
     position: relative;
     height: 70%;
     top: 50%;
-    transform: translateY(-50%);
+    transform: fY(-50%);
     font-size: 50px;
     font-family: $font;
     font-weight: 400;
@@ -1007,6 +1008,7 @@ $font: montserrat, sans-serif;
 
 .about-card {
   min-height: 185px;
+  line-height: 1.5;
 
   &:hover > .about-icon {
     transform: translate(0, -4px);
@@ -1023,8 +1025,8 @@ $font: montserrat, sans-serif;
 
 .img-border {
   border-radius: 8px;
-  border: 2px solid;
-  border-color: rgba(#4d4d66, 0.6);
+  border: 1px solid;
+  border-color: rgba(#4d4d66, 0.8);
 }
 
 .img-hover {

packages/storyteller.io/src/App.tsx

@@ -20,6 +20,7 @@ function App() {
           smooth: true,
           multiplier: 0.9,
           getDirection: true,
+          scrollFromAnywhere: true,
           mobile: {
             smooth: false,
           },

packages/storyteller.io/src/common/Footer.tsx

@@ -55,8 +55,8 @@ function Footer(props: Props) {
         <div className="footer-bottom">
           <div className="container d-flex flex-column flex-md-row text-center text-md-start gap-3">
             <div className="flex-grow-1">
-              Copyright &copy; 2020 &mdash; 2023 Learning Machines, Inc. (makers
-              of FakeYou)
+              Copyright &copy; 2020 &mdash; 2023 Storyteller AI (makers of
+              FakeYou)
             </div>
 
             <GitSha />

packages/storyteller.io/src/common/TopNav.tsx

@@ -1,5 +1,5 @@
 import { useLocomotiveScroll } from "react-locomotive-scroll";
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useRef } from "react";
 
 interface Props {}
 
@@ -7,11 +7,11 @@ function TopNav(props: Props) {
   const { scroll } = useLocomotiveScroll();
   const [isScrolling, setIsScrolling] = useState(false);
   const [showTopBtn, setTopBtn] = useState(false);
+  const [activeLink, setActiveLink] = useState("");
 
-  if (!!scroll) {
-    scroll.on(
-      "scroll",
-      (position: { scroll: { y: number } }, direction: string) => {
+  useEffect(() => {
+    if (!!scroll) {
+      scroll.on("scroll", (position: { scroll: { y: number } }) => {
         if (position.scroll.y > 50) {
           // console.log(">> scroll > 50");
           if (!isScrolling) {
@@ -35,9 +35,11 @@ function TopNav(props: Props) {
             setTopBtn(false);
           }
         }
-      }
-    );
-  }
+      });
+    }
+  }, [isScrolling, scroll, showTopBtn]);
+
+  // Add .active class to the current button on click (highlight it)
 
   const navClassNames = isScrolling
     ? "container-fluid nav-scroll"
@@ -65,10 +67,56 @@ function TopNav(props: Props) {
     }
   }, [mobileMenuOpen]);
 
+  // Add .active class on nav links when scrolling (highlight it)
+
+  useEffect(() => {
+    if (mobileMenuOpen) {
+      document.body.classList.add("lock-scroll");
+    } else {
+      document.body.classList.remove("lock-scroll");
+    }
+  }, [mobileMenuOpen]);
+
+  // window.addEventListener("load", () => {
+  //   const navBtn1 = document.getElementById("nav-btn-1");
+  //   const navBtn2 = document.getElementById("nav-btn-2");
+  //   const navBtn3 = document.getElementById("nav-btn-3");
+  //   // const navBtn4 = document.getElementById("nav-btn-4");
+
+  //   // Add .active class on buttons when scrolling (highlight it)
+  //   scroll.on("call", (callValue: string) => {
+  //     if (callValue === "home") {
+  //       navBtn1?.classList.add("active");
+  //       console.log(callValue);
+  //     } else {
+  //       navBtn1?.classList.remove("active");
+  //     }
+
+  //     if (callValue === "film") {
+  //       navBtn2?.classList.add("active");
+  //       console.log(callValue);
+  //     } else {
+  //       navBtn2?.classList.remove("active");
+  //     }
+
+  //     if (callValue === "music") {
+  //       navBtn3?.classList.add("active");
+  //       console.log(callValue);
+  //     } else {
+  //       navBtn3?.classList.remove("active");
+  //     }
+  //   });
+  // });
+
   return (
     <>
-      <nav id="navbar" className={navClassNames} data-scroll-section>
-        <div className="d-none d-lg-flex flex-wrap align-items-center justify-content-center justify-content-md-between mt-3 topnav">
+      <nav
+        id="navbar"
+        className={navClassNames}
+        data-scroll-container
+        data-scroll-sticky
+      >
+        <div className="d-none d-lg-flex flex-wrap align-items-center justify-content-center justify-content-md-between">
           <a
             href="/"
             className="d-flex align-items-center col-md-3 mb-2 mb-md-0 text-dark text-decoration-none"
@@ -78,41 +126,75 @@ function TopNav(props: Props) {
               src="/logo/storytellerai-logo.png"
               alt="Storyteller Logo"
               height="34"
-              className="mb-2"
             />
           </a>
 
           <ul className="nav col-12 col-md-auto mb-2 justify-content-center mb-md-0">
             <li>
-              <a href="#root" className="nav-link active" data-scroll-to>
+              <a
+                href="#home"
+                id="nav-btn-1"
+                className="nav-link"
+                data-scroll-to
+              >
                 Home
               </a>
             </li>
             <li>
-              <a href="#about" className="nav-link" data-scroll-to>
-                About
+              <a
+                id="nav-btn-2"
+                href="#film"
+                className="nav-link"
+                data-scroll-to
+              >
+                Film
               </a>
             </li>
             <li>
-              <a href="#products" className="nav-link" data-scroll-to>
-                What We Do
+              <a
+                id="nav-btn-3"
+                href="#music"
+                className="nav-link"
+                data-scroll-to
+              >
+                Music
               </a>
             </li>
             <li>
-              <a href="#mentions" className="nav-link" data-scroll-to>
-                Mentions
+              <a
+                id="nav-btn-4"
+                href="#social"
+                className="nav-link"
+                data-scroll-to
+              >
+                Social
+              </a>
+            </li>
+            <li>
+              <a
+                id="nav-btn-5"
+                href="#mentions"
+                className="nav-link"
+                data-scroll-to
+              >
+                Our Team
               </a>
             </li>
           </ul>
 
           <div className="col-md-3 text-end">
-            <a href="#contact" className="btn btn-primary fs-6" data-scroll-to>
+            <a
+              id="nav-btn-6"
+              href="#contact"
+              className="btn btn-primary fs-6"
+              data-scroll-to
+            >
               Contact
             </a>
           </div>
         </div>
 
-        <div className="d-flex d-lg-none justify-content-between pt-2">
+        <div className="d-flex d-lg-none justify-content-between">
           <a
             href="/"
             className="d-flex align-items-center text-dark text-decoration-none"
@@ -121,8 +203,7 @@ function TopNav(props: Props) {
               id="logo"
               src="/logo/storytellerai-logo.png"
               alt="Storyteller Logo"
-              height="30"
-              className="mt-2"
+              height="34"
             />
           </a>
           <button
@@ -138,11 +219,12 @@ function TopNav(props: Props) {
           </button>
         </div>
       </nav>
+
       <div className={menuClassNames}>
         <div className="overlay-menu">
           <ul>
             <li className="nav-link active">
-              <a onClick={menuToggle} href="#root" data-scroll-to>
+              <a onClick={menuToggle} href="#home" data-scroll-to>
                 Home
               </a>
             </li>