Merge branch '92-photo-carousel-section' of https://github.com/UofTHa…

…cks-Official/site-11 into 92-photo-carousel-section

package.json

@@ -23,6 +23,8 @@
     "typescript": "5.1.6"
   },
   "devDependencies": {
-    "mini-css-extract-plugin": "^2.7.6"
+    "@types/react-slick": "^0.23.13",
+    "mini-css-extract-plugin": "^2.7.6",
+    "prettier": "3.3.3"
   }
 }

src/components/landing-banner/index.tsx

@@ -30,6 +30,7 @@ import VolunteerBox from "./volunteer-box";
 type LandingBannerProps = {
   mainTitle: string;
   subTitle: string;
+  subTitle2: string;
   appsOpen: boolean;
 };
 
@@ -41,6 +42,7 @@ const imageArray4 = [TealLego, PurpleLego, PinkLego, OrangeLego];
 const LandingBanner = ({
   mainTitle,
   subTitle,
+  subTitle2,
   appsOpen,
 }: LandingBannerProps) => {
   const sponsorLink = "mailto:[email protected]";
@@ -94,8 +96,12 @@ const LandingBanner = ({
       <Quadrant style={borderRadiusStyle(isMobile ? "" : "bottomright")}>
         <ImageCarousel images={imageArray4} interval={interval} />
       </Quadrant>
-      <TitleBox mainTitle={mainTitle} subTitle={subTitle} />
-      <ButtonGroup appsOpen={appsOpen} />
+      <TitleBox
+        mainTitle={mainTitle}
+        subTitle={subTitle}
+        subTitle2={subTitle2}
+      />
+      {/* <ButtonGroup appsOpen={appsOpen} /> */}
       {/* <VolunteerBox /> */}
       <SponsorshipLinkContainer
         mobile={isMobile}

src/components/landing-banner/title-box/index.tsx

@@ -7,9 +7,10 @@ import InterSemiBold from "@/components/inter-semi-bold";
 interface TitleBoxProps {
   mainTitle: string;
   subTitle: string;
+  subTitle2: string;
 }
 
-const TitleBox = ({ mainTitle, subTitle }: TitleBoxProps) => {
+const TitleBox = ({ mainTitle, subTitle, subTitle2 }: TitleBoxProps) => {
   const isMobile = useMobileDetect();
 
   const subjectivityStyle = {
@@ -24,6 +25,7 @@ const TitleBox = ({ mainTitle, subTitle }: TitleBoxProps) => {
         {mainTitle.slice(3)}
       </Subjectivity>
       <InterSemiBold>{subTitle}</InterSemiBold>
+      <InterSemiBold>{subTitle2}</InterSemiBold>
     </TitleBoxContainer>
   );
 };

src/components/past-projects/index.styles.tsx

@@ -0,0 +1,163 @@
+// components/past-projects/index.styles.tsx
+import Image from "next/image";
+import styled from "styled-components";
+import InterFont from "@/components/inter";
+import InterSemiBoldFont from "@/components/inter-semi-bold";
+
+type MobileProps = {
+  mobile?: boolean | null;
+};
+
+// Style for the sponsors container
+const Wrapper = styled.section`
+  display: flex;
+  width: 100%;
+  max-width: 1240px;
+  justify-content: center;
+  align-items: center;
+  align-self: center;
+  padding-bottom: 10px;
+`;
+
+// Style for the sponsors grid
+const ProjectsGrid = styled.div<MobileProps>`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  padding: ${(props) => (props.mobile ? "0" : "50px")};
+  gap: ${(props) => (props.mobile ? "1.5rem" : "1.25rem")};
+`;
+
+// Style for rows
+const Row = styled.div<MobileProps>`
+  display: flex;
+  flex-direction: ${(props) => (props.mobile ? "column" : "row")};
+  justify-content: ${(props) => (props.mobile ? "center" : "space-between")};
+  width: 100%;
+`;
+
+// Style for columns
+const Column = styled.div<MobileProps>`
+  position: relative;
+  object-fit: cover;
+  max-width: ${(props) => (props.mobile ? "auto" : "100%")};
+  height: ${(props) => (props.mobile ? "170px" : "")};
+  width: 100%;
+  box-sizing: border-box;
+
+  &:not(:last-child) {
+    margin-right: 1.5%;
+    margin-bottom: ${(props) => (props.mobile ? "1.5rem" : "")};
+  }
+`;
+
+// Style for individual project item links
+const ProjectItem = styled.a`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  width: 100%;
+  height: 100%;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: hidden;
+
+  box-sizing: border-box;
+  border-radius: 5px;
+  border: 1px solid var(--black, #282828);
+  box-shadow: 0px 4px 0px 0px #282828;
+
+  object-fit: cover;
+`;
+
+// Style for image
+const StyledImage = styled(Image)<MobileProps>`
+  height: ${(props) => (props.mobile ? "170px" : "100%")};
+  width: 100%;
+  object-fit: cover;
+
+  &:hover {
+    transition: all 0.3s ease 0s;
+    transform: scale(1.05);
+    cursor: pointer;
+  }
+`;
+
+// Style for subtitle
+const SubtitleBox = styled.div<MobileProps>`
+  position: absolute;
+  bottom: 0px;
+  left: 0px;
+  margin: 20px 20px 20px 20px;
+  width: calc(100% - 40px);
+  background-color: white;
+
+  box-sizing: border-box;
+  border-radius: 3px;
+  border: 1px solid var(--black, #282828);
+  box-shadow: 0px 4px 0px 0px #282828;
+
+  color: #000;
+  padding: ${(props) =>
+    props.mobile ? "10px 5px 10px 5px" : "20px 15px 20px 15px"};
+  z-index: 1;
+`;
+
+// Style for subtitle link
+const SubtitleLink = styled.a`
+  text-decoration: none;
+  color: inherit;
+`;
+
+const Tier1 = styled.div`
+  display: flex;
+  justify-content: space-between;
+  margin-right: 10px;
+`;
+
+const Tier2 = styled.div<MobileProps>`
+  display: ${(props) => (props.mobile ? "flex" : "block")};
+  justify-content: ${(props) => (props.mobile ? "space-between" : "")};
+`;
+
+const StyledInter = styled(InterFont)`
+  color: #000;
+  font-size: 0.75rem;
+  letter-spacing: 0.72px;
+`;
+
+const StyledInterSemiBold = styled(InterSemiBoldFont)<MobileProps>`
+  text-align: left;
+  color: #000;
+  font-size: ${(props) => (props.mobile ? "1rem" : "1.25rem")};
+  letter-spacing: 0.72px;
+`;
+
+// Styled component for star decals
+const StyledDecalImage = styled(Image)<MobileProps>`
+  position: absolute;
+  top: ${(props) => (props.mobile ? "-20px" : "-40px")};
+  left: ${(props) => (props.mobile ? "-20px" : "-40px")};
+  width: ${(props) => (props.mobile ? "60px" : "90px")};
+  height: auto;
+  z-index: 1;
+`;
+
+export {
+  Wrapper,
+  ProjectsGrid,
+  ProjectItem,
+  Row,
+  Column,
+  StyledImage,
+  SubtitleBox,
+  Tier1,
+  Tier2,
+  StyledInter,
+  StyledInterSemiBold,
+  StyledDecalImage,
+  SubtitleLink,
+};

src/components/past-projects/index.tsx

@@ -0,0 +1,106 @@
+// components/past-projects/index.tsx
+import React from "react";
+import { StaticImageData } from "next/image";
+import {
+  Wrapper,
+  ProjectsGrid,
+  ProjectItem,
+  StyledImage,
+  Row,
+  Column,
+  SubtitleBox,
+  Tier1,
+  Tier2,
+  StyledInter,
+  StyledInterSemiBold,
+  StyledDecalImage,
+  SubtitleLink,
+} from "./index.styles";
+import { useMobileDetect } from "@/hooks/useMobileDetect";
+import { projectData } from "@/components/past-projects/project-data";
+
+// Project Item component
+const Project: React.FC<{
+  href: string;
+  src: StaticImageData;
+  name: string;
+  description: string;
+  isSpecial?: boolean;
+  customClass?: string;
+}> = ({ href, src, name, description, customClass, isSpecial }) => {
+  const isMobile = useMobileDetect();
+
+  return (
+    <ProjectItem href={href} target="_blank" rel="noopener">
+      <StyledImage src={src} alt={name} mobile={isMobile} />
+    </ProjectItem>
+  );
+};
+
+// Page component
+const PastProjects: React.FC = () => {
+  const isMobile = useMobileDetect();
+  return (
+    <Wrapper id="Sponsors">
+      <ProjectsGrid mobile={isMobile}>
+        <Row mobile={isMobile}>
+          {projectData.tier1.map((s, index) => (
+            <Column key={index} mobile={isMobile}>
+              <StyledDecalImage src={s.decal} alt={"Star1"} mobile={isMobile} />
+              <Project
+                href={s.url}
+                src={s.img}
+                name={s.name}
+                key={index}
+                description={s.description}
+                customClass="special-logo"
+                isSpecial={s.isSpecial}
+              />
+              <SubtitleLink href={s.url} target="_blank" rel="noopener">
+                <SubtitleBox mobile={isMobile}>
+                  <Tier1>
+                    <StyledInterSemiBold mobile={isMobile}>
+                      {s.name}
+                    </StyledInterSemiBold>
+                    <StyledInter>
+                      Project {s.name}
+                      <br />
+                      {s.description}
+                    </StyledInter>
+                  </Tier1>
+                </SubtitleBox>
+              </SubtitleLink>
+            </Column>
+          ))}
+        </Row>
+        <Row mobile={isMobile}>
+          {projectData.tier2.map((s, index) => (
+            <Column key={index} mobile={isMobile}>
+              <Project
+                href={s.url}
+                src={s.img}
+                name={s.name}
+                key={index}
+                customClass="special-logo"
+                description={s.description}
+                isSpecial={s.isSpecial}
+              />
+              <SubtitleLink href={s.url} target="_blank" rel="noopener">
+                <SubtitleBox mobile={isMobile}>
+                  <Tier2 mobile={isMobile}>
+                    <StyledInterSemiBold mobile={isMobile}>
+                      {s.name}
+                    </StyledInterSemiBold>
+                    <StyledInter>{s.description}</StyledInter>
+                  </Tier2>
+                </SubtitleBox>
+              </SubtitleLink>
+            </Column>
+          ))}
+        </Row>
+      </ProjectsGrid>
+    </Wrapper>
+  );
+};
+
+export default PastProjects;