New assets, general style changes, CMS

src/components/common/card/card.module.scss

@@ -220,6 +220,12 @@
 
       &.is_news {
         gap: tovw(60px, 'default', 30px);
+
+        @media screen and (max-width: 1200px) {
+          display: flex;
+          flex-direction: column;
+          gap: tovw(2px, 'default', 2px);
+        }
       }
     }
 

src/components/sections/blog/post-hero/hero.module.scss

@@ -20,8 +20,10 @@
     min-height: auto;
   }
 
-  .author {
-    margin-top: tovw(48px, 'default', 48px);
+  .meta {
+    display: flex;
+    gap: tovw(25px, 'default', 25px);
+    margin-top: tovw(42px, 'default', 35px);
     text-transform: uppercase;
     line-height: tovw(22px, 'default', 22px);
     letter-spacing: -0.02em;
@@ -29,14 +31,6 @@
     font-size: tovw(18px, 'default', 18px);
   }
 
-  .date {
-    margin-bottom: tovw(20px, 'default', 23px);
-    line-height: tovw(22px, 'default', 22px);
-    letter-spacing: -0.02em;
-    font-family: var(--font-dm-mono);
-    font-size: tovw(18px, 'default', 18px);
-  }
-
   h1 {
     @include respond-to('mobile') {
       line-height: 104%;
@@ -48,7 +42,7 @@
 
   .categories {
     display: flex;
-    margin-top: tovw(45px, 'default', 45px);
+    margin-top: tovw(25px, 'default', 20px);
     padding: 0;
     list-style: none;
     gap: tovw(8px, 'default', 8px);

src/components/sections/blog/post-hero/index.tsx

@@ -1,5 +1,3 @@
-import clsx from 'clsx'
-
 import Category from '~/components/common/category'
 import Section from '~/components/layout/section'
 import Heading from '~/components/primitives/heading'
@@ -15,14 +13,15 @@ interface HeroProps {
 const Hero = ({ data }: HeroProps) => {
   return (
     <Section className={s['section']} disableFadeIn>
-      <span className={s.date}>{formatDate(data.date)}</span>
       <Heading as="h1" variant="lg" centered>
         {data.title}
       </Heading>
-      <span className={clsx(s.author, 'hide-on-desktop')}>
-        By — {data.author?.name}
-      </span>
-      <ul className={clsx(s.categories, 'hide-on-mobile')}>
+      <div className={s.meta}>
+        <span className={s.date}>{formatDate(data.date)}</span>
+        <span>-</span>
+        <span className={s.author}>By — {data.author?.name}</span>
+      </div>
+      <ul className={s.categories}>
         {data.category.map((category, index) => (
           <li key={index}>
             <Category label={category.title ?? ''} />

src/components/sections/homepage/latest-news/index.tsx

@@ -5,9 +5,9 @@ import { useKeenSlider } from 'keen-slider/react'
 import { Key, useState } from 'react'
 
 import Card from '~/components/common/card'
-import { ArrowSlider } from '~/components/icons/arrow'
 import { Container } from '~/components/layout/container'
 import Section from '~/components/layout/section'
+import { ButtonLink } from '~/components/primitives/button'
 import Heading from '~/components/primitives/heading'
 
 import s from './latest-news.module.scss'
@@ -25,7 +25,7 @@ const LatestNews = ({ data, blogData }: Props) => {
 
   const [sliderRef, slider] = useKeenSlider<HTMLDivElement>({
     initial: 0,
-    loop: true,
+    loop: false,
     mode: 'free-snap',
     slides: { perView: 3.915, spacing: 24 },
     created() {
@@ -33,11 +33,13 @@ const LatestNews = ({ data, blogData }: Props) => {
     },
     breakpoints: {
       '(max-width: 1140px)': {
-        slides: { perView: 2.915, spacing: 20 }
+        slides: { perView: 2.915, spacing: 20 },
+        loop: true
       },
       '(max-width: 900px)': {
         slides: { perView: 1.12, spacing: 12 },
-        mode: 'snap'
+        mode: 'snap',
+        loop: true
       }
     }
   })
@@ -70,18 +72,9 @@ const LatestNews = ({ data, blogData }: Props) => {
       <Container>
         {loaded && slider.current && (
           <div className={s.navigation}>
-            <ArrowSlider
-              onClick={(e: any) =>
-                e.stopPropagation() || slider.current?.prev()
-              }
-              className={s['arrow']}
-            />
-            <ArrowSlider
-              onClick={(e: any) =>
-                e.stopPropagation() || slider.current?.next()
-              }
-              className={s['arrow']}
-            />
+            <ButtonLink scroll={true} notExternal href="/blog">
+              MORE NEWS
+            </ButtonLink>
           </div>
         )}
       </Container>

src/components/sections/homepage/latest-news/latest-news.module.scss

@@ -122,29 +122,10 @@
     }
 
     display: flex;
-    padding-top: tovw(75px, 'default', 45px);
     width: 100%;
-    gap: tovw(25px, 'default', 18px);
+    padding-top: tovw(75px, 'default', 55px);
+    font-family: var(--font-dm-mono);
     place-content: center;
-
-    button {
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      border: unset;
-      padding: unset;
-      margin: unset;
-      background-color: unset;
-      height: tovw(45px, 'default', 40px);
-
-      &:first-child {
-        transform: rotate(180deg);
-      }
-
-      .arrow {
-        width: tovw(51px, 'default', 51px);
-      }
-    }
   }
 }
 

src/components/sections/products/token/index.tsx

@@ -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'
@@ -15,13 +18,36 @@ interface Props {
     tokenImg: {
       url: string
     }
+    tokenImgLight: {
+      url: string
+    }
     tokenMobileImg: {
       url: string
     }
+    tokenMobileImgLight: {
+      url: string
+    }
   }
 }
 
 const Token = ({ data }: Props) => {
+  const { theme } = useTheme()
+
+  const tokenImgRef = useRef<HTMLImageElement>(null)
+  const tokenImgMobileRef = useRef<HTMLImageElement>(null)
+
+  useEffect(() => {
+    if (!tokenImgRef.current) return
+    if (!tokenImgMobileRef.current) return
+
+    tokenImgRef.current.src =
+      theme === 'dark' ? data?.tokenImg?.url : data?.tokenImgLight?.url
+    tokenImgMobileRef.current.src =
+      theme === 'dark'
+        ? data?.tokenMobileImg?.url
+        : data?.tokenMobileImgLight?.url
+  }, [theme, data])
+
   return (
     <Section className={s['section']} id="laconictoken">
       <Container className={s['container']}>
@@ -32,7 +58,7 @@ const Token = ({ data }: Props) => {
           <p>{data?.tokenDesc}</p>
           <img
             className={s.token__img__mobile}
-            src={data?.tokenMobileImg?.url}
+            ref={tokenImgMobileRef}
             alt="token"
           />
           <p>LNT will also be used to:</p>
@@ -51,7 +77,7 @@ const Token = ({ data }: Props) => {
             </div>
           </div>
         </div>
-        <img className={s.token__img} src={data?.tokenImg?.url} alt="token" />
+        <img className={s.token__img} ref={tokenImgRef} alt="token" />
       </Container>
     </Section>
   )

src/components/sections/products/token/token.module.scss

@@ -138,7 +138,6 @@
 
   .token__img,
   .token__img__mobile {
-    filter: invert(100%) brightness(150%) opacity(90%);
     mix-blend-mode: darken !important;
   }
 }

src/lib/cms/queries/products.js

@@ -128,12 +128,18 @@ const ProductsToken = {
             tokenImg {
                 url
             }
+            tokenImgLight {
+                url
+            }
             tokenItem01
             tokenItem02
             tokenItem03
             tokenMobileImg {
                 url
             }
+            tokenMobileImgLight {
+                url
+            }
         }
     }
     `

src/lib/renderer/blog.module.scss

@@ -71,19 +71,23 @@
   }
 
   ul {
-    margin: tovw(76px, 'default', 40px) 0;
-    padding-left: tovw(87px, 'default', 22px);
+    margin: tovw(50px, 'default', 30px) 0;
+    padding-left: tovw(27px, 'default', 22px);
     list-style: none;
     position: relative;
 
     li {
+      p {
+        margin: tovw(15px, 'default', 10px);
+      }
+
       &::before {
         content: '';
         position: absolute;
         border-radius: 50%;
         height: 8px;
         width: 8px;
-        margin-top: 9px;
+        margin-top: tovw(15px, 'default', 8px);
         background: var(--color-accent);
         left: 0;
       }

src/pages/index.tsx

@@ -41,7 +41,7 @@ export const getStaticProps = async () => {
     props: {
       initialBlogPosts: {
         pagination: allBlogPosts.pagination,
-        data: allBlogPosts.data.slice(0, 8)
+        data: allBlogPosts.data.slice(0, 3)
       },
       heroData: heroData?.homePage,
       benefitsData: benefitsData?.homePage,