Remove conflicting cta (#180)

* Remove conflicting cta * Make arrow clickable * Add smooth scrolling * Run prettier
acmucsd · Jan 28, 2022 · 1073c88 · 1073c88 · vercel · Feb 3, 2022
1 parent 10ca1fb
commit 1073c88
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 7 deletions.
diff --git a/src/sections/home/Home.Hero.tsx b/src/sections/home/Home.Hero.tsx
@@ -25,6 +25,10 @@ const HomeHero: React.FC = () => {
     return undefined
   }, [scrolled])
 
+  const scrollDown = () => {
+    window.scrollBy({ top: window.innerHeight, behavior: "smooth" })
+  }
+
   return (
     <section className="home__hero">
       <div className="home__hero--grid">
@@ -51,7 +55,6 @@ const HomeHero: React.FC = () => {
               <span>community.&nbsp;</span>
             </Typist>
             <div className="buttons">
-              <Button title="Learn More!" link="/about" type="secondary" />
               <Button
                 title="Join Us Now!"
                 link="https://members.acmucsd.com"
@@ -60,7 +63,9 @@ const HomeHero: React.FC = () => {
             </div>
           </div>
         </div>
-        {scrolled ? null : <img className="arrow" alt="" src={Arrow} />}
+        {scrolled ? null : (
+          <img className="arrow" alt="" onClick={scrollDown} src={Arrow} />
+        )}
       </div>
     </section>
   )

diff --git a/src/sections/home/styles.less b/src/sections/home/styles.less
@@ -45,9 +45,6 @@
 
       .buttons {
         width: fit-content;
-        display: flex;
-        flex-direction: row;
-        align-items: center;
         width: 100%;
         margin: 37px 0px;
         > a {
@@ -104,7 +101,6 @@
 
         .buttons {
           display: flex;
-          align-items: center;
           justify-content: center;
           width: 100%;
           margin: 1em 0 0 0 !important;
@@ -146,7 +142,6 @@
         }
         .buttons {
           display: flex;
-          align-items: center;
           justify-content: center;
           width: 100%;
           margin-top: 1em !important;

diff --git a/src/styles/mixins.less b/src/styles/mixins.less
@@ -17,6 +17,7 @@
 }
 
 .arrow {
+  cursor: pointer;
   left: 50vw;
   bottom: 50px;
   height: 30px;