feat: add redirect functionality to support us button

src/components/Header/Header.styles.ts

@@ -70,6 +70,12 @@ export const StyledButton = styled.button`
   border: 1px solid transparent;
   border-radius: 4px;
 
+  &:hover {
+    background-color: white;
+    color: hsl(240, 74%, 31%);
+    border-color: hsl(240, 74%, 31%);
+  }
+
   @media ${breakpoints.md} {
     margin-left: auto;
   }

src/components/Header/Header.tsx

@@ -71,7 +71,9 @@ export const Header: React.FC<ComponentProps> = ({
         <Link to="/events">Events</Link>
         <Link to="/contact">Contact</Link>
 
-        <StyledButton>Support Us</StyledButton>
+        <StyledButton>
+          <Link to="/support">Support Us</Link>
+        </StyledButton>
       </Nav>
     </HeaderStyled>
   )

src/pages/support.tsx

@@ -0,0 +1,57 @@
+import { Layout } from "../components"
+import React from "react"
+import styled from "styled-components"
+
+const SupportPage = () => {
+  return (
+    <Layout>
+      <div
+        style={{
+          // display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+        }}
+      >
+        <Section>
+          <h2>Support us and make a difference.</h2>
+        </Section>
+
+        <Section>
+          <p>
+            We are always looking for ways to improve our software, and we rely
+            on our community to help us. If you have any ideas for new features
+            or improvements, please visit our{" "}
+            <a href="https://github.com/reactcebu/website-v2" target="_blank">
+              repository
+            </a>
+            . on GitHub and contribute!
+          </p>
+        </Section>
+      </div>
+    </Layout>
+  )
+}
+
+const Section = styled.section`
+  display: block;
+  max-width: 1440px;
+  // border: 1px solid red;
+  margin: 0 auto;
+  text-align: center;
+  font-size: 28px;
+  padding: 40px 30px;
+
+  h2 {
+    font-size: 60px;
+    max-width: 900px;
+    margin: 0 auto;
+    margin-bottom: 18px;
+  }
+
+  p {
+    text-align: left;
+    line-height: 150%;
+  }
+`
+
+export default SupportPage