Fix #2042 - Add scroll-snap like behaviour on landing page

[DukeManh]

Issue This PR Addresses

Type of Change

• Bugfix: Change which fixes an issue
• New Feature: Change which adds functionality
• Documentation Update: Change which improves documentation
• UI: Change which improves UI

Description

Fixes #2042

• This solution is limited. It only works if you scroll and release your touchpad or mouse wheel. It won't work if you keep scrolling (overriding the scroll trigger). I will try to improve this later.
• The page will scroll down to the timeline on passing 100px threshold, and scroll up on passing height of banner - 50px thresold.

Checklist

• Quality: This PR builds and passes our npm test and works locally
• Tests: This PR includes thorough tests or an explanation of why it does not
• Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
• Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

[humphd]

./src/components/Banner.tsx:1:26
--
16:46:30.265 | Type error: Cannot find module 'smoothscroll-polyfill' or its corresponding type declarations.
16:46:30.266 | > 1 \| import smoothscroll from 'smoothscroll-polyfill';
16:46:30.266 | \|                          ^
16:46:30.266 | 2 \| import { useEffect, useState, useRef } from 'react';
16:46:30.266 | 3 \| import {
16:46:30.266 | 4 \|   makeStyles,

[DukeManh]

./src/components/Banner.tsx:1:26
--
16:46:30.265 | Type error: Cannot find module 'smoothscroll-polyfill' or its corresponding type declarations.
16:46:30.266 | > 1 \| import smoothscroll from 'smoothscroll-polyfill';
16:46:30.266 | \|                          ^
16:46:30.266 | 2 \| import { useEffect, useState, useRef } from 'react';
16:46:30.266 | 3 \| import {
16:46:30.266 | 4 \|   makeStyles,

`

@humphd . Npm run build doesn't fail locally. I don't know why @types/smoothscroll-polyfill is not working.

[humphd]

You must have something installed locally that you didn't add to package.json, and is missing on Vercel

[birtony]

I like how this works

[yuanLeeMidori]

Work well locally!

[humphd]

We need a rebase on this.

[DukeManh]

This solution is limited. It only works if you scroll and release your touchpad or mouse wheel. It won't work if you keep scrolling (overriding the scroll trigger). I will try to improve this later.

[DukeManh]

I just rebased, can I get another review?

[humphd]

It looks like this is still behind (needs another merge conflict fixed). If you do it, I'll review and land with you.

[DukeManh]

Can you help merge when it's ready?