refactor

ui/src/pages/Footer/PrivacyPolicy/PrivacyPolicy.module.scss

@@ -1,8 +1,5 @@
 .privacypolicy {
-	padding-top: 50px;
-	padding-left: 100px;
-	padding-right: 100px;
-	padding-bottom: 50px;
+	padding: 64px 10% 64px 10%;
 	display: flex;
 
 	ul {
@@ -15,7 +12,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		padding: 100px;
-		margin-bottom: 50px;
+		padding: 10%;
+		margin-bottom: 64px;
 	}
 }

ui/src/pages/Footer/Terms/Terms.module.scss

@@ -1,8 +1,5 @@
 .terms {
-	padding-top: 50px;
-	padding-left: 100px;
-	padding-right: 100px;
-	padding-bottom: 50px;
+	padding: 64px 10% 64px 10%;
 	display: flex;
 
 	ul {
@@ -15,7 +12,7 @@
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		padding: 100px;
-		margin-bottom: 50px;
+		padding: 10%;
+		margin-bottom: 64px;
 	}
 }

ui/src/pages/Home/Home.module.scss

@@ -1,48 +1,40 @@
 .home {
-	padding-left: 10px;
-	padding-right: 10px;
+	padding: 100px 10% 64px 10%;
 	background: url("/src/assets/grid.svg");
 
-	&__hero {
-		max-width: var(--bt-converter-width);
-		margin: 0 auto;
-		display: block;
-		text-align: center;
+	&__container {
+		display: flex;
 		flex-direction: column;
-		align-items: center;
-		justify-content: center;
+		gap: 50px;
+	}
+
+	&__hero {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
 		gap: var(--bt-size-16);
-		button {
-			align-self: center;
+		&_text {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			justify-content: center;
+			text-align: center;
 		}
 	}
 
 	&__features {
-		align-items: center;
 		display: flex;
+		align-items: center;
 	}
 
-	&__values {
-		text-align: center;
+	&__contribution {
 		display: flex;
 		justify-content: center;
 	}
 
-	&__container {
-		padding: 80px 200px;
-		display: flex;
-		flex-direction: column;
-
-		gap: 100px;
-	}
-
 	@media screen and (max-width: 768px) {
 		&__container {
 			padding: 50px 10px;
 		}
 	}
-	&__contribution {
-		max-width: var(--bt-converter-width);
-		margin: 0 auto;
-	}
 }

ui/src/pages/Home/components/Hero.tsx

@@ -1,25 +1,36 @@
 import React from "react";
 import style from "pages/Home/Home.module.scss";
-import { Typography } from "antd";
+import { Typography, Image } from "antd";
 import { FEATURE_DATA } from "pages/About/utils/constants";
-
+import hero from "assets/home/hero.svg";
 const { Title } = Typography;
 const Hero: React.FC = () => {
 	return (
 		<section className={style.home__hero}>
-			<Title>Your Mate in Software Development</Title>
-			<Typography.Paragraph className={style.about__intro_wrapper_text}>
-				At binarytree.dev, we provide an array of developer productivity
-				tools designed to help you save time. With an{" "}
-				<a
-					href="https://github.com/users/lifeparticle/projects/2"
-					target="_blank"
+			<div className={style.home__hero_text}>
+				<Title>Your Mate in Software Development</Title>
+				<Typography.Paragraph
+					className={style.about__intro_wrapper_text}
 				>
-					ever-growing number of features
-				</a>{" "}
-				(currently <b>{FEATURE_DATA.length}</b>), our platform is
-				constantly evolving to meet the needs of developers like you
-			</Typography.Paragraph>
+					At binarytree.dev, we provide an array of developer
+					productivity tools designed to help you save time. With an{" "}
+					<a
+						href="https://github.com/users/lifeparticle/projects/2"
+						target="_blank"
+					>
+						ever-growing number of features
+					</a>{" "}
+					(currently <b>{FEATURE_DATA.length}</b>), our platform is
+					constantly evolving to meet the needs of developers like you
+				</Typography.Paragraph>
+			</div>
+			<Image
+				src={hero}
+				alt="BinaryTree: Developer Productivity Tools"
+				className={style.home__hero_image}
+				height={400}
+				preview={false}
+			/>
 		</section>
 	);
 };