Ops-1205: Closing screen

src/App.js

@@ -2,16 +2,7 @@ import React from 'react';
 import './sass/_index.scss';
 import Menu from "./components/Menu";
 import Heading from "./components/Heading";
-import Slider from "./components/Slider";
-import Intro from "./components/Intro";
-import Objectives from "./components/Objectives";
-import Banner from "./components/Banner";
-import Oportunities from "./components/Oportunities";
-import Providers from "./components/Providers";
-import Faq from "./components/Faq";
-import Footer from "./components/Footer";
-import bannerAumentarProductividad1 from "./assets/banner-aumentar-productividad-1.jpg";
-import bannerAumentarProductividad2 from "./assets/banner-aumentar-productividad-2.jpg";
+import Closing from "./components/Closing";
 
 function App() {
   const apiUrl = "https://www.thetalentplace.cr/pinn";
@@ -20,37 +11,7 @@ function App() {
     <>
       <Menu />
       <Heading />
-      <Slider />
-      <section id="section-pinn" className="intro-section">
-        <Intro />
-        <Objectives />
-      </section>
-      <Banner
-        image={bannerAumentarProductividad1}
-        content={
-          <>
-            <b>Aumentar la productividad</b> del país mediante la formación de <b>capital humano</b>.
-          </>
-        }
-        boxBackground="light-blue"
-      />
-      <Oportunities
-        apiUrl={apiUrl}
-      />
-      <Banner
-        image={bannerAumentarProductividad2}
-        content={
-          <>
-            Apoyamos las <b>capacidades</b> de <b>empleabilidad de Costa Rica</b>.
-          </>
-        }
-        boxBackground="light-green"
-      />
-      <Providers />
-      <Faq
-        apiUrl={apiUrl}
-      />
-      <Footer />
+      <Closing />
     </>
   );
 }

src/components/Closing/Closing.scss

@@ -0,0 +1,51 @@
+.closing {
+  width: 96%;
+  text-align: center;
+  margin: auto;
+  padding-top: 48px;
+
+  @media screen and (min-width: 768px) {
+    width: 768px;
+  }
+}
+
+.closing__title {
+  font-size: 24px;
+}
+
+.closing__description {
+  font-size: 20px;
+}
+
+.closing__list {
+  display: flex;
+  flex-direction: column;
+
+  @media screen and (min-width: 768px) {
+    flex-direction: row;
+  }
+}
+
+.closing__list-section {
+  list-style: none;
+  margin: auto;
+  padding-top: 40px;
+}
+
+.closing__list-link {
+  display: flex;
+  flex-direction: column;
+justify-content: center;
+margin: auto;
+
+  & img {
+    width: 150px;
+  }
+
+  & h4 {
+    color: #0066B2;
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}

src/components/Closing/index.jsx

@@ -0,0 +1,41 @@
+import React from "react";
+import "./Closing.scss";
+import logoMiccit from "./../../assets/micitt-logo.png"
+import logoCindeJobs from "./../../assets/cinde-jobs-logo.png"
+import logoTTP from "./../../assets/ttp-logo.png"
+
+// ToDo: Change the name of this component name to Closing
+function Closing() {
+  return (
+    <div className="closing">
+      <h1 className="closing__title">
+        Hemos dado por concluido permanentemente nuestro proceso con el programa de Becas PINN; esto después de haber colocado más de 1700 becas y $7 millones.
+      </h1>
+      <p className="closing__description">
+        Antes de despedirnos, queremos invitarte a que nos sigás en nuestras páginas aliadas donde podrás tener más detalles sobre iniciativas como estas:
+      </p>
+      <ul className="closing__list">
+        <li className="closing__list-section">
+          <a href="https://www.facebook.com/micitcr" className="closing__list-link">
+            <img src={logoMiccit} alt="Miccit Logo" />
+            <h4>Miccit</h4>
+          </a>
+        </li>
+        <li className="closing__list-section">
+          <a href="https://www.facebook.com/CindeJobs" className="closing__list-link">
+            <img src={logoCindeJobs} alt="Cinde Jobs Logo" />
+            <h4>CINDE Jobs</h4>
+          </a>
+        </li>
+        <li className="closing__list-section">
+          <a href="https://www.facebook.com/thetalentplacecr" className="closing__list-link">
+            <img src={logoTTP} alt="The talent place Logo" />
+            <h4>The Talent Place</h4>
+          </a>
+        </li>
+      </ul>
+    </div>
+  )
+};
+
+export default Closing;

src/components/Heading/Heading.scss

@@ -1,9 +1,12 @@
 .heading {
   background-color: #0066B2;
-  padding: 25px 40px;
+  background-image: url("../../assets/patron.svg");
+  background-size: contain;
+  padding: 32px 40px;
 }
 
 .heading__title {
+  text-align: center;
   font-weight: bold;
   font-size: 36px;
   color: #fff;

src/components/Heading/index.jsx

@@ -5,7 +5,7 @@ import "./Heading.scss";
 function Heading() {
   return (
     <div className="heading">
-      <h1 className="heading__title">Programa de Innovación y<br /> Capital Humano (PINN)</h1>
+      <h1 className="heading__title">¡Damos por finalizado el programa Becas PINN!</h1>
     </div>
   )
 };