refactoring project card

senaarth · Apr 17, 2022 · 4799195 · 4799195 · vercel · Apr 17, 2022
1 parent d860179
commit 4799195
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 102 deletions.
diff --git a/public/images/share.png b/public/images/share.png
diff --git a/src/components/Header/styles.ts b/src/components/Header/styles.ts
@@ -77,11 +77,28 @@ export const Navigation = styled.nav`
     background-color: transparent;
     cursor: pointer;
 
+    .background {
+      width: 0;
+      height: 100%;
+
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      background-color: #2e2e2e;
+
+      transition: all 0.3s;
+      z-index: -1;
+    }
+
     &:hover,
     &.active {
       filter: brightness(1);
       color: #f6f6f6;
-      background-color: #2e2e2e;
+
+      .background {
+        width: 100%;
+        border-radius: 6px;
+      }
     }
 
     &.active {

diff --git a/src/components/NavLink/index.tsx b/src/components/NavLink/index.tsx
@@ -22,6 +22,7 @@ export function NavLink({ href, label, onClick }: NavLinkProps) {
         }}
       >
         {label}
+        <span className="background" />
       </button>
     </Link>
   );

diff --git a/src/components/ProjectCard/index.tsx b/src/components/ProjectCard/index.tsx
@@ -2,12 +2,11 @@
 import React from "react";
 import { PrismicRichText } from "@prismicio/react";
 
-import { Container } from "./styles";
+import { Card, Container } from "./styles";
 
 interface CardProps {
   slug: string;
   name: string;
-  link: string;
   call: [];
   banner: string;
   isLast?: boolean;
@@ -16,27 +15,27 @@ interface CardProps {
 export function ProjectCard({
   slug,
   name,
-  link,
   call,
   banner,
   isLast = false,
 }: CardProps) {
   return (
     <Container>
-      <img src={banner} alt={`Banner do projeto ${name}`} className="banner" />
-      <div>
-        <a href={link} target="_blank" rel="noreferrer" className="title">
-          {name}
-          <img
-            src="/images/up-right-arrow.png"
-            alt="Seta apontando para a direito e para cimaa"
-          />
-        </a>
-        <PrismicRichText field={call} />
-        <a href={`/projetos/${slug}`} className="saiba-mais">
-          saiba mais
-        </a>
-      </div>
+      <Card href={`/projetos/${slug}`}>
+        <img
+          src={banner}
+          alt={`Banner do projeto ${name}`}
+          className="banner"
+        />
+        <div>
+          <h1 className="title">{name}</h1>
+          <PrismicRichText field={call} />
+          <a href={`/projetos/${slug}`} className="saiba-mais">
+            saiba mais
+          </a>
+          {!isLast && <span className="background" />}
+        </div>
+      </Card>
       {isLast && (
         <span className="list-call">
           <a href="/projetos">ver lista completa</a>

diff --git a/src/components/ProjectCard/styles.ts b/src/components/ProjectCard/styles.ts
@@ -1,41 +1,49 @@
 import styled from "styled-components";
 
 export const Container = styled.div`
-  display: grid;
-  grid-template-columns: 2fr 3fr;
-
-  border: 1px solid #2e2e2e;
-  border-radius: 16px;
-
   width: 100%;
   max-width: 700px;
   min-height: 9rem;
   position: relative;
 
-  .banner {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    border-radius: 16px 0 0 16px;
+  display: flex;
+
+  &:hover {
+    .background {
+      width: 100%;
+      border-radius: 0 16px 16px 0;
+    }
+
+    .saiba-mais {
+      filter: brightness(1.5);
+
+      &::after {
+        width: 100%;
+      }
+    }
   }
 
-  > div {
-    flex: 1;
+  .list-call {
+    position: absolute;
+    background: linear-gradient(180deg, transparent, #111, #111, #111);
+    width: calc(100% + 2px);
+    height: 100%;
+    bottom: -1px;
+    left: -1px;
 
     display: flex;
     flex-direction: column;
-    align-items: flex-start;
+    align-items: center;
     justify-content: center;
 
-    padding: 1.5rem;
-
-    .title {
-      font-size: 1.5rem;
-      color: white;
-      display: flex;
+    a {
+      font-size: 1.25rem;
+      color: #b1b1b1;
+      margin-top: 3rem;
 
       transition: filter 0.3s;
-      position: relative;
+
+      cursor: pointer;
 
       &::after {
         width: 0;
@@ -45,23 +53,69 @@ export const Container = styled.div`
         content: "";
         position: absolute;
         left: 50%;
-        transform: translateX(calc(-50% - 0.625rem));
+        transform: translateX(-50%);
         bottom: 2px;
       }
 
       &:hover {
-        filter: brightness(0.7);
+        filter: brightness(1.5);
 
         &::after {
-          width: calc(100% - 1.25rem);
+          width: 100%;
         }
       }
+    }
+  }
+`;
 
-      img {
-        width: 0.75rem;
-        margin-left: 0.5rem;
-        object-fit: contain;
-      }
+export const Card = styled.a`
+  display: grid;
+  grid-template-columns: 2fr 3fr;
+
+  border: 1px solid #2e2e2e;
+  border-radius: 16px;
+
+  width: 100%;
+  max-width: 700px;
+  height: 100%;
+
+  .banner {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    border-radius: 16px 0 0 16px;
+  }
+
+  > div {
+    flex: 1;
+
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+
+    padding: 1.5rem;
+
+    border-radius: 0 16px 16px 0;
+
+    .background {
+      height: 100%;
+      width: 0;
+
+      transition: all 0.3s;
+
+      position: absolute;
+      left: 0;
+      top: 0;
+
+      background: rgba(255, 255, 255, 0.05);
+      z-index: 0;
+    }
+
+    .title {
+      font-size: 1.5rem;
+      color: white;
+      display: flex;
 
       @media (max-width: 520px) {
         font-size: 1rem;
@@ -97,62 +151,10 @@ export const Container = styled.div`
         bottom: 2px;
       }
 
-      &:hover {
-        filter: brightness(1.5);
-
-        &::after {
-          width: 100%;
-        }
-      }
-
       @media (min-width: 520px) {
         margin-top: 1rem;
         margin-left: auto;
       }
     }
   }
-
-  .list-call {
-    position: absolute;
-    background: linear-gradient(180deg, transparent, #111, #111, #111);
-    width: calc(100% + 2px);
-    height: 100%;
-    bottom: -1px;
-    left: -1px;
-
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    a {
-      font-size: 1.25rem;
-      color: #b1b1b1;
-      margin-top: 3rem;
-
-      transition: filter 0.3s;
-
-      cursor: pointer;
-
-      &::after {
-        width: 0;
-        transition: width 0.3s;
-        height: 1px;
-        background-color: white;
-        content: "";
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-        bottom: 2px;
-      }
-
-      &:hover {
-        filter: brightness(1.5);
-
-        &::after {
-          width: 100%;
-        }
-      }
-    }
-  }
 `;
diff --git a/src/styles/Home.ts b/src/styles/Home.ts
@@ -162,9 +162,7 @@ export const Hero = styled.div`
     }
 
     @media (max-width: 1024px) {
-      > img {
-        display: none;
-      }
+      display: none;
     }
   }
 `;
-Original file line number
+Diff line change
@@ Expand Up @@
             }}
           >
             {label}
+            <span className="background" />
           </button>
         </Link>
       );
@@ Expand Down @@