Added HacktoberFest Card (#124)

* Added HacktoberFest Card
* Updated Hacktober Logo to Latest 2020
* Updated Hacktober link + Updated text

Signed-off-by: Sayan Mondal <[email protected]>

public/page-data/community/page-data.json

@@ -1 +1 @@
-{"componentChunkName":"component---src-pages-community-tsx","path":"/community/","result":{"pageContext":{}},"staticQueryHashes":["1505837148","243816524","281358774","3205528609","3408949196","74630084","822897411"]}
+{"componentChunkName":"component---src-pages-community-tsx","path":"/community/","result":{"pageContext":{}},"staticQueryHashes":["1505837148","1578129905","243816524","281358774","3408949196","74630084","822897411"]}

src/components/image-fetch/HacktoberFest.tsx

@@ -0,0 +1,47 @@
+import { graphql, useStaticQuery } from "gatsby";
+import Img from "gatsby-image";
+import React from "react";
+import styled from "styled-components";
+
+const Wrapper = styled.div`
+  width: 100%;
+  height: 100%;
+`;
+
+const StyledImage = styled(Img)`
+  margin: auto;
+  width: 100%;
+  height: ${(props) =>
+    props.theme.screens.sm
+      ? "8rem"
+      : props.theme.screens.xl
+      ? "10rem"
+      : "10rem"};
+  object-fit: contain;
+`;
+
+const HacktoberFestImage: React.FC = () => {
+  const data = useStaticQuery(graphql`
+    query {
+      image: file(relativePath: { eq: "hacktoberfest.png" }) {
+        childImageSharp {
+          fluid(maxWidth: 1024, quality: 100) {
+            ...GatsbyImageSharpFluid_withWebp
+            ...GatsbyImageSharpFluidLimitPresentationSize
+          }
+        }
+      }
+    }
+  `);
+
+  return (
+    <Wrapper>
+      <StyledImage
+        fluid={data.image.childImageSharp.fluid}
+        alt="Image of Litmus Features"
+      />
+    </Wrapper>
+  );
+};
+
+export { HacktoberFestImage };

src/components/sections/community/CommunityEvents.tsx

@@ -7,7 +7,7 @@ import {
 } from "../../../components/layout";
 import { Heading, Paragraph } from "../../../components/texts";
 import { CNCFImage } from "../../image-fetch/CNCF";
-import { CommunitySyncUpImage } from "../../image-fetch/CommunitySyncUp";
+import { HacktoberFestImage } from "../../image-fetch/HacktoberFest";
 
 const CommunityEvents: React.FC = () => {
   return (
@@ -26,22 +26,31 @@ const CommunityEvents: React.FC = () => {
         </BoundedContainer>
         <BoundedContainer breakpoint="xl" width="40rem" margin="0 auto">
           <ResponsiveRow breakpoint="xl">
+            {/* <Card
+              width="100%"
+              height="100%"
+              subheading="Community Sync Up"
+              body="Meet and learn from the maintainers, contributors, and developers of Litmus everything about Chaos Engineering."
+              image={<CommunitySyncUpImage />}
+              link="https://zoom.us/j/91358162694"
+            /> */}
+
             <Card
               width="100%"
               height="100%"
-              subheading="Kubernetes Chaos Engineering Meetup"
-              body=" Discussion about the best practices and tutorials for practicing chaos engineering"
-              image={<CNCFImage />}
-              link="https://community.cncf.io/events/details/cncf-kubernetes-chaos-engineering-meetup-group-presents-kubernetes-chaos-engineering-meetup-1/#/"
+              subheading="HacktoberFest"
+              body="Contribute to LitmusChaos and get a chance to win not only swags but also a grand prize and much more"
+              image={<HacktoberFestImage />}
+              link="https://mayadata.io/hacktoberfest-2020"
             />
 
             <Card
               width="100%"
               height="100%"
-              subheading="Community Sync Up"
-              body="Meet and learn from the maintainers, contributors, and developers of Litmus everything about Chaos Engineering."
-              image={<CommunitySyncUpImage />}
-              link="https://zoom.us/j/91358162694"
+              subheading="Kubernetes Chaos Engineering Meetup"
+              body=" Discussion about the best practices and tutorials for practicing chaos engineering"
+              image={<CNCFImage />}
+              link="https://community.cncf.io/events/details/cncf-kubernetes-chaos-engineering-meetup-group-presents-kubernetes-chaos-engineering-meetup-1/#/"
             />
           </ResponsiveRow>
         </BoundedContainer>