From 88a6bbff22611071cefda16f313ae088ba2d87e5 Mon Sep 17 00:00:00 2001
From: Arvin Zhang <arvinzhang04@gmail.com>
Date: Sat, 23 Sep 2023 22:54:37 -0700
Subject: [PATCH] final changes

---
 src/components/navbar/index.tsx      |  6 ++--
 src/sections/Timer/index.tsx         | 15 +++++++-
 src/sections/Timer/style.module.scss | 51 +++++++++++++++++++++++++---
 3 files changed, 63 insertions(+), 9 deletions(-)

diff --git a/src/components/navbar/index.tsx b/src/components/navbar/index.tsx
index 68a5c1a..ed9415d 100644
--- a/src/components/navbar/index.tsx
+++ b/src/components/navbar/index.tsx
@@ -14,10 +14,10 @@ const NavigationBar: React.FC = () => {
       <div className={s.navbar}>
         {/* Navbar ACM Logo */}
         <div className={s.left}>
-            <a href="https://acmucsd.com/">
+            <Link href="#">
               <img src={ACMLogo.src} alt="ACM Logo" />
-              <p>Projects</p>
-            </a>
+                <p>Projects</p>
+            </Link>
             <div className={s.divider}>
               <span>|</span>
             </div>
diff --git a/src/sections/Timer/index.tsx b/src/sections/Timer/index.tsx
index 132559f..b2e35b1 100644
--- a/src/sections/Timer/index.tsx
+++ b/src/sections/Timer/index.tsx
@@ -88,7 +88,20 @@ const TimerHero: React.FC = () => {
           </div>
         </div>
         <div className={s.description__info}>
-        ACM Projects is our quarterly projects program where students work in a tight knit team. The program gives students the opportunity to be hands-on outside of courses in fields such as AI, design, and software engineering. The program culminates in a projects showcase and the finished product looks great on resumes. We welcome all skill levels to apply!
+        
+        You could apply for either AI, Design, Hack, or Advanced teams. AI focuses on topics in AI like machine learning, large language models, computer vision, etc. Design focuses on either redesigning an existing platform or creating designs for an entirely new one using Figma. Hack focuses on software development for websites where students can be frontend, backend, or fullstack developers learning about the Agile process. Advanced combines all three teams and focuses on developing a product that involves all of AI, Design, and Hack. 
+
+          <br /><br />
+          <b>AI</b><br />
+          Roles: AI Engineer<br />
+          Team Size: 6<br />
+          <b>Design</b><br />
+          Roles: Team Lead, Visual Designer, UX Researcher, UX Designer, UI Designer<br />
+          Team Size: 4<br />
+          <b>Hack</b><br />
+          Roles: Frontend, Backend, Fullstack, Team Lead, Scrummaster<br />
+          Team Size: 6<br />
+
         </div>
       </div>
       
diff --git a/src/sections/Timer/style.module.scss b/src/sections/Timer/style.module.scss
index 9bee4fe..86dea81 100644
--- a/src/sections/Timer/style.module.scss
+++ b/src/sections/Timer/style.module.scss
@@ -1,11 +1,12 @@
 @use "../../styles/vars.scss" as v; // allows you to use pre-defined colors
 
 .hero {
-  padding-top: 64px;
-  padding-bottom: 64px;
+  padding-top: 10px;
+  padding-bottom: 10px;
   font-family: 'DM Sans';
   font-size: 22px;
-
+  word-wrap: normal;
+  
 
   &__timer {
     padding: 0 !important;
@@ -19,19 +20,32 @@
 
     &__header {
       width: 100% !important;
+      word-wrap: normal;
       margin-top: 20px;
-      padding: 25px;
+      padding: 5px;
       display: flex;
       flex-direction: column;
       h1 {
         font-size: 52px;
         font-weight: 700;
       }
+      @media screen and (max-width: 768px) {
+        h1 {
+          font-size: 35px;
+          font-weight: 700;
+        }
+      }
 
       p {
         font-size: 41px;
         font-weight: 300;
       }
+      @media screen and (max-width: 768px) {
+        p {
+          font-size: 35px;
+          font-weight: 300;
+        }
+      }
     }
 
     &__time {
@@ -53,11 +67,27 @@
           font-weight: 800;
           height: 50px;
         }
+        @media screen and (max-width: 768px) {
+          &__digits {
+            font-size: 55px;
+            font-weight: 800;
+            height: 50px;
+          }
+        }
+
         &__label {
           font-size: 20px;
           font-weight: 500;
           height: 50px;
         }
+
+        @media screen and (max-width: 768px) {
+          &__label {
+            font-size: 18px;
+            font-weight: 500;
+            height: 50px;
+          }
+        }
       }
       &__divider {
         font-size: 66px;
@@ -66,7 +96,15 @@
         margin-left: 10px;
         margin-right: 10px;
       };
-      
+      @media screen and (max-width: 768px) {
+        &__divider {
+          font-size: 55px;
+          font-weight: 800;
+          height: 50px;
+          margin-left: 10px;
+          margin-right: 10px;
+        };
+      }
     }
 
     @media only screen and (max-width: 1050px) {
@@ -90,6 +128,9 @@
   display: flex;
   flex-direction: row;
   justify-content: center;
+  @media screen and (max-width: 699px) {
+    flex-direction: column;
+  }
   &__info {
     width: 550px !important;
     padding: 20px;