Work on feedbackardo

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

@@ -1,6 +1,10 @@
 @import '~/css/helpers';
 
 .card {
+  @include respond-to('mobile') {
+    max-height: unset;
+  }
+
   cursor: pointer;
   display: flex;
   flex-direction: column;
@@ -8,6 +12,8 @@
   white-space: normal;
   width: 100%;
   max-height: tovw(1000px, 'default', 600px);
+  text-decoration: none;
+  color: unset;
 
   &-blog {
     border-bottom: none;

src/components/common/card/index.tsx

@@ -1,7 +1,6 @@
 import clsx from 'clsx'
 import NextLink from 'next/link'
-import { useRouter } from 'next/router'
-import { useCallback, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
 
 import { Calendar } from '~/components/icons/events'
 import Heading from '~/components/primitives/heading'
@@ -62,7 +61,7 @@ const Card = ({
   }, [data?.title])
 
   return (
-    <NextLink href={isNews ? `/blog/${data?.slug}` : data?.link}>
+    <NextLink passHref href={isNews ? `/blog/${data?.slug}` : data?.link}>
       <div className={clsx(s['card'], className)}>
         <div className={s['card__header']}>
           {!isNews && (
@@ -116,12 +115,6 @@ export const BlogCard = ({
   data,
   horizontal = false
 }: BlogCardProps) => {
-  const router = useRouter()
-
-  const onClick = useCallback(() => {
-    router.push(`/blog/${data?.slug}`)
-  }, [data?.slug, router])
-
   const [title, setTitle] = useState<string | null | undefined>()
 
   useEffect(() => {
@@ -134,35 +127,17 @@ export const BlogCard = ({
   }, [data?.title])
 
   return (
-    <div
-      className={clsx(
-        s['card'],
-        s['card-blog'],
-        className,
-        horizontal && s.horizontal
-      )}
-      onClick={onClick}
-    >
-      {horizontal && data?.image && (
-        <div className={clsx(s['image__container'], 'hide-on-mobile')}>
-          <img
-            alt={data?.image?.alt ?? ''}
-            loading="lazy"
-            src={data?.image?.url}
-          />
-        </div>
-      )}
-      <div>
-        <div className={s['card__header-blog']}>
-          {data?.category.map((category: any, index) => (
-            <span key={index}>
-              <Category label={category.title} />
-            </span>
-          ))}
-          <span className={s.date}>{formatDate(data?.date)}</span>
-        </div>
-        {data?.image && (
-          <div className={s['image__container']}>
+    <NextLink href={`/blog/${data?.slug}`}>
+      <div
+        className={clsx(
+          s['card'],
+          s['card-blog'],
+          className,
+          horizontal && s.horizontal
+        )}
+      >
+        {horizontal && data?.image && (
+          <div className={clsx(s['image__container'], 'hide-on-mobile')}>
             <img
               alt={data?.image?.alt ?? ''}
               loading="lazy"
@@ -170,14 +145,33 @@ export const BlogCard = ({
             />
           </div>
         )}
-        <div className={s['content']}>
-          <Heading as="h2" variant="sm" font="tthoves">
-            {title}
-          </Heading>
-          {horizontal && <p>{data && getDescription(data)}</p>}
-          <Link href={`/blog/${data?.slug}`}>READ ARTICLE</Link>
+        <div>
+          <div className={s['card__header-blog']}>
+            {data?.category.map((category: any, index) => (
+              <span key={index}>
+                <Category label={category.title} />
+              </span>
+            ))}
+            <span className={s.date}>{formatDate(data?.date)}</span>
+          </div>
+          {data?.image && (
+            <div className={s['image__container']}>
+              <img
+                alt={data?.image?.alt ?? ''}
+                loading="lazy"
+                src={data?.image?.url}
+              />
+            </div>
+          )}
+          <div className={s['content']}>
+            <Heading as="h2" variant="sm" font="tthoves">
+              {title}
+            </Heading>
+            {horizontal && <p>{data && getDescription(data)}</p>}
+            <Link href={`/blog/${data?.slug}`}>READ ARTICLE</Link>
+          </div>
         </div>
       </div>
-    </div>
+    </NextLink>
   )
 }

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

@@ -1,6 +1,10 @@
 @import '~/css/helpers';
 
 .pre__footer {
+  @include respond-to('mobile') {
+    padding-bottom: tovw(50px, 'tablet', 30px);
+  }
+
   max-width: tovw(753px, 'default', 375px);
   text-align: center;
 

src/components/sections/homepage/benefits/benefits.module.scss

@@ -25,7 +25,6 @@
   }
 
   position: relative;
-  padding-top: tovw(170px, 'default', 122px);
   padding-bottom: tovw(200px, 'default', 200px);
 
   .grid {

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

@@ -22,7 +22,7 @@
   }
 
   h1 {
-    @media screen and (max-width: 375px) {
+    @media screen and (max-width: 422px) {
       font-size: tovw(42px, 'mobile');
     }
   }

src/components/sections/partners/opportunities/opportunities.module.scss

@@ -127,13 +127,16 @@
         display: flex;
         flex-wrap: wrap;
         list-style: none;
-        gap: tovw(30px, 'default', 25px);
         padding-left: 0;
         margin: 0;
         margin-top: tovw(70px, 'default', 30px);
         padding-right: tovw(15px, 'default', 15px);
 
         li {
+          @include respond-to('mobile') {
+            padding-bottom: unset;
+          }
+
           a {
             @include respond-to('mobile') {
               font-size: tovw(18px, 'default', 18px);
@@ -142,6 +145,9 @@
             font-size: tovw(18px, 'default', 12px);
           }
 
+          margin-right: tovw(55px, 'default', 25px);
+          padding-bottom: tovw(15px, 'default', 15px);
+
           &:not(:first-child) {
             @include respond-to('mobile') {
               margin: 0;