Mudanças no Site Institucional (#18)

* #Hotfix add the logos in the main page and change the name in navbar

* feat: Create social media tab

* chore: add git commit linter

* feat: create midia tab

* feat: add 'saiba mais' and 'midia' pages

* fix: complete requested changes on pr

* fix: fix 'saiba-mais' carousel logos

Co-authored-by: Sabanai104 <[email protected]>

package.json

@@ -13,7 +13,8 @@
     "react-dom": "^16.13.1",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.1",
-    "styled-components": "^5.1.0"
+    "styled-components": "^5.1.0",
+    "react-elastic-carousel": "0.11.5"
   },
   "scripts": {
     "start": "react-scripts start",
@@ -35,5 +36,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "git-commit-msg-linter": "^3.2.6"
   }
 }

src/components/InfoCard/index.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Container } from './styles';
+
+export default function InfoCard({ title, color, text }) {
+
+  return(
+    <Container>
+      <div className={`card-${color}`}>
+        <h3>
+          {title}
+        </h3>
+        <p>
+          {text}
+        </p>
+      </div>
+    </Container>
+  );
+}

src/components/InfoCard/styles.js

@@ -0,0 +1,32 @@
+import styled from "styled-components";
+
+export const Container = styled.section`
+  div {
+    height: 23rem;
+    padding: 2.5rem;
+    margin: 1rem;
+    background-color: #EDEDED;
+    text-align: justify;
+    border-radius: 0.6rem;
+  }
+  .card-white {
+    h3 {
+      font-size: 1.6rem;
+    }
+    p {
+      font-size: 1.3rem;
+    }
+  }
+
+  .card-blue {
+    background-color: #4B8AB9;
+    h3 {
+      font-size: 1.6rem;
+      color: #f7f7f7;
+    }
+    p {
+      color: #f7f7f7;
+      font-size: 1.3rem;
+    }
+  }
+`;

src/components/LogoCard/index.js

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { Container } from './styles';
+
+export default function LogoCard({ name, link, logo }) {
+  return (
+    <Container >
+      <div className='image-container'>
+        <img
+          src={logo}
+          alt='logo'
+          style={{ width: '13rem'}}
+        />
+      </div>
+      <div className='link-container'>
+        <a
+          href={link}
+          target='blank'
+        >
+          {name}
+        </a>
+      </div>
+    </Container>
+  );
+}

src/components/LogoCard/styles.js

@@ -0,0 +1,52 @@
+import styled from 'styled-components';
+import { darken } from 'polished';
+
+
+export const Container = styled.div`
+  height: 22rem;
+  width: 100%;
+  padding: 2.5rem;
+  margin: 1rem;
+  background-color: ${darken(0.3, '#4B8AB9')};
+
+  border-radius: 0.6rem;
+
+  display: flex;
+  flex-direction: column;
+  justify-content: space-space-around;
+  align-items: center;  
+
+  &:hover,
+  &:active {
+    transition: all 0.5s;
+    background: ${darken(0.1, '#4B8AB9')};
+  }
+
+  .image-container {
+    width: 100%;
+    height: 60%;
+    padding: 0.8rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    img {
+      padding: 1rem;
+      width: 100%;
+    }
+  }
+
+  .link-container {
+    display: flex;
+    height: 40%;
+    align-items: center;
+    justify-content: center;
+    a {
+      color: #F7F7F7;
+      font-weight: bold;
+      cursor: pointer;
+      font-size: 1.4rem;
+      text-decoration: none;
+      text-align: center;
+    }
+  }
+`;

src/components/NavBar/index.js

@@ -41,15 +41,18 @@ export default function NavBar() {
             <NavLink id='navTitle' to='/team'>
               Equipe
             </NavLink>
-            <NavLink id='navTitle' to='/contact'>
-              Contato
-            </NavLink>
-            <NavLink id='navTitle' to='/doar'>
-              Doar
+            <NavLink id='navTitle' to='/social-media'>
+              Redes Sociais
             </NavLink>
             <NavLink id='navTitle' to='/support'>
               Apoio
             </NavLink>
+            <NavLink id='navTitle' to='/midia'>
+              Mídia
+            </NavLink>
+            <NavLink id='navTitle' to='/know-more'>
+              Saiba Mais
+            </NavLink>
           </div>
         </div>
       </Navbar>
@@ -75,11 +78,8 @@ export default function NavBar() {
           <NavLink id='navTitle' to='/team' onClick={closeSidebar}>
             Equipe
           </NavLink>
-          <NavLink id='navTitle' to='/contact' onClick={closeSidebar}>
-            Contato
-          </NavLink>
-          <NavLink id='navTitle' to='/doar' onClick={closeSidebar}>
-            Doar
+          <NavLink id='navTitle' to='/social-media' onClick={closeSidebar}>
+            SocialMedia
           </NavLink>
           <NavLink id='navTitle' to='/support' onClick={closeSidebar}>
             Apoio

src/components/NavBar/styles.js

@@ -26,8 +26,8 @@ export const Navbar = styled.div`
       #navTitle {
         color: #4b8ab9;
         font-weight: bold;
-        margin-left: 2em;
-        font-size: 1.8em;
+        margin-left: 1.6em;
+        font-size: 1.2em;
         text-decoration: none;
       }
 

src/components/NewsContainer/index.js

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import { Container } from './styles';
+
+export default function NewsContainer({
+  title,
+  data,
+  link,
+  logo  
+  }) {
+  return (
+    <Container>
+      <section>
+        <h3>
+          {title}
+        </h3>
+        <section className='news-info'>
+          <div id='dataInformation' >
+            {
+              data.map((item) => {
+                return (
+                  <p>
+                    {item}
+                  </p>
+                )}
+              )
+            }
+            <a className='news-link' href={link} target='blank'>
+              Acesse aqui
+            </a>
+          </div>
+          <div id='newsLogo'>
+            <img
+              src={logo}
+              style={{ width: '15rem' }}
+              alt='newsImage'
+            />
+          </div>
+        </section>
+      </section>
+    </Container>
+  );
+}

src/components/NewsContainer/styles.js

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+
+export const Container = styled.section`
+  width: 100%;
+  height: 40vh;
+  padding: 3rem 3rem 4rem 2rem;
+  margin: 2rem 0 2rem 0;
+
+  section {
+    display: flex;
+    flex-direction: column;
+    padding: 1rem;
+    width: 100%;
+    height: 100%;
+
+    h3 {
+      padding: 0 0 1.2em 0;
+    }
+
+    .news-info {
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+
+      #dataInformation {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: space-around;
+        margin: 4.5rem 0 2rem 0;
+        width: 50%;
+        max-height: 8rem;
+
+        p {
+          font-size: 1.2rem;
+          padding: 0.5rem;
+        }
+
+        .news-link {
+          padding: 1em 0em;
+          font-size: 1.2em;
+          color: #4b8ab9;
+          font-weight: bold
+        }
+
+      }
+
+      #newsLogo {
+        width: 50%;
+        display: flex;
+        justify-content: space-around;
+        align-self: center;
+        img {
+          width: 50%;
+        }
+      }
+    }
+  }
+`;