mirror of
https://github.com/logto-io/logto.git
synced 2024-12-16 20:26:19 -05:00
Merge pull request #781 from logto-io/charles-log-2382-implement-get-started-page
feat(console): implement get started page (client UI)
This commit is contained in:
Charles Zhao
GitHub
commit
92039f948b
11 changed files with 357 additions and 0 deletions
|
|
@ -21,6 +21,7 @@ import Applications from './pages/Applications';
|
|||
import Callback from './pages/Callback';
|
||||
import ConnectorDetails from './pages/ConnectorDetails';
|
||||
import Connectors from './pages/Connectors';
|
||||
import GetStarted from './pages/GetStarted';
|
||||
import NotFound from './pages/NotFound';
|
||||
import Settings from './pages/Settings';
|
||||
import SignInExperience from './pages/SignInExperience';
|
||||
|
|
@ -80,6 +81,7 @@ const Main = () => {
|
|||
<Route path="callback" element={<Callback />} />
|
||||
<Route element={<AppContent />}>
|
||||
<Route path="*" element={<NotFound />} />
|
||||
<Route path="get-started" element={<GetStarted />} />
|
||||
<Route path="applications">
|
||||
<Route index element={<Applications />} />
|
||||
<Route path=":id">
|
||||
|
|
|
|||
22
packages/console/src/assets/images/cake.svg
Normal file
22
packages/console/src/assets/images/cake.svg
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect opacity="0.3" width="48" height="48" rx="16" fill="#F9CDD4"/>
|
||||
<g clip-path="url(#clip0_1770_36648)">
|
||||
<path d="M24 37.5C31.4558 37.5 37.5 34.1421 37.5 30C37.5 25.8579 31.4558 22.5 24 22.5C16.5442 22.5 10.5 25.8579 10.5 30C10.5 34.1421 16.5442 37.5 24 37.5Z" fill="#8899A6"/>
|
||||
<path d="M24 36.1875C31.4558 36.1875 37.5 32.8296 37.5 28.6875C37.5 24.5454 31.4558 21.1875 24 21.1875C16.5442 21.1875 10.5 24.5454 10.5 28.6875C10.5 32.8296 16.5442 36.1875 24 36.1875Z" fill="#CCD6DD"/>
|
||||
<path d="M35.0063 28.2637C35.0063 31.4587 30.0788 34.0477 24 34.0477C17.9213 34.0477 12.9938 31.4587 12.9938 28.2637C12.9938 25.0702 17.9213 22.4805 24 22.4805C30.078 22.4805 35.0063 25.0702 35.0063 28.2637Z" fill="#DD2E44"/>
|
||||
<path d="M34.6747 27.4073C34.6747 34.7978 13.3252 34.7978 13.3252 27.4073V20.838H34.6747V27.4073Z" fill="#F4ABBA"/>
|
||||
<path d="M23.988 24.1245C17.25 24.1245 13.3245 21.0255 13.3245 21.0255C13.3245 21.0255 13.3125 21.7185 13.3125 22.2893C13.3125 22.2893 13.3365 25.9628 15.2415 25.9628C17.0858 25.9628 16.9515 27.7238 18.117 27.906C19.2727 28.0868 19.401 27.2025 20.8358 27.2025C22.2705 27.2025 22.5232 28.782 23.988 28.782C25.7047 28.782 25.8457 27.2025 27.2797 27.2025C28.7137 27.2025 28.8788 28.1205 29.8193 27.8663C30.9495 27.5603 30.4298 25.9635 32.7345 25.9635C34.6395 25.9635 34.6868 22.4775 34.6868 22.4775C34.6868 21.9075 34.674 21.0263 34.674 21.0263C34.674 21.0263 30.7267 24.1245 23.988 24.1245Z" fill="#DD2E44"/>
|
||||
<path d="M35.0063 20.0527C35.0063 23.247 30.0788 25.8367 24 25.8367C17.9213 25.8367 12.9938 23.247 12.9938 20.0527C12.9938 16.8585 17.9213 14.2687 24 14.2687C30.078 14.2687 35.0063 16.8585 35.0063 20.0527Z" fill="#EA596E"/>
|
||||
<path d="M29.748 20.838C29.2943 20.838 28.9268 20.4705 28.9268 20.0168V14.2688C28.9268 13.815 29.2943 13.4475 29.748 13.4475C30.2018 13.4475 30.5693 13.815 30.5693 14.2688V20.0168C30.5693 20.4705 30.2018 20.838 29.748 20.838Z" fill="#FFF8E8"/>
|
||||
<path d="M29.7481 15.5002C28.8766 15.5002 28.1911 15.1012 27.9143 14.433C27.6743 13.8532 27.5551 12.5955 29.4578 10.6935C29.6183 10.533 29.8778 10.533 30.0383 10.6935C31.9411 12.5962 31.8218 13.8532 31.5818 14.433C31.3051 15.1012 30.6196 15.5002 29.7481 15.5002Z" fill="#FAAA35"/>
|
||||
<path d="M24 23.301C23.5462 23.301 23.1787 22.9335 23.1787 22.4798V16.7325C23.1787 16.2788 23.5462 15.9113 24 15.9113C24.4537 15.9113 24.8212 16.2788 24.8212 16.7325V22.4805C24.8212 22.9335 24.4537 23.301 24 23.301Z" fill="#FFF8E8"/>
|
||||
<path d="M24 17.964C23.1285 17.964 22.443 17.565 22.1662 16.8967C21.9255 16.317 21.807 15.0592 23.7097 13.1572C23.8702 12.9967 24.1297 12.9967 24.2902 13.1572C26.193 15.06 26.0737 16.317 25.8337 16.8967C25.557 17.565 24.8715 17.964 24 17.964Z" fill="#FAAA35"/>
|
||||
<path d="M18.252 20.838C17.7983 20.838 17.4308 20.4705 17.4308 20.0168V14.2688C17.4308 13.815 17.7983 13.4475 18.252 13.4475C18.7058 13.4475 19.0733 13.815 19.0733 14.2688V20.0168C19.0733 20.4705 18.7058 20.838 18.252 20.838Z" fill="#FFF8E8"/>
|
||||
<path d="M18.252 15.5002C17.3805 15.5002 16.695 15.1012 16.4183 14.433C16.1775 13.8532 16.059 12.5955 17.9618 10.6935C18.1223 10.533 18.3818 10.533 18.5423 10.6935C20.445 12.5962 20.3258 13.8532 20.0858 14.433C19.809 15.1012 19.1235 15.5002 18.252 15.5002Z" fill="#FAAA35"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1770_36648">
|
||||
<rect width="27" height="27" fill="white" transform="translate(10.5 10.5)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.4 KiB |
28
packages/console/src/assets/images/crab.svg
Normal file
28
packages/console/src/assets/images/crab.svg
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect opacity="0.1" width="48" height="48" rx="16" fill="#BE1931"/>
|
||||
<g clip-path="url(#clip0_1770_36728)">
|
||||
<path d="M15.72 25.9777C15.771 26.457 15.3128 26.8987 14.694 26.964C14.076 27.0307 13.5338 26.6962 13.4828 26.2177C13.4318 25.7385 13.8908 25.2975 14.5088 25.2322C15.1268 25.1655 15.669 25.4992 15.72 25.9777ZM17.2853 28.0155C17.379 28.629 15.9683 29.9235 15.3533 30.0172C14.739 30.111 14.1653 29.6887 14.0723 29.0745C13.9785 28.461 14.5073 28.2195 15.1208 28.1257C15.735 28.0327 17.1915 27.402 17.2853 28.0155ZM18.6225 29.5935C18.7523 30.201 17.4015 32.5387 16.794 32.6685C16.1858 32.7982 15.5603 32.778 15.4313 32.1697C15.3015 31.5622 15.6608 30.9037 16.2683 30.774C16.8758 30.6435 18.4928 28.986 18.6225 29.5935V29.5935ZM21.5123 30.237C21.636 30.8452 20.5088 33.5025 19.8998 33.6262C19.2908 33.75 18.8205 33.9645 18.6968 33.3562C18.573 32.7472 18.8925 31.875 19.4513 31.4212C19.9343 31.029 21.3893 29.6287 21.5123 30.237V30.237Z" fill="#A0041E"/>
|
||||
<path d="M13.4438 24.6518C13.899 25.188 14.3288 25.5743 13.7918 26.028C13.2548 26.4825 12.4815 26.1495 12.0263 25.6125C11.5725 25.0763 10.347 23.0475 10.8833 22.5938C11.421 22.1393 12.99 24.1155 13.4438 24.6518V24.6518ZM13.6913 28.3118C14.3603 28.533 15.084 28.9125 14.8635 29.58C14.643 30.2483 13.8675 30.3233 13.1993 30.1035C12.5325 29.8823 10.3703 28.8353 10.5908 28.1678C10.812 27.5003 13.0238 28.0913 13.6913 28.3118ZM14.6018 31.7108C15.2805 31.521 16.032 31.4985 16.221 32.175C16.41 32.8523 16.0095 33.3263 15.3315 33.5153C14.655 33.7035 12.075 34.0605 11.886 33.3833C11.6978 32.7045 13.9245 31.8983 14.6018 31.7108ZM17.8628 34.1018C17.9258 33.399 18.3458 32.85 19.0455 32.913C19.746 32.9768 19.989 33.6818 19.9253 34.383C19.8615 35.0835 20.0355 37.0545 18.639 37.395C17.955 37.5608 17.7983 34.8 17.8628 34.1018V34.1018ZM32.28 25.9778C32.229 26.457 32.6873 26.8988 33.3053 26.964C33.9233 27.0308 34.4655 26.6963 34.5165 26.2178C34.5675 25.7385 34.1085 25.2975 33.4913 25.2323C32.8733 25.1655 32.331 25.4993 32.28 25.9778ZM30.7148 28.0155C30.621 28.629 32.0325 29.9235 32.646 30.0173C33.2603 30.111 33.834 29.6888 33.9278 29.0745C34.0215 28.4603 33.4928 28.2195 32.8793 28.1258C32.265 28.0328 30.8085 27.402 30.7148 28.0155ZM29.3775 29.5935C29.2478 30.201 30.5985 32.5388 31.206 32.6685C31.8135 32.7983 32.439 32.778 32.568 32.1698C32.6985 31.5623 32.3393 30.9038 31.7318 30.774C31.1243 30.6435 29.5073 28.986 29.3775 29.5935ZM26.4878 30.237C26.3633 30.8453 27.4913 33.5025 28.0995 33.6263C28.7085 33.75 29.178 33.9645 29.3025 33.3563C29.4255 32.7473 29.106 31.875 28.5473 31.4213C28.0658 31.029 26.6108 29.6288 26.4878 30.237V30.237Z" fill="#A0041E"/>
|
||||
<path d="M34.5563 24.6517C34.1011 25.188 33.6713 25.5742 34.2076 26.028C34.7446 26.4825 35.5178 26.1495 35.9731 25.6125C36.4268 25.0762 37.6523 23.0475 37.1153 22.5937C36.5791 22.1392 35.0101 24.1155 34.5563 24.6517V24.6517ZM34.3088 28.3117C33.6398 28.533 32.9161 28.9125 33.1373 29.58C33.3571 30.2482 34.1333 30.3232 34.8016 30.1035C35.4683 29.8822 37.6298 28.8352 37.4093 28.1677C37.1888 27.5002 34.9763 28.0912 34.3088 28.3117V28.3117ZM33.3976 31.7107C32.7196 31.521 31.9681 31.4985 31.7791 32.175C31.5901 32.8522 31.9905 33.3262 32.6678 33.5152C33.3443 33.7035 35.9251 34.0605 36.1133 33.3825C36.3023 32.7045 34.0756 31.8982 33.3976 31.7107ZM30.1373 34.1017C30.0743 33.399 29.6536 32.85 28.9546 32.913C28.2533 32.9767 28.0111 33.6817 28.0748 34.383C28.1378 35.0835 27.9646 37.0545 29.3611 37.395C30.0451 37.5607 30.2018 34.8 30.1373 34.1017V34.1017ZM12.8611 20.9085C12.5738 20.2665 12.8618 19.5135 13.5038 19.227C14.1458 18.9397 14.8988 19.2285 15.1861 19.8705C15.4718 20.5117 17.1743 24.0795 16.5323 24.366C15.8911 24.6525 13.1476 21.5497 12.8611 20.9085V20.9085Z" fill="#A0041E"/>
|
||||
<path d="M13.4954 19.5255C14.4112 21.7425 19.7512 17.0198 20.0977 14.8148C20.4442 12.6105 19.8667 11.664 19.5772 11.4398C19.2877 11.2155 19.6852 12.516 18.6869 13.9193C17.8972 15.0308 12.8624 17.9948 13.4954 19.5255V19.5255ZM35.1389 20.9085C35.4269 20.2665 35.1382 19.5135 34.4962 19.227C33.8534 18.9398 33.1004 19.2285 32.8132 19.8705C32.5274 20.5118 30.8257 24.0795 31.4677 24.366C32.1089 24.6525 34.8524 21.5498 35.1389 20.9085Z" fill="#A0041E"/>
|
||||
<path d="M34.5052 19.5255C33.5887 21.7425 28.2495 17.0198 27.9022 14.8148C27.5565 12.6105 28.134 11.664 28.4227 11.4398C28.7122 11.2155 28.3147 12.516 29.313 13.9193C30.1035 15.0308 35.1375 17.9948 34.5052 19.5255Z" fill="#A0041E"/>
|
||||
<path d="M15 27C15 25.5 16.5 19.5 24 19.5C31.5 19.5 33 25.5 33 27C29.25 29.25 28.9703 32.25 24 32.25C19.0298 32.25 19.5 29.25 15 27ZM13.7423 19.6672C11.3775 20.0745 13.4738 13.5615 15.1545 12.093C16.8345 10.6245 18.6473 10.6552 18.9908 10.7805C19.3343 10.9057 18.1103 12.7267 17.6783 13.914C17.4585 14.5162 15.3743 19.386 13.7423 19.6672V19.6672ZM34.2578 19.6672C36.6218 20.0745 34.5263 13.5615 32.8463 12.093C31.1663 10.6245 29.3543 10.6552 29.01 10.7805C28.6658 10.9057 29.8905 12.7267 30.3225 13.914C30.5423 14.5162 32.6258 19.386 34.2578 19.6672V19.6672Z" fill="#BE1931"/>
|
||||
<path d="M23.2741 19.602C23.5253 20.6062 23.2403 20.793 22.6373 20.9437C22.0343 21.0945 21.3421 21.1522 21.0916 20.148C20.8403 19.1437 21.1253 18.207 21.7283 18.0562C22.3306 17.9055 23.0228 18.597 23.2741 19.602ZM26.9086 20.148C26.6573 21.153 25.9651 21.0945 25.3628 20.9437C24.7598 20.793 24.4748 20.6062 24.7261 19.602C24.9773 18.597 25.6696 17.9055 26.2726 18.0562C26.8748 18.2062 27.1598 19.143 26.9086 20.148Z" fill="#A0041E"/>
|
||||
<path d="M21.375 18.75C21.9963 18.75 22.5 18.2463 22.5 17.625C22.5 17.0037 21.9963 16.5 21.375 16.5C20.7537 16.5 20.25 17.0037 20.25 17.625C20.25 18.2463 20.7537 18.75 21.375 18.75Z" fill="#292F33"/>
|
||||
<path d="M26.625 18.75C27.2463 18.75 27.75 18.2463 27.75 17.625C27.75 17.0037 27.2463 16.5 26.625 16.5C26.0037 16.5 25.5 17.0037 25.5 17.625C25.5 18.2463 26.0037 18.75 26.625 18.75Z" fill="#292F33"/>
|
||||
<path d="M17.2898 26.6467C17.1848 26.8237 15 27.1957 15.5625 26.0985C16.125 25.0012 17.3948 26.4712 17.2898 26.6467Z" fill="#DD2E44"/>
|
||||
<path d="M17.9183 25.593C17.7548 25.7618 15.5273 25.8862 16.4768 24.54C17.4255 23.1952 18.1523 25.3515 17.9183 25.593Z" fill="#DD2E44"/>
|
||||
<path d="M19.2428 24.495C18.9593 24.6683 16.6396 24.1193 18.1876 23.046C19.5916 22.074 19.6171 24.2655 19.2428 24.495Z" fill="#DD2E44"/>
|
||||
<path d="M21.0765 23.5702C20.3205 23.7945 18.543 22.5937 20.4157 21.9645C22.2892 21.3352 21.8325 23.346 21.0765 23.5702ZM30.642 26.6467C30.7477 26.823 32.9317 27.195 32.3692 26.0985C31.8067 25.0012 30.537 26.4712 30.642 26.6467Z" fill="#DD2E44"/>
|
||||
<path d="M30.0143 25.593C30.1778 25.7618 32.4053 25.8862 31.4558 24.54C30.5063 23.1952 29.7795 25.3515 30.0143 25.593Z" fill="#DD2E44"/>
|
||||
<path d="M28.6898 24.495C28.9733 24.6683 31.293 24.1193 29.7443 23.046C28.3403 22.074 28.3148 24.2655 28.6898 24.495Z" fill="#DD2E44"/>
|
||||
<path d="M26.856 23.5703C27.612 23.7945 29.3895 22.5938 27.5167 21.9645C25.6425 21.3352 26.0992 23.346 26.856 23.5703Z" fill="#DD2E44"/>
|
||||
<path d="M30.6368 22.6875C30.6368 22.998 28.995 21 24 21C19.0043 21 17.364 22.998 17.364 22.6875C17.364 22.377 19.4295 19.875 24 19.875C28.5705 19.875 30.6368 22.377 30.6368 22.6875Z" fill="#A0041E"/>
|
||||
<path d="M18.5947 28.8248C18.5947 28.5143 19.9312 30.5123 24 30.5123C28.0687 30.5123 29.406 28.5143 29.406 28.8248C29.406 29.1353 27.723 31.6373 24 31.6373C20.277 31.6373 18.5947 29.1353 18.5947 28.8248Z" fill="#DD2E44"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1770_36728">
|
||||
<rect width="27" height="27" fill="white" transform="translate(10.5 10.5)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.4 KiB |
24
packages/console/src/assets/images/drink.svg
Normal file
24
packages/console/src/assets/images/drink.svg
Normal file
|
|
@ -0,0 +1,24 @@
|
|||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect opacity="0.3" width="48" height="48" rx="16" fill="#CCE6FA"/>
|
||||
<g clip-path="url(#clip0_1770_36684)">
|
||||
<path d="M30.6481 16.5H24.0001V37.5C28.5001 37.5 31.5001 36.75 32.5448 32.2388C33.1253 29.7323 33.7921 22.9875 33.7921 18.858C33.7921 17.4593 32.7173 16.5 30.6481 16.5ZM17.1691 16.5H24.0001V37.5C19.5001 37.5 16.5001 36.75 15.3638 32.2388C14.7353 29.7435 14.0708 22.9875 14.0708 18.858C14.0708 17.4593 15.0991 16.5 17.1691 16.5Z" fill="#8899A6"/>
|
||||
<path d="M33.789 18.375C33.789 19.9283 31.4415 21.1875 23.9962 21.1875C16.5517 21.1875 14.2035 19.9283 14.2035 18.375C14.2035 16.821 16.5517 15.5625 23.9962 15.5625C31.4415 15.5625 33.789 16.821 33.789 18.375Z" fill="#CCD6DD"/>
|
||||
<path d="M24.0187 20.2477L15.387 19.5C15.387 24.75 16.215 30.2865 16.6477 31.929C17.1442 33.8108 18.75 33.7357 24 33.7485V33.75V33.7485C29.25 33.735 30.8745 33.8108 31.3702 31.929C31.8037 30.2865 32.64 24.75 32.64 19.5L24.0187 20.2477Z" fill="#CCD6DD"/>
|
||||
<path d="M24 26.25V36C29.25 36 30.75 35.25 31.3928 31.929C31.5735 30.9968 31.998 28.8728 32.2733 26.25H24ZM15.7643 26.25C16.0388 28.8728 16.4505 30.9953 16.626 31.929C17.25 35.25 18.75 36 24 36V26.25H15.7643Z" fill="#55ACEE"/>
|
||||
<path d="M24 33.12C20.583 33.12 17.8132 33.7912 17.8132 34.62C17.8132 34.6267 17.817 34.6335 17.8177 34.641C18.8655 35.6985 20.6835 36 24 36C27.3097 36 29.127 35.7 30.1807 34.6477C30.1815 34.6387 30.1867 34.6297 30.1867 34.62C30.1867 33.7912 27.417 33.12 24 33.12Z" fill="#3B88C3"/>
|
||||
<path d="M23.9963 27.75C28.5592 27.75 32.2583 27.0784 32.2583 26.25C32.2583 25.4216 28.5592 24.75 23.9963 24.75C19.4333 24.75 15.7343 25.4216 15.7343 26.25C15.7343 27.0784 19.4333 27.75 23.9963 27.75Z" fill="#88C9F9"/>
|
||||
<path d="M35.9685 11.202L30.8505 12.4747C30.2873 12.615 29.6768 12.9075 29.0205 13.404C27.7883 14.3362 27.537 15.6015 27.336 16.2997L24.255 27H26.5965L29.4975 16.923C29.6955 16.236 29.892 15.6465 30.3443 15.2362C30.7448 14.8732 31.407 14.6595 32.0273 14.499L36.51 13.3867C37.1108 13.2375 37.4798 12.6247 37.3313 12.024C37.182 11.4225 36.5693 11.0527 35.9685 11.202Z" fill="#E1E8ED"/>
|
||||
<path d="M24.2549 27L22.2517 33.9578C22.0807 34.5525 22.4272 35.1788 23.0212 35.3505C23.6159 35.5215 24.2422 35.175 24.4132 34.581L26.5964 27H24.2549Z" fill="#88C9F9"/>
|
||||
<path d="M24.4807 27.5078L24.0397 27.7493L23.835 28.4595L25.3845 31.2113L25.9665 29.1893L25.0207 27.5085L24.4807 27.5078Z" fill="#744EAA"/>
|
||||
<path d="M31.4295 12.3307L30.5835 15.066C30.9817 14.8057 31.515 14.631 32.0287 14.4982L32.3542 14.4172L33.1305 11.9077L31.4295 12.3307Z" fill="#DD2E44"/>
|
||||
<path d="M23.2838 30.3743L22.701 32.397L24.1725 35.0108C24.2805 34.8893 24.366 34.746 24.414 34.5803L24.8326 33.126L23.2838 30.3743Z" fill="#744EAA"/>
|
||||
<path d="M25.536 22.551L24.9532 24.5745L25.989 26.4135L26.343 26.4923L26.8125 26.25L27.0855 25.3035L25.536 22.551ZM36.3712 11.1803C36.24 11.1645 36.1042 11.1683 35.9685 11.202L34.6965 11.5185L33.9195 14.0288L35.6197 13.6065L36.3712 11.1803ZM26.0932 20.616L27.6427 23.367L28.2247 21.345L26.676 18.5933L26.0932 20.616ZM28.9897 13.4318C28.3912 13.8945 28.026 14.4353 27.789 14.9483L28.779 19.4243L29.499 16.923C29.5485 16.7505 29.5987 16.584 29.652 16.425L28.9897 13.4318Z" fill="#DD2E44"/>
|
||||
<path d="M24.4973 26.1608L24.0398 27.75C24.8603 27.7492 25.6523 27.7267 26.4 27.6855L26.8388 26.1615C26.1353 26.5238 24.6683 26.2973 24.4973 26.1608Z" fill="#55ACEE"/>
|
||||
<path d="M32.7112 18.9817C32.5297 18.495 31.9957 18.2505 31.5232 18.4387C28.8187 19.5007 26.2402 19.8705 23.9962 19.8915V21.7605C26.496 21.735 29.313 21.3277 32.181 20.2005C32.6557 20.0145 32.8935 19.4685 32.7112 18.9817ZM15.2812 18.9817C15.4627 18.495 15.9967 18.2505 16.4692 18.4387C19.1737 19.5007 21.7522 19.8705 23.9962 19.8915V21.7605C21.4965 21.735 18.6795 21.3277 15.8115 20.2005C15.3375 20.0145 15.099 19.4685 15.2812 18.9817Z" fill="white"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1770_36684">
|
||||
<rect width="27" height="27" fill="white" transform="translate(10.5 10.5)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.9 KiB |
18
packages/console/src/assets/images/frog.svg
Normal file
18
packages/console/src/assets/images/frog.svg
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect opacity="0.3" width="48" height="48" rx="16" fill="#C6E5B3"/>
|
||||
<g clip-path="url(#clip0_1770_36833)">
|
||||
<path d="M37.5 27C37.5 32.592 31.4557 36 24 36C16.5443 36 10.5 32.592 10.5 27C10.5 21.408 16.5443 15.75 24 15.75C31.4557 15.75 37.5 21.408 37.5 27Z" fill="#C6E5B3"/>
|
||||
<path d="M34.3162 20.007C35.3422 19.182 36 17.9182 36 16.5C36 14.0152 33.9848 12 31.5 12C29.3542 12 27.5625 13.503 27.1117 15.5137C26.1458 15.1515 25.0995 14.9452 24 14.9452C22.9012 14.9452 21.8542 15.1515 20.8883 15.5137C20.4375 13.503 18.6458 12 16.5 12C14.0152 12 12 14.0152 12 16.5C12 17.9182 12.6577 19.182 13.6837 20.007C11.7 22.017 10.5 24.5137 10.5 27C10.5 32.592 16.5443 27.75 24 27.75C31.4557 27.75 37.5 32.592 37.5 27C37.5 24.5137 36.3 22.017 34.3162 20.007Z" fill="#77B255"/>
|
||||
<path d="M16.125 18.75C17.5747 18.75 18.75 17.5747 18.75 16.125C18.75 14.6753 17.5747 13.5 16.125 13.5C14.6753 13.5 13.5 14.6753 13.5 16.125C13.5 17.5747 14.6753 18.75 16.125 18.75Z" fill="white"/>
|
||||
<path d="M16.125 17.25C16.7463 17.25 17.25 16.7463 17.25 16.125C17.25 15.5037 16.7463 15 16.125 15C15.5037 15 15 15.5037 15 16.125C15 16.7463 15.5037 17.25 16.125 17.25Z" fill="#292F33"/>
|
||||
<path d="M31.875 18.75C33.3247 18.75 34.5 17.5747 34.5 16.125C34.5 14.6753 33.3247 13.5 31.875 13.5C30.4253 13.5 29.25 14.6753 29.25 16.125C29.25 17.5747 30.4253 18.75 31.875 18.75Z" fill="white"/>
|
||||
<path d="M31.875 17.25C32.4963 17.25 33 16.7463 33 16.125C33 15.5037 32.4963 15 31.875 15C31.2537 15 30.75 15.5037 30.75 16.125C30.75 16.7463 31.2537 17.25 31.875 17.25Z" fill="#292F33"/>
|
||||
<path d="M21 26.25C21.4142 26.25 21.75 25.9142 21.75 25.5C21.75 25.0858 21.4142 24.75 21 24.75C20.5858 24.75 20.25 25.0858 20.25 25.5C20.25 25.9142 20.5858 26.25 21 26.25Z" fill="#5C913B"/>
|
||||
<path d="M27 26.25C27.4142 26.25 27.75 25.9142 27.75 25.5C27.75 25.0858 27.4142 24.75 27 24.75C26.5858 24.75 26.25 25.0858 26.25 25.5C26.25 25.9142 26.5858 26.25 27 26.25Z" fill="#5C913B"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1770_36833">
|
||||
<rect width="27" height="27" fill="white" transform="translate(10.5 10.5)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
15
packages/console/src/assets/images/grinning-face.svg
Normal file
15
packages/console/src/assets/images/grinning-face.svg
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect opacity="0.3" width="48" height="48" rx="16" fill="#FFCC4D"/>
|
||||
<g clip-path="url(#clip0_1329_27188)">
|
||||
<path d="M24 37.5C31.4558 37.5 37.5 31.4558 37.5 24C37.5 16.5442 31.4558 10.5 24 10.5C16.5442 10.5 10.5 16.5442 10.5 24C10.5 31.4558 16.5442 37.5 24 37.5Z" fill="#FFCC4D"/>
|
||||
<path d="M24 26.25C21.2828 26.25 19.4798 25.9335 17.25 25.5C16.7407 25.4017 15.75 25.5 15.75 27C15.75 30 19.1962 33.75 24 33.75C28.803 33.75 32.25 30 32.25 27C32.25 25.5 31.2592 25.401 30.75 25.5C28.5203 25.9335 26.7172 26.25 24 26.25Z" fill="#664500"/>
|
||||
<path d="M17.25 27C17.25 27 19.5 27.75 24 27.75C28.5 27.75 30.75 27 30.75 27C30.75 27 29.25 30 24 30C18.75 30 17.25 27 17.25 27Z" fill="white"/>
|
||||
<path d="M19.5 23.25C20.5355 23.25 21.375 22.0747 21.375 20.625C21.375 19.1753 20.5355 18 19.5 18C18.4645 18 17.625 19.1753 17.625 20.625C17.625 22.0747 18.4645 23.25 19.5 23.25Z" fill="#664500"/>
|
||||
<path d="M28.5 23.25C29.5355 23.25 30.375 22.0747 30.375 20.625C30.375 19.1753 29.5355 18 28.5 18C27.4645 18 26.625 19.1753 26.625 20.625C26.625 22.0747 27.4645 23.25 28.5 23.25Z" fill="#664500"/>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_1329_27188">
|
||||
<rect width="27" height="27" fill="white" transform="translate(10.5 10.5)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.3 KiB |
14
packages/console/src/assets/images/owl.svg
Normal file
14
packages/console/src/assets/images/owl.svg
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect opacity="0.3" width="48" height="48" rx="16" fill="#ECD2CA"/>
|
||||
<path d="M15.9878 18.75C11.6956 25.5623 16.7063 32.25 16.7063 32.25C16.7063 32.25 18.8618 31.9185 21.8626 28.35C24.8626 24.7815 15.9878 18.75 15.9878 18.75ZM31.9943 18.75C36.2866 25.5623 31.2758 32.25 31.2758 32.25C31.2758 32.25 29.1203 31.9185 26.1196 28.35C23.1188 24.7815 31.9943 18.75 31.9943 18.75Z" fill="#662113"/>
|
||||
<path d="M21.9022 34.1677C21.81 33.996 21.6645 33.8797 21.504 33.7957C19.98 32.1667 21.0622 30.258 21.0622 30.258C21.0622 29.7307 22.0155 28.35 21.0622 28.35L20.1082 29.304C19.1542 30.2572 19.1542 33.1207 19.1542 33.1207H17.2462C16.719 33.1207 16.2922 33.5467 16.2922 34.0747C16.2922 34.6005 16.719 35.028 17.2462 35.028H18.3022L18.0907 35.1427C17.6272 35.3932 17.4547 35.9715 17.7052 36.4372C17.9557 36.8992 18.5347 37.0732 18.9982 36.8227L21.516 35.4607C21.9802 35.2102 22.1505 34.632 21.9022 34.1677ZM26.0992 34.1677C26.1915 33.996 26.337 33.8797 26.4967 33.7957C28.0215 32.1667 26.9385 30.258 26.9385 30.258C26.9385 29.7307 25.9852 28.35 26.9385 28.35L27.8925 29.304C28.8472 30.2572 28.8472 33.1207 28.8472 33.1207H30.7552C31.2832 33.1207 31.7085 33.5467 31.7085 34.0747C31.7085 34.6005 31.284 35.028 30.7552 35.028H29.6992L29.91 35.1427C30.375 35.3932 30.546 35.9715 30.2962 36.4372C30.0442 36.8992 29.4675 37.0732 29.0017 36.8227L26.4847 35.4607C26.0205 35.2102 25.8495 34.632 26.0992 34.1677Z" fill="#FFAC33"/>
|
||||
<path d="M31.7085 18.969C33.8767 14.4 31.7085 11.0625 31.7085 11.0625C31.7085 11.0625 27.3727 11.7817 26.6505 13.2188C25.7362 15.0368 31.7085 18.969 31.7085 18.969Z" fill="#662113"/>
|
||||
<path d="M32.6715 20.0535C32.6715 27.7762 30.3075 35.4998 24 35.4998C17.6933 35.4998 15.3278 27.7762 15.3278 20.0535C15.3278 12.33 19.2105 12.0623 24 12.0623C28.7903 12.0623 32.6715 12.33 32.6715 20.0535Z" fill="#662113"/>
|
||||
<path d="M31.2495 23.8035C31.2495 31.5263 25.419 34.7498 24 34.7498C22.581 34.7498 16.7505 31.5263 16.7505 23.8035C16.7505 16.08 31.2495 16.08 31.2495 23.8035Z" fill="#C1694F"/>
|
||||
<path d="M16.2915 18.969C14.1233 14.4 16.2915 11.0625 16.2915 11.0625C16.2915 11.0625 20.628 11.7817 21.351 13.2188C22.2645 15.0368 16.2915 18.969 16.2915 18.969Z" fill="#662113"/>
|
||||
<path d="M21.6967 13.7798C18.5265 12.5918 16.2915 11.0625 16.2915 11.0625C16.2915 11.0625 14.7345 13.4782 15.5955 17.007C15.93 18.6097 17.0505 20.1532 18.5235 20.5035C20.5012 20.9738 24 20.4668 24 17.5312C24 15.51 23.1945 14.3423 21.6967 13.7798ZM26.3032 13.7798C29.4735 12.5918 31.7077 11.0625 31.7077 11.0625C31.7077 11.0625 33.2647 13.4782 32.4037 17.007C32.07 18.6097 30.9495 20.1532 29.4772 20.5035C27.4987 20.9738 24 20.4668 24 17.5312C24 15.51 24.8055 14.3423 26.3032 13.7798Z" fill="#C1694F"/>
|
||||
<path d="M22.5622 16.8127C22.5622 18.4005 21.2752 19.6875 19.6875 19.6875C18.0997 19.6875 16.8127 18.4005 16.8127 16.8127C16.8127 15.225 18.1005 13.938 19.6875 13.938C21.2752 13.9373 22.5622 15.225 22.5622 16.8127ZM31.1872 16.8127C31.1872 18.4005 29.9002 19.6875 28.3125 19.6875C26.7247 19.6875 25.4377 18.4005 25.4377 16.8127C25.4377 15.225 26.7247 13.938 28.3125 13.938C29.9002 13.938 31.1872 15.225 31.1872 16.8127Z" fill="#FFD983"/>
|
||||
<path d="M21.1253 16.8127C21.1253 17.607 20.4818 18.2505 19.6875 18.2505C18.8933 18.2505 18.2498 17.607 18.2498 16.8127C18.2498 16.0192 18.8933 15.375 19.6875 15.375C20.4818 15.375 21.1253 16.0185 21.1253 16.8127ZM29.7503 16.8127C29.7503 17.607 29.1068 18.2505 28.3125 18.2505C27.5183 18.2505 26.8748 17.607 26.8748 16.8127C26.8748 16.0192 27.5183 15.375 28.3125 15.375C29.1068 15.375 29.7503 16.0185 29.7503 16.8127Z" fill="#292F33"/>
|
||||
<path d="M26.1562 20.0468C26.1562 21.8333 24 22.5623 24 22.5623C24 22.5623 21.8438 21.8325 21.8438 20.0468C21.8438 18.261 24 17.5312 24 17.5312C24 17.5312 26.1562 18.2603 26.1562 20.0468Z" fill="#FFCC4D"/>
|
||||
<path d="M26.1562 20.0467C26.1562 21.8332 24 22.5622 24 22.5622C24 22.5622 21.8438 21.8325 21.8438 20.0467C22.7422 20.9452 24 21.1252 24 21.1252C24 21.1252 25.2578 20.9452 26.1562 20.0467Z" fill="#F4900C"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 4 KiB |
65
packages/console/src/pages/GetStarted/index.module.scss
Normal file
65
packages/console/src/pages/GetStarted/index.module.scss
Normal file
|
|
@ -0,0 +1,65 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
margin-bottom: _.unit(6);
|
||||
|
||||
.title {
|
||||
font: var(--font-title-large);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: _.unit(1);
|
||||
padding-right: _.unit(6);
|
||||
font: var(--font-body-medium);
|
||||
color: var(--color-caption);
|
||||
|
||||
.hideButton {
|
||||
color: var(--color-primary);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
display: flex;
|
||||
padding: _.unit(6) _.unit(8);
|
||||
|
||||
.icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin-right: _.unit(6);
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.title {
|
||||
font: var(--font-title-medium);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font: var(--font-body-medium);
|
||||
color: var(--color-caption);
|
||||
}
|
||||
}
|
||||
|
||||
.button {
|
||||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
.card + .card {
|
||||
margin-top: _.unit(4);
|
||||
}
|
||||
115
packages/console/src/pages/GetStarted/index.tsx
Normal file
115
packages/console/src/pages/GetStarted/index.tsx
Normal file
|
|
@ -0,0 +1,115 @@
|
|||
import { AdminConsoleKey, I18nKey } from '@logto/phrases';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
import cakeIcon from '@/assets/images/cake.svg';
|
||||
import crabIcon from '@/assets/images/crab.svg';
|
||||
import drinkIcon from '@/assets/images/drink.svg';
|
||||
import frogIcon from '@/assets/images/frog.svg';
|
||||
import grinningFaceIcon from '@/assets/images/grinning-face.svg';
|
||||
import owlIcon from '@/assets/images/owl.svg';
|
||||
import Button from '@/components/Button';
|
||||
import Card from '@/components/Card';
|
||||
import Spacer from '@/components/Spacer';
|
||||
|
||||
import * as styles from './index.module.scss';
|
||||
|
||||
const GetStarted = () => {
|
||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
||||
const data: Array<{
|
||||
title: AdminConsoleKey;
|
||||
subtitle: AdminConsoleKey;
|
||||
icon: string;
|
||||
buttonText: I18nKey;
|
||||
onClick: () => void;
|
||||
}> = [
|
||||
{
|
||||
title: 'get_started.card1_title',
|
||||
subtitle: 'get_started.card1_subtitle',
|
||||
icon: grinningFaceIcon,
|
||||
buttonText: 'general.check_out',
|
||||
onClick: () => {
|
||||
console.log('tada!');
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'get_started.card2_title',
|
||||
subtitle: 'get_started.card2_subtitle',
|
||||
icon: cakeIcon,
|
||||
buttonText: 'general.create',
|
||||
onClick: () => {
|
||||
console.log('tada!');
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'get_started.card3_title',
|
||||
subtitle: 'get_started.card3_subtitle',
|
||||
icon: drinkIcon,
|
||||
buttonText: 'general.create',
|
||||
onClick: () => {
|
||||
console.log('tada!');
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'get_started.card4_title',
|
||||
subtitle: 'get_started.card4_subtitle',
|
||||
icon: crabIcon,
|
||||
buttonText: 'general.set_up',
|
||||
onClick: () => {
|
||||
console.log('tada!');
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'get_started.card5_title',
|
||||
subtitle: 'get_started.card5_subtitle',
|
||||
icon: owlIcon,
|
||||
buttonText: 'general.customize',
|
||||
onClick: () => {
|
||||
console.log('tada!');
|
||||
},
|
||||
},
|
||||
{
|
||||
title: 'get_started.card6_title',
|
||||
subtitle: 'get_started.card6_subtitle',
|
||||
icon: frogIcon,
|
||||
buttonText: 'general.check_out',
|
||||
onClick: () => {
|
||||
console.log('tada!');
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.header}>
|
||||
<div className={styles.title}>{t('get_started.title')}</div>
|
||||
<div className={styles.subtitle}>
|
||||
<span>{t('get_started.subtitle_part1')}</span>
|
||||
<Spacer />
|
||||
<span>
|
||||
{t('get_started.subtitle_part2')}
|
||||
<span className={styles.hideButton}>{t('get_started.hide_this')}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
{data.map(({ title, subtitle, icon, buttonText, onClick }) => (
|
||||
<Card key={title} className={styles.card}>
|
||||
<img className={styles.icon} src={icon} />
|
||||
<div className={styles.wrapper}>
|
||||
<div className={styles.title}>{t(title)}</div>
|
||||
<div className={styles.subtitle}>{t(subtitle)}</div>
|
||||
</div>
|
||||
<Button
|
||||
className={styles.button}
|
||||
type="outline"
|
||||
size="large"
|
||||
title={buttonText}
|
||||
onClick={onClick}
|
||||
/>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default GetStarted;
|
||||
|
|
@ -13,6 +13,10 @@ const translation = {
|
|||
added: 'Added',
|
||||
cancel: 'Cancel',
|
||||
confirm: 'Confirm',
|
||||
check_out: 'Check out',
|
||||
create: 'Create',
|
||||
set_up: 'Set up',
|
||||
customize: 'Customize',
|
||||
},
|
||||
main_flow: {
|
||||
input: {
|
||||
|
|
@ -268,6 +272,29 @@ const translation = {
|
|||
more_options: 'MORE OPTIONS',
|
||||
connector_deleted: 'The connector has been deleted.',
|
||||
},
|
||||
get_started: {
|
||||
title: 'How do you want to get started with Logto?',
|
||||
subtitle_part1: 'Here are the following things you can do',
|
||||
subtitle_part2: 'I’m done with this set up. ',
|
||||
hide_this: 'Hide this',
|
||||
card1_title: 'Logto is a XXX for customer identity. Check out our demo',
|
||||
card1_subtitle:
|
||||
'Setup a mobile, single page or traditional application to use Logto for Authentication.',
|
||||
card2_title: 'Create and integrate the first application',
|
||||
card2_subtitle:
|
||||
'Setup a mobile, single page or traditional application to use Logto for Authentication.',
|
||||
card3_title: 'Configure connectors to enable passwordless',
|
||||
card3_subtitle:
|
||||
'Setup a mobile, single page or traditional application to use Logto for Authentication.',
|
||||
card4_title: 'One click to sign in',
|
||||
card4_subtitle:
|
||||
'With this step, users can use email or phone numbers to sign in without a password or use social identity to sign in.',
|
||||
card5_title: 'Customize sign-in experience',
|
||||
card5_subtitle:
|
||||
'Customize the sign in UI and branding. This is what the end user will see on the app side.',
|
||||
card6_title: 'Further readings',
|
||||
card6_subtitle: 'Learn more about Logto and how to use it.',
|
||||
},
|
||||
users: {
|
||||
title: 'User Management',
|
||||
subtitle:
|
||||
|
|
|
|||
|
|
@ -15,6 +15,10 @@ const translation = {
|
|||
added: '已添加',
|
||||
cancel: '取消',
|
||||
confirm: '确认',
|
||||
check_out: '查看',
|
||||
create: '创建',
|
||||
set_up: '配置',
|
||||
customize: '自定义',
|
||||
},
|
||||
main_flow: {
|
||||
input: {
|
||||
|
|
@ -265,6 +269,29 @@ const translation = {
|
|||
more_options: '更多选项',
|
||||
connector_deleted: '成功删除连接器。',
|
||||
},
|
||||
get_started: {
|
||||
title: '还不知道如何使用 Logto?',
|
||||
subtitle_part1: '下列是一些适合您快速上手的事情',
|
||||
subtitle_part2: '这配置页面我要看吐了，',
|
||||
hide_this: '退下！',
|
||||
card1_title: 'Logto 是您没有使用过的全新身份管理工具，来看看我们的 Demo 吧',
|
||||
card1_subtitle:
|
||||
'无论是 mobile 应用，SPA web 还是传统 web 应用，您都可以使用 Logto，快速创建和管理身份，实现登录验证服务。',
|
||||
card2_title: '快来创建您的第一款应用吧',
|
||||
card2_subtitle:
|
||||
'Setup a mobile, single page or traditional application to use Logto for Authentication.',
|
||||
card3_title: '轻松配置连接器，实现无密码登录',
|
||||
card3_subtitle:
|
||||
'Setup a mobile, single page or traditional application to use Logto for Authentication.',
|
||||
card4_title: 'One click to sign in',
|
||||
card4_subtitle:
|
||||
'With this step, users can use email or phone numbers to sign in without a password or use social identity to sign in.',
|
||||
card5_title: '自定义您的 sign-in experience',
|
||||
card5_subtitle:
|
||||
'Customize the sign in UI and branding. This is what the end user will see on the app side.',
|
||||
card6_title: 'Further readings',
|
||||
card6_subtitle: 'Learn more about Logto and how to use it.',
|
||||
},
|
||||
users: {
|
||||
title: '用户管理',
|
||||
subtitle: '管理已注册用户, 创建新用户，编辑用户资料。',
|
||||
|
|
|
|||
Loading…
Reference in a new issue