Merging design with main branch

.eslintrc.json

@@ -7,7 +7,6 @@
   "extends": [
     "next/core-web-vitals",
     "plugin:react/recommended",
-    "airbnb",
     "plugin:security/recommended",
     "plugin:import/typescript",
     "prettier"
@@ -25,7 +24,7 @@
       "version": "detect"
     }
   },
-  "plugins": ["react", "@typescript-eslint", "security", "unused-imports", "prettier"],
+  "plugins": ["unused-imports", "react", "@typescript-eslint", "security", "prettier"],
   "rules": {
     "import/extensions": [
       "error",

README.md

@@ -1,5 +1,7 @@
 This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 
+Deployed on vercel to [rh-superapp.vercel.app](rh-superapp.vercel.app).
+
 ## Getting Started
 
 First, run the development server:

components/Carousel.tsx

@@ -0,0 +1,80 @@
+import React, { useState, useEffect } from 'react'
+import Slider from 'react-styled-carousel'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import Image from 'next/image'
+
+const responsive = [
+  { breakPoint: 1580, cardsToShow: 5 }, // this will be applied if screen size is greater than 1280px. cardsToShow will become 4.
+  { breakPoint: 800, cardsToShow: 4 },
+  { breakPoint: 640, cardsToShow: 3 },
+]
+
+const DotsWrapper = styled.ul`
+  display: block;
+  margin: 0 auto;
+  list-style: none;
+  text-align: center;
+  padding: 0px;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 20px;
+  width: fit-content;
+`
+
+const ImageContainer = styled.div<{ $height?: number }>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 10px;
+  height: ${(props) => props.$height?.toString() + 'px' || 'auto'};
+  width: 300px;
+  position: relative;
+`
+
+const Carousel = ({ imgArr }) => {
+  const [maxImageWidth, setMaxImageWidth] = useState(0)
+  const [imageHeight, setImageHeight] = useState(0)
+
+  const imageStyle = {
+    padding: '10px',
+    maxWidth: `${maxImageWidth}px`,
+  }
+
+  useEffect(() => {
+    const updateImageDimensions = () => {
+      setMaxImageWidth(window.innerWidth / 4)
+      setImageHeight(window.innerWidth / 6)
+    }
+
+    updateImageDimensions()
+
+    window.addEventListener('resize', updateImageDimensions)
+
+    return () => {
+      window.removeEventListener('resize', updateImageDimensions)
+    }
+  }, [])
+
+  return (
+    <Slider
+      responsive={responsive}
+      showDots={true}
+      autoSlide={3000}
+      margin={'0px 15px'}
+      DotsWrapper={DotsWrapper}
+    >
+      {imgArr &&
+        imgArr.map((item) => (
+          <ImageContainer key={item.id} $height={imageHeight}>
+            <Image src={item.src} layout="fill" objectFit="contain" alt="" style={imageStyle} />
+          </ImageContainer>
+        ))}
+    </Slider>
+  )
+}
+
+Carousel.propTypes = {
+  imgArr: PropTypes.array.isRequired,
+}
+
+export default Carousel

components/LandingItems.tsx

@@ -88,10 +88,7 @@ const EventContext = createContext<EventContextInterface>(defaultEventContext)
  * @returns <ParallaxBanner> component
  */
 export const ParallaxHero = () => (
-  <ParallaxBanner
-    layers={[{ image: 'https://picsum.photos/2560/1440', speed: -30 }]}
-    style={{ aspectRatio: '2 / 1' }}
-  />
+  <ParallaxBanner layers={[{ image: '/assets/sample_photos/photo1.jpg', speed: -30 }]} />
 )
 
 /**
@@ -135,6 +132,7 @@ const EventList = () => {
     <EventContainer>
       {dummyData.map((item: Event) => (
         <EventItem
+          key={item.id.toString()}
           id={item.id.toString()}
           onClick={() => {
             alert('put modal here pls')

components/NavBar.tsx

@@ -1,6 +1,7 @@
 import { useRouter } from 'next/router'
 import { useEffect, useState } from 'react'
 import styled from 'styled-components'
+import Image from 'next/image'
 
 import { navTitles } from '@/texts/common/navTitles'
 import NavItem from './NavItem'
@@ -14,13 +15,11 @@ const MainContainer = styled.div<{ isVisible: boolean }>`
   ${(props) => props.isVisible && 'position: fixed;'}
   top: ${(props) => (props.isVisible ? 0 : `-${NAV_BAR_HEIGHT}`)};
   transition: top 0.3s;
-  background-color: ${(props) => `${props.theme.palette.common.black}`};
 `
 
 const NavItemContainer = styled.div`
   height: ${NAV_BAR_HEIGHT};
   display: flex;
-  margin-left: 3rem;
 
   a + a {
     margin-left: 2rem;
@@ -31,6 +30,18 @@ const NavBarSpace = styled.div<{ isVisible: boolean }>`
   height: ${(props) => (props.isVisible ? NAV_BAR_HEIGHT : '0')};
 `
 
+const ImageContainer = styled.div`
+  height: ${NAV_BAR_HEIGHT};
+  display: flex;
+  margin-left: 1rem;
+  margin-top: 1rem;
+  margin-right: 2rem;
+
+  a + a {
+    margin-left: 2rem;
+  }
+`
+
 function NavBar() {
   const router = useRouter()
   const pageFilePath = router.pathname
@@ -53,6 +64,9 @@ function NavBar() {
     <>
       <MainContainer isVisible={isVisible}>
         <NavItemContainer>
+          <ImageContainer>
+            <Image src="/assets/rh-logo.png" width={50} height={50} alt="RH logo" />
+          </ImageContainer>
           {navTitles.map((item, index) => (
             <NavItem
               key={index}

components/NavItem.tsx

@@ -17,7 +17,7 @@ const activeCss = css`
 `
 
 const inactiveCss = css`
-  color: ${(props) => props.theme.palette.common.white};
+  color: ${(props) => props.theme.palette.common.black};
   &:hover {
     font-size: 130%;
   }

components/PageNavBar.tsx

@@ -0,0 +1,54 @@
+import { Button } from 'antd'
+import styled from 'styled-components'
+
+export const NAV_BAR_HEIGHT = '4rem'
+
+const MainContainer = styled.div`
+  width: 100vw;
+  height: ${NAV_BAR_HEIGHT};
+  margin: 10px;
+  display: flex;
+  flex-direction: row;
+  bottom: 10;
+  justify-content: space-evenly;
+`
+
+type Props = {
+  navigateToNext: () => void
+  navigateToPrev: () => void
+  isPrevVisible: boolean
+  isNextVisible: boolean
+}
+
+const PageNavBar = (props: Props) => (
+  <MainContainer>
+    {
+      <Button
+        style={{ background: '#ab7865' }}
+        type="primary"
+        title="Previous"
+        onClick={() => {
+          props.navigateToPrev()
+        }}
+        disabled={!props.isPrevVisible}
+      >
+        Previous
+      </Button>
+    }
+    {
+      <Button
+        style={{ background: '#ab7865' }}
+        type="primary"
+        title="Next"
+        onClick={() => {
+          props.navigateToNext()
+        }}
+        disabled={!props.isNextVisible}
+      >
+        Next
+      </Button>
+    }
+  </MainContainer>
+)
+
+export default PageNavBar

components/sample-rhdevs-website/PageSection.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
 import Image, { StaticImageData } from 'next/image'
+import Link from 'next/link'
 import styled, { keyframes, FontType, useTheme } from 'styled-components'
 import { fontTypeCss } from '@/styles/sample-rhdevs-website/index.styled'
-
-import imgPlaceholder from '@/assets/sample-rhdevs-website/noimg.png'
+import imgPlaceholder from '@/public/assets/noimg.png'
+import { stringToSlug } from '@/utils/stringToSlug'
 
 const fadeInUp = keyframes`
     from {
@@ -25,6 +26,7 @@ export const MainContainer = styled.div<{
   animation-name: ${fadeInUp};
   display: grid;
   grid-template-rows: minmax(0, 1fr);
+  text-align: center;
   grid-template-columns: ${(props) => props.imgPosition && 'auto'} auto;
   grid-template-areas: '${(props) => props.imgPosition === 'left' && 'image'} text ${(props) =>
     props.imgPosition === 'right' && 'image'}';
@@ -43,7 +45,7 @@ export const MainContainer = styled.div<{
   }
 `
 
-export const ImageContainer = styled(Image)`
+export const ImageContainer = styled.div`
   object-fit: contain;
   max-height: 350px;
   max-width: 350px;
@@ -63,19 +65,36 @@ export const TextContainer = styled.div`
   gap: 1rem;
 `
 
-export const Title = styled.h2<{ events?: boolean; fontType: FontType }>`
-  color: ${(props) => (props.events ? 'white' : props.theme.palette.primary)};
+export const Title = styled.h1<{ events?: boolean; fontType: FontType }>`
+  color: ${(props) => (props.events ? 'Black' : props.theme.palette.primary)};
   ${fontTypeCss}
   margin-block: 0;
+  &:hover {
+    color: ${(props) => (props.events ? '#555' : props.theme.palette.secondary)};
+  }
+  font-family: 'BryndanWrite';
 `
 
 export const Body = styled.p<{ events?: boolean; fontType: FontType }>`
-  ${(props) => `color: ${props.theme.palette.common.gray};`}
-  ${fontTypeCss}
+  ${(props) => `color: ${props.theme.palette.common.black};`}
   font-size: 1.1rem;
   white-space: pre-wrap;
   margin: 0;
   text-align: justify;
+  font-family: 'BryndanWrite';
+`
+
+const ViewPhotosContainer = styled.div`
+  border-radius: 1rem; /* Similar to "rounded-m" in Tailwind CSS */
+  background-color: #ffffff; /* Add a background color */
+  padding: 0.2 rem; /* Add padding for spacing */
+  width: 100%;
+  margin-top: 20px;
+`
+const ViewPhotoLink = styled.p`
+  color: #000000;
+  font-family: 'BryndanWrite';
+  break-word: break-all;
 `
 
 type Props = {
@@ -84,6 +103,8 @@ type Props = {
   imgPosition?: 'left' | 'right' | undefined
   imageSrc?: StaticImageData
   events?: boolean
+  signUpLink?: string | null
+  photoLink?: string | null
 } & typeof defaultProps
 
 const defaultProps: {
@@ -103,15 +124,55 @@ function PageSectionComponent(props: Props) {
   return (
     <MainContainer imgPosition={props.imgPosition}>
       {props.imgPosition && (
-        <ImageContainer src={props.imageSrc ?? imgPlaceholder} alt={props.title} />
+        <ImageContainer>
+          <Image
+            src={props.imageSrc?.src ?? imgPlaceholder}
+            height={300}
+            width={300}
+            alt={props.title}
+            // priority={false}
+          />
+        </ImageContainer>
       )}
       <TextContainer>
-        <Title fontType={sectionTitle} events={props.events}>
-          {props.title}
-        </Title>
+        <Link href={'events/' + stringToSlug(props.title)} style={{ textDecoration: 'none' }}>
+          <Title fontType={sectionTitle} events={props.events}>
+            {props.title}
+          </Title>
+        </Link>
+
         <Body fontType={sectionText} events={props.events}>
           {props.description}
         </Body>
+        <ViewPhotosContainer>
+          <ViewPhotoLink>
+            {props.photoLink ? (
+              <ViewPhotosContainer>
+                <Link
+                  prefetch
+                  passHref
+                  href={props.photoLink || '/404'}
+                  style={{ textDecoration: 'none' }}
+                >
+                  <ViewPhotoLink>photo link: {props.photoLink}</ViewPhotoLink>
+                </Link>
+              </ViewPhotosContainer>
+            ) : props.signUpLink ? (
+              <ViewPhotosContainer>
+                <Link
+                  prefetch
+                  passHref
+                  href={props.signUpLink || '/404'}
+                  style={{ textDecoration: 'none' }}
+                >
+                  <ViewPhotoLink>sign-up link: {props.signUpLink}</ViewPhotoLink>
+                </Link>
+              </ViewPhotosContainer>
+            ) : (
+              'sign-up link: NA'
+            )}
+          </ViewPhotoLink>
+        </ViewPhotosContainer>
       </TextContainer>
     </MainContainer>
   )