diff --git a/ui/src/components/Hoc/withPageTitle/withPageTitle.tsx b/ui/src/components/Hoc/withPageTitle/withPageTitle.tsx index ec4ed894..f9b68a49 100644 --- a/ui/src/components/Hoc/withPageTitle/withPageTitle.tsx +++ b/ui/src/components/Hoc/withPageTitle/withPageTitle.tsx @@ -10,12 +10,17 @@ const NO_PADDING = [ "About", "Terms", "Cookie Policy", + "Privacy Policy", + "Feedback", ]; const NO_TITLE = [ "BinaryTree: Developer Productivity Tools", "Terms", "Cookie Policy", + "Privacy Policy", + "About", + "Feedback", ]; const withPageTitle = ( diff --git a/ui/src/pages/About/About.module.scss b/ui/src/pages/About/About.module.scss index cae15e61..0a7550c9 100644 --- a/ui/src/pages/About/About.module.scss +++ b/ui/src/pages/About/About.module.scss @@ -1,51 +1,55 @@ .about { - margin: 0 auto; - max-width: var(--bt-converter-width); - margin-bottom: 100px; - padding-left: 10px; - padding-right: 10px; + padding: 64px 10% 64px 10%; - &__container { - display: flex; - flex-direction: column; - gap: var(--bt-size-20); - } - - &__intro { - position: relative; - min-height: 250px; + &__card { + margin: 0 auto; + max-width: var(--bt-converter-width); + margin-bottom: 100px; + padding-left: 10px; + padding-right: 10px; - &_wrapper { - position: absolute; - top: 0; - bottom: 0; - left: 10%; - right: 10%; + &__container { display: flex; - align-items: center; - justify-content: center; - z-index: 1; + flex-direction: column; + gap: var(--bt-size-20); + } + + &__intro { + position: relative; + min-height: 250px; + + &_wrapper { + position: absolute; + top: 0; + bottom: 0; + left: 10%; + right: 10%; + display: flex; + align-items: center; + justify-content: center; + z-index: 1; - &_text { - background-color: var(--bt-color-bg); - padding: var(--bt-size-10); - text-align: center; - color: white; - max-width: 80vw; + &_text { + background-color: var(--bt-color-bg); + padding: var(--bt-size-10); + text-align: center; + color: white; + max-width: 80vw; + } } - } - &_img { - width: 100%; - height: 250px; - object-fit: cover; - background-color: #71727e; + &_img { + width: 100%; + height: 250px; + object-fit: cover; + background-color: #71727e; + } } - } - &__socials { - display: flex; - justify-content: center; - margin-top: var(--bt-size-20); + &__socials { + display: flex; + justify-content: center; + margin-top: var(--bt-size-20); + } } } diff --git a/ui/src/pages/About/index.tsx b/ui/src/pages/About/index.tsx index 8fb914d6..5bed0c8c 100644 --- a/ui/src/pages/About/index.tsx +++ b/ui/src/pages/About/index.tsx @@ -14,88 +14,91 @@ import Footer from "components/Layouts/Footer"; const About = () => { return ( <> - -
- - 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. - + 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. + +
+ about + window.open( + "https://unsplash.com/photos/AaqI2ao96KM", + "_blank" + ) + } + />
- about - window.open( - "https://unsplash.com/photos/AaqI2ao96KM", - "_blank" - ) - } + } + > +
+ Values
} + bordered + dataSource={APP_VALUES} + renderItem={(item) => ( + + {item} + + )} /> - - } - > -
- Values
} - bordered - dataSource={APP_VALUES} - renderItem={(item) => ( - - {item} - - )} - /> - - "Features"} - bordered - scroll={{ x: "calc(50%)" }} - /> -
"Others"} - scroll={{ x: "calc(50%)" }} - bordered - /> +
"Features"} + bordered + scroll={{ x: "calc(50%)" }} + /> - Support} - bordered - dataSource={APP_SUPPORT} - renderItem={(item) => ( - - {item} - - )} - /> - - +
"Others"} + scroll={{ x: "calc(50%)" }} + bordered + /> + Support} + bordered + dataSource={APP_SUPPORT} + renderItem={(item) => ( + + {item} + + )} + /> + + +
); diff --git a/ui/src/pages/Feedback/Feedback.module.scss b/ui/src/pages/Feedback/Feedback.module.scss index 56bb23f2..bd08d29d 100644 --- a/ui/src/pages/Feedback/Feedback.module.scss +++ b/ui/src/pages/Feedback/Feedback.module.scss @@ -1,4 +1,5 @@ .feedback { + padding: 64px 0 64px 0; display: flex; justify-content: center; flex-direction: column; diff --git a/ui/src/pages/Routes/utils/constant.tsx b/ui/src/pages/Routes/utils/constant.tsx index 176453d6..4c73dbde 100644 --- a/ui/src/pages/Routes/utils/constant.tsx +++ b/ui/src/pages/Routes/utils/constant.tsx @@ -333,7 +333,7 @@ export const routes: Route[] = [ { id: "privacypolicy", path: "/privacy-policy", - title: "", + title: "Privacy Policy", description: "", component: PrivacyPolicy, },