final changes

acmucsd · Sep 24, 2023 · 88a6bbf · 88a6bbf
1 parent acef03f
commit 88a6bbf
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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;