mdsreq-fga-unb · DanielRogs · Dec 4, 2024 · Nov 27, 2024 · Nov 27, 2024 · Nov 28, 2024
diff --git a/apps/backend/src/.env.template → apps/backend/.env.template b/apps/backend/src/.env.template → apps/backend/.env.template
diff --git a/apps/backend/src/index.js b/apps/backend/src/index.js
@@ -1,4 +1,5 @@
 import express from 'express';
+import connectDatabase from './database/db.js';
 import cors from 'cors';
 import dotenv from 'dotenv';
 dotenv.config();
@@ -23,4 +24,5 @@ const corsOptionsDelegate = function(req, callback) {
 app.use(cors(corsOptionsDelegate));
 app.use(express.json());
 
+connectDatabase();
 app.listen(port, () => console.log(`Servidor rodando na porta ${port}`));
diff --git a/apps/frontend/index.html b/apps/frontend/index.html
@@ -2,11 +2,21 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="icon" href="/apps/frontend/public/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>Família do Sítio</title>
   </head>
   <body>
+    <div vw class="enabled">
+      <div vw-access-button class="active"></div>
+      <div vw-plugin-wrapper>
+        <div class="vw-plugin-top-wrapper"></div>
+      </div>
+    </div>
+    <script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
+    <script>
+      new window.VLibras.Widget('https://vlibras.gov.br/app');
+    </script>
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>

diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -13,7 +13,10 @@
   "dependencies": {
     "@familiadositio/core": "*",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-icons": "^5.3.0",
+    "react-router-dom": "^7.0.1",
+    "styled-components": "^6.1.13"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",

diff --git a/apps/frontend/public/favicon.png b/apps/frontend/public/favicon.png
diff --git a/apps/frontend/public/vite.svg b/apps/frontend/public/vite.svg
diff --git a/apps/frontend/src/App.css b/apps/frontend/src/App.css
diff --git a/apps/frontend/src/App.jsx b/apps/frontend/src/App.jsx
@@ -1,35 +1,18 @@
-import { useState } from 'react'
-import reactLogo from './assets/react.svg'
-import viteLogo from '/vite.svg'
-import './App.css'
+import React, { useEffect } from 'react';
+import { BrowserRouter as Router, Route, Routes} from 'react-router-dom';
+import ContactPage from './pages/ContactPage'; 
 
-function App() {
-  const [count, setCount] = useState(0)
+const App = () => {
+  useEffect(() => {
+  }, []);
 
   return (
-    <>
-      <div>
-        <a href="https://vite.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
-  )
-}
+    <Router>
+      <Routes>
+          <Route path='/' element={<ContactPage />} />
+      </Routes>
+    </Router>
+  );
+};
 
-export default App
+export default App;
diff --git a/apps/frontend/src/assets/FamiliaDoSitio.png b/apps/frontend/src/assets/FamiliaDoSitio.png
diff --git a/apps/frontend/src/assets/FamiliaDoSitioBorda.png b/apps/frontend/src/assets/FamiliaDoSitioBorda.png
diff --git a/apps/frontend/src/assets/UnBLogo.png b/apps/frontend/src/assets/UnBLogo.png
diff --git a/apps/frontend/src/assets/fonts/MyriadPro-Bold.woff b/apps/frontend/src/assets/fonts/MyriadPro-Bold.woff
diff --git a/apps/frontend/src/assets/fonts/MyriadPro-Bold.woff2 b/apps/frontend/src/assets/fonts/MyriadPro-Bold.woff2
diff --git a/apps/frontend/src/assets/fonts/MyriadPro-Regular.woff b/apps/frontend/src/assets/fonts/MyriadPro-Regular.woff
diff --git a/apps/frontend/src/assets/fonts/MyriadPro-Regular.woff2 b/apps/frontend/src/assets/fonts/MyriadPro-Regular.woff2
diff --git a/apps/frontend/src/assets/fonts/MyriadPro-Semibold.woff b/apps/frontend/src/assets/fonts/MyriadPro-Semibold.woff
diff --git a/apps/frontend/src/assets/fonts/MyriadPro-Semibold.woff2 b/apps/frontend/src/assets/fonts/MyriadPro-Semibold.woff2
diff --git a/apps/frontend/src/assets/react.svg b/apps/frontend/src/assets/react.svg
diff --git a/apps/frontend/src/components/Footer/index.jsx b/apps/frontend/src/components/Footer/index.jsx
@@ -0,0 +1,61 @@
+import React from "react";
+import { DivFooter, CopyRigthSection, Conteudo, Divisao1, ParteSuperior, Divisao2, DivisaoTelefone } from "./styled";
+import { FaPhoneAlt } from "react-icons/fa";
+
+function Footer() {
+  return (
+    <DivFooter>
+      <Conteudo>
+
+        <ParteSuperior>
+          <img src="../src/assets/FamiliaDoSitioBorda.png" className="logo-img"/>
+          <Divisao1>
+            <div className="info1">
+              <ul className="institucional list">
+                <li className="title">INSTITUCIONAL</li>
+                <li><a href="#">• NOSSA HISTÓRIA</a></li>
+                <li><a href="#">• VISITE A FÁBRICA</a></li>
+                <li><a href="#">• TRABALHE CONOSCO</a></li>
+              </ul>
+            </div>
+
+            <div className="info2">
+              <ul className="social-medias list">
+                <li className="title">REDES SOCIAIS</li>
+                <li><a href="https://www.instagram.com/cafedositio/" target="_blank">• INSTAGRAM</a></li>
+                <li><a href="https://www.facebook.com/cafedositio" target="_blank">• FACEBOOK</a></li>
+                <li><a href="https://www.youtube.com/@cafedositio7991" target="_blank">• YOUTUBE</a></li>
+                <li><a href="https://x.com/cafe_do_sitio" target="_blank">• X/TWITTER</a></li>
+                <li><a href="https://www.linkedin.com/company/cafedositio/" target="_blank">• LINKEDIN</a></li>
+              </ul>
+            </div>
+          </Divisao1>
+
+          <Divisao2>
+            <h1 className="title">FALE CONOSCO</h1>
+
+            <DivisaoTelefone>
+              <FaPhoneAlt size={28} color="white"/>
+              <label className="number">(61) 2108-0101</label>
+            </DivisaoTelefone>
+
+            <p>[email protected]</p>
+            <p>Segunda a quinta das 08h às 18h e <br/> Sexta das 08h às 17h</p>
+            <a>Perguntas Frequentes</a>
+          </Divisao2>
+
+        </ParteSuperior>
+
+
+
+        <CopyRigthSection>
+          <p>Café do Sítio Indústria e Comércio Ltda - Todos os direitos reservados <br/> QS 09 RUA 100 LOTE 04 - Taguatinga - Distrito Federal - CNPJ: 00.452.102/0001-48</p>
+          <img src="../src/assets/UnBLogo.png"/>
+        </CopyRigthSection>
+
+      </Conteudo>
+    </DivFooter>
+  );
+}
+
+export default Footer;
diff --git a/apps/frontend/src/components/Footer/styled.js b/apps/frontend/src/components/Footer/styled.js
@@ -0,0 +1,149 @@
+import styled from "styled-components";
+
+export const DivFooter = styled.div`
+  display: flex;
+  flex-direction: column;
+  padding-top: 60px;
+  width: 100%;
+  background: #006343;
+  margin-top: 50px;
+
+  .logo-img{
+    margin-top: -20px;
+    width: 180px;
+    height: auto;
+  }
+`;
+
+export const Conteudo = styled.div`
+  padding-inline: 4.5rem;
+
+  @media (max-width: 850px) {
+    padding-inline: 2vw;
+  }
+`;
+
+export const ParteSuperior = styled.div`
+  display: flex;
+  flex-direction: row;
+  row-gap: 2.0rem;
+  column-gap: 6rem;
+  flex-wrap: wrap;
+  padding-bottom: 2.5rem;
+
+  justify-content: center;
+  border-bottom: 1px solid white;
+`;
+
+export const Divisao1 = styled.div`
+  display: flex;
+  flex-direction: row;
+  gap: 6rem;
+
+  ul {
+    margin: 0px;
+    padding: 0px;
+
+    .title {
+      color: white;
+      font-weight: bold;
+      font-size: 1.0rem;
+      margin-bottom: 15px;
+    }
+  }
+
+  li {
+    list-style: none;
+    margin: 0px;
+
+    a {
+      text-decoration: none;
+      color: white;
+      font-size: 0.8rem;
+
+      &:hover{
+        text-decoration: underline;
+      }
+    }
+  }
+`;
+
+export const Divisao2 = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  color: white;
+
+  .title{
+    color: white;
+    font-weight: bold;
+    font-size: 1.0rem;
+    margin-bottom: 15px;
+    margin: 0px;
+  }
+
+  p {
+    margin: 0px;
+    font-size: 0.8rem;
+  }
+
+  a {
+    &:hover{
+      text-decoration: underline;
+      cursor: pointer;
+    }
+  }
+`;
+
+export const DivisaoTelefone = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 1.0rem;
+
+  label {
+    font-weight: bold;
+    font-size: 2.0rem;
+  }
+`;
+
+export const CopyRigthSection = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+
+  p{
+    color: white;
+    font-size: 1.0rem;
+  }
+
+  img {
+    width: 12.0rem;
+    height: auto;
+  }
+
+  @media (max-width: 1420px) {
+    p {
+      font-size: 0.7rem;
+    }
+
+    img {
+      width: 11.0rem;
+      height: auto;
+    }
+  }
+
+  @media (max-width: 850px) {
+    padding-inline: 2vw;
+
+    p {
+      font-size: 0.5rem;
+    }
+
+    img {
+      width: 9.0rem;
+      height: auto;
+    }
+  }
+`;