Add social links

aelassas · Dec 7, 2024 · 599f72d · 599f72d
1 parent 075db75
commit 599f72d
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 1 deletion.
diff --git a/frontend/src/assets/css/footer.css b/frontend/src/assets/css/footer.css
@@ -57,6 +57,7 @@ div.footer div.contact {
   display: flex;
   flex-direction: row;
   align-items: center;
+  margin: 10px 0;
 }
 
 div.footer div.contact .icon {
@@ -72,6 +73,11 @@ div.footer div.contact a:hover {
   opacity: 0.85;
 }
 
+div.footer div.contact .social-icon {
+  color: #525252;
+  margin-right: 12px;
+}
+
 div.footer section.payment {
   width: 100%;
   display: flex;

diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx
@@ -1,6 +1,13 @@
 import React from 'react'
 import { useNavigate } from 'react-router-dom'
-import { MailOutline } from '@mui/icons-material'
+import { Link } from '@mui/material'
+import {
+  MailOutline,
+  FacebookTwoTone as FacebookIcon,
+  X,
+  LinkedIn,
+  Instagram,
+} from '@mui/icons-material'
 import { strings } from '@/lang/footer'
 
 import SecurePayment from '@/assets/img/secure-payment.png'
@@ -38,6 +45,12 @@ const Footer = () => {
             <MailOutline className="icon" />
             <a href="mailto:info@bookcars.ma">info@bookcars.ma</a>
           </div>
+          <div className="contact">
+            <Link href="https://www.facebook.com/" target="_blank"><FacebookIcon className="social-icon" /></Link>
+            <Link href="https://x.com/" target="_blank"><X className="social-icon" /></Link>
+            <Link href="https://www.linkedin.com/" target="_blank"><LinkedIn className="social-icon" /></Link>
+            <Link href="https://www.instagram.com/" target="_blank"><Instagram className="social-icon" /></Link>
+          </div>
         </div>
       </section>
       <section className="payment">