Merge pull request #57 from frontendcafe/issue-27/card-nuestros-vinos

Issue 27/card nuestros vinos

src/components/CardOurWinesDesktop/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Button from '../Button';
+import './styles.scss'; 
+
+const CardOurWinesDesktop = ({title, img, background, info}) => {
+
+    return (
+        <section className={`cardWine cardWine--${background}`}>
+            <img className="cardWine-img"src={img} alt="Imagen de vino"/>
+            <div className="cardWine__container">
+                <div className="cardWine__container-text"> 
+                    <h2>{title.substring (0, title.indexOf("-")-1)}</h2>
+                    <h3>{title.substring(title.indexOf("-")+1, title.length)}</h3>
+                </div>
+                <p className="cardWine__container-info">{info}</p>
+                <Button variant="secondary" text="Quiero saber más" clases="cardWine__container-button"></Button>
+            </div>   
+        </section>
+    )
+}
+export default CardOurWinesDesktop;

src/components/CardOurWinesDesktop/styles.scss

@@ -0,0 +1,110 @@
+@use 'src/styles/utils' as *;
+
+.cardWine {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-end;
+    width: 382px;
+    border-radius: 2px;
+    height: 700px;
+    margin-top: 100px;
+    margin-left: 80px;
+    position: relative;
+
+    &--primary {
+        background-color: $color-primary;
+    }
+
+    &--secondary {
+        background-color: $color-secondary;
+    }
+
+    &--colorCard {
+        background-color: $color-card;
+    }
+
+    &-img {
+        width: 146px;
+        position: absolute;
+        top: -20px;
+    }
+
+    &__container {
+        display: flex;
+
+        &-text {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            transform: translateY(-30px);
+
+            h2, h3 {
+                font-size: $size-3xl;
+                font-weight: 700;
+                line-height: 42px;
+                letter-spacing: 0.05em;
+                color: $color-bg;
+            }
+        }
+
+        &-info {
+            display: none;
+        }
+
+        &-button {
+            display: none;
+        }
+    }
+
+    &:hover {
+        width: 650px;
+        flex-direction: row;
+        @include media(lg) {
+            width: 850px;
+        }
+        & .cardWine{
+            &-img{
+                width: 220px;
+                top: -80px;
+                left: -75px;
+            }
+            &__container{
+                flex-direction: column;
+                padding-left: 170px;
+
+                &-text {
+                    flex-direction: row;
+                    transform: translateY(0px);
+                    padding-bottom: 60px;
+                    justify-content: flex-start;
+
+                    h3 {
+                        padding-left: 6px;
+                    }
+                }
+
+                &-info {
+                    display: inline;
+                    justify-content: center;
+                    align-items: center;
+                    color: $color-bg;
+                    font-size: 20px;
+                    font-weight: 400;
+                    line-height: 30px;
+                    letter-spacing: 0.05em;
+                    padding-right: 30px;
+
+                }
+
+                &-button {
+                    display: inline;
+                    width: 167px;
+                    margin-top: 50px;
+                }
+
+            }
+        }
+    }
+}

src/components/CardOurWinesMobile/index.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import Button from '../Button';
+import './styles.scss'; 
+
+const CardOurWinesMobile = ({title, img, background}) => {
+
+    return (
+        <section className={`cardWineMobile cardWineMobile--${background}`}>
+            <div className="cardWineMobile__container">
+                <img className="cardWineMobile__container-img"src={img} alt="Imagen de vino"/>
+                <div className="cardWineMobile__container-text">
+                    <h2>{title.substring (0, title.indexOf("-")-1)}</h2>
+                    <h3>{title.substring(title.indexOf("-")+1, title.length)}</h3>
+                </div>   
+            </div>                
+            <Button variant="secondary" text="Más información" clases="cardWineMobile__button"></Button>
+        </section>
+    )
+}
+
+export default CardOurWinesMobile;

src/components/CardOurWinesMobile/styles.scss

@@ -0,0 +1,55 @@
+@use 'src/styles/utils' as *;
+
+.cardWineMobile {
+    display: flex;
+    flex-direction: column;
+    width: 185px;
+    border-radius: $rounded;
+    margin: 30px;
+
+    &--primary {
+        background-color: $color-primary;
+    }
+
+    &--secondary {
+        background-color: $color-secondary;
+    }
+
+    &--colorCard {
+        background-color: $color-card;
+    }
+
+    &__container {
+        display: flex;
+        flex-direction: row;
+        margin: 0px 10px;
+
+        &-text {
+            display: flex;
+            flex-direction: column;
+            align-self: center;
+            align-items: center;
+            justify-content: center;
+            margin-left: 8px;
+
+            h2, h3{
+                font-size: $size-base;
+                font-weight: 700;
+                line-height: 24px;
+                letter-spacing: 0.05em;
+                color: $color-bg;
+            }
+        }
+
+        &-img {
+            width: 65px;
+            position: relative;
+            top: -20px;
+            align-self: stretch;
+        }
+    }
+
+    &__button {
+        margin: 0px 10px 10px;
+    }
+}

src/components/WineDetail/data.js

@@ -12,7 +12,8 @@ export const wines = [
         "sabor": "Boca elegante en la que se vuelve imperceptible el paso por madera.",
         "maridaje": "Acompaña muy bien carnes rojas a la parrilla, quesos duros y pastas con salsas blancas así como de tomate o trufas. También es ideal para platos principales, como guisos y carnes de caza o verduras, como papas rellenas, cabutia al horno y pimientos.",
         "background" :"secondary",
-        "img" : wineMattwe
+        "img" : wineMattwe,
+        "infoCards": "Es una línea de vinos de alta gama elaborados en pequeñas cantidades, resultado de largos periodos de investigación y reconocimiento de los mejores terruños dentro de nuestras fincas. Cada ejemplar es el fiel reflejo de un viñedo especial ubicado en una microzona de la región de Cuyo seleccionada por sus características de calidad."
 
     }, 
     {
@@ -24,17 +25,19 @@ export const wines = [
         "sabor": "Entrada en boca dulce, taninos de textura fina, muy estructurado y persisteznte.",
         "maridaje": "Ideal para cenas especiales, donde el plato principal sea carne, que puede ser vacuna, de pato o cordero. También acompaña bien a un cerdo braseado o un chivo hecho a los fuegos.",
         "background" :"primary",
-        "img" : wineNisoma
+        "img": wineNisoma,
+        "infoCards": "Es el vino ícono de Bodega Wineberry. Busca complejidad y elegancia. Se elabora de uvas de bajos rendimientos, con largas maceraciones. Su crianza dura dos años en barricas nuevas de roble francés y un año de estiba en botella antes de salir al mercado."
     },
     {
-        "title": "Red Wine - Since 2003",
+        "title": "RED WINE - Since 2003",
         "description": "Es una línea de vinos de alta gama elaborados en pequeñas cantidades, resultado de largos periodos de investigación y reconocimiento de los mejores terruños dentro de nuestras fincas. Cada ejemplar es el fiel reflejo de un viñedo especial ubicado en una microzona de la región de Cuyo seleccionada por sus características de calidad.",
         "composition": "100% Malbec.",
         "color": "Rojo con reflejos bordó.",
         "aroma": "Predominan los aromas de frutos rojos maduros y mermeladas, combinados con el suave aporte aromático del roble, vainilla chocolate y algunos ahumados.",
         "sabor": "Buena concentración y untuosidad, con taninos sedosos, típico del malbec argentino.",
         "maridaje": "Ideal para acompañar con carnes rojas asadas o pastas con salsas rojas.",
         "background" :"colorCard",
-        "img" : wineRedwine
+        "img" : wineRedwine,
+        "infoCards": "Creamos una línea de vinos únicos y elegantes, en donde cada uno es fruto del trabajo en un viñedo especial, por su edad y su manejo. Elaborado con uvas provenientes de nuestros viñedos centenarios plantados en 1906 y 1930."
     }
 ]