Alissa landing page finished

client/src/pages/Initial/AlissaLanding/AlissaLanding.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './AlissaLanding.scss';
+
+import InstagramIcon from '../../../assets/social/instagram_icon.png';
+
+const InstagramButton = ({ link, text }) => {
+  return (
+    <a href={link} target="_blank" rel="noreferrer" className="no-link-style">
+      <div className="button">
+        <img src={InstagramIcon} alt="Instagram Icon" className="button-icon" />
+        <span className="button-text">{text}</span>
+      </div>
+    </a>
+  );
+};
+
+InstagramButton.propTypes = {
+  link: PropTypes.string.isRequired,
+  text: PropTypes.string.isRequired,
+};
+
+const AlissaLanding = () => {
+  return (
+    <div className="coming-soon-page">
+      <div className="ax-container">
+        <div className="ax-title">
+          <h1 className="title-text">COMING SOON!</h1>
+          <p className="subtitle">
+            Hey F!rosh! Our website is currently under construction. <br></br>Check back soon!
+          </p>
+        </div>
+        <div className="ax-instagram">
+          <br></br>
+          <div className="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>
+      <div className="ax-footer">
+        <h1 className="footer-text">Made with 💜 by the F!rosh Week 2T4 Tech Team</h1>
+      </div>
+    </div>
+  );
+};
+
+export { AlissaLanding };

client/src/pages/Initial/AlissaLanding/AlissaLanding.scss

@@ -0,0 +1,146 @@
+// Define color variables for the theme
+$primary-color: #7b1fa2; // Deep purple
+$secondary-color: #ffd700; // Gold yellow
+$background-color: #f3e5f5; // Light lavender
+$text-color: #ffffff; // White
+$subtitle-color: #ffeb3b; // Bright yellow
+$footer-background: #4a148c; // Darker purple
+$button-color: #ffffff; // White
+$button-text-color: #7b1fa2; // Deep purple
+
+// Mixin for box shadow
+@mixin enchanted-shadow {
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+}
+
+// Animation for falling stars
+@keyframes falling-stars {
+  0% {
+    transform: translateY(0) translateX(0);
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(100vh) translateX(50px);
+    opacity: 0;
+  }
+}
+
+// General styles
+.coming-soon-page {
+  background-color: $background-color;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column; // Added to align footer at the bottom
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  color: $text-color;
+  font-family: 'Arial', sans-serif;
+  overflow: hidden;
+  position: relative;
+
+  // Falling stars effect
+  &:before,
+  &:after {
+    content: '';
+    position: absolute;
+    top: -10px;
+    width: 2px;
+    height: 10px;
+    background: $secondary-color;
+    box-shadow: 50px 100px $secondary-color, 100px 200px $secondary-color,
+      150px 300px $secondary-color, 200px 400px $secondary-color, 250px 500px $secondary-color,
+      300px 600px $secondary-color, 350px 700px $secondary-color, 400px 800px $secondary-color,
+      450px 900px $secondary-color, 500px 1000px $secondary-color;
+    animation: falling-stars 5s linear infinite;
+  }
+  &:after {
+    left: 50%;
+    top: -10px;
+    width: 1px;
+    height: 5px;
+    animation-duration: 7s;
+    box-shadow: -50px 150px $secondary-color, -100px 250px $secondary-color,
+      -150px 350px $secondary-color, -200px 450px $secondary-color, -250px 550px $secondary-color,
+      -300px 650px $secondary-color, -350px 750px $secondary-color, -400px 850px $secondary-color,
+      -450px 950px $secondary-color, -500px 1050px $secondary-color;
+  }
+}
+
+.ax-container {
+  background: linear-gradient(
+    180deg,
+    var(--purple) 0%,
+    var(--light-purple) 50%,
+    var(--purple) 100%
+  ); // Gradient background
+  border-radius: 15px;
+  padding: 120px;
+  width: 90%; // Increased width
+  max-width: 900px; // Increased max width
+  @include enchanted-shadow; // Shadow effect
+}
+
+.ax-title {
+  .title-text {
+    font-size: 4.5rem;
+    margin-bottom: 20px;
+  }
+
+  .subtitle {
+    font-size: 1.2rem;
+    color: $subtitle-color;
+    margin-bottom: 30px;
+  }
+}
+
+.ax-instagram {
+  .button-container {
+    display: flex;
+    justify-content: center;
+    gap: 20px;
+
+    .button {
+      background-color: $button-color;
+      color: $button-text-color;
+      padding: 10px 20px;
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
+      @include enchanted-shadow;
+      text-decoration: none;
+
+      .button-icon {
+        margin-right: 10px;
+        width: 24px;
+        height: 24px;
+      }
+
+      .button-text {
+        font-size: 1rem;
+      }
+
+      &:hover {
+        background-color: darken($button-color, 10%);
+      }
+    }
+  }
+}
+
+.ax-footer {
+  position: absolute; // Positioned absolutely
+  bottom: 0; // At the bottom
+  left: 50%; // Center horizontally
+  transform: translateX(-50%); // Adjust to be perfectly centered
+  background-color: $footer-background;
+  padding: 30px;
+  border-radius: 10px;
+  font-size: 1rem;
+  color: $text-color;
+  width: 100%;
+  text-align: center;
+
+  .footer-text {
+    margin: 0;
+  }
+}

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 { AlissaLanding } from './AlissaLanding/AlissaLanding';
 import { AsmitaLanding } from './AsmitaLanding/AsmitaLanding';
 
 const landingPages = [
@@ -11,7 +12,7 @@ const landingPages = [
   },
   {
     key: 1,
-    component: <AshLanding />,
+    component: <AlissaLanding />,
   },
 ];