From 89dd9f9c3773ab0118f7c833c4d56da47be829c4 Mon Sep 17 00:00:00 2001 From: "Alejandro E. Rendon" Date: Sun, 26 May 2024 17:10:08 -0500 Subject: [PATCH] #115 Crear vista base para patrocinadores --- .../[lang]/sponsors/[uniquepage]/Sponsors.js | 145 ++++++++++++++++++ src/app/[lang]/sponsors/[uniquepage]/page.js | 82 ++++++++++ src/app/[lang]/sponsors/components/Sponsor.js | 4 +- .../[lang]/sponsors/components/SponsorList.js | 4 +- .../[lang]/sponsors/components/Sponsors.js | 2 +- src/data/sponsors.json | 12 +- src/styles/partials/_sponsors.sass | 58 ++++--- 7 files changed, 276 insertions(+), 31 deletions(-) create mode 100644 src/app/[lang]/sponsors/[uniquepage]/Sponsors.js create mode 100644 src/app/[lang]/sponsors/[uniquepage]/page.js diff --git a/src/app/[lang]/sponsors/[uniquepage]/Sponsors.js b/src/app/[lang]/sponsors/[uniquepage]/Sponsors.js new file mode 100644 index 0000000..e26dd19 --- /dev/null +++ b/src/app/[lang]/sponsors/[uniquepage]/Sponsors.js @@ -0,0 +1,145 @@ +'use client'; + +import React from 'react'; +import PropTypes from 'prop-types'; +import Image from 'next/image'; +import Container from 'react-bootstrap/Container'; +import Row from 'react-bootstrap/Row'; +import Col from 'react-bootstrap/Col'; +import Button from 'react-bootstrap/Button'; + +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { faCircle, faGlobe } from '@fortawesome/free-solid-svg-icons'; +import { + faXTwitter, + faLinkedinIn, + faGithubAlt, + faFacebook, + faGitlab +} from '@fortawesome/free-brands-svg-icons'; + +const Sponsors = ({ level, sponsor, lang }) => { + const labels = { + diamond: 'Diamante', + platinum: 'Platinum', + gold: 'Gold', + silver_plus: 'Silver+', + silver: 'Silver', + bronze: 'Bronze' + }; + + return ( +
+
+ + + +
+ {sponsor.name} +
+ {labels[level]} +
+
+ + + + +
+ {sponsor.facebook && ( + +
+ + +
+ + )} + {sponsor.twitter && ( + +
+ + +
+ + )} + {sponsor.linkedin && ( + +
+ + +
+ + )} + {sponsor.github && ( + +
+ + +
+ + )} + {sponsor.gitlab && ( + +
+ + +
+ + )} + {sponsor.website && ( + +
+ + +
+ + )} +
+ + + + +
+ {sponsor.description ?

{sponsor.description[lang]}

: null} +
+ + +
+ +
+ + + +
+
+ ); +}; + +Sponsors.propTypes = { + sponsor: PropTypes.object, + talks: PropTypes.array, + lang: PropTypes.string +}; + +export default Sponsors; diff --git a/src/app/[lang]/sponsors/[uniquepage]/page.js b/src/app/[lang]/sponsors/[uniquepage]/page.js new file mode 100644 index 0000000..4895ebc --- /dev/null +++ b/src/app/[lang]/sponsors/[uniquepage]/page.js @@ -0,0 +1,82 @@ +import React from 'react'; +import propTypes from 'prop-types'; +import { notFound } from 'next/navigation'; + +import sponsorsList from '@/data/sponsors.json'; +import en from '@/data/dictionaries/en.json'; +import es from '@/data/dictionaries/es.json'; +import Sponsors from './Sponsors'; + +export async function generateStaticParams() { + const allPages = []; + + for (const level in sponsorsList) { + for (const sponsor in sponsorsList[level]) { + if (sponsor.id) { + allPages.push({ uniquepage: sponsor.id.toString(), level }); + } + } + } + + return allPages; +} + +export async function generateMetadata({ params: { uniquepage, lang } }, parent) { + const dataLang = lang === 'en' ? en : es; + const dataSection = dataLang?.sections; + const speakersData = dataSection.sponsors; + let sponsorName = uniquepage; + let sponsorDescription = ''; + + for (const level in sponsorsList) { + for (const sponsor in sponsorsList[level]) { + const data = sponsorsList[level][sponsor]; + if (data.id && data.id.toString() === uniquepage) { + sponsorName = data.name; + sponsorDescription = level; + break; + } + } + } + + return { + title: `${sponsorName} - ${speakersData.title}`, + description: sponsorDescription, + openGraph: { + title: sponsorName, + description: sponsorDescription + } + }; +} + +const Sponsor = ({ params: { uniquepage, lang } }) => { + let sponsorData = null; + let sponsorLevel = null; + + for (const level in sponsorsList) { + for (const sponsor in sponsorsList[level]) { + const data = sponsorsList[level][sponsor]; + if (data.id && data.id.toString() === uniquepage) { + sponsorData = data; + sponsorLevel = level; + break; + } + } + } + + if (!sponsorData) { + console.info('sponsor not found'); + notFound(); + } + + return ; +}; + +Sponsor.propTypes = { + params: propTypes.shape({ + uniquepage: propTypes.string, + lang: propTypes.string + }) +}; + +export default Sponsor; diff --git a/src/app/[lang]/sponsors/components/Sponsor.js b/src/app/[lang]/sponsors/components/Sponsor.js index b46fc4d..2617c44 100644 --- a/src/app/[lang]/sponsors/components/Sponsor.js +++ b/src/app/[lang]/sponsors/components/Sponsor.js @@ -6,7 +6,7 @@ import Link from 'next/link'; import Row from 'react-bootstrap/Row'; import Col from 'react-bootstrap/Col'; -const Sponsor = ({ level, sponsorData }) => { +const Sponsor = ({ level, sponsorData, lang }) => { const sponsorSize = { diamond: '12', platinum: '10', @@ -29,7 +29,7 @@ const Sponsor = ({ level, sponsorData }) => {
- + { +const SponsorList = ({ level, list, lang }) => { const labels = { diamond: 'Diamante', platinum: 'Platinum', @@ -27,7 +27,7 @@ const SponsorList = ({ level, list }) => { {list.map((sponsor, index) => ( - + ))}
diff --git a/src/app/[lang]/sponsors/components/Sponsors.js b/src/app/[lang]/sponsors/components/Sponsors.js index 79748d0..ee44935 100644 --- a/src/app/[lang]/sponsors/components/Sponsors.js +++ b/src/app/[lang]/sponsors/components/Sponsors.js @@ -27,7 +27,7 @@ const Sponsors = ({ lang }) => { {Object.keys(sponsorsList).map((level, index) => ( - + ))} diff --git a/src/data/sponsors.json b/src/data/sponsors.json index 14fb224..b4df042 100644 --- a/src/data/sponsors.json +++ b/src/data/sponsors.json @@ -2,11 +2,13 @@ "diamond": [], "platinum": [ { + "id": "nearsure", "name": "Nearsure", "image": "nearsure.svg", "url": "https://nearsure.com/" }, { + "id": "neostella", "name": "Neostella", "image": "neostella.svg", "url": "https://www.neostella.com/" @@ -14,18 +16,25 @@ ], "gold": [ { + "id": "elastic", "name": "Elastic", "image": "elastic.svg", "url": "https://elastic.co/" }, { + "id": "loka", "name": "Loka", "image": "loka.svg", - "url": "https://loka.com/careers" + "url": "https://loka.com/careers", + "description": { + "en": "What you develop matters. At least we think so. We’re Loka, a Silicon Valley full-stack consultancy known for accelerating AI/ML, DevOps, Big Data, and design projects. Since 2004, we’ve shipped software innovations for all sorts of fascinating startups with lofty missions and an impatience to make an impact. We also help Fortune 500 companies such as Gatorade and BCBS nail their builds, strategies, and deadlines. We count more than 200 certified specialists, technical experts, and PhDs among our teammates—creative Lokals who contribute their brilliance not only to serving our clients but also to mentoring younger colleagues. As an AWS Advanced Tier Partner and one of the world’s first and only AWS Generative AI Competency partners, we’re helping set the pace for the industry—and we enjoy every other Friday off in the process. Between launches, you can find us in LokaLabs, our in-house innovation sandbox where we play with moonshot tech to solve underserved societal challenges. Learn more and check out our openings at loka.com/careers.", + "es": "Lo que desarrollas importa. Al menos, eso creemos nosotros. Somos Loka, una consultora full-stack de Silicon Valley especializada en desarrollo de software. Conocida por acelerar proyectos de IA/ML, DevOps, Big Data y diseño, desde 2004 hemos desarrollado innovaciones de software para todo tipo de startups fascinantes con ambiciosas misiones y una gran determinación por generar un impacto. También colaboramos con empresas Fortune 500 como Gatorade y BCBS para construir sus desarrollos y estrategias, y cumplir con sus deadlines. Contamos con más de 200 especialistas certificados, expertos técnicos y PhDs en nuestro equipo: Lokal's creativos que contribuyen con su brillantez no solo al servicio de nuestros clientes, sino también al desarrollo profesional de colegas más jóvenes. Como AWS Advanced Tier Partner y uno de los primeros y únicos AWS Generative AI Competency partners en el mundo, estamos marcando el ritmo de la industria y, en el proceso, disfrutamos de cada dos viernes libres. Conoce también LokaLabs, nuestro laboratorio in-house de innovación donde jugamos con tecnología innovadora para resolver desafíos sociales. Si quieres saber más de nosotros y ver nuestras vacantes consulta en loka.com/careers." + } } ], "silver_plus": [ { + "id": "softserve", "name": "SoftServe", "image": "softserve.svg", "url": "https://career.softserveinc.com/es/about/colombia" @@ -33,6 +42,7 @@ ], "silver": [ { + "id": "mercado-libre", "name": "Mercado Libre", "image": "mercado-libre.svg", "url": "https://www.mercadolibre.com/" diff --git a/src/styles/partials/_sponsors.sass b/src/styles/partials/_sponsors.sass index af1aee1..0bd8ec6 100644 --- a/src/styles/partials/_sponsors.sass +++ b/src/styles/partials/_sponsors.sass @@ -20,31 +20,6 @@ .card-sponsor margin: 30px 0 - .badge - border: 1px solid variables.$black - border-radius: 60px - color: variables.$main-text-color - font-size: 18px - font-weight: 500 - letter-spacing: 5px - padding: 10px 20px - text-transform: uppercase - &.diamond - background-image: linear-gradient(to bottom right, #b9f2ff, #b9f2ff, #b9f2ff) - color: variables.$third-text-color - &.platinum - background-image: linear-gradient(to bottom right, #E5E4E2, #E5E4E2, #E5E4E2) - color: variables.$third-text-color - &.gold - background-image: linear-gradient(to bottom right, #FFDE8C,#E7B12D, #F6C651,) - color: variables.$third-text-color - &.silver, &.silver_plus - background-image: linear-gradient(to bottom right, #E5E4E2, #bbbbbb, #a5a39d) - color: variables.$third-text-color - &.bronze - background-image: linear-gradient(to bottom right, #FF8C8B, #FF7372, #FF7372) - color: variables.$third-text-color - .separator border-top: 1px solid variables.$black color: variables.$black @@ -60,3 +35,36 @@ .img-sponsor width: 100% height: auto + +.sponsor + .sponsor-bg + background-color: variables.$quaternary-bg-color + color: variables.$third-text-color + + .button-wrapper + margin: 30px 0 + +.badge + border: 1px solid variables.$black + border-radius: 60px + color: variables.$main-text-color + font-size: 18px + font-weight: 500 + letter-spacing: 5px + padding: 10px 20px + text-transform: uppercase + &.diamond + background-image: linear-gradient(to bottom right, #b9f2ff, #b9f2ff, #b9f2ff) + color: variables.$third-text-color + &.platinum + background-image: linear-gradient(to bottom right, #E5E4E2, #E5E4E2, #E5E4E2) + color: variables.$third-text-color + &.gold + background-image: linear-gradient(to bottom right, #FFDE8C,#E7B12D, #F6C651,) + color: variables.$third-text-color + &.silver, &.silver_plus + background-image: linear-gradient(to bottom right, #E5E4E2, #bbbbbb, #a5a39d) + color: variables.$third-text-color + &.bronze + background-image: linear-gradient(to bottom right, #FF8C8B, #FF7372, #FF7372) + color: variables.$third-text-color