\n 
\n
\n \n setActive(!active)}\n onMouseOver={() => setActive(!active)}\n to=\"/\"\n style={{ textDecoration: \"none\", color: \"white\" }}\n >\n VOLVER\n \n
\n \n
\n \n \n )\n}\n\nexport default HistoryTop\n","import React, { useState } from \"react\"\nimport styles from \"../styles/history.module.css\"\nimport OldCars from \"../images/oldCars.png\"\nimport BarrelsMobile from \"../images/3.png\"\nimport Barrels from \"../images/barrels.png\"\nimport Dot from \"../images/lineaDeco.svg\"\nimport Qletter from \"../images/8.png\"\nimport QFactory from \"../images/factory.png\"\nimport { useMediaQuery } from \"react-responsive\"\nimport { useScrollData } from \"scroll-data-hook\"\nfunction NuestroComienzo() {\n const {\n scrolling,\n time,\n speed,\n direction,\n position,\n relativeDistance,\n totalDistance,\n } = useScrollData({\n onScrollStart: () => {},\n })\n\n const mobile = useMediaQuery({ query: \"(max-width: 485px)\" })\n const [move, setMove] = useState(false)\n return (\n <>\n \n \n HECHA
\n 
\n
\n\n \n HECHA
CON CARIÑO\n
\n \n Somos una cerveza de acá,hecha por gente de acá, con ingredientes\n de acá y para gente de acá. Somos la cerveza que tomás vos y la\n que tomaba tu viejo. Somos Quilmes, la cerveza argentina.\n
\n\n \n \n
\n \n 
\n
\n \n {mobile ? (\n {\n setMove(!move)\n }}\n onMouseLeave={() => {\n setMove(!move)\n }}\n id={!move ? styles.barrels : styles.barrelsMove}\n src={Barrels}\n />\n )}\n {\n setMove(!move)\n }}\n onMouseLeave={() => {\n setMove(!move)\n }}\n id={!move ? styles.letter : styles.letterMove}\n src={Qletter}\n />\n
\n \n 
\n 318\n ? `${styles.sectionTwoTextAnimation}`\n : `${styles.sectionTwoText}`\n }\n >\n Todo comenzó en 1890 en la localidad de Quilmes. Ahí, Otto Bemberg\n trabajó arduamente para elaborar una cerveza que estuviera a la\n altura de su tradición alemana y luego de dos años, esa idea con la\n que llegó de Europa, no sólo se convertiría en realidad, sino que,\n adaptada al paladar argentino con el tiempo se convertiría en la\n cerveza más importante del país.\n \n
\n \n
\n 318 ? `${styles.nuestroComienzo}` : null}>\n NUESTROS COMIENZOS\n
\n318 ? `${styles.otto}` : null}>\n Otto Bemberg 1890\n
\n- \n {\" \"}\n {dots}{\" \"}\n
\n
}\n
\n ) : (\n \n \n
\n {i === 4 ? null : }\n
\n
}\n
\n ),\n })\n : (settings = settings = {\n infinite: false,\n speed: 3000,\n slidesToShow: 1,\n slidesToScroll: 1,\n swipeToSLide: true,\n arrows: false,\n swipe: true,\n touchMove: true,\n dots: true,\n centerMode: false,\n afterChange: index => {\n setCurrentDot(index)\n },\n appendDots: dots => (\n \n \n
\n {i === 4 ? null : }\n
- \n {\" \"}\n {dots}{\" \"}\n
\n
}\n
\n ) : (\n \n \n
\n {i === 4 ? null : }\n
\n
}\n
\n ),\n })\n return (\n <>\n \n \n
\n {i === 4 ? null : }\n
NUESTROS INGREDIENTES
\n\n
\n )\n })}\n \n
\n )\n ) : index === 4 ? null : (\n
\n )}\n
\n \n
\n \n 
\n
\n {item.title}
\n{item.text}
\n\n )\n ) : index === 4 ? null : (\n
\n )}\n
\n 
\n
\n )\n }\n}\n\nexport default class SimpleSlider extends Component {\n constructor(props) {\n super(props)\n\n this.state = {\n title1: elaboracion[0].title1,\n title2: \"\",\n title3: \"\",\n text: elaboracion[0].text,\n }\n\n this.change = this.change.bind(this)\n }\n change(index) {\n this.setState({\n text: elaboracion[index].text,\n title1: elaboracion[index].title1,\n title2: elaboracion[index].title2,\n title3: elaboracion[index].title3,\n })\n }\n render() {\n const settings = {\n dots: false,\n dotsClass: `slick-dots ${styles.dotsClass}`,\n smooth: true,\n infinite: false,\n speed: 1000,\n slidesToShow: 1,\n slidesToScroll: 1,\n arrows: false,\n beforeChange: (oldindex, newIndex) => {\n active = !active\n this.change(newIndex)\n },\n }\n return (\n \n \n \n\n
\n )\n }\n}\n","import React from \"react\"\nimport Img from \"gatsby-image\"\nimport Elaboracion from \"../images/elaboracion.svg\"\nimport SimpleSlider from \"../components/process\"\nimport styles from \"../styles/history.module.css\"\nimport { useMediaQuery } from \"react-responsive\"\nimport { useScrollData } from \"scroll-data-hook\"\nimport lineaElaboracion from \"../images/comoElaboramosDeco.svg\"\n\nconst elaboracion = [\n {\n title: \"Campo\",\n text: \"\",\n margin: \"0\",\n },\n {\n title: \"Remojo, Germinación y Secado\",\n text:\n \"Luego de obtener los granos de cebada, estos son llevados a nuestras malterías donde comienza el proceso.\",\n margin: \"0\",\n },\n {\n title: \"Molienda y Maceración\",\n text:\n \"El grano de cebada es partido para aprovechar todos sus nutrientes. Se lo mezcla con agua para obtener el mosto, un líquido espeso y de sabor dulce. Luego de agregar el agua, agregamos el maíz al proceso.\",\n margin: \"0\",\n },\n {\n title: \"Cocimiento y enfriado\",\n text:\n \"Aqui hervimos el mosto a más de 100° y agregamos otro ingrediente: el lúpulo, luego creamos las condiciones necesarias para comenzar la fermentación y maduración.\",\n margin: \"0\",\n },\n {\n title: \"Fermentación y Maduración\",\n text:\n \"La fermentación es un proceso que dura 14 días en el agregamos la levadura tipo lager, que es la encargada de generar la carbonatación y el alcohol natural en el mosto. Luego se deja al mosto estabilizarse, madurar y reposar.\",\n margin: \"0\",\n },\n {\n title: \"Filtrado y embotellado\",\n text:\n \"El filtrado nos permite obtener el color brillante y dorado de nuestra Quilmes, para luego pasar a la etapa en la cual envasamos y pasteurizamos nuestra cerveza. Este proceso es el que nos permite optimizar su conservación.\",\n margin: \"0\",\n },\n {\n title: \"Salud!\",\n text: \"\",\n margin: \"0\",\n },\n]\n\nfunction ComoElaboramos({ data }) {\n const {\n scrolling,\n time,\n speed,\n direction,\n position,\n relativeDistance,\n totalDistance,\n } = useScrollData({\n onScrollStart: () => {},\n })\n\n const mobile = useMediaQuery({ query: \"(max-width: 485px)\" })\n return (\n <>\n CÓMO ELABORAMOS
\n\n\n \n {this.state.title1.toUpperCase()}\n \n
\n \n {this.state.title2 ? this.state.title2.toUpperCase() : null}\n
\n\n {this.state.title3 ? this.state.title3.toUpperCase() : null}\n
\n{this.state.text}
\nCÓMO ELABORAMOS NUESTRA CERVEZA
\n {/* */}\n\n
\n {\" \"}\n \n ) : (\n \n
\n \n 
\n
\n \n {elaboracion.map((step, index) => {\n return (\n
\n )\n })}\n \n \n\n 1800\n ? `${styles.stepTitleAnimation}`\n : null\n }\n >\n {step.title.toUpperCase()}\n \n 1800\n ? `${styles.sectionFourTextAnimation}`\n : null\n }\n >\n {step.text}\n \n
\n \n
\n\n \n
\n \n \n
\n LUIS DIMOTTA
\nNUESTRO MAESTRO
\n\n Luis Dimotta, nuestro maestro cervecero, es el encargado de\n elaborar la cerveza más famosa de Argentina. La pasión y el tiempo\n dedicado a nuestra cerveza se nota en las recetas originales de\n todas las variedades a lo largo y ancho del país. Pero este\n importante trabajo no es para cualquiera, para llegar a ser\n maestro cervecero de Quilmes es necesario haber hecho cerveza\n durante al menos 10 años. A todo eso, nosotros le llamamos cariño.{\" \"}\n ¡Bravo Luis!\n
\n\n \n {\n window.dataLayer.push({\n event: \"GAEvent\",\n event_category: \"Content\",\n event_action: \"Nuestro maestro\",\n event_label: `Conocé a Luiss`,\n interaction: true,\n component_name: \"boton_conoce_luis\",\n element_text: \"Conocé a Luis\",\n })\n }}\n >\n CONOCÉ A LUIS\n \n \n {\n window.dataLayer.push({\n event: \"GAEvent\",\n event_category: \"Content\",\n event_action: \"Nuestro Maestro\",\n event_label: `Contactalo`,\n interaction: true,\n component_name: \"boton_contactalo\",\n element_text: \"Contactalo\",\n })\n }}\n >\n \n \n
\n \n \n SI TE QUEDASTE CON LAS GANAS DE MÁS,\n
\n\n {\n window.dataLayer.push({\n event: \"GAEvent\",\n event_category: \"Video\",\n event_action: `Play`,\n event_label: `Publicidad Historicas`,\n interaction: true,\n })\n }}\n onEnded={() => {\n window.dataLayer.push({\n event: \"GAEvent\",\n event_category: \"Video\",\n event_action: `Completed`,\n event_label: `Publicidad Historicas`,\n interaction: true,\n })\n }}\n />\n
\n