Implement Smooth scrolling

package.json

@@ -16,9 +16,11 @@
     "@fontsource/museomoderno": "^5.0.18",
     "@mui/icons-material": "^5.15.10",
     "@mui/material": "^5.15.7",
+    "@types/react-router-hash-link": "^2.4.9",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.22.0"
+    "react-router-dom": "^6.22.0",
+    "react-router-hash-link": "^2.4.3"
   },
   "devDependencies": {
     "@types/react": "^18.2.43",

src/App.tsx

@@ -5,10 +5,7 @@ import { TopBorder } from "./components/Borders";
 import Footer from "./components/Footer";
 import NavBar from "./components/NavBar";
 import ApplyPage from "./pages/apply";
-import EventsPage from "./pages/events";
-import FAQPage from "./pages/faq";
 import HomePage from "./pages/home";
-import SponsorsPage from "./pages/sponsors";
 import TeamsPage from "./pages/teams";
 
 function App() {
@@ -19,9 +16,6 @@ function App() {
         <Routes>
           <Route path="/" element={<HomePage />} />
           <Route path="/teams" element={<TeamsPage />} />
-          <Route path="/faq" element={<FAQPage />} />
-          <Route path="/events" element={<EventsPage />} />
-          <Route path="/sponsors" element={<SponsorsPage />} />
           <Route path="/apply" element={<ApplyPage />} />
         </Routes>
         <Box mt={10}>

src/components/Events.tsx

@@ -12,7 +12,7 @@ export default function Events() {
   // const cardStyle = isMobile;
   const typographyStyle = isMobile ? { mt: 3 } : {};
   return (
-    <Box mb={10}>
+    <Box mb={10} id="events">
       <Typography
         style={{
           fontSize: "50px",

src/components/NavBar.tsx

@@ -25,9 +25,9 @@ export default function NavBar() {
         }}
       >
         <NavBarButton bg="none" text="Teams" variant="secondary" />
-        <NavBarButton bg="none" text="Events" variant="secondary" />
-        <NavBarButton bg="none" text="FAQ" variant="secondary" />
-        <NavBarButton bg="none" text="Sponsors" variant="secondary" />
+        <NavBarButton bg="none" text="Events" to="#events" variant="secondary" />
+        <NavBarButton bg="none" text="FAQ" to="#faq" variant="secondary" />
+        <NavBarButton bg="none" text="Sponsors" to="#sponsors" variant="secondary" />
         <NavBarButton
           bg="#FF3225"
           text="Apply"

src/components/NavBarButton.tsx

@@ -1,6 +1,6 @@
 import { Theme } from "@emotion/react";
 import { Button, SxProps, Typography } from "@mui/material";
-import { Link } from "react-router-dom";
+import { HashLink } from 'react-router-hash-link';
 
 export interface NavBarButtonProps {
   variant: string;
@@ -29,12 +29,14 @@ export default function NavBarButton(props: NavBarButtonProps) {
       }}
       disableRipple
     >
-      <Link
+      <HashLink
         to={"/" + (props.to ?? props.text.toLowerCase())}
         style={{ color: "inherit" }}
       >
-        <Typography variant="body1" sx={{ margin: 0 }}>{props.text}</Typography>
-      </Link>
+        <Typography variant="body1" sx={{ margin: 0 }}>
+          {props.text}
+        </Typography>
+      </HashLink>
     </Button>
   );
 }

src/components/SponsorsList.tsx

@@ -14,9 +14,9 @@ export default function SponsorsList({ numColumns = 3 }: SponsorsListProps) {
       display: 'grid',
       gridTemplateColumns: `repeat(${numColumns}, 1fr)`,
       gridTemplateRows: 'auto',
-      justifyItems: 'center', 
-      alignItems: 'center', 
-      gridRowGap: 32, 
+      justifyItems: 'center',
+      alignItems: 'center',
+      gridRowGap: 32,
     }}>
       {sponsorArray.map((sponsor: SponsorsMemberProps, index: number) => (
         <SponsorsMember key={index} {...sponsor} />

src/components/SponsorsMember.tsx

@@ -12,7 +12,15 @@ export default function SponsorsMember(props: SponsorsMemberProps) {
 
   return (
     <Box sx={{ maxWidth: size, textAlign: "center", margin: 5 }}>
-      <img src={imgSrc} style={{ width: "100%", height: "100%", maxHeight:"100px" }} alt={name} />
+      <img
+        src={imgSrc}
+        style={{
+          width: "100%",
+          height: "100%",
+          maxHeight: "100px",
+        }}
+        alt={name}
+      />
       <Typography sx={{ mt: "5px" }}>{name}</Typography>
     </Box>
   );

src/components/TeamsDropdown.tsx

@@ -1,9 +1,9 @@
 import { Box, Button, Typography } from "@mui/material";
-import InfoCard, { InfoCardProps, BorderSpec } from "./InfoCard";
-import TeamMemberList from "../components/TeamMemberList.tsx";
 import { useState } from "react";
+import TeamMemberList from "../components/TeamMemberList.tsx";
+import InfoCard, { BorderSpec, InfoCardProps } from "./InfoCard";
 
-import "./TeamMemberList.css"
+import "./TeamMemberList.css";
 
 export interface TeamsDropdownProps extends InfoCardProps {
   imgSrc: string;
@@ -33,7 +33,13 @@ export default function TeamsDropdown(props: TeamsDropdownProps) {
       >
         <Box sx={{ maxHeight: "fit-content" }}>
           {/* TODO: Mobile responsiveness is wack */}
-          <img src={imgSrc} style={{ maxHeight: "150px" }}></img>
+          <img
+            src={imgSrc}
+            style={{
+              maxHeight: "230px",
+              filter: "drop-shadow( 10px 10px 0px rgba(0, 0, 0, 1))",
+            }}
+          ></img>
         </Box>
         <Box sx={{ textAlign: "left" }}>
           <Button

src/components/TeamsMember.tsx

@@ -12,22 +12,24 @@ export default function TeamsMember(props: TeamsMemberProps) {
   // const size = props.size ?? "inherit";
 
   return (
-    <Box sx={{maxWidth: "150px", textAlign: "left"}}>
+    <Box sx={{ maxWidth: "150px", textAlign: "left" }}>
       <Card
         style={{
           borderRadius: "20%",
           border: "2px #4361EE solid",
-          width: '150px', 
-          height: '200px',
+          width: "150px",
+          height: "150px",
           overflow: "hidden",
-          display: 'flex',
-          justifyContent: 'center',
-          alignItems: 'center',
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
         }}
       >
-        <img src={imgSrc} style={{width: "100%", height: "100%"}} />
+        <img src={imgSrc} style={{ width: "100%" }} />
       </Card>
-      <Typography sx={{ fontWeight: "bold", mt: "5px", ml: "5px" }}>{name}</Typography>
+      <Typography sx={{ fontWeight: "bold", mt: "5px", ml: "5px" }}>
+        {name}
+      </Typography>
       <Typography sx={{ ml: "5px" }}> {position}</Typography>
     </Box>
   );

src/index.css

@@ -2,6 +2,7 @@
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
+  scroll-behavior: smooth;
 
   color-scheme: light dark;
   /* color: rgba(255, 255, 255, 0.87); */

src/pages/faq.tsx

@@ -107,7 +107,7 @@ function FAQAccordion({ question, answer }: FAQAccordionPropTypes) {
 
 function FAQ() {
   return (
-    <Box sx={{ m: 0, p: 0 }}>
+    <Box sx={{ m: 0, p: 0 }} id = "faq">
       <Card sx={{ backgroundColor: "primary.main" }} id="faq">
         <Typography
           variant="h3"

src/pages/home.tsx

@@ -13,10 +13,10 @@ export default function HomePage() {
       <Hero />
       <MiniTeams />
 
-      <Box>
+      <Box id="events">
         <TopBorder />
         <Box bgcolor={"primary.main"} color="white">
-          <Events />
+          <Events/>
           <FAQPage />
         </Box>
         <BottomBorder />

src/pages/sponsors.tsx

@@ -1,7 +1,7 @@
-import { Typography, Box, Link } from "@mui/material";
-import SponsorsList from "../components/SponsorsList";
 import "@fontsource/inter";
 import "@fontsource/museomoderno";
+import { Box, Link, Typography } from "@mui/material";
+import SponsorsList from "../components/SponsorsList";
 
 export default function SponsorsPage() {
   const rainbowColors = [
@@ -17,6 +17,7 @@ export default function SponsorsPage() {
 
   return (
     <Box
+      id="sponsors"
       sx={{
         mx: 12,
         textAlign: "center",
@@ -41,7 +42,11 @@ export default function SponsorsPage() {
         Interested in sponsoring BigRed//Hacks 2024?
       </Typography>
       <Typography variant="body1" sx={{ fontFamily: "inter" }}>
-        Email us at <Link href="mailto:bigredhacks@cornell.edu">bigredhacks@cornell.edu</Link>!
+        Email us at{" "}
+        <Link href="mailto:bigredhacks@cornell.edu">
+          bigredhacks@cornell.edu
+        </Link>
+        !
       </Typography>
     </Box>
   );