diff --git a/src/assets/githubVector.svg b/src/assets/githubVector.svg new file mode 100644 index 0000000..a1f7c40 --- /dev/null +++ b/src/assets/githubVector.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/linkedinVector.svg b/src/assets/linkedinVector.svg new file mode 100644 index 0000000..8ce3a45 --- /dev/null +++ b/src/assets/linkedinVector.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/sobre-nosotros1.jpg b/src/assets/sobre-nosotros1.jpg new file mode 100644 index 0000000..c74fe7c Binary files /dev/null and b/src/assets/sobre-nosotros1.jpg differ diff --git a/src/assets/sobre-nosotros2.jpg b/src/assets/sobre-nosotros2.jpg new file mode 100644 index 0000000..5e7b8f9 Binary files /dev/null and b/src/assets/sobre-nosotros2.jpg differ diff --git a/src/components/CardAboutUs/index.js b/src/components/CardAboutUs/index.js index c0c6409..d733faa 100644 --- a/src/components/CardAboutUs/index.js +++ b/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) => -
- - -
-

{card.name}

-

{card.role}

-

{card.mail}

-
- - - - - - - - -
-
+function CardAboutUs({ name, role, mail, links, img }) { + return ( +
+
+ Imagen de perfil +
+
+
+

{name}

+

{role}

- )}; - ); +

{mail}

+
+ + + + + + +
+
+
+ ); } -export default CardAboutUs; \ No newline at end of file +export default CardAboutUs; diff --git a/src/components/CardAboutUs/styles.scss b/src/components/CardAboutUs/styles.scss index e69de29..70f8018 100644 --- a/src/components/CardAboutUs/styles.scss +++ b/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%; + } +} diff --git a/src/components/CardAboutUs/data.js b/src/views/aboutUS/data.js similarity index 72% rename from src/components/CardAboutUs/data.js rename to src/views/aboutUS/data.js index fb9ddb6..31e87e5 100644 --- a/src/components/CardAboutUs/data.js +++ b/src/views/aboutUS/data.js @@ -1,3 +1,6 @@ +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", @@ -5,7 +8,8 @@ export const cards = [{ 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 } ]; diff --git a/src/views/aboutUS/index.js b/src/views/aboutUS/index.js index 648d44d..4d5990f 100644 --- a/src/views/aboutUS/index.js +++ b/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. -
AboutUS works!
- ) -} + const window = useWindow().width; -export default AboutUS; \ No newline at end of file + console.log(cards); + return ( +
+ {window > 768 ?
+ +
:

Sobre nosotros

} +
+

+ "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 + trabajo en equipo, iteraciones y mucho esfuerzo.{" "} +

+
+

+ {" "} + Somos un equipo de diseñadores y desarrolladores que busca demostrar + todo su conocimiento y seguir aprendiendo dentro del mundo digital." +

+
+
+ {cards.map((card) => { + return ( + + ); + })} +
+
+ ); +}; + +export default AboutUS; diff --git a/src/views/aboutUS/style.scss b/src/views/aboutUS/style.scss new file mode 100644 index 0000000..ff65b38 --- /dev/null +++ b/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%; +} \ No newline at end of file diff --git a/src/views/information/Information.js b/src/views/information/Information.js index 94aedb6..3abb088 100644 --- a/src/views/information/Information.js +++ b/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 (
-
+
{size.width < 576 ? data.map((info) => ( { ))}
+
); diff --git a/src/views/information/styles.scss b/src/views/information/styles.scss index 2b5ac8a..0c46ede 100644 --- a/src/views/information/styles.scss +++ b/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; }