Added social links on home page

src/icons/SocialRedditIcon.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+function SocialRedditIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <path d="M12 0c6.627 0 12 5.373 12 12s-5.373 12-12 12S0 18.627 0 12 5.373 0 12 0zm5 4.75c-.491 0-.912.286-1.116.698l-2.908-.619a.312.312 0 00-.37.24l-.891 4.186c-1.863.052-3.537.61-4.749 1.483a1.75 1.75 0 10-1.926 2.858c-.027.174-.042.35-.042.529 0 2.692 3.134 4.875 7 4.875s7-2.183 7-4.875c0-.178-.014-.353-.041-.526a1.75 1.75 0 10-1.923-2.858c-1.196-.863-2.844-1.42-4.68-1.485l.797-3.75 2.605.553A1.247 1.247 0 0018.25 6c0-.69-.56-1.25-1.25-1.25zM9.492 16.095c.538.538 1.688.728 2.51.728.821 0 1.972-.19 2.51-.728a.324.324 0 01.458.458c-.853.852-2.488.918-2.969.918-.48 0-2.115-.066-2.967-.918a.324.324 0 01.458-.458zM14.75 12c.69 0 1.25.561 1.25 1.25 0 .69-.56 1.25-1.25 1.25s-1.25-.56-1.25-1.25c0-.689.56-1.25 1.25-1.25zm-5.5 0c.69 0 1.25.56 1.25 1.25s-.56 1.25-1.25 1.25c-.689 0-1.25-.56-1.25-1.25S8.561 12 9.25 12z" />
+    </svg>
+  );
+}
+
+export default SocialRedditIcon;

src/icons/SocialTwitterIcon.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+function SocialTwitterIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <path d="M24 12c0 6.63-5.37 12-12 12S0 18.63 0 12 5.37 0 12 0s12 5.37 12 12zM9.804 18.33c5.322 0 8.232-4.41 8.232-8.232 0-.126 0-.252-.006-.372a5.927 5.927 0 001.446-1.5 5.872 5.872 0 01-1.662.456c.6-.36 1.056-.924 1.272-1.602-.558.33-1.176.57-1.836.702a2.894 2.894 0 00-4.926 2.64A8.208 8.208 0 016.36 7.398c-.246.426-.39.924-.39 1.452 0 1.002.51 1.89 1.29 2.406a2.842 2.842 0 01-1.308-.36v.036c0 1.404.996 2.568 2.322 2.838a2.884 2.884 0 01-1.308.048 2.889 2.889 0 002.7 2.01 5.816 5.816 0 01-4.284 1.194 8.06 8.06 0 004.422 1.308" />
+    </svg>
+  );
+}
+
+export default SocialTwitterIcon;

src/icons/SocialYouTubeIcon.js

@@ -0,0 +1,17 @@
+import React from "react";
+
+function SocialYouTubeIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="24"
+      viewBox="0 0 24 24"
+      width="24"
+      fill="currentcolor"
+    >
+      <path d="M12 0c6.63 0 12 5.37 12 12s-5.37 12-12 12S0 18.63 0 12 5.37 0 12 0zm.28 6.001h-.56c-1.073.006-4.902.047-5.971.336A2.01 2.01 0 004.334 7.76c-.297 1.117-.33 3.31-.334 3.785v.183c.004.474.037 2.668.334 3.784a2.01 2.01 0 001.415 1.424c1.105.298 5.156.332 6.068.336h.366c.912-.004 4.963-.038 6.068-.336a2.01 2.01 0 001.415-1.424C20 14.257 20 11.636 20 11.636s0-2.62-.334-3.876a2.01 2.01 0 00-1.415-1.423c-1.07-.289-4.898-.33-5.97-.336zm-1.916 3.256l4.181 2.38-4.181 2.378V9.257z" />
+    </svg>
+  );
+}
+
+export default SocialYouTubeIcon;

src/routes/Home.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useContext } from "react";
-import { Flex, Button, Image, Text } from "theme-ui";
+import { Flex, Button, Image, Text, IconButton, Link } from "theme-ui";
 
 import Footer from "../components/Footer";
 
@@ -9,6 +9,10 @@ import DonateModal from "../modals/DonationModal";
 
 import AuthContext from "../contexts/AuthContext";
 
+import RedditIcon from "../icons/SocialRedditIcon";
+import TwitterIcon from "../icons/SocialTwitterIcon";
+import YouTubeIcon from "../icons/SocialYouTubeIcon";
+
 import owlington from "../images/Owlington.png";
 
 function Home() {
@@ -60,6 +64,23 @@ function Home() {
         >
           Support Us
         </Button>
+        <Flex sx={{ justifyContent: "center" }}>
+          <Link href="https://www.reddit.com/r/OwlbearRodeo/">
+            <IconButton title="Reddit" aria-label="Reddit">
+              <RedditIcon />
+            </IconButton>
+          </Link>
+          <Link href="https://twitter.com/OwlbearRodeo">
+            <IconButton title="Twitter" aria-label="Twitter">
+              <TwitterIcon />
+            </IconButton>
+          </Link>
+          <Link href="https://www.youtube.com/channel/UCePe1wJC53_7fbBbSECG7YQ">
+            <IconButton title="YouTube" aria-label="YouTube">
+              <YouTubeIcon />
+            </IconButton>
+          </Link>
+        </Flex>
         <JoinModal
           isOpen={isJoinModalOpen}
           onRequestClose={() => setIsJoinModalOpen(false)}