diff --git a/package-lock.json b/package-lock.json index c68a90a..2733dd5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3377,6 +3377,15 @@ "integrity": "sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==", "optional": true }, + "bindings": { + "version": "1.5.0", + "resolved": "https://registry.npmjs.org/bindings/-/bindings-1.5.0.tgz", + "integrity": "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==", + "optional": true, + "requires": { + "file-uri-to-path": "1.0.0" + } + }, "bluebird": { "version": "3.7.2", "resolved": "https://registry.npmjs.org/bluebird/-/bluebird-3.7.2.tgz", @@ -6285,6 +6294,12 @@ } } }, + "file-uri-to-path": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz", + "integrity": "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==", + "optional": true + }, "filesize": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz", @@ -11963,9 +11978,9 @@ } }, "querystring": { - "version": "0.2.0", - "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz", - "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=" + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.1.tgz", + "integrity": "sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg==" }, "querystring-es3": { "version": "0.2.1", @@ -15070,6 +15085,11 @@ "version": "1.3.2", "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz", "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=" + }, + "querystring": { + "version": "0.2.0", + "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz", + "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=" } } }, @@ -15386,6 +15406,7 @@ "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", "optional": true, "requires": { + "bindings": "^1.5.0", "nan": "^2.12.1" } }, @@ -16010,6 +16031,7 @@ "integrity": "sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==", "optional": true, "requires": { + "bindings": "^1.5.0", "nan": "^2.12.1" } }, diff --git a/public/assets/images/welcome/upfold.svg b/public/assets/images/welcome/upfold.svg new file mode 100644 index 0000000..4b94b3b --- /dev/null +++ b/public/assets/images/welcome/upfold.svg @@ -0,0 +1,240 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/fonts/AdobeClean-Bold.ttf b/src/assets/fonts/AdobeClean-Bold.ttf new file mode 100644 index 0000000..62c7652 Binary files /dev/null and b/src/assets/fonts/AdobeClean-Bold.ttf differ diff --git a/src/assets/fonts/AdobeClean-It.ttf b/src/assets/fonts/AdobeClean-It.ttf new file mode 100644 index 0000000..f38033f Binary files /dev/null and b/src/assets/fonts/AdobeClean-It.ttf differ diff --git a/src/assets/fonts/AdobeClean-Light.ttf b/src/assets/fonts/AdobeClean-Light.ttf new file mode 100644 index 0000000..13e30d6 Binary files /dev/null and b/src/assets/fonts/AdobeClean-Light.ttf differ diff --git a/src/assets/fonts/AdobeClean-Regular.ttf b/src/assets/fonts/AdobeClean-Regular.ttf new file mode 100644 index 0000000..1cb9c0a Binary files /dev/null and b/src/assets/fonts/AdobeClean-Regular.ttf differ diff --git a/src/pages/onboarding/Welcome.module.scss b/src/pages/onboarding/Welcome.module.scss index 39ef1cb..ebba715 100644 --- a/src/pages/onboarding/Welcome.module.scss +++ b/src/pages/onboarding/Welcome.module.scss @@ -1,4 +1,101 @@ .upfold { - background-color: #1b1d1e; + background-color: var(--black); + height: 95vh; + width: 100%; + border-bottom-right-radius: 30px; + border-bottom-left-radius: 30px; + position: absolute; + z-index: 1; + box-shadow: 0px 0px 10px 5px rgba(var(--black-rgb), 0.5); + animation: riseup 1s forwards; + display: flex; + align-items: center; + justify-content: center; + + figure { + display: block; + width: 100%; + margin: 0; + animation: fadeIn 1s forwards; + animation-delay: 0.5s; + opacity: 0; + transform: translateY(10vh); + } + + img { + margin: 0 auto; + width: 90%; + display: block; + } + + @keyframes riseup { + from { + height: 95vh; + } + to { + height: 50vh; + } + } +} + +.content { + margin-top: 50vh; height: 50vh; + font-weight: 500; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + color: var(--black); + padding: 5%; + + animation: fadeIn 1s forwards; + animation-delay: 1s; + opacity: 0; + transform: translateY(10vh); + + h2 { + font-size: 24px; + font-weight: 700; + } + + p { + font-size: 14px; + color: rgba(var(--black-rgb), 0.5); + } + + .actionButtonsHolder { + width: 80%; + margin: 0 auto; + + .actionButton { + height: 40px; + text-transform: none; + font-size: 16px; + margin: 20px 0; + --border-radius: 30px; + --border-color: var(--teal); + font-weight: 700; + + &:nth-child(1) { + --background: var(--teal); + } + + &:nth-child(2) { + --color: var(--teal); + } + } + } +} + +@keyframes fadeIn { + from { + opacity: 0; + transform: translateY(10vh); + } + + to { + opacity: 1; + transform: translateY(0vh); + } } \ No newline at end of file diff --git a/src/pages/onboarding/Welcome.tsx b/src/pages/onboarding/Welcome.tsx index d6b831a..3314537 100644 --- a/src/pages/onboarding/Welcome.tsx +++ b/src/pages/onboarding/Welcome.tsx @@ -1,4 +1,4 @@ -import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react'; +import { IonContent, IonPage, IonButton } from '@ionic/react'; import { Component } from 'react'; import styles from './Welcome.module.scss'; @@ -19,7 +19,23 @@ class WelcomePage extends Component {
- +
+ upfold image +
+
+ +
+
+

Let's Get Started

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Obcaecati dicta itaque quaerat labore distinctio natus ex nostrum. Ea assumenda numquam temporibus quisquam inventore facilis, fugiat ut distinctio accusamus maxime iure? +

+ +
+ Create Account + Login +
+
diff --git a/src/theme/variables.css b/src/theme/variables.css index ad145dd..eb86213 100644 --- a/src/theme/variables.css +++ b/src/theme/variables.css @@ -1,3 +1,40 @@ +@font-face { + font-family: "adobe-clean"; + src: url('../assets/fonts/AdobeClean-Regular.ttf'); + font-weight: 500; + font-style: normal; +} + +@font-face { + font-family: "adobe-clean"; + src: url('../assets/fonts/AdobeClean-Light.ttf'); + font-weight: 300; + font-style: normal; +} + +@font-face { + font-family: "adobe-clean"; + src: url('../assets/fonts/AdobeClean-Bold.ttf'); + font-weight: 700; + font-style: normal; +} + +@font-face { + font-family: "adobe-clean"; + src: url('../assets/fonts/AdobeClean-It.ttf'); + font-weight: 500; + font-style: italic; +} + +* { + font-family: "adobe-clean"; + font-weight: 500; + letter-spacing: 0.5px; + line-height: 1.5; + margin: 0; + padding: 0; +} + /* Ionic Variables and Theming. For more info, please see: http://ionicframework.com/docs/theming/ */ @@ -74,6 +111,12 @@ http://ionicframework.com/docs/theming/ */ --ion-color-light-contrast-rgb: 0, 0, 0; --ion-color-light-shade: #d7d8da; --ion-color-light-tint: #f5f6f9; + + + --teal: #58c48d; + --teal-rgb: 88, 196, 141; + --black: #222222; + --black-rgb: 34, 34, 34; } @media (prefers-color-scheme: light) {