add the chic tech temp modal (#306)

Co-authored-by: Saloni Vaishnav <[email protected]>
IllinoisWCS · Sep 11, 2024 · a0e9b7a · a0e9b7a
1 parent 0c1971e
commit a0e9b7a
Show file tree

Hide file tree

Showing 4 changed files with 83 additions and 22 deletions.
diff --git a/src/pages/index.js b/src/pages/index.js
@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Head from 'next/head';
 import Image from 'next/image';
 import { Inter } from 'next/font/google';
+import Link from 'next/link';
 
 import AboutUsSection from '../sections/AboutUsSection';
 import ComputerWindow from '../components/general/ComputerWindowComponent';
@@ -14,6 +15,8 @@ import styles from '@/styles/pages/Home.module.css';
 const inter = Inter({ subsets: ['latin'] });
 
 export default function Home() {
+  const [showTempModal, setShowTempModal] = useState(true);
+
   return (
     <>
       <Head>
@@ -77,6 +80,31 @@ export default function Home() {
       </Head>
 
       <main className={`${styles.main} ${inter.className}`}>
+        {/* temporary for chic tech 2024: */}
+        {showTempModal && (
+          <ComputerWindow className={styles.tempModalContainer}>
+            <div className={styles.tempModal}>
+              <p>Interested in attending ChicTech 2024?</p>
+              <div className={styles.tempModalButtonContainer}>
+                <Link
+                  href="https://docs.google.com/document/d/1EPZ560SkJqddTxeHNtoeSmiy8rWYRWTMnXCYQOhYF18/edit"
+                  className={styles.tempModalButton}
+                >
+                  Learn More
+                </Link>
+                <button
+                  type="button"
+                  className={styles.tempModalButton}
+                  onClick={() => setShowTempModal(false)}
+                >
+                  Dismiss
+                </button>
+              </div>
+            </div>
+          </ComputerWindow>
+        )}
+        {/* */}
+
         <h1 className={styles.title}>Illinois Women in Computer Science</h1>
         <div className={`${styles.windowContainer}`}>
           <div className={`${styles.windowGrid}`}>

diff --git a/src/sections/Navbar.js b/src/sections/Navbar.js
@@ -56,19 +56,10 @@ export default function WCSNavbar() {
       <div
         className={`${styles.linksContainer} ${isMenuOpen ? styles.show : ''}`}
       >
-        <NavLink
-          href="https://points.illinoiswcs.org/"
-          label="points"
-        />
+        <NavLink href="https://points.illinoiswcs.org/" label="points" />
         <NavLink href="/officers" label="officers" onClick={handleLinkClick} />
-        <NavLink
-          href="/committees"
-          label="committees"
-        />
-        <NavLink
-          href="/resources"
-          label="resources"
-        />
+        <NavLink href="/committees" label="committees" />
+        <NavLink href="/resources" label="resources" />
       </div>
 
       <button type="button" className={styles.hamburger} onClick={toggleMenu}>
@@ -77,12 +68,7 @@ export default function WCSNavbar() {
         <div className={`${styles.bar} ${isMenuOpen ? styles.open3 : ''}`} />
       </button>
 
-      {isMenuOpen
-      && (
-        <NavbarMobile
-          handleLinkClick={handleLinkClick}
-        />
-      )}
+      {isMenuOpen && <NavbarMobile handleLinkClick={handleLinkClick} />}
     </div>
   );
 }
diff --git a/src/styles/pages/Home.module.css b/src/styles/pages/Home.module.css
@@ -144,6 +144,53 @@
   background-size: contain;
 }
 
+.tempModal {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  margin: 1rem;
+  min-width: fit-content;
+  color: #21636c;
+}
+
+.tempModalButton {
+  padding: 0.2rem 1rem 0.2rem 1rem;
+  border-radius: 0.5rem;
+  border-width: 0px;
+  position: relative;
+  max-width: 200px;
+  margin: 0.2rem;
+  background-color: var(--light-pink);
+
+  text-align: center;
+  font-size: small;
+  color: #21636c;
+}
+
+.tempModalButtonContainer {
+  display: flex;
+  flex-direction: row;
+}
+
+.tempModalContainer {
+  position: fixed;
+  z-index: 99;
+  animation: show-temp-modal ease-in-out 0.9s backwards;
+  right: 2em;
+  bottom: 2em;
+}
+
+@keyframes show-temp-modal {
+  from {
+    transform: translateX(100vw);
+  }
+  to {
+    transform: translateX(0vw);
+  }
+}
+
 .windowContainer {
   max-width: 825px;
 }

diff --git a/src/styles/sections/Navbar.module.css b/src/styles/sections/Navbar.module.css
@@ -33,7 +33,7 @@
 }
 
 .hamburger {
-  display: none; 
+  display: none;
   cursor: pointer;
   padding: 15px 25px 15px 25px;
   background-color: transparent;
@@ -67,12 +67,12 @@
 
 @media (max-width: 1000px) {
   .linksContainer {
-    display: none; 
+    display: none;
     position: absolute;
   }
 
   .hamburger {
-    display: block; 
+    display: block;
   }
 }