LaconicNetwork/laconic.com
6
0
Fork 0
mirror of https://github.com/LaconicNetwork/laconic.com.git synced 2026-03-06 19:24:08 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Connect Partners mobile graphics CMS

Browse Source
This commit is contained in:
Fede Álvarez 2022-06-30 18:23:14 +02:00
parent af35562c22
commit 4093852734
3 changed files with 79 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/components/sections/partners/opportunities/index.tsx
View File

@ -1,3 +1,6 @@
import { useTheme } from 'next-themes'
import { useEffect, useState } from 'react'
import { Container } from '~/components/layout/container'
import Section from '~/components/layout/section'
import Heading from '~/components/primitives/heading'
@ -40,29 +43,80 @@ interface Props {
oportunitiesImage01: {
url: string
}
oportunitiesImage01Light: {
url: string
}
oportunitiesImage02: {
url: string
}
oportunitiesImage02Light: {
url: string
}
oportunitiesImage03: {
url: string
}
oportunitiesImage03Light: {
url: string
}
oportunitiesImage04: {
url: string
}
oportunitiesImage04Light: {
url: string
}
oportunitiesImage05: {
url: string
}
oportunitiesImage05Light: {
url: string
}
}
}
const Opportunities = ({ data }: Props) => {
const { theme } = useTheme()
const [oportunity01Image, setOportunity01Image] = useState('')
const [oportunity02Image, setOportunity02Image] = useState('')
const [oportunity03Image, setOportunity03Image] = useState('')
const [oportunity04Image, setOportunity04Image] = useState('')
const [oportunity05Image, setOportunity05Image] = useState('')
useEffect(() => {
setOportunity01Image(
theme === 'dark'
? data?.oportunitiesImage01?.url
: data?.oportunitiesImage01Light?.url
)
setOportunity02Image(
theme === 'dark'
? data?.oportunitiesImage02?.url
: data?.oportunitiesImage02Light?.url
)
setOportunity03Image(
theme === 'dark'
? data?.oportunitiesImage03?.url
: data?.oportunitiesImage03Light?.url
)
setOportunity04Image(
theme === 'dark'
? data?.oportunitiesImage04?.url
: data?.oportunitiesImage04Light?.url
)
setOportunity05Image(
theme === 'dark'
? data?.oportunitiesImage05?.url
: data?.oportunitiesImage05Light?.url
)
}, [theme, data])
return (
<Section className={s['section']}>
<Container className={s['container']}>
<div className={s.block} id="validators">
<img
className={s.item_image}
src={data?.oportunitiesImage01?.url}
src={oportunity01Image}
alt="validators"
/>
<div>
@ -72,7 +126,7 @@ const Opportunities = ({ data }: Props) => {
</Heading>
<img
className={s.item_image__mobile}
src={data?.oportunitiesImage01?.url}
src={oportunity01Image}
alt="validators"
/>
</div>
@ -93,7 +147,7 @@ const Opportunities = ({ data }: Props) => {
<div className={s.block} id="providers">
<img
className={s.item_image}
src={data?.oportunitiesImage02?.url}
src={oportunity02Image}
alt="validators"
/>
<div>
@ -103,7 +157,7 @@ const Opportunities = ({ data }: Props) => {
</Heading>
<img
className={s.item_image__mobile}
src={data?.oportunitiesImage02?.url}
src={oportunity02Image}
alt="validators"
/>
</div>
@ -124,7 +178,7 @@ const Opportunities = ({ data }: Props) => {
<div className={s.block} id="developers">
<img
className={s.item_image}
src={data?.oportunitiesImage03?.url}
src={oportunity03Image}
alt="validators"
/>
<div>
@ -134,7 +188,7 @@ const Opportunities = ({ data }: Props) => {
</Heading>
<img
className={s.item_image__mobile}
src={data?.oportunitiesImage03?.url}
src={oportunity03Image}
alt="validators"
/>
</div>
@ -155,7 +209,7 @@ const Opportunities = ({ data }: Props) => {
<div className={s.block} id="investors">
<img
className={s.item_image}
src={data?.oportunitiesImage04?.url}
src={oportunity04Image}
alt="validators"
/>
<div>
@ -165,7 +219,7 @@ const Opportunities = ({ data }: Props) => {
</Heading>{' '}
<img
className={s.item_image__mobile}
src={data?.oportunitiesImage04?.url}
src={oportunity04Image}
alt="validators"
/>
</div>
@ -186,7 +240,7 @@ const Opportunities = ({ data }: Props) => {
<div className={s.block} id="testnet">
<img
className={s.item_image}
src={data?.oportunitiesImage05?.url}
src={oportunity05Image}
alt="validators"
/>
<div>
@ -196,7 +250,7 @@ const Opportunities = ({ data }: Props) => {
</Heading>
<img
className={s.item_image__mobile}
src={data?.oportunitiesImage05?.url}
src={oportunity05Image}
alt="validators"
/>
</div>

2
src/components/sections/partners/opportunities/opportunities.module.scss
View File

@ -170,11 +170,9 @@
[data-theme='light'] {
.container .block {
.item_image {
filter: invert(100%) saturate(50%) hue-rotate(180deg);
mix-blend-mode: darken !important;
&__mobile {
filter: invert(100%) saturate(50%) hue-rotate(180deg);
mix-blend-mode: darken !important;
}
}

15
src/lib/cms/queries/partners.js
View File

@ -31,18 +31,33 @@ const PartnersOportunities = {
oportunitiesImage01 {
url
}
oportunitiesImage01Light {
url
}
oportunitiesImage02 {
url
}
oportunitiesImage02Light {
url
}
oportunitiesImage03 {
url
}
oportunitiesImage03Light {
url
}
oportunitiesImage04 {
url
}
oportunitiesImage04Light {
url
}
oportunitiesImage05 {
url
}
oportunitiesImage05Light {
url
}
}
}`
}