Merge pull request #35 from devsoc-unsw/redesign/frontpage

Landing Screen Redesign
devsoc-unsw · Jan 23, 2025 · a4186d9 · a4186d9
2 parents b76c9ae + 212df5f
commit a4186d9
Show file tree

Hide file tree

Showing 12 changed files with 241 additions and 172 deletions.
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,15 +1,20 @@
-'use client'
-import { AspectRatio, Card, Stack, Typography, useTheme } from '@mui/joy';
-import React, { useEffect, useRef } from 'react';
+"use client";
+import { AspectRatio, Card, Stack, Typography, useTheme } from "@mui/joy";
+import React, { useEffect, useRef } from "react";
 import { Box, Button, Link } from "@mui/material";
-import { projectData } from '../data';
+import { projectData } from "../data";
 import useEmblaCarousel from "embla-carousel-react";
 import Autoplay from "embla-carousel-autoplay";
 import { ProjectCardProps } from "../components/ProjectCard";
 import Image from "next/image";
-import { NextButton, PrevButton, usePrevNextButtons } from "../components/embla/EmblaCarouselArrowButtons";
-import "./styles.css"
+import {
+  NextButton,
+  PrevButton,
+  usePrevNextButtons,
+} from "../components/embla/EmblaCarouselArrowButtons";
+import "./styles.css";
 import { useMediaQuery } from "@mui/system";
+import { CustomCarousel } from "../components/carousel/CustomCarousel";
 
 interface EventCardProp {
   title: string;
@@ -19,199 +24,107 @@ interface EventCardProp {
   button: string;
 }
 
-const eventContent: EventCardProp[] = [
-  {
-    title: "Clubs Takeover",
-    href: "https://www.facebook.com/events/1586760535262553/",
-    dateTime: "12-2PM October 22nd 2024",
-    thumbnail: "",
-    button: "View event"
-  },
-  {
-    title: "Techspire",
-    href: "https://techspire.devsoc.app/",
-    dateTime: "3PM November 5th 2024",
-    thumbnail: "",
-    button: "Find out more"
-  },
-]
-
 export default function Home() {
   const scrollRef = useRef<HTMLDivElement | null>(null);
-  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true, axis: 'y', duration: 45 }, [Autoplay({delay: 5000})]);
+  const [emblaRef, emblaApi] = useEmblaCarousel(
+    { loop: true, axis: "y", duration: 45 },
+    [Autoplay({ delay: 5000 })]
+  );
   const {
     prevBtnDisabled,
     nextBtnDisabled,
     onPrevButtonClick,
-    onNextButtonClick
-  } = usePrevNextButtons(emblaApi)
-  const displayProjects = projectData.filter(x => x.name !== "Chaos" && x.name !== "Jobsboard")
-
-  useEffect(() => {
-    const handleScroll = (e: { deltaY: any; }) => {
-      if (scrollRef.current) {
-        // Adjust the scroll position of the div based on the window's scroll position
-        scrollRef.current.scrollLeft += e.deltaY; // or adjust based on scroll direction
-      }
-    };
-
-    window.addEventListener('wheel', handleScroll, { passive: false });
-
-    return () => {
-      window.removeEventListener('wheel', handleScroll);
-    };
-  }, []);
+    onNextButtonClick,
+  } = usePrevNextButtons(emblaApi);
+  const displayProjects = projectData.filter(
+    (x) => x.name !== "Chaos" && x.name !== "Jobsboard"
+  );
 
   return (
     <Box className="homeContent">
-      <Stack direction="column" pt={2} px={4} width="100%" maxWidth={1300} m="auto" overflow="hidden">
+      <Stack
+        direction="column"
+        pt={2}
+        px={4}
+        width="100%"
+        maxWidth={1300}
+        m="auto"
+        overflow="hidden"
+      >
         <Stack direction="column">
-          <Box sx={{width: "100%"}}>
-            <Typography className={"heroText"} mt={3} fontSize={{xs: "2rem", sm: "2.3rem", md: "3.2rem"}}
-                        fontWeight={500} component='div'>
-              UNSW&apos;s student developer society
+          <Box sx={{ width: "100%" }}>
+            <Typography
+              className={"heroText"}
+              mt={3}
+              fontSize={{ xs: "2rem", sm: "2.3rem", md: "3.2rem" }}
+              fontWeight={500}
+              component="div"
+            >
+              UNSW&apos;s Software Development Society
             </Typography>
-            <Typography className={"heroText"} mt={0} fontSize={{xs: "1.5rem", sm: "2rem", md: "2.5rem"}} fontWeight={200}
-                        component='div'>
+            <Typography
+              className={"heroText"}
+              mt={0}
+              fontSize={{ xs: "1.5rem", sm: "2rem", md: "2.5rem" }}
+              fontWeight={200}
+              component="div"
+            >
               Run by devs, for devs
             </Typography>
           </Box>
         </Stack>
-        <Box sx={{display: "flex", flexDirection: "row", gap: "1rem", alignItems: "center"}} mt={{xs: 2, md: 0}}>
-          <Typography
-            paddingTop={{xs: 1, md: 3}}
-            paddingBottom={{xs: 1, md: 3}}
-            fontSize={{xs: 20, md: 30}}
-            fontWeight={600}
-          >
-            Highlights
-          </Typography>
-          <div className="embla__controls">
-            <div className="embla__buttons">
-              <PrevButton onClick={onPrevButtonClick} />
-              <NextButton onClick={onNextButtonClick} />
-            </div>
-          </div>
-        </Box>
-        <Card
-          ref={emblaRef}
-          className="embla"
-          sx={{padding: 0, height: {xs: '90px', md: '115px'}}}
-        >
-          <Stack className="embla__container">
-            {eventContent.map((props, idx) => <HighlightLinkCard key={`event ${props.title}`} {...props}/>)}
-          </Stack>
-        </Card>
+        <CustomCarousel />
         <Box
           ref={scrollRef}
-          marginBottom={{xs: "3rem", md: 0}}
-          marginTop={{xs: "2rem", md: "3rem"}}
+          marginBottom={{ xs: "3rem", md: 0 }}
+          marginTop={{ xs: "2rem", md: "2rem" }}
           sx={{
-            display: 'flex',
-            overflowX: 'auto',
-            scrollbarWidth: 'none',
+            display: "flex",
+            overflowX: "auto",
           }}
         >
           <Stack
-            spacing={{xs: 3, md: 5}}
-            direction={{xs: "column", md: "row"}}
-            sx={{display: "flex", width: '100%'}}
-            flexDirection={{xs: "column", md: "row"}}
+            spacing={{ xs: 3, lg: 5 }}
+            direction={{ xs: "column", lg: "row" }}
+            sx={{ display: "flex", width: "100%" }}
+            flexDirection={{ xs: "column", lg: "row" }}
           >
-            {displayProjects.map((props, idx) => <LinkCard key={props.name} {...props} order={idx}/>)}
+            {displayProjects.map((props, idx) => (
+              <LinkCard key={props.name} {...props} order={idx} />
+            ))}
           </Stack>
         </Box>
       </Stack>
     </Box>
-  )
+  );
 }
 
-const HighlightLinkCard: React.FC<EventCardProp> = ({
-  title,
-  href,
-  dateTime,
-  thumbnail,
-  button
-}) => {
-  let color = "#111111";
-  const theme = useTheme();
-  const isMdUp = useMediaQuery(theme.breakpoints.up('md'));
-  return (
-    <Card
-      className="embla__slide"
-      sx={{
-        height: {xs: "90px", md: "100px"},
-        backgroundColor: color,
-        borderRadius: 0,
-        padding: thumbnail && isMdUp ? '2rem 1rem' : {xs: '1rem', md: '2rem'},
-        flexDirection: 'row',
-        gap: '4rem',
-        alignItems: 'center',
-        justifyContent: 'space-between',
-        border: 'none'
-      }}
-    >
-      <Box sx={{display: "flex", flexDirection: "row", gap: "2rem"}}>
-        {
-          thumbnail && isMdUp ? <Image width={170} height={90} src={thumbnail} alt={title}/> : null
-        }
-        <Box sx={{display: "flex", flexDirection: "column"}}>
-          <Typography
-            sx={{
-              color: "#EDEEF0",
-              fontSize: { xs: '1.5rem', sm: '1.75rem', md: '2rem' },
-              fontWeight: 500,
-              alignSelf: "flex-start",
-              justifySelf: "center"
-            }}
-          >
-            {title}
-          </Typography>
-          <Typography
-            sx={{
-              color: "#EDEEF0",
-              alignSelf: "flex-start",
-              justifySelf: "center"
-            }}
-          >
-            {dateTime}
-          </Typography>
-        </Box>
-      </Box>
-      {
-        button ?
-          <Link href={href} sx={{ textDecoration: 'none' }}>
-            <Button variant="soft">{button}</Button>
-          </Link> : null
-      }
-    </Card>
-  )
-}
-
-const LinkCard: React.FC<Omit<ProjectCardProps, "trainee"> & { order: number }> = ({
-  name,
-  desc,
-  logoUrl,
-  thumbnailUrl,
-  projectUrl,
-  status,
-  order
-}) => {
+const LinkCard: React.FC<
+  Omit<ProjectCardProps, "trainee"> & { order: number }
+> = ({ name, desc, logoUrl, thumbnailUrl, projectUrl, status, order }) => {
   // Class 3 colors sourced from https://www.radix-ui.com/colors
-  const colors = ["#182449", "#0D2847", "#202248", "#351A35", "#391714", "#291F43", "#222222"]
+  const colors = [
+    "#182449",
+    "#0D2847",
+    "#202248",
+    "#351A35",
+    "#391714",
+    "#291F43",
+    "#222222",
+  ];
   return (
     <Link href={projectUrl}>
       <Card
         className="boxBackground"
         sx={{
-          width: { xs: "100%", md: "250px" },
-          height: { xs: "5rem", md: "100px" },
+          width: { xs: "100%", lg: "215px" },
+          height: { xs: "5rem", lg: "86px" },
           backgroundColor: colors[order],
-          boxShadow: 'sm',
-          padding: '1rem',
-          flexDirection: 'row',
-          gap: '2rem',
-          alignItems: 'center',
+          boxShadow: "sm",
+          padding: "1rem",
+          flexDirection: "row",
+          gap: "1.25rem",
+          alignItems: "center",
         }}
       >
         <AspectRatio objectFit="contain" ratio={1} sx={{ width: "3rem" }}>
@@ -225,14 +138,13 @@ const LinkCard: React.FC<Omit<ProjectCardProps, "trainee"> & { order: number }>
         <Typography
           sx={{
             color: "#EDEEF0",
-            fontSize: {xs: '1.5rem', sm: '1.75rem', md: '1.5rem'},
+            fontSize: { xs: "1.5rem", lg: "1.25rem" },
             fontWeight: 500,
           }}
         >
           {name}
         </Typography>
       </Card>
     </Link>
-  )
-}
-
+  );
+};
diff --git a/app/styles.css b/app/styles.css
@@ -2,7 +2,8 @@
     font-family: 'IBM Plex Mono', monospace;
 }
 
-.boxBackground {
+/* Unused styles for old event design */
+/* .boxBackground {
     position: relative;
 }
 
@@ -17,9 +18,9 @@
     right: 0;
     width: 100%;
     height: 100%;
-}
+} */
 
-.embla {
+/* .embla {
     overflow: hidden;
 }
 .embla__container {
@@ -47,4 +48,4 @@
     width: 25px;
     align-items: center;
     justify-content: center;
-}
+} */