William landing page

client/src/pages/Initial/LandingPage.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 
 // F!rosh 2T4 Landing Pages
 import { AshLanding } from './AshLanding/AshLanding';
+import { WilliamLanding } from './WilliamLanding/WilliamLanding';
 import { AlissaLanding } from './AlissaLanding/AlissaLanding';
 import { AsmitaLanding } from './AsmitaLanding/AsmitaLanding';
 
@@ -14,6 +15,11 @@ const landingPages = [
     key: 1,
     component: <AlissaLanding />,
   },
+  {
+    key: 1,
+    component: <WilliamLanding />,
+    year: '2T4',
+  },
 ];
 
 function randomNumber(min, max) {
@@ -37,6 +43,12 @@ export const LandingPage = () => {
     setPageIndex(JSON.parse(randIdx));
   }, []);
 
+  useEffect(() => {
+    console.log('pageIndex updated:', pageIndex);
+  }, [pageIndex]);
+
+  console.log('Current pageIndex:', pageIndex);
+
   return (
     <>
       {landingPages.map((item) => {

client/src/pages/Initial/WilliamLanding/WilliamLanding.jsx

@@ -0,0 +1,89 @@
+import React, { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import './WilliamLanding.scss';
+import InstagramIcon from '../../../assets/social/instagram-brands-dark-purple.svg';
+
+const InstagramButton = ({ link, text }) => (
+  <a href={link} target="_blank" rel="noreferrer" className="jw-no-link-style">
+    <div className="jw-button">
+      <img src={InstagramIcon} alt="Instagram Icon" className="jw-button-icon" />
+      <span className="jw-button-text">{text}</span>
+    </div>
+  </a>
+);
+
+InstagramButton.propTypes = {
+  link: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+};
+
+const WilliamLanding = () => {
+  const calculateTimeLeft = () => {
+    const difference = +new Date('2024-09-01') - +new Date();
+    let timeLeft = {};
+
+    if (difference > 0) {
+      timeLeft = {
+        days: Math.floor(difference / (1000 * 60 * 60 * 24)),
+        hours: Math.floor((difference / (1000 * 60 * 60)) % 24),
+        minutes: Math.floor((difference / 1000 / 60) % 60),
+        seconds: Math.floor((difference / 1000) % 60),
+      };
+    }
+
+    return timeLeft;
+  };
+
+  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft());
+
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      setTimeLeft(calculateTimeLeft());
+    }, 1000);
+    return () => clearTimeout(timer);
+  });
+
+  const timerComponents = [];
+  Object.keys(timeLeft).forEach((interval) => {
+    if (!timeLeft[interval]) return;
+    timerComponents.push(
+      <span key={interval} className="jw-timer-interval">
+        {timeLeft[interval]} {interval}{' '}
+      </span>,
+    );
+  });
+
+  return (
+    <div className="jw-landing-page">
+      <div className="jw-container">
+        <div className="jw-title-section jw-animate-fadeIn">
+          <h1 className="jw-title-text">COMING SOON!</h1>
+          <p className="jw-subtitle">
+            Hey F!rosh! Our website is currently under construction. Check back soon!
+          </p>
+          <div className="jw-countdown">
+            {timerComponents.length ? timerComponents : <span>Time is up!</span>}
+          </div>
+          <p className="jw-stay-tuned">Stay Tuned</p>
+        </div>
+        <div className="jw-info-section">
+          <div className="jw-button-container">
+            <InstagramButton
+              link="https://www.instagram.com/froshweek/"
+              text="Follow @froshweek for updates"
+            />
+            <InstagramButton
+              link="https://www.instagram.com/froshnomore/"
+              text="Follow @froshnomore to get involved"
+            />
+          </div>
+        </div>
+        <div className="jw-footer-section">
+          <h2 className="jw-footer-text">Made with 💜 by the F!rosh Week 2T4 Tech Team</h2>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export { WilliamLanding };

client/src/pages/Initial/WilliamLanding/WilliamLanding.scss

@@ -0,0 +1,174 @@
+// Variables
+$primary-purple: #6a1b9a;
+$secondary-purple: #b39ddb;
+$dark-purple: #4527a0;
+$highlight-yellow: #ffeb3b;
+$white: #ffffff;
+$muted-purple: #9575cd;
+
+.jw-landing-page {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  background: linear-gradient(135deg, $primary-purple, $secondary-purple);
+  color: $white;
+  text-align: center;
+  padding: 20px;
+  overflow: hidden;
+  animation: jw-enchantedBackground 10s infinite alternate;
+}
+
+.jw-container {
+  max-width: 1200px;
+  width: 100%;
+}
+
+.jw-title-section {
+  margin-bottom: 50px;
+}
+
+.jw-title-text {
+  font-size: 64px;
+  font-weight: bold;
+  margin-bottom: 20px;
+  text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
+}
+
+.jw-subtitle {
+  font-size: 20px;
+  margin-bottom: 30px;
+}
+
+.jw-countdown {
+  font-size: 24px;
+  margin-bottom: 20px;
+  color: $highlight-yellow;
+}
+
+.jw-stay-tuned {
+  font-size: 24px;
+  margin-top: 10px;
+  color: $white;
+  text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
+  animation: jw-glow 1.5s infinite alternate;
+}
+
+.jw-info-section {
+  margin-bottom: 50px;
+}
+
+.jw-button-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 20px;
+}
+
+.jw-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 250px;
+  padding: 15px;
+  background: $white;
+  color: $primary-purple;
+  border-radius: 50px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  transition: background 0.3s, transform 0.3s;
+
+  &:hover {
+    background: $highlight-yellow;
+    color: $dark-purple;
+    transform: translateY(-5px);
+  }
+
+  .jw-button-icon {
+    width: 24px;
+    height: 24px;
+    margin-right: 10px;
+  }
+
+  .jw-button-text {
+    font-size: 16px;
+    font-weight: bold;
+  }
+}
+
+.jw-footer-section {
+  position: absolute;
+  bottom: 20px;
+  width: 100%;
+  text-align: center;
+  color: $white;
+}
+
+.jw-footer-text {
+  font-size: 18px;
+  font-weight: bold;
+}
+
+// Animations
+@keyframes jw-fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes jw-glow {
+  0% {
+    text-shadow: 0 0 5px $highlight-yellow, 0 0 10px $highlight-yellow, 0 0 15px $highlight-yellow,
+      0 0 20px $highlight-yellow;
+  }
+  100% {
+    text-shadow: 0 0 10px $highlight-yellow, 0 0 20px $highlight-yellow, 0 0 30px $highlight-yellow,
+      0 0 40px $highlight-yellow;
+  }
+}
+
+@keyframes jw-enchantedBackground {
+  0% {
+    background-position: 0% 50%;
+  }
+  100% {
+    background-position: 100% 50%;
+  }
+}
+
+.jw-animate-fadeIn {
+  animation: jw-fadeIn 1s ease-in-out;
+}
+
+// Mobile View
+@media screen and (max-width: 768px) {
+  .jw-title-text {
+    font-size: 36px;
+  }
+
+  .jw-subtitle {
+    font-size: 16px;
+  }
+
+  .jw-countdown {
+    font-size: 18px;
+  }
+
+  .jw-stay-tuned {
+    font-size: 18px;
+  }
+
+  .jw-button {
+    width: 200px;
+    padding: 10px;
+    .jw-button-text {
+      font-size: 14px;
+    }
+  }
+
+  .jw-footer-text {
+    font-size: 14px;
+  }
+}