From a9749f948b57c46d4144257942a89d2a8924b80b Mon Sep 17 00:00:00 2001
From: ashik-75 <ashikex49@gmail.com>
Date: Sun, 24 Sep 2023 17:08:25 +0600
Subject: [PATCH] add footer

---
 .../Layouts/Footer/Footer.module.scss         |  41 ++---
 ui/src/components/Layouts/Footer/index.tsx    | 165 +++++++++++++-----
 ui/src/styles/sizes.css                       |   1 +
 3 files changed, 133 insertions(+), 74 deletions(-)

diff --git a/ui/src/components/Layouts/Footer/Footer.module.scss b/ui/src/components/Layouts/Footer/Footer.module.scss
index 26b29285..9b28c5cf 100644
--- a/ui/src/components/Layouts/Footer/Footer.module.scss
+++ b/ui/src/components/Layouts/Footer/Footer.module.scss
@@ -1,36 +1,21 @@
 .footer {
-	margin-top: var(--bt-size-20);
-	margin-left: calc(var(--bt-size-10) * -1);
-	margin-right: calc(var(--bt-size-10) * -1);
-	padding: var(--bt-size-10);
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
+	padding: var(--bt-size-50);
 
 	&__left {
-		display: flex;
-		align-items: center;
-		gap: var(--bt-size-20);
-		&_list {
-			list-style-type: none;
-			display: flex;
-			gap: var(--bt-size-10);
-			padding: 0px;
-		}
+		border-right: 1px solid #e8e8e8;
+		height: "100%";
 	}
 
-	@media (max-width: 767px) {
-		gap: var(--bt-size-10);
-		flex-direction: column;
-		align-items: center;
-		justify-items: center;
-
-		&__left {
-			display: flex;
-			flex-direction: column;
-			justify-items: center;
-			align-items: center;
-			gap: var(--bt-size-10);
+	&__list {
+		list-style-type: none;
+		li {
+			margin: var(--bt-size-10) 0px;
+			a {
+				text-decoration: none;
+				font-size: var(--bt-size-18);
+			}
 		}
+
+		padding: 0px;
 	}
 }
diff --git a/ui/src/components/Layouts/Footer/index.tsx b/ui/src/components/Layouts/Footer/index.tsx
index 1940c071..c4a141e6 100644
--- a/ui/src/components/Layouts/Footer/index.tsx
+++ b/ui/src/components/Layouts/Footer/index.tsx
@@ -1,10 +1,15 @@
-import React from "react";
+import React, { useContext } from "react";
 import style from "./Footer.module.scss";
 import Icon from "components/General/Icon";
-import { Typography, theme } from "antd";
+import { Col, Row, Space, Typography, theme } from "antd";
 import { ResponsiveButton } from "components/General/FormComponents";
+import { Link } from "react-router-dom";
+import logo_light from "assets/logo_light.svg";
+import logo_dark from "assets/logo_dark.svg";
+import { DarkModeContext } from "lib/utils/context/DarkModeProvider";
 
 const Footer: React.FC = () => {
+	const { isDarkMode } = useContext(DarkModeContext);
 	const {
 		token: { colorBgContainer },
 	} = theme.useToken();
@@ -14,52 +19,120 @@ const Footer: React.FC = () => {
 			className={style.footer}
 			style={{ backgroundColor: colorBgContainer }}
 		>
-			<div className={style.footer__left}>
-				<div className={style.footer__left_year}>
-					<Typography.Text>
-						&copy; {new Date().getFullYear()} Binarytree
-					</Typography.Text>
-				</div>
-				<ul className={style.footer__left_list}>
-					<li>
-						<a
-							href="https://github.com/lifeparticle/binarytree/blob/main/CODE_OF_CONDUCT.md"
-							target="_blank"
-						>
-							Code of Conduct
-						</a>
-					</li>
+			<Row gutter={[120, 16]}>
+				<Col xs={24} lg={6} className={style.footer__left}>
+					<Space direction="vertical" size={"large"}>
+						<Space>
+							<Link to={"/"}>
+								<img
+									src={isDarkMode ? logo_dark : logo_light}
+									height={60}
+									width={60}
+								/>
+							</Link>
+							<Typography.Title level={4}>
+								Binarytree
+							</Typography.Title>
+						</Space>
+						<ResponsiveButton
+							key="Github"
+							type="default"
+							shape="circle"
+							icon={<Icon name="Github" />}
+							onClick={() =>
+								window.open(
+									"https://github.com/lifeparticle/binarytree",
+									"_blank",
+									"noopener"
+								)
+							}
+						/>
 
-					<li>
-						<a href="#">Privacy</a>
-					</li>
-					<li>
-						<a href="#">Terms</a>
-					</li>
-					<li>
-						<a href="https://github.com/lifeparticle/binarytree#status">
-							Status
-						</a>
-					</li>
-					<li>
-						<a href="/about">About</a>
-					</li>
-				</ul>
-			</div>
+						<Typography.Text>
+							&copy; {new Date().getFullYear()} Binarytree
+						</Typography.Text>
+					</Space>
+				</Col>
 
-			<ResponsiveButton
-				key="Github"
-				type="default"
-				shape="circle"
-				icon={<Icon name="Github" />}
-				onClick={() =>
-					window.open(
-						"https://github.com/lifeparticle/binarytree",
-						"_blank",
-						"noopener"
-					)
-				}
-			/>
+				<Col xs={24} lg={18}>
+					<Row gutter={[16, 16]}>
+						<Col xs={24} lg={6}>
+							<Typography.Title level={4}>
+								Product
+							</Typography.Title>
+							<ul className={style.footer__list}>
+								<li>
+									<a
+										href="https://github.com/users/lifeparticle/projects/2"
+										target="_blank"
+									>
+										Roadmap
+									</a>
+								</li>
+							</ul>
+						</Col>
+
+						<Col xs={24} lg={6}>
+							<Typography.Title level={4}>
+								Developers
+							</Typography.Title>
+							<ul className={style.footer__list}>
+								<li>
+									<a
+										href="https://github.com/lifeparticle/binarytree/blob/main/CODE_OF_CONDUCT.md"
+										target="_blank"
+									>
+										Code of Conduct
+									</a>
+								</li>
+								<li>
+									<a
+										href="https://github.com/lifeparticle/binarytree#status"
+										target="_blank"
+									>
+										Status
+									</a>
+								</li>
+							</ul>
+						</Col>
+
+						<Col xs={24} lg={6}>
+							<Typography.Title level={4}>
+								Company
+							</Typography.Title>
+							<ul className={style.footer__list}>
+								<li>
+									<a href="/about">About</a>
+								</li>
+								{/* <li>
+									<a
+										href="#"
+										target="_blank"
+									>
+										Blog
+									</a>
+								</li> */}
+							</ul>
+						</Col>
+
+						<Col xs={24} lg={6}>
+							<Typography.Title level={4}>Legal</Typography.Title>
+							<ul className={style.footer__list}>
+								<li>
+									<a href="#">Terms</a>
+								</li>
+								<li>
+									<a href="#">Privacy</a>
+								</li>
+
+								<li>
+									<a href="/cookie-policy">Cookie Policy</a>
+								</li>
+							</ul>
+						</Col>
+					</Row>
+				</Col>
+			</Row>
 		</div>
 	);
 };
diff --git a/ui/src/styles/sizes.css b/ui/src/styles/sizes.css
index 7490111e..1cf6da20 100644
--- a/ui/src/styles/sizes.css
+++ b/ui/src/styles/sizes.css
@@ -18,6 +18,7 @@
 	--bt-size-11: 11px;
 	--bt-size-15: 15px;
 	--bt-size-16: 16px;
+	--bt-size-18: 18px;
 	--bt-size-20: 20px;
 	--bt-size-24: 24px;
 	--bt-size-30: 30px;