feat: add scroll-down arrows to each section for smooth section-to-section navigation; refs #50

Author: elainefan331

src/components/HomePageComponents/Section1.tsx

@@ -28,7 +28,7 @@ const Section1: React.FC = () => {
         backgroundSize: "cover",
         overflow: "auto",
         width: "100%",
-        minHeight: "calc(100vh - 6rem)",
+        minHeight: "calc(90vh - 6rem)",
       }}
     >
       <Grid

src/components/HomePageComponents/Section2.tsx

@@ -1,5 +1,12 @@
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 import ArrowForwardOutlinedIcon from "@mui/icons-material/ArrowForwardOutlined";
-import { Typography, Box, Button, CircularProgress } from "@mui/material";
+import {
+  Typography,
+  Box,
+  Button,
+  CircularProgress,
+  IconButton,
+} from "@mui/material";
 import FilterMenu from "components/NodesFilter/FilterMenu";
 import { Colors } from "design/theme";
 import NeuroJsonGraph from "modules/universe/NeuroJsonGraph";
@@ -15,6 +22,7 @@ interface Section2Props {
   setFilterKeyword: (keyword: string) => void;
   setSelectedModalities: (modalities: string[]) => void;
   onNodeClick: (node: NodeObject) => void;
+  scrollToNext: () => void;
 }
 
 const Section2: React.FC<Section2Props> = ({
@@ -25,6 +33,7 @@ const Section2: React.FC<Section2Props> = ({
   setFilterKeyword,
   setSelectedModalities,
   onNodeClick,
+  scrollToNext,
 }) => {
   const navigate = useNavigate();
 
@@ -38,9 +47,10 @@ const Section2: React.FC<Section2Props> = ({
         backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2371feed'/%3E%3Cstop offset='1' stop-color='%2371feed' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23abb2f9'/%3E%3Cstop offset='1' stop-color='%23abb2f9' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%231fa0f6'/%3E%3Cstop offset='1' stop-color='%231fa0f6' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23FFFFFF'/%3E%3Cstop offset='1' stop-color='%23FFFFFF' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2302DEC4'/%3E%3Cstop offset='1' stop-color='%2302DEC4' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%235865F2'/%3E%3Cstop offset='1' stop-color='%235865F2' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E")`,
         backgroundAttachment: "fixed",
         backgroundSize: "cover",
-        overflow: "auto",
+        // overflow: "auto",
         padding: "1rem",
-        paddingLeft: "7rem",
+        // paddingLeft: "7rem",
+        minHeight: "100vh",
       }}
     >
       <Box // tri-colors card
@@ -109,7 +119,7 @@ const Section2: React.FC<Section2Props> = ({
           {/* top buttons: show only on large screens */}
           <Box
             sx={{
-              display: { xs: "none", md: "none", lg: "flex" },
+              display: { xs: "flex", md: "flex", lg: "flex" },
               flexDirection: "column",
               width: { xs: "100%", sm: "50%", md: "30%", lg: "15%" },
               maxWidth: "200px",
@@ -118,22 +128,6 @@ const Section2: React.FC<Section2Props> = ({
               zIndex: 10, // Higher than text and graph
             }}
           >
-            <Button
-              variant="outlined"
-              sx={{
-                color: Colors.lightGray,
-                borderColor: Colors.lightGray,
-                transition: "all 0.3s ease",
-                marginTop: 5,
-                "&:hover": {
-                  transform: "scale(1.05)",
-                  borderColor: Colors.lightGray,
-                },
-              }}
-            >
-              Start exploring
-              <ArrowForwardOutlinedIcon />
-            </Button>
             <Button
               variant="outlined"
               sx={{
@@ -179,7 +173,7 @@ const Section2: React.FC<Section2Props> = ({
         </Box>
 
         {/* Bottom Buttons - Show only on smaller screens */}
-        <Box
+        {/* <Box
           sx={{
             display: { xs: "flex", md: "flex", lg: "none" },
             justifyContent: "center",
@@ -189,23 +183,6 @@ const Section2: React.FC<Section2Props> = ({
             width: "100%",
           }}
         >
-          <Button
-            variant="outlined"
-            sx={{
-              color: Colors.lightGray,
-              borderColor: Colors.lightGray,
-              transition: "all 0.3s ease",
-              marginBottom: 2,
-              width: "200px",
-              "&:hover": {
-                transform: "scale(1.05)",
-                borderColor: Colors.lightGray,
-              },
-            }}
-          >
-            Start exploring
-            <ArrowForwardOutlinedIcon />
-          </Button>
           <Button
             variant="outlined"
             sx={{
@@ -222,7 +199,28 @@ const Section2: React.FC<Section2Props> = ({
           >
             View All Databases
           </Button>
-        </Box>
+        </Box> */}
+      </Box>
+
+      {/* Scroll Arrow - fixed inside Section2 */}
+      <Box
+        sx={{
+          position: "absolute",
+          bottom: "1rem",
+          left: 0,
+          right: 0,
+          width: "100%",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          paddingBottom: "2rem",
+          mt: 4,
+          zIndex: 1000,
+        }}
+      >
+        <IconButton onClick={scrollToNext}>
+          <ArrowDownwardIcon sx={{ fontSize: 40, color: Colors.darkPurple }} />
+        </IconButton>
       </Box>
     </Box>
   );

src/components/HomePageComponents/Section3.tsx

@@ -1,8 +1,13 @@
-import { Typography, Box, Button } from "@mui/material";
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+import { Typography, Box, Button, IconButton } from "@mui/material";
 import { Colors } from "design/theme";
 import React from "react";
 
-const Section3: React.FC = () => {
+interface Section3Props {
+  scrollToNext: () => void;
+}
+
+const Section3: React.FC<Section3Props> = ({ scrollToNext }) => {
   return (
     <Box // white background
       sx={{
@@ -13,7 +18,7 @@ const Section3: React.FC = () => {
         backgroundImage: `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2000 1500'%3E%3Cdefs%3E%3CradialGradient id='a' gradientUnits='objectBoundingBox'%3E%3Cstop offset='0' stop-color='%23000000'/%3E%3Cstop offset='1' stop-color='%235865F2'/%3E%3C/radialGradient%3E%3ClinearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='750' x2='1550' y2='750'%3E%3Cstop offset='0' stop-color='%232c3379'/%3E%3Cstop offset='1' stop-color='%235865F2'/%3E%3C/linearGradient%3E%3Cpath id='s' fill='url(%23b)' d='M1549.2 51.6c-5.4 99.1-20.2 197.6-44.2 293.6c-24.1 96-57.4 189.4-99.3 278.6c-41.9 89.2-92.4 174.1-150.3 253.3c-58 79.2-123.4 152.6-195.1 219c-71.7 66.4-149.6 125.8-232.2 177.2c-82.7 51.4-170.1 94.7-260.7 129.1c-90.6 34.4-184.4 60-279.5 76.3C192.6 1495 96.1 1502 0 1500c96.1-2.1 191.8-13.3 285.4-33.6c93.6-20.2 185-49.5 272.5-87.2c87.6-37.7 171.3-83.8 249.6-137.3c78.4-53.5 151.5-114.5 217.9-181.7c66.5-67.2 126.4-140.7 178.6-218.9c52.3-78.3 96.9-161.4 133-247.9c36.1-86.5 63.8-176.2 82.6-267.6c18.8-91.4 28.6-184.4 29.6-277.4c0.3-27.6 23.2-48.7 50.8-48.4s49.5 21.8 49.2 49.5c0 0.7 0 1.3-0.1 2L1549.2 51.6z'/%3E%3Cg id='g'%3E%3Cuse href='%23s' transform='scale(0.12) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.2) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.25) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(0.3) rotate(-20)'/%3E%3Cuse href='%23s' transform='scale(0.4) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(0.5) rotate(20)'/%3E%3Cuse href='%23s' transform='scale(0.6) rotate(60)'/%3E%3Cuse href='%23s' transform='scale(0.7) rotate(10)'/%3E%3Cuse href='%23s' transform='scale(0.835) rotate(-40)'/%3E%3Cuse href='%23s' transform='scale(0.9) rotate(40)'/%3E%3Cuse href='%23s' transform='scale(1.05) rotate(25)'/%3E%3Cuse href='%23s' transform='scale(1.2) rotate(8)'/%3E%3Cuse href='%23s' transform='scale(1.333) rotate(-60)'/%3E%3Cuse href='%23s' transform='scale(1.45) rotate(-30)'/%3E%3Cuse href='%23s' transform='scale(1.6) rotate(10)'/%3E%3C/g%3E%3C/defs%3E%3Cg transform='translate(100 0)'%3E%3Cg transform='translate(0 210)'%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3Cg opacity='0.5'%3E%3Ccircle fill='url(%23a)' r='2000'/%3E%3Ccircle fill='url(%23a)' r='1800'/%3E%3Ccircle fill='url(%23a)' r='1700'/%3E%3Ccircle fill='url(%23a)' r='1651'/%3E%3Ccircle fill='url(%23a)' r='1450'/%3E%3Ccircle fill='url(%23a)' r='1250'/%3E%3Ccircle fill='url(%23a)' r='1175'/%3E%3Ccircle fill='url(%23a)' r='900'/%3E%3Ccircle fill='url(%23a)' r='750'/%3E%3Ccircle fill='url(%23a)' r='500'/%3E%3Ccircle fill='url(%23a)' r='380'/%3E%3Ccircle fill='url(%23a)' r='250'/%3E%3C/g%3E%3Cg transform='rotate(-176.4 0 0)'%3E%3Cuse href='%23g' transform='rotate(10)'/%3E%3Cuse href='%23g' transform='rotate(120)'/%3E%3Cuse href='%23g' transform='rotate(240)'/%3E%3C/g%3E%3Ccircle fill='url(%23a)' r='3000'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E")`,
         backgroundAttachment: "fixed",
         backgroundSize: "cover",
-        overflow: "auto",
+        // overflow: "auto",
         padding: "5rem 7rem",
       }}
     >
@@ -97,6 +102,21 @@ const Section3: React.FC = () => {
           </Typography>
         </Box>
       </Box>
+      {/* Scroll Arrow to Section4 */}
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          paddingTop: "2rem",
+          //   paddingBottom: "1rem",
+          zIndex: 3,
+        }}
+      >
+        <IconButton onClick={scrollToNext}>
+          <ArrowDownwardIcon sx={{ fontSize: 40, color: Colors.lightGray }} />
+        </IconButton>
+      </Box>
     </Box>
   );
 };

src/pages/Home.tsx

@@ -1,4 +1,5 @@
-import { Box, Typography, Button, Container } from "@mui/material";
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
+import { Box, Typography, Button, Container, IconButton } from "@mui/material";
 import Section1 from "components/HomePageComponents/Section1";
 import Section2 from "components/HomePageComponents/Section2";
 import Section3 from "components/HomePageComponents/Section3";
@@ -7,14 +8,23 @@ import { Colors } from "design/theme";
 import { useAppDispatch } from "hooks/useAppDispatch";
 import { useAppSelector } from "hooks/useAppSelector";
 import { NodeObject } from "modules/universe/NeuroJsonGraph";
-import React, { useEffect, useState, useCallback, useMemo } from "react";
+import React, {
+  useEffect,
+  useState,
+  useCallback,
+  useMemo,
+  useRef,
+} from "react";
 import { useNavigate } from "react-router-dom";
 import { fetchRegistry } from "redux/neurojson/neurojson.action";
 import { NeurojsonSelector } from "redux/neurojson/neurojson.selector";
 
 const Home: React.FC = () => {
   const navigate = useNavigate();
   const dispatch = useAppDispatch();
+  const section2Ref = useRef<HTMLDivElement>(null);
+  const section3Ref = useRef<HTMLDivElement>(null);
+  const section4Ref = useRef<HTMLDivElement>(null);
   const { registry, loading } = useAppSelector(NeurojsonSelector);
 
   // State for selected node and panel visibility
@@ -65,24 +75,54 @@ const Home: React.FC = () => {
       }}
     >
       {/* section 1 */}
-      <Section1 />
+      <Box sx={{ position: "relative" }}>
+        <Section1 />
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "center",
+            mt: 2,
+            mb: 2,
+          }}
+        >
+          <IconButton
+            onClick={() =>
+              section2Ref.current?.scrollIntoView({ behavior: "smooth" })
+            }
+          >
+            <ArrowDownwardIcon sx={{ fontSize: 40, color: Colors.lightGray }} />
+          </IconButton>
+        </Box>
+      </Box>
 
       {/* section 2 */}
-      <Section2
-        registry={registry}
-        filteredRegistry={filteredRegistry}
-        filterKeyword={filterKeyword}
-        selectedModalities={selectedModalities}
-        setFilterKeyword={setFilterKeyword}
-        setSelectedModalities={setSelectedModalities}
-        onNodeClick={handleNodeClick}
-      />
+      <Box ref={section2Ref} sx={{ position: "relative" }}>
+        <Section2
+          registry={registry}
+          filteredRegistry={filteredRegistry}
+          filterKeyword={filterKeyword}
+          selectedModalities={selectedModalities}
+          setFilterKeyword={setFilterKeyword}
+          setSelectedModalities={setSelectedModalities}
+          onNodeClick={handleNodeClick}
+          scrollToNext={() =>
+            section3Ref.current?.scrollIntoView({ behavior: "smooth" })
+          }
+        />
+      </Box>
 
       {/* section 3 */}
-      <Section3 />
+      <Box ref={section3Ref} sx={{ position: "relative" }}>
+        <Section3
+          scrollToNext={() =>
+            section4Ref.current?.scrollIntoView({ behavior: "smooth" })
+          }
+        />
+      </Box>
 
       {/* footer*/}
       <Box
+        ref={section4Ref}
         sx={{
           zIndex: "2",
           position: "relative",