edited banner and header animations, still need to work on closing banner when header is visible.

Author: SamGu-NRX

frontend/src/components/ApplicationBanner/ApplicationBanner.tsx

@@ -1,37 +1,48 @@
 // src/components/ApplicationBanner.jsx
-import './styles.scss';
-// src/components/ApplicationBanner.jsx
-import  { useEffect } from 'react';
+import  { useEffect, useState } from 'react';
 import { useBanner } from '@/context/BannerContext';
+import './styles.scss';
+// import { Button } from '@/components/ui/moving-border'; - Implement moving border effect when hovered, also add fade-in for the border
 
 const ApplicationBanner = () => {
-  const { setBannerVisible } = useBanner();
+  const { isBannerVisible, setBannerVisibility, hideBanner } = useBanner();
+  const [isAnimating, setIsAnimating] = useState(false);
 
   useEffect(() => {
-    setBannerVisible(true);
-    return () => setBannerVisible(false);
-  }, [setBannerVisible]);
+    setBannerVisibility(true);
+    return () => setBannerVisibility(false);
+  }, [setBannerVisibility]);
+
+  const handleClose = () => {
+    setIsAnimating(true);
+    setTimeout(() => {
+      hideBanner();
+      setIsAnimating(false);
+    }, 500); // Duration of the fade out animation
+  };
+
+  if (!isBannerVisible) {
+    return null;
+  }
 
   return (
-    <div className="fixed top-0 left-0 w-full bg-blue-500 text-white text-center p-2 z-100">
+    <div className={`fixed top-0 left-0 w-full bg-gradient-to-r from-blue-500 to-purple-500 backdrop:blur-md text-white text-center p-2 z-100
+      ${
+        isAnimating ? 'fade-out-up' : ''
+      }`}>
       <span className="font-bold">Last-minute call for our 2024 summer application!</span>
       <button onClick={() => window.location.href='/application-form'}
         aria-label="Apply Now"
-        className="ml-6 inline-flex h-8 animate-shimmer items-center justify-center rounded-md border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%] px-6 font-medium text-slate-200 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50 hover:bg-[linear-gradient(90deg, #6366f1, #a855f7)]" >
+        className="ml-6 inline-flex h-8 animate-shimmer items-center justify-center rounded-md border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#343b45,55%,#000103)] bg-[length:200%_100%] px-6 font-medium text-slate-100
+        focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50
+        backdrop-blur-sm hover:shadow-[0px_0px_4px_4px_rgba(0,0,0,0.15)] bg-white/[0.2] text-sm transition duration-200" >
           Apply Now
-        </button>
+      </button>
+      <div className='justify-self-end w-8 bg-transparent absolute right-4 mx-2 text-center align-middle transition '>
+        <button className="text-3xl font-white pt-[3px]" aria-label='Close' onClick={handleClose}>×</button>
+      </div>
     </div>
   );
 };
 
 export default ApplicationBanner;
-
-
-<button className="p-[3px] relative">
-<div className="ml-6 inline-flex h-8 px-6 justify-center rounded-lg absolute inset-0 bg-gradient-to-r from-indigo-500 to-purple-500">
-    <div onClick={() => window.location.href='/application-form'} 
-        className="px-8 py-2 rounded-[6px] relative group transition duration-200 hover:bg-transparent animate-shimmer items-center border border-slate-800 bg-[linear-gradient(110deg,#000103,45%,#1e2631,55%,#000103)] bg-[length:200%_100%]  font-medium text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 focus:ring-offset-slate-50">
-        Apply Now
-    </div>
-</div>
-</button>

frontend/src/components/ApplicationBanner/styles.scss

@@ -11,4 +11,21 @@
 
 .custom-bg-gradient {
     background: linear-gradient(110deg, #000103 45%, #1e2631 55%, #000103);
-}
+}
+
+// src/components/styles.scss
+@keyframes fadeOutUp {
+    from {
+      opacity: 1;
+      transform: translateY(0);
+    }
+    to {
+      opacity: 0;
+      transform: translateY(-100%);
+    }
+  }
+  
+  .fade-out-up {
+    animation: fadeOutUp 0.5s forwards;
+  }
+  

frontend/src/components/Header/Header.scss

@@ -8,6 +8,20 @@
 
 }
 
+@keyframes slideUp {
+  from {
+    transform: translateY(56px); // Start from the position you want to animate up from
+  }
+  to {
+    transform: translateY(0); // Slide up to its normal position
+  }
+}
+
+.slide-up {
+  animation: slideUp 5s forwards;
+}
+
+
 .header-light{
     background: linear-gradient(to top, #fff, #fff);
 };
@@ -17,17 +31,17 @@
 };
 
 
-@keyframes fadeInLeft {
-  from {
-    opacity: 0;
-    transform: scaleX(0);
-    transform-origin: left;
-  }
-  to {
-    opacity: 1;
-    transform: scaleX(1%);
-  }
-}
+// @keyframes fadeInLeft {
+//   from {
+//     opacity: 0;
+//     transform: scaleX(0);
+//     transform-origin: left;
+//   }
+//   to {
+//     opacity: 1;
+//     transform: scaleX(1%);
+//   }
+// }
 
 
 

frontend/src/components/Header/Header.tsx

@@ -1,16 +1,27 @@
 import "../../styles/App.scss";
 import "./Header.scss";
+import { useState, useEffect } from "react";
 import getMode from "../../utils/getMode";
-import { Link } from "@tanstack/react-router";
 import { useBanner } from "@/context/BannerContext";
+import StyledLink from "./StyledLink";
 
 const Header = () => {
   const mode = getMode();
   const { isBannerVisible } = useBanner();
+  const [isAnimating, setIsAnimating] = useState(false);
 
-  //TODO: remove this and change to dark:text-white, etc.
-  const headerClass = ` p-4 ${isBannerVisible ? 'mt-16' : ''} hidden `;
-  const navClass = `mt-2 ${mode === "dark" ? "header-text-dark text-white" : "header-text-light text-black"}`; // add fonts
+  useEffect(() => {
+    if (!isBannerVisible) {
+      setIsAnimating(true);
+      setTimeout(() => {
+        setIsAnimating(false);
+      }, 500); // Duration of the slide up animation
+    }
+  }, [isBannerVisible]);
+
+  //TODO: remove this (${mode === "dark" ? "header-text-dark text-white" : "header-text-light text-black"}) and change to dark:text-white, etc.
+  const headerClass = ` p-4 ${isBannerVisible ? 'mt-12' : ''} ${isAnimating ? 'slide-up' : '' } hidden `;
+  const navClass = `mt-2 `; // add fonts
 
   return (
     <header className={headerClass}>
@@ -32,15 +43,3 @@ const Header = () => {
 };
 
 export default Header;
-
-function StyledLink({ address, text }) {
-  return (
-    <Link
-      to={address}
-      className="relative mx-1 p-2 bg-white overflow-hidden group"
-    >
-      <span className="relative z-10">{text}</span>
-      <div className="absolute rounded-md inset-0 bg-gradient-to-r from-cyan-300 to-purple-300 transition-transform duration-300 transform scale-x-0 group-hover:scale-x-100 origin-left"></div>
-    </Link>
-  );
-}

frontend/src/components/Header/StyledLink.tsx

@@ -0,0 +1,21 @@
+// src/components/StyledLink.tsx
+import { Link } from "@tanstack/react-router";
+
+interface StyledLinkProps {
+  address: string;
+  text: string;
+}
+
+const StyledLink: React.FC<StyledLinkProps> = ({ address, text }) => {
+  return (
+    <Link
+      to={address}
+      className="relative mx-1 p-2 bg-white overflow-hidden group"
+    >
+      <span className="relative z-10">{text}</span>
+      <div className="absolute rounded-md inset-0 bg-gradient-to-r from-cyan-300 to-purple-300 transition-transform duration-300 transform scale-x-0 group-hover:scale-x-100 origin-left"></div>
+    </Link>
+  );
+};
+
+export default StyledLink;

frontend/src/components/Testimonials.tsx

@@ -0,0 +1,73 @@
+"use client";
+// Use acutal examples
+
+import { CardStack } from "@/components/ui/card-stack";
+import { cn } from "@/utils/cn";
+export function CardStackDemo() {
+  return (
+    <div className="h-[40rem] flex items-center justify-center w-full">
+      <CardStack items={CARDS} />
+    </div>
+  );
+}
+
+// Small utility to highlight the content of specific section of a testimonial content
+export const Highlight = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) => {
+  return (
+    <span
+      className={cn(
+        "font-bold bg-emerald-100 text-emerald-700 dark:bg-emerald-700/[0.2] dark:text-emerald-500 px-1 py-0.5",
+        className
+      )}
+    >
+      {children}
+    </span>
+  );
+};
+
+const CARDS = [
+  {
+    id: 0,
+    name: "Manu Arora",
+    designation: "Senior Software Engineer",
+    content: (
+      <p>
+        These cards are amazing, <Highlight>I want to use them</Highlight> in my
+        project. Framer motion is a godsend ngl tbh fam 🙏
+      </p>
+    ),
+  },
+  {
+    id: 1,
+    name: "Elon Musk",
+    designation: "Senior Shitposter",
+    content: (
+      <p>
+        I dont like this Twitter thing,{" "}
+        <Highlight>deleting it right away</Highlight> because yolo. Instead, I
+        would like to call it <Highlight>X.com</Highlight> so that it can easily
+        be confused with adult sites.
+      </p>
+    ),
+  },
+  {
+    id: 2,
+    name: "Tyler Durden",
+    designation: "Manager Project Mayhem",
+    content: (
+      <p>
+        The first rule of
+        <Highlight>Fight Club</Highlight> is that you do not talk about fight
+        club. The second rule of
+        <Highlight>Fight club</Highlight> is that you DO NOT TALK about fight
+        club.
+      </p>
+    ),
+  },
+];

frontend/src/components/ui/card-stack.tsx

@@ -0,0 +1,74 @@
+"use client";
+import { useEffect, useState } from "react";
+import { motion } from "framer-motion";
+
+let interval: any;
+
+type Card = {
+  id: number;
+  name: string;
+  designation: string;
+  content: React.ReactNode;
+};
+
+export const CardStack = ({
+  items,
+  offset,
+  scaleFactor,
+}: {
+  items: Card[];
+  offset?: number;
+  scaleFactor?: number;
+}) => {
+  const CARD_OFFSET = offset || 10;
+  const SCALE_FACTOR = scaleFactor || 0.06;
+  const [cards, setCards] = useState<Card[]>(items);
+
+  useEffect(() => {
+    startFlipping();
+
+    return () => clearInterval(interval);
+  }, []);
+  const startFlipping = () => {
+    interval = setInterval(() => {
+      setCards((prevCards: Card[]) => {
+        const newArray = [...prevCards]; // create a copy of the array
+        newArray.unshift(newArray.pop()!); // move the last element to the front
+        return newArray;
+      });
+    }, 5000);
+  };
+
+  return (
+    <div className="relative  h-60 w-60 md:h-60 md:w-96">
+      {cards.map((card, index) => {
+        return (
+          <motion.div
+            key={card.id}
+            className="absolute dark:bg-black bg-white h-60 w-60 md:h-60 md:w-96 rounded-3xl p-4 shadow-xl border border-neutral-200 dark:border-white/[0.1]  shadow-black/[0.1] dark:shadow-white/[0.05] flex flex-col justify-between"
+            style={{
+              transformOrigin: "top center",
+            }}
+            animate={{
+              top: index * -CARD_OFFSET,
+              scale: 1 - index * SCALE_FACTOR, // decrease scale for cards that are behind
+              zIndex: cards.length - index, //  decrease z-index for the cards that are behind
+            }}
+          >
+            <div className="font-normal text-neutral-700 dark:text-neutral-200">
+              {card.content}
+            </div>
+            <div>
+              <p className="text-neutral-500 font-medium dark:text-white">
+                {card.name}
+              </p>
+              <p className="text-neutral-400 font-normal dark:text-neutral-200">
+                {card.designation}
+              </p>
+            </div>
+          </motion.div>
+        );
+      })}
+    </div>
+  );
+};

frontend/src/components/ui/moving-border.tsx

@@ -145,3 +145,8 @@ export const MovingBorder = ({
     </>
   );
 };
+
+
+<button className="px-4 py-2 text-black backdrop-blur-sm border border-black rounded-md hover:shadow-[0px_0px_4px_4px_rgba(0,0,0,0.1)] bg-white/[0.2] text-sm transition duration-200">
+  Backdrop blur
+</button>