From dfc29a740c7a6af37436d4787075d4bb674ccc26 Mon Sep 17 00:00:00 2001
From: Nazareno Oviedo <nazareno@basement.studio>
Date: Mon, 11 Apr 2022 14:00:01 -0300
Subject: [PATCH] feat: bugfixing

---
 src/components/common/card/card.module.scss   |  1 +
 src/components/common/card/index.tsx          | 65 ++++++++++---------
 .../homepage/benefits/benefits.module.scss    |  2 +-
 3 files changed, 37 insertions(+), 31 deletions(-)

diff --git a/src/components/common/card/card.module.scss b/src/components/common/card/card.module.scss
index 9bec660..67fb7b7 100644
--- a/src/components/common/card/card.module.scss
+++ b/src/components/common/card/card.module.scss
@@ -5,6 +5,7 @@
   flex-direction: column;
   width: 100%;
   padding-bottom: tovw(2px, 'default', 2px);
+  cursor: pointer;
 
   &-blog {
     .content {
diff --git a/src/components/common/card/index.tsx b/src/components/common/card/index.tsx
index 7ddb107..04c3645 100644
--- a/src/components/common/card/index.tsx
+++ b/src/components/common/card/index.tsx
@@ -1,4 +1,5 @@
 import clsx from 'clsx'
+import NextLink from 'next/link'
 
 import { Calendar, Clock } from '~/components/icons/events'
 import Heading from '~/components/primitives/heading'
@@ -18,40 +19,44 @@ interface CardProps {
 
 const Card = ({ className, data, isNews = false }: CardProps) => {
   return (
-    <div className={clsx(s['card'], className)}>
-      <div className={s['card__header']}>
-        {!isNews && (
-          <span className={s.location}>{data?.location?.toUpperCase()}</span>
-        )}
-        <div className={isNews ? s.is_news : ''}>
-          {isNews && (
-            <span className={s.author}>
-              BY <span className={s.separator}>—</span> {data?.author}
-            </span>
-          )}
-          <span className={s.date}>
-            {!isNews && <Calendar />}
-            {data?.date}
-          </span>
+    <NextLink href={data.link}>
+      <div className={clsx(s['card'], className)}>
+        <div className={s['card__header']}>
           {!isNews && (
-            <span className={s.hour}>
-              <Clock />
-              {data?.time} HS
-            </span>
+            <span className={s.location}>{data?.location?.toUpperCase()}</span>
           )}
+          <div className={isNews ? s.is_news : ''}>
+            {isNews && (
+              <span className={s.author}>
+                BY <span className={s.separator}>—</span> {data?.author}
+              </span>
+            )}
+            <span className={s.date}>
+              {!isNews && <Calendar />}
+              {data?.date}
+            </span>
+            {!isNews && (
+              <span className={s.hour}>
+                <Clock />
+                {data?.time} HS
+              </span>
+            )}
+          </div>
+        </div>
+        <div className={s['image__container']}>
+          <img alt={data?.title} loading="lazy" src={data?.imgSrc} />
+        </div>
+        <div className={s['content']}>
+          <Heading as="h2" variant="sm" font="tthoves">
+            {data?.title}
+          </Heading>
+          <p>{data?.preview}</p>
+          <Link href={data?.link}>
+            {isNews ? 'READ ARTICLE' : 'LEARN MORE'}
+          </Link>
         </div>
       </div>
-      <div className={s['image__container']}>
-        <img alt={data?.title} loading="lazy" src={data?.imgSrc} />
-      </div>
-      <div className={s['content']}>
-        <Heading as="h2" variant="sm" font="tthoves">
-          {data?.title}
-        </Heading>
-        <p>{data?.preview}</p>
-        <Link href={data?.link}>{isNews ? 'READ ARTICLE' : 'LEARN MORE'}</Link>
-      </div>
-    </div>
+    </NextLink>
   )
 }
 
diff --git a/src/components/sections/homepage/benefits/benefits.module.scss b/src/components/sections/homepage/benefits/benefits.module.scss
index 131d017..3b60760 100644
--- a/src/components/sections/homepage/benefits/benefits.module.scss
+++ b/src/components/sections/homepage/benefits/benefits.module.scss
@@ -74,7 +74,7 @@
   background-position: center center;
   background-repeat: no-repeat;
   background-size: cover;
-  height: tovw(1582px, 'default', 1050px);
+  height: tovw(1582px, 'default', 1120px);
 
   @include respond-to('mobile') {
     margin-top: tovw(-60px, 'mobile');