Issue 49/bug scroll

src/components/CardAboutUs/index.js

@@ -1,31 +1,31 @@
-import React from 'react'
-import {cards} from './data';
-import './styles.scss'; 
+import React from "react";
+import "./styles.scss";
+import linkedinVector from "../../assets/linkedinVector.svg";
+import githubVector from "../../assets/githubVector.svg";
 
-function CardAboutUs() {
-    return (
-        {cards.map((card) => 
-        <div className = "card-container">
-            <img className = "card-container__image">
-            </img>
-            <div className = "card-container__box">
-                <h1> {card.name} </h1>
-                <h2> {card.role} </h2>
-                <p> {card.mail} </p>
-                <div className = "card-container__box--icons">
-                    <a href = {card.links.linkedin}>
-                        <img>
-                        </img>
-                    </a>
-                    <a href = {card.links.github}>
-                        <img>
-                        </img>
-                    </a>
-                </div>
-            </div>
+function CardAboutUs({ name, role, mail, links, img }) {
+  return (
+    <div className="card-container">
+      <div className="card-container__image">
+        <img className="image__content" src={img} alt="Imagen de perfil"></img>
+      </div>
+      <div className="card-container__box">
+        <div className="box__title">
+          <h1 className="title__text"> {name} </h1>
+          <h2 className="title__text title__text-role"> {role} </h2>
         </div>
-        )};
-    );
+        <p className="box__mail"> {mail} </p>
+        <div className="card-container__box--icons">
+          <a href={links.linkedin} className="icons__vector">
+            <img src={linkedinVector} />
+          </a>
+          <a href={links.github} className="icons__vecotor">
+            <img src={githubVector} />
+          </a>
+        </div>
+      </div>
+    </div>
+  );
 }
 
-export default CardAboutUs;
+export default CardAboutUs;

src/components/CardAboutUs/styles.scss

@@ -0,0 +1,112 @@
+@use "src/styles/utils" as *;
+
+.card-container {
+  display: flex;
+  flex-direction: column;
+  border-color: $color-secondary;
+  border-width: 3px;
+  width: 239px;
+  height: 225px;
+  background-color: $color-bg !important;
+  margin-top: 8rem;
+
+  @include media(md) {
+    margin-top: 3rem;
+    width: 408px;
+    height: 384px;
+  }
+}
+
+.card-container__image {
+  position: relative;
+  width: 70%;
+
+  @include media(md) {
+    width: 100%;
+  }
+}
+
+.image__content {
+  position: absolute;
+  top: -5rem;
+  left: 23%;
+
+  @include media(md) {
+    left: 15%;
+  }
+}
+.card-container__box {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  height: 100%;
+  width: 100%;
+  padding-left: 7%;
+  padding-bottom: 0.5rem;
+  text-align: left;
+
+  @include media(md) {
+    padding-bottom: 1rem;
+    padding-left: 15%;
+  }
+}
+
+.box__title {
+    align-self: flex-start;
+    margin-bottom: 0.5rem;
+
+    @include media(md) {
+        margin-bottom: 1rem;
+    }
+}
+
+.title__text {
+  color: $color-primary;
+  font-family: $raleway;
+  font-style: normal;
+  font-weight: bold;
+  font-size: $size-3xl;
+  line-height: 150%;
+  text-align: left;
+  /* or 42px */
+  letter-spacing: 0.05em;
+
+  &-role{
+    font-size: $size-md;
+
+    @include media (md) {
+        font-size: $size-lg;        
+    }
+  }
+}
+
+.box__mail {
+    font-family: $raleway;
+    margin-bottom: 1rem;
+
+    font-size: $size-md;
+
+    @include media (md) {
+        font-size: $size-lg; 
+        margin-bottom: 2rem;
+    }
+}
+
+.card-container__box--icons {
+  display: flex;
+  margin-top: 1rem;
+  width: 50%;
+  justify-content: space-around;
+
+  @include media(md) {
+    width: 30%;
+  }
+}
+
+.icons__vecotor {
+  height: 2rem;
+
+  img {
+    height: 100%;
+  }
+}

src/components/CardAboutUs/data.js → src/views/aboutUS/data.js

@@ -1,11 +1,15 @@
+import image1 from "../../assets/sobre-nosotros1.jpg"
+import image2 from "../../assets/sobre-nosotros2.jpg"
+
 export const cards = [{
     name: "María Sofia Terragno",
     role: "Diseñadora UX",
     mail: "sofiaterragno@gmail.com",
     links: [{
         linkedin: "www.linkedin.con",
         github: "www.github.com",
-    }]
+    }],
+    img: image1
     },
     {
     name: "María Sofia Terragno",
@@ -14,7 +18,8 @@ export const cards = [{
     links: [{
         linkedin: "www.linkedin.con",
         github: "www.github.com",
-    }]
+    }],
+    img: image2
     }
 ];
 

src/views/aboutUS/index.js

@@ -1,12 +1,50 @@
 import React from "react";
+import logo from "../../assets/logo.png";
+import "./style.scss";
+import CardAboutUs from "../../components/CardAboutUs";
+import { cards } from "./data";
+import { useWindow } from "../../hooks/useWindow";
 
 const AboutUS = () => {
-    return(
 
-        //Solo tienen este margin ahora para que se vea debajo del navbar y saber rápidamente si las
-        //rutas funcionan correctamente! Una vez se cree el correspondiente componente, borrar eso.
-        <div style={{marginTop:200}}>AboutUS works!</div>
-    )
-}
+  const window = useWindow().width;
 
-export default AboutUS;
+  console.log(cards);
+  return (
+    <div className="mainDiv">
+      {window > 768 ?<div className="mainDiv__img">
+        <img src={logo}></img>
+      </div> : <div className="mainDiv__title"><h2 className="title__content">Sobre nosotros</h2></div>}
+      <div className="mainDiv__text">
+        <p className="text__content">
+          "Wineberry surgió a traves del proyecto CMYK creada por Frontend Café
+          donde impulsan el desarrollo de proyectos colaborativos realizados por
+          miembros de la comunidad con el objetivo de ganar experiencia en un
+          entorno profesional. Este proyecto es el resultado del
+          <b> trabajo en equipo, iteraciones y mucho esfuerzo.</b>{" "}
+        </p>
+        <br />
+        <p className="text__content">
+          {" "}
+          Somos un equipo de diseñadores y desarrolladores que busca demostrar
+          todo su conocimiento y seguir aprendiendo dentro del mundo digital."
+        </p>
+      </div>
+      <div className="mainDiv__cards">
+        {cards.map((card) => {
+          return (
+            <CardAboutUs
+              name={card.name}
+              role={card.role}
+              links={card.links}
+              mail={card.mail}
+              img={card.img}
+            />
+          );
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default AboutUS;

src/views/aboutUS/style.scss

@@ -0,0 +1,62 @@
+@use 'src/styles/utils' as *;
+
+//Ya hay una clase main
+.mainDiv {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 100px;
+}
+
+.mainDiv__img {
+    width: 20%;
+    height: 20%;
+    align-self: center;
+}
+
+.mainDiv__text {
+    width: 60%;
+    text-align: center;
+}
+
+.text__content {
+    font-family: $raleway;
+    font-size: $size-base;
+    color: black;
+    font-weight: normal;
+    line-height: 150%;
+    letter-spacing: 0.05em;
+
+    @include media(md) {
+        font-size: $size-3xl;
+    }
+}
+
+.mainDiv__cards {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    margin-top: 4rem;
+    justify-content: space-around;
+    align-items: center;
+
+    @include media(md) {
+        flex-direction: row;
+        justify-content: space-around;
+
+    }
+}
+
+.mainDiv__title {
+    margin-bottom: 2rem;
+}
+
+.title__content {
+    font-size: $size-xl;
+    color: $color-primary;
+    font-family: Raleway;
+    font-style: normal;
+    font-weight: bold;
+    line-height: 150%;
+}

src/views/information/Information.js

@@ -3,16 +3,20 @@ import CardMobile from "../../components/CardsMobile";
 import CardDesktop from "../../components/CardDesktop";
 import data from "./data.json";
 import { useWindow } from "../../hooks/useWindow";
+import { Link } from "react-router-dom";
 import "./styles.scss";
+import useScrollToHash from "../../hooks/scroll";
 
 export const Information = ({handleClick, moreInfo}) => {
 
   const size = useWindow();
   console.log(size);
 
+  useScrollToHash();
+
   return (
     <section className={`information${moreInfo ? "--expanded" : ""}`}>
-      <div className="information__cards">
+      <div className="information__cards" id="information">
         {size.width < 576
           ? data.map((info) => (
               <CardMobile
@@ -36,7 +40,9 @@ export const Information = ({handleClick, moreInfo}) => {
             ))}
       </div>
       <div className="information__btn">
+        <Link to={{pathname:"/", hash:"#information"}}>
         <Button variant="blueborder" text="Más información" onClick={handleClick} />
+        </Link>
       </div>
     </section>
   );

src/views/information/styles.scss

@@ -4,7 +4,7 @@
   &__cards {
     display: grid;
     gap: 1rem;
-    padding-top: 4rem;
+    padding-top: 6rem;
     padding-bottom: 4rem;
     justify-content: center;
   }