Work on Press, styles

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

@@ -7,10 +7,22 @@
   padding-bottom: tovw(2px, 'default', 2px);
   white-space: normal;
   width: 100%;
+  max-height: tovw(1000px, 'default', 600px);
 
   &-blog {
     border-bottom: none;
 
+    > div {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      height: 100%;
+
+      .content {
+        height: 100%;
+      }
+    }
+
     &:hover,
     &:focus {
       .read span {
@@ -297,8 +309,13 @@
   }
 
   h2 {
+    @include respond-to('mobile') {
+      font-size: tovw(30px, 'default', 30px);
+    }
+
     text-transform: none !important;
     line-height: 1.2;
+    font-size: tovw(40px, 'default', 25px);
   }
 
   p {
@@ -307,6 +324,7 @@
     }
 
     margin: 0;
+    margin-top: auto;
     line-height: 1.4;
     font-size: tovw(18px, 'default', 15px);
   }

src/components/common/card/index.tsx

@@ -20,7 +20,12 @@ interface CardProps {
   reduced?: boolean
 }
 
-const Card = ({ className, data, isNews = false, reduced }: CardProps) => {
+const Card = ({
+  className,
+  data,
+  isNews = false,
+  reduced = true
+}: CardProps) => {
   const [eventDate, setEventDate] = useState<string>()
   const [eventTime, setEventTime] = useState<string>()
 
@@ -40,6 +45,25 @@ const Card = ({ className, data, isNews = false, reduced }: CardProps) => {
     )
   }, [data?.eventDatetime])
 
+  const [title, setTitle] = useState<string>()
+  const [eventTitle, setEventTitle] = useState<string>()
+
+  useEffect(() => {
+    if (data?.title?.length > 60) {
+      setTitle(data?.title.slice(0, 60) + '...')
+      return
+    }
+
+    setTitle(data?.title)
+
+    if (data?.eventTitle?.length > 60) {
+      setEventTitle(data?.eventTitle.slice(0, 60) + '...')
+      return
+    }
+
+    setEventTitle(data?.eventTitle)
+  }, [data?.eventTitle, data?.title])
+
   return (
     <NextLink href={isNews ? `/blog/${data?.slug}` : data?.eventLink}>
       <div className={clsx(s['card'], className)}>
@@ -76,7 +100,7 @@ const Card = ({ className, data, isNews = false, reduced }: CardProps) => {
         </div>
         <div className={s['content']}>
           <Heading as="h2" variant="sm" font="tthoves">
-            {isNews ? data?.title : data?.eventTitle}
+            {isNews ? title : eventTitle}
           </Heading>
           {!reduced && <p>{isNews ? getDescription(data) : data?.eventDesc}</p>}
           <Link href={isNews ? `/blog/${data?.slug}` : data?.eventLink}>
@@ -107,6 +131,17 @@ export const BlogCard = ({
     router.push(`/blog/${data?.slug}`)
   }, [data?.slug, router])
 
+  const [title, setTitle] = useState<string | null | undefined>()
+
+  useEffect(() => {
+    if (data?.title && data?.title?.length > 60) {
+      setTitle(data?.title.slice(0, 60) + '...')
+      return
+    }
+
+    setTitle(data?.title)
+  }, [data?.title])
+
   return (
     <div
       className={clsx(
@@ -146,7 +181,7 @@ export const BlogCard = ({
         )}
         <div className={s['content']}>
           <Heading as="h2" variant="sm" font="tthoves">
-            {data?.title}
+            {title}
           </Heading>
           {horizontal && <p>{data && getDescription(data)}</p>}
           <Link href={`/blog/${data?.slug}`}>READ ARTICLE</Link>

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

@@ -15,10 +15,11 @@ import s from './related.module.scss'
 export interface Props {
   isInPost?: boolean
   isFeatured?: boolean
+  reduced?: boolean
   data: any
 }
 
-const Related = ({ data, isInPost, isFeatured }: Props) => {
+const Related = ({ data, isInPost, isFeatured, reduced }: Props) => {
   const [sliderRef] = useKeenSlider<HTMLDivElement>({
     initial: 0,
     loop: true,
@@ -54,7 +55,7 @@ const Related = ({ data, isInPost, isFeatured }: Props) => {
               key={i}
               data={item}
               className="keen-slider__slide"
-              reduced={true}
+              reduced={reduced}
               isNews
             />
           ))}

src/components/sections/newsroom/press/index.tsx

@@ -0,0 +1,79 @@
+import 'keen-slider/keen-slider.min.css'
+
+import { useKeenSlider } from 'keen-slider/react'
+import { Key, useState } from 'react'
+
+import { BlogCard } from '~/components/common/card'
+import { ArrowSlider } from '~/components/icons/arrow'
+import { Container } from '~/components/layout/container'
+import Section from '~/components/layout/section'
+import Heading from '~/components/primitives/heading'
+
+import s from './press.module.scss'
+
+// TODO
+export interface Props {
+  blogData: any
+}
+
+const Press = ({ blogData }: Props) => {
+  const [loaded, setLoaded] = useState(false)
+
+  const [sliderRef, slider] = useKeenSlider<HTMLDivElement>({
+    initial: 0,
+    loop: true,
+    mode: 'free-snap',
+    slides: { perView: 3.915, spacing: 24 },
+    created() {
+      setLoaded(true)
+    },
+    breakpoints: {
+      '(max-width: 1140px)': {
+        slides: { perView: 2.915, spacing: 20 }
+      },
+      '(max-width: 900px)': {
+        slides: { perView: 1.12, spacing: 12 }
+      }
+    }
+  })
+
+  return (
+    <Section className={s['section']}>
+      <Container className={s.heading}>
+        <div className={s['header']}>
+          <Heading as="h2" variant="md">
+            Press Releases
+          </Heading>
+          <span>04</span>
+        </div>
+      </Container>
+      <div className={s['slider__container']}>
+        <div className={`${s.events__container} keen-slider`} ref={sliderRef}>
+          {blogData.map((item: any, i: Key) => (
+            <BlogCard key={i} data={item} className={`keen-slider__slide`} />
+          ))}
+        </div>
+      </div>
+      <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']}
+            />
+          </div>
+        )}
+      </Container>
+    </Section>
+  )
+}
+
+export default Press

src/components/sections/newsroom/press/press.module.scss

@@ -0,0 +1,137 @@
+@import '~/css/helpers';
+
+.section {
+  @include respond-to('mobile') {
+    margin-top: unset;
+    padding: tovw(30px, 'mobile', 60px) 0 tovw(40px, 'mobile', 70px) 0;
+  }
+
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  margin-top: tovw(55px, 'default', 55px);
+  padding: tovw(95px, 'default', 90px) 0 tovw(185px, 'default', 90px) 0;
+
+  .slider__container {
+    @include respond-to('mobile') {
+      width: calc(100% - tovw(16px, 'mobile'));
+    }
+
+    margin-right: 0;
+    margin-left: auto;
+    width: calc(100% - tovw(205px, 'default', 16px));
+  }
+
+  .heading {
+    @include respond-to('mobile') {
+      align-items: flex-start;
+      flex-direction: column;
+      border-bottom: unset;
+      padding: 0 tovw(56px, 'default', 16px);
+      gap: tovw(16px, 'mobile');
+    }
+
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: tovw(86px, 'default', 54px);
+
+    .header {
+      @include respond-to('mobile') {
+        align-items: flex-end;
+      }
+
+      display: flex;
+      justify-content: space-between;
+      border-bottom: tovw(1px, 'default', 1px) solid var(--color-white);
+      padding-bottom: tovw(36px, 'default', 24px);
+      width: 100%;
+
+      > h2 {
+        text-shadow: 0 0 tovw(20px, 'default', 20px) rgb(255 255 255 / 0.4);
+      }
+
+      span {
+        padding-top: tovw(35px, 'default', 14px);
+        color: var(--color-grey-light);
+        font-family: var(--font-dm-mono), sans-serif;
+        font-size: tovw(18px, 'default', 12px);
+      }
+    }
+  }
+
+  .events__container {
+    @include respond-to('mobile') {
+      padding-left: 0;
+    }
+
+    padding-left: tovw(100px);
+
+    &::after,
+    &::before {
+      @include respond-to('mobile') {
+        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, 'default', 20px);
+      }
+
+      position: absolute;
+      right: tovw(-20px, 'default', -20px);
+      background: linear-gradient(
+        90deg,
+        rgb(3 3 3 / 0) 0%,
+        rgb(3 3 3 / 0.95) 35%,
+        rgb(3 3 3 / 1) 65%
+      );
+      width: tovw(280px, 'default', 150px);
+      height: 100%;
+      content: '';
+    }
+
+    &::before {
+      @include respond-to('mobile') {
+        content: initial;
+      }
+
+      right: initial;
+      left: tovw(-180px);
+      transform: scaleX(-1);
+      z-index: 5;
+    }
+  }
+
+  .navigation {
+    @include respond-to('mobile') {
+      display: none;
+    }
+
+    display: flex;
+    padding-top: tovw(75px, 'default', 45px);
+    width: 100%;
+    gap: tovw(25px, 'default', 18px);
+    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/css/global.scss

@@ -98,8 +98,9 @@ body:not(.user-is-tabbing) textarea:focus {
 }
 
 p {
-  font-family: var(--font-tt-hoves);
   font-size: tovw(24px, 'default', 18px);
+  font-family: var(--font-tt-hoves);
+  line-height: 1.32;
 }
 
 .highlight {

src/pages/press.tsx

@@ -9,6 +9,7 @@ import { PageLayout } from '~/components/layout/page'
 import Related from '~/components/sections/about/related'
 import Hero from '~/components/sections/newsroom/hero'
 import Media from '~/components/sections/newsroom/media'
+import Press from '~/components/sections/newsroom/press'
 
 // import {
 //   CareersHero,
@@ -57,7 +58,12 @@ const Newsroom = ({
     <PageLayout>
       <Meta />
       <Hero />
-      <Related data={initialBlogPosts?.data} isFeatured={true} />
+      <Related
+        data={initialBlogPosts?.data}
+        isFeatured={true}
+        reduced={false}
+      />
+      <Press blogData={initialBlogPosts?.data} />
       <Media />
       <Related data={initialBlogPosts?.data} />
     </PageLayout>