Merge branch 'master' into bflat-fy-upload-visible

.github/workflows/sync-staging-branch.yml

@@ -20,7 +20,8 @@ jobs:
           git config --local user.name "GitHub Action"
           git checkout -b staging
       - name: push changes
-        uses: ad-m/github-push-action@master
+        #uses: ad-m/github-push-action@master
+        uses: ad-m/github-push-action@0fafdd62b84042d49ec0cb92d9cac7f7ce4ec79e
         with:
           # Note: Github does not allow the default access token to push to 
           # protected branches. Using a PAT with permissions can bypass this, 

packages/components/src/api/voice_conversion/EnqueueVoiceConversion.ts

@@ -1,9 +1,19 @@
 import { ApiConfig } from "@storyteller/components";
 
+export enum EnqueueVoiceConversionFrequencyMethod {
+  Crepe = "crepe",
+  Dio = "dio",
+  Harvest = "harvest",
+}
+
 export interface EnqueueVoiceConversionRequest {
   uuid_idempotency_token: string,
   voice_conversion_model_token: string,
   source_media_upload_token: string,
+
+  // Optional args
+  override_f0_method?: EnqueueVoiceConversionFrequencyMethod,
+  transpose?: number,
 }
 
 export interface EnqueueVoiceConversionSuccessResponse {

packages/fakeyou.com/package.json

@@ -45,6 +45,7 @@
     "react-dom": "^16.13.1",
     "react-drag-drop-files": "^2.3.9",
     "react-i18next": "^11.15.4",
+    "react-range": "^1.8.14",
     "react-reveal": "^1.2.2",
     "react-router-dom": "^5.2.0",
     "react-scripts": "5.0.0",

packages/fakeyou.com/src/scss/site-refresh.scss

@@ -724,6 +724,10 @@ styles with important tags:
     box-shadow: none;
     cursor: pointer;
 
+    &.no-padding {
+      padding-left: 0.5rem;
+    }
+
     &:hover {
       background-color: lighten($input-dark, 5%);
       border-color: lighten($input-dark, 5%) !important;
@@ -866,6 +870,13 @@ styles with important tags:
     fill: lighten($secondary, 5%);
   }
 
+  .tippy-box[data-theme~="range-slider"] {
+    margin-top: -5px;
+    background-color: lighten($panel, 10%);
+    color: $white;
+    font-size: 13px !important;
+  }
+
   .sliding-content {
     overflow: hidden;
     opacity: 0;
@@ -1269,6 +1280,19 @@ styles with important tags:
   .alert-info {
     font-size: 14px;
   }
+
+  .range-slider-value {
+    text-align: center;
+    max-width: 50px;
+    padding: 6px;
+    border-radius: 8px;
+    pointer-events: none;
+    background-color: lighten($panel, 5%) !important;
+    border-width: 1px;
+    border-color: rgba(255, 255, 255, 0.12) !important;
+    color: rgba($white, 0.85) !important;
+    font-weight: 500 !important;
+  }
 }
 
 select {
@@ -1404,6 +1428,10 @@ textarea {
       height: 450px;
     }
 
+    .session-vc-section {
+      height: 565px;
+    }
+
     .session-tts-section::-webkit-scrollbar {
       width: 10px;
     }

packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/VcModelListPage.tsx

@@ -21,6 +21,7 @@ import {
 import { VcModelListSearch } from "./components/VcModelListSearchComponent";
 import {
   EnqueueVoiceConversion,
+  EnqueueVoiceConversionFrequencyMethod,
   EnqueueVoiceConversionIsSuccess,
   EnqueueVoiceConversionRequest,
 } from "@storyteller/components/src/api/voice_conversion/EnqueueVoiceConversion";
@@ -30,6 +31,9 @@ import {
   InferenceJob,
 } from "@storyteller/components/src/jobs/InferenceJob";
 import { SessionVoiceConversionResultsList } from "../../../_common/SessionVoiceConversionResultsList";
+import { Link } from "react-router-dom";
+import PitchShiftComponent from "./components/PitchShiftComponent";
+import PitchEstimateMethodComponent from "./components/PitchEstimateMethodComponent";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -55,6 +59,7 @@ interface Props {
 
 function VcModelListPage(props: Props) {
   usePrefixedDocumentTitle("Voice Conversion");
+
   const [convertLoading, setConvertLoading] = useState(false);
   const [canConvert, setCanConvert] = useState(false);
 
@@ -66,6 +71,11 @@ function VcModelListPage(props: Props) {
     uuidv4()
   );
 
+  const [maybeF0MethodOverride, setMaybeF0MethodOverride] = 
+    useState<EnqueueVoiceConversionFrequencyMethod | undefined>(undefined);
+
+  const [semitones, setSemitones] = useState(0);
+
   // NB: Something of a UI hack here.
   // The 3rd party microphone component doesn't let you clear it, so we emulate form clearing
   // with this variable.
@@ -144,6 +154,14 @@ function VcModelListPage(props: Props) {
       source_media_upload_token: mediaUploadToken,
     };
 
+    if (semitones !== 0) {
+      request.transpose = semitones;
+    }
+
+    if (maybeF0MethodOverride !== undefined) {
+      request.override_f0_method = maybeF0MethodOverride;
+    }
+
     Analytics.voiceConversionGenerate(
       props.maybeSelectedVoiceConversionModel.token
     );
@@ -164,6 +182,16 @@ function VcModelListPage(props: Props) {
     ev.preventDefault();
   };
 
+  const handlePitchChange = (value: any) => {
+    setSemitones(value);
+    changeConvertIdempotencyToken();
+  };
+
+  const handlePitchMethodChange = (value: any) => {
+    setMaybeF0MethodOverride(value);
+    changeConvertIdempotencyToken();
+  };
+
   const speakButtonClass = convertLoading
     ? "btn btn-primary w-100 disabled"
     : "btn btn-primary w-100";
@@ -277,6 +305,26 @@ function VcModelListPage(props: Props) {
                           </div>
                         </div>
 
+                        <div>
+                          <label className="sub-title">Pitch Control</label>
+                          <div className="d-flex flex-column gap-3">
+                            <div>
+                              <PitchEstimateMethodComponent
+                                pitchMethod={maybeF0MethodOverride}
+                                onMethodChange={handlePitchMethodChange}
+                              />
+                            </div>
+                            <div>
+                              <PitchShiftComponent
+                                min={-36}
+                                max={36}
+                                step={1}
+                                value={semitones}
+                                onPitchChange={handlePitchChange}
+                              />
+                            </div>
+                          </div>
+                        </div>
                         {/*<div>
                           <label className="sub-title">
                             Or pick from your audio collection (5 files)
@@ -346,6 +394,27 @@ function VcModelListPage(props: Props) {
                           </div>
                         </div>
 
+                        <div>
+                          <label className="sub-title">Pitch Control</label>
+                          <div className="d-flex flex-column gap-3">
+                            <div>
+                              <PitchEstimateMethodComponent
+                                pitchMethod={maybeF0MethodOverride}
+                                onMethodChange={handlePitchMethodChange}
+                              />
+                            </div>
+                            <div>
+                              <PitchShiftComponent
+                                min={-36}
+                                max={36}
+                                step={1}
+                                value={semitones}
+                                onPitchChange={handlePitchChange}
+                              />
+                            </div>
+                          </div>
+                        </div>
+
                         <div>
                           <label className="sub-title">Convert Audio</label>
 
@@ -378,7 +447,7 @@ function VcModelListPage(props: Props) {
                       />
                       Session V2V Results
                     </h4>
-                    <div className="d-flex flex-column gap-3 session-tts-section">
+                    <div className="d-flex flex-column gap-3 session-tts-section session-vc-section">
                       <SessionVoiceConversionResultsList
                         inferenceJobs={
                           props.inferenceJobsByCategory.get(

packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/PitchEstimateMethodComponent.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import Select from "react-select";
+import { EnqueueVoiceConversionFrequencyMethod } from "@storyteller/components/src/api/voice_conversion/EnqueueVoiceConversion";
+
+interface PitchShiftProps {
+  pitchMethod?: EnqueueVoiceConversionFrequencyMethod,
+  onMethodChange: (newMethod?: EnqueueVoiceConversionFrequencyMethod) => void;
+}
+
+const dropdownFieldClass = {
+  control: (state: any) =>
+    state.isFocused
+      ? "select-search no-padding focused rounded"
+      : "select-search no-padding rounded",
+  option: (state: any) => (state.isFocused ? "select-option" : "select-option"),
+  input: (state: any) => (state.isFocused ? "select-input" : "select-input"),
+  placeholder: (state: any) =>
+    state.isFocused ? "select-placeholder" : "select-placeholder",
+  singleValue: (state: any) =>
+    state.isFocused ? "select-value" : "select-value",
+  menu: (state: any) =>
+    state.isFocused ? "select-container" : "select-container",
+  indicatorSeparator: (state: any) =>
+    state.isFocused ? "select-separator" : "select-separator",
+};
+
+function PitchEstimateMethodComponent(props: PitchShiftProps) {
+  
+  const handleMethodChange = (option: any, actionMeta: any) => {
+    const pitchMethodName = option?.value;
+    let pitchMethod = undefined;
+
+    switch (pitchMethodName) {
+      case "crepe":
+        pitchMethod = EnqueueVoiceConversionFrequencyMethod.Crepe;
+        break;
+      case "harvest":
+        pitchMethod = EnqueueVoiceConversionFrequencyMethod.Harvest;
+        break;
+      case "dio":
+        pitchMethod = EnqueueVoiceConversionFrequencyMethod.Dio;
+        break;
+    }
+
+    props.onMethodChange(pitchMethod);
+  };
+
+  interface DropdownOption {
+    label: string;
+    value: EnqueueVoiceConversionFrequencyMethod;
+  }
+
+  const options : DropdownOption[] = [
+    { label: "DIO", value: EnqueueVoiceConversionFrequencyMethod.Dio },
+    { label: "CREPE", value: EnqueueVoiceConversionFrequencyMethod.Crepe }, 
+    { label: "Harvest", value: EnqueueVoiceConversionFrequencyMethod.Harvest },
+  ];
+
+  const selectedOption = options.find((option) => option.value === props.pitchMethod) || options[0];
+
+  return (
+    <>
+      <div>
+        <Select
+          value={selectedOption} // Controlled components use "value" instead of "defaultValue".
+          options={options}
+          classNames={dropdownFieldClass}
+          //placeholder={options[0]}
+          isSearchable={false}
+          onChange={handleMethodChange}
+        />
+      </div>
+    </>
+  );
+}
+
+export default PitchEstimateMethodComponent;

packages/fakeyou.com/src/v2/view/pages/vc/vc_model_list/components/PitchShiftComponent.tsx

@@ -0,0 +1,89 @@
+import React from "react";
+import { Range } from "react-range";
+import Tippy from "@tippyjs/react";
+
+interface PitchShiftProps {
+  min: number;
+  max: number;
+  step: number;
+  value: number;
+  onPitchChange: (value: number) => void;
+}
+
+function PitchShiftComponent({
+  min,
+  max,
+  step,
+  value,
+  onPitchChange,
+}: PitchShiftProps) {
+  
+  const handlePitchChange = (newValue: number[]) => {
+    onPitchChange(newValue[0]);
+  };
+
+  const renderTrack = ({ props, children }: any) => (
+    <div
+      {...props}
+      style={{
+        ...props.style,
+        height: "8px",
+        width: "100%",
+        backgroundColor: "#4f4f66",
+        borderRadius: "4px",
+      }}
+    >
+      {children}
+    </div>
+  );
+
+  const renderThumb = ({ props, isDragged, isHovered }: any) => (
+    <Tippy
+      content="Semitones"
+      placement="bottom"
+      theme="range-slider"
+      arrow={false}
+    >
+      <div
+        {...props}
+        style={{
+          ...props.style,
+          height: "22px",
+          width: "22px",
+          borderRadius: "50%",
+          backgroundColor: isHovered ? "#fff" : "#e66462",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          outline: "none",
+          boxShadow: "0px 0px 10px rgba(0, 0, 0, 0.15)", // Add soft shadow on hover
+        }}
+      ></div>
+    </Tippy>
+  );
+
+  return (
+    <>
+      <div className="d-flex gap-3 align-items-center">
+        <div className="flex-grow-1">
+          <Range
+            step={step}
+            min={min}
+            max={max}
+            values={[value]} // Changed from `values` to `[value]`
+            onChange={handlePitchChange}
+            renderTrack={renderTrack}
+            renderThumb={renderThumb}
+          />
+        </div>
+        <input
+          className="form-control range-slider-value"
+          value={value.toFixed(0)}
+          disabled
+        ></input>
+      </div>
+    </>
+  );
+}
+
+export default PitchShiftComponent;

packages/storyteller.io/src/App.scss

@@ -4,6 +4,7 @@
 $light-text-color: #777;
 $button-text-color: #666;
 $primary: #fa6b68;
+$secondary: #36364e;
 $white: #ffffff;
 
 $heading-font-family: "Poppins", sans-serif;
@@ -40,6 +41,11 @@ p {
   font-weight: 400;
 }
 
+li {
+  font-size: 18px;
+  line-height: 1.6;
+}
+
 ::-moz-selection {
   /* Code for Firefox */
   color: $white;
@@ -57,11 +63,15 @@ p {
 }
 
 .container {
-  max-width: 1200px;
+  max-width: 1300px;
   padding-right: var(--bs-gutter-x, 1.2rem);
   padding-left: var(--bs-gutter-x, 1.2rem);
 }
 
+.rounded {
+  border-radius: 0.5rem !important;
+}
+
 .git-sha {
   color: #999;
   font-size: 0.8rem;
@@ -77,18 +87,6 @@ p {
                                   supported by Chrome, Edge, Opera and Firefox */
 }
 
-.bg-hero {
-  background: rgb(34, 34, 56);
-  background: linear-gradient(
-    180deg,
-    rgba(34, 34, 56, 1) 0%,
-    rgba(23, 23, 37, 1) 100%
-  );
-  height: 100vh;
-  overflow: hidden;
-  position: relative;
-}
-
 .bg-hero-2 {
   background: rgb(34, 34, 56);
   background: linear-gradient(
@@ -101,23 +99,6 @@ p {
   position: relative;
 }
 
-.bg-overlay {
-  width: 100%;
-  height: 100%;
-  background-color: rgba(11, 12, 20, 0.6);
-  position: absolute;
-  top: 0;
-}
-
-.bg-video {
-  object-fit: cover;
-  width: 100vw;
-  height: 100vh;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
 #logo {
   transition: 0.3s all;
 
@@ -204,7 +185,7 @@ p {
 }
 
 .btn {
-  border-radius: 5px;
+  border-radius: 50px;
   outline: none;
   font-size: 16px;
   font-weight: 500;
@@ -246,20 +227,20 @@ p {
 .btn-secondary,
 .btn-secondary:focus,
 .btn-secondary:active {
-  background-color: $white;
-  color: #2c2c40;
+  background-color: $secondary;
+  color: $white;
   border: 2.5px solid;
-  border-color: $white;
+  border-color: $secondary;
   transition: 0.2s;
   outline: none;
   box-shadow: none;
-}
 
-.btn-secondary:hover {
-  background-color: #ccc;
-  color: #2c2c40;
-  border: 2.5px solid;
-  border-color: #ccc;
+  &:hover {
+    background-color: lighten($secondary, 3%) !important;
+    border-color: lighten($secondary, 3%) !important;
+    color: $white;
+    border: 2.5px solid;
+  }
 }
 
 .btn span {
@@ -291,88 +272,45 @@ p {
   font-size: 16px;
 }
 
-.hero-title {
-  font-size: 5.6rem;
-  font-weight: 700;
-  width: 100%;
-  // letter-spacing: 3px;
-  text-shadow: 0px 5px 12px rgba(#0d0d14, 0.2);
-  z-index: 1;
-  // white-space: nowrap;
-  margin: 0;
-  line-height: 1.1;
+.hero-video {
+  z-index: 2;
+  border: 3px solid;
+  border-color: rgba(#4d4d66, 0.5);
+  border-radius: 1.5rem !important;
+  overflow: hidden;
+  object-fit: cover;
 
-  .hero-title-one {
-    text-align: left;
-    overflow: hidden;
-    margin: 0;
-    line-height: 1;
-    padding-bottom: 12px;
-
-    span {
-      color: $primary;
-    }
+  video {
+    width: 100%;
   }
 }
 
-.hero-title-container {
-  position: absolute;
-  bottom: 100px;
-  padding: 0;
+.hero-video-container {
+  width: 1000px;
+  margin-bottom: -18rem;
+}
+
+.video-bottom {
+  margin-bottom: 18rem;
+}
+
+.hero-title {
+  font-size: 3.6rem;
+  font-weight: 700;
+  width: 90%;
+  z-index: 1;
+  margin: 0;
+  line-height: 1.3;
 }
 
 .hero-sub-title {
   font-weight: 400;
-  font-size: 24px;
-  margin-top: -18px;
-  color: #e7e7e7;
+  font-size: 1.3rem;
+  width: 65%;
+  color: rgba($white, 0.7);
   line-height: 1.4;
 }
 
-// .hero-title {
-//   font-size: 7.5rem;
-//   font-weight: 900;
-//   text-transform: uppercase;
-//   width: 100%;
-//   padding-top: 130px;
-//   // letter-spacing: 3px;
-//   // text-shadow: 0px 10px 100px #171725;
-//   z-index: 1;
-//   white-space: nowrap;
-//   position: relative;
-
-//   .hero-title-one {
-//     text-align: left;
-//     overflow: hidden;
-
-//     span {
-//       color: $primary;
-//     }
-//   }
-
-//   .hero-title-two {
-//     margin-top: -35px;
-//     text-align: right;
-//     overflow: hidden;
-//   }
-// }
-
-// .hero-sub-title {
-//   max-width: 320px;
-//   margin-top: -10px;
-//   text-align: end;
-//   font-size: 18px;
-// }
-
-// .hero-title-outline {
-//   position: absolute;
-//   width: 100%;
-//   transform: scale(1.72);
-//   top: -44px;
-//   overflow: hidden;
-//   -webkit-text-stroke: 1px rgba($white, 0.06);
-// }
-
 .text-outline {
   color: transparent;
   -webkit-text-stroke: 1px rgba($white, 0.06);
@@ -504,6 +442,22 @@ p {
   );
 }
 
+.bg-hero {
+  background: rgb(25, 25, 41);
+  background: linear-gradient(
+    180deg,
+    rgba(23, 23, 37, 1) 0%,
+    rgba(29, 29, 48, 1) 100%
+  );
+}
+
+// .bg-video {
+//   position: absolute;
+//   width: 100%;
+//   -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
+//   filter: grayscale(100%);
+// }
+
 .section {
   margin-top: -1px;
   padding-top: 5rem;
@@ -597,7 +551,7 @@ p {
 .card {
   height: 100%;
   padding: 28px;
-  border-radius: 8px;
+  border-radius: 0.5rem;
   border: 2px solid;
   border-color: rgba(#4d4d66, 0.5);
   display: flex;
@@ -720,7 +674,7 @@ p {
 
 .footer-social-icon {
   background: rgb(47, 47, 75);
-  border-radius: 8px;
+  border-radius: 0.5rem;
   height: 50px;
   width: 50px;
   display: flex;
@@ -776,7 +730,7 @@ p {
 .form-select {
   border-width: 1px;
   border-color: $white;
-  border-radius: 5px;
+  border-radius: 0.5rem;
   padding: 0.5rem 0.75rem;
 
   &:focus {
@@ -956,7 +910,6 @@ $font: montserrat, sans-serif;
       display: block;
       height: 25%;
       height: calc(100% / 4);
-      min-height: 50px;
       position: relative;
       opacity: 0;
 
@@ -973,17 +926,17 @@ $font: montserrat, sans-serif;
           width: 100%;
         }
 
-        &:after {
-          content: "";
-          position: absolute;
-          bottom: 0;
-          left: 50%;
-          width: 0%;
-          transform: translateX(-50%);
-          height: 3px;
-          background: $color-link;
-          transition: 0.35s;
-        }
+        // &:after {
+        //   content: "";
+        //   position: absolute;
+        //   bottom: 0;
+        //   left: 50%;
+        //   width: 0%;
+        //   transform: translateX(-50%);
+        //   height: 3px;
+        //   background: $color-link;
+        //   transition: 0.35s;
+        // }
       }
     }
   }
@@ -1016,6 +969,7 @@ $font: montserrat, sans-serif;
 }
 
 .about-card {
+  border-radius: 0.5rem;
   min-height: 185px;
   line-height: 1.5;
   padding: 28px;
@@ -1034,7 +988,7 @@ $font: montserrat, sans-serif;
 }
 
 .img-border {
-  border-radius: 8px;
+  border-radius: 0.5rem;
   border: 2px solid;
   border-color: rgba(#4d4d66, 0.5);
 }
@@ -1094,6 +1048,49 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
   opacity: 1;
 }
 
+.research-swiper {
+  height: 100%;
+
+  .research-swiper-thumb-container {
+    max-height: 500px;
+
+    .swiper-slide {
+      display: flex;
+      align-items: center;
+      border-radius: 0.5rem !important;
+      height: 60px !important;
+      background-color: $secondary;
+      padding: 2rem 1.5rem;
+      cursor: pointer;
+      border: 2px solid;
+      border-color: $secondary;
+      transition: 0.2s all;
+
+      &:hover {
+        background-color: rgb(37, 37, 56);
+        border-color: lighten($secondary, 10%);
+      }
+    }
+
+    .swiper-slide-thumb-active {
+      background-color: #161624 !important;
+      border-color: $primary !important;
+    }
+  }
+
+  .research-swiper-video-container {
+    border-radius: 0.5rem;
+    border: 2px solid;
+    border-color: rgba(#4d4d66, 1);
+
+    .swiper-slide {
+      video {
+        object-fit: cover;
+      }
+    }
+  }
+}
+
 :root {
   --swiper-theme-color: #fa6b68 !important;
 }
@@ -1134,43 +1131,46 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
   }
 }
 
-.img-team {
-  border-radius: 8px;
+.border-frame {
   border: 2px solid;
-  border-color: rgba(#4d4d66, 1);
+  border-color: $secondary;
+}
+
+.panel {
+  background-color: #181827;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  border: 2px solid;
+  border-color: $secondary;
+}
+
+.img-team {
+  border-bottom: 2px solid;
+  border-color: $secondary;
 }
 
 .team-role-text {
   padding-top: 2px;
   line-height: 1.4;
+  margin-bottom: 0;
 }
 
-.img-layers {
-  display: flex;
-  position: relative;
+#hero-title {
+  opacity: 0;
+  transform: translate(-8rem, 0);
+}
 
-  .img-front-right {
-    position: absolute;
-    max-width: 380px;
-    right: -14%;
-    bottom: 12%;
-  }
+#sub-title {
+  opacity: 0;
+  transform: translate(8rem, 0);
+}
 
-  .img-front-left {
-    position: absolute;
-    max-width: 380px;
-    left: -14%;
-    bottom: 12%;
-  }
+#hero-btn {
+  opacity: 0;
+  transform: translate(4rem, 0);
 
-  .img-back {
-    border-radius: 8px;
-    border: 2px solid;
-    border-color: rgba(#4d4d66, 0.25);
-  }
-
-  .img-mascot {
-    filter: drop-shadow(0px 0px 50px rgba(0, 0, 0, 0.95));
+  .btn-primary {
+    padding: 1rem 2.4rem;
   }
 }
 
@@ -1201,31 +1201,6 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
     border-radius: 0 0 0 0;
   }
 
-  // .hero-title {
-  //   font-size: 8vw;
-  //   white-space: nowrap;
-  //   line-height: 1;
-  //   // letter-spacing: normal;
-
-  //   .hero-title-one {
-  //     text-align: center;
-  //   }
-
-  //   .hero-title-two {
-  //     text-align: center;
-  //     margin: 0;
-  //   }
-  // }
-
-  .hero-title {
-    font-size: 6.5vw;
-  }
-
-  .hero-sub-title {
-    font-size: 22px;
-    margin-top: 18px;
-  }
-
   .lead {
     font-size: 18px;
   }
@@ -1274,10 +1249,6 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
       left: 0;
     }
   }
-
-  .bg-hero-2 {
-    height: 800px;
-  }
 }
 
 @media (max-width: 767.98px) {
@@ -1304,20 +1275,6 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
     height: 180px;
   }
 
-  // .bg-hero {
-  //   min-height: 1020px;
-  //   max-height: 1020px;
-  // }
-
-  .hero-title {
-    font-size: 11.5vw;
-  }
-
-  .hero-sub-title {
-    font-size: 18px;
-    margin-top: 18px;
-  }
-
   .shape-1-container {
     left: 12%;
     bottom: 14%;
@@ -1389,32 +1346,39 @@ span.swiper-pagination-bullet.swiper-pagination-bullet-active {
     }
   }
 
-  .bg-hero-2 {
-    height: 670px;
+  .hero-title {
+    font-size: 2rem;
+    width: 100%;
+  }
+
+  .hero-sub-title {
+    font-size: 16px;
+    width: 100%;
+  }
+
+  .hero-video-container {
+    margin-bottom: -6rem;
+  }
+
+  .video-bottom {
+    margin-bottom: 6rem;
+  }
+
+  .hero-video {
+    border-radius: 0.8rem !important;
+  }
+
+  #hero-btn {
+    .btn-primary {
+      padding: 0.8rem 1.8rem;
+      font-size: 15px;
+    }
+  }
+
+  .img-brandon {
+    border-bottom-right-radius: 0.5rem;
+    border-color: $secondary !important;
+    border-bottom: 2px solid;
+    border-right: 2px solid;
   }
 }
-
-#sub-title {
-  opacity: 0;
-  transform: translate(8rem, 0);
-}
-
-#hero-btn {
-  opacity: 0;
-  transform: translate(4rem, 0);
-}
-
-// #pascal {
-//   opacity: 0;
-//   transform: translate(0, 300px);
-// }
-
-// #basilisk {
-//   opacity: 0;
-//   transform: translate(300px, 0);
-// }
-
-// #roko {
-//   opacity: 0;
-//   transform: translate(-300px, 0);
-// }

packages/storyteller.io/src/App.tsx

@@ -36,7 +36,7 @@ function App() {
         containerRef={containerRef}
       >
         <BrowserRouter>
-          <div data-scroll-container ref={containerRef}>
+          <div data-scroll-container ref={containerRef} id="scroller">
             <div>
               <TopNav />
               <Switch>

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

@@ -44,9 +44,9 @@ function TopNav(props: Props) {
     ? "container-fluid nav-scroll"
     : "container-fluid";
 
-  const backToTop = showTopBtn
-    ? "btn-to-top nav-link show"
-    : "btn-to-top nav-link";
+  // const backToTop = showTopBtn
+  //   ? "btn-to-top nav-link show"
+  //   : "btn-to-top nav-link";
 
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
 
@@ -145,31 +145,31 @@ function TopNav(props: Props) {
             <li>
               <a
                 id="nav-btn-4"
-                href="#social"
+                href="#vision"
                 className="nav-link"
                 data-scroll-to
               >
-                Social AI
+                Vision
+              </a>
+            </li>
+            <li>
+              <a
+                id="nav-btn-4"
+                href="#products"
+                className="nav-link"
+                data-scroll-to
+              >
+                Products
               </a>
             </li>
             <li>
               <a
                 id="nav-btn-2"
-                href="#film"
+                href="#research"
                 className="nav-link"
                 data-scroll-to
               >
-                Film
-              </a>
-            </li>
-            <li>
-              <a
-                id="nav-btn-3"
-                href="#music"
-                className="nav-link"
-                data-scroll-to
-              >
-                Music
+                Research
               </a>
             </li>
             <li>
@@ -179,7 +179,7 @@ function TopNav(props: Props) {
                 className="nav-link"
                 data-scroll-to
               >
-                Our Team
+                Team
               </a>
             </li>
           </ul>
@@ -230,24 +230,23 @@ function TopNav(props: Props) {
                 </a>
               </li>
               <li className="nav-link">
-                <a onClick={menuToggle} href="#social" data-scroll-to>
-                  Social AI
+                <a onClick={menuToggle} href="#vision" data-scroll-to>
+                  Vision
                 </a>
               </li>
               <li className="nav-link">
-                <a onClick={menuToggle} href="#film" data-scroll-to>
-                  Film
+                <a onClick={menuToggle} href="#products" data-scroll-to>
+                  Products
                 </a>
               </li>
               <li className="nav-link">
-                <a onClick={menuToggle} href="#music" data-scroll-to>
-                  Music
+                <a onClick={menuToggle} href="#research" data-scroll-to>
+                  Research
                 </a>
               </li>
-
               <li className="nav-link">
                 <a onClick={menuToggle} href="#team" data-scroll-to>
-                  Our Team
+                  Team
                 </a>
               </li>
               <li className="mt-4">
@@ -265,10 +264,10 @@ function TopNav(props: Props) {
         </div>
       </nav>
 
-      <a href="#home" className={backToTop} data-scroll-to>
+      {/* <a href="#home" className={backToTop} data-scroll-to>
         <div className="btt-shape"></div>
         Back to Top
-      </a>
+      </a> */}
     </>
   );
 }

packages/storyteller.io/src/locomotive-scroll.scss

@@ -1,4 +1,8 @@
 /*! locomotive-scroll v4.1.3 | MIT License | https://github.com/locomotivemtl/locomotive-scroll */
+#scroller {
+  will-change: transform;
+}
+
 html.has-scroll-smooth {
   overflow: hidden;
   position: fixed;
@@ -85,3 +89,9 @@ html.has-scroll-dragging {
   right: auto;
   bottom: 0;
 }
+
+@media (max-width: 992px) {
+  #scroller {
+    will-change: initial;
+  }
+}

yarn.lock

@@ -4387,6 +4387,7 @@ __metadata:
     react-dom: ^16.13.1
     react-drag-drop-files: ^2.3.9
     react-i18next: ^11.15.4
+    react-range: ^1.8.14
     react-reveal: ^1.2.2
     react-router-dom: ^5.2.0
     react-scripts: 5.0.0
@@ -17132,6 +17133,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-range@npm:^1.8.14":
+  version: 1.8.14
+  resolution: "react-range@npm:1.8.14"
+  peerDependencies:
+    react: ^16.8.0-0 || ^17.0.0-0 || ^18.0.0-0
+    react-dom: ^16.8.0-0 || ^17.0.0-0 || ^18.0.0-0
+  checksum: 7020c011dc293db46ede9b7cb014dbfe71d59f96aad9cf9b12e9de26c2b600c504e11d39368af8c539c4a3dc1f93e966745063e0b494c388c28fbadd338164bb
+  languageName: node
+  linkType: hard
+
 "react-reconciler@npm:0.25.1":
   version: 0.25.1
   resolution: "react-reconciler@npm:0.25.1"