Updated hero animation and style (#56)

* Updated animation and styling for hero

* Added priority loading for svg

* Made animation faster

* Updated desktop hero with animation

* Fixing linting

* Adjusting mobile view

src/components/type-animation/index.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import Typewriter from '../typewriter';
+import styles from './style.module.css';
+
+const TypeAnimation: React.FC = () => {
+  const words = ['build', 'break', 'innovate'];
+  const [index, setIndex] = useState(0);
+
+  const currentWord = words[index];
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setIndex(prevIndex => (prevIndex + 1) % words.length);
+    }, 2400);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className={styles.word_container}>
+      {currentWord === 'build' && <Typewriter text={currentWord} />}
+      {currentWord === 'break' && <span className={styles.break}>{currentWord}</span>}
+      {currentWord === 'innovate' && <span className={styles.innovate}>{currentWord}</span>}
+    </div>
+  );
+};
+
+export default TypeAnimation;

src/components/type-animation/style.module.css

@@ -0,0 +1,64 @@
+.word_container {
+  background-color: var(--docs-dark-bg);
+  width: 60%;
+  padding: 0.5rem;
+  border-radius: 10px;
+  font-size: 3em;
+  font-weight: 200;
+}
+
+/* Breaking apart animation for "break" */
+.break {
+  animation: breakApart 2.5s ease-in-out forwards;
+}
+
+@keyframes breakApart {
+  0% {
+    letter-spacing: 0;
+    transform: rotate(0deg);
+    opacity: 1;
+  }
+  50% {
+    letter-spacing: 0.2rem;
+    transform: rotate(-5deg);
+    opacity: 1;
+  }
+  100% {
+    letter-spacing: 0.5rem;
+    transform: rotate(-10deg) translateY(-50%);
+    opacity: 0;
+  }
+}
+
+/* Light up animation for "innovate" */
+.innovate {
+  animation: fadeIn 1s ease-in-out forwards;
+}
+
+.innovate::after {
+  content: '💡';
+  margin-right: 0.5rem;
+  opacity: 0;
+  animation: lightUp 1.25s ease-in-out infinite;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes lightUp {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}

src/components/typewriter/index.tsx

@@ -3,10 +3,9 @@ import styles from './style.module.css';
 
 interface TypewriterProps {
   text: string;
-  delay: number;
 }
 
-const Typewriter: React.FC<TypewriterProps> = ({ text, delay }) => {
+const Typewriter: React.FC<TypewriterProps> = ({ text }) => {
   const [currentText, setCurrentText] = useState('');
   const [currentIndex, setCurrentIndex] = useState(0);
 
@@ -15,12 +14,12 @@ const Typewriter: React.FC<TypewriterProps> = ({ text, delay }) => {
       const timeout = setTimeout(() => {
         setCurrentText(prevText => prevText + text[currentIndex]);
         setCurrentIndex(prevIndex => prevIndex + 1);
-      }, delay);
+      }, 180);
 
       return () => clearTimeout(timeout);
     }
     return undefined;
-  }, [currentIndex, delay, text]);
+  }, [currentIndex, text]);
 
   return <h6 className={styles.landing_caption}>{currentText}</h6>;
 };

src/components/typewriter/style.module.css

@@ -1,6 +1,10 @@
-.landing_caption {
-    position: absolute;
-    top: 40%;
-    width: 100%;
-    font-size: 2em;
+.landing_caption::after {
+  content: '|';
+  animation: blink 0.75s step-start infinite;
+}
+
+@keyframes blink {
+  50% {
+    opacity: 0;
+  }
 }

src/sections/About/index.tsx

@@ -5,7 +5,6 @@ const About: React.FC = () => {
   return (
     <div className={styles.about}>
       <h2 className={styles.title}>Welcome to ACM Hack!</h2>
-      <br />
       <div className={styles.main}>
         <div className={styles.main_desc}>
           <div className={styles.main_header}>

src/sections/Hero/index.tsx

@@ -1,8 +1,7 @@
 import { FaChevronDown } from 'react-icons/fa6';
 import Image from 'next/image';
-import Typewriter from '../../components/typewriter';
+import TypeAnimation from '../../components/type-animation';
 import leftside from '../../../public/assets/left_diamonds.svg';
-import rightside from '../../../public/assets/right_diamonds.svg';
 import styles from './style.module.css';
 import aboutStyles from '../About/style.module.css';
 
@@ -19,16 +18,17 @@ const Hero: React.FC = () => {
   return (
     <div className={styles.hero}>
       <div className={styles.backdrop}>
-        <Image src={leftside} className={styles.backdrop_left} alt="backdrop" />
+        <Image src={leftside} className={styles.backdrop_left} alt="backdrop" priority />
         <div className={styles.landing_text}>
-          <h1 className={styles.landing_title}>ACM Hack</h1>
-          <Typewriter
-            text="Empowering our community of software engineers. Building cool things with code. Yes, we
-            like to code."
-            delay={60}
-          />
+          <div className={styles.landing_message}>
+            <h1 className={styles.landing_title}>ACM Hack</h1>
+            <h4 className={styles.landing_caption}>
+              Empowering our community of software engineers. <br /> Developing cool things with
+              code.
+            </h4>
+          </div>
+          <TypeAnimation />
         </div>
-        <Image src={rightside} className={styles.backdrop_right} alt="backdrop" />
       </div>
       <div className={styles.arrow} role="presentation" onClick={scrollToInfo}>
         <h6>Learn More</h6>

src/sections/Hero/style.module.css

@@ -13,16 +13,15 @@
 .backdrop {
     flex-grow: 1;
     display: grid;
-    grid-template-columns: 2fr 3fr 1.25fr;
-    column-gap: 1rem;
+    grid-template-columns: 1fr 2fr;
     align-items: center;
     max-width: 100%;
     text-align: center;
 }
 
 /* Landing Card Icons */
 
-.backdrop_left, .backdrop_right {
+.backdrop_left {
     object-fit: contain;
     width: 100%;
     height: 100%;
@@ -31,15 +30,21 @@
 /* Landing Card Text */
 
 .landing_text {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1.25fr;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 2em;
     position: relative;
 }
 
 .landing_title {
-    font-weight: 900;
     font-size: 5em;
+    font-weight: 600;
+}
+
+.landing_caption {
+    width: 100%;
+    font-size: 2em;
 }
 
 /* Landing Card Scroll Down */
@@ -69,57 +74,18 @@
         font-size: 10px;
     }
     .backdrop {
-        grid-template-columns: 1fr; 
-        grid-template-rows: auto; 
+        grid-template-columns: minmax(18em, 1fr);
+        grid-template-rows: minmax(0, 0.7fr);
         max-width: 95%;
     }
-
     .backdrop_left {
         justify-self: center;
-        max-width: 80%; 
-        max-height: auto; 
-    }
-    .backdrop_right {
-        display: none;
-    }
-    .landing_title{
-        margin-bottom: 1rem;
     }
     .landing_text{
-        margin-top: 1rem;
-        margin-bottom: 1rem;
-        margin-right: 2rem;
-        margin-left: 2rem;
+        align-self: start;
     }
 }
 
-/* Font size and layout for tablet*/
-
-@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
-    .backdrop {
-      grid-template-columns: 1fr 2fr; 
-      grid-template-rows: auto; 
-      max-width: 95%;
-      margin: 0 auto; 
-      padding: 1rem; 
-      height: auto;
-    }
-
-    .backdrop_left {
-      max-width: 100%; 
-      height: auto; 
-    }
-
-    .backdrop_right {
-      display: none; 
-    }
-
-    .landing_text {
-      align-self: center; 
-      padding: 1rem; 
-    }
-  }
-
 /* Dark Mode */
 
 html[class~='dark'] .hero {