Add font, change home page content and styles for it

bn-digital · May 23, 2024 · fb4a95b · fb4a95b
1 parent f9afcbd
commit fb4a95b
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 15 deletions.
diff --git a/src/components/header/Header.scss b/src/components/header/Header.scss
@@ -13,6 +13,7 @@
       align-items: center;
       gap: 8px;
       line-height: 1.5;
+      font-family: "Inter Bold";
       font-weight: 700;
       letter-spacing: 0.02em;
       color: #101012;

diff --git a/src/components/themeContext/index.tsx b/src/components/themeContext/index.tsx
@@ -37,7 +37,6 @@ export const theme : ThemeConfig = {
   },
   token: {
     colorPrimary: "#4169F6",
-    fontFamily: "Inter, sans-serif",
     colorBgLayout: "#F9F8FA",
   }
 }

diff --git a/src/pages/home/HomePage.tsx b/src/pages/home/HomePage.tsx
@@ -1,15 +1,19 @@
 import {Button, Typography} from "antd";
 import {useNavigate} from "react-router-dom";
 
-const {Title} = Typography
+const {Title, Paragraph} = Typography
 
 const HomePage = () => {
     const navigate = useNavigate()
     return (
-        <div>
-            <Title>{'Welcome to Mortgage Mathematics'}</Title>
-            <Button style={{minWidth: 150}} size={'large'} type={'primary'} onClick={()=>navigate('/form/1')}>{'Start'}</Button>
-        </div>
+        <section>
+          <div className={'container'}>
+            <Paragraph className={'subtitle'}>{'Ready to start'}</Paragraph>
+            <Title level={2}>{'Ready to find your refinance options?'}</Title>
+            <Paragraph className={'description'}>{'To start, find your latest mortgage statement. This will give you the numbers you need to fill the fields in the calculator.'}</Paragraph>
+            <Button type={'primary'} onClick={()=>navigate('/form/1')}>{'Start'}</Button>
+          </div>
+        </section>
     );
 };
 

diff --git a/src/styles/global.scss b/src/styles/global.scss
@@ -1,11 +1,26 @@
 //.ant-layout {
 //    background: none;
 //}
-//.container {
-//    max-width: 1200px;
-//    margin: 0 auto;
-//    height: 100%;
-//}
+.container {
+  max-width: 960px;
+  height: 100%;
+  margin: 0 auto;
+  padding: 200px 176px 100px 144px;
+}
+
+.subtitle.ant-typography {
+  margin-bottom: 16px;
+  color: #8D8D8F;
+}
+
+.description.ant-typography {
+  max-width: 416px;
+  margin-bottom: 32px;
+
+}
+
+
+
 //button.ant-btn-text {
 //    border: none;
 //    background: none;

diff --git a/src/styles/index.css b/src/styles/index.css
@@ -1,3 +1,21 @@
+@font-face {
+  font-family: 'Inter Medium';
+  src: url('../assets/fonts/Inter-Medium.ttf') format('truetype');
+  font-weight: 500;
+}
+
+@font-face {
+  font-family: 'Inter SemiBold';
+  src: url('../assets/fonts/Inter-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: 'Inter Bold';
+  src: url('../assets/fonts/Inter-Bold.ttf') format('truetype');
+  font-weight: 700;
+}
+
 :root {
   /*color-scheme: light dark;*/
   /*color: rgba(255, 255, 255, 0.87);*/
@@ -25,18 +43,33 @@ body {
   min-height: 100vh;
 }
 
-h1,
-h2 {
-  margin-block-start: 0;
+h1.ant-typography,
+.ant-typography+h2.ant-typography {
+  font-family: 'Inter SemiBold';
 }
 
 h1.ant-typography {
+  margin-block-start: 0;
   margin-block-end: 24px;
 }
 
-button {
+.ant-typography+h2.ant-typography {
+  margin-top: 0;
+}
+
+div.ant-typography {
+  font-family: 'Inter Medium';
+  font-weight: 500;
+}
+
+button.ant-btn {
+  width: fit-content;
+  height: fit-content;
   padding: 16px;
+  border: none;
   font-family: inherit;
+  font-family: 'Inter Medium';
+  font-weight: 500;
   /*transition: border-color 0.25s;*/
 }
 /*button:hover {*/