Work on client feedback (#45)

src/components/common/footer/footer.module.scss

@@ -178,10 +178,10 @@
       }
 
       display: flex;
-      gap: tovw(160px, 'default', 55px);
+      gap: tovw(105px, 'default', 65px);
 
       @media screen and (max-width: 1180px) {
-        gap: tovw(65px, 'default', 65px);
+        gap: tovw(70px, 'default', 15px);
       }
     }
   }

src/components/sections/about/hero/hero.module.scss

@@ -45,7 +45,7 @@
 .body {
   display: flex;
   flex-direction: column;
-  margin-top: tovw(16px, 'default', 10px);
+  margin-top: tovw(26px, 'default', 26px);
   gap: tovw(89px, 'default', 56px);
 
   .header {

src/components/sections/about/related/related.module.scss

@@ -1,11 +1,15 @@
 @import '~/css/helpers';
 
 .section {
+  @include respond-to('mobile') {
+    padding-bottom: tovw(80px, 'mobile', 140px);
+  }
+
   display: flex;
   align-items: center;
   flex-direction: column;
-  margin-top: tovw(55px, 'default', 20px);
-  padding: tovw(170px, 'default', 140px) 0;
+  margin-top: tovw(35px, 'default', 20px);
+  padding: tovw(130px, 'default', 95px) 0;
 
   .slider__container {
     @include respond-to('mobile') {

src/components/sections/about/related/related.ts

@@ -1,29 +0,0 @@
-export const related = [
-  {
-    author: 'STEPHAN WILLSON',
-    date: '04.25.22',
-    imgSrc: '/images/blog/post002.jpg',
-    title: 'State of Verifiable Data',
-    preview:
-      'Sit sed dolor felis quis. Porttitor semper enim placerat luctus purus aliquam. Diam eu varius donec sit urna feugiat libero diam augue.',
-    link: '/blog/article'
-  },
-  {
-    author: 'BRIAN MILLER',
-    date: '01.31.22',
-    imgSrc: '/images/blog/post001.jpg',
-    title: '7 Trends Transforming DeFi 2022',
-    preview:
-      'Sit sed dolor felis quis. Porttitor semper enim placerat luctus purus aliquam. Diam eu varius donec sit urna feugiat libero diam augue.',
-    link: '/blog/article'
-  },
-  {
-    author: 'BRIAN MILLER',
-    date: '06.25.22',
-    imgSrc: '/images/blog/post003.jpg',
-    title: '7 Trends Transforming DeFi 2022',
-    preview:
-      'Sit sed dolor felis quis. Porttitor semper enim placerat luctus purus aliquam. Diam eu varius donec sit urna feugiat libero diam augue.',
-    link: '/blog/article'
-  }
-]

src/components/sections/about/team/team.module.scss

@@ -7,7 +7,7 @@
 
   position: relative;
   margin-top: tovw(24px, 'default', 16px);
-  padding: tovw(124px, 'default', 100px) 0;
+  padding: tovw(124px, 'default', 120px) 0 tovw(124px, 'default', 80px) 0;
 
   .container {
     @include respond-to('mobile') {
@@ -107,7 +107,8 @@
     overflow: unset !important;
     scroll-behavior: smooth;
   }
-  @media screen and (min-width: 1400px) {
+
+  @media screen and (min-width: 901px) {
     display: flex;
     justify-content: flex-start;
     gap: tovw(100px, 'default', 40px);
@@ -166,7 +167,7 @@
 }
 
 .darker {
-  @media screen and (max-width: 1400px) {
+  @media screen and (max-width: 600px) {
     transition: filter var(--normal-transition);
     filter: opacity(40%);
   }

src/components/sections/about/team/team.tsx

@@ -75,13 +75,13 @@ function Team({ members, teamName, teamNumber, teamDept }: Teams) {
       setCurrentSlide(slider.track.details.rel)
     },
     breakpoints: {
-      '(min-width: 600px)': {
-        slides: { perView: 2.25, spacing: 40, origin: 'center' }
+      '(max-width: 900px)': {
+        slides: { perView: 2.45, spacing: 25, origin: 'center' }
       },
-      '(min-width: 800px)': {
-        slides: { perView: 2.65, spacing: 25, origin: 'center' }
+      '(max-width: 600px)': {
+        slides: { perView: 1.65, spacing: 40, origin: 'center' }
       },
-      '(min-width: 1400px)': {
+      '(min-width: 901px)': {
         disabled: true
       }
     },

src/lib/utils/blog.ts

@@ -2,12 +2,25 @@ import { render } from 'datocms-structured-text-to-plain-text'
 import { BlogPostFragment } from 'lib/cms/generated'
 
 export const getPlainTextContent = (post: BlogPostFragment) => {
-  const text = render(post.content)
+  const children = post?.content?.value.document.children
+
+  const filtered = children.filter((block: any) => block.type === 'paragraph')
+
+  const textBlocks = []
+
+  for (const block of filtered) {
+    const paragraph = render(block)
+    textBlocks.push(paragraph)
+  }
+
+  const text = textBlocks.join(' ')
+
   return text ?? ''
 }
 
 export const getDescription = (post: BlogPostFragment) => {
   let text = getPlainTextContent(post)
+
   const charLimit = 200
   text = text.substring(0, charLimit)
   let words = text.trim().split(/\s+/)

src/pages/products.tsx

@@ -1,5 +1,12 @@
+import {
+  getBlogPosts as serverGetBlogPosts,
+  getBlogPostsCategories as serverGetBlogPostsCategories
+} from 'lib/blog'
+import { InferGetStaticPropsType } from 'next'
+
 import { Meta } from '~/components/common/meta'
 import { PageLayout } from '~/components/layout/page'
+import Related from '~/components/sections/about/related'
 import AppSection from '~/components/sections/products/app'
 import Hero from '~/components/sections/products/hero'
 import Network from '~/components/sections/products/network'
@@ -7,9 +14,33 @@ import Network from '~/components/sections/products/network'
 import Stack from '~/components/sections/products/stack'
 import Token from '~/components/sections/products/token'
 
-import { Page } from './_app'
+export const getStaticProps = async () => {
+  const [allBlogPosts, categories] = await Promise.all([
+    serverGetBlogPosts({ page: 1 }),
+    serverGetBlogPostsCategories()
+  ])
 
-const Products: Page = () => {
+  const heroBlogPost = allBlogPosts.data[0]
+
+  return {
+    props: {
+      initialBlogPosts: {
+        pagination: allBlogPosts.pagination,
+        data: allBlogPosts.data.slice(0, 3)
+      },
+      categories,
+      page:
+        {
+          heroBlogPost
+        } ?? null
+    },
+    revalidate: 1
+  }
+}
+
+const Products = ({
+  initialBlogPosts
+}: InferGetStaticPropsType<typeof getStaticProps>) => {
   return (
     <PageLayout>
       <Meta />
@@ -18,6 +49,7 @@ const Products: Page = () => {
       <Network />
       <AppSection />
       <Token />
+      <Related data={initialBlogPosts?.data} />
       {/* <Partners /> */}
     </PageLayout>
   )