Merge pull request #1 from gabynr/feature/current-hero

Update the hero to the currently published version 🤩

package.json

@@ -24,6 +24,7 @@
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-helmet": "^5.2.1",
+    "react-particles-js": "^2.7.0",
     "styled-components": "^4.3.2",
     "styled-reset": "^4.0.1"
   },

src/components/Body.js

@@ -7,6 +7,7 @@ import { Section } from "./Section"
 const About = styled(Section)`
   display: flex;
   justify-content: space-around;
+  padding: 7em 0;
   @media (max-width: 1000px) {
     flex-direction: column;
     font-size: 0.8em;
@@ -18,7 +19,7 @@ const StyledDivBody = styled.div`
   padding: 0 75px;
 `
 
-const StyledDivBodyDate = styled.div`    
+const StyledDivBodyDate = styled.div`
   flex-grow: 1;
   padding: 0 75px 0 0;
   @media (max-width: 1000px) {

src/components/HeroBanner.js

@@ -1,17 +1,41 @@
 import React from "react"
 import { graphql, useStaticQuery } from "gatsby"
 import styled from "styled-components"
+import Particles from 'react-particles-js';
+
 import { Lead } from "./Lead"
 import { Section } from "./Section"
 
 const HeroSection = styled(Section)`
-
+  padding-top: 7em;
+  padding-bottom: 7em;
+  position: relative;
+  background-image: ${props => props.bgImage ? `url(${props.bgImage})` : ''};
+  background-size: cover;
+  background-position: center center;
+  background-repeat: no-repeat;
+  height: calc(100vh - 14em);
+`
+const ParticlesContainer = styled('div')`
+  position: absolute;
+  height: 100vh;
+  width: 100vw;
+  top: 0;
+  background: rgba(58, 45, 253, 0.61);
+  div, canvas {
+    height: 100vh;
+  }
 `
 
 const HeroInfo = styled.div`
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -40%);
   display: flex;
   flex-direction: row-reverse;
   margin: 0 5vw;
+  width: 75vw;
   @media (max-width: 550px) {
     flex-direction: column;
     align-items: center;
@@ -26,26 +50,50 @@ const ConfLogo = styled.div`
 
 `
 const Img = styled.img`
-  width: 40vw;
-  height: 41.56vw;
+  width: 25vw;
     @media (max-width: 550px) {
-  width: 80vw;
-  height: 83.02vw;
-
+    width: 80vw;
+    height: 83.02vw;
   }
 `
 
 const BannerTitle = styled.h1`
-  color: white;
-  margin: 0 0 26px;
+  color: #fdd92d;
   font-style: normal;
+  font-weight: 700;
+  margin: 0 0 26px;
 `
 
 const BannerLead = styled(Lead)`
-  color: white;
+  background-color: #3a3fe4d6;
+  color: #ffffff;
   font-style: normal;
+  padding: 10px;
 `
 
+const PARTICLES_PARAMS = {
+  particles: {
+    number: {
+      value: 572,
+      density: {
+        enable: true,
+        value_area: 3126.65351868777,
+      },
+    },
+    size: {
+      value: 3,
+    },
+  },
+  interactivity: {
+    events: {
+      onhover: {
+        enable: true,
+        mode: 'repulse',
+      },
+    },
+  },
+};
+
 const getHeroBannerData = data => {
   const { title, description } = data.heroBannerJson
 
@@ -69,6 +117,9 @@ const HeroBanner = () => {
 
   return (
     <HeroSection bgImage={"conference.png"}>
+      <ParticlesContainer>
+        <Particles params={ PARTICLES_PARAMS } />
+      </ParticlesContainer>
       <HeroInfo>
         <ConfLogo>
           <Img src="pataconf.png" />

src/components/Lugar.js

@@ -6,6 +6,7 @@ import { Section } from "./Section"
 
 
 const AddressSection = styled(Section)`
+  padding: 7em 0;
   @media (max-width: 950px) {
     font-size: 0.8em;
   }

src/components/Schedule.js

@@ -1,8 +1,12 @@
 import React from "react"
 import { graphql, useStaticQuery } from "gatsby"
 import styled from "styled-components"
+
 import { Section } from "./Section"
 
+const Container = styled(Section)`
+  padding: 7em 0;
+`
 const StyledH4 = styled.h4`
   text-align: center;
   margin-bottom: 0.78787878787879em;
@@ -159,7 +163,7 @@ const Schedule = () => {
   }
 
   return (
-    <Section id="schedule" secondary>
+    <Container id="schedule" secondary>
       <StyledH2>Agenda</StyledH2>
       <StyledTable>
         <thead>
@@ -182,7 +186,7 @@ const Schedule = () => {
           ))}
         </tbody>
       </StyledTable>
-    </Section>
+    </Container>
   )
 }
 

src/components/Section.js

@@ -1,8 +1,7 @@
 import styled from "styled-components"
 
 export const Section = styled.section`
-  padding-top: 7.42857143em;
-  padding-bottom: 7.42857143em;
+  position: relative;
   ${({ secondary, bgImage }) =>
     secondary
       ? "background-color: #fafafa;"
@@ -11,7 +10,7 @@ export const Section = styled.section`
       : "border-top: 1px solid #ebebeb;"}
 
   ${({ bgImage }) => bgImage ? `\
-    background-image: url(\"${bgImage}\");\
+    // background-image: url(\"${bgImage}\");\
     background-size: cover;\
     width: 100vw;\
     height: 100vh;\

src/components/Sponsors.js

@@ -5,6 +5,9 @@ import Img from "gatsby-image"
 import { Lead } from "./Lead"
 import { Section } from "./Section"
 
+const Container = styled(Section)`
+  padding: 7em 0;
+`
 const StyledDivApoya = styled.div`
   text-align: center;
   padding: 0 15px;
@@ -67,7 +70,7 @@ const Sponsors = () => {
   const { sponsorshipLevels, codeOfConductOrganization, codeOfConductURL } = sponsorsData.dataJson
   const sponsors = sponsorsData.allSponsorsDataJson.edges.map(e => e.node)
   return (
-    <Section>
+    <Container>
       <StyledDivApoya>
         <h2>Apoyan</h2>
         <Lead>
@@ -98,7 +101,7 @@ const Sponsors = () => {
           </SponsorList>
         </SponsorLevel>
       ))}
-    </Section>
+    </Container>
   )
 }
 

yarn.lock

@@ -9292,6 +9292,13 @@ react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
+react-particles-js@^2.7.0:
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/react-particles-js/-/react-particles-js-2.7.0.tgz#1b13a85d948e63016cb2b400f734758b0a985727"
+  integrity sha512-gsYIr55plOMB6nZW2iBjgXoqOZqBvggW9trNTk0mYHkvqQUpuxhcCDGwRwnts10XQ442PjzxZbklwMlhSOcfgA==
+  dependencies:
+    lodash "^4.17.11"
+
 react-reconciler@^0.20.0:
   version "0.20.4"
   resolved "https://registry.yarnpkg.com/react-reconciler/-/react-reconciler-0.20.4.tgz#3da6a95841592f849cb4edd3d38676c86fd920b2"