alternate alum button

OperationSpark · Jun 13, 2024 · 812fa31 · 812fa31
1 parent 0388275
commit 812fa31
Show file tree

Hide file tree

Showing 3 changed files with 187 additions and 92 deletions.
diff --git a/src/components/Elements/SlashDivider.tsx b/src/components/Elements/SlashDivider.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, CSSProperties } from 'react';
+import { CSSProperties, ReactNode } from 'react';
 import styled, { DefaultTheme } from 'styled-components';
 
 const getImageUrl = (theme: DefaultTheme) => {

diff --git a/src/components/Home/MeetOurGradsButton.tsx b/src/components/Home/MeetOurGradsButton.tsx
@@ -1,76 +1,138 @@
+import { AnimatePresence, motion } from 'framer-motion';
 import styled, { keyframes } from 'styled-components';
 
 import { SlashDivider } from '@this/components/Elements/SlashDivider';
-import { motion } from 'framer-motion';
+import { FC, Fragment } from 'react';
+
+const alumUrl = 'https://alum.operationspark.org';
 
 const MeetOurGradsButton = () => {
   return (
-    <MeetOurGradsButtonStyles>
-      <div className='grads-container'>
-        <div className='grads-content'>
-          <h3 className='dynamic-h3 header'>Are you an employer looking for talent?</h3>
-          <a className='grad-redirect-link rotate-hue' href='/' target='_blank'>
-            Meet our grads here
-          </a>
-        </div>
-        <div className='rotate-hue divider'>
-          <SlashDivider style={{ height: '0.5rem' }} />
+    <Fragment>
+      <MeetOurGradsButtonStyles
+        initial={{ y: -100 }}
+        animate={{ y: 0 }}
+        transition={{ duration: 2, type: 'spring', bounce: 0.5, damping: 10, stiffness: 100 }}
+      >
+        <div className='grads-container'>
+          <div className='rotate-hue divider'>
+            <SlashDivider style={{ height: '0.5rem' }} />
+          </div>
+          <div className='grads-content'>
+            <h3 className='dynamic-h3 header rotate-hue'>
+              Are you an employer looking for talent?
+            </h3>
+
+            <RedirectLink href={alumUrl} target='_blank'>
+              Meet our grads here
+            </RedirectLink>
+          </div>
+          <div className='rotate-hue divider'>
+            <SlashDivider style={{ height: '0.5rem' }} />
+          </div>
         </div>
-      </div>
-    </MeetOurGradsButtonStyles>
+      </MeetOurGradsButtonStyles>
+    </Fragment>
+  );
+};
+
+export const MeetGradsNavButton: FC<{ visible: boolean }> = ({ visible }) => {
+  return (
+    <AnimatePresence>
+      {visible && (
+        <FixedRedirectLink
+          initial={{ y: -200, opacity: 0 }}
+          animate={{ y: 0, opacity: 1 }}
+          exit={{ y: -200, opacity: 0 }}
+          transition={{
+            duration: 1,
+            type: 'spring',
+            bounce: 0.4,
+            damping: 8,
+            stiffness: 100,
+          }}
+          href={alumUrl}
+          target='_blank'
+        >
+          Meet our grads here
+        </FixedRedirectLink>
+      )}
+    </AnimatePresence>
   );
 };
 
 export default MeetOurGradsButton;
 
-const mainAnimation = keyframes`
+const hueRotate = keyframes`
   0% {
-    transform: translateY(0) scale(1);
-    backdrop-filter: blur(1px);
-    -webkit-backdrop-filter: blur(1px);
-  }
-  50% {
-    transform: translateY(-0.5rem) scale(1.02);
-    backdrop-filter: blur(8px);
-    -webkit-backdrop-filter: blur(8px);
+    filter: hue-rotate(0deg) saturate(150%);
   }
   100% {
-    transform: translateY(0) scale(1);
-    backdrop-filter: blur(1px);
-    -webkit-backdrop-filter: blur(1px);
+    filter: hue-rotate(360deg) saturate(150%);
   }
 `;
 
-const hueRotate = keyframes`
+const outerBoxShadow = keyframes`
   0% {
-    filter: hue-rotate(0deg) saturate(150%);
+    filter: saturate(150%);
+    box-shadow:
+      0 0 0.25rem 1px rgba(32,32,32,1),
+      0 0 0.1rem 0.25rem inset rgb(255, 230, 0),
+      0 0 0 0.35rem rgb(179, 0, 255),
+      0 0 1rem 0.5rem rgba(32, 32, 32, 0.75);
   }
   100% {
-    filter: hue-rotate(360deg) saturate(150%);
+    filter: saturate(150%);
+    box-shadow:
+      0 0 0.25rem 1px rgba(32,32,32,1),
+      0 0 0.1rem 0.25rem inset rgb(179, 0, 255),
+      0 0 0 0.35rem rgb(255, 230, 0),
+      0 0 1rem 0.5rem rgba(32, 32, 32, 0.75);
   }
 `;
 
 const MeetOurGradsButtonStyles = styled(motion.div)`
   margin-bottom: 2rem;
-  color: ${({ theme }) => theme.green[300]};
+  color: rgba(0, 255, 119, 1);
   text-align: center;
   min-height: fit-content;
   .grads-container {
     width: 100%;
-    max-width: 600px;
+    max-width: 650px;
     height: 100%;
 
     margin: 0 auto;
     background: rgba(32, 32, 32, 0.25);
-    box-shadow: 0 0 6px rgba(32, 32, 32, 1);
+
     border-radius: 0.5rem;
 
-    animation: ${mainAnimation} 3s infinite;
-    overflow: hidden;
+    transform: translateY(0) scale(1);
+    backdrop-filter: blur(3px);
+    -webkit-backdrop-filter: blur(1px);
+    transition: all 225ms;
+    padding: 0.5rem;
     :hover {
-      animation-play-state: paused;
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+    }
+
+    :after {
+      content: '';
+      position: absolute;
+      user-select: none;
+      pointer-events: none;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      border-radius: 0.5rem;
+
+      animation: ${outerBoxShadow} 15s infinite alternate;
+      background: rgba(0, 0, 0, 0);
+      z-index: -1;
     }
   }
+
   .header {
     font-weight: 700;
   }
@@ -83,36 +145,60 @@ const MeetOurGradsButtonStyles = styled(motion.div)`
     gap: 1rem;
   }
 
-  .grad-redirect-link {
-    display: flex;
-    flex-flow: column;
-    justify-content: center;
-    align-items: center;
-    font-weight: 500;
-    color: inherit;
-    box-shadow: 0 0 8px ${({ theme }) => theme.green[300]};
-    padding: 0.5rem 1rem;
+  .rotate-hue {
+    animation: ${hueRotate} 15s infinite;
+  }
+
+  .divider {
+    background: rgba(0, 255, 119, 0.75);
     border-radius: 0.5rem;
-    background: rgba(0, 255, 119, 0.1);
-    transition: all 225ms;
+    position: absolute;
+  }
+`;
 
-    :hover,
-    :focus-visible {
-      background: rgba(0, 255, 119, 0.25);
-      transform: translateY(-2px);
-    }
-    :active {
-      background: rgba(0, 255, 119, 0.1);
-      box-shadow: 0 0 2px ${({ theme }) => theme.green[300]};
-      transform: translateY(1px);
-      animation-play-state: paused;
-    }
+const RedirectLink = styled(motion.a)`
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+  align-items: center;
+  font-weight: 500;
+  color: inherit;
+  box-shadow: 0 0 8px 3px rgba(0, 255, 119, 0.75), 0 0 3px 0px inset rgba(0, 0, 0, 0.25);
+  padding: 0.5rem 1rem;
+  border-radius: 0.5rem;
+  background: rgba(32, 32, 32, 0.2);
+  transition: all 225ms;
+  animation: ${hueRotate} 15s infinite;
+
+  :hover,
+  :focus-visible {
+    background: rgba(0, 255, 119, 0.25);
+    transform: translateY(-2px);
+    box-shadow: 0 0 8px 5px rgba(0, 255, 119, 0.75), 0 0 6px 1px inset rgba(0, 0, 0, 0.5);
   }
+  :active {
+    transition: all 75ms;
+    background: rgba(0, 255, 119, 0.1);
+    box-shadow: 0 0 2px rgba(0, 255, 119, 0.75), 0 0 2px 1px inset rgba(0, 0, 0, 0.5);
+    transform: translateY(1px);
+    animation-play-state: paused;
+  }
+`;
 
-  .rotate-hue {
-    animation: ${hueRotate} 15s infinite;
+const FixedRedirectLink = styled(RedirectLink)`
+  position: fixed;
+  top: ${({ theme }) => theme.navHeight - 32}px;
+  left: 0.5rem;
+  z-index: 100;
+  background: rgba(32, 32, 32, 0.5);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+  animation: unset;
+  :hover,
+  :focus-visible {
+    background: rgba(32, 32, 32, 0.9);
   }
-  .divider {
-    background: ${({ theme }) => theme.primary[300]};
+  :active {
+    background: rgba(32, 32, 32, 0.65);
   }
 `;
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
@@ -2,13 +2,15 @@
 import { Transition, motion } from 'framer-motion';
 import moment from 'moment-timezone';
 import dynamic from 'next/dynamic';
-import { useEffect, useRef } from 'react';
+import { Fragment, useEffect, useRef } from 'react';
 import styled, { useTheme } from 'styled-components';
 
 import LogoLink from '@this/components/Elements/LogoLink';
 import { IAlert } from '@this/data/types/bits';
 import { useValidCss } from '@this/hooks/useCssCheck';
 import { useScrollY } from '@this/hooks/useScrollY';
+import { useRouter } from 'next/router';
+import { MeetGradsNavButton } from '../Home/MeetOurGradsButton';
 import BonusBar from './BonusBar';
 import { navMenus } from './navLinks';
 
@@ -39,12 +41,16 @@ const withinDateRange = ({ start, end }: IAlert): boolean => {
 };
 
 const Nav = ({ alertInfo }: NavProps) => {
+  const router = useRouter();
   const scrollY = useScrollY();
   const supportsBackdropFilter = useValidCss('backdrop-filter', 'blur()');
   const isTop = scrollY === null ? true : scrollY <= 5;
   const navRef = useRef<HTMLDivElement>(null);
   const showAlert = alertInfo?.message && withinDateRange(alertInfo);
   const theme = useTheme();
+  const pathname = router.pathname;
+
+  const hideAlumBtn = pathname.includes('highschool') || (pathname === '/' && (scrollY || 0) < 300);
 
   const extraNavHeight = 40;
 
@@ -91,40 +97,43 @@ const Nav = ({ alertInfo }: NavProps) => {
   }, [theme, navRef, resizeObserverRef]);
 
   return (
-    <NavbarStyles ref={navRef} animate={navAnimation} transition={navTransition}>
-      {/* // TODO: Figure out why this breaks since update to nextjs v13 */}
-      {/* {OVERRIDE_NODE_ENV === 'testing' ? (
+    <Fragment>
+      <NavbarStyles ref={navRef} animate={navAnimation} transition={navTransition}>
+        {/* // TODO: Figure out why this breaks since update to nextjs v13 */}
+        {/* {OVERRIDE_NODE_ENV === 'testing' ? (
         <div className='test-mode'>
           <TestIcon /> &nbsp;TEST MODE&nbsp; <TestIcon />
         </div>
       ) : null} */}
-      {showAlert && <AlertBar info={alertInfo} />}
-
-      <div className='navbar'>
-        <LogoLink
-          className='nav-logo-desktop'
-          src='/images/os/logo-halle-banner.webp'
-          href='/'
-          alt='Operation Spark'
-          width={112}
-          height={40}
-        />
-        <LogoLink
-          className='nav-logo-mobile'
-          src='/images/os/logo-halle-no-banner.webp'
-          href='/'
-          alt='Operation Spark'
-          width={40}
-          height={40}
-        />
-        <DesktopNav navMenus={navMenus} />
-
-        <BonusBar />
-
-        <MobileNav navMenus={navMenus} />
-      </div>
-      <ProgressBar isTop={isTop} />
-    </NavbarStyles>
+        {showAlert && <AlertBar info={alertInfo} />}
+
+        <div className='navbar'>
+          <LogoLink
+            className='nav-logo-desktop'
+            src='/images/os/logo-halle-banner.webp'
+            href='/'
+            alt='Operation Spark'
+            width={112}
+            height={40}
+          />
+          <LogoLink
+            className='nav-logo-mobile'
+            src='/images/os/logo-halle-no-banner.webp'
+            href='/'
+            alt='Operation Spark'
+            width={40}
+            height={40}
+          />
+          <DesktopNav navMenus={navMenus} />
+
+          <BonusBar />
+
+          <MobileNav navMenus={navMenus} />
+        </div>
+        <ProgressBar isTop={isTop} />
+      </NavbarStyles>
+      <MeetGradsNavButton visible={!hideAlumBtn} />
+    </Fragment>
   );
 };