diff --git a/src/App.tsx b/src/App.tsx index a03ba17..a136612 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,14 +1,15 @@ // Modules -import { Routes, Route } from "react-router-dom"; +import { Routes, Route } from 'react-router-dom'; // Styles -import "./styles/style.scss"; +import './styles/style.scss'; // Pages -import Main from "./pages/Main"; +import Main from './pages/Main'; // Static -import Header from "./components/header/Header"; +import Header from './components/header/Header'; +import Footer from './components/footer/Footer'; const App = () => { return ( @@ -17,6 +18,7 @@ const App = () => { } /> + ); }; diff --git a/src/assets/icons/mail-white.svg b/src/assets/icons/mail-white.svg new file mode 100644 index 0000000..b550a40 --- /dev/null +++ b/src/assets/icons/mail-white.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/navigation-white.svg b/src/assets/icons/navigation-white.svg new file mode 100644 index 0000000..6c189b3 --- /dev/null +++ b/src/assets/icons/navigation-white.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/phone-white.svg b/src/assets/icons/phone-white.svg new file mode 100644 index 0000000..6b25b7b --- /dev/null +++ b/src/assets/icons/phone-white.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx new file mode 100644 index 0000000..9be2baf --- /dev/null +++ b/src/components/footer/Footer.tsx @@ -0,0 +1,63 @@ +// Modules +import { Link } from 'react-router-dom'; + +// Icons +import { ReactComponent as Phone } from '../../assets/icons/phone-white.svg'; +import { ReactComponent as Mail } from '../../assets/icons/mail-white.svg'; +import { ReactComponent as Navigation } from '../../assets/icons/navigation-white.svg'; + +const Footer = () => { + return ( + + ); +}; + +export default Footer; diff --git a/src/styles/_footer.scss b/src/styles/_footer.scss new file mode 100644 index 0000000..ac16fbc --- /dev/null +++ b/src/styles/_footer.scss @@ -0,0 +1,61 @@ +.footer { + padding: 6.4rem; + background: $main; +} + +.footer-inner { + display: grid; + grid-template-columns: 1fr auto 1fr; + gap: 3.2rem; + justify-content: space-between; +} + +.footer-left, +.footer-mid, +.footer-right { + justify-self: flex-start; +} + +.footer-left { + ul { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 1.6rem; + a { + color: $white; + font-size: 1.6rem; + } + } +} + +.footer-list { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 1.6rem; +} + +.footer-list-item { + display: flex; + align-items: flex-start; + gap: 2.4rem; + svg { + width: 2.4rem; + height: 2.4rem; + } + + a, + p { + color: $white; + font-size: 1.6rem; + line-height: 2.2rem; + } +} + +.footer-list-inner { + display: flex; + flex-direction: column; + align-items: flex-start; + gap: 1.6rem; +} diff --git a/src/styles/style.scss b/src/styles/style.scss index 5e7e00b..57dcda3 100644 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -1,3 +1,4 @@ -@import "./variables"; -@import "./general"; -@import "./header"; +@import './variables'; +@import './general'; +@import './header'; +@import './footer';