LaconicNetwork/laconic.com
6
0
Fork 0
mirror of https://github.com/LaconicNetwork/laconic.com.git synced 2026-09-13 05:54:09 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Work on light mode (#75)

Browse Source 
* Work on light mode
This commit is contained in:
Fede Álvarez
2022-06-13 18:14:04 +02:00
committed by GitHub
parent 513c921110
commit 357c3e3df9
85 changed files with 1148 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/common/footer/footer.module.scss
+21 -1
View File
@@ -62,7 +62,7 @@
&::before {
background: radial-gradient(
ellipse farthest-corner at center center,
rgb(4 4 4 / 0.05) 45%,
rgb(4 4 4 / 0) 45%,
var(--color-black) 0
);
width: 120%;
@@ -367,3 +367,23 @@
}
}
}
[data-theme='light'] {
.pre__footer {
&--section {
video {
mix-blend-mode: darken;
}
@include respond-to('mobile') {
background-image: url('/images/pre-footer-mobile-light.png');
}
}
}
.footer {
a {
color: var(--color-white);
}
}
}
src/components/common/footer/index.tsx
+20 -2
View File
@@ -1,5 +1,6 @@
import clsx from 'clsx'
import { useRouter } from 'next/router'
import { useTheme } from 'next-themes'
import { useEffect, useRef, useState } from 'react'
import MailchimpSubscribe from 'react-mailchimp-subscribe'
@@ -81,11 +82,27 @@ const SimpleForm = ({
}
export const Footer = () => {
const { theme, setTheme } = useTheme()
const router = useRouter()
const videoRef = useRef<HTMLVideoElement>(null)
const [show, setShow] = useState(true)
const [is404, setIs404] = useState(false)
const [themeLabel, setThemeLabel] = useState('')
useEffect(() => {
setThemeLabel(theme === 'dark' ? 'Dark mode' : 'Light mode')
}, [theme])
useEffect(() => {
if (!videoRef.current) return
videoRef.current.src =
theme === 'dark'
? '/videos/hero-grid.mp4'
: '/videos/Banner-Home-Light.mp4'
}, [theme])
useEffect(() => {
if (
@@ -136,7 +153,7 @@ export const Footer = () => {
preload="true"
ref={videoRef}
>
<source src="/videos/hero-grid.mp4" type="video/mp4" />
<source type="video/mp4" />
</video>
<Container className={s['pre__footer']}>
<Isotype className={s['isotype']} />
@@ -254,7 +271,8 @@ export const Footer = () => {
Terms of Use
</Link>
<p>
<span>Dark Mode</span> <Switch />
<span>{themeLabel}</span>{' '}
<Switch theme={theme} setTheme={setTheme} />
</p>
</li>
</ul>
src/components/common/header/header.module.scss
+46 -1
View File
@@ -94,8 +94,19 @@
display: block;
}
.themer {
display: flex;
color: var(--color-white);
font-family: var(--font-tt-hoves);
gap: tovw(10px, 'default', 8px);
place-content: center;
place-items: center;
padding-bottom: tovw(20px, 'mobile', 20px);
width: 100%;
}
.button {
margin: tovw(55px, 'mobile') 0 tovw(44px, 'mobile') 0;
margin: tovw(55px, 'mobile') 0 tovw(30px, 'mobile') 0;
width: 100%;
text-align: center;
@@ -144,3 +155,37 @@
}
}
}
[data-theme='light'] {
.header {
backdrop-filter: unset;
background-color: var(--color-black);
ul li a {
color: var(--color-white);
}
&__mobile {
p {
color: var(--color-black);
}
.themer {
color: var(--color-black);
}
.button {
@include respond-to('mobile') {
border: tovw(1px, 'default', 1px) solid var(--color-black);
color: var(--color-black);
}
}
}
}
.social {
a {
filter: invert(100%);
}
}
}
src/components/common/header/index.tsx
+12
View File
@@ -1,12 +1,14 @@
import clsx from 'clsx'
import NextLink from 'next/link'
import { useRouter } from 'next/router'
import { useTheme } from 'next-themes'
import * as React from 'react'
import Burger from '~/components/icons/burguer'
import { Logo } from '~/components/icons/logo'
import { Button, ButtonLink } from '~/components/primitives/button'
import Link from '~/components/primitives/link'
import Switch from '~/components/primitives/switch'
import { useIsomorphicLayoutEffect } from '~/hooks/use-isomorphic-layout-effect'
import { useMeasure } from '~/hooks/use-measure'
import { DURATION, gsap } from '~/lib/gsap'
@@ -20,6 +22,13 @@ const HeaderMobile = React.forwardRef<
JSX.IntrinsicElements['div']
>(({ className, ...props }, ref) => {
const router = useRouter()
const { theme, setTheme } = useTheme()
const [themeLabel, setThemeLabel] = React.useState('')
React.useEffect(() => {
setThemeLabel(theme === 'dark' ? 'Dark mode' : 'Light mode')
}, [theme])
const isActive = (href: string) => {
const slug = router.query.slug as string
@@ -53,6 +62,9 @@ const HeaderMobile = React.forwardRef<
>
Join Us
</ButtonLink>
<div className={s.themer}>
<span>{themeLabel}</span> <Switch theme={theme} setTheme={setTheme} />
</div>
<ul className={clsx(s['social'], 'social')}>
{ConnectLinks.length > 0 &&
ConnectLinks.map((link, index) => (
src/components/common/modal/modal.module.scss
+9 -1
View File
@@ -25,7 +25,7 @@
height: 100vh;
background-color: rgb(0 0 0 / 0.5);
z-index: 50;
backdrop-filter: blur(2px);
backdrop-filter: blur(5px);
animation: fadein 800ms;
}
}
@@ -39,3 +39,11 @@
opacity: 1;
}
}
[data-theme='light'] {
.modal {
&__bg {
background: rgb(251 251 251 / 0.35);
}
}
}
src/components/icons/burguer.tsx
+7 -3
View File
@@ -79,17 +79,21 @@ const Burger = ({
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 28 28"
>
<path ref={topRef} d="M1 8h24v2H1z" fill={fill || '#fff'} />
<path ref={topRef} d="M1 8h24v2H1z" fill={fill || 'var(--color-white)'} />
<line
ref={middleRef}
x1="1"
y1="15"
x2="25"
y2="15"
stroke={fill || '#fff'}
stroke={fill || 'var(--color-white)'}
strokeWidth="2"
/>
<path ref={bottomRef} d="M1 20h24v2H1z" fill={fill || '#fff'} />
<path
ref={bottomRef}
d="M1 20h24v2H1z"
fill={fill || 'var(--color-white)'}
/>
</svg>
)
}
src/components/icons/socials.tsx
+7 -7
View File
@@ -31,7 +31,7 @@ const Telegram = ({
gradientUnits="userSpaceOnUse"
>
<stop stopColor={fill || 'var(--color-white)'} />
<stop offset="1" stopColor="var(--color-grey-lightness)" />
<stop offset="1" stopColor="var(--color-white)" />
</linearGradient>
</defs>
</svg>
@@ -67,7 +67,7 @@ const Twitter = ({
gradientUnits="userSpaceOnUse"
>
<stop stopColor={fill || 'var(--color-white)'} />
<stop offset="1" stopColor="var(--color-grey-lightness)" />
<stop offset="1" stopColor="var(--color-white)" />
</linearGradient>
</defs>
</svg>
@@ -99,7 +99,7 @@ const Reddit = ({ className, fill }: { className?: string; fill?: string }) => {
gradientUnits="userSpaceOnUse"
>
<stop stopColor={fill || 'var(--color-white)'} />
<stop offset="1" stopColor="var(--color-grey-lightness)" />
<stop offset="1" stopColor="var(--color-white)" />
</linearGradient>
</defs>
</svg>
@@ -178,7 +178,7 @@ const Facebook = ({
gradientUnits="userSpaceOnUse"
>
<stop stopColor={fill || 'var(--color-white)'} />
<stop offset="1" stopColor="var(--color-grey-lightness)" />
<stop offset="1" stopColor="var(--color-white)" />
</linearGradient>
</defs>
</svg>
@@ -222,7 +222,7 @@ const Instagram = ({
gradientUnits="userSpaceOnUse"
>
<stop stopColor={fill || 'var(--color-white)'} />
<stop offset="1" stopColor="var(--color-grey-lightness)" />
<stop offset="1" stopColor="var(--color-white)" />
</linearGradient>
<linearGradient
id={`${id}-b`}
@@ -233,7 +233,7 @@ const Instagram = ({
gradientUnits="userSpaceOnUse"
>
<stop stopColor={fill || 'var(--color-white)'} />
<stop offset="1" stopColor="var(--color-grey-lightness)" />
<stop offset="1" stopColor="var(--color-white)" />
</linearGradient>
<linearGradient
id={`${id}-c`}
@@ -244,7 +244,7 @@ const Instagram = ({
gradientUnits="userSpaceOnUse"
>
<stop stopColor={fill || 'var(--color-white)'} />
<stop offset="1" stopColor="var(--color-grey-lightness)" />
<stop offset="1" stopColor="var(--color-white)" />
</linearGradient>
</defs>
</svg>
src/components/primitives/button/button.module.scss
+9 -1
View File
@@ -66,7 +66,7 @@
&--primary {
border-color: var(--color-accent);
box-shadow: 0 0 tovw(50px, 'default', 16px) var(--color-accent);
box-shadow: 0 0 tovw(25px, 'default', 16px) var(--color-accent);
background: var(--color-accent);
&:hover,
@@ -92,3 +92,11 @@
}
}
}
[data-theme='light'] {
.button {
&--primary {
color: var(--color-black);
}
}
}
src/components/primitives/link/link.module.scss
+13
View File
@@ -127,3 +127,16 @@
}
}
}
[data-theme='light'] {
.link {
color: var(--color-accent);
&--default,
&--nav {
.icon svg {
fill: red !important;
}
}
}
}
src/components/primitives/switch/index.tsx
+10 -2
View File
@@ -1,9 +1,17 @@
import s from './switch.module.scss'
const Switch = () => {
interface Props {
setTheme: (theme: string) => void
theme: string | undefined
}
const Switch = ({ setTheme, theme }: Props) => {
return (
<label className={s.switch}>
<input type="checkbox" />
<input
type="checkbox"
onChange={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
/>
<span className={s.slider}></span>
</label>
)
src/components/primitives/switch/switch.module.scss
+4 -4
View File
@@ -33,17 +33,17 @@
width: tovw(9px, 'default', 9px);
left: tovw(1px, 'default', 1px);
bottom: tovw(1px, 'default', 1px);
background-color: white;
background-color: var(--color-white);
border-radius: 50%;
transition: var(--normal-transition);
}
input:checked + .slider {
border: tovw(2px, 'default', 2px) solid var(--color-black);
background-color: var(--color-white);
background-color: transparent;
border: tovw(2px, 'default', 2px) solid var(--color-white);
}
input:checked + .slider::before {
background-color: var(--color-black);
background-color: var(--color-white);
transform: translateX(tovw(11.5px, 'default', 11px));
}
src/components/sections/about/hero/hero.module.scss
+19
View File
@@ -200,3 +200,22 @@
width: 100%;
height: tovw(740px, 'default', 740px);
}
[data-theme='light'] {
.video_container {
mix-blend-mode: darken;
&::after {
display: none;
}
}
.hero__container {
filter: brightness(103%);
mix-blend-mode: darken;
}
.gradient {
display: hidden;
}
}
src/components/sections/about/hero/index.tsx
+35 -3
View File
@@ -1,3 +1,6 @@
import { useTheme } from 'next-themes'
import { useEffect, useRef, useState } from 'react'
import { Arrow } from '~/components/icons/arrow'
import Line from '~/components/icons/line'
import { Container } from '~/components/layout/container'
@@ -19,11 +22,40 @@ interface Props {
}
const Hero = ({ data }: Props) => {
const { theme } = useTheme()
const [webmSource, setWebmSource] = useState('')
const [mp4Source, setMp4Source] = useState('')
useEffect(() => {
if (theme === 'dark') {
setWebmSource('/videos/banner-about.webm')
setMp4Source('/videos/banner-about.mp4')
}
if (theme === 'light') {
setWebmSource('/videos/banner-about-light.webm')
setMp4Source('/videos/banner-about-light.mp4')
}
}, [theme])
const aboutHeroMobileRef = useRef<HTMLImageElement>(null)
useEffect(() => {
if (!aboutHeroMobileRef.current) return
aboutHeroMobileRef.current.src =
theme === 'dark'
? '/images/about/about.jpg'
: '/images/about/about-light.jpg'
}, [theme])
return (
<Section className={s['section']} disableFadeIn>
<div className={s['gradient']} />
<div className={s['video_container']}>
<video
key={mp4Source}
autoPlay
controls={false}
loop
@@ -31,16 +63,16 @@ const Hero = ({ data }: Props) => {
playsInline={true}
preload="true"
>
<source src="/videos/banner-about.webm" type="video/webm" />
<source src="/videos/banner-about.mp4" type="video/mp4" />
<source src={webmSource} type="video/webm" />
<source src={mp4Source} type="video/mp4" />
</video>
</div>
<div className={s.hero__container}>
<img
ref={aboutHeroMobileRef}
className={s.hero__mobile}
loading="eager"
alt="hero"
src="/images/about/about.jpg"
/>
</div>
<Container className={s['container']}>
src/components/sections/about/related/related.module.scss
+27
View File
@@ -137,3 +137,30 @@
z-index: -1;
}
}
[data-theme='light'] {
.gradient {
display: none;
}
.events {
&::after,
&::before {
@include respond-to('mobile') {
background: linear-gradient(
90deg,
rgb(251 251 251 / 0) 0%,
rgb(251 251 251 / 0.55) 35%,
rgb(251 251 251 / 1) 95%
);
}
background: linear-gradient(
90deg,
rgb(251 251 251 / 0) 0%,
rgb(251 251 251 / 0.95) 35%,
rgb(251 251 251 / 1) 65%
);
}
}
}
src/components/sections/about/roadmap/roadmap.module.scss
+18 -6
View File
@@ -92,6 +92,7 @@
background-color: var(--color-white);
border-radius: 50%;
box-shadow: 0px 0px tovw(16px, 'default', 16px) var(--color-white);
z-index: 5;
}
}
@@ -186,9 +187,9 @@
border-left: 2px solid var(--color-white);
border-image-source: linear-gradient(
180deg,
rgb(255 255 255 / 1) 0%,
rgb(255 255 255 / 1) 85%,
rgb(4 4 4 / 1) 100%
var(--color-white) 0%,
var(--color-white) 85%,
var(--color-black) 100%
);
}
@@ -198,11 +199,22 @@
border-image-slice: 1;
border-image-source: linear-gradient(
90deg,
rgb(255 255 255 / 1) 0%,
rgb(255 255 255 / 1) 85%,
rgb(4 4 4 / 1) 100%
var(--color-white) 0%,
var(--color-white) 85%,
var(--color-black) 100%
);
}
}
}
}
[data-theme='light'] {
.section .container {
.roadmap .block {
.dot {
background-color: var(--color-accent);
box-shadow: 0px 0px tovw(16px, 'default', 16px) var(--color-accent);
}
}
}
}
src/components/sections/about/whitepaper/whitepaper.module.scss
+13
View File
@@ -84,3 +84,16 @@
}
}
}
[data-theme='light'] {
.section .container {
a {
color: var(--color-accent);
}
.whitepaper__img {
filter: invert(100%);
z-index: -1;
}
}
}
src/components/sections/blog/hero/hero.module.scss
+10
View File
@@ -92,3 +92,13 @@
}
}
}
[data-theme='light'] {
.section {
background: unset;
}
.hero__container {
mix-blend-mode: darken;
}
}
src/components/sections/blog/hero/index.tsx
+20 -7
View File
@@ -1,3 +1,6 @@
import { useTheme } from 'next-themes'
import { useEffect, useRef } from 'react'
import { BlogCard } from '~/components/common/card'
import { Container } from '~/components/layout/container'
import Section from '~/components/layout/section'
@@ -11,20 +14,30 @@ interface HeroProps {
}
const Hero = ({ featuredPost }: HeroProps) => {
const { theme } = useTheme()
const blogHeroRef = useRef<HTMLImageElement>(null)
const blogHeroMobileRef = useRef<HTMLImageElement>(null)
useEffect(() => {
if (!blogHeroRef.current) return
if (!blogHeroMobileRef.current) return
blogHeroRef.current.src =
theme === 'dark' ? '/images/blog/blog.png' : '/images/blog/blog-light.png'
blogHeroMobileRef.current.src =
theme === 'dark' ? '/images/blog/blog.png' : '/images/blog/blog-light.png'
}, [theme])
return (
<Section className={s['section']} disableFadeIn>
<div className={s.hero__container}>
<img ref={blogHeroRef} className={s.hero} loading="eager" alt="hero" />
<img
className={s.hero}
loading="eager"
alt="hero"
src="/images/blog/blog.png"
/>
<img
ref={blogHeroMobileRef}
className={s.hero__mobile}
loading="eager"
alt="hero"
src="/images/blog/blog.png"
/>
</div>
<Container className={s['container']}>
src/components/sections/blog/post-hero/hero.module.scss
+6
View File
@@ -54,3 +54,9 @@
gap: tovw(8px, 'default', 8px);
}
}
[data-theme='light'] {
.section {
background: unset;
}
}
src/components/sections/blog/shares/shares.module.scss
+1 -1
View File
@@ -26,7 +26,7 @@
a {
display: flex;
transition: filter 200ms;
border: tovw(1px, 'default', 1px) solid #fff;
border: tovw(1px, 'default', 1px) solid var(--color-white);
border-radius: tovw(30px, 'default', 20px);
background-color: var(--color-black);
cursor: pointer;
src/components/sections/careers/hero/hero.module.scss
+78 -25
View File
@@ -21,43 +21,73 @@
}
}
.hero__container {
.video_container {
@include respond-to('mobile') {
min-height: tovw(400px, 'mobile', 510px);
min-height: unset;
}
display: flex;
place-content: center;
min-height: tovw(750px, 'default', 366px);
position: relative;
align-self: center;
width: 75%;
margin-left: tovw(165px, 'default', 125px);
min-height: tovw(790px, 'default', 380px);
margin-top: tovw(-30px, 'default');
padding-top: tovw(30px, 'default', 20px);
.hero {
video {
@include respond-to('mobile') {
display: none;
}
width: 100%;
margin: auto;
width: tovw(1380px, 'default', 700px);
padding-left: tovw(60px, 'default', 20px);
margin-top: tovw(-30px, 'default', -30px);
mix-blend-mode: screen;
z-index: 1;
}
&__mobile {
@include respond-to('mobile') {
display: flex;
margin: tovw(50px, 'mobile', 120px) 0 tovw(50px, 'mobile', 70px)
tovw(-30px, 'mobile', -30px);
width: 140%;
mix-blend-mode: screen;
place-self: center;
mask-image: linear-gradient(
0deg,
rgb(255 255 255 / 0) 0%,
rgb(0 0 0) 25%
);
}
&::after {
position: absolute;
top: 0;
left: 0;
z-index: 1;
background: radial-gradient(
ellipse,
rgb(3 3 3 / 0) 40%,
rgb(3 3 3 / 1) 62%,
rgb(3 3 3 / 1) 100%
);
transform: translateX(-25%);
width: 200%;
height: 100%;
content: '';
}
}
display: none;
.hero__container {
@include respond-to('mobile') {
display: flex;
place-content: center;
min-height: tovw(750px, 'default', 366px);
min-height: tovw(400px, 'mobile', 510px);
}
display: none;
.hero__mobile {
@include respond-to('mobile') {
display: flex;
margin: tovw(50px, 'mobile', 120px) 0 tovw(50px, 'mobile', 70px)
tovw(-30px, 'mobile', -30px);
width: 140%;
mix-blend-mode: screen;
place-self: center;
mask-image: linear-gradient(
0deg,
rgb(255 255 255 / 0) 0%,
rgb(0 0 0) 25%
);
}
display: none;
}
}
@@ -162,3 +192,26 @@
height: tovw(740px, 'default', 740px);
}
}
[data-theme='light'] {
.video_container {
mix-blend-mode: darken;
&::after {
background: radial-gradient(
ellipse,
rgb(251 251 251 / 0) 40%,
rgb(251 251 251 / 1) 62%,
rgb(251 251 251 / 1) 100%
);
}
}
.hero__container {
mix-blend-mode: darken;
}
.gradient {
display: none;
}
}
src/components/sections/careers/hero/index.tsx
+46 -7
View File
@@ -1,3 +1,6 @@
import { useTheme } from 'next-themes'
import { useEffect, useRef, useState } from 'react'
import { Arrow } from '~/components/icons/arrow'
import Line from '~/components/icons/line'
import { Container } from '~/components/layout/container'
@@ -14,21 +17,57 @@ interface Props {
}
const Hero = ({ data }: Props) => {
const { theme } = useTheme()
const [webmSource, setWebmSource] = useState('')
const [mp4Source, setMp4Source] = useState('')
useEffect(() => {
if (theme === 'dark') {
setWebmSource('/videos/banner-careers-light.webm')
setMp4Source('/videos/banner-careers-light.mp4')
}
if (theme === 'light') {
setWebmSource('/videos/banner-careers-light.webm')
setMp4Source('/videos/banner-careers-light.mp4')
}
}, [theme])
const careersHeroMobileRef = useRef<HTMLImageElement>(null)
useEffect(() => {
if (!careersHeroMobileRef.current) return
careersHeroMobileRef.current.src =
theme === 'dark'
? '/images/careers/careers.png'
: '/images/careers/careers-light.jpg'
}, [theme])
return (
<Section className={s['section']} disableFadeIn>
<div className={s.gradient} />
<div className={s['video_container']}>
<video
key={mp4Source}
autoPlay
controls={false}
loop
muted
playsInline={true}
preload="true"
>
<source src={webmSource} type="video/webm" />
<source src={mp4Source} type="video/mp4" />
</video>
</div>
<div className={s.hero__container}>
<img
className={s.hero}
loading="eager"
alt="hero"
src="/images/careers/careers.png"
/>
<img
ref={careersHeroMobileRef}
className={s.hero__mobile}
loading="eager"
alt="hero"
src="/images/careers/careers.png"
/>
</div>
<Container className={s['container']}>
src/components/sections/careers/values/values.module.scss
+9
View File
@@ -145,3 +145,12 @@
z-index: -1;
}
}
[data-theme='light'] {
.features {
img {
filter: invert(100%) saturate(50%) hue-rotate(180deg);
mix-blend-mode: darken !important;
}
}
}
src/components/sections/careers/why/why.module.scss
+8
View File
@@ -81,3 +81,11 @@
}
}
}
[data-theme='light'] {
.features {
img {
filter: invert(100%);
}
}
}
src/components/sections/community/events/events.module.scss
+14
View File
@@ -150,3 +150,17 @@
}
}
}
[data-theme='light'] {
.events__container {
&::after,
&::before {
background: linear-gradient(
90deg,
rgb(251 251 251 / 0) 0%,
rgb(251 251 251 / 0.95) 35%,
rgb(251 251 251 / 1) 65%
);
}
}
}
src/components/sections/community/hero/hero.module.scss
+23
View File
@@ -201,3 +201,26 @@
}
}
}
[data-theme='light'] {
.video__container {
mix-blend-mode: darken;
&::after {
background: radial-gradient(
ellipse,
rgb(251 251 251 / 0) 25%,
rgb(251 251 251 / 0.9648) 60%,
rgb(251 251 251 / 1) 95%
);
}
}
.hero__container {
mix-blend-mode: darken;
}
.gradient {
display: hidden;
}
}
src/components/sections/community/hero/index.tsx
+35 -3
View File
@@ -1,3 +1,6 @@
import { useTheme } from 'next-themes'
import { useEffect, useRef, useState } from 'react'
import { Arrow } from '~/components/icons/arrow'
import Section from '~/components/layout/section'
import { ButtonLink } from '~/components/primitives/button'
@@ -17,11 +20,40 @@ interface Props {
}
const Hero = ({ data }: Props) => {
const { theme } = useTheme()
const [webmSource, setWebmSource] = useState('')
const [mp4Source, setMp4Source] = useState('')
const communityHeroMobileRef = useRef<HTMLImageElement>(null)
useEffect(() => {
if (!communityHeroMobileRef.current) return
communityHeroMobileRef.current.src =
theme === 'dark'
? '/images/community/hero/community.jpg'
: '/images/community/hero/community-light.jpg'
}, [theme])
useEffect(() => {
if (theme === 'dark') {
setWebmSource('/videos/banner-community.webm')
setMp4Source('/videos/banner-community.mp4')
}
if (theme === 'light') {
setWebmSource('/videos/banner-community-light.webm')
setMp4Source('/videos/banner-community-light.mp4')
}
}, [theme])
return (
<Section className={s['section']} disableFadeIn>
<div className={s['gradient']}></div>
<div className={s['video__container']}>
<video
key={mp4Source}
autoPlay
controls={false}
loop
@@ -29,16 +61,16 @@ const Hero = ({ data }: Props) => {
playsInline={true}
preload="true"
>
<source src="/videos/banner-community.webm" type="video/webm" />
<source src="/videos/banner-community.mp4" type="video/mp4" />
<source src={webmSource} type="video/webm" />
<source src={mp4Source} type="video/mp4" />
</video>
</div>
<div className={s.hero__container}>
<img
ref={communityHeroMobileRef}
className={s.hero__mobile}
loading="eager"
alt="hero"
src="/images/community/hero/community.jpg"
/>
</div>
<div className={s['header']}>
src/components/sections/community/socials/index.tsx
+17 -1
View File
@@ -1,5 +1,7 @@
import clsx from 'clsx'
import Link from 'next/link'
import { useTheme } from 'next-themes'
import { useEffect, useRef } from 'react'
import Line from '~/components/icons/line'
import {
@@ -27,6 +29,9 @@ interface Props {
socialsImage: {
url: string
}
socialsImageLight: {
url: string
}
socialsTwitter: string
socialsDiscord: string
socialsDiscourse: string
@@ -39,14 +44,25 @@ interface Props {
}
const Socials = ({ data, alternative }: Props) => {
const { theme } = useTheme()
const planetImageRef = useRef<HTMLImageElement>(null)
useEffect(() => {
if (!planetImageRef.current) return
planetImageRef.current.src =
theme === 'dark' ? data?.socialsImage?.url : data?.socialsImageLight?.url
}, [theme, data])
return (
<Section className={s['section']}>
<Container className={s['container']}>
<img
ref={planetImageRef}
alt="Planet"
className={s['planet--image']}
loading="lazy"
src={data?.socialsImage?.url}
/>
<div>
<div className={s['header']}>
src/components/sections/community/socials/socials.module.scss
+1 -1
View File
@@ -138,7 +138,7 @@
a {
display: flex;
transition: filter 200ms;
border: tovw(1px, 'default', 1px) solid #fff;
border: tovw(1px, 'default', 1px) solid var(--color-white);
border-radius: tovw(30px, 'default', 20px);
background-color: var(--color-black);
cursor: pointer;
src/components/sections/contact/form/form.module.scss
+13
View File
@@ -160,3 +160,16 @@
}
}
}
[data-theme='light'] {
.section .container {
background: rgb(251 251 251 / 0.6);
box-shadow: 0px 2px 60px rgb(0 0 0 / 0.2);
input,
textarea,
select {
color: var(--color-white);
}
}
}
src/components/sections/contact/hero/hero.module.scss
+8
View File
@@ -181,3 +181,11 @@
height: tovw(740px, 'default', 740px);
}
}
[data-theme='light'] {
.body {
a svg {
filter: invert(100%);
}
}
}
src/components/sections/homepage/benefits/benefit/benefit.module.scss
+3 -3
View File
@@ -19,15 +19,15 @@
top: 0;
left: 0;
opacity: 0.5;
z-index: 1;
background: linear-gradient(
134.38deg,
#fff 4.91%,
rgb(255 255 255 / 0) 108.92%
var(--color-white) 4.91%,
var(--color-black) 108.92%
);
width: tovw(38px, 'default', 38px);
height: tovw(27px, 'default', 27px);
content: '';
z-index: -1;
}
svg {
src/components/sections/homepage/benefits/benefits.module.scss
+24 -2
View File
@@ -111,7 +111,6 @@
padding-right: tovw(69px, 'default', 69px);
width: 100%;
max-width: tovw(1080px, 'default', 730px);
mix-blend-mode: difference;
> ul {
margin-top: tovw(88px, 'default', 72px);
@@ -223,6 +222,29 @@
overflow: hidden;
top: 39.2%;
left: 20.7%;
mix-blend-mode: screen;
z-index: -1;
mix-blend-mode: screen;
}
[data-theme='light'] {
.section {
.background {
background-image: url('/images/benefit-bg-light.png');
}
.ball {
background-color: var(--color-black);
box-shadow: 0px 4px 115px 15px #0000f4,
0px 0px 70px 20px var(--color-black),
inset -39px -20px 100px rgb(0 0 244 / 0.73);
mix-blend-mode: darken;
}
}
.benefit {
&__image {
filter: invert(100%) saturate(0%);
mix-blend-mode: darken;
}
}
}
src/components/sections/homepage/hero/hero.module.scss
+13 -12
View File
@@ -56,23 +56,12 @@
height: 101%;
content: '';
pointer-events: none;
@supports (aspect-ratio: 16 / 9) {
aspect-ratio: 16 / 9;
}
}
&::before {
background: radial-gradient(
ellipse farthest-corner at center center,
rgb(4 4 4 / 0.25) 44%,
var(--color-black) 0
);
width: 120%;
height: 115%;
filter: blur(tovw(40px, 'default', 30px));
will-change: filter, transform;
}
.line {
margin: tovw(10px, 'default', 10px) auto tovw(23px, 'default', 20px) auto;
width: tovw(3px, 'default', 2px);
@@ -112,3 +101,15 @@
width: 100%;
}
}
[data-theme='light'] {
.section {
video {
mix-blend-mode: darken;
}
@include respond-to('mobile') {
background-image: url('/images/hero-mobile-light.png');
}
}
}
src/components/sections/homepage/hero/index.tsx
+15 -2
View File
@@ -1,5 +1,6 @@
import clsx from 'clsx'
import { useRef } from 'react'
import { useTheme } from 'next-themes'
import { useEffect, useRef } from 'react'
import Line from '~/components/icons/line'
import Section from '~/components/layout/section'
@@ -23,6 +24,8 @@ interface props {
const Hero = ({ data }: props) => {
const videoRef = useRef<HTMLVideoElement>(null)
const { theme } = useTheme()
useIsomorphicLayoutEffect(() => {
if (!videoRef.current) return
videoRef.current.addEventListener(
@@ -35,6 +38,16 @@ const Hero = ({ data }: props) => {
false
)
}, [])
useEffect(() => {
if (!videoRef.current) return
videoRef.current.src =
theme === 'dark'
? '/videos/hero-grid.mp4'
: '/videos/Banner-Home-Light.mp4'
}, [theme])
return (
<Section className={s['section']} disableFadeIn>
<video
@@ -46,7 +59,7 @@ const Hero = ({ data }: props) => {
preload="true"
ref={videoRef}
>
<source src="/videos/hero-grid.mp4" type="video/mp4" />
<source type="video/mp4" />
</video>
<Heading
as="h1"
src/components/sections/homepage/latest-news/index.tsx
+5 -1
View File
@@ -1,5 +1,6 @@
import 'keen-slider/keen-slider.min.css'
import clsx from 'clsx'
import { useKeenSlider } from 'keen-slider/react'
import { Key, useState } from 'react'
@@ -51,7 +52,10 @@ const LatestNews = ({ data, blogData }: Props) => {
/>
</Container>
<div className={s['slider__container']}>
<div className={`${s.events__container} keen-slider`} ref={sliderRef}>
<div
className={clsx(s.events__container, 'keen-slider')}
ref={sliderRef}
>
{blogData.map((item: any, i: Key) => (
<Card
key={i}
src/components/sections/homepage/latest-news/latest-news.module.scss
+16
View File
@@ -147,3 +147,19 @@
}
}
}
[data-theme='light'] {
.section {
.events__container {
&::after,
&::before {
background: linear-gradient(
90deg,
rgb(251 251 251 / 0) 0%,
rgb(251 251 251 / 0.95) 35%,
rgb(251 251 251 / 1) 65%
);
}
}
}
}
src/components/sections/homepage/what-others-say/index.tsx
+18 -2
View File
@@ -3,6 +3,7 @@ import 'keen-slider/keen-slider.min.css'
import clsx from 'clsx'
import { useKeenSlider } from 'keen-slider/react'
import { useRealViewport } from 'next-real-viewport'
import { useTheme } from 'next-themes'
import { useEffect, useRef } from 'react'
import { Container } from '~/components/layout/container'
@@ -29,7 +30,22 @@ interface Props {
}
const WhatOthersSay = ({ data, testimonialsData }: Props) => {
const { theme } = useTheme()
const carouselRef = useRef<HTMLDivElement>(null)
const imageRef = useRef<HTMLImageElement>(null)
const mobileImageRef = useRef<HTMLImageElement>(null)
useEffect(() => {
if (!imageRef.current) return
if (!mobileImageRef.current) return
imageRef.current.src =
theme === 'dark' ? '/images/head.png' : '/images/head-light.png'
mobileImageRef.current.src =
theme === 'dark' ? '/images/head.png' : '/images/head-light.png'
}, [theme])
const { vw } = useRealViewport()
const [ref] = useKeenSlider<HTMLDivElement>({
mode: 'free-snap',
@@ -119,7 +135,7 @@ const WhatOthersSay = ({ data, testimonialsData }: Props) => {
</div>
<div className={s['carousel']} ref={carouselRef}>
<div className={s['image']}>
<img src="/images/head.png" loading="lazy" alt="Head" />
<img ref={imageRef} loading="lazy" alt="Head" />
</div>
{testimonialsData.map((testimonial) => {
return (
@@ -137,7 +153,7 @@ const WhatOthersSay = ({ data, testimonialsData }: Props) => {
</Container>
<div ref={ref} className={clsx('keen-slider', s['slider'])}>
<div className={s['image']}>
<img src="/images/head.png" loading="lazy" alt="Head" />
<img ref={mobileImageRef} loading="lazy" alt="Head" />
</div>
{testimonialsData.map((testimonial) => {
return (
src/components/sections/homepage/what-others-say/item/item.module.scss
+1 -1
View File
@@ -21,7 +21,7 @@
margin: tovw(-210px) 0 0 tovw(-210px);
border: tovw(1.5px, 'default', 1px) solid var(--color-grey-light);
border-radius: tovw(8px, 'default', 8px);
background-color: rgb(0 0 0 / 0.9);
background-color: var(--color-black);
padding: tovw(24px, 'default', 22px);
width: tovw(420px);
height: tovw(270px, 'default', 270px);
src/components/sections/newsroom/hero/hero.module.scss
+19
View File
@@ -213,3 +213,22 @@
height: tovw(740px, 'default', 740px);
}
}
[data-theme='light'] {
.video_container {
mix-blend-mode: darken;
&::after {
display: none;
}
}
.hero__container {
mix-blend-mode: darken;
filter: brightness(115%);
}
.gradient {
display: none;
}
}
src/components/sections/newsroom/hero/index.tsx
+35 -3
View File
@@ -1,3 +1,6 @@
import { useTheme } from 'next-themes'
import { useEffect, useRef, useState } from 'react'
import { Arrow } from '~/components/icons/arrow'
import Line from '~/components/icons/line'
import { Container } from '~/components/layout/container'
@@ -17,11 +20,40 @@ interface Props {
}
const Hero = ({ data }: Props) => {
const { theme } = useTheme()
const [webmSource, setWebmSource] = useState('')
const [mp4Source, setMp4Source] = useState('')
useEffect(() => {
if (theme === 'dark') {
setWebmSource('/videos/banner-press.webm')
setMp4Source('/videos/banner-press.mp4')
}
if (theme === 'light') {
setWebmSource('/videos/banner-press-light.webm')
setMp4Source('/videos/banner-press-light.mp4')
}
}, [theme])
const pressHeroMobileRef = useRef<HTMLImageElement>(null)
useEffect(() => {
if (!pressHeroMobileRef.current) return
pressHeroMobileRef.current.src =
theme === 'dark'
? '/images/press/press.png'
: '/images/press/press-light.jpg'
}, [theme])
return (
<Section className={s['section']} disableFadeIn>
<div className={s.gradient} />
<div className={s['video_container']}>
<video
key={mp4Source}
autoPlay
controls={false}
loop
@@ -29,16 +61,16 @@ const Hero = ({ data }: Props) => {
playsInline={true}
preload="true"
>
<source src="/videos/banner-press.webm" type="video/webm" />
<source src="/videos/banner-press.mp4" type="video/mp4" />
<source src={webmSource} type="video/webm" />
<source src={mp4Source} type="video/mp4" />
</video>
</div>
<div className={s.hero__container}>
<img
ref={pressHeroMobileRef}
className={s.hero__mobile}
loading="eager"
alt="hero"
src="/images/press/press.png"
/>
</div>
<Container className={s['container']}>
src/components/sections/newsroom/media/media.module.scss
+56 -1
View File
@@ -2,7 +2,7 @@
.section {
@include respond-to('mobile') {
padding-bottom: 0;
padding: 0;
}
position: relative;
@@ -60,6 +60,37 @@
width: 100%;
}
&::after,
&::before {
@include respond-to('mobile') {
display: block;
position: absolute;
right: tovw(-20px, 'default', -20px);
height: 100%;
content: '';
background: linear-gradient(
90deg,
rgb(3 3 3 / 0) 0%,
rgb(3 3 3 / 0.55) 35%,
rgb(3 3 3 / 1) 95%
);
width: tovw(20px, 'mobile', 20px);
}
display: none;
}
&::before {
@include respond-to('mobile') {
content: initial;
}
right: initial;
left: tovw(-180px);
transform: scaleX(-1);
z-index: 5;
}
.image__container {
cursor: pointer;
position: relative;
@@ -130,6 +161,7 @@
}
.videolabel {
color: var(--color-white);
display: block;
font-family: var(--font-tt-hoves);
font-size: tovw(40px, 'default', 18px);
@@ -137,3 +169,26 @@
line-height: 120%;
letter-spacing: -0.02em;
}
[data-theme='light'] {
.container .media__block {
&::after,
&::before {
@include respond-to('mobile') {
background: linear-gradient(
90deg,
rgb(251 251 251 / 0) 0%,
rgb(251 251 251 / 0.55) 35%,
rgb(251 251 251 / 1) 95%
);
}
background: linear-gradient(
90deg,
rgb(251 251 251 / 0) 0%,
rgb(251 251 251 / 0.95) 35%,
rgb(251 251 251 / 1) 65%
);
}
}
}
src/components/sections/newsroom/press/press.module.scss
+14
View File
@@ -135,3 +135,17 @@
}
}
}
[data-theme='light'] {
.events__container {
&::after,
&::before {
background: linear-gradient(
90deg,
rgb(251 251 251 / 0) 0%,
rgb(251 251 251 / 0.95) 35%,
rgb(251 251 251 / 1) 65%
);
}
}
}
src/components/sections/partners/contact/contact.module.scss
+15
View File
@@ -223,3 +223,18 @@
}
}
}
[data-theme='light'] {
.section .container {
.form__container {
background: rgb(251 251 251 / 0.6);
box-shadow: 0px 2px 60px rgb(0 0 0 / 0.2);
}
input,
textarea,
select {
color: var(--color-white);
}
}
}
src/components/sections/partners/opportunities/index.tsx
+25 -10
View File
@@ -37,6 +37,21 @@ interface Props {
label: string
link: string
}[]
oportunitiesImage01: {
url: string
}
oportunitiesImage02: {
url: string
}
oportunitiesImage03: {
url: string
}
oportunitiesImage04: {
url: string
}
oportunitiesImage05: {
url: string
}
}
}
@@ -47,7 +62,7 @@ const Opportunities = ({ data }: Props) => {
<div className={s.block} id="validators">
<img
className={s.item_image}
src="/images/careers/curiosity.png"
src={data?.oportunitiesImage01?.url}
alt="validators"
/>
<div>
@@ -57,7 +72,7 @@ const Opportunities = ({ data }: Props) => {
</Heading>
<img
className={s.item_image__mobile}
src="/images/careers/curiosity.png"
src={data?.oportunitiesImage01?.url}
alt="validators"
/>
</div>
@@ -78,7 +93,7 @@ const Opportunities = ({ data }: Props) => {
<div className={s.block} id="providers">
<img
className={s.item_image}
src="/images/careers/elegance.png"
src={data?.oportunitiesImage02?.url}
alt="validators"
/>
<div>
@@ -88,7 +103,7 @@ const Opportunities = ({ data }: Props) => {
</Heading>
<img
className={s.item_image__mobile}
src="/images/careers/elegance.png"
src={data?.oportunitiesImage02?.url}
alt="validators"
/>
</div>
@@ -109,7 +124,7 @@ const Opportunities = ({ data }: Props) => {
<div className={s.block} id="developers">
<img
className={s.item_image}
src="/images/careers/precision.png"
src={data?.oportunitiesImage03?.url}
alt="validators"
/>
<div>
@@ -119,7 +134,7 @@ const Opportunities = ({ data }: Props) => {
</Heading>
<img
className={s.item_image__mobile}
src="/images/careers/precision.png"
src={data?.oportunitiesImage03?.url}
alt="validators"
/>
</div>
@@ -140,7 +155,7 @@ const Opportunities = ({ data }: Props) => {
<div className={s.block} id="investors">
<img
className={s.item_image}
src="/images/careers/self.png"
src={data?.oportunitiesImage04?.url}
alt="validators"
/>
<div>
@@ -150,7 +165,7 @@ const Opportunities = ({ data }: Props) => {
</Heading>{' '}
<img
className={s.item_image__mobile}
src="/images/careers/self.png"
src={data?.oportunitiesImage04?.url}
alt="validators"
/>
</div>
@@ -171,7 +186,7 @@ const Opportunities = ({ data }: Props) => {
<div className={s.block} id="testnet">
<img
className={s.item_image}
src="/images/careers/curiosity.png"
src={data?.oportunitiesImage05?.url}
alt="validators"
/>
<div>
@@ -181,7 +196,7 @@ const Opportunities = ({ data }: Props) => {
</Heading>
<img
className={s.item_image__mobile}
src="/images/careers/curiosity.png"
src={data?.oportunitiesImage05?.url}
alt="validators"
/>
</div>
src/components/sections/partners/opportunities/opportunities.module.scss
+14
View File
@@ -158,3 +158,17 @@
}
}
}
[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;
}
}
}
}
src/components/sections/products/app/app.module.scss
+6
View File
@@ -79,3 +79,9 @@
}
}
}
[data-theme='light'] {
.section div:first-child {
mix-blend-mode: darken;
}
}
src/components/sections/products/app/index.tsx
+26 -6
View File
@@ -1,3 +1,6 @@
import { useTheme } from 'next-themes'
import { useEffect, useRef } from 'react'
import { Container } from '~/components/layout/container'
import Section from '~/components/layout/section'
import Heading from '~/components/primitives/heading'
@@ -14,20 +17,37 @@ interface Props {
appMobileImg: {
url: string
}
appImgLight: {
url: string
}
appMobileImgLight: {
url: string
}
}
}
const AppSection = ({ data }: Props) => {
const { theme } = useTheme()
const appImgRef = useRef<HTMLImageElement>(null)
const appImgMobileRef = useRef<HTMLImageElement>(null)
useEffect(() => {
if (!appImgRef.current) return
if (!appImgMobileRef.current) return
appImgRef.current.src =
theme === 'dark' ? data?.appImg?.url : data?.appImgLight?.url
appImgMobileRef.current.src =
theme === 'dark' ? data?.appMobileImg?.url : data?.appMobileImgLight?.url
}, [theme, data])
return (
<Section className={s['section']} id="laconicapp">
<Container className={s['container']}>
<div>
<img className={s.app__img} src={data?.appImg?.url} alt="app" />
<img
className={s.app__img__mobile}
src={data?.appMobileImg?.url}
alt="app"
/>
<img ref={appImgRef} className={s.app__img} alt="app" />
<img ref={appImgMobileRef} className={s.app__img__mobile} alt="app" />
</div>
<div>
<Heading as="h2" variant="lg">
src/components/sections/products/hero/hero.module.scss
+26 -1
View File
@@ -29,7 +29,7 @@
align-self: center;
position: relative;
width: 82%;
min-height: tovw(920px, 'default', 435px);
min-height: tovw(925px, 'default', 435px);
margin-top: tovw(-165px, 'default');
margin-bottom: tovw(-140px, 'default');
padding-top: tovw(30px, 'default', 20px);
@@ -68,11 +68,17 @@
width: 200%;
mix-blend-mode: screen;
place-self: center;
min-height: tovw(328px, 'mobile', 340px);
mask-image: linear-gradient(
0deg,
rgb(255 255 255 / 0) 0%,
rgb(0 0 0) 25%
);
img {
margin: auto;
width: 100%;
}
}
display: none;
@@ -231,3 +237,22 @@
height: tovw(740px, 'default', 740px);
}
}
[data-theme='light'] {
.video_container {
mix-blend-mode: darken;
&::after {
display: none;
}
}
.hero__mobile {
mix-blend-mode: darken;
filter: brightness(110%);
}
.gradient {
display: none;
}
}
src/components/sections/products/hero/index.tsx
+34 -15
View File
@@ -1,4 +1,5 @@
import { useRef } from 'react'
import { useTheme } from 'next-themes'
import { useEffect, useRef, useState } from 'react'
import { Arrow } from '~/components/icons/arrow'
import { Container } from '~/components/layout/container'
@@ -24,36 +25,54 @@ interface Props {
}
const Hero = ({ data }: Props) => {
const heroVideoRef = useRef<HTMLVideoElement>(null)
const { theme } = useTheme()
// const loop = () => {
// heroVideoRef.current?.play()
// }
const [webmSource, setWebmSource] = useState('')
const [mp4Source, setMp4Source] = useState('')
const productsHeroMobileRef = useRef<HTMLImageElement>(null)
useEffect(() => {
if (!productsHeroMobileRef.current) return
productsHeroMobileRef.current.src =
theme === 'dark'
? '/images/products/products.jpg'
: '/images/products/products-light.jpg'
}, [theme])
useEffect(() => {
if (theme === 'dark') {
setWebmSource('/videos/banner-products.webm')
setMp4Source('/videos/banner-products.mp4')
}
if (theme === 'light') {
setWebmSource('/videos/banner-products-light.webm')
setMp4Source('/videos/banner-products-light.mp4')
}
}, [theme])
return (
<Section className={s['section']} disableFadeIn>
<div className={s.gradient} />
<div className={s.video_container}>
<video
key={mp4Source}
autoPlay
ref={heroVideoRef}
controls={false}
loop
// onEnded={() => loop()}
muted
playsInline={true}
preload="true"
>
<source src="/videos/banner-products.webm" type="video/webm" />
<source src="/videos/banner-products.mp4" type="video/mp4" />
<source src={webmSource} type="video/webm" />
<source src={mp4Source} type="video/mp4" />
</video>
</div>
<img
className={s.hero__mobile}
loading="eager"
alt="hero"
src="/images/products/products.jpg"
/>
<div className={s.hero__mobile}>
<img ref={productsHeroMobileRef} loading="eager" alt="hero" />
</div>
<Container className={s['container']}>
<div className={s.body}>
<div>
src/components/sections/products/network/index.tsx
+28 -6
View File
@@ -1,4 +1,7 @@
// import { Arrow } from '~/components/icons/arrow'
import { useTheme } from 'next-themes'
import { useEffect, useRef } from 'react'
import { Container } from '~/components/layout/container'
import Section from '~/components/layout/section'
import Heading from '~/components/primitives/heading'
@@ -18,10 +21,33 @@ interface Props {
networkMobileImg: {
url: string
}
networkImgLight: {
url: string
}
networkMobileImgLight: {
url: string
}
}
}
const Network = ({ data }: Props) => {
const { theme } = useTheme()
const networkImgRef = useRef<HTMLImageElement>(null)
const networkImgMobileRef = useRef<HTMLImageElement>(null)
useEffect(() => {
if (!networkImgRef.current) return
if (!networkImgMobileRef.current) return
networkImgRef.current.src =
theme === 'dark' ? data?.networkImg?.url : data?.networkImgLight?.url
networkImgMobileRef.current.src =
theme === 'dark'
? data?.networkMobileImg?.url
: data?.networkMobileImgLight?.url
}, [theme, data])
return (
<Section className={s['section']} id="laconicnetwork">
<Container className={s['container']}>
@@ -31,8 +57,8 @@ const Network = ({ data }: Props) => {
</Heading>
<p>{data?.networkDesc}</p>
<img
ref={networkImgMobileRef}
className={s.network__img__mobile}
src={data?.networkMobileImg?.url}
alt="network"
/>
<div className={s.features}>
@@ -50,11 +76,7 @@ const Network = ({ data }: Props) => {
</div>
</div>
</div>
<img
className={s.network__img}
src={data?.networkImg?.url}
alt="network"
/>
<img ref={networkImgRef} className={s.network__img} alt="network" />
</Container>
</Section>
)
src/components/sections/products/network/network.module.scss
+15
View File
@@ -124,3 +124,18 @@
}
}
}
[data-theme='light'] {
.features {
img {
filter: invert(100%);
}
}
.section .container {
.network__img,
.network__img__mobile {
mix-blend-mode: darken;
}
}
}
src/components/sections/products/stack/index.tsx
+26 -6
View File
@@ -1,3 +1,6 @@
import { useTheme } from 'next-themes'
import { useEffect, useRef } from 'react'
import Line from '~/components/icons/line'
import { Container } from '~/components/layout/container'
import Section from '~/components/layout/section'
@@ -18,15 +21,36 @@ interface Props {
stackImage: {
url: string
}
stackImageLight: {
url: string
}
stackSvgImg: {
url: string
}
stackSvgImgLight: {
url: string
}
}
}
const Stack = ({ data }: Props) => {
const stackData = data?.stackListData?.stackData
const { theme } = useTheme()
const stackImgRef = useRef<HTMLImageElement>(null)
const stackSvgRef = useRef<HTMLImageElement>(null)
useEffect(() => {
if (!stackImgRef.current) return
if (!stackSvgRef.current) return
stackImgRef.current.src =
theme === 'dark' ? data?.stackImage?.url : data?.stackImageLight?.url
stackSvgRef.current.src =
theme === 'dark' ? data?.stackSvgImg?.url : data?.stackSvgImgLight?.url
}, [theme, data])
return (
<Section className={s['section']} id="laconicstack">
<Container className={s['container']}>
@@ -53,14 +77,10 @@ const Stack = ({ data }: Props) => {
</div>
<div>
<div className={s.image__container}>
<img ref={stackImgRef} className={s.stack__img} alt="stack" />
<img
className={s.stack__img}
src={data?.stackImage?.url}
alt="stack"
/>
<img
ref={stackSvgRef}
className={`${s.stack__img} ${s.stack__img__small}`}
src={data?.stackSvgImg?.url}
alt="stack"
/>
</div>
src/components/sections/products/stack/stack.module.scss
+13
View File
@@ -167,3 +167,16 @@
}
}
}
[data-theme='light'] {
.section div:last-child {
.gradient {
background: linear-gradient(
180deg,
rgb(132 132 132 / 0) 0%,
rgb(132 132 132 / 0.4) 48.91%,
rgb(132 132 132 / 0) 100%
);
}
}
}
src/components/sections/products/token/token.module.scss
+14
View File
@@ -128,3 +128,17 @@
}
}
}
[data-theme='light'] {
.features {
img {
filter: invert(100%);
}
}
.token__img,
.token__img__mobile {
filter: invert(100%) brightness(150%) opacity(90%);
mix-blend-mode: darken !important;
}
}
src/components/sections/products/watchers/index.tsx
+32 -3
View File
@@ -1,3 +1,6 @@
import { useTheme } from 'next-themes'
import { useEffect, useRef } from 'react'
import Line from '~/components/icons/line'
import { Container } from '~/components/layout/container'
import Section from '~/components/layout/section'
@@ -11,9 +14,15 @@ interface Props {
watchersImage: {
url: string
}
watchersImageLight: {
url: string
}
watchersMobileImage: {
url: string
}
watchersMobileImageLight: {
url: string
}
watchersItem01: string
watchersItem02: string
watchersItem03: string
@@ -24,6 +33,25 @@ interface Props {
}
const Watchers = ({ data }: Props) => {
const { theme } = useTheme()
const watchersImgRef = useRef<HTMLImageElement>(null)
const watchersMobileImgRef = useRef<HTMLImageElement>(null)
useEffect(() => {
if (!watchersImgRef.current) return
if (!watchersMobileImgRef.current) return
watchersImgRef.current.src =
theme === 'dark'
? data?.watchersImage?.url
: data?.watchersImageLight?.url
watchersMobileImgRef.current.src =
theme === 'dark'
? data?.watchersMobileImage?.url
: data?.watchersMobileImageLight?.url
}, [theme, data])
return (
<Section className={s['section']} id="laconicwatchers">
<Container className={s['container']}>
@@ -32,8 +60,9 @@ const Watchers = ({ data }: Props) => {
<p>{data?.watchersP02}</p>
<p>{data?.watchersListHead}</p>
<img
ref={watchersMobileImgRef}
className={s.watchers__img__mobile}
src={data?.watchersMobileImage?.url}
// src={data?.watchersMobileImage?.url}
alt="network"
/>
<div className={s.features}>
@@ -59,10 +88,10 @@ const Watchers = ({ data }: Props) => {
variant="lg"
dangerouslySetInnerHTML={{ __html: data?.watchersHeading }}
/>
<img
ref={watchersImgRef}
className={s.watchers__img}
src={data?.watchersImage?.url}
// src={data?.watchersImage?.url}
alt="network"
/>
</div>
src/components/sections/products/watchers/watchers.module.scss
+12
View File
@@ -158,3 +158,15 @@
}
}
}
[data-theme='light'] {
.container {
.watchers__img {
mix-blend-mode: darken;
}
.watchers__img__mobile {
mix-blend-mode: darken;
}
}
}
src/css/global.scss
+28 -7
View File
@@ -14,12 +14,23 @@
--font-heading: var(--font-arthemys);
// Colors
--color-accent: #0000f4;
--color-black: #040404;
--color-white: #fbfbfb;
--color-grey: #565656;
--color-grey-light: #8e8e8e;
--color-grey-lightness: #dedede;
&[data-theme='dark'] {
--color-accent: #0000f4;
--color-black: #040404;
--color-white: #fbfbfb;
--color-grey: #565656;
--color-grey-light: #8e8e8e;
--color-grey-lightness: #dedede;
}
&[data-theme='light'] {
--color-accent: #0000f4;
--color-black: #fbfbfb;
--color-white: #040404;
--color-grey: #565656;
--color-grey-light: #8e8e8e;
--color-grey-lightness: #dedede;
}
// Duration
--duration-normal: 0.525s;
@@ -156,7 +167,7 @@ p {
transition: unset !important;
&:hover {
border: tovw(1px, 'default', 1px) solid transparent !important;
border: tovw(1px, 'default', 1px) solid var(--color-grey) !important;
}
&--is-focused {
@@ -232,3 +243,13 @@ p {
color: var(--color-grey-light) !important;
}
}
[data-theme='light'] {
[class$='-menu'] {
background: rgb(0 0 0 / 0.65) !important;
@-moz-document url-prefix("") {
background-color: var(--color-white) !important;
}
}
}
src/lib/cms/queries/community.js
+3
View File
@@ -52,6 +52,9 @@ const CommunitySocials = {
socialsImage {
url
}
socialsImageLight {
url
}
socialsTwitter
socialsDiscord
socialsDiscourse
src/lib/cms/queries/partners.js
+15
View File
@@ -28,6 +28,21 @@ const PartnersOportunities = {
oportunitiesItem03Links
oportunitiesItem04Links
oportunitiesItem05Links
oportunitiesImage01 {
url
}
oportunitiesImage02 {
url
}
oportunitiesImage03 {
url
}
oportunitiesImage04 {
url
}
oportunitiesImage05 {
url
}
}
}`
}
src/lib/cms/queries/products.js
+24
View File
@@ -26,9 +26,15 @@ const ProductsWatchers = {
watchersImage {
url
}
watchersImageLight {
url
}
watchersMobileImage {
url
}
watchersMobileImageLight {
url
}
watchersItem01
watchersItem02
watchersItem03
@@ -50,9 +56,15 @@ const ProductsStack = {
stackImage {
url
}
stackImageLight {
url
}
stackSvgImg {
url
}
stackSvgImgLight {
url
}
}
}
`
@@ -73,6 +85,12 @@ const ProductsNetwork = {
networkMobileImg {
url
}
networkImgLight {
url
}
networkMobileImgLight {
url
}
}
}
`
@@ -90,6 +108,12 @@ const ProductsApp = {
appMobileImg {
url
}
appImgLight {
url
}
appMobileImgLight {
url
}
}
}
`
src/pages/_app.tsx
+8 -5
View File
@@ -3,6 +3,7 @@ import '~/css/global.scss'
import { NextComponentType, NextPageContext } from 'next'
import { AppProps } from 'next/app'
import { RealViewportProvider } from 'next-real-viewport'
import { ThemeProvider } from 'next-themes'
import * as React from 'react'
import { QueryClient, QueryClientProvider } from 'react-query'
@@ -62,11 +63,13 @@ const App = ({ Component, pageProps, ...rest }: AppProps) => {
<RealViewportProvider debounceResize={false}>
<Noise />
<AnimationContextProvider>
<GAScripts />
<FontsReadyScript />
<Header />
{getLayout({ Component, pageProps, ...rest })}
<Footer />
<ThemeProvider enableSystem={false} defaultTheme="dark">
<GAScripts />
<FontsReadyScript />
<Header />
{getLayout({ Component, pageProps, ...rest })}
<Footer />
</ThemeProvider>
</AnimationContextProvider>
</RealViewportProvider>
</QueryClientProvider>