diff --git a/public/images/noise.png b/public/images/noise.png new file mode 100644 index 0000000..ee81468 Binary files /dev/null and b/public/images/noise.png differ diff --git a/src/components/common/footer/footer.module.scss b/src/components/common/footer/footer.module.scss index 25327d3..1a93c46 100644 --- a/src/components/common/footer/footer.module.scss +++ b/src/components/common/footer/footer.module.scss @@ -206,6 +206,7 @@ margin-bottom: tovw(14px, 'default', 14px); } + padding-top: tovw(3px, 'default', 2px); line-height: 1.45; &:first-of-type { diff --git a/src/components/common/footer/footer.tsx b/src/components/common/footer/footer.tsx index cfe9563..7fcd562 100644 --- a/src/components/common/footer/footer.tsx +++ b/src/components/common/footer/footer.tsx @@ -12,6 +12,7 @@ import { export const DevelopersLinks = [ { href: 'https://docs.laconic.com/', title: 'Developers' }, { href: 'https://github.com/LaconicNetwork', title: 'Github' }, + { href: '/about/#roadmap', title: 'Roadmap' }, { href: 'https://discord.com/invite/ukhbBemyxY', title: 'Chat' }, { href: 'https://laconic.community/', title: 'Forum' } ] @@ -27,12 +28,12 @@ export const ProductsLinks = [ export const AboutLinks = [ { href: '/about', title: 'About' }, - { href: 'https://docs.laconic.com/faq', title: 'FAQ' }, { href: '/about#team', title: 'Team' }, - { - href: 'https://laconic.community/c/join-the-laconic-network/13', - title: 'Careers' - } + { href: '/partners', title: 'Partners' }, + { href: '/press', title: 'Newsroom' }, + { href: '/careers', title: 'Careers' }, + { href: 'https://docs.laconic.com/faq', title: 'FAQ' }, + { href: '/contact', title: 'Contact' } ] export const CommunityLinks = [ diff --git a/src/components/common/noise/index.tsx b/src/components/common/noise/index.tsx index 8b48324..7b8b4a6 100644 --- a/src/components/common/noise/index.tsx +++ b/src/components/common/noise/index.tsx @@ -1,44 +1,9 @@ -import clsx from 'clsx' - -import { useDeviceDetect } from '~/hooks/use-device-detect' - import s from './noise.module.css' -export const Noise = ({ - softLight = true, - colorBurn = true, - ignoreDevice = false, - absolute = false -}) => { - const { isSafari, isMobile, loaded } = useDeviceDetect() - - if (!loaded) return null +export const Noise = () => { return ( <> - {(ignoreDevice || (!isSafari && !isMobile)) && ( - <> - {softLight && ( -
- )} - {colorBurn && ( -
- )} - - )} +
) } diff --git a/src/components/common/noise/noise.module.css b/src/components/common/noise/noise.module.css index 24e5ba6..cf7898c 100644 --- a/src/components/common/noise/noise.module.css +++ b/src/components/common/noise/noise.module.css @@ -1,33 +1,15 @@ .noise { - background-color: white; background-image: url('/images/noise.png'); background-repeat: repeat; - background-size: auto; - z-index: 500; + position: fixed; + z-index: 250; width: 300%; height: 300%; left: -100%; top: -100%; pointer-events: none; - mix-blend-mode: soft-light; - opacity: 0.2; -} - -.noise2 { - background-color: white; - background-image: url('/images/noise-2.png'); - background-repeat: repeat; - background-size: auto; - z-index: 500; - width: 300%; - height: 300%; - left: -100%; - top: -100%; - pointer-events: none; - mix-blend-mode: color-burn; - opacity: 0.8; will-change: transform; - animation: grain 16s steps(10) infinite; + animation: grain 6s steps(10) infinite; } @keyframes grain { diff --git a/src/components/sections/about/roadmap/index.tsx b/src/components/sections/about/roadmap/index.tsx index 9949a8e..2562bd8 100644 --- a/src/components/sections/about/roadmap/index.tsx +++ b/src/components/sections/about/roadmap/index.tsx @@ -32,7 +32,7 @@ const Roadmap = ({ data }: Props) => { const isMobile = useIsMobile() return ( -
+
{data?.roadmapHeading} diff --git a/src/components/sections/about/team/index.tsx b/src/components/sections/about/team/index.tsx index 54bdc55..e67fff0 100644 --- a/src/components/sections/about/team/index.tsx +++ b/src/components/sections/about/team/index.tsx @@ -26,11 +26,15 @@ interface Props { } const TeamSection = ({ teamData, data }: Props) => { - const laconicTeam = teamData?.filter( - (member) => member.memberTeam === 'Laconic' + const laconicTeam = teamData?.filter((member) => + member.memberTeam.includes('Laconic') + ) + const cercTeam = teamData?.filter((member) => + member.memberTeam.includes('Cerc') + ) + const xylmTeam = teamData?.filter((member) => + member.memberTeam.includes('Xylm') ) - const cercTeam = teamData?.filter((member) => member.memberTeam === 'Cerc') - const xylmTeam = teamData?.filter((member) => member.memberTeam === 'Xylm') return (
diff --git a/src/components/sections/about/team/team.module.scss b/src/components/sections/about/team/team.module.scss index 5b771d2..7622c64 100644 --- a/src/components/sections/about/team/team.module.scss +++ b/src/components/sections/about/team/team.module.scss @@ -103,16 +103,15 @@ .profiles__container { @include respond-to('mobile') { + gap: unset; width: 100vw; overflow: unset !important; scroll-behavior: smooth; } - @media screen and (min-width: 901px) { - display: flex; - justify-content: flex-start; - gap: tovw(100px, 'default', 40px); - } + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: tovw(100px, 'default', 40px); } .member { @@ -121,7 +120,7 @@ justify-content: space-between; transition: filter var(--normal-transition); width: tovw(194px, 'default', 80px) !important; - gap: tovw(24px, 'default', 24px); + gap: tovw(22px, 'default', 16px); img { @include respond-to('mobile') { @@ -136,6 +135,8 @@ border-radius: tovw(5px, 'default', 5px); overflow: hidden; + aspect-ratio: 1 /1; + object-fit: cover; } .description { diff --git a/src/components/sections/homepage/benefits/benefits.module.scss b/src/components/sections/homepage/benefits/benefits.module.scss index e05fa8b..152f62f 100644 --- a/src/components/sections/homepage/benefits/benefits.module.scss +++ b/src/components/sections/homepage/benefits/benefits.module.scss @@ -213,6 +213,7 @@ display: none; } + position: absolute; width: tovw(270px, 'default', 270px); height: tovw(270px, 'default', 270px); background-color: var(--color-white); @@ -222,5 +223,5 @@ overflow: hidden; top: 39.2%; left: 20.7%; - position: absolute; + mix-blend-mode: screen; } diff --git a/src/components/sections/homepage/what-others-say/index.tsx b/src/components/sections/homepage/what-others-say/index.tsx index ffcc9c9..d94bf28 100644 --- a/src/components/sections/homepage/what-others-say/index.tsx +++ b/src/components/sections/homepage/what-others-say/index.tsx @@ -40,7 +40,20 @@ const WhatOthersSay = ({ data, testimonialsData }: Props) => { }, breakpoints: { '(max-width: 900px)': { - mode: 'snap' + mode: 'snap', + slides: { + perView: 1.95, + spacing: 20, + origin: 'center' + } + }, + '(max-width: 600px)': { + mode: 'snap', + slides: { + perView: 1.25, + spacing: 14, + origin: 'center' + } } } }) diff --git a/src/components/sections/homepage/what-others-say/what-others-say.module.scss b/src/components/sections/homepage/what-others-say/what-others-say.module.scss index d4ea410..5828d07 100644 --- a/src/components/sections/homepage/what-others-say/what-others-say.module.scss +++ b/src/components/sections/homepage/what-others-say/what-others-say.module.scss @@ -90,13 +90,13 @@ } .slider { - align-items: center; - padding-left: tovw(16px, 'mobile'); - height: tovw(636px, 'mobile'); - @media screen and (min-width: 800px) { + @media screen and (min-width: 900px) { display: none !important; } + align-items: center; + height: tovw(636px, 'mobile'); + .image { position: absolute; left: tovw(10px, 'mobile'); diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 0450169..dc1a31c 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -8,6 +8,7 @@ import { QueryClient, QueryClientProvider } from 'react-query' import { Footer } from '~/components/common/footer' import { Header } from '~/components/common/header' +import { Noise } from '~/components/common/noise' import { AnimationContextProvider } from '~/context/animation' import { basementLog, isProd } from '~/lib/constants' import { FontsReadyScript } from '~/lib/font-scripts' @@ -59,6 +60,7 @@ const App = ({ Component, pageProps, ...rest }: AppProps) => { return ( +