Fix overscroll behavior and update carousel layout

src/pages/home/AnnouncementsCard.css

@@ -1,52 +1,57 @@
-.container {
+.announcement-container {
   @apply
     flex
-    flex-row
-    max-w-full
-    h-[30vh]
-    lg:h-[30vh]
+    flex-col
+    lg:flex-row
+    h-[20rem]
+    lg:h-[16rem]
+    w-full
+    lg:w-[24rem]
+    xl:w-[28rem]
     items-center
-    justify-center
-    md:justify-around
-    px-2
-    md:gap-2
-  ;
+    justify-start
+    lg:justify-around
+    px-4
 }
 
-.container>img {
+.announcement-container>img {
   @apply
-      object-cover
-      p-4
-      w-32
-      md:w-48
-      max-h-[30vh]
-      rounded-3xl
+    object-cover
+    p-4
+    max-h-40
+    min-w-40
+    lg:max-h-44
+    lg:min-w-44
+    rounded-3xl
   ;
 }
 
 .text-container {
   @apply
-      flex
-      flex-col
-      lg:p-4
-      max-h-full
+    flex
+    flex-col
+    h-fit
+    max-w-48
+    lg:max-w-[16rem]
+    p-2
+    lg:pr-4
   ;
 }
 
 .text-container>h2 {
   @apply
     font-bold
     text-sm
-    md:text-xl
+    lg:text-xl
   ;
 }
 
 .text-container>h3 {
   @apply
     font-subheading
     text-xs
-    md:text-sm
-    pb-4
+    lg:text-sm
+    pb-2
   ;
 }
 
@@ -55,7 +60,7 @@
     line-clamp-2
     font-body
     text-xs
-    md:text-sm
+    lg:text-sm
   ;
 }
 
@@ -66,7 +71,7 @@
     font-subheading
     p-2
     text-xs
-    md:text-base
+    lg:text-base
   ;
 }
 

src/pages/home/AnnouncementsCard.tsx

@@ -11,22 +11,23 @@ interface AnnouncementsCardProps {
   link: string;
 }
 
-export default function AnnouncementsCard(props: AnnouncementsCardProps) {
-  const content = (
-    <div className='container'>
-      <img src={props.imgSrc}></img>
-      <div className='text-container'>
-        <h2>{props.title}</h2>
-        <h3>{props.date}</h3>
-        <p>{props.desc}</p>
-        <h4>
-          <Link to={props.link}>Read More</Link>
-        </h4>
-      </div>
-    </div>
-  );
-
+function AnnouncementsCard(props: AnnouncementsCardProps) {
   return (
-    <WindowCard content={content}></WindowCard>
+    <WindowCard content={
+      // TODO: flip flex dir if small
+      <div className='announcement-container'>
+        <img src={props.imgSrc}></img>
+        <div className='text-container'>
+          <h2>{props.title}</h2>
+          <h3>{props.date}</h3>
+          <p>{props.desc}</p>
+          <h4>
+            <Link to={props.link}>Read More</Link>
+          </h4>
+        </div>
+      </div>
+    }></WindowCard>
   );
 }
+
+export default AnnouncementsCard;

src/pages/home/Carousel.css

@@ -1,8 +1,14 @@
 .item {
-    @apply
-      p-8
-      md:p-14
-    ;
+  @apply
+    py-8
+    lg:py-12
+  ;
+}
+
+.item>.window {
+  @apply
+    m-auto
+  ;
 }
 
 .slick-arrow.slick-next,
@@ -11,29 +17,30 @@
     flex
     justify-center
     items-center
-    h-24
-    w-24
+    h-20
+    w-20
     z-10
-    max-w-full
   ;
 }
 
 .slick-prev::before,.slick-next::before{
-   display:none;
+  @apply
+    hidden
+  ;
 }
 
 .arrows {
-    @apply
-      h-80
-      w-80
-      text-primary
-      opacity-60
-      z-10
-    ;
+  @apply
+    h-80
+    w-80
+    text-primary
+    opacity-60
+    z-10
+  ;
 }
 
 .arrows:hover {
-    @apply
-      opacity-100
-    ;
+  @apply
+    opacity-100
+  ;
 }

src/pages/home/Carousel.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
-import Slider from 'react-slick';
-import AnnouncementsCard from './AnnouncementsCard';
-import './Carousel.css';
 import { GoChevronLeft, GoChevronRight } from 'react-icons/go';
+import Slider, { CustomArrowProps, Settings } from 'react-slick';
+import resolveConfig from 'tailwindcss/resolveConfig';
+import tailwindConfig from '../../../tailwind.config.js';
+import AnnouncementsCard from './AnnouncementsCard';
 import announcements from './announcements.json' with {type: 'json'};
+import './Carousel.css';
 
-
-function NextArrow(props) {
-  const { className, style, onClick } = props;
+function NextArrow(props: CustomArrowProps) {
+  const { className, onClick } = props;
   return (
     <div
       className={className}
@@ -17,64 +18,70 @@ function NextArrow(props) {
   );
 }
 
-function PrevArrow(props) {
-  const { className, style, onClick } = props;
+function PrevArrow(props: CustomArrowProps) {
+  const { className, onClick } = props;
   return (
     <div
       className={className}
       onClick={onClick}>
-      <GoChevronLeft className='arrows'/></div>
+      <GoChevronLeft className='arrows' />
+    </div>
   );
 }
 
-
-export default function Carousel() {
-  const settings = {
+function Carousel() {
+  const breakpoints = resolveConfig(tailwindConfig).theme.screens;
+  const settings: Settings = {
     dots: true,
     infinite: true,
     speed: 500,
     slidesToShow: 2,
     slidesToScroll: 1,
+    centerMode: true,
     nextArrow: <NextArrow />,
     prevArrow: <PrevArrow />,
     responsive: [
       {
-        breakpoint: 1200,
+        breakpoint: parseInt(breakpoints['md'].replace('px', '')),
         settings: {
           slidesToShow: 1,
           slidesToScroll: 1,
           initialSlide: 1,
+          centerMode: true,
+          arrows: false,
         },
       },
       {
-        breakpoint: 800,
+        breakpoint: parseInt(breakpoints['lg'].replace('px', '')),
         settings: {
-          slidesToShow: 1,
+          slidesToShow: 2,
           slidesToScroll: 1,
           initialSlide: 1,
-          nextArrow: false,
-          prevArrow: false,
+          arrows: false,
         },
       },
     ],
   };
 
-
   return (
     <div className='slider-container'>
       <Slider {...settings}>
-        {announcements.map((announcement, index) => (
-          <div className='item' key={index}>
-            <AnnouncementsCard
-              title={announcement.title}
-              desc={announcement.desc}
-              date={announcement.date}
-              imgSrc={announcement.imgSrc}
-              link={announcement.link}
-            />
-          </div>
-        ))}
+        {
+          announcements.map((announcement, index) => (
+            <div className='item' key={index}>
+              <AnnouncementsCard
+                title={announcement.title}
+                desc={announcement.desc}
+                date={announcement.date}
+                imgSrc={announcement.imgSrc}
+                link={announcement.link}
+              />
+            </div>
+          ))
+        }
       </Slider>
     </div>
   );
 }
+
+export default Carousel;

src/pages/home/announcements.json

@@ -1,30 +1,30 @@
 [
     {
-        "title": "Freshman Social Camp (FSC)",
+        "title": "Freshman Social Camp",
         "desc": "FSC is crafted to kickstart your university journey with enduring friendships and unforgettable experiences. Engage in a variety of physical and intellectual games, participate in team bonding exercises, and compete for exciting team and individual prizes. You will also have the opportunity to attend the beach finale event Bash together with your new friends, solidifying your friendships.",
-        "date": "19th June - 22nd June 2024",
-        "imgSrc": "announcements/fsc.jpg",
-        "link": "./events/freshman_social_camp"
+        "date": "19/06/24 - 22/06/24",
+        "link": "./events/freshman_social_camp",
+        "imgSrc": "/announcements/fsc.jpg"
     },
     {
-        "title": "Freshman Orientation Week (FOW)",
+        "title": "Freshman Orientation Week",
         "desc": "FOW is a 4-day physical orientation camp where seniors help freshmen adapt to different aspects of university life through preparatory talks and team-building activities. Forge lasting friendships as you navigate campus resources and academic challenges together. Look forward to strategic team games that develop you both intellectually and physically.",
-        "date": "24th July - 27th July 2024",
-        "imgSrc": "announcements/fow.jpg",
-        "link": "./events/freshman_orientation_camp"
+        "date": "24/07/24 - 27/07/24",
+        "link": "./events/freshman_orientation_camp",
+        "imgSrc": "/announcements/fow.jpg"
     },
     {
-        "title": "Freshman Finale Camp (FFC)",
+        "title": "Freshman Finale Camp",
         "desc": "FFC is a 3-day physical summer camp, perfectly tailored for international students gearing up for matriculation closer to August. The camp offers an array of theme-based activities such as flag-building and exhilarating house face-offs. Engage in friendly competition alongside your housemates, strategizing to earn glory for your elemental faction in a series of thrilling challenges. End the camp on a high note with its campfire and barbecue finale under the stars.",
-        "date": "5th August - 7th August 2024",
-        "imgSrc": "announcements/ffc.jpg",
-        "link": "./events/freshman_finale_camp"
+        "date": "05/08/24 - 07/08/24",
+        "link": "./events/freshman_finale_camp",
+        "imgSrc": "/announcements/ffc.jpg"
     },
     {
         "title": "Computing Bash",
-        "desc": "FFC is a 3-day physical summer camp, perfectly tailored for international students gearing up for matriculation closer to August. The camp offers an array of theme-based activities such as flag-building and exhilarating house face-offs. Engage in friendly competition alongside your housemates, strategizing to earn glory for your elemental faction in a series of thrilling challenges. End the camp on a high note with its campfire and barbecue finale under the stars.",
-        "date": "16th August 2024",
-        "imgSrc": "announcements/bash.jpg",
-        "link": "./events/computing_bash"
+        "desc": "A fun-filled beach finale event where freshmen and seniors come together to wrap up the entire orientation experience with a night of performances, games, and food. Held at Sentosa Beach, Bash 2024 offers an electrifying atmosphere with DJ sets, inflatable obstacle courses, and much more.",
+        "date": "16/08/24",
+        "link": "./events/computing_bash",
+        "imgSrc": "/announcements/bash.jpg"
     }
 ]

src/pages/home/index.css

@@ -16,9 +16,11 @@ section {
 
 .latest-announcements {
   @apply
-  flex
-  flex-col
-  h-[80vh]
+    flex
+    flex-col
+    h-fit
+    md:min-h-[80vh]
+  ;
 }
 
 .section-header {
@@ -55,10 +57,12 @@ section {
 
 .carousel-container {
   @apply
-    px-0
-    md:px-6
-    lg:px-20
-    pb-4
+    h-fit
+    md:px-8
+    xl:px-16
+    2xl:px-32
+    pb-16
+    2xl:pb-8
   ;
 }