From ed976698de6148d37107235eff25ffdf8dab01fc Mon Sep 17 00:00:00 2001
From: Idan Garay <garayIdan@gmail.com>
Date: Sat, 28 Oct 2023 15:47:02 +0800
Subject: [PATCH] feat: add redirect functionality to support us button

---
 src/components/Header/Header.styles.ts |  6 +++
 src/components/Header/Header.tsx       |  4 +-
 src/pages/support.tsx                  | 57 ++++++++++++++++++++++++++
 3 files changed, 66 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/support.tsx

diff --git a/src/components/Header/Header.styles.ts b/src/components/Header/Header.styles.ts
index 2a3903b..7cde0fa 100644
--- a/src/components/Header/Header.styles.ts
+++ b/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;
   }
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 356d3ac..90a45f5 100644
--- a/src/components/Header/Header.tsx
+++ b/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>
   )
diff --git a/src/pages/support.tsx b/src/pages/support.tsx
new file mode 100644
index 0000000..7d0c4d4
--- /dev/null
+++ b/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