mirror of
https://github.com/hasura/graphql-engine.git
synced 2024-12-14 17:02:49 +03:00
console: Use case experiment
[GT-555]: https://hasurahq.atlassian.net/browse/GT-555?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ PR-URL: https://github.com/hasura/graphql-engine-mono/pull/8621 Co-authored-by: Rikin Kachhia <54616969+rikinsk@users.noreply.github.com> GitOrigin-RevId: f7d192f637948eebdf157d7ee6e9834da42bd3a9
This commit is contained in:
Varun Dey
hasura-bot
parent
904803c09d
commit
5addb8cfca
@ -5,6 +5,7 @@ import {
|
||||
ConnectDBScreen,
|
||||
TemplateSummary,
|
||||
DialogContainer,
|
||||
UseCaseScreen,
|
||||
} from './components';
|
||||
|
||||
import { useWizardState } from './hooks';
|
||||
@ -86,6 +87,12 @@ export function Root() {
|
||||
</DialogContainer>
|
||||
);
|
||||
}
|
||||
case 'use-case-onboarding':
|
||||
return (
|
||||
<DialogContainer header="">
|
||||
<UseCaseScreen dismiss={dismiss} dispatch={dispatch} />
|
||||
</DialogContainer>
|
||||
);
|
||||
case 'hidden':
|
||||
default: {
|
||||
return null;
|
||||
|
||||
@ -0,0 +1,180 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { Button } from '../../../../../new-components/Button';
|
||||
import { LS_KEYS, removeLSItem } from '../../../../../utils/localStorage';
|
||||
import dataApiCard from './images/data-api.svg';
|
||||
import dataFederationCard from './images/data-sources.svg';
|
||||
import gatewayCard from './images/gateway.svg';
|
||||
import gqlBackend from './images/gql-backend.svg';
|
||||
import hasuraIllustrations from './images/hasura-illustration.svg';
|
||||
import { emitOnboardingEvent, persistSkippedOnboarding } from '../../utils';
|
||||
import { getUseCaseExperimentOnboardingVariables } from '../../constants';
|
||||
import { Analytics, trackCustomEvent } from '../../../../Analytics';
|
||||
import { Dispatch } from '../../../../../types';
|
||||
import _push from '../../../../../components/Services/Data/push';
|
||||
|
||||
type UseCaseScreenProps = {
|
||||
dismiss: () => void;
|
||||
dispatch: Dispatch;
|
||||
};
|
||||
|
||||
export type UseCases =
|
||||
| 'data-api'
|
||||
| 'gql-backend'
|
||||
| 'data-federation'
|
||||
| 'gateway';
|
||||
|
||||
interface UseCaseAssets {
|
||||
id: UseCases;
|
||||
title: string;
|
||||
description: string;
|
||||
image: string;
|
||||
consoleUrl: string;
|
||||
docsUrl: string;
|
||||
}
|
||||
|
||||
export const UseCaseScreen = (props: UseCaseScreenProps) => {
|
||||
const [selectedUseCase, setSelectedUseCase] = useState<UseCases | null>(null);
|
||||
|
||||
useEffect(() => {
|
||||
trackCustomEvent({
|
||||
location: 'Console',
|
||||
action: 'Load',
|
||||
object: 'Use Case Wizard',
|
||||
});
|
||||
}, []);
|
||||
|
||||
const useCasesAssets: UseCaseAssets[] = [
|
||||
{
|
||||
id: 'data-api',
|
||||
image: dataApiCard,
|
||||
title: 'Data API',
|
||||
description:
|
||||
'Build an instant, real-time API over your data sources for easy and performant access',
|
||||
consoleUrl: '/',
|
||||
docsUrl: 'https://hasura.io/docs/latest/resources/use-case/data-api/',
|
||||
},
|
||||
{
|
||||
id: 'gql-backend',
|
||||
image: gqlBackend,
|
||||
title: 'Graphql Backend',
|
||||
description:
|
||||
'Build a lightning-fast GraphQL backend and significantly accelerate your application development',
|
||||
consoleUrl: '/',
|
||||
docsUrl: 'https://hasura.io/docs/latest/resources/use-case/gql-backend/',
|
||||
},
|
||||
{
|
||||
id: 'data-federation',
|
||||
image: dataFederationCard,
|
||||
title: 'Data Federation',
|
||||
description:
|
||||
'Build an API that enables real-time data composition from different data sources',
|
||||
consoleUrl: '/',
|
||||
docsUrl:
|
||||
'https://hasura.io/docs/latest/resources/use-case/data-federation/',
|
||||
},
|
||||
{
|
||||
id: 'gateway',
|
||||
image: gatewayCard,
|
||||
title: 'Gateway Service',
|
||||
description:
|
||||
'Build a single entry point from client applications into an ecosystem of microservices',
|
||||
consoleUrl: '/',
|
||||
docsUrl: 'https://hasura.io/docs/latest/resources/use-case/api-gateway/',
|
||||
},
|
||||
];
|
||||
|
||||
const onSubmit = () => {
|
||||
const useCase = useCasesAssets.filter(
|
||||
useCase => useCase.id === selectedUseCase
|
||||
)[0];
|
||||
|
||||
removeLSItem(LS_KEYS.useCaseExperimentOnboarding);
|
||||
props.dispatch(_push(useCase.consoleUrl));
|
||||
window.open(useCase.docsUrl, '_blank', 'noreferrer,noopener');
|
||||
emitOnboardingEvent(getUseCaseExperimentOnboardingVariables(useCase.id));
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
className="use-case-container border border-solid border-gray-400 rounded-sm flex flex-col flex-wrap p-8 h-full bg-white"
|
||||
style={{
|
||||
width: '902px',
|
||||
}}
|
||||
>
|
||||
<div className="use-case-welcome-header flex justify-between w-full">
|
||||
<div className="use-case-welcome-text font-sans">
|
||||
<h1 className="text-xl font-bold text-cloud-darkest">
|
||||
Welcome to Hasura!
|
||||
</h1>
|
||||
<div className="text-muted-dark font-normal">
|
||||
Hasura can help you supercharge your development
|
||||
</div>
|
||||
</div>
|
||||
<div className="use-case-welcome-illustrations">
|
||||
<img src={hasuraIllustrations} alt="welcome" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="use-case-intro-text text-[#64748B] font-sans mt-3 mb-3.5">
|
||||
What would you like to build with Hasura?
|
||||
</div>
|
||||
<div className="use-cases flex flex-wrap justify-between gap-y-15 gap-y-8">
|
||||
{useCasesAssets.map((item, index) => (
|
||||
<label
|
||||
key={index}
|
||||
htmlFor={item.id}
|
||||
className="use-case-card flex flex-col cursor-pointer border border-solid border-slate-300 rounded focus-within:border focus-within:border-solid focus-within:border-amber-500 transition-shadow shadow-none hover:shadow-md w-[400px]"
|
||||
onChange={event => {
|
||||
const selectedUseCaseNode = event.target as HTMLInputElement;
|
||||
setSelectedUseCase(selectedUseCaseNode.id as UseCases);
|
||||
}}
|
||||
>
|
||||
<img src={item.image} alt={item.id} />
|
||||
<div className="data-api-description flex mt-3 ml-6 mb-2">
|
||||
<input
|
||||
type="radio"
|
||||
id={item.id}
|
||||
name="use-case"
|
||||
className="mt-1"
|
||||
/>
|
||||
<div className="flex flex-col font-sans ml-2">
|
||||
<div className="font-semibold text-slate-900">{item.title}</div>
|
||||
<div className="text-muted-dark font-normal">
|
||||
{item.description}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
<div className="use-case-cta flex justify-between w-full mt-8">
|
||||
<Analytics name="use-case-onboarding-skip">
|
||||
<div
|
||||
className="ml-xs mr-4 text-secondary flex items-center cursor-pointer"
|
||||
onClick={() => {
|
||||
props.dismiss();
|
||||
removeLSItem(LS_KEYS.useCaseExperimentOnboarding);
|
||||
persistSkippedOnboarding();
|
||||
}}
|
||||
>
|
||||
Skip
|
||||
</div>
|
||||
</Analytics>
|
||||
<Analytics
|
||||
name={`use-case-onboarding-${selectedUseCase}`}
|
||||
passHtmlAttributesToChildren
|
||||
>
|
||||
<Button
|
||||
mode="primary"
|
||||
disabled={selectedUseCase === null}
|
||||
onClick={() => {
|
||||
props.dismiss();
|
||||
onSubmit();
|
||||
}}
|
||||
>
|
||||
Continue
|
||||
</Button>
|
||||
</Analytics>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@ -0,0 +1,130 @@
|
||||
<svg width="400" height="174" viewBox="0 0 400 174" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_89_3037)">
|
||||
<g filter="url(#filter0_dd_89_3037)">
|
||||
<rect width="400" height="174" fill="#1699E2"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d_89_3037)">
|
||||
<rect x="75" y="68" width="98" height="37" rx="2.61538" fill="white"/>
|
||||
</g>
|
||||
<path d="M132.125 78.25H115.875C114.839 78.25 114 79.0895 114 80.125V93.875C114 94.9105 114.839 95.75 115.875 95.75H132.125C133.161 95.75 134 94.9105 134 93.875V80.125C134 79.0895 133.161 78.25 132.125 78.25ZM122.75 93.25H116.5V89.5H122.75V93.25ZM122.75 87H116.5V83.25H122.75V87ZM131.5 93.25H125.25V89.5H131.5V93.25ZM131.5 87H125.25V83.25H131.5V87Z" fill="#3B82F6"/>
|
||||
<g filter="url(#filter2_d_89_3037)">
|
||||
<rect x="75" y="117" width="98" height="37" rx="2.61538" fill="white"/>
|
||||
</g>
|
||||
<path d="M119 133H114V131H119V133ZM119 136H114V138H119V136ZM132.59 143L128.76 139.17C127.96 139.69 127.02 140 126 140C123.24 140 121 137.76 121 135C121 132.24 123.24 130 126 130C128.76 130 131 132.24 131 135C131 136.02 130.69 136.96 130.17 137.75L134 141.59L132.59 143ZM129 135C129 133.35 127.65 132 126 132C124.35 132 123 133.35 123 135C123 136.65 124.35 138 126 138C127.65 138 129 136.65 129 135ZM114 143H124V141H114V143Z" fill="#3B82F6"/>
|
||||
<g filter="url(#filter3_d_89_3037)">
|
||||
<rect x="75" y="19" width="98" height="37" rx="2.61538" fill="white"/>
|
||||
</g>
|
||||
<path d="M132.75 30.8571V32.6429C132.75 34.2165 128.831 35.5 124 35.5C119.169 35.5 115.25 34.2165 115.25 32.6429V30.8571C115.25 29.2835 119.169 28 124 28C128.831 28 132.75 29.2835 132.75 30.8571ZM132.75 34.875V38.8929C132.75 40.4665 128.831 41.75 124 41.75C119.169 41.75 115.25 40.4665 115.25 38.8929V34.875C117.13 36.1696 120.571 36.7723 124 36.7723C127.429 36.7723 130.87 36.1696 132.75 34.875ZM132.75 41.125V45.1429C132.75 46.7165 128.831 48 124 48C119.169 48 115.25 46.7165 115.25 45.1429V41.125C117.13 42.4196 120.571 43.0223 124 43.0223C127.429 43.0223 130.87 42.4196 132.75 41.125Z" fill="#3B82F6"/>
|
||||
<line x1="174.385" y1="87" x2="272.462" y2="87" stroke="#F59E0B" stroke-width="2.61538" stroke-linecap="round" stroke-dasharray="3.92 3.92"/>
|
||||
<g filter="url(#filter4_d_89_3037)">
|
||||
<rect x="257" y="69" width="68" height="37" rx="2.61538" fill="white"/>
|
||||
</g>
|
||||
<path d="M296.25 76H285.75C284.508 76 283.5 77.0078 283.5 78.25V97.75C283.5 98.9922 284.508 100 285.75 100H296.25C297.492 100 298.5 98.9922 298.5 97.75V78.25C298.5 77.0078 297.492 76 296.25 76ZM291 98.5C290.17 98.5 289.5 97.8297 289.5 97C289.5 96.1703 290.17 95.5 291 95.5C291.83 95.5 292.5 96.1703 292.5 97C292.5 97.8297 291.83 98.5 291 98.5Z" fill="#3B82F6"/>
|
||||
<g filter="url(#filter5_d_89_3037)">
|
||||
<rect x="196.615" y="68.6923" width="37.9231" height="36.6154" rx="18.3077" fill="white"/>
|
||||
</g>
|
||||
<g clip-path="url(#clip1_89_3037)">
|
||||
<path d="M223.808 84.9423C224.312 83.4186 224.009 80.3754 223.031 79.2525C222.903 79.1056 222.663 79.1266 222.557 79.2882L221.351 81.1225C221.052 81.4898 220.515 81.5738 220.113 81.3177C218.805 80.4887 217.242 80.006 215.563 80.006C213.883 80.006 212.32 80.4887 211.013 81.3177C210.61 81.5738 210.073 81.4877 209.774 81.1225L208.569 79.2882C208.463 79.1266 208.222 79.1056 208.095 79.2525C207.116 80.3754 206.813 83.4186 207.317 84.9423C207.484 85.4481 207.532 85.9833 207.432 86.5059C207.335 87.0222 207.235 87.6476 207.235 88.0799C207.235 92.5377 210.965 96.1539 215.563 96.1539C220.163 96.1539 223.89 92.5398 223.89 88.0799C223.89 87.6455 223.793 87.0222 223.693 86.5059C223.594 85.9833 223.641 85.4481 223.808 84.9423ZM215.563 94.349C212.008 94.349 209.116 91.545 209.116 88.0988C209.116 87.9855 209.121 87.8743 209.125 87.763C209.255 85.4145 210.725 83.406 212.807 82.449C213.643 82.0628 214.578 81.8487 215.563 81.8487C216.548 81.8487 217.483 82.0649 218.32 82.4511C220.403 83.4081 221.873 85.4166 222.003 87.763C222.009 87.8743 222.011 87.9855 222.011 88.0988C222.009 91.545 219.117 94.349 215.563 94.349Z" fill="black"/>
|
||||
<path d="M218.355 90.504L216.708 87.7357L215.294 85.4271C215.262 85.3725 215.201 85.3389 215.134 85.3389H213.783C213.716 85.3389 213.655 85.3746 213.623 85.4292C213.59 85.4858 213.59 85.5551 213.625 85.6097L214.976 87.8134L213.162 90.4956C213.125 90.5502 213.121 90.6215 213.153 90.6803C213.186 90.7391 213.248 90.7747 213.316 90.7747H214.675C214.738 90.7747 214.796 90.7432 214.831 90.6929L215.811 89.207L216.69 90.6845C216.723 90.7411 216.786 90.7747 216.85 90.7747H218.19C218.258 90.7747 218.318 90.7411 218.351 90.6845C218.39 90.6278 218.39 90.5607 218.355 90.504Z" fill="black"/>
|
||||
</g>
|
||||
<rect x="224.882" y="61.6509" width="19.3136" height="19.3136" rx="9.65681" fill="white"/>
|
||||
<g clip-path="url(#clip2_89_3037)">
|
||||
<path d="M230.119 73.7992L230.524 74.0184L235.035 66.6941L234.63 66.4749L230.119 73.7992Z" fill="#E535AB"/>
|
||||
<path d="M239.048 73.2141H230.026V73.6524H239.048V73.2141Z" fill="#E535AB"/>
|
||||
<path d="M230.205 73.4603L234.717 75.9028L234.951 75.5232L230.438 73.0807L230.205 73.4603Z" fill="#E535AB"/>
|
||||
<path d="M234.125 67.0946L238.637 69.5371L238.871 69.1575L234.358 66.715L234.125 67.0946Z" fill="#E535AB"/>
|
||||
<path d="M230.206 69.1559L230.44 69.5355L234.952 67.093L234.719 66.7134L230.206 69.1559Z" fill="#E535AB"/>
|
||||
<path d="M234.043 66.6941L238.554 74.0184L238.959 73.7992L234.448 66.4749L234.043 66.6941Z" fill="#E535AB"/>
|
||||
<path d="M230.851 68.8653H230.384V73.7503H230.851V68.8653Z" fill="#E535AB"/>
|
||||
<path d="M238.693 68.8653H238.225V73.7503H238.693V68.8653Z" fill="#E535AB"/>
|
||||
<path d="M234.433 75.3859L234.637 75.7175L238.562 73.5932L238.358 73.2616L234.433 75.3859Z" fill="#E535AB"/>
|
||||
<path d="M239.312 73.8928C239.042 74.3337 238.439 74.4843 237.969 74.2308C237.498 73.9773 237.338 73.4122 237.608 72.9712C237.879 72.5303 238.481 72.3798 238.952 72.6332C239.425 72.8894 239.586 73.4518 239.312 73.8928Z" fill="#E535AB"/>
|
||||
<path d="M231.465 69.6441C231.195 70.0851 230.592 70.2356 230.122 69.9821C229.652 69.7286 229.491 69.1636 229.761 68.7226C230.032 68.2816 230.635 68.1311 231.105 68.3846C231.575 68.6407 231.736 69.2032 231.465 69.6441Z" fill="#E535AB"/>
|
||||
<path d="M229.764 73.8928C229.494 73.4518 229.654 72.8894 230.125 72.6332C230.595 72.3798 231.195 72.5303 231.468 72.9712C231.739 73.4122 231.578 73.9746 231.108 74.2308C230.635 74.4843 230.035 74.3337 229.764 73.8928Z" fill="#E535AB"/>
|
||||
<path d="M237.611 69.6441C237.341 69.2032 237.501 68.6407 237.972 68.3846C238.442 68.1311 239.042 68.2816 239.315 68.7226C239.586 69.1636 239.425 69.726 238.955 69.9821C238.484 70.2356 237.882 70.0851 237.611 69.6441Z" fill="#E535AB"/>
|
||||
<path d="M234.538 76.4779C233.995 76.4779 233.555 76.066 233.555 75.5563C233.555 75.0467 233.995 74.6348 234.538 74.6348C235.082 74.6348 235.521 75.0467 235.521 75.5563C235.521 76.0633 235.082 76.4779 234.538 76.4779Z" fill="#E535AB"/>
|
||||
<path d="M234.538 67.9806C233.995 67.9806 233.555 67.5687 233.555 67.0591C233.555 66.5494 233.995 66.1375 234.538 66.1375C235.082 66.1375 235.521 66.5494 235.521 67.0591C235.521 67.5687 235.082 67.9806 234.538 67.9806Z" fill="#E535AB"/>
|
||||
</g>
|
||||
<rect x="224.882" y="61.6509" width="19.3136" height="19.3136" rx="9.65681" stroke="#1699E2" stroke-width="1.60947"/>
|
||||
<path d="M177 135.5V135.5C181.333 135.5 184.846 131.987 184.846 127.654V94.7694C184.846 90.4785 188.325 87 192.615 87V87" stroke="white" stroke-opacity="0.1" stroke-width="2" stroke-miterlimit="0" stroke-linecap="round" stroke-linejoin="bevel"/>
|
||||
<path d="M177.418 38.8783V38.8783C181.52 38.8783 184.846 42.2041 184.846 46.3066V79.2307C184.846 83.5216 188.325 87.0001 192.615 87.0001V87.0001" stroke="white" stroke-opacity="0.1" stroke-width="2" stroke-miterlimit="0" stroke-linecap="round" stroke-linejoin="bevel"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_dd_89_3037" x="-0.9375" y="-0.625" width="401.875" height="175.875" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feMorphology radius="0.3125" operator="erode" in="SourceAlpha" result="effect1_dropShadow_89_3037"/>
|
||||
<feOffset dy="0.3125"/>
|
||||
<feGaussianBlur stdDeviation="0.3125"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_89_3037"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="0.3125"/>
|
||||
<feGaussianBlur stdDeviation="0.46875"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
|
||||
<feBlend mode="normal" in2="effect1_dropShadow_89_3037" result="effect2_dropShadow_89_3037"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_89_3037" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d_89_3037" x="72.3846" y="66.6923" width="103.231" height="42.2308" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1.30769"/>
|
||||
<feGaussianBlur stdDeviation="1.30769"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_89_3037"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_89_3037" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter2_d_89_3037" x="72.3846" y="115.692" width="103.231" height="42.2308" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1.30769"/>
|
||||
<feGaussianBlur stdDeviation="1.30769"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_89_3037"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_89_3037" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter3_d_89_3037" x="72.3846" y="17.6923" width="103.231" height="42.2308" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1.30769"/>
|
||||
<feGaussianBlur stdDeviation="1.30769"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_89_3037"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_89_3037" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter4_d_89_3037" x="254.385" y="67.6923" width="73.2308" height="42.2308" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1.30769"/>
|
||||
<feGaussianBlur stdDeviation="1.30769"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_89_3037"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_89_3037" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter5_d_89_3037" x="194" y="67.3846" width="43.1539" height="41.8462" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1.30769"/>
|
||||
<feGaussianBlur stdDeviation="1.30769"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_89_3037"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_89_3037" result="shape"/>
|
||||
</filter>
|
||||
<clipPath id="clip0_89_3037">
|
||||
<rect width="400" height="174" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_89_3037">
|
||||
<rect width="17" height="17" fill="white" transform="translate(207.077 79.1539)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip2_89_3037">
|
||||
<rect width="11.2663" height="10.5621" fill="white" transform="translate(228.905 66.0267)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
@ -0,0 +1,131 @@
|
||||
<svg width="400" height="174" viewBox="0 0 400 174" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_93_3199)">
|
||||
<g filter="url(#filter0_dd_93_3199)">
|
||||
<rect width="400" height="174" fill="#7C3AED"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d_93_3199)">
|
||||
<rect x="75" y="68.5" width="98" height="37" rx="2" fill="white"/>
|
||||
</g>
|
||||
<path d="M132.75 79.3571V81.1429C132.75 82.7165 128.831 84 124 84C119.169 84 115.25 82.7165 115.25 81.1429V79.3571C115.25 77.7835 119.169 76.5 124 76.5C128.831 76.5 132.75 77.7835 132.75 79.3571ZM132.75 83.375V87.3929C132.75 88.9665 128.831 90.25 124 90.25C119.169 90.25 115.25 88.9665 115.25 87.3929V83.375C117.13 84.6696 120.571 85.2723 124 85.2723C127.429 85.2723 130.87 84.6696 132.75 83.375ZM132.75 89.625V93.6429C132.75 95.2165 128.831 96.5 124 96.5C119.169 96.5 115.25 95.2165 115.25 93.6429V89.625C117.13 90.9196 120.571 91.5223 124 91.5223C127.429 91.5223 130.87 90.9196 132.75 89.625Z" fill="#3B82F6"/>
|
||||
<g filter="url(#filter2_d_93_3199)">
|
||||
<rect x="75" y="117.077" width="98" height="37" rx="2" fill="white"/>
|
||||
</g>
|
||||
<path d="M132.75 129.357V131.143C132.75 132.717 128.831 134 124 134C119.169 134 115.25 132.717 115.25 131.143V129.357C115.25 127.783 119.169 126.5 124 126.5C128.831 126.5 132.75 127.783 132.75 129.357ZM132.75 133.375V137.393C132.75 138.967 128.831 140.25 124 140.25C119.169 140.25 115.25 138.967 115.25 137.393V133.375C117.13 134.67 120.571 135.272 124 135.272C127.429 135.272 130.87 134.67 132.75 133.375ZM132.75 139.625V143.643C132.75 145.217 128.831 146.5 124 146.5C119.169 146.5 115.25 145.217 115.25 143.643V139.625C117.13 140.92 120.571 141.522 124 141.522C127.429 141.522 130.87 140.92 132.75 139.625Z" fill="#3B82F6"/>
|
||||
<g filter="url(#filter3_d_93_3199)">
|
||||
<rect x="75" y="19" width="98" height="37" rx="2" fill="white"/>
|
||||
</g>
|
||||
<path d="M132.75 30.3571V32.1429C132.75 33.7165 128.831 35 124 35C119.169 35 115.25 33.7165 115.25 32.1429V30.3571C115.25 28.7835 119.169 27.5 124 27.5C128.831 27.5 132.75 28.7835 132.75 30.3571ZM132.75 34.375V38.3929C132.75 39.9665 128.831 41.25 124 41.25C119.169 41.25 115.25 39.9665 115.25 38.3929V34.375C117.13 35.6696 120.571 36.2723 124 36.2723C127.429 36.2723 130.87 35.6696 132.75 34.375ZM132.75 40.625V44.6429C132.75 46.2165 128.831 47.5 124 47.5C119.169 47.5 115.25 46.2165 115.25 44.6429V40.625C117.13 41.9196 120.571 42.5223 124 42.5223C127.429 42.5223 130.87 41.9196 132.75 40.625Z" fill="#3B82F6"/>
|
||||
<line x1="174.385" y1="87" x2="272.462" y2="87" stroke="#F59E0B" stroke-width="2.61538" stroke-linecap="round" stroke-dasharray="3.92 3.92"/>
|
||||
<g filter="url(#filter4_d_93_3199)">
|
||||
<rect x="257" y="68.5" width="68" height="37" rx="2.61538" fill="white"/>
|
||||
</g>
|
||||
<path d="M296.25 75.5H285.75C284.508 75.5 283.5 76.5078 283.5 77.75V97.25C283.5 98.4922 284.508 99.5 285.75 99.5H296.25C297.492 99.5 298.5 98.4922 298.5 97.25V77.75C298.5 76.5078 297.492 75.5 296.25 75.5ZM291 98C290.17 98 289.5 97.3297 289.5 96.5C289.5 95.6703 290.17 95 291 95C291.83 95 292.5 95.6703 292.5 96.5C292.5 97.3297 291.83 98 291 98Z" fill="#3B82F6"/>
|
||||
<g filter="url(#filter5_d_93_3199)">
|
||||
<rect x="197" y="68.5" width="37.9231" height="36.6154" rx="18.3077" fill="white"/>
|
||||
<rect x="197.654" y="69.1538" width="36.6154" height="35.3077" rx="17.6538" stroke="#7C3AED" stroke-width="1.30769"/>
|
||||
</g>
|
||||
<g clip-path="url(#clip1_93_3199)">
|
||||
<path d="M223.808 84.9423C224.312 83.4186 224.009 80.3754 223.031 79.2526C222.903 79.1057 222.663 79.1266 222.557 79.2883L221.351 81.1226C221.052 81.4899 220.515 81.5738 220.113 81.3178C218.805 80.4887 217.242 80.006 215.563 80.006C213.883 80.006 212.32 80.4887 211.013 81.3178C210.61 81.5738 210.073 81.4878 209.774 81.1226L208.569 79.2883C208.463 79.1266 208.222 79.1057 208.095 79.2526C207.116 80.3754 206.813 83.4186 207.317 84.9423C207.484 85.4481 207.532 85.9833 207.432 86.5059C207.335 87.0222 207.235 87.6476 207.235 88.08C207.235 92.5378 210.965 96.1539 215.563 96.1539C220.163 96.1539 223.89 92.5399 223.89 88.08C223.89 87.6455 223.793 87.0222 223.693 86.5059C223.594 85.9833 223.641 85.4481 223.808 84.9423ZM215.563 94.349C212.008 94.349 209.116 91.545 209.116 88.0989C209.116 87.9855 209.121 87.8743 209.125 87.7631C209.255 85.4146 210.725 83.406 212.807 82.449C213.643 82.0628 214.578 81.8487 215.563 81.8487C216.548 81.8487 217.483 82.0649 218.32 82.4511C220.403 83.4081 221.873 85.4166 222.003 87.7631C222.009 87.8743 222.011 87.9855 222.011 88.0989C222.009 91.545 219.117 94.349 215.563 94.349Z" fill="black"/>
|
||||
<path d="M218.355 90.504L216.708 87.7358L215.294 85.4271C215.262 85.3725 215.201 85.339 215.134 85.339H213.783C213.716 85.339 213.655 85.3746 213.623 85.4292C213.59 85.4859 213.59 85.5551 213.625 85.6097L214.976 87.8134L213.162 90.4956C213.125 90.5502 213.121 90.6215 213.153 90.6803C213.186 90.7391 213.248 90.7748 213.316 90.7748H214.675C214.738 90.7748 214.796 90.7433 214.831 90.6929L215.811 89.207L216.69 90.6845C216.723 90.7412 216.786 90.7748 216.85 90.7748H218.19C218.258 90.7748 218.318 90.7412 218.351 90.6845C218.39 90.6278 218.39 90.5607 218.355 90.504Z" fill="black"/>
|
||||
</g>
|
||||
<rect x="224.882" y="61.6509" width="19.3136" height="19.3136" rx="9.65681" fill="white"/>
|
||||
<g clip-path="url(#clip2_93_3199)">
|
||||
<path d="M230.119 73.7992L230.524 74.0184L235.035 66.6941L234.63 66.4749L230.119 73.7992Z" fill="#E535AB"/>
|
||||
<path d="M239.048 73.2141H230.026V73.6524H239.048V73.2141Z" fill="#E535AB"/>
|
||||
<path d="M230.205 73.4603L234.717 75.9028L234.951 75.5232L230.438 73.0807L230.205 73.4603Z" fill="#E535AB"/>
|
||||
<path d="M234.125 67.0946L238.637 69.537L238.871 69.1575L234.358 66.715L234.125 67.0946Z" fill="#E535AB"/>
|
||||
<path d="M230.206 69.1559L230.44 69.5355L234.952 67.093L234.719 66.7134L230.206 69.1559Z" fill="#E535AB"/>
|
||||
<path d="M234.043 66.6941L238.554 74.0184L238.959 73.7992L234.448 66.4749L234.043 66.6941Z" fill="#E535AB"/>
|
||||
<path d="M230.851 68.8653H230.384V73.7502H230.851V68.8653Z" fill="#E535AB"/>
|
||||
<path d="M238.693 68.8653H238.225V73.7502H238.693V68.8653Z" fill="#E535AB"/>
|
||||
<path d="M234.433 75.3859L234.637 75.7175L238.562 73.5932L238.358 73.2616L234.433 75.3859Z" fill="#E535AB"/>
|
||||
<path d="M239.312 73.8928C239.042 74.3337 238.439 74.4843 237.969 74.2308C237.498 73.9773 237.338 73.4122 237.608 72.9712C237.879 72.5303 238.481 72.3798 238.952 72.6332C239.425 72.8894 239.586 73.4518 239.312 73.8928Z" fill="#E535AB"/>
|
||||
<path d="M231.465 69.6442C231.195 70.0851 230.592 70.2356 230.122 69.9821C229.652 69.7286 229.491 69.1636 229.761 68.7226C230.032 68.2816 230.635 68.1311 231.105 68.3846C231.575 68.6407 231.736 69.2032 231.465 69.6442Z" fill="#E535AB"/>
|
||||
<path d="M229.764 73.8928C229.494 73.4518 229.654 72.8894 230.125 72.6332C230.595 72.3798 231.195 72.5303 231.468 72.9712C231.739 73.4122 231.578 73.9746 231.108 74.2308C230.635 74.4843 230.035 74.3337 229.764 73.8928Z" fill="#E535AB"/>
|
||||
<path d="M237.611 69.6442C237.341 69.2032 237.501 68.6407 237.972 68.3846C238.442 68.1311 239.042 68.2816 239.315 68.7226C239.586 69.1636 239.425 69.726 238.955 69.9821C238.484 70.2356 237.882 70.0851 237.611 69.6442Z" fill="#E535AB"/>
|
||||
<path d="M234.538 76.4779C233.995 76.4779 233.555 76.066 233.555 75.5563C233.555 75.0467 233.995 74.6348 234.538 74.6348C235.082 74.6348 235.521 75.0467 235.521 75.5563C235.521 76.0633 235.082 76.4779 234.538 76.4779Z" fill="#E535AB"/>
|
||||
<path d="M234.538 67.9806C233.995 67.9806 233.555 67.5687 233.555 67.0591C233.555 66.5494 233.995 66.1375 234.538 66.1375C235.082 66.1375 235.521 66.5494 235.521 67.0591C235.521 67.5687 235.082 67.9806 234.538 67.9806Z" fill="#E535AB"/>
|
||||
</g>
|
||||
<rect x="224.882" y="61.6509" width="19.3136" height="19.3136" rx="9.65681" stroke="#7C3AED" stroke-width="1.60947"/>
|
||||
<path d="M177 135.577V135.577C181.333 135.577 184.846 132.064 184.846 127.731V94.9616C184.846 90.4583 188.497 86.8077 193 86.8077V86.8077" stroke="white" stroke-opacity="0.1" stroke-width="2" stroke-miterlimit="0" stroke-linecap="round" stroke-linejoin="bevel"/>
|
||||
<path d="M177.418 38.8783V38.8783C181.52 38.8783 184.846 42.2041 184.846 46.3067V78.6538C184.846 83.1571 188.497 86.8077 193 86.8077V86.8077" stroke="white" stroke-opacity="0.1" stroke-width="2" stroke-miterlimit="0" stroke-linecap="round" stroke-linejoin="bevel"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_dd_93_3199" x="-0.9375" y="-0.625" width="401.875" height="175.875" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feMorphology radius="0.3125" operator="erode" in="SourceAlpha" result="effect1_dropShadow_93_3199"/>
|
||||
<feOffset dy="0.3125"/>
|
||||
<feGaussianBlur stdDeviation="0.3125"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_93_3199"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="0.3125"/>
|
||||
<feGaussianBlur stdDeviation="0.46875"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
|
||||
<feBlend mode="normal" in2="effect1_dropShadow_93_3199" result="effect2_dropShadow_93_3199"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_93_3199" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d_93_3199" x="73" y="67.5" width="102" height="41" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1"/>
|
||||
<feGaussianBlur stdDeviation="1"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_93_3199"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_93_3199" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter2_d_93_3199" x="73" y="116.077" width="102" height="41" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1"/>
|
||||
<feGaussianBlur stdDeviation="1"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_93_3199"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_93_3199" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter3_d_93_3199" x="73" y="18" width="102" height="41" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1"/>
|
||||
<feGaussianBlur stdDeviation="1"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_93_3199"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_93_3199" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter4_d_93_3199" x="254.385" y="67.1923" width="73.2308" height="42.2308" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1.30769"/>
|
||||
<feGaussianBlur stdDeviation="1.30769"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_93_3199"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_93_3199" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter5_d_93_3199" x="194.385" y="67.1923" width="43.1539" height="41.8462" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1.30769"/>
|
||||
<feGaussianBlur stdDeviation="1.30769"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_93_3199"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_93_3199" result="shape"/>
|
||||
</filter>
|
||||
<clipPath id="clip0_93_3199">
|
||||
<rect width="400" height="174" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_93_3199">
|
||||
<rect width="17" height="17" fill="white" transform="translate(207.077 79.1539)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip2_93_3199">
|
||||
<rect width="11.2663" height="10.5621" fill="white" transform="translate(228.905 66.0267)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 13 KiB |
@ -0,0 +1,158 @@
|
||||
<svg width="400" height="174" viewBox="0 0 400 174" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_93_3280)">
|
||||
<g filter="url(#filter0_dd_93_3280)">
|
||||
<rect width="400" height="174" fill="#6366F1"/>
|
||||
</g>
|
||||
<g filter="url(#filter1_d_93_3280)">
|
||||
<rect x="34" y="30" width="98" height="37" rx="2" fill="white"/>
|
||||
</g>
|
||||
<path d="M91.75 40.8571V42.6429C91.75 44.2165 87.8307 45.5 83 45.5C78.1693 45.5 74.25 44.2165 74.25 42.6429V40.8571C74.25 39.2835 78.1693 38 83 38C87.8307 38 91.75 39.2835 91.75 40.8571ZM91.75 44.875V48.8929C91.75 50.4665 87.8307 51.75 83 51.75C78.1693 51.75 74.25 50.4665 74.25 48.8929V44.875C76.1299 46.1696 79.5706 46.7723 83 46.7723C86.4294 46.7723 89.8701 46.1696 91.75 44.875ZM91.75 51.125V55.1429C91.75 56.7165 87.8307 58 83 58C78.1693 58 74.25 56.7165 74.25 55.1429V51.125C76.1299 52.4196 79.5706 53.0223 83 53.0223C86.4294 53.0223 89.8701 52.4196 91.75 51.125Z" fill="#3B82F6"/>
|
||||
<g filter="url(#filter2_d_93_3280)">
|
||||
<rect x="34" y="107" width="98" height="37" rx="2" fill="white"/>
|
||||
</g>
|
||||
<path d="M91.75 118.857V120.643C91.75 122.217 87.8307 123.5 83 123.5C78.1693 123.5 74.25 122.217 74.25 120.643V118.857C74.25 117.283 78.1693 116 83 116C87.8307 116 91.75 117.283 91.75 118.857ZM91.75 122.875V126.893C91.75 128.467 87.8307 129.75 83 129.75C78.1693 129.75 74.25 128.467 74.25 126.893V122.875C76.1299 124.17 79.5706 124.772 83 124.772C86.4294 124.772 89.8701 124.17 91.75 122.875ZM91.75 129.125V133.143C91.75 134.717 87.8307 136 83 136C78.1693 136 74.25 134.717 74.25 133.143V129.125C76.1299 130.42 79.5706 131.022 83 131.022C86.4294 131.022 89.8701 130.42 91.75 129.125Z" fill="#3B82F6"/>
|
||||
<line x1="247.308" y1="87.6923" x2="297.692" y2="87.6923" stroke="#F59E0B" stroke-width="2.61538" stroke-linecap="round" stroke-dasharray="3.92 3.92"/>
|
||||
<g filter="url(#filter3_d_93_3280)">
|
||||
<rect x="299" y="69" width="68" height="37" rx="2.61538" fill="white"/>
|
||||
</g>
|
||||
<path d="M338.25 76H327.75C326.508 76 325.5 77.0078 325.5 78.25V97.75C325.5 98.9922 326.508 100 327.75 100H338.25C339.492 100 340.5 98.9922 340.5 97.75V78.25C340.5 77.0078 339.492 76 338.25 76ZM333 98.5C332.17 98.5 331.5 97.8297 331.5 97C331.5 96.1703 332.17 95.5 333 95.5C333.83 95.5 334.5 96.1703 334.5 97C334.5 97.8297 333.83 98.5 333 98.5Z" fill="#3B82F6"/>
|
||||
<g filter="url(#filter4_d_93_3280)">
|
||||
<rect x="176" y="108" width="37.9231" height="36.6154" rx="18.3077" fill="white"/>
|
||||
</g>
|
||||
<g clip-path="url(#clip1_93_3280)">
|
||||
<path d="M203.192 124.25C203.697 122.726 203.394 119.683 202.415 118.56C202.288 118.413 202.047 118.434 201.941 118.596L200.736 120.43C200.437 120.798 199.9 120.881 199.497 120.625C198.19 119.796 196.627 119.314 194.947 119.314C193.267 119.314 191.704 119.796 190.397 120.625C189.994 120.881 189.458 120.795 189.159 120.43L187.953 118.596C187.847 118.434 187.607 118.413 187.479 118.56C186.501 119.683 186.198 122.726 186.702 124.25C186.869 124.756 186.916 125.291 186.817 125.814C186.719 126.33 186.62 126.955 186.62 127.388C186.62 131.845 190.349 135.462 194.947 135.462C199.547 135.462 203.275 131.848 203.275 127.388C203.275 126.953 203.177 126.33 203.078 125.814C202.978 125.291 203.026 124.756 203.192 124.25ZM194.947 133.657C191.393 133.657 188.501 130.853 188.501 127.407C188.501 127.293 188.505 127.182 188.509 127.071C188.639 124.722 190.109 122.714 192.192 121.757C193.027 121.37 193.962 121.156 194.947 121.156C195.932 121.156 196.867 121.373 197.705 121.759C199.787 122.716 201.257 124.724 201.387 127.071C201.394 127.182 201.396 127.293 201.396 127.407C201.394 130.853 198.502 133.657 194.947 133.657Z" fill="black"/>
|
||||
<path d="M197.739 129.812L196.092 127.043L194.679 124.735C194.646 124.68 194.586 124.647 194.518 124.647H193.168C193.101 124.647 193.04 124.682 193.007 124.737C192.975 124.794 192.975 124.863 193.01 124.917L194.36 127.121L192.546 129.803C192.51 129.858 192.505 129.929 192.538 129.988C192.57 130.047 192.633 130.082 192.7 130.082H194.06C194.122 130.082 194.181 130.051 194.215 130.001L195.196 128.515L196.075 129.992C196.107 130.049 196.17 130.082 196.235 130.082H197.575C197.642 130.082 197.703 130.049 197.735 129.992C197.774 129.935 197.774 129.868 197.739 129.812Z" fill="black"/>
|
||||
</g>
|
||||
<g filter="url(#filter5_d_93_3280)">
|
||||
<rect x="176" y="30" width="37.9231" height="36.6154" rx="18.3077" fill="white"/>
|
||||
</g>
|
||||
<g clip-path="url(#clip2_93_3280)">
|
||||
<path d="M203.192 46.25C203.697 44.7263 203.394 41.6831 202.415 40.5602C202.288 40.4133 202.047 40.4343 201.941 40.5959L200.736 42.4302C200.437 42.7975 199.9 42.8815 199.497 42.6254C198.19 41.7964 196.627 41.3137 194.947 41.3137C193.267 41.3137 191.704 41.7964 190.397 42.6254C189.994 42.8815 189.458 42.7954 189.159 42.4302L187.953 40.5959C187.847 40.4343 187.607 40.4133 187.479 40.5602C186.501 41.6831 186.198 44.7263 186.702 46.25C186.869 46.7558 186.916 47.291 186.817 47.8136C186.719 48.3299 186.62 48.9553 186.62 49.3876C186.62 53.8454 190.349 57.4616 194.947 57.4616C199.547 57.4616 203.275 53.8475 203.275 49.3876C203.275 48.9532 203.177 48.3299 203.078 47.8136C202.978 47.291 203.026 46.7558 203.192 46.25ZM194.947 55.6566C191.393 55.6566 188.501 52.8527 188.501 49.4065C188.501 49.2932 188.505 49.1819 188.509 49.0707C188.639 46.7222 190.109 44.7137 192.192 43.7566C193.027 43.3705 193.962 43.1564 194.947 43.1564C195.932 43.1564 196.867 43.3726 197.705 43.7587C199.787 44.7158 201.257 46.7243 201.387 49.0707C201.394 49.1819 201.396 49.2932 201.396 49.4065C201.394 52.8527 198.502 55.6566 194.947 55.6566Z" fill="black"/>
|
||||
<path d="M197.739 51.8117L196.092 49.0434L194.679 46.7347C194.646 46.6802 194.586 46.6466 194.518 46.6466H193.168C193.101 46.6466 193.04 46.6823 193.007 46.7368C192.975 46.7935 192.975 46.8628 193.01 46.9174L194.36 49.1211L192.546 51.8033C192.51 51.8578 192.505 51.9292 192.538 51.988C192.57 52.0467 192.633 52.0824 192.7 52.0824H194.06C194.122 52.0824 194.181 52.0509 194.215 52.0006L195.196 50.5146L196.075 51.9922C196.107 52.0488 196.17 52.0824 196.235 52.0824H197.575C197.642 52.0824 197.703 52.0488 197.735 51.9922C197.774 51.9355 197.774 51.8683 197.739 51.8117Z" fill="black"/>
|
||||
</g>
|
||||
<g filter="url(#filter6_d_93_3280)">
|
||||
<rect x="244" y="69.1924" width="37.9231" height="36.6154" rx="18.3077" fill="white"/>
|
||||
</g>
|
||||
<g clip-path="url(#clip3_93_3280)">
|
||||
<path d="M271.192 85.4424C271.697 83.9187 271.394 80.8754 270.415 79.7526C270.288 79.6057 270.047 79.6267 269.941 79.7883L268.736 81.6226C268.437 81.9899 267.9 82.0738 267.497 81.8178C266.19 80.9888 264.627 80.5061 262.947 80.5061C261.267 80.5061 259.704 80.9888 258.397 81.8178C257.994 82.0738 257.458 81.9878 257.159 81.6226L255.953 79.7883C255.847 79.6267 255.607 79.6057 255.479 79.7526C254.501 80.8754 254.198 83.9187 254.702 85.4424C254.869 85.9482 254.916 86.4833 254.817 87.0059C254.719 87.5222 254.62 88.1477 254.62 88.58C254.62 93.0378 258.349 96.654 262.947 96.654C267.547 96.654 271.275 93.0399 271.275 88.58C271.275 88.1456 271.177 87.5222 271.078 87.0059C270.978 86.4833 271.026 85.9482 271.192 85.4424ZM262.947 94.849C259.393 94.849 256.501 92.0451 256.501 88.5989C256.501 88.4856 256.505 88.3743 256.509 88.2631C256.639 85.9146 258.109 83.9061 260.192 82.949C261.027 82.5629 261.962 82.3488 262.947 82.3488C263.932 82.3488 264.867 82.565 265.705 82.9511C267.787 83.9082 269.257 85.9167 269.387 88.2631C269.394 88.3743 269.396 88.4856 269.396 88.5989C269.394 92.0451 266.502 94.849 262.947 94.849Z" fill="black"/>
|
||||
<path d="M265.739 91.0041L264.092 88.2358L262.679 85.9271C262.646 85.8726 262.586 85.839 262.518 85.839H261.168C261.101 85.839 261.04 85.8747 261.007 85.9292C260.975 85.9859 260.975 86.0552 261.01 86.1097L262.36 88.3134L260.546 90.9957C260.51 91.0502 260.505 91.1216 260.538 91.1803C260.57 91.2391 260.633 91.2748 260.7 91.2748H262.06C262.122 91.2748 262.181 91.2433 262.215 91.1929L263.196 89.707L264.075 91.1845C264.107 91.2412 264.17 91.2748 264.235 91.2748H265.575C265.642 91.2748 265.703 91.2412 265.735 91.1845C265.774 91.1279 265.774 91.0607 265.739 91.0041Z" fill="black"/>
|
||||
</g>
|
||||
<rect x="272.266" y="62.151" width="19.3136" height="19.3136" rx="9.65681" fill="white"/>
|
||||
<g clip-path="url(#clip4_93_3280)">
|
||||
<path d="M277.504 74.2993L277.908 74.5184L282.419 67.1941L282.014 66.975L277.504 74.2993Z" fill="#E535AB"/>
|
||||
<path d="M286.432 73.7141H277.411V74.1524H286.432V73.7141Z" fill="#E535AB"/>
|
||||
<path d="M277.589 73.9604L282.102 76.4029L282.335 76.0233L277.823 73.5808L277.589 73.9604Z" fill="#E535AB"/>
|
||||
<path d="M281.509 67.5946L286.021 70.0371L286.255 69.6575L281.743 67.215L281.509 67.5946Z" fill="#E535AB"/>
|
||||
<path d="M277.591 69.6559L277.824 70.0355L282.337 67.593L282.103 67.2134L277.591 69.6559Z" fill="#E535AB"/>
|
||||
<path d="M281.428 67.1941L285.938 74.5184L286.343 74.2993L281.833 66.975L281.428 67.1941Z" fill="#E535AB"/>
|
||||
<path d="M278.236 69.3653H277.768V74.2503H278.236V69.3653Z" fill="#E535AB"/>
|
||||
<path d="M286.077 69.3653H285.61V74.2503H286.077V69.3653Z" fill="#E535AB"/>
|
||||
<path d="M281.818 75.886L282.022 76.2175L285.947 74.0932L285.742 73.7616L281.818 75.886Z" fill="#E535AB"/>
|
||||
<path d="M286.697 74.3928C286.426 74.8338 285.824 74.9843 285.353 74.7308C284.883 74.4773 284.722 73.9122 284.993 73.4713C285.263 73.0303 285.866 72.8798 286.336 73.1333C286.81 73.3894 286.97 73.9518 286.697 74.3928Z" fill="#E535AB"/>
|
||||
<path d="M278.85 70.1442C278.58 70.5852 277.977 70.7357 277.506 70.4822C277.036 70.2287 276.876 69.6636 277.146 69.2226C277.416 68.7817 278.019 68.6312 278.489 68.8846C278.96 69.1408 279.12 69.7032 278.85 70.1442Z" fill="#E535AB"/>
|
||||
<path d="M277.149 74.3928C276.878 73.9518 277.039 73.3894 277.509 73.1333C277.98 72.8798 278.58 73.0303 278.853 73.4713C279.123 73.9122 278.963 74.4747 278.492 74.7308C278.019 74.9843 277.419 74.8338 277.149 74.3928Z" fill="#E535AB"/>
|
||||
<path d="M284.996 70.1442C284.725 69.7032 284.886 69.1408 285.356 68.8846C285.827 68.6312 286.427 68.7817 286.7 69.2226C286.97 69.6636 286.81 70.226 286.339 70.4822C285.869 70.7357 285.266 70.5852 284.996 70.1442Z" fill="#E535AB"/>
|
||||
<path d="M281.923 76.9779C281.379 76.9779 280.94 76.566 280.94 76.0564C280.94 75.5467 281.379 75.1348 281.923 75.1348C282.467 75.1348 282.906 75.5467 282.906 76.0564C282.906 76.5634 282.467 76.9779 281.923 76.9779Z" fill="#E535AB"/>
|
||||
<path d="M281.923 68.4806C281.379 68.4806 280.94 68.0687 280.94 67.5591C280.94 67.0495 281.379 66.6375 281.923 66.6375C282.467 66.6375 282.906 67.0495 282.906 67.5591C282.906 68.0687 282.467 68.4806 281.923 68.4806Z" fill="#E535AB"/>
|
||||
</g>
|
||||
<rect x="272.266" y="62.151" width="19.3136" height="19.3136" rx="9.65681" stroke="#6366F1" stroke-width="1.60947"/>
|
||||
<path d="M217.923 126.308V126.308C224.019 126.308 228.961 121.366 228.961 115.269V98.5386C228.961 92.4422 233.903 87.5001 240 87.5001V87.5001" stroke="white" stroke-opacity="0.1" stroke-width="2" stroke-miterlimit="0" stroke-linecap="round" stroke-linejoin="bevel"/>
|
||||
<path d="M217.923 48.3077V48.3077C224.04 48.3077 229 53.267 229 59.3846V76.5001C229 82.5752 233.925 87.5001 240 87.5001V87.5001" stroke="white" stroke-opacity="0.1" stroke-width="2" stroke-miterlimit="0" stroke-linecap="round" stroke-linejoin="bevel"/>
|
||||
<path d="M146 43.8675C146 43.3153 145.324 42.9247 144.845 43.2009L137.155 47.641C136.676 47.9172 136.676 48.6982 137.155 48.9744L144.845 53.4145C145.324 53.6907 146 53.3002 146 52.7479V43.8675ZM162 52.7479C162 53.3002 162.676 53.6907 163.155 53.4145L170.845 48.9744C171.324 48.6982 171.324 47.9172 170.845 47.641L163.155 43.2009C162.676 42.9247 162 43.3153 162 43.8675V52.7479ZM145 49.3077H163V47.3077H145V49.3077Z" fill="white" fill-opacity="0.1"/>
|
||||
<path d="M146 121.868C146 121.315 145.324 120.925 144.845 121.201L137.155 125.641C136.676 125.917 136.676 126.698 137.155 126.974L144.845 131.415C145.324 131.691 146 131.3 146 130.748V121.868ZM162 130.748C162 131.3 162.676 131.691 163.155 131.415L170.845 126.974C171.324 126.698 171.324 125.917 170.845 125.641L163.155 121.201C162.676 120.925 162 121.315 162 121.868V130.748ZM145 127.308H163V125.308H145V127.308Z" fill="white" fill-opacity="0.1"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_dd_93_3280" x="-0.9375" y="-0.625" width="401.875" height="175.875" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feMorphology radius="0.3125" operator="erode" in="SourceAlpha" result="effect1_dropShadow_93_3280"/>
|
||||
<feOffset dy="0.3125"/>
|
||||
<feGaussianBlur stdDeviation="0.3125"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_93_3280"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="0.3125"/>
|
||||
<feGaussianBlur stdDeviation="0.46875"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
|
||||
<feBlend mode="normal" in2="effect1_dropShadow_93_3280" result="effect2_dropShadow_93_3280"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_93_3280" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d_93_3280" x="32" y="29" width="102" height="41" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1"/>
|
||||
<feGaussianBlur stdDeviation="1"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_93_3280"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_93_3280" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter2_d_93_3280" x="32" y="106" width="102" height="41" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1"/>
|
||||
<feGaussianBlur stdDeviation="1"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_93_3280"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_93_3280" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter3_d_93_3280" x="296.385" y="67.6923" width="73.2308" height="42.2308" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1.30769"/>
|
||||
<feGaussianBlur stdDeviation="1.30769"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_93_3280"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_93_3280" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter4_d_93_3280" x="173.385" y="106.692" width="43.1539" height="41.8462" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1.30769"/>
|
||||
<feGaussianBlur stdDeviation="1.30769"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_93_3280"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_93_3280" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter5_d_93_3280" x="173.385" y="28.6923" width="43.1539" height="41.8462" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1.30769"/>
|
||||
<feGaussianBlur stdDeviation="1.30769"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_93_3280"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_93_3280" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter6_d_93_3280" x="241.385" y="67.8847" width="43.1539" height="41.8462" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1.30769"/>
|
||||
<feGaussianBlur stdDeviation="1.30769"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_93_3280"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_93_3280" result="shape"/>
|
||||
</filter>
|
||||
<clipPath id="clip0_93_3280">
|
||||
<rect width="400" height="174" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_93_3280">
|
||||
<rect width="17" height="17" fill="white" transform="translate(186.461 118.462)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip2_93_3280">
|
||||
<rect width="17" height="17" fill="white" transform="translate(186.461 40.4615)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip3_93_3280">
|
||||
<rect width="17" height="17" fill="white" transform="translate(254.461 79.6539)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip4_93_3280">
|
||||
<rect width="11.2663" height="10.5621" fill="white" transform="translate(276.29 66.5267)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 18 KiB |
@ -0,0 +1,111 @@
|
||||
<svg width="400" height="174" viewBox="0 0 400 174" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_93_3118)">
|
||||
<rect width="400" height="174" fill="#3B82F6"/>
|
||||
<g filter="url(#filter0_d_93_3118)">
|
||||
<rect x="75" y="69" width="98" height="37" rx="2.61538" fill="white"/>
|
||||
</g>
|
||||
<path d="M122.459 96.5813L120.171 95.9175C119.931 95.85 119.796 95.5988 119.864 95.3588L124.982 77.7263C125.05 77.4863 125.301 77.3513 125.541 77.4188L127.829 78.0825C128.069 78.15 128.204 78.4013 128.136 78.6413L123.017 96.2738C122.946 96.5138 122.699 96.6525 122.459 96.5813ZM118.184 92.3738L119.815 90.6338C119.987 90.45 119.976 90.1575 119.785 89.9888L116.387 87L119.785 84.0113C119.976 83.8425 119.991 83.55 119.815 83.3663L118.184 81.6263C118.015 81.4463 117.73 81.435 117.546 81.6075L112.142 86.67C111.951 86.8463 111.951 87.15 112.142 87.3263L117.546 92.3925C117.73 92.565 118.015 92.5575 118.184 92.3738ZM130.454 92.3963L135.857 87.33C136.049 87.1538 136.049 86.85 135.857 86.6738L130.454 81.6038C130.274 81.435 129.989 81.4425 129.816 81.6225L128.185 83.3625C128.012 83.5463 128.024 83.8388 128.215 84.0075L131.612 87L128.215 89.9888C128.024 90.1575 128.009 90.45 128.185 90.6338L129.816 92.3738C129.985 92.5575 130.27 92.565 130.454 92.3963Z" fill="#3B82F6"/>
|
||||
<g filter="url(#filter1_d_93_3118)">
|
||||
<rect x="75" y="118" width="98" height="37" rx="2.61538" fill="white"/>
|
||||
</g>
|
||||
<path d="M132.75 129.857V131.643C132.75 133.217 128.831 134.5 124 134.5C119.169 134.5 115.25 133.217 115.25 131.643V129.857C115.25 128.283 119.169 127 124 127C128.831 127 132.75 128.283 132.75 129.857ZM132.75 133.875V137.893C132.75 139.467 128.831 140.75 124 140.75C119.169 140.75 115.25 139.467 115.25 137.893V133.875C117.13 135.17 120.571 135.772 124 135.772C127.429 135.772 130.87 135.17 132.75 133.875ZM132.75 140.125V144.143C132.75 145.717 128.831 147 124 147C119.169 147 115.25 145.717 115.25 144.143V140.125C117.13 141.42 120.571 142.022 124 142.022C127.429 142.022 130.87 141.42 132.75 140.125Z" fill="#3B82F6"/>
|
||||
<g filter="url(#filter2_d_93_3118)">
|
||||
<rect x="75" y="19" width="98" height="37" rx="2.61538" fill="white"/>
|
||||
</g>
|
||||
<path d="M132.75 30.8571V32.6429C132.75 34.2165 128.831 35.5 124 35.5C119.169 35.5 115.25 34.2165 115.25 32.6429V30.8571C115.25 29.2835 119.169 28 124 28C128.831 28 132.75 29.2835 132.75 30.8571ZM132.75 34.875V38.8929C132.75 40.4665 128.831 41.75 124 41.75C119.169 41.75 115.25 40.4665 115.25 38.8929V34.875C117.13 36.1696 120.571 36.7723 124 36.7723C127.429 36.7723 130.87 36.1696 132.75 34.875ZM132.75 41.125V45.1429C132.75 46.7165 128.831 48 124 48C119.169 48 115.25 46.7165 115.25 45.1429V41.125C117.13 42.4196 120.571 43.0223 124 43.0223C127.429 43.0223 130.87 42.4196 132.75 41.125Z" fill="#3B82F6"/>
|
||||
<line x1="174.385" y1="87.5" x2="272.462" y2="87.5" stroke="#F59E0B" stroke-width="2.61538" stroke-linecap="round" stroke-dasharray="3.92 3.92"/>
|
||||
<g filter="url(#filter3_d_93_3118)">
|
||||
<rect x="257" y="69" width="68" height="37" rx="2.61538" fill="white"/>
|
||||
</g>
|
||||
<path d="M296.25 76H285.75C284.508 76 283.5 77.0078 283.5 78.25V97.75C283.5 98.9922 284.508 100 285.75 100H296.25C297.492 100 298.5 98.9922 298.5 97.75V78.25C298.5 77.0078 297.492 76 296.25 76ZM291 98.5C290.17 98.5 289.5 97.8297 289.5 97C289.5 96.1703 290.17 95.5 291 95.5C291.83 95.5 292.5 96.1703 292.5 97C292.5 97.8297 291.83 98.5 291 98.5Z" fill="#3B82F6"/>
|
||||
<g filter="url(#filter4_d_93_3118)">
|
||||
<rect x="196.615" y="69.1923" width="37.9231" height="36.6154" rx="18.3077" fill="white"/>
|
||||
</g>
|
||||
<g clip-path="url(#clip1_93_3118)">
|
||||
<path d="M223.808 85.4423C224.312 83.9186 224.009 80.8754 223.031 79.7525C222.903 79.6056 222.663 79.6266 222.557 79.7882L221.351 81.6225C221.052 81.9898 220.515 82.0738 220.113 81.8177C218.805 80.9887 217.242 80.506 215.563 80.506C213.883 80.506 212.32 80.9887 211.013 81.8177C210.61 82.0738 210.073 81.9877 209.774 81.6225L208.569 79.7882C208.463 79.6266 208.222 79.6056 208.095 79.7525C207.116 80.8754 206.813 83.9186 207.317 85.4423C207.484 85.9481 207.532 86.4833 207.432 87.0059C207.335 87.5222 207.235 88.1476 207.235 88.5799C207.235 93.0377 210.965 96.6539 215.563 96.6539C220.163 96.6539 223.89 93.0398 223.89 88.5799C223.89 88.1455 223.793 87.5222 223.693 87.0059C223.594 86.4833 223.641 85.9481 223.808 85.4423ZM215.563 94.849C212.008 94.849 209.116 92.045 209.116 88.5988C209.116 88.4855 209.121 88.3743 209.125 88.263C209.255 85.9145 210.725 83.906 212.807 82.949C213.643 82.5628 214.578 82.3487 215.563 82.3487C216.548 82.3487 217.483 82.5649 218.32 82.9511C220.403 83.9081 221.873 85.9166 222.003 88.263C222.009 88.3743 222.011 88.4855 222.011 88.5988C222.009 92.045 219.117 94.849 215.563 94.849Z" fill="black"/>
|
||||
<path d="M218.355 91.004L216.708 88.2357L215.294 85.9271C215.262 85.8725 215.201 85.8389 215.134 85.8389H213.783C213.716 85.8389 213.655 85.8746 213.623 85.9292C213.59 85.9858 213.59 86.0551 213.625 86.1097L214.976 88.3134L213.162 90.9956C213.125 91.0502 213.121 91.1215 213.153 91.1803C213.186 91.2391 213.248 91.2747 213.316 91.2747H214.675C214.738 91.2747 214.796 91.2432 214.831 91.1929L215.811 89.707L216.69 91.1845C216.723 91.2411 216.786 91.2747 216.85 91.2747H218.19C218.258 91.2747 218.318 91.2411 218.351 91.1845C218.39 91.1278 218.39 91.0607 218.355 91.004Z" fill="black"/>
|
||||
</g>
|
||||
<rect x="224.882" y="62.1509" width="19.3136" height="19.3136" rx="9.65681" fill="white"/>
|
||||
<g clip-path="url(#clip2_93_3118)">
|
||||
<path d="M230.119 74.2992L230.524 74.5184L235.035 67.1941L234.63 66.9749L230.119 74.2992Z" fill="#E535AB"/>
|
||||
<path d="M239.048 73.7141H230.026V74.1524H239.048V73.7141Z" fill="#E535AB"/>
|
||||
<path d="M230.205 73.9604L234.717 76.4028L234.951 76.0233L230.438 73.5808L230.205 73.9604Z" fill="#E535AB"/>
|
||||
<path d="M234.125 67.5946L238.637 70.0371L238.871 69.6575L234.358 67.215L234.125 67.5946Z" fill="#E535AB"/>
|
||||
<path d="M230.206 69.6559L230.44 70.0355L234.952 67.593L234.719 67.2134L230.206 69.6559Z" fill="#E535AB"/>
|
||||
<path d="M234.043 67.1941L238.554 74.5184L238.959 74.2992L234.448 66.9749L234.043 67.1941Z" fill="#E535AB"/>
|
||||
<path d="M230.851 69.3653H230.384V74.2503H230.851V69.3653Z" fill="#E535AB"/>
|
||||
<path d="M238.693 69.3653H238.225V74.2503H238.693V69.3653Z" fill="#E535AB"/>
|
||||
<path d="M234.433 75.8859L234.637 76.2175L238.562 74.0932L238.358 73.7616L234.433 75.8859Z" fill="#E535AB"/>
|
||||
<path d="M239.312 74.3928C239.042 74.8338 238.439 74.9843 237.969 74.7308C237.498 74.4773 237.338 73.9122 237.608 73.4712C237.879 73.0303 238.481 72.8798 238.952 73.1333C239.425 73.3894 239.586 73.9518 239.312 74.3928Z" fill="#E535AB"/>
|
||||
<path d="M231.465 70.1442C231.195 70.5851 230.592 70.7356 230.122 70.4821C229.652 70.2286 229.491 69.6636 229.761 69.2226C230.032 68.7816 230.635 68.6311 231.105 68.8846C231.575 69.1407 231.736 69.7032 231.465 70.1442Z" fill="#E535AB"/>
|
||||
<path d="M229.764 74.3928C229.494 73.9518 229.654 73.3894 230.125 73.1333C230.595 72.8798 231.195 73.0303 231.468 73.4712C231.739 73.9122 231.578 74.4746 231.108 74.7308C230.635 74.9843 230.035 74.8338 229.764 74.3928Z" fill="#E535AB"/>
|
||||
<path d="M237.611 70.1442C237.341 69.7032 237.501 69.1407 237.972 68.8846C238.442 68.6311 239.042 68.7816 239.315 69.2226C239.586 69.6636 239.425 70.226 238.955 70.4821C238.484 70.7356 237.882 70.5851 237.611 70.1442Z" fill="#E535AB"/>
|
||||
<path d="M234.538 76.9779C233.995 76.9779 233.555 76.566 233.555 76.0564C233.555 75.5467 233.995 75.1348 234.538 75.1348C235.082 75.1348 235.521 75.5467 235.521 76.0564C235.521 76.5633 235.082 76.9779 234.538 76.9779Z" fill="#E535AB"/>
|
||||
<path d="M234.538 68.4806C233.995 68.4806 233.555 68.0687 233.555 67.5591C233.555 67.0495 233.995 66.6375 234.538 66.6375C235.082 66.6375 235.521 67.0495 235.521 67.5591C235.521 68.0687 235.082 68.4806 234.538 68.4806Z" fill="#E535AB"/>
|
||||
</g>
|
||||
<rect x="224.882" y="62.1509" width="19.3136" height="19.3136" rx="9.65681" stroke="#3B82F6" stroke-width="1.60947"/>
|
||||
<path d="M177 136.5V136.5C181.333 136.5 184.846 132.987 184.846 128.654V95.2694C184.846 90.9785 188.325 87.5 192.615 87.5V87.5" stroke="white" stroke-opacity="0.1" stroke-width="2" stroke-miterlimit="0" stroke-linecap="round" stroke-linejoin="bevel"/>
|
||||
<path d="M177.418 39.3783V39.3783C181.52 39.3783 184.846 42.7041 184.846 46.8066V79.7307C184.846 84.0216 188.325 87.5001 192.615 87.5001V87.5001" stroke="white" stroke-opacity="0.1" stroke-width="2" stroke-miterlimit="0" stroke-linecap="round" stroke-linejoin="bevel"/>
|
||||
</g>
|
||||
<defs>
|
||||
<filter id="filter0_d_93_3118" x="72.3846" y="67.6923" width="103.231" height="42.2308" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1.30769"/>
|
||||
<feGaussianBlur stdDeviation="1.30769"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_93_3118"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_93_3118" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter1_d_93_3118" x="72.3846" y="116.692" width="103.231" height="42.2308" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1.30769"/>
|
||||
<feGaussianBlur stdDeviation="1.30769"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_93_3118"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_93_3118" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter2_d_93_3118" x="72.3846" y="17.6923" width="103.231" height="42.2308" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1.30769"/>
|
||||
<feGaussianBlur stdDeviation="1.30769"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_93_3118"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_93_3118" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter3_d_93_3118" x="254.385" y="67.6923" width="73.2308" height="42.2308" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1.30769"/>
|
||||
<feGaussianBlur stdDeviation="1.30769"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_93_3118"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_93_3118" result="shape"/>
|
||||
</filter>
|
||||
<filter id="filter4_d_93_3118" x="194" y="67.8846" width="43.1539" height="41.8462" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
|
||||
<feOffset dy="1.30769"/>
|
||||
<feGaussianBlur stdDeviation="1.30769"/>
|
||||
<feComposite in2="hardAlpha" operator="out"/>
|
||||
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0"/>
|
||||
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_93_3118"/>
|
||||
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_93_3118" result="shape"/>
|
||||
</filter>
|
||||
<clipPath id="clip0_93_3118">
|
||||
<rect width="400" height="174" fill="white"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip1_93_3118">
|
||||
<rect width="17" height="17" fill="white" transform="translate(207.077 79.6539)"/>
|
||||
</clipPath>
|
||||
<clipPath id="clip2_93_3118">
|
||||
<rect width="11.2663" height="10.5621" fill="white" transform="translate(228.905 66.5267)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 12 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 707 KiB |
@ -3,3 +3,4 @@ export { TemplateSummary } from './QueryScreen/TemplateSummary';
|
||||
export { StepperNavbar } from './StepperNavbar/StepperNavbar';
|
||||
export type { StepperNavbarStep } from './StepperNavbar/StepperNavbar';
|
||||
export { DialogContainer } from './DialogContainer/DialogContainer';
|
||||
export { UseCaseScreen } from './UseCaseScreen/UseCaseScreen';
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import globals from '../../../Globals';
|
||||
import { BASE_URL_TEMPLATE } from '../../../components/Services/Data/Schema/TemplateGallery/templateGalleryConfig';
|
||||
import { UseCases } from './components/UseCaseScreen/UseCaseScreen';
|
||||
|
||||
// This config is stored in root level index.js, and there is a config file in each directory which stores which
|
||||
// stores the directory structure.
|
||||
@ -65,8 +66,8 @@ export const getSchemaImageUrl = (baseUrl: string) => {
|
||||
export const NEON_ONBOARDING_QUERY_KEY = 'neonOnboarding';
|
||||
|
||||
export const trackOnboardingActivityMutation = `
|
||||
mutation trackOnboardingActivity($projectId: uuid!, $kind: String!, $error_code: String) {
|
||||
trackOnboardingActivity(payload: {kind: $kind, project_id: $projectId, error_code: $error_code}) {
|
||||
mutation trackOnboardingActivity($projectId: uuid!, $kind: String!, $error_code: String, $subkind: String,) {
|
||||
trackOnboardingActivity(payload: {kind: $kind, project_id: $projectId, error_code: $error_code, subkind: $subkind}) {
|
||||
status
|
||||
}
|
||||
}
|
||||
@ -143,6 +144,16 @@ export const oneClickDeploymentOnboardingShown = {
|
||||
kind: 'onboarded_through_one_click_deployment',
|
||||
};
|
||||
|
||||
export const useCaseExperimentOnboarding = {
|
||||
...mutationVariables,
|
||||
kind: 'onboarded_through_use_case_experiment',
|
||||
};
|
||||
|
||||
export const getUseCaseExperimentOnboardingVariables = (useCase: UseCases) => ({
|
||||
...useCaseExperimentOnboarding,
|
||||
subkind: useCase,
|
||||
});
|
||||
|
||||
export const getNeonOnboardingErrorVariables = (code: string) => {
|
||||
return {
|
||||
...mutationVariables,
|
||||
|
||||
@ -9,6 +9,7 @@ export type WizardState =
|
||||
| 'familiarity-survey'
|
||||
| 'landing-page'
|
||||
| 'template-summary'
|
||||
| 'use-case-onboarding'
|
||||
| 'hidden';
|
||||
|
||||
export function useWizardState() {
|
||||
|
||||
@ -15,9 +15,11 @@ import {
|
||||
fetchAllOnboardingDataQuery,
|
||||
fetchAllOnboardingDataQueryVariables,
|
||||
oneClickDeploymentOnboardingShown,
|
||||
useCaseExperimentOnboarding,
|
||||
} from './constants';
|
||||
import { WizardState } from './hooks/useWizardState';
|
||||
import { OnboardingResponseData, UserOnboarding } from './types';
|
||||
import { getLSItem, LS_KEYS } from '../../../utils';
|
||||
|
||||
export function shouldShowOnboarding(onboardingData: UserOnboarding) {
|
||||
const userActivity = onboardingData?.activity;
|
||||
@ -30,7 +32,8 @@ export function shouldShowOnboarding(onboardingData: UserOnboarding) {
|
||||
'true' ||
|
||||
userActivity?.[templateSummaryRunQueryClickVariables.kind]?.value ===
|
||||
'true' ||
|
||||
userActivity?.[oneClickDeploymentOnboardingShown.kind]?.value === 'true'
|
||||
userActivity?.[oneClickDeploymentOnboardingShown.kind]?.value === 'true' ||
|
||||
userActivity?.[useCaseExperimentOnboarding.kind]?.value === 'true'
|
||||
) {
|
||||
return false;
|
||||
}
|
||||
@ -74,6 +77,9 @@ export function getWizardState(
|
||||
// transform the onboarding data if present, to a consumable format
|
||||
const transformedOnboardingData = onboardingDataTransformFn(onboardingData);
|
||||
if (shouldShowOnboarding(transformedOnboardingData)) {
|
||||
if (getLSItem(LS_KEYS.useCaseExperimentOnboarding)) {
|
||||
return 'use-case-onboarding';
|
||||
}
|
||||
if (showFamiliaritySurvey) return 'familiarity-survey';
|
||||
return 'landing-page';
|
||||
}
|
||||
|
||||
@ -110,6 +110,7 @@ export const LS_KEYS = {
|
||||
notificationsData: 'notifications:data',
|
||||
notificationsLastSeen: 'notifications:lastSeen',
|
||||
authState: 'AUTH_STATE',
|
||||
useCaseExperimentOnboarding: 'onboarding:useCaseExperiment',
|
||||
};
|
||||
|
||||
export const clearGraphiqlLS = () => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user