diff --git a/package.json b/package.json index 307c661..daaca00 100644 --- a/package.json +++ b/package.json @@ -5,6 +5,8 @@ "private": false, "dependencies": { "@babel/eslint-parser": "^7.23.3", + "@fortawesome/free-solid-svg-icons": "^6.6.0", + "@fortawesome/react-fontawesome": "^0.2.2", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "babel-plugin-module-resolver": "^5.0.0", diff --git a/src/assets/Year2015.png b/src/assets/Year2015.png new file mode 100644 index 0000000..4b11b0d Binary files /dev/null and b/src/assets/Year2015.png differ diff --git a/src/assets/Year2016.png b/src/assets/Year2016.png new file mode 100644 index 0000000..fdf1b5b Binary files /dev/null and b/src/assets/Year2016.png differ diff --git a/src/assets/Year2017.png b/src/assets/Year2017.png new file mode 100644 index 0000000..2ba2f0a Binary files /dev/null and b/src/assets/Year2017.png differ diff --git a/src/assets/Year2018.png b/src/assets/Year2018.png new file mode 100644 index 0000000..e3c8056 Binary files /dev/null and b/src/assets/Year2018.png differ diff --git a/src/assets/Year2019.png b/src/assets/Year2019.png new file mode 100644 index 0000000..4021b93 Binary files /dev/null and b/src/assets/Year2019.png differ diff --git a/src/assets/Year2020.png b/src/assets/Year2020.png new file mode 100644 index 0000000..d485480 Binary files /dev/null and b/src/assets/Year2020.png differ diff --git a/src/assets/Year2021.png b/src/assets/Year2021.png new file mode 100644 index 0000000..62761a8 Binary files /dev/null and b/src/assets/Year2021.png differ diff --git a/src/assets/Year2022.png b/src/assets/Year2022.png new file mode 100644 index 0000000..bf97d5a Binary files /dev/null and b/src/assets/Year2022.png differ diff --git a/src/assets/Year2023.png b/src/assets/Year2023.png new file mode 100644 index 0000000..9ea3599 Binary files /dev/null and b/src/assets/Year2023.png differ diff --git a/src/assets/Year2024.png b/src/assets/Year2024.png new file mode 100644 index 0000000..568ee2e Binary files /dev/null and b/src/assets/Year2024.png differ diff --git a/src/assets/Year2025.png b/src/assets/Year2025.png new file mode 100644 index 0000000..d9f31ca Binary files /dev/null and b/src/assets/Year2025.png differ diff --git a/src/assets/YearDefault.png b/src/assets/YearDefault.png new file mode 100644 index 0000000..818aefb Binary files /dev/null and b/src/assets/YearDefault.png differ diff --git a/src/assets/historico2015.png b/src/assets/historico2015.png new file mode 100644 index 0000000..9cfda87 Binary files /dev/null and b/src/assets/historico2015.png differ diff --git a/src/assets/historico2016.png b/src/assets/historico2016.png new file mode 100644 index 0000000..d4bd184 Binary files /dev/null and b/src/assets/historico2016.png differ diff --git a/src/assets/historico2017.png b/src/assets/historico2017.png new file mode 100644 index 0000000..5fc2ff9 Binary files /dev/null and b/src/assets/historico2017.png differ diff --git a/src/assets/historico2018.png b/src/assets/historico2018.png new file mode 100644 index 0000000..535371e Binary files /dev/null and b/src/assets/historico2018.png differ diff --git a/src/assets/historico2019.png b/src/assets/historico2019.png new file mode 100644 index 0000000..5c686cd Binary files /dev/null and b/src/assets/historico2019.png differ diff --git a/src/assets/historico2020.png b/src/assets/historico2020.png new file mode 100644 index 0000000..8b17418 Binary files /dev/null and b/src/assets/historico2020.png differ diff --git a/src/assets/historico2021.png b/src/assets/historico2021.png new file mode 100644 index 0000000..3b9d829 Binary files /dev/null and b/src/assets/historico2021.png differ diff --git a/src/assets/historico2022.png b/src/assets/historico2022.png new file mode 100644 index 0000000..318d21f Binary files /dev/null and b/src/assets/historico2022.png differ diff --git a/src/assets/historico2023.png b/src/assets/historico2023.png new file mode 100644 index 0000000..326add9 Binary files /dev/null and b/src/assets/historico2023.png differ diff --git a/src/assets/historico2024.png b/src/assets/historico2024.png new file mode 100644 index 0000000..9887e3d Binary files /dev/null and b/src/assets/historico2024.png differ diff --git a/src/assets/historico2025.png b/src/assets/historico2025.png new file mode 100644 index 0000000..fdfe0c8 Binary files /dev/null and b/src/assets/historico2025.png differ diff --git a/src/assets/historicoDefault.png b/src/assets/historicoDefault.png new file mode 100644 index 0000000..4be9db6 Binary files /dev/null and b/src/assets/historicoDefault.png differ diff --git a/src/components/Carousel/index.jsx b/src/components/Carousel/index.jsx new file mode 100644 index 0000000..e8e0611 --- /dev/null +++ b/src/components/Carousel/index.jsx @@ -0,0 +1,56 @@ +import { faChevronLeft, faChevronRight } from '@fortawesome/free-solid-svg-icons'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import React, { useState } from 'react'; +import './styles.css'; + +const Carousel = ({ items }) => { + const [currentIndex, setCurrentIndex] = useState(0); + + const prevSlide = () => { + const isFirstSlide = currentIndex === 0; + const newIndex = isFirstSlide ? items.length - 1 : currentIndex - 1; + setCurrentIndex(newIndex); + }; + + const nextSlide = () => { + const isLastSlide = currentIndex === items.length - 1; + const newIndex = isLastSlide ? 0 : currentIndex + 1; + setCurrentIndex(newIndex); + }; + + return ( +
+
+ +
+
+ {items[currentIndex].title} +
+

{items[currentIndex].title}

+

{items[currentIndex].subtitle}

+

{items[currentIndex].description}

+
+
+
+ +
+
+ {`Footer +
+
+ ); +}; + +export default Carousel; \ No newline at end of file diff --git a/src/components/Carousel/styles.css b/src/components/Carousel/styles.css new file mode 100644 index 0000000..50a5137 --- /dev/null +++ b/src/components/Carousel/styles.css @@ -0,0 +1,121 @@ +.carousel-wrapper { + position: relative; +} + +.carousel-container { + display: flex; + align-items: center; + justify-content: center; + position: relative; + width: 100%; + height: 80vh; + overflow: hidden; + padding: 20px; + box-sizing: border-box; + z-index: 1; +} + +.nav-button { + background: none; + border: none; + font-size: 2rem; + cursor: pointer; + user-select: none; + z-index: 2; + color: #fff; + padding: 10px; + display: flex; + align-items: center; + justify-content: center; + transition: color 0.3s; + border-radius: 0; + box-shadow: none; +} + +.nav-button:hover { + color: #ddd; +} + +.carousel-item { + width: 100%; + height: 100%; +} + +.carousel-content { + display: flex; + align-items: center; + justify-content: space-between; + height: 100%; + flex-direction: row-reverse; +} + +.carousel-image { + width: 50%; + height: auto; + max-height: 100%; + object-fit: cover; + border-radius: 24px; +} + +.carousel-description { + width: 50%; + padding: 20px; + color: #fff; + display: flex; + flex-direction: column; + justify-content: center; + overflow: hidden; +} + +.carousel-title { + font-family: 'Poppins', sans-serif; + font-size: 64px; + font-weight: 800; + line-height: 96px; + text-align: left; + margin: 0 0 20px 0; +} + +.carousel-subtitle { + font-family: 'Karla', sans-serif; + font-size: 36px; + font-weight: 700; + line-height: 42.08px; + text-align: left; + margin: 0 0 10px 0; +} + +.carousel-text { + font-family: 'Karla', sans-serif; + font-size: 16px; + font-weight: 400; + line-height: 18.7px; + text-align: left; + margin: 0; + word-wrap: break-word; + white-space: pre-line; +} + +.footer-container { + position: relative; + width: 100%; + margin: 0; + padding: 0; + z-index: 0; + overflow: hidden; +} + +.footer-image { + width: 100%; + height: auto; + object-fit: cover; + margin-bottom: 150px; +} + +.blue-title { + color: #2B388A; +} + +.red-title { + color: #EB3D38; +} \ No newline at end of file diff --git a/src/components/Historico/index.jsx b/src/components/Historico/index.jsx new file mode 100644 index 0000000..3bea63d --- /dev/null +++ b/src/components/Historico/index.jsx @@ -0,0 +1,130 @@ +import React from 'react'; +import historicoImage2 from '../../assets/historico2015.png'; +import historicoImage3 from '../../assets/historico2016.png'; +import historicoImage4 from '../../assets/historico2017.png'; +import historicoImage5 from '../../assets/historico2018.png'; +import historicoImage6 from '../../assets/historico2019.png'; +import historicoImage7 from '../../assets/historico2020.png'; +import historicoImage8 from '../../assets/historico2021.png'; +import historicoImage9 from '../../assets/historico2022.png'; +import historicoImage10 from '../../assets/historico2023.png'; +import historicoImage11 from '../../assets/historico2024.png'; +import historicoImage12 from '../../assets/historico2025.png'; +import historicoImage1 from '../../assets/historicoDefault.png'; +import footerImage2 from '../../assets/Year2015.png'; +import footerImage3 from '../../assets/Year2016.png'; +import footerImage4 from '../../assets/Year2017.png'; +import footerImage5 from '../../assets/Year2018.png'; +import footerImage6 from '../../assets/Year2019.png'; +import footerImage7 from '../../assets/Year2020.png'; +import footerImage8 from '../../assets/Year2021.png'; +import footerImage9 from '../../assets/Year2022.png'; +import footerImage10 from '../../assets/Year2023.png'; +import footerImage11 from '../../assets/Year2024.png'; +import footerImage12 from '../../assets/Year2025.png'; +import footerImage1 from '../../assets/YearDefault.png'; +import Carousel from '../Carousel'; + +const Historico = () => { + const items = [ + { + title: 'Histórico', + subtitle: 'CARONAÊ', + image: historicoImage1, + description: 'Saiba mais sobre a nossa história, ano a ano. O aplicativo Caronaê esteve no ar de Abril de 2016 a Março de 2020.', + footerImage: footerImage1 + }, + { + title: '2015', + subtitle: 'IMPLEMENTAÇÃO', + image: historicoImage2, + description: 'Implementação do Aplicativo para o “Concurso Fundo Verde de Soluções Sustentáveis”. Desenvolvimento inicial do sistema pela empresa júnior da engenharia.', + footerImage: footerImage2 + }, + { + title: '2016', + subtitle: 'LANÇAMENTO', + image: historicoImage3, + description: 'Lançamento do Aplicativo.', + footerImage: footerImage3 + }, + { + title: '2017', + subtitle: 'REDE CARONAÊ E CÓDIGO ABERTO', + image: historicoImage4, + description: `Nos tornamos um Projeto de Extensão da UFRJ, criando a Rede Caronaê: Diversas instituições já se mostraram interessadas em participar da Rede Caronaê, criando ainda mais possibilidades. + + Pensando no envolvimento da comunidade, e por acreditar na colaboração entre as pessoas, o Caronaê abriu o código fonte para que todos possam contribuir com a construção dessa ideia. Licença garantindo liberdades referentes à execução, estudo, redistribuição e aperfeiçoamento.`, + footerImage: footerImage4 + }, + { + title: '2018', + subtitle: 'EXPANSÃO: PRAIA VERMELHA', + image: historicoImage5, + description: 'Expansão para o Campus Praia Vermelha.', + footerImage: footerImage5 + }, + { + title: '2019', + subtitle: 'EXPANSÃO: MACAÉ', + image: historicoImage6, + description: 'Expansão para o Campus Macaé.', + footerImage: footerImage6 + }, + { + title: '2020', + subtitle: 'PANDEMIA: RETIRADA DO APP DO AR', + image: historicoImage7, + description: 'Retirada do aplicativo do ar devido à pandemia.', + footerImage: footerImage7 + }, + { + title: '2021', + subtitle: 'REESTRUTURAÇÃO', + image: historicoImage8, + description: `Reestruturação do projeto e da equipe: + • Parceria iniciada com o Instituto Brasileiro de Transporte Sustentável (IBTS); + • Participação do Caronaê no Plano de Gestão Logística Sustentável PLS-UFRJ; + • Aprovação no edital de Projetos Especiais do Parque Tecnológico da UFRJ; + • A entrada de alunos/as extensionistas na equipe.`, + footerImage: footerImage8 + }, + { + title: '2022', + subtitle: 'DESENVOLVIMENTO DA NOVA VERSÃO', + image: historicoImage9, + description: 'Reconstrução do aplicativo original com melhorias em usabilidade e segurança. Tentativa de adequação do app para empresas do Parque Tecnológico.', + footerImage: footerImage9 + }, + { + title: '2023', + subtitle: 'ARTIGO SOBRE EMISSÕES', + image: historicoImage10, + description: 'Lançamento do artigo sobre a contribuição do Caronaê na redução da emissão de carbono na atmosfera, utilizando dados da época em que o app estava operante (2016-2020).', + footerImage: footerImage10 + }, + { + title: '2024', + subtitle: 'RELANÇAMENTO', + image: historicoImage11, + description: 'Relançamento do aplicativo atualizado, repensado e redesenhado, retomada da nossa presença digital nas redes sociais e lançamento do novo site do Caronaê.', + footerImage: footerImage11 + }, + { + title: '2025', + subtitle: 'MELHORIAS: DASHBOARD', + image: historicoImage12, + description: `Em breve! + Uma nova ferramenta para analisar, calcular e documentar todos os dados sobre emissões de carbono e outras informações importantes para entendermos o impacto e o papel do Caronaê na comunidade UFRJ e na sociedade.`, + footerImage: footerImage12 + } + ]; + + return ( +
+ +
+ ); +}; + +export default Historico; \ No newline at end of file diff --git a/src/components/Historico/styles.css b/src/components/Historico/styles.css new file mode 100644 index 0000000..e69de29 diff --git a/src/pages/History/index.jsx b/src/pages/History/index.jsx index 89f0f4f..a818b6b 100644 --- a/src/pages/History/index.jsx +++ b/src/pages/History/index.jsx @@ -1,7 +1,15 @@ +import Footer from '../../components/Footer'; +import Historico from '../../components/Historico'; import Navbar from '../../components/Navbar'; const History = () => { - return ; + return ( + <> + + +