From b85163cda899f913a9a6a489a053847088e3cc77 Mon Sep 17 00:00:00 2001 From: DwCay Date: Tue, 24 May 2022 19:10:08 +0300 Subject: [PATCH] Add new onboarding steps --- package-lock.json | 1 + src/App.jsx | 8 + .../additional-styles/utility-patterns.scss | 2 +- src/pages/Onboarding1.jsx | 144 ++++++++++++++++++ src/pages/Onboarding2.jsx | 131 ++++++++++++++++ src/pages/Onboarding3.jsx | 126 +++++++++++++++ src/pages/Onboarding4.jsx | 118 ++++++++++++++ src/partials/Header.jsx | 2 +- src/partials/Sidebar.jsx | 30 +++- 9 files changed, 559 insertions(+), 3 deletions(-) create mode 100644 src/pages/Onboarding1.jsx create mode 100644 src/pages/Onboarding2.jsx create mode 100644 src/pages/Onboarding3.jsx create mode 100644 src/pages/Onboarding4.jsx diff --git a/package-lock.json b/package-lock.json index cf145e5..7b0ffcd 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "mosaic-react", "version": "0.1.0", "dependencies": { "@tailwindcss/forms": "^0.4.0", diff --git a/src/App.jsx b/src/App.jsx index ae07cfe..b41c9e1 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -75,6 +75,10 @@ import AvatarPage from './pages/component/AvatarPage'; import TooltipPage from './pages/component/TooltipPage'; import AccordionPage from './pages/component/AccordionPage'; import IconsPage from './pages/component/IconsPage'; +import Onboarding1 from "./pages/Onboarding1"; +import Onboarding2 from "./pages/Onboarding2"; +import Onboarding3 from "./pages/Onboarding3"; +import Onboarding4 from "./pages/Onboarding4"; function App() { @@ -141,6 +145,10 @@ function App() { } /> } /> } /> + } /> + } /> + } /> + } /> } /> } /> } /> diff --git a/src/css/additional-styles/utility-patterns.scss b/src/css/additional-styles/utility-patterns.scss index 4b39a59..58778f4 100644 --- a/src/css/additional-styles/utility-patterns.scss +++ b/src/css/additional-styles/utility-patterns.scss @@ -103,4 +103,4 @@ input[type="search"]::-webkit-search-results-decoration { .no-scrollbar { -ms-overflow-style: none; /* IE and Edge */ scrollbar-width: none; /* Firefox */ -} \ No newline at end of file +} diff --git a/src/pages/Onboarding1.jsx b/src/pages/Onboarding1.jsx new file mode 100644 index 0000000..bc6f333 --- /dev/null +++ b/src/pages/Onboarding1.jsx @@ -0,0 +1,144 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import OnboardingImage from '../images/onboarding-image.jpg'; +import OnboardingDecoration from '../images/auth-decoration.png'; + +function Onboarding1() { + return ( +
+ +
+ + {/* Content */} +
+ +
+ +
+ + {/* Header */} +
+ {/* Logo */} + + + + + + + + + + + + + + + + + + +
+ Have an account? Sign In +
+
+ + {/* Progress bar */} +
+
+
+ +
    +
  • + 1 +
    • +
  • + 2 +
    • +
  • + 3 +
    • +
  • + 4 +
    • +
+
+
+
+
+ +
+
+ +

Tell us about your company ✨

+ {/* Form */} +
+
+ + +
+
+
+
💸 Lorem ipsum is place text commonly?
+
Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts.
+
+
+
+ + +
+
+
+
+ Next Step -> +
+
+ +
+
+ +
+ +
+ + {/* Image */} + + +
+ +
+ ); +} + +export default Onboarding1; diff --git a/src/pages/Onboarding2.jsx b/src/pages/Onboarding2.jsx new file mode 100644 index 0000000..bc793be --- /dev/null +++ b/src/pages/Onboarding2.jsx @@ -0,0 +1,131 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import OnboardingImage from '../images/onboarding-image.jpg'; +import OnboardingDecoration from '../images/auth-decoration.png'; + +function Onboarding2() { + return ( +
+ +
+ + {/* Content */} +
+ +
+ +
+ + {/* Header */} +
+ {/* Logo */} + + + + + + + + + + + + + + + + + + +
+ Have an account? Sign In +
+
+ + {/* Progress bar */} +
+
+
+ +
    +
  • + 1 +
    • +
  • + 2 +
    • +
  • + 3 +
    • +
  • + 4 +
    • +
+
+
+
+
+ +
+
+

Create your Account ✨

+ {/* Form */} +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+ +
+ Sign Up +
+
+ {/* Footer */} +
+
+ Have an account? Sign In +
+
+
+
+ +
+ +
+ + {/* Image */} + + +
+ +
+ ); +} + +export default Onboarding2; diff --git a/src/pages/Onboarding3.jsx b/src/pages/Onboarding3.jsx new file mode 100644 index 0000000..7d83b7d --- /dev/null +++ b/src/pages/Onboarding3.jsx @@ -0,0 +1,126 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import DigitalId from "../images/onboarding-digitalId.jpg"; + +function Onboarding3() { + const arrayBadges = ['judge', 'jelly', 'wasp', 'true', 'clog', 'forward', 'talent', 'ozone', 'belive', 'fresh', 'bulk', 'hobby'] + return ( +
+ +
+ + {/* Content */} +
+ +
+ +
+ + {/* Header */} +
+ {/* Logo */} + + + + + + + + + + + + + + + + + + +
+ Have an account? Sign In +
+
+ + {/* Progress bar */} +
+
+
+ +
    +
  • + 1 +
    • +
  • + 2 +
    • +
  • + 3 +
    • +
  • + 4 +
    • +
+
+
+
+
+ +
+
+ +
+

Company information ✨

+ {/* htmlForm */} +
+ {arrayBadges.map(tag => ( + + ))} +
+
+ + +
+
+
+ <- Back + Next Step -> +
+ +
+
+ +
+ +
+ + {/* Image */} + + +
+ +
+ ); +} + +export default Onboarding3; diff --git a/src/pages/Onboarding4.jsx b/src/pages/Onboarding4.jsx new file mode 100644 index 0000000..6733b34 --- /dev/null +++ b/src/pages/Onboarding4.jsx @@ -0,0 +1,118 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import DigitalId from '../images/onboarding-digitalId.jpg'; + + +function Onboarding4() { + return ( +
+ +
+ + {/* Content */} +
+ +
+ +
+ + {/* Header */} +
+ {/* Logo */} + + + + + + + + + + + + + + + + + + +
+ Have an account? Sign In +
+
+ + {/* Progress bar */} +
+
+
+ +
    +
  • + 1 +
    • +
  • + 2 +
    • +
  • + 3 +
    • +
  • + 4 +
    • +
+
+
+
+
+ +
+
+ +
+ + + + +

Nice to meet you, Ivan 🙌

+ Go To Profile -> +
+ +
+
+ + +
+
+ +
+
+ +
+ +
+ + {/* Image */} + + +
+ +
+ ); +} + +export default Onboarding4; diff --git a/src/partials/Header.jsx b/src/partials/Header.jsx index 3bb4cc9..2562075 100644 --- a/src/partials/Header.jsx +++ b/src/partials/Header.jsx @@ -65,4 +65,4 @@ function Header({ ); } -export default Header; \ No newline at end of file +export default Header; diff --git a/src/partials/Sidebar.jsx b/src/partials/Sidebar.jsx index f63266e..da44cf1 100644 --- a/src/partials/Sidebar.jsx +++ b/src/partials/Sidebar.jsx @@ -1343,6 +1343,34 @@ function Sidebar({ +
  • + + + Step 1 + + +
    • +
  • + + + Step 2 + + +
    • +
  • + + + Step 3 + + +
    • +
  • + + + Step 4 + + +
    • @@ -1593,4 +1621,4 @@ function Sidebar({ ); } -export default Sidebar; \ No newline at end of file +export default Sidebar;