From 8b6dcf7caa49adeb0f67842bdbd53b4eafd53b23 Mon Sep 17 00:00:00 2001
From: moh1med <mohamedch047@gmail.com>
Date: Thu, 19 Oct 2023 17:16:17 +0100
Subject: [PATCH 1/4] feat: create footer

---
 src/components/footer/Footer.jsx | 67 ++++++++++++++++++++++++++++++--
 1 file changed, 64 insertions(+), 3 deletions(-)

diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx
index cabb7e0..37e69cb 100644
--- a/src/components/footer/Footer.jsx
+++ b/src/components/footer/Footer.jsx
@@ -1,5 +1,66 @@
-function Footer() {
-    return <div className='h-48 w-full'>Footer</div>;
-}
+import React from "react";
+
+const Footer = () => {
+    return (
+        <footer className='bg-green text-white'>
+            <div className='container mx-auto flex justify-center items-center flex-wrap p-8'>
+                {/* Logo */}
+                <div className='mx-4 mb-4 mr-8 border '>
+                    <img src='/path/to/logo.png' alt='Logo' className='w-20 ' />
+                </div>
+
+                {/* Columns */}
+                <div className='flex flex-wrap flex-col lg:flex-row justify-center lg:justify-between w-full max-w-4xl'>
+                    {/* First Column */}
+                    <div className='flex flex-col mx-4 mb-4'>
+                        <a
+                            href='#'
+                            className='text-white hover:text-black mb-1'
+                        >
+                            About us
+                        </a>
+                        <a
+                            href='#'
+                            className='text-white hover:text-black mb-1'
+                        >
+                            Blogs
+                        </a>
+                        <a
+                            href='#'
+                            className='text-white hover:text-black mb-1'
+                        >
+                            Listed items
+                        </a>
+                    </div>
+
+                    {/* Second Column */}
+                    <div cclassName='flex items-center mx-4 mb-4'>
+                        <h2>Contact us</h2>
+                        <a href='#' className='text-black hover:text-white'>
+                            <i className='fa-facebook'></i>
+                        </a>
+                        <a href='#' className='text-black hover:text-white'>
+                            <i className=' fa-twitter'></i>
+                        </a>
+                        <a href='#' className='text-black hover:text-white'>
+                            <i className='fa-instagram'></i>
+                        </a>
+                        <a href='#' className='text-black hover:text-white'>
+                            <i className=' fa-linkedin'></i>
+                        </a>
+                    </div>
+
+                    {/* Third Column */}
+                    <div className='mx-4 mb-4'>
+                        <h2>Adress</h2>
+                        <p className='text-gray-300'>
+                            123 Street, City, Country
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </footer>
+    );
+};
 
 export default Footer;

From 5e458f9f2bbfb1d549dc8a472f5bc593c16f71a8 Mon Sep 17 00:00:00 2001
From: moh1med <mohamedch047@gmail.com>
Date: Thu, 19 Oct 2023 17:42:39 +0100
Subject: [PATCH 2/4] feat: add logo , social media icons , make footer
 responsive

---
 public/Logo/logo.png             | Bin 0 -> 2188 bytes
 src/components/footer/Footer.jsx |  47 +++++++++++++++++++++----------
 2 files changed, 32 insertions(+), 15 deletions(-)
 create mode 100644 public/Logo/logo.png

diff --git a/public/Logo/logo.png b/public/Logo/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..9c42678094312c4c54af838f29632331c1edd5f0
GIT binary patch
literal 2188
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
O0000<MNUMnLSTZY;0B%m

literal 0
HcmV?d00001

diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx
index 37e69cb..1ee8142 100644
--- a/src/components/footer/Footer.jsx
+++ b/src/components/footer/Footer.jsx
@@ -1,12 +1,18 @@
 import React from "react";
+import {
+    BiLogoFacebookSquare,
+    BiLogoInstagram,
+    BiLogoLinkedinSquare,
+    BiSolidShareAlt,
+} from "react-icons/bi";
 
 const Footer = () => {
     return (
         <footer className='bg-green text-white'>
             <div className='container mx-auto flex justify-center items-center flex-wrap p-8'>
                 {/* Logo */}
-                <div className='mx-4 mb-4 mr-8 border '>
-                    <img src='/path/to/logo.png' alt='Logo' className='w-20 ' />
+                <div className='mx-4 mb-4 mr-8 '>
+                    <img src='./Logo/logo.png' alt='Logo' className='w-20 ' />
                 </div>
 
                 {/* Columns */}
@@ -34,20 +40,31 @@ const Footer = () => {
                     </div>
 
                     {/* Second Column */}
-                    <div cclassName='flex items-center mx-4 mb-4'>
+                    <div className='flex flex-col items-center mx-4 mb-4'>
                         <h2>Contact us</h2>
-                        <a href='#' className='text-black hover:text-white'>
-                            <i className='fa-facebook'></i>
-                        </a>
-                        <a href='#' className='text-black hover:text-white'>
-                            <i className=' fa-twitter'></i>
-                        </a>
-                        <a href='#' className='text-black hover:text-white'>
-                            <i className='fa-instagram'></i>
-                        </a>
-                        <a href='#' className='text-black hover:text-white'>
-                            <i className=' fa-linkedin'></i>
-                        </a>
+                        <div className='flex w-full space-x-2  p-2'>
+                            <a href='#' className='text-white hover:text-black'>
+                                <BiLogoFacebookSquare className='w-6 h-6' />
+                            </a>
+                            <a
+                                href='#'
+                                className='text-white hover:text-black '
+                            >
+                                <BiLogoInstagram className='w-6 h-6' />
+                            </a>
+                            <a
+                                href='#'
+                                className='text-white hover:text-black '
+                            >
+                                <BiLogoLinkedinSquare className='w-6 h-6' />
+                            </a>
+                            <a
+                                href='#'
+                                className='text-white hover:text-black '
+                            >
+                                <BiSolidShareAlt className='w-6 h-6' />
+                            </a>
+                        </div>
                     </div>
 
                     {/* Third Column */}

From b8be8b5bbe06749c728d8567f25fbd44ea0d8fb7 Mon Sep 17 00:00:00 2001
From: moh1med <mohamedch047@gmail.com>
Date: Sat, 21 Oct 2023 16:32:01 +0100
Subject: [PATCH 3/4] feat: make it responsive with mobile version and fix
 margin

---
 src/components/footer/Footer.jsx | 43 ++++++++++++++------------------
 1 file changed, 19 insertions(+), 24 deletions(-)

diff --git a/src/components/footer/Footer.jsx b/src/components/footer/Footer.jsx
index 1ee8142..23ee8ad 100644
--- a/src/components/footer/Footer.jsx
+++ b/src/components/footer/Footer.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import Image from "next/image";
 import {
     BiLogoFacebookSquare,
     BiLogoInstagram,
@@ -8,17 +8,21 @@ import {
 
 const Footer = () => {
     return (
-        <footer className='bg-green text-white'>
-            <div className='container mx-auto flex justify-center items-center flex-wrap p-8'>
+        <footer className='bg-green text-white p-8'>
+            <div className='mx-auto flex flex-col items-center sm:flex-col lg:flex-row'>
                 {/* Logo */}
-                <div className='mx-4 mb-4 mr-8 '>
-                    <img src='./Logo/logo.png' alt='Logo' className='w-20 ' />
+                <div className='mx-2 mb-4 '>
+                    <Image
+                        src='/Logo/logo.png'
+                        alt='Logo'
+                        width={80}
+                        height={80}
+                    />
                 </div>
-
                 {/* Columns */}
-                <div className='flex flex-wrap flex-col lg:flex-row justify-center lg:justify-between w-full max-w-4xl'>
+                <div className='flex flex-col sm:flex-row lg:flex-row justify-between px-10 mx-auto w-full'>
                     {/* First Column */}
-                    <div className='flex flex-col mx-4 mb-4'>
+                    <div className='flex flex-col items-center sm:mx-2 sm:mb-4'>
                         <a
                             href='#'
                             className='text-white hover:text-black mb-1'
@@ -40,36 +44,27 @@ const Footer = () => {
                     </div>
 
                     {/* Second Column */}
-                    <div className='flex flex-col items-center mx-4 mb-4'>
+                    <div className='flex flex-col items-center sm:mx-4 sm:mb-4'>
                         <h2>Contact us</h2>
-                        <div className='flex w-full space-x-2  p-2'>
+                        <div className='flex items-center space-x-2 p-2'>
                             <a href='#' className='text-white hover:text-black'>
                                 <BiLogoFacebookSquare className='w-6 h-6' />
                             </a>
-                            <a
-                                href='#'
-                                className='text-white hover:text-black '
-                            >
+                            <a href='#' className='text-white hover:text-black'>
                                 <BiLogoInstagram className='w-6 h-6' />
                             </a>
-                            <a
-                                href='#'
-                                className='text-white hover:text-black '
-                            >
+                            <a href='#' className='text-white hover:text-black'>
                                 <BiLogoLinkedinSquare className='w-6 h-6' />
                             </a>
-                            <a
-                                href='#'
-                                className='text-white hover:text-black '
-                            >
+                            <a href='#' className='text-white hover:text-black'>
                                 <BiSolidShareAlt className='w-6 h-6' />
                             </a>
                         </div>
                     </div>
 
                     {/* Third Column */}
-                    <div className='mx-4 mb-4'>
-                        <h2>Adress</h2>
+                    <div className='mx-4 items-center flex-col flex mb-4'>
+                        <h2>Address</h2>
                         <p className='text-gray-300'>
                             123 Street, City, Country
                         </p>

From a6aa597f8c9d1fdcc40cba9145f4c339dfb195d3 Mon Sep 17 00:00:00 2001
From: ismailbenlaredj <yako_is@yahoo.fr>
Date: Sun, 22 Oct 2023 10:38:45 +0100
Subject: [PATCH 4/4] refactor(footer): change  footer placement in the layout 
 to fit the screen width

---
 src/layout/Layout.jsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/layout/Layout.jsx b/src/layout/Layout.jsx
index 0cc1e4a..2521e80 100644
--- a/src/layout/Layout.jsx
+++ b/src/layout/Layout.jsx
@@ -3,10 +3,12 @@ import Navbar from "@/components/navbar/Navbar";
 
 export default function Layout({ children }) {
     return (
-        <div className='container mx-auto '>
-            <Navbar />
-            {children}
+        <>
+            <div className='container mx-auto '>
+                <Navbar />
+                {children}
+            </div>
             <Footer />
-        </div>
+        </>
     );
 }