Feature/contact sponsors (#101)

* separacion de todo el css * add HomeInformation * small corrections * change images * add transitions * add empty line * change DOM to ref * add background layer * change responsive according to invision * initSponsors * initContact * Add Contact JOinUs/OpenPositions * Color Updates and joinUsCallBack * Add SponsorUs * Add Packages Data * background pattern * Add SponsorUs callback * logo smaller in packages * Deletes unnecessary contstructor in Contact component * Fixes type from merge * Substitutes span with h2 in ContactJoinUs component * Refactors ContactSponsorUs component to simplify element tree * Refactors ContactSponsorPackages component to simplify elements tree Co-authored-by: Eduardo Sánchez <[email protected]>
gallosanchez23 · May 9, 2020 · 846987e · 846987e
1 parent 9cd5a2c
commit 846987e
Show file tree

Hide file tree

Showing 9 changed files with 231 additions and 9 deletions.
diff --git a/src/components/Contact/Contact.css b/src/components/Contact/Contact.css
@@ -1,5 +1,4 @@
 .contact-container {
   height: auto;
-  position: relative;
   background: url(../../images/github_pattern.svg) top left/auto repeat fixed, linear-gradient( 20deg, rgba(28, 35, 41, 1) 50%, rgba(160, 101, 170, 1) 100%);
 }
diff --git a/src/components/Contact/Contact.js b/src/components/Contact/Contact.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import ContactJoinUs from './ContactJoinUs/ContactJoinUs.js';
 import ContactSponsorUs from './ContactSponsorUs/ContactSponsorUs.js';
 import positionsData from 'data/positions.json';
+import sponsorsData from 'data/sponsors.json';
 import Footer from 'components/Footer/Footer';
 import './Contact.css';
 
@@ -11,7 +12,7 @@ class Contact extends Component {
 
     return (
       <div className='contact-container'>
-        <ContactSponsorUs />
+        <ContactSponsorUs sponsorsData={ sponsorsData } />
         <ContactJoinUs positionsData={ positionsData } />
         <Footer />
       </div>

diff --git a/src/components/Contact/ContactJoinUs/ContactJoinUs.js b/src/components/Contact/ContactJoinUs/ContactJoinUs.js
@@ -19,11 +19,11 @@ class ContactJoinUs extends Component {
     return(
       <div id='contact-joinus' className='contact-joinus'>
         <div className='contact-joinus-title-container'>
-          <span>
+          <h2>
             Hello there! Are you a candidate?
             <br />
             Join Us!
-          </span>
+          </h2>
         </div>
         <ContactOpenPositions positionsData={ this.positionsData } />
         <div className='contact-joinus-btn-container'>

diff --git a/src/components/Contact/ContactSponsorUs/ContactSponsorPackages/ContactSponsorPackages.css b/src/components/Contact/ContactSponsorUs/ContactSponsorPackages/ContactSponsorPackages.css
@@ -0,0 +1,55 @@
+.packages-card {
+  height: 100%;
+  background-color: #13191E;
+  border-radius: 6px;
+  border: none;
+  -webkit-transition: all .3s ease-in, all .3s ease-out;
+  transition: all .3s ease-in, all .3s ease-out;
+  padding-bottom: 40px;
+}
+
+.packages-card:hover {
+  -webkit-box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5) !important;
+  box-shadow: 10px 10px 10px rgba(0, 0, 0, 0.5) !important;
+}
+
+hr {
+  border-color: white !important;
+}
+
+.benefit-container {
+  display: flex;
+  flex-direction: row;
+  text-align: left;
+  margin-bottom: 10px;
+}
+
+.benefit-icon {
+  color: #4F72B8;
+  font-size: 25px;
+}
+
+.benefit-text {
+  font-size: 13px;
+}
+
+.package-card-footer {
+  display: flex;
+  position: absolute;
+  bottom: 7px;
+  left: 0px;
+}
+
+.package-card-footer img {
+  width: 100%;
+}
+
+.package-card-footer .no-padding {
+  padding: 10px;
+}
+
+@media (min-width: 1500px) {
+  .package-card-footer img {
+    width: 70%
+  }
+}
diff --git a/src/components/Contact/ContactSponsorUs/ContactSponsorPackages/ContactSponsorPackages.js b/src/components/Contact/ContactSponsorUs/ContactSponsorPackages/ContactSponsorPackages.js
@@ -0,0 +1,61 @@
+import React, { Component } from 'react';
+import Card from 'react-bootstrap/Card';
+import { Row, Col } from 'react-bootstrap';
+import logo from 'images/white_logo.png';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCheckCircle } from '@fortawesome/free-solid-svg-icons';
+import './ContactSponsorPackages.css';
+
+class ContactSponsorPackages extends Component {
+  constructor(props) {
+    super(props);
+
+    this.packages = props.packagesData.packages;
+  }
+
+  render() {
+    return(
+      <Row className='justify-content-center'>
+        <Col xs='10' sm='10' md='10' lg='10' xl='10'>
+          <Row className='justify-content-center mt-4'>
+            { this.packages.map(pkg => (
+              <Col xs='10' sm='6' md='6' lg='3' xl='3' className='mt-4'>
+                <Card
+                  className='packages-card'
+                  key={ pkg.id }
+                >
+                  <Card.Body>
+                    <h4>
+                      { pkg.name }
+                    </h4>
+                    <hr />
+                    { pkg.benefits.map(benefit => (
+                      <div className='benefit-container'>
+                        <div className='benefit-icon'>
+                          <FontAwesomeIcon icon={ faCheckCircle } className='mr-2' />
+                        </div>
+                        <div className='benefit-text'>
+                          { benefit }
+                        </div>
+                      </div>
+                    )) }
+                    <Row className='justify-content-center mt-4 package-card-footer'>
+                      <Col xs='4' sm='4' md='4' lg='4' xl='4' className='no-padding'><hr /></Col>
+                      <Col xs='3' sm='3' md='3' lg='3' className='no-padding'>
+                        <img src={ logo } alt='Logo' />
+                      </Col>
+                      <Col xs='4' sm='4' md='4' lg='4' xl='4' className='no-padding'><hr /></Col>
+                    </Row>
+                  </Card.Body>
+
+                </Card>
+              </Col>
+            )) }
+          </Row>
+        </Col>
+      </Row>
+    );
+  }
+}
+
+export default ContactSponsorPackages;
diff --git a/src/components/Contact/ContactSponsorUs/ContactSponsorUs.css b/src/components/Contact/ContactSponsorUs/ContactSponsorUs.css
@@ -1,6 +1,39 @@
-.contact-sponsorus {
-  min-height: 1300px;
-  position: relative;
-  color: rgba(255, 255, 255, 0.8);
+.contact-sponsor-us {
+  margin-bottom: 100px;
+  padding-top: 40px;
+  color: white;
   text-align: center;
 }
+
+.contact-sponsor-us-btn {
+  border: 1px solid #4F72B8;
+  border-radius: 8px;
+  font-size: 30px;
+  width: 22%;
+  height: 80px;
+  color: white;
+  transition: 0.3s;
+  background-color: #13191E;
+}
+
+@media (max-width: 750px) {
+  .contact-sponsor-us-btn {
+    width: 30%;
+    font-size: 25px;
+  }
+}
+
+@media (max-width: 610px) {
+  .contact-sponsor-us-btn {
+    width: 40%;
+    font-size: 25px;
+    height: 65px;
+    margin-top: 10px;
+  }
+}
+
+.contact-sponsor-us-btn:hover {
+  color: white;
+  border: 1px solid #13191E;
+  background-color: #4F72B8;
+}
diff --git a/src/components/Contact/ContactSponsorUs/ContactSponsorUs.js b/src/components/Contact/ContactSponsorUs/ContactSponsorUs.js
@@ -1,10 +1,33 @@
 import React, { Component } from 'react';
+import ContactSponsorPackages from './ContactSponsorPackages/ContactSponsorPackages.js';
 import './ContactSponsorUs.css';
 
 class ContactSponsorUs extends Component {
+  constructor(props) {
+    super(props);
+
+    this.sponsorsData = props.sponsorsData;
+
+    this.sponsorUsCallback = this.sponsorUsCallback.bind(this);
+  }
+
+  sponsorUsCallback() {
+    window.open(this.sponsorsData.url_contact, '_blank');
+  }
+
   render() {
     return(
-      <div className='contact-sponsorus'></div>
+      <div id='contact-sponsor-us' className='contact-sponsor-us'>
+        <h2>
+          Would you like to support RoBorregos?
+          <br />
+          Join our sponsors team!
+        </h2>
+        <ContactSponsorPackages packagesData={ this.sponsorsData } />
+        <button onClick={ this.sponsorUsCallback } className='btn contact-sponsor-us-btn mt-4' variant='outline-primary'>
+          Sponsor Us!
+        </button>
+      </div>
     );
   }
 }

diff --git a/src/data/sponsors.json b/src/data/sponsors.json
@@ -1,4 +1,5 @@
 {
+  "url_contact":"mailto:[email protected]",
   "sponsors": [
     {
       "name": "Tecnológico de Monterrey",
@@ -15,5 +16,53 @@
       "img_path": "oneila.png",
       "link": "http://www.oneila.mx"
     }
+  ],
+  "packages": [
+    {
+      "name" : "Jumper",
+      "benefits" : [
+        "6 menciones genéricas en redes sociales (u/c bimestre)",
+        "Invitación a eventos y newsletters",
+        "Logo en nuestras playeras (espalda chico)",
+        "Logo en nuestra página oficial (chico)",
+        "Logo en lona del equipo (chico)"
+      ]
+    },
+    {
+      "name" : "Led",
+      "benefits" : [
+        "12 menciones genéricas en redes sociales (u/c mes)",
+        "2 publicaciones personalizadas en Facebook (u/c semestre)",
+        "Invitación a eventos y newsletters",
+        "Logo en nuestras playeras (espalda mediano)",
+        "Logo en nuestra página oficial (mediano)",
+        "Logo en lona del equipo (mediano)",
+        "Logo en nuestros robots (chico)"
+      ]
+    },
+    {
+      "name" : "Motor",
+      "benefits" : [
+        "24 menciones genéricas en redes sociales (2 c/mes)",
+        "4 publicaciones personalizadas en Facebook (2 c/semestre)",
+        "Invitación a eventos y newsletters",
+        "Logo en nuestras playeras (frente mediano)",
+        "Logo en nuestra página oficial (mediano)",
+        "Logo en lona del equipo (mediano)",
+        "Logo en nuestros robots (mediano)"
+      ]
+    },
+    {
+      "name" : "Robot",
+      "benefits" : [
+        "24 menciones genéricas en redes sociales (2 c/mes)",
+        "6 publicaciones personalizadas en Facebook (3 c/semestre)",
+        "Invitación a eventos y newsletters",
+        "Logo en nuestras playeras (frente grande)",
+        "Logo en nuestra página oficial (grande)",
+        "Logo en lona del equipo (grande)",
+        "Logo en nuestros robots (grande)"
+      ]
+    }
   ]
 }
diff --git a/src/images/github_pattern_clearer.svg b/src/images/github_pattern_clearer.svg