Merge pull request #45 from frontendcafe/issue-5/seccion-informacion

Issue 5/seccion informacion

src/App.js

@@ -1,9 +1,11 @@
 import Navbar from "./components/Navbar";
 import Main from "./components/Main/index";
+import Information from './views/information/Information';
 import Sucursales from "./views/sucursales/index.js"
 import Gallery from './components/Gallery/index';
 import AboutUS from './views/aboutUS';
 import News from './views/news';
+import { useState } from 'react';
 import {
   BrowserRouter as Router,
   Switch,
@@ -13,13 +15,20 @@ import {
 
 function App() {
 
+  const [moreInfo, setMoreInfo] = useState(false);
+
+  const handleClick = () => {
+    setMoreInfo(!moreInfo);
+  }
+
   return (
     <div className="App">
       <Navbar></Navbar>
       <Switch>
         <Route path="/home" exact>
           <Main />
-          <Sucursales></Sucursales>
+          <Information handleClick={handleClick} moreInfo={moreInfo} />
+          {moreInfo ? <Sucursales /> : null }
           <Gallery></Gallery>
         </Route>
         <Route path="/sobre-nosotros" exact>
@@ -30,7 +39,8 @@ function App() {
         </Route>
         <Route path="/" exact>
           <Main />
-          <Sucursales></Sucursales>
+          <Information handleClick={handleClick} moreInfo={moreInfo} />
+          {moreInfo ? <Sucursales /> : null }
           <Gallery></Gallery>
         </Route>
       </Switch>

src/components/Button/index.js

@@ -3,6 +3,7 @@ import "./styles.scss";
 export const Button = (props) => {
   return (
     <button
+      onClick={props.onClick}
       className={`button button--${props.variant} ${props.clases}`} >
       {props.text}
     </button>

src/components/CardDesktop/index.js

@@ -1,11 +1,11 @@
 import './styles.scss';
 
-function CardDesktop({ children, type = 'secondary', title, icon, cover }) {
+function CardDesktop({ children, type = 'secondary', title, icon, cover, moreInfo }) {
   return (
-    <article className={`card-desktop ${type}`}>
+    <article className={`card-desktop${moreInfo ? "--expanded" : ""} ${type} `}>
       <header className="card-desktop__header">
-        { icon && <img src={icon} title="Card icon" alt="Card icon" className="card-desktop__header-icon" /> }
-        <h3 className="card-desktop__header-title">
+        { icon && <img src={icon} title="Card icon" alt="Card icon" /> }
+        <h3 className="card-desktop__header--title">
           { title }
         </h3>
       </header>

src/components/CardDesktop/styles.scss

@@ -33,7 +33,7 @@
     border: 5px solid $color-secondary;
 
     .card-desktop__content {
-      color: $color-text;
+      color: $color-secondary;
     }
   }
 
@@ -44,7 +44,7 @@
     padding-bottom: $size-lg;
     grid-template-columns: max-content auto;
 
-    &-title {
+    &--title {
       font-weight: bold;
       font-size: $size-3xl;
     }
@@ -59,4 +59,26 @@
   &__image {
     mix-blend-mode: multiply;
   }
+
+}
+
+.card-desktop--expanded {
+  max-width: 1200px;
+
+  &.primary {
+    height: 695px;
+    color: white;
+    align-content: flex-start;
+    background-color: $color-primary;
+    border-radius: $rounded-mobile;
+    border: solid $color-primary;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    padding: 30px;
+
+    .card-desktop__image {
+      width: 40%;
+    }
+  }
 }

src/components/CardsMobile/data.js → src/components/CardsMobile/data.json

@@ -1,7 +1,16 @@
-export const cards = [{
+[
+  {
     "title": "Nuestras bodegas",
-    "description": "Ubicada en Mendoza, Bodegas Wineberry se encuentra en un mágico lugar. Aquí las vides reciben permanente sol, viento suave y seco y abuendante agua que baja de las montañas y se combina con los suelos pedregosos. logrando vinos de alta calidad, frutados y redondos. Moderna e innovadora, la actual bodega fue construida bajo altos estándares de calidad respetando el patrimonio histórico y paisajístico perteneciente a la zona. Cada detalle fue cuidadosamente calculado como la vegetación autóctona y la construcción fue realizada bajo técnicas anti-sísmicas de las más avanzadas en el mundo"
-}, {
+    "description": "Ubicada en Mendoza, Bodegas Wineberry se encuentra en un mágico lugar. Aquí las vides reciben permanente sol, viento suave y seco y abuendante agua que baja de las montañas y se combina con los suelos pedregosos. logrando vinos de alta calidad, frutados y redondos. Moderna e innovadora, la actual bodega fue construida bajo altos estándares de calidad respetando el patrimonio histórico y paisajístico perteneciente a la zona. Cada detalle fue cuidadosamente calculado como la vegetación autóctona y la construcción fue realizada bajo técnicas anti-sísmicas de las más avanzadas en el mundo",
+    "type": "secondary",
+    "logo": "require('../assets/icon-barriles.png').default",
+    "img": "../assets/viniedo.png"
+  },
+  {
     "title": "Nuestro proceso",
-    "description": "Todo el proceso, desde la plantación de viñas, cosecha, elaboración, fraccionamiento, distribución y comercialización, es cuidadosamente controlado con un equipamiento tecnológico de última generación, lográndose así resultados por demás satisfactorios. Luego del proceso de elaboración, nuestros vinos tintos se añejan en vasijas de roble de Nancy, Francia, de 5.000 a 35.000 litros, contando con 440 en total entre toneles y cubas. El añejamiento otorga suavidad y untuosidad ya que la madera suaviza los taninos del vino, engrosa su estructura y prolonga su vida favoreciendo una estiba posterior en botella por varios años, dando como resultado un vino de mayor complejidad. Los vinos blancos serán conservados en tanques por un periodo máximo de un año. La finalidad de la Bodega es obtener blancos sin madera, frutados, frescos y jóvenes."
-}]
+    "description": "Todo el proceso, desde la plantación de viñas, cosecha, elaboración, fraccionamiento, distribución y comercialización, es cuidadosamente controlado con un equipamiento tecnológico de última generación, lográndose así resultados por demás satisfactorios. Luego del proceso de elaboración, nuestros vinos tintos se añejan en vasijas de roble de Nancy, Francia, de 5.000 a 35.000 litros, contando con 440 en total entre toneles y cubas. El añejamiento otorga suavidad y untuosidad ya que la madera suaviza los taninos del vino, engrosa su estructura y prolonga su vida favoreciendo una estiba posterior en botella por varios años, dando como resultado un vino de mayor complejidad. Los vinos blancos serán conservados en tanques por un periodo máximo de un año. La finalidad de la Bodega es obtener blancos sin madera, frutados, frescos y jóvenes.",
+    "type": "primary",
+    "logo": "require('../assets/icon-barriles.png').default",
+    "img": "../assets/viniedo.png"
+  }
+]

src/components/CardsMobile/index.js

@@ -13,16 +13,16 @@ const CardMobile = ( { title, description, logo, img } ) => {
     }
 
     return (
-        <div className={`card-container ${ showMore ? "full-card" : "small-card"} ${ animate ? "openCard" : "closeCard" }`}>
-            <div className="card-title">
-                <div className="card-title-left">
+        <div className={`card-mobile ${ showMore ? "full-card" : "small-card"} ${ animate ? "openCard" : "closeCard" }`}>
+            <div className="card-mobile__title">
+                <div className="card-mobile__title--left">
                     <img src={logo} alt="logo" className="logo"/>
                     <h1>{ title }</h1>
                 </div>
                 <button onClick={() => handleClick()}><img src={ Arrow } alt="right-arrow" className={ showMore ? "rotate" : "rotateBack"} /></button>
             </div>
-            <div className="card-image"><img src={ img } alt="img"/></div>
-            <p className="card-description">{ showMore ? description : `${description.substring(0,212)}`}</p>
+            <div className="card-mobile__image"><img src={ img } alt="img"/></div>
+            <p className="card-mobile__description">{ showMore ? description : `${description.substring(0,212)}`}</p>
         </div>
     )
 }

src/components/CardsMobile/styles.scss

@@ -1,23 +1,22 @@
 @use 'src/styles/utils' as *;
 
-.card-container {
+.card-mobile {
     max-width: 330px;
     border-radius: $rounded;
     background-color: $color-bg;
     box-shadow: $shadow;
     font-size: 10px;
     overflow: hidden;
-    margin: 15px;
 
-    .card-title {
+    &__title {
         grid-area: top;
         width: 100%;
         display: flex;
         justify-content: space-around;
         height: 3.5em;
         padding: $size-sm;
 
-        &-left {
+        &--left {
             width:90%;
             display: flex;
             align-items: center;
@@ -34,7 +33,7 @@
         }
     }
 
-    .card-image {
+    &__image {
         grid-area: img;
         display: inline-block;
 
@@ -43,7 +42,7 @@
         }
     }
 
-    .card-description {
+    &__description {
         grid-area: desc;
         padding: $size-sm;
     }
@@ -69,8 +68,9 @@
     "top top"
     "desc desc";
 
-    .card-image {
+    .card-mobile__image {
         height: 178px;
+        overflow: hidden;
 
         img {
             height: 100%;
@@ -79,7 +79,7 @@
         }
     }
 
-    .card-description {
+    .card-mobile__description {
         height: 180px;
         display: flex;
         align-items: center;

src/components/Gallery/styles.scss

@@ -30,7 +30,7 @@
         }
     }
 
-    @include media(md) {
+    @include media(lg) {
         display: grid;
         place-content: center;
         padding-top: 100px;

src/components/Main/style.scss

@@ -61,6 +61,15 @@
     display: none;
   }
 }
+
+@include media(sm) {
+  .main {
+    &__texto {
+      margin-bottom: 20px;
+    }
+  }
+}
+
 @include media(lg) {
   .main {
     background-color: $color-bg;

src/hooks/index.js

@@ -0,0 +1 @@
+export * from './useWindow';

src/hooks/useWindow.js

@@ -0,0 +1,23 @@
+import { useState, useEffect } from 'react';
+
+export function useWindow() {
+  const [windowSize, setWindowSize] = useState({
+    width: null,
+    height: null,
+  });
+
+  useEffect(() => {
+    const onWindowResize = () => {
+      setWindowSize({
+        width: window.innerWidth,
+        height: window.innerHeight,
+      });
+    }
+
+    onWindowResize();
+    window.addEventListener('resize', onWindowResize);
+    return () => window.removeEventListener('resize', onWindowResize);
+  }, []);
+
+  return windowSize
+}

src/views/information/Information.js

@@ -0,0 +1,45 @@
+import Button from "../../components/Button";
+import CardMobile from "../../components/CardsMobile";
+import CardDesktop from "../../components/CardDesktop";
+import data from "./data.json";
+import { useWindow } from "../../hooks/useWindow";
+import "./styles.scss";
+
+export const Information = ({handleClick, moreInfo}) => {
+
+  const size = useWindow();
+  console.log(size);
+
+  return (
+    <section className={`information${moreInfo ? "--expanded" : ""}`}>
+      <div className="information__cards">
+        {size.width < 576
+          ? data.map((info) => (
+              <CardMobile
+                key={info.id}
+                logo={info.logo}
+                img={info.img}
+                title={info.title}
+                description={info.description}
+              />
+            ))
+          : data.map((info) => (
+              <CardDesktop
+                key={info.id}
+                icon={info.logo}
+                cover={info.deskImg}
+                title={info.title}
+                children={moreInfo ? info.description : info.shortDesc}
+                type ={info.type}
+                moreInfo={moreInfo}
+              />
+            ))}
+      </div>
+      <div className="information__btn">
+        <Button variant="blueborder" text="Más información" onClick={handleClick} />
+      </div>
+    </section>
+  );
+};
+
+export default Information;

src/views/information/data.json

@@ -0,0 +1,22 @@
+[
+    {
+      "id": "card-bodega",
+      "title": "Nuestras bodegas",
+      "description": "Ubicada en Mendoza, Bodegas Wineberry se encuentra en un mágico lugar. Aquí las vides reciben permanente sol, viento suave y seco y abuendante agua que baja de las montañas y se combina con los suelos pedregosos. logrando vinos de alta calidad, frutados y redondos. Moderna e innovadora, la actual bodega fue construida bajo altos estándares de calidad respetando el patrimonio histórico y paisajístico perteneciente a la zona. Cada detalle fue cuidadosamente calculado como la vegetación autóctona y la construcción fue realizada bajo técnicas anti-sísmicas de las más avanzadas en el mundo",
+      "shortDesc":"Ubicada en Mendoza, Bodegas Wineberry se encuentra en un mágico lugar. Aquí las vides reciben permanente sol, viento suave y seco y abuendante agua que baja de las montañas y se combina con los suelos pedregosos. logrando vinos de alta calidad, frutados y redondos.",
+      "type": "secondary",
+      "logo": "https://raw.githubusercontent.com/frontendcafe/cmyk-blueberry/5cd86dc9b8b3a33f0175a4c1576fb50c082e368c/src/assets/logo_barril.svg",
+      "img": "https://raw.githubusercontent.com/frontendcafe/cmyk-blueberry/master/src/assets/viniedo.png",
+      "deskImg": ""
+    },
+    {
+      "id": "card-proceso",
+      "title": "Nuestro proceso",
+      "description": "Todo el proceso, desde la plantación de viñas, cosecha, elaboración, fraccionamiento, distribución y comercialización, es cuidadosamente controlado con un equipamiento tecnológico de última generación, lográndose así resultados por demás satisfactorios. Luego del proceso de elaboración, nuestros vinos tintos se añejan en vasijas de roble de Nancy, Francia, de 5.000 a 35.000 litros, contando con 440 en total entre toneles y cubas. El añejamiento otorga suavidad y untuosidad ya que la madera suaviza los taninos del vino, engrosa su estructura y prolonga su vida favoreciendo una estiba posterior en botella por varios años, dando como resultado un vino de mayor complejidad. Los vinos blancos serán conservados en tanques por un periodo máximo de un año. La finalidad de la Bodega es obtener blancos sin madera, frutados, frescos y jóvenes.",
+      "shortDesc": "Todo el proceso, desde la plantación de viñas, cosecha, elaboración, fraccionamiento, distribución y comercialización, es cuidadosamente controlado con un equipamiento tecnológico de última generación, lográndose así resultados por demás satisfactorios.",
+      "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"
+    }
+  ]