Implemented snap scroll

src/components/Entrypoint/index.tsx

@@ -1,14 +1,18 @@
 'use client';
 
 import ScreenOne from '../home/screens/ScreenOne';
+import ScreenThree from '../home/screens/ScreenThree';
+import ScreenTwo from '../home/screens/ScreenTwo';
 import { AcceptInviteErrorDialog, Menu } from './segments';
 
 export default function Entrypoint({ errorCode }: { errorCode?: string }) {
   return (
-    <div className="relative flex h-screen max-h-screen w-screen flex-col bg-primary-9">
+    <div className="relative flex w-screen flex-col bg-primary-9">
       <Menu />
-      <div className="snap-y snap-mandatory">
+      <div className="h-screen snap-y snap-mandatory overflow-x-hidden overflow-y-scroll">
         <ScreenOne />
+        <ScreenTwo />
+        <ScreenThree />
       </div>
       {errorCode && <AcceptInviteErrorDialog errorCode={errorCode} />}
     </div>

src/components/home/screens/ScreenOne.tsx

@@ -19,15 +19,15 @@ export function LargeButton() {
 
 export default function ScreenOne() {
   return (
-    <div className="relative flex h-screen w-screen snap-start flex-col items-center justify-center px-[16vw]">
-      <h1 className="relative z-10 w-full font-title text-8xl font-bold text-white">
+    <div className="relative flex h-screen w-screen snap-start snap-always flex-col items-center justify-center px-[16vw] text-white">
+      <h1 className="relative z-10 w-full font-title text-8xl font-bold">
         {'Virtual labs for\nexploring, building and\nsimulating the brain'}
       </h1>
 
       <div className="relative z-10 mt-10 grid w-full grid-cols-3 gap-x-4">
         {THREE_COLUMN_SCREEN_ONE.map((paragraph: string, index: number) => (
           <div
-            className="flex flex-col gap-y-2 font-title text-xl font-normal text-white"
+            className="flex flex-col gap-y-2 font-title text-xl font-normal"
             key={`Subtitle-${index + 1}`}
           >
             <div>{index + 1}</div>

src/components/home/screens/ScreenThree.tsx

@@ -0,0 +1,42 @@
+import Image from 'next/image';
+import { useInView } from 'react-intersection-observer';
+
+import { BB_AWS } from '@/constants/home/content-home';
+
+import { basePath } from '@/config';
+
+export default function ScreenThree() {
+  const { ref, inView } = useInView({
+    threshold: 0.5,
+  });
+
+  return (
+    <div
+      className="relative flex h-screen w-screen snap-start snap-always flex-col items-center justify-center gap-y-6 px-[16vw] text-white"
+      ref={ref}
+    >
+      <div className="relative z-10 flex flex-col gap-y-8">
+        <h3 className="font-title text-7xl font-bold">{BB_AWS.title}</h3>
+        <div className="grid grid-cols-2 gap-x-6">
+          {BB_AWS.content.map((content: { title: string; paragraph: string }) => (
+            <div className="flex flex-col gap-y-2 font-title" key={content.title}>
+              <h4 className="text-2xl font-semibold uppercase tracking-wider">{content.title}</h4>
+              <p className="text-lg leading-normal">{content.paragraph}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+      <Image
+        src={`${basePath}/images/home/home_background_block-2.webp`}
+        alt="Image of the hippocampus illustrating the Blue Brain Open Platform"
+        width={1920}
+        height={1080}
+        className="absolute left-0 top-0 z-0 h-full w-full object-cover"
+        style={{
+          transform: inView ? 'scale(1)' : 'scale(0.7)',
+          opacity: inView ? 1 : 0,
+        }}
+      />
+    </div>
+  );
+}

src/components/home/screens/ScreenTwo.tsx

@@ -0,0 +1,42 @@
+import Image from 'next/image';
+
+import { useInView } from 'react-intersection-observer';
+
+import { basePath } from '@/config';
+import { SCREEN_TWO } from '@/constants/home/content-home';
+
+export default function ScreenTwo() {
+  const { ref, inView } = useInView({
+    threshold: 0.5,
+  });
+
+  return (
+    <div
+      className="relative flex h-screen w-screen snap-start snap-always flex-col items-center justify-center gap-y-6 px-[16vw] text-white"
+      ref={ref}
+    >
+      <div className="relative z-10 flex flex-col gap-y-8">
+        <h3 className="font-title text-7xl font-bold">{SCREEN_TWO.title}</h3>
+        <div className="grid grid-cols-2 gap-x-6">
+          {SCREEN_TWO.content.map((content: { title: string; paragraph: string }) => (
+            <div className="flex flex-col gap-y-2 font-title" key={content.title}>
+              <h4 className="text-2xl font-semibold uppercase tracking-wider">{content.title}</h4>
+              <p className="text-lg leading-normal">{content.paragraph}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+      <Image
+        src={`${basePath}/images/home/home_background_block-1.webp`}
+        alt="Image of the hippocampus illustrating the Blue Brain Open Platform"
+        width={1920}
+        height={1080}
+        className="absolute left-0 top-0 z-0 h-full w-full object-cover"
+        style={{
+          transform: inView ? 'scale(1)' : 'scale(0.7)',
+          opacity: inView ? 1 : 0,
+        }}
+      />
+    </div>
+  );
+}

src/middleware.ts

@@ -1,8 +1,8 @@
-import { NextResponse, NextRequest } from 'next/server';
 import { getToken } from 'next-auth/jwt';
 import nextAuthMiddleware, { NextRequestWithAuth } from 'next-auth/middleware';
+import { NextRequest, NextResponse } from 'next/server';
 
-const FREE_ACCESS_PAGES = ['/', '/log-in', '/getting-started', '/about*', '/images*'];
+const FREE_ACCESS_PAGES = ['/', '/log-in', '/getting-started', '/about*', '/images*', '/video*'];
 
 /* Don't allow arbitrary regex to avoid accidentally leaking protected pages
 Only two patterns allowed, exact match or /path* which matches the path