issue#7 cases totalmente finalizada

#7 finalizada com sucesso, tanto web quanto mobile, refiz ela do zero

src/app/page.js

@@ -4,30 +4,19 @@ import BannerFaisca from '@/components/home/BannerFaisca'
 import LearnMoreSection from '@/components/home/LearnMoreSection'
 import OurServices from '@/components/home/OurServices'
 import Cases from "@/components/home/Cases"
-import Img from "@img/home/CaseRectangle.png"
 import HomeCarousel from '@/components/home/HomeCarrousel'
 
 export default function Home() {
   return (
     <>
-      <BannerFaisca/>
+      <BannerFaisca />
       <LearnMoreSection />
       <OurServices />
       <Cases
-        titulo1 ="CASES"
-        titulo2 = "SELECIONADOS"
-        imagem =  {Img}
-        imagem2 = {Img}
-        imagem3 = {Img}
-        imagem4 = {Img}
-        imagem5 = {Img}
-        nomeprojeto1="nome do projeto"
-        nomeprojeto2="nome do projeto"
-        nomeprojeto3="nome do projeto"
-        nomeprojeto4="nome do projeto"
-        nomeprojeto5="nome do projeto"
+        leftTittle="CASES"
+        rightTittle="SELECIONADOS"
       />
-      <HomeCarousel/>
+      <HomeCarousel />
     </>
   )
 }

src/components/GenericButton/GenericButton.module.css

@@ -11,6 +11,7 @@
   background-color: white;
   text-decoration: none;
   transition: transform 0,2s;
+  cursor: pointer;
 }
 
 .redirect:hover {

src/components/GenericButtonOutLink/GenericOutLink.module.css

@@ -11,6 +11,7 @@
   background-color: white;
   text-decoration: none;
   transition: transform 0,2s;
+  cursor: pointer;
 }
 
 .redirect:hover {

src/components/home/Cases/cases.module.css

@@ -1,107 +1,71 @@
-.container{
-    color: white;
-    display: flex;
-    align-content: center;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
 }
 
-.containerTitle{
-    margin-bottom: 30vh;
-    font-size: 3vh;
-}
+.lista {
+  width: 75%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 7vh;
+  gap: 5vh;
+  flex-wrap: wrap;
 
-.title{
-    display: flex;
-    flex-wrap: nowrap;
-    align-content: center;
-    justify-content: center;
-    align-items: center;
-    font-weight: 400;
 }
 
-.subTitle{
-    display: flex;
-    align-content: center;
-    justify-content: center;
-    align-items: center;
-
+.phrase {
+  color: white;
+  margin-top: 8vh;
+  margin-bottom: 8vh;
+  font-weight: 350;
+  text-align: center;
+  font-size: 2.7vw;
 }
 
-.bar{
-    display: flex;
-    align-content: center;
-    justify-content: center;
-    align-items: center;
-    margin-left: 50px;
-    margin-right: 50px;
+.subTittle {
+  color: white;
+  display: flex;
+  justify-content: center;
+  flex-direction: row;
+  align-items: center;
+  font-size: 2.5vh;
+  margin-top: 13vh;
 }
 
-.containerImages{
-    display: flex;
-    justify-content: center;
-    flex-wrap: wrap;
+.line {
+  border: none;
+  height: 1px;
+  width: 50vw;
+  background-color: white;
+  margin: 0 1.2vw;
 }
 
-.imageRow{
-    display: flex;
-    width: 1050px;
-    flex-wrap: wrap;
-    justify-content: center;
+.moreProjects {
+  padding-top: 3vh;
 }
 
-.altText{
-    font-Family: 'Allegin';
-    font-weight: 100;
-  }
-
-  .altText{
-    font-Family: 'Allegin';
-    font-weight: 100;
-  }
-
-@media (max-width: 767px) {
-    .imageRow {
-      flex-direction: column;
-      width: 500px;
-    }
-    .containerTitle{
-        display: none;
-    }
-    .bar{
-        display: none;
-    }
-    .subTitle{
-        flex-direction: column;
-        font-size: 2.5em;
-    }
+.altText {
+  font-Family: 'Allegin';
+  font-weight: 100;
 }
 
-.imageBlock{
-    display: flex;
+@media (max-width: 576px) {
+  .subTittle {
     flex-direction: column;
-}
-
-.image{
-    padding: 8px;
-}
-
-.figure{
-    display: flex;
-    flex-direction: column-reverse;
-    justify-content: space-evenly;
-    align-items: flex-end;
-    padding: 15px;
-}
- .text{
-    position: relative;
-    display: flex;
-    bottom: -497px;
-    right: 23vh;
-    font-size: 30px;
-    color: white;
-    font-weight: 500;
- }   
+    font-size: 6.3vw;
+    margin-top: 0vh;
+  }
 
+  .line {
+    border: none;
+    height: 0px;
+    width: 0vw;
+  }
 
+  .phrase {
+    display: none;
+  }
+}

src/components/home/Cases/cases/cases.module.css

@@ -0,0 +1,42 @@
+.imageContainer {
+    position: relative;
+    width: 71vh;
+}
+
+.projectName {
+    font-weight: 500;
+    font-size: 3.2vh;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    margin: 0;
+    padding: 4vh;
+    color: white;
+}
+
+.grayscaleImage {
+    filter: grayscale(100%);
+    transition: filter 0.4s ease-in-out;
+}
+
+.colorfulImage {
+    filter: grayscale(0%);
+    transition: filter 0.4s ease-in-out;
+}
+
+@media (max-width: 576px) {
+    .imageContainer {
+        width: 72vw;
+        justify-content: center;
+        text-align: center;
+        justify-items: center;
+    }
+
+    .projectName {
+        font-weight: 500;
+        font-size: 2.3vh;
+        left: 50%; 
+        transform: translateX(-50%); 
+        text-align: center; 
+    }
+}

src/components/home/Cases/cases/index.js

@@ -0,0 +1,20 @@
+'use client'
+
+import Image from 'next/image';
+import { useState } from 'react';
+import styles from './cases.module.css';
+
+function Cases({ imag, ProjectName }) {
+    const [isHovered, setIsHovered] = useState(false);
+
+    return (
+        <section className={styles.cases}>
+            <div className={styles.imageContainer} onMouseEnter={() => setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}>
+                <Image src={imag} alt='case' width={0} height={0} layout="responsive" className={isHovered ? styles.colorfulImage : styles.grayscaleImage} />
+                <h2 className={styles.projectName}>{ProjectName}</h2>
+            </div>
+        </section>
+    );
+}
+
+export default Cases;

src/components/home/Cases/index.js

@@ -1,65 +1,33 @@
-import styles from './cases.module.css'
-import Image from 'next/image'
-import GenericButton from '@/components/GenericButton'
+import styles from './cases.module.css';
+import Cases from './cases';
+import GenericButton from '@/components/GenericButton';
+import casesData from './../../../data/casesData.json';
 
-function Cases ({titulo1, titulo2, imagem, imagem2, imagem3, imagem4, imagem5, imagem6, nomeprojeto1, nomeprojeto2, nomeprojeto3, nomeprojeto4, nomeprojeto5, nomeprojeto6})
-{
-    return(
-        <div className={styles.container}>
-            <div className={styles.containerTitle}>
-              <h1 className={styles.title}>
-                  encontramos<span className={styles.altText}>soluções ideias</span>
-              </h1>
-              <h1 className={styles.title}>
-                  para cada tipo de desafio
-              </h1>
-            </div>
-            <h1 className={styles.subTitle}>
-            <span className={styles.altText}>{titulo1}</span>
-               <hr className={styles.bar} width={500} />
-               <span className={styles.altText}>{titulo2}</span>
+function CasesArea({ leftTittle, rightTittle }) {
+    return (
+        <section className={styles.container}>
+            <h1 className={styles.phrase}>
+                encontramos <span className={styles.altText}>soluções ideais</span><br></br>para cada tipo de desafio
             </h1>
-            <div className={styles.imageRow}>
-                <figure className={styles.figure}>
-                    <Image className={styles.image}  src={imagem} width={440} height={530} alt="imagem temporaria de testes"/>
-                    <label className={styles.text}>
-                        {nomeprojeto1}
-                    </label>
-                </figure>
-                <figure className={styles.figure}>
-                        <Image className={styles.image}  src={imagem2} width={440} height={530} alt="imagem temporaria de testes"/>
-                    <label className={styles.text}>
-                        {nomeprojeto2}
-                    </label>
-                </figure>
-                <figure className={styles.figure}>
-                    <Image className={styles.image}  src={imagem3} width={440} height={530} alt="imagem temporaria de testes"/>
-                    <label className={styles.text}>
-                        {nomeprojeto3}
-                    </label>
-                </figure>
-                <figure className={styles.figure}>
-                    <Image className={styles.image}  src={imagem4} width={440} height={530} alt="imagem temporaria de testes"/>
-                    <label className={styles.text}>
-                        {nomeprojeto4}
-                    </label>
-                </figure>
-                <figure className={styles.figure}>
-                    <Image className={styles.image}  src={imagem5} width={440} height={530} alt="imagem temporaria de testes"/>
-                        <label className={styles.text}>
-                        {nomeprojeto5}
-                    </label>
-                </figure>
-                <figure className={styles.figure}>
-                    <Image className={styles.image}  src={imagem5} width={440} height={530} alt="imagem temporaria de testes"/>
-                        <label className={styles.text}>
-                        {nomeprojeto5}
-                    </label>
-                </figure>
+            <div className={styles.subTittle}>
+                <h1><span className={styles.altText}>{leftTittle}</span></h1>
+                <hr className={styles.line} />
+                <h1><span className={styles.altText}>{rightTittle}</span></h1>
+            </div>
+            <div className={styles.lista}>
+                {casesData.map((DCases) => (
+                    <Cases
+                        key={DCases.id}
+                        imag={`/img/home/Cases/${DCases.id}.png`}
+                        ProjectName={DCases.nomeProjeto}
+                    />
+                ))}
+            </div>
+            <div className={styles.moreProjects}>
+                <GenericButton ButtonText="Mais Projetos" pathWay="/portfolio" />
             </div>
-            <GenericButton ButtonText="Mais Projetos" pathWay="/portfolio"/>
-        </div>
-    )
+        </section>
+    );
 }
 
-export default Cases
+export default CasesArea;

src/components/home/LearnMoreSection/LearnMore.module.css

@@ -7,7 +7,7 @@
 }
 
 .textAbout{
-  font-size: 3vw;
+  font-size: 2.7vw;
   color: #fff;
   text-align: center;
   margin-bottom: 2.7vh;