Add new content, general styles

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 {

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 = [

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 && (
-            <div
-              className={clsx(
-                s.noise,
-                'noise',
-                absolute ? 'absolute' : 'fixed'
-              )}
-              aria-hidden
-            />
-          )}
-          {colorBurn && (
-            <div
-              className={clsx(
-                s.noise2,
-                'noise',
-                absolute ? 'absolute' : 'fixed'
-              )}
-              aria-hidden
-            />
-          )}
-        </>
-      )}
+      <div className={s.noise} aria-hidden />
     </>
   )
 }

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 {

src/components/sections/about/roadmap/index.tsx

@@ -32,7 +32,7 @@ const Roadmap = ({ data }: Props) => {
   const isMobile = useIsMobile()
 
   return (
-    <Section className={s['section']} id="team">
+    <Section className={s['section']} id="roadmap">
       <Container className={s['container']}>
         <Heading as="h2" variant="lg">
           {data?.roadmapHeading}

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 (
     <Section className={s['section']} id="team">

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 {

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;
 }

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'
+        }
       }
     }
   })

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');

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 (
     <QueryClientProvider client={queryClient}>
       <RealViewportProvider debounceResize={false}>
+        <Noise />
         <AnimationContextProvider>
           <GAScripts />
           <FontsReadyScript />