diff --git a/ui/src/assets/home/hero.svg b/ui/src/assets/home/hero.svg
new file mode 100644
index 00000000..4d0a278d
--- /dev/null
+++ b/ui/src/assets/home/hero.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/ui/src/pages/Footer/PrivacyPolicy/PrivacyPolicy.module.scss b/ui/src/pages/Footer/PrivacyPolicy/PrivacyPolicy.module.scss
index e0adfe38..d923e594 100644
--- a/ui/src/pages/Footer/PrivacyPolicy/PrivacyPolicy.module.scss
+++ b/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;
}
}
diff --git a/ui/src/pages/Footer/Terms/Terms.module.scss b/ui/src/pages/Footer/Terms/Terms.module.scss
index aaa5a139..e1cb2f90 100644
--- a/ui/src/pages/Footer/Terms/Terms.module.scss
+++ b/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;
}
}
diff --git a/ui/src/pages/Home/Home.module.scss b/ui/src/pages/Home/Home.module.scss
index 620e141a..8aae347a 100644
--- a/ui/src/pages/Home/Home.module.scss
+++ b/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;
- }
}
diff --git a/ui/src/pages/Home/components/Hero.tsx b/ui/src/pages/Home/components/Hero.tsx
index b88032cd..006294c2 100644
--- a/ui/src/pages/Home/components/Hero.tsx
+++ b/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 (
- Your Mate in Software Development
-
- At binarytree.dev, we provide an array of developer productivity
- tools designed to help you save time. With an{" "}
-
+ Your Mate in Software Development
+
- ever-growing number of features
- {" "}
- (currently {FEATURE_DATA.length}), our platform is
- constantly evolving to meet the needs of developers like you
-
+ At binarytree.dev, we provide an array of developer
+ productivity tools designed to help you save time. With an{" "}
+
+ ever-growing number of features
+ {" "}
+ (currently {FEATURE_DATA.length}), our platform is
+ constantly evolving to meet the needs of developers like you
+
+
+
);
};