Skip to content

Commit

Permalink
Merge pull request #50 from frontendcafe/issue-38/cardMain-desktop
Browse files Browse the repository at this point in the history 
Issue 38/card main desktop
  • Loading branch information
@anaggithub
anaggithub authored Sep 24, 2021
2 parents ce68413 + 34a5dc7 commit 157c2b5
Show file tree
Hide file tree
Showing 13 changed files with 303 additions and 25 deletions.
2 changes: 1 addition & 1 deletion src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,4 +56,4 @@ function AppWithProviders() {
);
}

export default AppWithProviders;
export default AppWithProviders;
Binary file added src/assets/imagen-card-main.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 19 additions & 0 deletions src/components/CardMainDesktop/data.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
export const card ={
title: "El nuevo vino de arandanos",
description: "Tal y como su nombre indica, el vino de arándanos se elabora a partir de los arándanos. La piel y la carne de la planta se fermentan por completo durante algún tiempo para obtener el vino de arándanos. No sólo es un vino sabroso, sino que tambien ofrece varios",
descBold: "beneficios para la salud.",
paragraphs: [
{
title: "Anti-envejecimiento",
description: "tiene ciertos componentes anti-envejecimiento, concretamente varios antioxidantes que son ricos en vitamina C y E. Estas vitaminas combaten eficientemente el envejecimiento."
},
{
title: "Menos azúcar",
description: "El vino hecho a partir de los arándanos aumenta nuestro sistema inmunológico de varias maneras. Este vino contiene menos azúcar que otras bayas, como las fresas y el saúco. Esto significa que la ingesta de vino de arándano no afecta negativamente el azúcar en la sangre."
},
{
title: "Sistema inmunológico",
description: "Los arándanos utilizados para hacer este vino producen compuestos que protegen nuestro sistema inmunológico. Puede reducir el colesterol e incluso reducir las tasas inflamatorias en el cuerpo."
}
]
};
62 changes: 62 additions & 0 deletions src/components/CardMainDesktop/index.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import React from 'react';
import './styles.scss';
import { useHistory } from 'react-router';
import { card } from './data';
import image from '../../assets/imagen-card-main.png';
import Button from "../Button";

const CardMainDesktop = () => {

const history = useHistory();

const handleClick = () => {
history.push("/home")
}

return (
<div className="card-main">
<div className="card-main__container">
<div className="card-main__container__image">
<img src={image} alt="Imagen vino vindano" />
</div>

<div className="top-text">
<h1>{ card.title }</h1>
<p>{ card.description } <span>{ card.descBold }</span></p>
</div>

<div className="card-main__container__grid">
<div grid-area="box1"></div>
<div grid-area="box2"></div>
<article grid-area="p1">
<h2>{card.paragraphs[0].title}</h2>
<p>{card.paragraphs[0].description}</p>
</article>
<div grid-area="box3"></div>
<div grid-area="box4"></div>
<article grid-area="p2">
<h2>{card.paragraphs[1].title}</h2>
<p>{card.paragraphs[1].description}</p>
</article>
<div grid-area="box5"></div>
<div grid-area="box6"></div>
<article grid-area="p3">
<h2>{card.paragraphs[2].title}</h2>
<p>{card.paragraphs[2].description}</p>
</article>



</div>

<div className="bottom-text">
<p>Uno de los problemas es que beber vino de arándano puede llegar a convertirse en adictivo con el tiempo. Los amantes de este vino, por lo tanto, tienen que aprender a <span>consumirlo con moderación</span>. Para conservarlo una vez abierto, lo mejor es volverlo a tapar con el corcho y asegurarse de que no queda expuesto al aire.</p>
</div>

<Button variant="secondary" text="Volver" clases='card-container__button' onClick={handleClick}></Button>
</div>
</div>
)
}

export default CardMainDesktop;
173 changes: 173 additions & 0 deletions src/components/CardMainDesktop/styles.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
@use 'src/styles/utils' as *;

.card-main {
display: flex;
justify-content: center;
width: 100%;

&__container {
margin-top: 110px;
max-width: 1200px;
height: 100vh;
background-color: $color-bg;
color: $color-secondary;
display: grid;
grid-template-areas: "wine title title"
"foot foot foot"
"space space button";


&__image {
width: 230px;
height: 100%;
grid-area: wine;
img {
width: 100%;
height: 100%;
}
}

&__grid {
margin-top: 100px;
max-width: 1200px;
position: absolute;
height: 100%;
display: grid;
place-content: center;
grid-template-areas:
"box1 box2 p1"
"box3 box4 p2"
"box5 box6 p3";

div {
width: 100px;
height: 200px;
margin-left: 20px;
}

div[grid-area="box1"]{
grid-area: box1;
}
div[grid-area="box2"]{
grid-area: box2;
border-top: 2px dotted $color-primary;
border-left: 2px dotted $color-primary;
margin-top: 50px;
height: 50%;
}
div[grid-area="box3"]{
grid-area: box3;
border-left: 2px dotted $color-primary;
transform: translateX(20px);
}
div[grid-area="box4"]{
grid-area: box4;
border-bottom: 2px dotted $color-primary;
height: 50%;
}
div[grid-area="box5"]{
grid-area: box5;
border-top: 2px dotted $color-primary;
transform: translateX(20px);
}
div[grid-area="box6"]{
grid-area: box6;
border-top: 2px dotted $color-primary;
}

article[grid-area="p1"] {
grid-area: p1;
}
article[grid-area="p2"] {
grid-area: p2;
}
article[grid-area="p3"] {
grid-area: p3;
}

article {
border-left: 2px dotted $color-primary;
height: 100px;
padding-left: 5px;
display: flex;
flex-direction: column;
justify-content: center;
}

div::after,
div::before {
content:"";
position: absolute;
background-color: $color-primary;
}

div[grid-area="box2"]::after,
div[grid-area="box3"]::after,
div[grid-area="box4"]::after {
border-radius: 50%;
width: 25px;
height: 25px;
border: 4px solid white;
}

div[grid-area="box2"]::after{
margin-top: 90px;
margin-left: -13px;
}

div[grid-area="box3"]::after{
margin-top: 0px;
margin-left: -13px;
}

div[grid-area="box4"]::after{
margin-top: 85px;
margin-left: -13px;
}

h2 {
font-weight: bold;
}

@include media(md) {
margin-top: 50px;
}
}

.top-text {
width: 100%;
grid-area: title;

transform: translateX(-50px);
h1 {
font-size: $size-lg;
color: $color-primary;
font-weight: bold;
}
}

.bottom-text {
grid-area: foot;
}

span {
color: $color-secondary;
font-weight: bold;
}

&__texts {
width: 100%;
}

button {
grid-area: button;
width: 210px;
height: 50px;
margin: 0;

@include media(sm) {
margin: 50px;
}
}
}
}
2 changes: 1 addition & 1 deletion src/components/CardMainMobile/data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ export const card ={
description: "Los arándanos utilizados para hacer este vino producen compuestos que protegen nuestro sistema inmunológico. Puede reducir el colesterol e incluso reducir las tasas inflamatorias en el cuerpo."
},
{
title: "Consumirlo con moderación",
title: "consumirlo con moderación",
description: "Para conservarlo una vez abierto, lo mejor es volverlo a tapar con el corcho y asegurarse de que no queda expuesto al aire."
}
]
Expand Down
16 changes: 11 additions & 5 deletions src/components/CardMainMobile/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,23 @@
import React from 'react';
import './style.scss';
import { useHistory } from 'react-router';
import {card} from './data';
import image from '../../assets/imagen-vindano-1.png';
import Button from "../Button";

function CardMainMobile() {

const history = useHistory();

const handleClick = () => {
history.push("/home")
}

return (
<div className = "card-container">
<div className = "card-container__main">
<h1 className = "card-container__main--title">
{card.title}
{card.title}
</h1>
<p className = "card-container__main--paragraph">
{card.description}
Expand All @@ -30,11 +38,9 @@ function CardMainMobile() {
</div>
)}
</div>
<a href="">
<Button variant="secondary" text="Volver" clases='card-container__button'></Button>
</a>
<Button variant="secondary" text="Volver" clases='card-container__button' onClick={handleClick}></Button>
</div>
);
);
}

export default CardMainMobile;
3 changes: 2 additions & 1 deletion src/components/CardMainMobile/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
@use 'src/styles/utils' as *;

.card-container {
background-color: white;
background-color: $color-bg;
margin-top: 20px;
&__main {
&--title {
font-style: normal;
Expand Down
12 changes: 9 additions & 3 deletions src/components/Main/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,16 @@ import React from "react";
import "./style.scss";
import imagen from "../../assets/portada.png";
import Button from "../Button";
import { useHistory } from 'react-router';


function Main() {
const history = useHistory();

const handleClick = () => {
history.push("/lo-nuevo")
}

return (
<main className="main">
<div className="main__texto">
Expand All @@ -22,9 +30,7 @@ function Main() {
la nuestra tampoco... <br />
</span>
</h1>
<a href="#">
<Button variant="primary" text="Conocé lo nuevo"></Button>
</a>
<Button variant="primary" text="Conocé lo nuevo" onClick={handleClick} ></Button>
</div>
<div className="main__img">
<img
Expand Down
8 changes: 0 additions & 8 deletions src/components/Main/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,14 +46,6 @@
letter-spacing: 0.05em;
height: 58px;
}

a {
button {
z-index: 2;
margin-left: 25vw;
top: 82vh;
}
}
}


Expand Down
2 changes: 1 addition & 1 deletion src/views/information/data.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,6 @@
"type": "primary",
"logo": "https://raw.githubusercontent.com/frontendcafe/cmyk-blueberry/master/src/assets/copas.png",
"img": "https://raw.githubusercontent.com/frontendcafe/cmyk-blueberry/master/src/assets/barriles.png",
"deskImg": "https://raw.githubusercontent.com/frontendcafe/cmyk-blueberry/issue-5/seccion-informacion/src/assets/cultivo.png"
"deskImg": "https://raw.githubusercontent.com/frontendcafe/cmyk-blueberry/master/src/assets/cultivo.png"
}
]
Loading

0 comments on commit 157c2b5

Please sign in to comment.