diff --git a/src/App.jsx b/src/App.jsx index 8246f0d..45e45fe 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -79,6 +79,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() { @@ -149,6 +153,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/images/GenerateOnboardingSvg/GenerateSvg.js b/src/images/GenerateOnboardingSvg/GenerateSvg.js new file mode 100644 index 0000000..197f836 --- /dev/null +++ b/src/images/GenerateOnboardingSvg/GenerateSvg.js @@ -0,0 +1,95 @@ +function createBlob(options) { + + let points = []; + let slice = (Math.PI * 2) / options.numPoints; + let startAngle = 0; + + for (let i = 0; i < options.subkey.length; i++) { + let angle = startAngle + i * slice; + let rnd = Number("0x"+options.subkey.substring(i+0,i+1)); + let point = { + x: options.centerX + Math.cos(angle) * (options.radius + rnd), + y: options.centerY + Math.sin(angle) * (options.radius + rnd) + }; + points.push(point); + } + + let size = points.length; + let path = "M" + points[0].x + " " + points[0].y + " C"; + + for (let i = 0; i < size; i++) { + let p0 = points[(i - 1 + size) % size]; + let p1 = points[i]; + let p2 = points[(i + 1) % size]; + let p3 = points[(i + 2) % size]; + + let x1 = p1.x + (p2.x - p0.x) / 6; + let y1 = p1.y + (p2.y - p0.y) / 6; + + let x2 = p2.x - (p3.x - p1.x) / 6; + let y2 = p2.y - (p3.y - p1.y) / 6; + + path += " " + x1 + " " + y1 + " " + x2 + " " + y2 + " " + p2.x + " " + p2.y; + } + + return path + "z"; +} + +export var generateSvgAvatar = (function () { + return function (seed, raw) { + let pubKey = localStorage.getItem('svgKey') || Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16) + Math.floor(Math.random()*65535*65535).toString(16); + //pubKey = "73f47d4929d7b2b6598ca4999d52567f9bb5aef3e353e0a66b468096db6e4e88" + if (!localStorage.getItem('svgKey')) { + localStorage.setItem('svgKey', `${pubKey}`) + } + let particles = []; + let gradients = ['#000000']; + let defs = []; + + for (let a = 0; a<64; a = a + 8) { + let blob = createBlob({ + numPoints: 8, + centerX: 256, + centerY: 256-a*4, + radius: 16, + subkey: pubKey.substring(a,a + 8) + }); + + let color = "#" + pubKey.substring(a+2,a+8); + let width = Number("0x"+pubKey.substring(a,a+1)); + let opacity = Number("0x"+pubKey.substring(a+1,a+2))/8; + + gradients.push(color); + defs.push(``); + particles.push(``); + + } + + let ph = ""; + let off = 4 + Number("0x"+pubKey.substring(0,1)); + let rotate = 0; + for (var i = 0; i < off; i++){ + ph = ph + `,` + "\n"; + rotate = rotate + 360/off; + } + + var svg = [ + '', + '', + '', + '', + '', + '',defs.join('\n'), + '', + '', + particles.join(''), + '', + '', + ph, + '', + '', + ].join(''); + return raw ? svg : 'data:image/svg+xml;base64,' + btoa(svg); + }; + +})(); diff --git a/src/pages/Dashboard.jsx b/src/pages/Dashboard.jsx index 0221469..0ea841d 100644 --- a/src/pages/Dashboard.jsx +++ b/src/pages/Dashboard.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, {useEffect, useState} from 'react'; import Sidebar from '../partials/Sidebar'; import Header from '../partials/Header'; @@ -19,7 +19,9 @@ import DashboardCard10 from '../partials/dashboard/DashboardCard10'; import DashboardCard11 from '../partials/dashboard/DashboardCard11'; function Dashboard() { - + useEffect(() => { + localStorage.setItem('svgKey', '') + }, []) const [sidebarOpen, setSidebarOpen] = useState(false); return ( @@ -58,7 +60,7 @@ function Dashboard() { Add View - + @@ -88,7 +90,7 @@ function Dashboard() { {/* Card (Income/Expenses) */} - + @@ -100,4 +102,4 @@ function Dashboard() { ); } -export default Dashboard; \ No newline at end of file +export default Dashboard; diff --git a/src/pages/Onboarding1.jsx b/src/pages/Onboarding1.jsx new file mode 100644 index 0000000..76a9e1e --- /dev/null +++ b/src/pages/Onboarding1.jsx @@ -0,0 +1,130 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import OnboardingImage from '../images/onboarding-image.jpg'; +import OnboardingDecoration from '../images/auth-decoration.png'; +import Logo from "../images/logo.png"; + +function Onboarding1() { + return ( +
+ +
+ + {/* Content */} +
+ +
+ +
+ + {/* Header */} +
+ {/* Logo */} + + 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..2dd3e1a --- /dev/null +++ b/src/pages/Onboarding2.jsx @@ -0,0 +1,117 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; + +import OnboardingImage from '../images/onboarding-image.jpg'; +import OnboardingDecoration from '../images/auth-decoration.png'; +import Logo from "../images/logo.png"; + +function Onboarding2() { + return ( +
+ +
+ + {/* Content */} +
+ +
+ +
+ + {/* Header */} +
+ {/* Logo */} + + 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..df73ef7 --- /dev/null +++ b/src/pages/Onboarding3.jsx @@ -0,0 +1,111 @@ +import React from 'react'; +import { Link } from 'react-router-dom'; +import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg"; +import Logo from "../images/logo.png"; + +function Onboarding3() { + const arrayBadges = ['judge', 'jelly', 'wasp', 'true', 'clog', 'forward', 'talent', 'ozone', 'belive', 'fresh', 'bulk', 'hobby'] + return ( +
+ +
+ + {/* Content */} +
+ +
+ +
+ + {/* Header */} +
+ {/* Logo */} + + 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..29c11fe --- /dev/null +++ b/src/pages/Onboarding4.jsx @@ -0,0 +1,102 @@ +import React, {useEffect} from 'react'; +import { Link } from 'react-router-dom'; +import {generateSvgAvatar} from "../images/GenerateOnboardingSvg/GenerateSvg"; +import Logo from "../images/logo.png"; + +function Onboarding4() { + return ( +
+ +
+ + {/* Content */} +
+ +
+ +
+ + {/* Header */} +
+ {/* Logo */} + + 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/pages/Signin.jsx b/src/pages/Signin.jsx index 8810b4e..9bcd3a0 100644 --- a/src/pages/Signin.jsx +++ b/src/pages/Signin.jsx @@ -1,10 +1,13 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import { Link } from 'react-router-dom'; import AuthImage from '../images/auth-image.jpg'; import AuthDecoration from '../images/auth-decoration.png'; function Signin() { + useEffect(() => { + localStorage.setItem('svgKey', '') + }, []) return (
@@ -94,4 +97,4 @@ function Signin() { ); } -export default Signin; \ No newline at end of file +export default Signin; diff --git a/src/pages/digitalId/Validate.jsx b/src/pages/digitalId/Validate.jsx index fa5c2f0..5b5906e 100644 --- a/src/pages/digitalId/Validate.jsx +++ b/src/pages/digitalId/Validate.jsx @@ -24,8 +24,7 @@ function Validate () {
- ) } -export default Validate; \ No newline at end of file +export default Validate; diff --git a/src/pages/digitalId/ValidationLog.jsx b/src/pages/digitalId/ValidationLog.jsx index 1376ddf..06cf9c6 100644 --- a/src/pages/digitalId/ValidationLog.jsx +++ b/src/pages/digitalId/ValidationLog.jsx @@ -24,8 +24,7 @@ function ValidationLog () { - ) } -export default ValidationLog; \ No newline at end of file +export default ValidationLog; diff --git a/src/pages/settings/Account.jsx b/src/pages/settings/Account.jsx index ae869b3..246334f 100644 --- a/src/pages/settings/Account.jsx +++ b/src/pages/settings/Account.jsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, {useEffect, useState} from 'react'; import Sidebar from '../../partials/Sidebar'; import Header from '../../partials/Header'; @@ -6,7 +6,9 @@ import SettingsSidebar from '../../partials/settings/SettingsSidebar'; import AccountPanel from '../../partials/settings/AccountPanel'; function Account() { - + useEffect(() => { + localStorage.setItem('svgKey', '') + }, []) const [sidebarOpen, setSidebarOpen] = useState(false); return ( @@ -15,7 +17,7 @@ function Account() { {/* Sidebar */} - {/* Content area */} + {/* Content area */}
{/* Site header */} @@ -30,7 +32,7 @@ function Account() {

Account Settings ✨

- {/* Content */} + {/* Content */}
@@ -42,9 +44,9 @@ function Account() {
- +
); } -export default Account; \ No newline at end of file +export default Account; 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 c43f070..175e7e4 100644 --- a/src/partials/Sidebar.jsx +++ b/src/partials/Sidebar.jsx @@ -14,7 +14,6 @@ function Sidebar({ const trigger = useRef(null); const sidebar = useRef(null); - const storedSidebarExpanded = localStorage.getItem('sidebar-expanded'); const [sidebarExpanded, setSidebarExpanded] = useState(storedSidebarExpanded === null ? false : storedSidebarExpanded === 'true'); @@ -1433,6 +1432,34 @@ function Sidebar({ +
  • + + + Step 1 + + +
    • +
  • + + + Step 2 + + +
    • +
  • + + + Step 3 + + +
    • +
  • + + + Step 4 + + +
    • @@ -1683,4 +1710,4 @@ function Sidebar({ ); } -export default Sidebar; \ No newline at end of file +export default Sidebar;