From 7406b1c27c2696630ed87da11c4e7f0b963c3534 Mon Sep 17 00:00:00 2001
From: Gogi4aaa <georgi-07@abv.bg>
Date: Sun, 20 Oct 2024 15:16:39 +0300
Subject: [PATCH] added Home page footer

---
 client/src/components/Home.tsx          |  2 ++
 client/src/components/layout/Footer.css | 41 +++++++++++++++++++++++
 client/src/components/layout/Footer.tsx | 44 +++++++++++++++++++++++++
 3 files changed, 87 insertions(+)
 create mode 100644 client/src/components/layout/Footer.css
 create mode 100644 client/src/components/layout/Footer.tsx

diff --git a/client/src/components/Home.tsx b/client/src/components/Home.tsx
index 8b36b68..06b4659 100644
--- a/client/src/components/Home.tsx
+++ b/client/src/components/Home.tsx
@@ -5,6 +5,7 @@ import CarouselSlider from "./layout/CarouselSlider";
 import StoresPage from "@/app/store";
 import { useEffect } from "react";
 import { Cookies } from "react-cookie"
+import Footer from "./layout/Footer";
 function HomePage() {
   useEffect(() => {
     const cookies = new Cookies();
@@ -20,6 +21,7 @@ function HomePage() {
       <HNavbar />
       <CarouselSlider />
       <StoresPage />
+      <Footer />
     </div>
   );
 }
diff --git a/client/src/components/layout/Footer.css b/client/src/components/layout/Footer.css
new file mode 100644
index 0000000..817bbc9
--- /dev/null
+++ b/client/src/components/layout/Footer.css
@@ -0,0 +1,41 @@
+.footer{
+    background: rgb(153,147,235);
+    min-height: 290px;
+}
+/* .footer-inside{
+    width: 50%;
+    height:100%;
+    margin: 0 auto;
+    display: flex;
+    justify-content:space-between;
+    align-items:center;
+}*/
+.footer-inside { 
+    display: flex; /* Aligns the divs horizontally */
+    justify-content: space-between; /* Adds spacing between the columns */
+    padding: 20px;
+    width: 50%;
+    height:100%;
+    margin: 0 auto;
+    align-items:center;
+}
+.footer-section{
+    color: white;
+    height:120px;
+}
+.footer-section h4{
+    margin-bottom: 10px;
+}
+.footer-section ul li a{
+    cursor: pointer;
+}
+@media only screen and (max-width: 1024px) {
+    .footer-inside { 
+        width:70%;
+    }
+}
+@media only screen and (max-width: 768px) {
+    .footer-inside { 
+        width:100%;
+    }
+}
diff --git a/client/src/components/layout/Footer.tsx b/client/src/components/layout/Footer.tsx
new file mode 100644
index 0000000..a94b6c3
--- /dev/null
+++ b/client/src/components/layout/Footer.tsx
@@ -0,0 +1,44 @@
+import "./Footer.css";
+import Link from "next/link";
+const Footer = () => {
+    return (
+        <div className="footer">
+            <div className="footer-inside">
+                <div className="footer-section">
+                    <h4>Buying</h4>
+                    <ul>
+                        <li><Link href={"/"}>Link</Link></li>
+                        <li><Link href={"/"}>Link</Link></li>
+                        <li><Link href={"/"}>Link</Link></li>
+                        <li><Link href={"/"}>Link</Link></li>
+                    </ul>
+                </div>
+                <div className="footer-section">
+                    <h4>Selling</h4>
+                    <ul>
+                        <li><Link href={"/"}>Link</Link></li>
+                        <li><Link href={"/"}>Link</Link></li>
+                        <li><Link href={"/"}>Link</Link></li>
+                        <li><Link href={"/"}>Link</Link></li>
+                    </ul>
+                </div>
+                <div className="footer-section">
+                    <h4>Company</h4>
+                    <ul>
+                        <li><Link href={"/about"}>About</Link></li>
+                        <li><Link href={"/"}>Careers</Link></li>
+                    </ul>
+                </div>
+                <div className="footer-section">
+                    <h4>Help</h4>
+                    <ul>
+                        <li><Link href={"/"}>FAQs</Link></li>
+                        <li><Link href={"/"}>Live Chat</Link></li>
+                        <li><Link href={"/"}>Contact Us</Link></li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    )
+}
+export default Footer;
\ No newline at end of file