Merge pull request #14 from thongdanghoang/feature/SWD-18-GUI-header-…

…footer-Implement feature/SWD-18-GUI-header-footer-Implement
thongdanghoang · May 25, 2024 · cab5e6a · cab5e6a
2 parents 78d30aa + caa9817
commit cab5e6a
Show file tree

Hide file tree

Showing 2 changed files with 108 additions and 3 deletions.
diff --git a/frontend/src/modules/shared/components/footer/AppFooter.scss b/frontend/src/modules/shared/components/footer/AppFooter.scss
@@ -1,5 +1,46 @@
+@import "../../../../assets//styles/variables";
+
 .app-footer {
+  background-color: $app-primary;
+
+  .footer-content {
+    color: $app-quaternary;
+    margin-left: 130px;
+  }
+
+  .footer-versionapp {
+    margin-left: 140px;
+    color: $app-tertiary;
+  }
+
+  .footer-location {
+    margin-right: 140px;
+    color: $app-tertiary;
+  }
+
+  h5 {
+    color: $app-quaternary;
+    padding-bottom: 10px;
+  }
+
+  li {
+    color: $app-tertiary;
+  }
+
+  p {
+    padding-top: 10px;
+    max-width: 360px;
+  }
+
   h1 {
-    color: blue;
+    color: $app-tertiary;
+    font-weight: lighter;
+    font-size: var(--bs-body-font-size);
+  }
+
+  .line {
+    max-width: 1255px;
+    display: block;
+    margin: 0 auto;
   }
-}
+}
diff --git a/frontend/src/modules/shared/components/footer/AppFooter.tsx b/frontend/src/modules/shared/components/footer/AppFooter.tsx
@@ -1,11 +1,75 @@
 import './AppFooter.scss';
 import {ReactElement} from 'react';
+import logo from '@assets/images/logo.svg';
 
 export default function AppFooter(): ReactElement {
   return (
     <>
       <div className="app-footer">
-        <h1>App Footer</h1>
+        <footer className="page-footer font-small blue pt-4">
+          <div className="container-fluid ">
+            <div className="row">
+              <div className="col-md-6 mt-md-0 mt-3">
+                <div className="footer-content">
+                  <h5 className="text-uppercase">
+                    <img src={logo} alt="" />
+                  </h5>
+                  <p>
+                    Morbi cursus porttitor enim lobortis molestie. Duis gravida
+                    turpis dui, eget bibendum magna congue nec.
+                  </p>
+                  <h1>(212)555-0114 hoặc swapme@customerservice.com</h1>
+                </div>
+              </div>
+
+              <hr className="clearfix w-100 d-md-none pb-0" />
+
+              <div className="col-md-3 mb-md-0 mb-3">
+                <ul className="list-unstyled text-end">
+                  <h5 className="text-uppercase">Hỗ trợ khách hàng</h5>
+                  <li>
+                    <a>Trung tâm trợ giúp</a>
+                  </li>
+                  <li>
+                    <a>An toàn mua bán</a>
+                  </li>
+                  <li>
+                    <a>Liên hệ hỗ trợ</a>
+                  </li>
+                </ul>
+              </div>
+
+              <div className="col-md-2 mb-md-0 mb-3">
+                <ul className="list-unstyled text-end text-success">
+                  <h5 className="text-uppercase">Về chúng tôi</h5>
+                  <li>
+                    <a>Giới thiệu</a>
+                  </li>
+                  <li>
+                    <a>Quy chế hoạt động</a>
+                  </li>
+                  <li>
+                    <a>Chính sách bảo mật</a>
+                  </li>
+                  <li>
+                    <a>Giải quyết tranh chấp</a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          <div className="line">
+            <hr />
+          </div>
+        </footer>
+        <div className="d-flex justify-content-between pb-3">
+          <div className="footer-versionapp">Swapme Version 12.03.02</div>
+          <div className="footer-location">
+            Địa chỉ: Đại học FPT _ E2a-7, Đường D1, Phường Long Thạnh Mỹ, Q9,
+            Thành phố Thủ Đức, TP.HCM
+          </div>
+        </div>
       </div>
     </>
   );