Merge pull request #178 from HackMerced/feat/contribute-component

trumanjchan · web-flow · commit d024bd7910e0 · 2021-07-01T18:02:58.000-07:00
Created 'Contribute!' Component &amp; added Hover Animation
diff --git a/src/components/Contribute/index.tsx b/src/components/Contribute/index.tsx
@@ -0,0 +1,18 @@
+import React, { FC } from "react";
+
+import "./styles.scss";
+
+const Contribute: FC = (): JSX.Element => {
+    return (
+        <div className="grid-container">
+            <a href="https://forms.gle/9HP7qPGiLNWDG3C4A" target="_blank">
+                <div className="grid-item">Mentor</div>
+            </a>
+            <a href="https://forms.gle/jLqbvgyAdwnJR3XU7" target="_blank">
+                <div className="grid-item">Volunteer</div>
+            </a>
+        </div>
+    );
+};
+
+export default Contribute;
diff --git a/src/components/Contribute/styles.scss b/src/components/Contribute/styles.scss
@@ -0,0 +1,47 @@
+.grid-container {
+    display: grid;
+    color: var(--text-color);
+    padding: 0px 2px 90px 0px;
+    grid-template-columns: auto auto;
+    grid-gap: 0px 50px;
+    justify-content: center;
+
+    @media only screen and (max-width: 900px) {
+        grid-template-columns: auto;
+        grid-gap: 50px 0px;
+        padding-top: 20px;
+    }
+
+    .grid-item {
+        text-align: center;
+        width: 400px;
+        height: 40px;
+        padding-top: 6px;
+        font-size: 28px;
+        background-color: var(--orange);
+
+        @media only screen and (max-width: 700px) {
+            font-size: 25px;
+        }
+        @media only screen and (max-width: 450px) {
+            width: 200px;
+            height: 30px;
+            padding-top: 8px;
+            font-size: 20px;
+        }
+    }
+
+    /* Hover Effect: https://dev.to/webdeasy/top-20-css-buttons-animations-f41 */
+    .grid-item:hover {
+        background: linear-gradient(45deg, #ff0000, #ff7300, #fffb00, #48ff00, #00ffd5, #002bff, #7a00ff, #ff00c8, #ff0000);
+        background-size: 400%;
+        animation: glowing 20s linear infinite;
+        transition: opacity .3s ease-in-out;
+    }
+    @keyframes glowing {
+        0% { background-position: 0 0; }
+        50% { background-position: 400% 0; }
+        100% { background-position: 0 0; }
+    }
+}
+
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
@@ -4,6 +4,7 @@ import { IconDefinition } from "@fortawesome/free-solid-svg-icons";
 
 import Navbar from "../../components/NavBar";
 import Footer from "../../components/Footer";
+import Contribute from "../../components/Contribute";
 import useWindowDimensions from "../../components/WindowDimensions";
 
 import HACKMERCED_TITLE from "../../assets/images/placeholder-title.png";
@@ -157,6 +158,11 @@ const Home: FC = (): JSX.Element => {
                 {generateSectionHeading("Our Team")}
                 <div className="home__team-pictures__grid clear">{generateTeamPics(team)}</div>
             </section>
+            {/* Contribute */}
+            <section className="home__contribute">
+                {generateSectionHeading("Contribute!")}
+                <Contribute />
+            </section>
             <Footer />
         </main>
     );
