diff --git a/components/Company.js b/components/Company.js index e1d7141..6aa6a6f 100644 --- a/components/Company.js +++ b/components/Company.js @@ -5,37 +5,41 @@ import { faGlobeAmericas, faBuilding } from "@fortawesome/free-solid-svg-icons"; const icons = { allowFullRemote: faGlobeAmericas, - hasPhysicalOffices: faBuilding + hasPhysicalOffices: faBuilding, }; const descriptions = { - allowFullRemote: `Allows employees to work remote every day of the year`, - hasPhysicalOffices: `Has a physical office` + allowFullRemote: { + true: `Allows employees to be remote every day of the week`, + false: `Allow employees to be remote some days of the week`, + }, + hasPhysicalOffices: { + true: `Has a physical office`, + false: `Doesn't have a physical office`, + }, }; const Wrapper = styled.div` display: flex; - padding: 1.5rem 1rem; - margin: 1rem 1.5rem; - box-shadow: 0 15px 30px 0 rgba(0, 0, 0, 0.11), - 0 5px 15px 0 rgba(0, 0, 0, 0.08); - transition: 300ms; + flex-direction: column; + justify-content: center; + padding: 2.5rem 1.5rem; + position: relative; +`; - &:hover { - box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.11), - 0 5px 15px 0 rgba(0, 0, 0, 0.08); - } +const TitleContainer = styled.div` + display: flex; + align-items: center; `; const Picture = styled.img` - width: 48px; - height: 48px; + width: 3rem; + height: 3rem; object-fit: contain; + margin-right: 0.5rem; `; -const Information = styled.div` - padding: 0 0.5rem; -`; +const Information = styled.div``; const Title = styled.h2` font-family: "Montserrat", sans-serif; @@ -66,6 +70,9 @@ const Description = styled.p` `; const IconList = styled.div` + position: absolute; + right: 1rem; + bottom: 1rem; display: flex; margin-top: 0.5rem; @@ -80,11 +87,22 @@ const IconList = styled.div` } `; -export const Company = ({ name, url, picture, description, color, meta }) => { +const Icon = styled(FontAwesomeIcon)` + opacity: ${({ active }) => (active ? 1 : 0.3)}; +`; + +const BaseCompany = ({ + name, + url, + picture, + description, + meta = {}, + ...rest +}) => { return ( - - - + + + {url ? ( <a href={url} target="_blank"> @@ -94,21 +112,25 @@ export const Company = ({ name, url, picture, description, color, meta }) => { name )} + + {description} - {Object.keys(meta) - .filter(key => !!meta[key]) - .map(key => { - return ( - - ); - })} + {Object.keys(meta).map((key) => { + const active = !!meta[key]; + return ( + + ); + })} ); }; + +export const Company = styled(BaseCompany)``; diff --git a/data/companies.js b/data/companies.js index 299d7ba..9b57f45 100644 --- a/data/companies.js +++ b/data/companies.js @@ -6,8 +6,8 @@ export default [ description: "Fueling the next healthcare industry.", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { picture: "https://www.wyeworks.com/favicon.png", @@ -16,8 +16,8 @@ export default [ description: "Inspiring people to build great software", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { picture: "https://tarmac.io/favicon.ico", @@ -26,8 +26,8 @@ export default [ description: "We design, build, scale and support exceptional software.", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { picture: "/images/logoAttica.svg", @@ -36,68 +36,75 @@ export default [ description: "Transform your ideas into tech-driven solutions", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { - picture: "https://www.globant.com/sites/default/files/FavIcon-Globantwebsite-2x_5.png", + picture: + "https://www.globant.com/sites/default/files/FavIcon-Globantwebsite-2x_5.png", url: "https://www.globant.com", name: "Globant", - description: "We empower organizations through digital & cognitive transformation", + description: + "We empower organizations through digital & cognitive transformation", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { picture: "https://www.tavanoteam.com/wp-content/uploads/2018/07/tt-fav.png", url: "https://www.tavanoteam.com", name: "Tavano Team", - description: "Delivering creative SuiteCommerce solutions to organizations worldwide", + description: + "Delivering creative SuiteCommerce solutions to organizations worldwide", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { picture: "https://www.overactive.com/web/img/web-icons/114x114.png", url: "https://www.overactive.com", name: "Overactive", - description: "We provide technology solutions from four different strategic locations: USA, PR, AR, UY. Work with us, send your cv to talent@overactive.com #WeKnowHow.", + description: + "We provide technology solutions from four different strategic locations: USA, PR, AR, UY. Work with us, send your cv to talent@overactive.com #WeKnowHow.", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { picture: "https://tryolabs.com/images/layout/tryolabs-icon.0084317d.svg", url: "https://tryolabs.com", name: "Tryolabs", - description: "We build amazing products using Machine Learning & AI components", + description: + "We build amazing products using Machine Learning & AI components", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { picture: "/images/formula-logo.jpg", url: "http://www.formula.uy/", name: "Fórmula", - description: "Servicio de suscripción mensual de productos de belleza y agencia de comunicación de marcas de cosmética", + description: + "Servicio de suscripción mensual de productos de belleza y agencia de comunicación de marcas de cosmética", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { - picture: "https://www.endava.com/-/media/EndavaDigital/Endava/Images/MetaDataImages/preview-image.ashx", + picture: + "https://www.endava.com/-/media/EndavaDigital/Endava/Images/MetaDataImages/preview-image.ashx", url: "https://www.endava.com/", name: "Endava", description: "We deliver global transformation", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { picture: "https://micheque.uy/favicon.ico", @@ -106,38 +113,41 @@ export default [ description: "Reinventamos el financiamiento de las Pymes", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { - picture: "https://secureservercdn.net/166.62.115.254/f46.324.myftpupload.com/wp-content/uploads/2018/02/favicon.png", + picture: + "https://secureservercdn.net/166.62.115.254/f46.324.myftpupload.com/wp-content/uploads/2018/02/favicon.png", url: "https://www.inswitch.com/", name: "IN Switch", description: "Lending & fintech innovation", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { picture: "/images/qualabs.png", url: "https://www.qualabs.com/", name: "Qualabs", - description: "We are video distribution business enablers through technology products and professional services.", + description: + "We are video distribution business enablers through technology products and professional services.", meta: { allowFullRemote: false, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { picture: "https://sibra.uy/img/SibraIco.ico", url: "https://sibra.uy/", name: "Sibra", - description: "Brindamos soluciones integrales de software, enfocados en la innovación tecnológica aplicada al entorno empresarial.", + description: + "Brindamos soluciones integrales de software, enfocados en la innovación tecnológica aplicada al entorno empresarial.", meta: { allowFullRemote: true, - hasPhysicalOffices: false - } + hasPhysicalOffices: false, + }, }, { picture: "/images/switch-logo.png", @@ -147,28 +157,31 @@ export default [ "Switch is a custom application development firm based in Montevideo, Uruguay - holding commercial offices in Chicago, Austin, and Denver.", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { - picture: "https://d33wubrfki0l68.cloudfront.net/d79bc510efd65320fac54526c2b52ebdbaae967c/4bfaa/blog/short-white-streaver.png", + picture: + "https://d33wubrfki0l68.cloudfront.net/d79bc510efd65320fac54526c2b52ebdbaae967c/4bfaa/blog/short-white-streaver.png", url: "https://www.streaver.com", name: "Streaver", description: "We turn your business ideas into action.", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { - picture: "https://scontent.fmvd1-1.fna.fbcdn.net/v/t1.0-9/12009649_1680564098845933_8958272112656141499_n.png?_nc_cat=108&_nc_sid=85a577&_nc_ohc=6F5ZhpxyDc0AX8ZMnb5&_nc_ht=scontent.fmvd1-1.fna&oh=528c41bc8aa02f2306fec22942ffd98c&oe=5E9354CF", + picture: + "https://scontent.fmvd1-1.fna.fbcdn.net/v/t1.0-9/12009649_1680564098845933_8958272112656141499_n.png?_nc_cat=108&_nc_sid=85a577&_nc_ohc=6F5ZhpxyDc0AX8ZMnb5&_nc_ht=scontent.fmvd1-1.fna&oh=528c41bc8aa02f2306fec22942ffd98c&oe=5E9354CF", url: "https://kreitech.io", name: "Kreitech", - description: "Enabling ideas through software and Hardware. Software and IoT Agency", + description: + "Enabling ideas through software and Hardware. Software and IoT Agency", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { picture: "https://createthrive.com/assets/logos/createthrive-icon.png", @@ -177,8 +190,8 @@ export default [ description: "Custom Software Tools for Startups and Enterprises", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { picture: "https://www.infuy.com/images/infuy.svg", @@ -187,58 +200,63 @@ export default [ description: "Your challenges. Our innovative solutions.", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { picture: "https://lightit.io/favicon.ico", url: "https://lightit.io/", name: "Light-it", - description: "We are a digital product studio that combines strategic thinking and the latest technologies to craft innovative solutions that consistently break ground.", + description: + "We are a digital product studio that combines strategic thinking and the latest technologies to craft innovative solutions that consistently break ground.", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { picture: "https://bluekiri.com/images/bluekiri_leaf.png", url: "https://bluekiri.com/", name: "Bluekiri", - description: "Bluekiri has the team, the knowledge and the technology to architect and manage your digital business. We provide you with a high performance, high availability, cost effective global solution.", + description: + "Bluekiri has the team, the knowledge and the technology to architect and manage your digital business. We provide you with a high performance, high availability, cost effective global solution.", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { - picture: "https://loopstudio.dev/wp-content/uploads/2019/03/cropped-logofavicon-192x192.png", + picture: + "https://loopstudio.dev/wp-content/uploads/2019/03/cropped-logofavicon-192x192.png", url: "https://loopstudio.dev/", name: "LoopStudio", description: "Extraordinary Services for Extraordinary Customers", meta: { allowFullRemote: false, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { picture: "https://datasec-soft.com/favicon.ico", url: "https://datasec-soft.com/", name: "Datasec", - description: "Somos una firma presente en el mercado internacional desde 1987, pionera en el área del buen gobierno, aseguramiento, gestión de riesgos, calidad y seguridad en sistemas de la información (TI).", + description: + "Somos una firma presente en el mercado internacional desde 1987, pionera en el área del buen gobierno, aseguramiento, gestión de riesgos, calidad y seguridad en sistemas de la información (TI).", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { picture: "https://www.cavepot.com/assets/img/logo.png", url: "https://cavepot.com/", name: "Cavepot", - description: "We are a software and app design company keen on pixel perfect solutions that bring your ideas to live!", + description: + "We are a software and app design company keen on pixel perfect solutions that bring your ideas to live!", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { picture: "https://monkeylearn.com/static/img/favicon/favicon-196x196.png", @@ -247,8 +265,8 @@ export default [ description: "Our mission is to democratize Machine Learning technologies.", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { picture: "https://www.octobot.io/email-signature-mark.png", @@ -257,78 +275,89 @@ export default [ description: "Digital Products Experts", meta: { allowFullRemote: false, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { picture: "https://www.bloque.com.uy/out-images/bloque-logo.svg", url: "https://www.bloque.com.uy/", name: "Bloque", - description: "Somos un estudio de diseño y desarrollo web enfocado en crear hermosas interfaces. • Obsesionados por los detalles, performance, y SEO •", + description: + "Somos un estudio de diseño y desarrollo web enfocado en crear hermosas interfaces. • Obsesionados por los detalles, performance, y SEO •", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { - picture: "https://uploads-ssl.webflow.com/58f7a9f3149b3b1bb22349b9/58fe416dfee17654a83a8550_xl-header-logo-bg-1%402x.png", + picture: + "https://uploads-ssl.webflow.com/58f7a9f3149b3b1bb22349b9/58fe416dfee17654a83a8550_xl-header-logo-bg-1%402x.png", url: "https://www.xmartlabs.com/", name: "Xmartlabs", - description: "We provide exceptional strategy, design and technology to create innovative and high-value software.", + description: + "We provide exceptional strategy, design and technology to create innovative and high-value software.", meta: { allowFullRemote: false, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { - picture: "https://dlocal.com/wp-content/uploads/2018/01/logo-black-new_x2.png", + picture: + "https://dlocal.com/wp-content/uploads/2018/01/logo-black-new_x2.png", url: "https://dlocal.com/", name: "Dlocal", - description: "The only payments platform that unlocks the full potential of today’s growth markets.", + description: + "The only payments platform that unlocks the full potential of today’s growth markets.", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { - picture: "https://scontent.fmvd4-1.fna.fbcdn.net/v/t1.0-9/64783454_2365355500368689_8120181765294784512_n.png?_nc_cat=103&_nc_sid=85a577&_nc_oc=AQkrCAsAdzjJ84qXhUt2zzYEIjus5XiSBqh3KwTVyzJhBP5IzhjYj_v4QjJtHaoJM0g&_nc_ht=scontent.fmvd4-1.fna&oh=04b6f77961481d26e2bb1ee9672e168a&oe=5E966712", + picture: + "https://scontent.fmvd4-1.fna.fbcdn.net/v/t1.0-9/64783454_2365355500368689_8120181765294784512_n.png?_nc_cat=103&_nc_sid=85a577&_nc_oc=AQkrCAsAdzjJ84qXhUt2zzYEIjus5XiSBqh3KwTVyzJhBP5IzhjYj_v4QjJtHaoJM0g&_nc_ht=scontent.fmvd4-1.fna&oh=04b6f77961481d26e2bb1ee9672e168a&oe=5E966712", url: "https://www.asapdevelopers.com/", name: "AsapDevelopers", description: "We bring innovative ideas to life.", meta: { allowFullRemote: false, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { picture: "https://i.imgur.com/iNBtPKx.png", url: "https://spacedev.uy/", name: "SpaceDev", - description: "A software factory serving clients all around the world. We develop Full-Stack projects expanding our clients' capabilities and resources. For us the sky is no longer the limit; There's a whole outerspace to excel in.", + description: + "A software factory serving clients all around the world. We develop Full-Stack projects expanding our clients' capabilities and resources. For us the sky is no longer the limit; There's a whole outerspace to excel in.", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { - picture: "https://intermediasoftware.com/wp-content/uploads/2020/03/fav48.png", + picture: + "https://intermediasoftware.com/wp-content/uploads/2020/03/fav48.png", url: "https://intermediasoftware.com/", name: "Intermedia", - description: "We help enterprises to digitally transform, by integrating intelligent ecosystems and exploiting data in innovative ways, to create unique competitive advantages", + description: + "We help enterprises to digitally transform, by integrating intelligent ecosystems and exploiting data in innovative ways, to create unique competitive advantages", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { - picture: "https://ameba-wpengine.netdna-ssl.com/wp-content/themes/ameba/images/logo-amb-en.svg", + picture: + "https://ameba-wpengine.netdna-ssl.com/wp-content/themes/ameba/images/logo-amb-en.svg", url: "https://www.ameba.com.uy/", name: "Ameba Creative Studio", - description: "Helping companies stand out on every step of their growth with a user-centric approach.", + description: + "Helping companies stand out on every step of their growth with a user-centric approach.", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { picture: "https://jubilo-uploads.s3.amazonaws.com/jubilo-black-corp.svg", @@ -337,8 +366,8 @@ export default [ description: "Soluciones digitales desde uruguay para el mundo.", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { picture: "https://www.buscojobs.com/static/img/favicon/favicon.ico", @@ -347,28 +376,20 @@ export default [ description: "Conectamos talento con oportunidades", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { - picture: "https://wp.inmindsoftware.com/wp-content/uploads/2018/07/logo_welcome.png", + picture: + "https://wp.inmindsoftware.com/wp-content/uploads/2018/07/logo_welcome.png", url: "https://www.inmindsoftware.com/", name: "INMIND", - description: "Mobile and blockchain experts. We deliver cutting-edge technology around mobile and blockchain.", - meta: { - allowFullRemote: true, - hasPhysicalOffices: true - } - }, - { - picture: "https://jubilo-uploads.s3.amazonaws.com/jubilo-black-corp.svg", - url: "https://spacedev.uy/", - name: "Jubilo Studios", - description: "Soluciones digitales en uruguay para el mundo", + description: + "Mobile and blockchain experts. We deliver cutting-edge technology around mobile and blockchain.", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { picture: "/images/STB_logo_v01.png", @@ -378,38 +399,43 @@ export default [ "Potenciamos la productividad de las empresas automatizando sus pruebas de software", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { - picture: "https://www.systems-x.com/hs-fs/hubfs/SX%20Logo%20v9.0%20Landscape%20SM500-2.png?width=500&name=SX%20Logo%20v9.0%20Landscape%20SM500-2.png", + picture: + "https://www.systems-x.com/hs-fs/hubfs/SX%20Logo%20v9.0%20Landscape%20SM500-2.png?width=500&name=SX%20Logo%20v9.0%20Landscape%20SM500-2.png", url: "https://www.systems-x.com/", name: "Systems X", description: "Connecting You With What's Next.", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { - picture: "https://jigsolabs.com/wp-content/uploads/2019/06/cropped-favicon-jigso-1_Mesa-de-trabajo-1-180x180.png", + picture: + "https://jigsolabs.com/wp-content/uploads/2019/06/cropped-favicon-jigso-1_Mesa-de-trabajo-1-180x180.png", url: "https://jigsolabs.com/", name: "Jigso Labs", - description: "Servicios, consultoría y capacitación centrados en el usuario y la calidad", + description: + "Servicios, consultoría y capacitación centrados en el usuario y la calidad", meta: { allowFullRemote: true, - hasPhysicalOffices: false - } + hasPhysicalOffices: false, + }, }, { - picture: "https://www.kanbanconsultores.com/web/image/res.company/1/logo?unique=d79d171.png", + picture: + "https://www.kanbanconsultores.com/web/image/res.company/1/logo?unique=d79d171.png", url: "https://www.kanbanconsultores.com/", name: "Kanban Consultores", - description: "Diseñamos procesos operativos utilizando la metodología Kanban.", + description: + "Diseñamos procesos operativos utilizando la metodología Kanban.", meta: { allowFullRemote: true, - hasPhysicalOffices: true - } + hasPhysicalOffices: true, + }, }, { picture: "https://houlak.com/assets/images/favicon.png", diff --git a/pages/_app.js b/pages/_app.js index 19d2074..6549ca8 100644 --- a/pages/_app.js +++ b/pages/_app.js @@ -5,7 +5,7 @@ import React from "react"; import { ThemeProvider } from "styled-components"; import * as gtag from "../lib/gtag"; -Router.events.on("routeChangeComplete", url => gtag.pageview(url)); +Router.events.on("routeChangeComplete", (url) => gtag.pageview(url)); const theme = {}; // Leaving this here just in case @@ -16,7 +16,7 @@ export default class RemoteUYApp extends App { diff --git a/pages/index.js b/pages/index.js index 8617847..0f36bcb 100644 --- a/pages/index.js +++ b/pages/index.js @@ -2,8 +2,7 @@ import React from "react"; import NextLink from "next/link"; import Head from "next/head"; import dynamic from "next/dynamic"; -import styled from "styled-components"; -import YouTube from "react-youtube-embed"; +import styled, { css } from "styled-components"; import companies from "../data/companies"; import { Company } from "../components/Company"; @@ -11,66 +10,142 @@ const ReactTooltip = dynamic(() => import("react-tooltip"), { ssr: false }); const Layout = styled.div``; -const Header = styled.header` - display: flex; - flex-direction: row; - align-items: center; - padding: 0 0.5rem; - justify-content: space-between; - height: 4.5rem; - background: #fff; - box-shadow: 0px 1px 12px 0px rgba(35, 43, 47, 0.25); - position: fixed; - width: 100%; - top: 0; - z-index: 1; -`; - const Title = styled.h1` - font-family: "Montserrat", sans-serif; + font-family: "Open Sans", sans-serif; font-weight: 700; font-size: 2.5rem; color: #232b2f; - span { - font-weight: 400; - font-size: 2rem; + margin-bottom: 2rem; +`; + +const Content = styled.section` + display: flex; + flex-direction: column; + max-width: 1024px; + margin: 12rem auto 0 auto; + @media (max-width: 1200px) { + padding: 0 0.5rem; + margin: 4rem auto 0 auto; } `; -const Link = styled.a` - font-family: "Montserrat", sans-serif; - font-size: 1rem; - color: white; +const IntroContainer = styled.div` + margin-top: 3rem; + margin-bottom: 3rem; + align-self: center; + @media (max-width: 1200px) { + width: 100vw; + } `; -const Content = styled.section` - max-width: 720px; - margin: 0 auto 0 auto; - margin-top: 6.375rem; - text-align: center; - * { - text-align: left; +const IntroPicture = styled.img` + width: 1200px; + height: 600px; + object-fit: cover; + @media (max-width: 1200px) { + width: 100%; } `; const Paragraph = styled.p` - font-family: "Montserrat", sans-serif; + font-family: "Open Sans", sans-serif; font-size: 1.2rem; color: #232b2f; - margin-bottom: 1.5rem; - padding: 0 1rem; line-height: 1.2; b { font-weight: 700; } + + a { + padding: 0 0.2rem; + color: #232b2f; + text-decoration: underline; + } + + a:hover { + color: #dcd4d0; + background: #232b2f; + } `; -const VideoContainer = styled.div` - height: calc(100vh - 4.5rem); - display: flex; - flex-direction: column; - justify-content: center; +const Credit = styled(Paragraph)` + font-size: 0.75rem; + text-align: right; + margin-top: 0.3rem; +`; + +const CompaniesGrid = styled.div` + display: grid; + align-self: center; + width: 1200px; + grid-template-columns: repeat(3, 1fr); + grid-template-rows: 1fr; + gap: 1px 1px; + + @media (max-width: 1200px) { + grid-template-columns: repeat(2, 1fr); + width: 100vw; + } + + @media (max-width: 768px) { + grid-template-columns: 1fr; + width: 100vw; + } + + @media (min-width: 1200px) { + ${Company}:nth-child(3n+1):nth-last-child(-n+3), + ${Company}:nth-child(3n+1):nth-last-child(-n+3) ~ ${Company} { + border-bottom: none; + } + } + + @media (max-width: 1200px) { + ${Company}:nth-child(2n+1):nth-last-child(-n+2), + ${Company}:nth-child(2n+1):nth-last-child(-n+2) ~ ${Company} { + border-bottom: none; + } + } + + + + ${Company} { + border-bottom: 1px solid grey; + border-right: 1px solid grey; + + @media (min-width: 1200px) { + &:nth-child(3n) { + border-right: none; + } + } + + @media (max-width: 1200px) { + &:nth-child(2n) { + border-right: none; + } + } + + @media (max-width: 768px) { + & { + border-right: none; + } + } + + @media (max-width: 768px) { + &:last-child { + border-bottom: none; + } + } + } +`; + +const Footer = styled.div` + margin-top: 4rem; + margin-bottom: 0.5rem; + text-align: center; + ${Paragraph} { + font-size: 0.7rem; + } `; export default () => { @@ -82,60 +157,51 @@ export default () => { distribuído -
- - 🌎<span>.uy</span> - - {/* - Para leer 📘 - */} -
- - - A las 20:30 UYT del Lunes 16 de Marzo transmitimos en vivo{" "} - CÓMO TRABAJAR REMOTO con recomendaciones, herramientas y - mucho más para aprender sobre el trabajo remoto. - - - - Participantes: Luisa Martínez (VP of Market Entry en Kuelap, Inc), - Ines Martinez (CEO en The Next Co.), Justin Graside (Growth Lead en - Tavano Team), Gabriel Chertok (Engineering Manager en Ingenious) - - - - remote.uy es un listado de empresas uruguayas que promueven el trabajo - remoto o distribuído. - + Remote Uruguay - Si querés agregar una empresa podés ayudarnos{" "} + Remote.uy es un listado de empresas uruguayas que promueven el trabajo + remoto o distribuído. Si querés agregar una empresa podés ayudarnos{" "} mandando un PR a nuestro repositorio de GH . - {companies.map((company, index) => { - return ( - - ); - })} + + + + Photo by{" "} + + Arseniy Kapran + {" "} + on{" "} + + Unsplash + + + + + Empresas + + {companies.map((company) => { + return ; + })} + - - {/* */} + + ); }; diff --git a/public/images/arseniy-kapran-hkjUkfqaVpU-unsplash.jpg b/public/images/arseniy-kapran-hkjUkfqaVpU-unsplash.jpg new file mode 100644 index 0000000..3e7f36e Binary files /dev/null and b/public/images/arseniy-kapran-hkjUkfqaVpU-unsplash.jpg differ diff --git a/public/images/davide-ragusa-6q4JkCp6scA-unsplash.jpg b/public/images/davide-ragusa-6q4JkCp6scA-unsplash.jpg new file mode 100644 index 0000000..e843441 Binary files /dev/null and b/public/images/davide-ragusa-6q4JkCp6scA-unsplash.jpg differ