chore: some adjustments

docs/src/components/AppsList/constants.js

@@ -5,16 +5,9 @@ export const data = [
     logo: require("../../../static/img/sura-logo.png").default,
   },
   {
-    logo: require("../../../static/img/holadoc-logo.png").default,
+    logo: require("../../../static/img/sura-logo.png").default,
   },
   {
-    title: "Powered by React",
-    logo: require("../../../static/img/undraw_docusaurus_react.svg").default,
-    description: (
-      <>
-        Extend or customize your website layout by reusing React. Docusaurus can
-        be extended while reusing the same header and footer.
-      </>
-    ),
+    logo: require("../../../static/img/holadoc-logo.png").default,
   },
 ];

docs/src/components/AppsList/index.js

@@ -7,11 +7,11 @@ import { data } from "./constants";
 const AppItem = ({ logo, title, description }) => {
   return (
     <div className={clsx("col col--4")}>
-      <div>
+      <div className={styles.appLogoContainer}>
         <img alt={title} src={logo} className={styles.appLogo} />
         {/* <Svg className={styles.featureSvg} alt={title} /> */}
       </div>
-      <div className="text--center padding-horiz--md">
+      <div>
         {title && <h3>{title}</h3>}
         {description && <p>{description}</p>}
       </div>
@@ -27,29 +27,18 @@ const AppsList = () => {
           className="row"
           style={{
             marginTop: 32,
+            marginBottom: 32,
           }}
         >
-          <span
-            style={{
-              color: "#002B40",
-              fontWeight: 500,
-              fontSize: 24,
-            }}
-          >
-            Estas aplicaciones ya lo están utilizando...
-          </span>
+          <h4 className={styles.appListTitle}>
+            Estas aplicaciones ya lo están utilizando
+          </h4>
         </div>
         <div className="row">
           {data.map((props, idx) => (
             <AppItem key={idx} {...props} />
           ))}
         </div>
-        <div className="row">
-          <span style={{ color: "#002B40", fontSize: 14 }}>
-            Si lo estás usando y querés que tu app aparezca, hacenos un PR
-            agregando tu aplicación
-          </span>
-        </div>
       </div>
     </section>
   );

docs/src/components/AppsList/styles.module.css

@@ -7,7 +7,26 @@
   width: 100%;
 }
 
+.appLogoContainer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  align-content: center;
+  height: 100%;
+}
+
 .appLogo {
   height: auto;
   width: 240px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.appListTitle {
+  color: #002b40;
+  font-weight: 500;
+  font-size: 32px;
+  text-align: center;
+  width: 100%;
 }

docs/src/components/Header/index.js

@@ -1,32 +1,24 @@
-import React from 'react';
-import clsx from 'clsx';
-import Link from '@docusaurus/Link';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import React from "react";
+import clsx from "clsx";
+import Link from "@docusaurus/Link";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 
-import styles from './styles.module.css';
+import styles from "./styles.module.css";
 
 const Header = () => {
   const { siteConfig } = useDocusaurusContext();
 
   return (
-    <header className={clsx('hero hero--primary', styles.heroBanner)}>
+    <header className={clsx("hero hero--primary", styles.heroBanner)}>
       <div className="container">
-        <h1 className="hero__title">{siteConfig.title}</h1>
-        <p className="hero__subtitle">{siteConfig.tagline}</p>
-        <div className={styles.buttons}>
-          <Link
-            style={{ backgroundColor: '#EBFDF3' }}
-            className="button button--secondary button--lg"
-            to="mailto:hello@blackbox-vision.tech?subject=React Native MercadoPago PX"
-          >
-            Contactanos
-          </Link>
-        </div>
+        <h1 className={clsx("hero__title", styles.heroText)}>
+          {siteConfig.title}
+        </h1>
       </div>
     </header>
   );
 };
 
-Header.displayName = 'Header';
+Header.displayName = "Header";
 
 export default Header;

docs/src/components/Header/styles.module.css

@@ -10,6 +10,11 @@
   text-align: center;
   position: relative;
   overflow: hidden;
+  height: 100vh;
+}
+
+.heroText {
+  color: #002b40;
 }
 
 @media screen and (max-width: 966px) {

docs/src/css/custom.css

@@ -37,6 +37,7 @@ body {
 
 .hero {
   background: no-repeat url("../../static/img/hero.png");
+  background-size: cover;
 }
 
 .footer--dark {

docs/src/pages/index.js

@@ -1,9 +1,13 @@
-import React from 'react';
-import Layout from '@theme/Layout';
-import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import React from "react";
+import clsx from "clsx";
+import Link from "@docusaurus/Link";
+import Layout from "@theme/Layout";
+import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 
-import Header from '../components/Header';
-import AppsList from '../components/AppsList';
+import Header from "../components/Header";
+import AppsList from "../components/AppsList";
+
+import styles from "./styles.module.css";
 
 const Home = () => {
   const { siteConfig } = useDocusaurusContext();
@@ -14,13 +18,27 @@ const Home = () => {
       description="Description will go into a meta tag in <head />"
     >
       <Header />
+      <div className={styles.banner}>
+        <p className={clsx("hero__subtitle", styles.bannerText)}>
+          {siteConfig.tagline}
+        </p>
+        <div className={styles.buttons}>
+          <Link
+            style={{ backgroundColor: "#EBFDF3" }}
+            className="button button--secondary button--lg"
+            to="mailto:hello@blackbox-vision.tech?subject=React Native MercadoPago PX"
+          >
+            Contáctanos
+          </Link>
+        </div>
+      </div>
       <main>
         <AppsList />
       </main>
     </Layout>
   );
 };
 
-Home.displayName = 'Home';
+Home.displayName = "Home";
 
 export default Home;

docs/src/pages/styles.module.css

@@ -0,0 +1,9 @@
+.banner {
+  padding: 4rem 0;
+  text-align: center;
+  background-color: #002b40;
+}
+
+.bannerText {
+  color: white;
+}