dify
This commit is contained in:
32
dify/web/app/components/billing/pricing/assets/cloud.tsx
Normal file
32
dify/web/app/components/billing/pricing/assets/cloud.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
type CloudProps = {
|
||||
isActive: boolean
|
||||
}
|
||||
|
||||
const Cloud = ({
|
||||
isActive,
|
||||
}: CloudProps) => {
|
||||
const color = isActive ? 'var(--color-saas-dify-blue-accessible)' : 'var(--color-text-primary)'
|
||||
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'>
|
||||
<g clipPath='url(#clip0_1_4630)'>
|
||||
<rect y='0.5' width='4' height='4' rx='2' fill={color} />
|
||||
<rect opacity='0.18' x='6' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='12' y='0.5' width='4' height='4' rx='2' fill={color} />
|
||||
<rect opacity='0.18' y='6.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='6' y='6.5' width='4' height='4' rx='2' fill={color} />
|
||||
<rect opacity='0.18' x='12' y='6.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect y='12.5' width='4' height='4' rx='2' fill={color} />
|
||||
<rect opacity='0.18' x='6' y='12.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='12' y='12.5' width='4' height='4' rx='2' fill={color} />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id='clip0_1_4630'>
|
||||
<rect width='16' height='16' fill='white' transform='translate(0 0.5)' />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Cloud
|
||||
96
dify/web/app/components/billing/pricing/assets/community.tsx
Normal file
96
dify/web/app/components/billing/pricing/assets/community.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
const Community = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='60' height='61' viewBox='0 0 60 61' fill='none'>
|
||||
<g clipPath='url(#clip0_1_5128)'>
|
||||
<path opacity='0.18' d='M0 2.5C0 1.39543 0.895431 0.5 2 0.5C3.10457 0.5 4 1.39543 4 2.5C4 3.60457 3.10457 4.5 2 4.5C0.895431 4.5 0 3.60457 0 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7 2.5C7 1.39543 7.89543 0.5 9 0.5C10.1046 0.5 11 1.39543 11 2.5C11 3.60457 10.1046 4.5 9 4.5C7.89543 4.5 7 3.60457 7 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14 2.5C14 1.39543 14.8954 0.5 16 0.5C17.1046 0.5 18 1.39543 18 2.5C18 3.60457 17.1046 4.5 16 4.5C14.8954 4.5 14 3.60457 14 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M21 2.5C21 1.39543 21.8954 0.5 23 0.5C24.1046 0.5 25 1.39543 25 2.5C25 3.60457 24.1046 4.5 23 4.5C21.8954 4.5 21 3.60457 21 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 2.5C28 1.39543 28.8954 0.5 30 0.5C31.1046 0.5 32 1.39543 32 2.5C32 3.60457 31.1046 4.5 30 4.5C28.8954 4.5 28 3.60457 28 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35 2.5C35 1.39543 35.8954 0.5 37 0.5C38.1046 0.5 39 1.39543 39 2.5C39 3.60457 38.1046 4.5 37 4.5C35.8954 4.5 35 3.60457 35 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 2.5C42 1.39543 42.8954 0.5 44 0.5C45.1046 0.5 46 1.39543 46 2.5C46 3.60457 45.1046 4.5 44 4.5C42.8954 4.5 42 3.60457 42 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49 2.5C49 1.39543 49.8954 0.5 51 0.5C52.1046 0.5 53 1.39543 53 2.5C53 3.60457 52.1046 4.5 51 4.5C49.8954 4.5 49 3.60457 49 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56 2.5C56 1.39543 56.8954 0.5 58 0.5C59.1046 0.5 60 1.39543 60 2.5C60 3.60457 59.1046 4.5 58 4.5C56.8954 4.5 56 3.60457 56 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0 9.5C0 8.39543 0.895431 7.5 2 7.5C3.10457 7.5 4 8.39543 4 9.5C4 10.6046 3.10457 11.5 2 11.5C0.895431 11.5 0 10.6046 0 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7 9.5C7 8.39543 7.89543 7.5 9 7.5C10.1046 7.5 11 8.39543 11 9.5C11 10.6046 10.1046 11.5 9 11.5C7.89543 11.5 7 10.6046 7 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14 9.5C14 8.39543 14.8954 7.5 16 7.5C17.1046 7.5 18 8.39543 18 9.5C18 10.6046 17.1046 11.5 16 11.5C14.8954 11.5 14 10.6046 14 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21 9.5C21 8.39543 21.8954 7.5 23 7.5C24.1046 7.5 25 8.39543 25 9.5C25 10.6046 24.1046 11.5 23 11.5C21.8954 11.5 21 10.6046 21 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 9.5C28 8.39543 28.8954 7.5 30 7.5C31.1046 7.5 32 8.39543 32 9.5C32 10.6046 31.1046 11.5 30 11.5C28.8954 11.5 28 10.6046 28 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M35 9.5C35 8.39543 35.8954 7.5 37 7.5C38.1046 7.5 39 8.39543 39 9.5C39 10.6046 38.1046 11.5 37 11.5C35.8954 11.5 35 10.6046 35 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42 9.5C42 8.39543 42.8954 7.5 44 7.5C45.1046 7.5 46 8.39543 46 9.5C46 10.6046 45.1046 11.5 44 11.5C42.8954 11.5 42 10.6046 42 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M49 9.5C49 8.39543 49.8954 7.5 51 7.5C52.1046 7.5 53 8.39543 53 9.5C53 10.6046 52.1046 11.5 51 11.5C49.8954 11.5 49 10.6046 49 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56 9.5C56 8.39543 56.8954 7.5 58 7.5C59.1046 7.5 60 8.39543 60 9.5C60 10.6046 59.1046 11.5 58 11.5C56.8954 11.5 56 10.6046 56 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0 16.5C0 15.3954 0.895431 14.5 2 14.5C3.10457 14.5 4 15.3954 4 16.5C4 17.6046 3.10457 18.5 2 18.5C0.895431 18.5 0 17.6046 0 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7 16.5C7 15.3954 7.89543 14.5 9 14.5C10.1046 14.5 11 15.3954 11 16.5C11 17.6046 10.1046 18.5 9 18.5C7.89543 18.5 7 17.6046 7 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14 16.5C14 15.3954 14.8954 14.5 16 14.5C17.1046 14.5 18 15.3954 18 16.5C18 17.6046 17.1046 18.5 16 18.5C14.8954 18.5 14 17.6046 14 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M21 16.5C21 15.3954 21.8954 14.5 23 14.5C24.1046 14.5 25 15.3954 25 16.5C25 17.6046 24.1046 18.5 23 18.5C21.8954 18.5 21 17.6046 21 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 16.5C28 15.3954 28.8954 14.5 30 14.5C31.1046 14.5 32 15.3954 32 16.5C32 17.6046 31.1046 18.5 30 18.5C28.8954 18.5 28 17.6046 28 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35 16.5C35 15.3954 35.8954 14.5 37 14.5C38.1046 14.5 39 15.3954 39 16.5C39 17.6046 38.1046 18.5 37 18.5C35.8954 18.5 35 17.6046 35 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 16.5C42 15.3954 42.8954 14.5 44 14.5C45.1046 14.5 46 15.3954 46 16.5C46 17.6046 45.1046 18.5 44 18.5C42.8954 18.5 42 17.6046 42 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M49 16.5C49 15.3954 49.8954 14.5 51 14.5C52.1046 14.5 53 15.3954 53 16.5C53 17.6046 52.1046 18.5 51 18.5C49.8954 18.5 49 17.6046 49 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56 16.5C56 15.3954 56.8954 14.5 58 14.5C59.1046 14.5 60 15.3954 60 16.5C60 17.6046 59.1046 18.5 58 18.5C56.8954 18.5 56 17.6046 56 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0 23.5C0 22.3954 0.895431 21.5 2 21.5C3.10457 21.5 4 22.3954 4 23.5C4 24.6046 3.10457 25.5 2 25.5C0.895431 25.5 0 24.6046 0 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7 23.5C7 22.3954 7.89543 21.5 9 21.5C10.1046 21.5 11 22.3954 11 23.5C11 24.6046 10.1046 25.5 9 25.5C7.89543 25.5 7 24.6046 7 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14 23.5C14 22.3954 14.8954 21.5 16 21.5C17.1046 21.5 18 22.3954 18 23.5C18 24.6046 17.1046 25.5 16 25.5C14.8954 25.5 14 24.6046 14 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21 23.5C21 22.3954 21.8954 21.5 23 21.5C24.1046 21.5 25 22.3954 25 23.5C25 24.6046 24.1046 25.5 23 25.5C21.8954 25.5 21 24.6046 21 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 23.5C28 22.3954 28.8954 21.5 30 21.5C31.1046 21.5 32 22.3954 32 23.5C32 24.6046 31.1046 25.5 30 25.5C28.8954 25.5 28 24.6046 28 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M35 23.5C35 22.3954 35.8954 21.5 37 21.5C38.1046 21.5 39 22.3954 39 23.5C39 24.6046 38.1046 25.5 37 25.5C35.8954 25.5 35 24.6046 35 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42 23.5C42 22.3954 42.8954 21.5 44 21.5C45.1046 21.5 46 22.3954 46 23.5C46 24.6046 45.1046 25.5 44 25.5C42.8954 25.5 42 24.6046 42 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49 23.5C49 22.3954 49.8954 21.5 51 21.5C52.1046 21.5 53 22.3954 53 23.5C53 24.6046 52.1046 25.5 51 25.5C49.8954 25.5 49 24.6046 49 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56 23.5C56 22.3954 56.8954 21.5 58 21.5C59.1046 21.5 60 22.3954 60 23.5C60 24.6046 59.1046 25.5 58 25.5C56.8954 25.5 56 24.6046 56 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0 30.5C0 29.3954 0.895431 28.5 2 28.5C3.10457 28.5 4 29.3954 4 30.5C4 31.6046 3.10457 32.5 2 32.5C0.895431 32.5 0 31.6046 0 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7 30.5C7 29.3954 7.89543 28.5 9 28.5C10.1046 28.5 11 29.3954 11 30.5C11 31.6046 10.1046 32.5 9 32.5C7.89543 32.5 7 31.6046 7 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14 30.5C14 29.3954 14.8954 28.5 16 28.5C17.1046 28.5 18 29.3954 18 30.5C18 31.6046 17.1046 32.5 16 32.5C14.8954 32.5 14 31.6046 14 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21 30.5C21 29.3954 21.8954 28.5 23 28.5C24.1046 28.5 25 29.3954 25 30.5C25 31.6046 24.1046 32.5 23 32.5C21.8954 32.5 21 31.6046 21 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 30.5C28 29.3954 28.8954 28.5 30 28.5C31.1046 28.5 32 29.3954 32 30.5C32 31.6046 31.1046 32.5 30 32.5C28.8954 32.5 28 31.6046 28 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M35 30.5C35 29.3954 35.8954 28.5 37 28.5C38.1046 28.5 39 29.3954 39 30.5C39 31.6046 38.1046 32.5 37 32.5C35.8954 32.5 35 31.6046 35 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42 30.5C42 29.3954 42.8954 28.5 44 28.5C45.1046 28.5 46 29.3954 46 30.5C46 31.6046 45.1046 32.5 44 32.5C42.8954 32.5 42 31.6046 42 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M49 30.5C49 29.3954 49.8954 28.5 51 28.5C52.1046 28.5 53 29.3954 53 30.5C53 31.6046 52.1046 32.5 51 32.5C49.8954 32.5 49 31.6046 49 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56 30.5C56 29.3954 56.8954 28.5 58 28.5C59.1046 28.5 60 29.3954 60 30.5C60 31.6046 59.1046 32.5 58 32.5C56.8954 32.5 56 31.6046 56 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0 37.5C0 36.3954 0.895431 35.5 2 35.5C3.10457 35.5 4 36.3954 4 37.5C4 38.6046 3.10457 39.5 2 39.5C0.895431 39.5 0 38.6046 0 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7 37.5C7 36.3954 7.89543 35.5 9 35.5C10.1046 35.5 11 36.3954 11 37.5C11 38.6046 10.1046 39.5 9 39.5C7.89543 39.5 7 38.6046 7 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14 37.5C14 36.3954 14.8954 35.5 16 35.5C17.1046 35.5 18 36.3954 18 37.5C18 38.6046 17.1046 39.5 16 39.5C14.8954 39.5 14 38.6046 14 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21 37.5C21 36.3954 21.8954 35.5 23 35.5C24.1046 35.5 25 36.3954 25 37.5C25 38.6046 24.1046 39.5 23 39.5C21.8954 39.5 21 38.6046 21 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 37.5C28 36.3954 28.8954 35.5 30 35.5C31.1046 35.5 32 36.3954 32 37.5C32 38.6046 31.1046 39.5 30 39.5C28.8954 39.5 28 38.6046 28 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M35 37.5C35 36.3954 35.8954 35.5 37 35.5C38.1046 35.5 39 36.3954 39 37.5C39 38.6046 38.1046 39.5 37 39.5C35.8954 39.5 35 38.6046 35 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42 37.5C42 36.3954 42.8954 35.5 44 35.5C45.1046 35.5 46 36.3954 46 37.5C46 38.6046 45.1046 39.5 44 39.5C42.8954 39.5 42 38.6046 42 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M49 37.5C49 36.3954 49.8954 35.5 51 35.5C52.1046 35.5 53 36.3954 53 37.5C53 38.6046 52.1046 39.5 51 39.5C49.8954 39.5 49 38.6046 49 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56 37.5C56 36.3954 56.8954 35.5 58 35.5C59.1046 35.5 60 36.3954 60 37.5C60 38.6046 59.1046 39.5 58 39.5C56.8954 39.5 56 38.6046 56 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0 44.5C0 43.3954 0.895431 42.5 2 42.5C3.10457 42.5 4 43.3954 4 44.5C4 45.6046 3.10457 46.5 2 46.5C0.895431 46.5 0 45.6046 0 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7 44.5C7 43.3954 7.89543 42.5 9 42.5C10.1046 42.5 11 43.3954 11 44.5C11 45.6046 10.1046 46.5 9 46.5C7.89543 46.5 7 45.6046 7 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14 44.5C14 43.3954 14.8954 42.5 16 42.5C17.1046 42.5 18 43.3954 18 44.5C18 45.6046 17.1046 46.5 16 46.5C14.8954 46.5 14 45.6046 14 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21 44.5C21 43.3954 21.8954 42.5 23 42.5C24.1046 42.5 25 43.3954 25 44.5C25 45.6046 24.1046 46.5 23 46.5C21.8954 46.5 21 45.6046 21 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 44.5C28 43.3954 28.8954 42.5 30 42.5C31.1046 42.5 32 43.3954 32 44.5C32 45.6046 31.1046 46.5 30 46.5C28.8954 46.5 28 45.6046 28 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M35 44.5C35 43.3954 35.8954 42.5 37 42.5C38.1046 42.5 39 43.3954 39 44.5C39 45.6046 38.1046 46.5 37 46.5C35.8954 46.5 35 45.6046 35 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 44.5C42 43.3954 42.8954 42.5 44 42.5C45.1046 42.5 46 43.3954 46 44.5C46 45.6046 45.1046 46.5 44 46.5C42.8954 46.5 42 45.6046 42 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49 44.5C49 43.3954 49.8954 42.5 51 42.5C52.1046 42.5 53 43.3954 53 44.5C53 45.6046 52.1046 46.5 51 46.5C49.8954 46.5 49 45.6046 49 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56 44.5C56 43.3954 56.8954 42.5 58 42.5C59.1046 42.5 60 43.3954 60 44.5C60 45.6046 59.1046 46.5 58 46.5C56.8954 46.5 56 45.6046 56 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0 51.5C0 50.3954 0.895431 49.5 2 49.5C3.10457 49.5 4 50.3954 4 51.5C4 52.6046 3.10457 53.5 2 53.5C0.895431 53.5 0 52.6046 0 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7 51.5C7 50.3954 7.89543 49.5 9 49.5C10.1046 49.5 11 50.3954 11 51.5C11 52.6046 10.1046 53.5 9 53.5C7.89543 53.5 7 52.6046 7 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14 51.5C14 50.3954 14.8954 49.5 16 49.5C17.1046 49.5 18 50.3954 18 51.5C18 52.6046 17.1046 53.5 16 53.5C14.8954 53.5 14 52.6046 14 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M21 51.5C21 50.3954 21.8954 49.5 23 49.5C24.1046 49.5 25 50.3954 25 51.5C25 52.6046 24.1046 53.5 23 53.5C21.8954 53.5 21 52.6046 21 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 51.5C28 50.3954 28.8954 49.5 30 49.5C31.1046 49.5 32 50.3954 32 51.5C32 52.6046 31.1046 53.5 30 53.5C28.8954 53.5 28 52.6046 28 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35 51.5C35 50.3954 35.8954 49.5 37 49.5C38.1046 49.5 39 50.3954 39 51.5C39 52.6046 38.1046 53.5 37 53.5C35.8954 53.5 35 52.6046 35 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42 51.5C42 50.3954 42.8954 49.5 44 49.5C45.1046 49.5 46 50.3954 46 51.5C46 52.6046 45.1046 53.5 44 53.5C42.8954 53.5 42 52.6046 42 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49 51.5C49 50.3954 49.8954 49.5 51 49.5C52.1046 49.5 53 50.3954 53 51.5C53 52.6046 52.1046 53.5 51 53.5C49.8954 53.5 49 52.6046 49 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56 51.5C56 50.3954 56.8954 49.5 58 49.5C59.1046 49.5 60 50.3954 60 51.5C60 52.6046 59.1046 53.5 58 53.5C56.8954 53.5 56 52.6046 56 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0 58.5C0 57.3954 0.895431 56.5 2 56.5C3.10457 56.5 4 57.3954 4 58.5C4 59.6046 3.10457 60.5 2 60.5C0.895431 60.5 0 59.6046 0 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7 58.5C7 57.3954 7.89543 56.5 9 56.5C10.1046 56.5 11 57.3954 11 58.5C11 59.6046 10.1046 60.5 9 60.5C7.89543 60.5 7 59.6046 7 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14 58.5C14 57.3954 14.8954 56.5 16 56.5C17.1046 56.5 18 57.3954 18 58.5C18 59.6046 17.1046 60.5 16 60.5C14.8954 60.5 14 59.6046 14 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21 58.5C21 57.3954 21.8954 56.5 23 56.5C24.1046 56.5 25 57.3954 25 58.5C25 59.6046 24.1046 60.5 23 60.5C21.8954 60.5 21 59.6046 21 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 58.5C28 57.3954 28.8954 56.5 30 56.5C31.1046 56.5 32 57.3954 32 58.5C32 59.6046 31.1046 60.5 30 60.5C28.8954 60.5 28 59.6046 28 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M35 58.5C35 57.3954 35.8954 56.5 37 56.5C38.1046 56.5 39 57.3954 39 58.5C39 59.6046 38.1046 60.5 37 60.5C35.8954 60.5 35 59.6046 35 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42 58.5C42 57.3954 42.8954 56.5 44 56.5C45.1046 56.5 46 57.3954 46 58.5C46 59.6046 45.1046 60.5 44 60.5C42.8954 60.5 42 59.6046 42 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49 58.5C49 57.3954 49.8954 56.5 51 56.5C52.1046 56.5 53 57.3954 53 58.5C53 59.6046 52.1046 60.5 51 60.5C49.8954 60.5 49 59.6046 49 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56 58.5C56 57.3954 56.8954 56.5 58 56.5C59.1046 56.5 60 57.3954 60 58.5C60 59.6046 59.1046 60.5 58 60.5C56.8954 60.5 56 59.6046 56 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id='clip0_1_5128'>
|
||||
<rect width='60' height='60' fill='white' transform='translate(0 0.5)' />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Community
|
||||
@@ -0,0 +1,22 @@
|
||||
const EnterpriseNoise = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='148' viewBox='0 0 100% 148' fill='none'>
|
||||
<g opacity='0.05' filter='url(#filter0_g_1_5499)'>
|
||||
<rect y='0' width='100%' height='96' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
</g>
|
||||
<defs>
|
||||
<filter id='filter0_g_1_5499' x='0' y='0' width='100%' height='296' filterUnits='userSpaceOnUse' colorInterpolationFilters='sRGB'>
|
||||
<feFlood floodOpacity='0' result='BackgroundImageFix' />
|
||||
<feBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape' />
|
||||
<feTurbulence type='fractalNoise' baseFrequency='0.625 0.625' numOctaves='3' seed='5427' />
|
||||
<feDisplacementMap in='shape' scale='200' xChannelSelector='R' yChannelSelector='G' result='displacedImage' width='100%' height='100%' />
|
||||
<feMerge result='effect1_texture_1_5499'>
|
||||
<feMergeNode in='displacedImage' />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default EnterpriseNoise
|
||||
@@ -0,0 +1,96 @@
|
||||
const Enterprise = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='61' height='61' viewBox='0 0 61 61' fill='none'>
|
||||
<g clipPath='url(#clip0_1_5366)'>
|
||||
<path d='M0.333496 2.5C0.333496 1.39543 1.22893 0.5 2.3335 0.5C3.43807 0.5 4.3335 1.39543 4.3335 2.5C4.3335 3.60457 3.43807 4.5 2.3335 4.5C1.22893 4.5 0.333496 3.60457 0.333496 2.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M7.3335 2.5C7.3335 1.39543 8.22893 0.5 9.3335 0.5C10.4381 0.5 11.3335 1.39543 11.3335 2.5C11.3335 3.60457 10.4381 4.5 9.3335 4.5C8.22893 4.5 7.3335 3.60457 7.3335 2.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M14.3335 2.5C14.3335 1.39543 15.2289 0.5 16.3335 0.5C17.4381 0.5 18.3335 1.39543 18.3335 2.5C18.3335 3.60457 17.4381 4.5 16.3335 4.5C15.2289 4.5 14.3335 3.60457 14.3335 2.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M21.3335 2.5C21.3335 1.39543 22.2289 0.5 23.3335 0.5C24.4381 0.5 25.3335 1.39543 25.3335 2.5C25.3335 3.60457 24.4381 4.5 23.3335 4.5C22.2289 4.5 21.3335 3.60457 21.3335 2.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M28.3335 2.5C28.3335 1.39543 29.2289 0.5 30.3335 0.5C31.4381 0.5 32.3335 1.39543 32.3335 2.5C32.3335 3.60457 31.4381 4.5 30.3335 4.5C29.2289 4.5 28.3335 3.60457 28.3335 2.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M35.3335 2.5C35.3335 1.39543 36.2289 0.5 37.3335 0.5C38.4381 0.5 39.3335 1.39543 39.3335 2.5C39.3335 3.60457 38.4381 4.5 37.3335 4.5C36.2289 4.5 35.3335 3.60457 35.3335 2.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M42.3335 2.5C42.3335 1.39543 43.2289 0.5 44.3335 0.5C45.4381 0.5 46.3335 1.39543 46.3335 2.5C46.3335 3.60457 45.4381 4.5 44.3335 4.5C43.2289 4.5 42.3335 3.60457 42.3335 2.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M49.3335 2.5C49.3335 1.39543 50.2289 0.5 51.3335 0.5C52.4381 0.5 53.3335 1.39543 53.3335 2.5C53.3335 3.60457 52.4381 4.5 51.3335 4.5C50.2289 4.5 49.3335 3.60457 49.3335 2.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M56.3335 2.5C56.3335 1.39543 57.2289 0.5 58.3335 0.5C59.4381 0.5 60.3335 1.39543 60.3335 2.5C60.3335 3.60457 59.4381 4.5 58.3335 4.5C57.2289 4.5 56.3335 3.60457 56.3335 2.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M0.333496 9.5C0.333496 8.39543 1.22893 7.5 2.3335 7.5C3.43807 7.5 4.3335 8.39543 4.3335 9.5C4.3335 10.6046 3.43807 11.5 2.3335 11.5C1.22893 11.5 0.333496 10.6046 0.333496 9.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M7.3335 9.5C7.3335 8.39543 8.22893 7.5 9.3335 7.5C10.4381 7.5 11.3335 8.39543 11.3335 9.5C11.3335 10.6046 10.4381 11.5 9.3335 11.5C8.22893 11.5 7.3335 10.6046 7.3335 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3335 9.5C14.3335 8.39543 15.2289 7.5 16.3335 7.5C17.4381 7.5 18.3335 8.39543 18.3335 9.5C18.3335 10.6046 17.4381 11.5 16.3335 11.5C15.2289 11.5 14.3335 10.6046 14.3335 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.3335 9.5C21.3335 8.39543 22.2289 7.5 23.3335 7.5C24.4381 7.5 25.3335 8.39543 25.3335 9.5C25.3335 10.6046 24.4381 11.5 23.3335 11.5C22.2289 11.5 21.3335 10.6046 21.3335 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.3335 9.5C28.3335 8.39543 29.2289 7.5 30.3335 7.5C31.4381 7.5 32.3335 8.39543 32.3335 9.5C32.3335 10.6046 31.4381 11.5 30.3335 11.5C29.2289 11.5 28.3335 10.6046 28.3335 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M35.3335 9.5C35.3335 8.39543 36.2289 7.5 37.3335 7.5C38.4381 7.5 39.3335 8.39543 39.3335 9.5C39.3335 10.6046 38.4381 11.5 37.3335 11.5C36.2289 11.5 35.3335 10.6046 35.3335 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42.3335 9.5C42.3335 8.39543 43.2289 7.5 44.3335 7.5C45.4381 7.5 46.3335 8.39543 46.3335 9.5C46.3335 10.6046 45.4381 11.5 44.3335 11.5C43.2289 11.5 42.3335 10.6046 42.3335 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.3335 9.5C49.3335 8.39543 50.2289 7.5 51.3335 7.5C52.4381 7.5 53.3335 8.39543 53.3335 9.5C53.3335 10.6046 52.4381 11.5 51.3335 11.5C50.2289 11.5 49.3335 10.6046 49.3335 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56.3335 9.5C56.3335 8.39543 57.2289 7.5 58.3335 7.5C59.4381 7.5 60.3335 8.39543 60.3335 9.5C60.3335 10.6046 59.4381 11.5 58.3335 11.5C57.2289 11.5 56.3335 10.6046 56.3335 9.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M0.333496 16.5C0.333496 15.3954 1.22893 14.5 2.3335 14.5C3.43807 14.5 4.3335 15.3954 4.3335 16.5C4.3335 17.6046 3.43807 18.5 2.3335 18.5C1.22893 18.5 0.333496 17.6046 0.333496 16.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M7.3335 16.5C7.3335 15.3954 8.22893 14.5 9.3335 14.5C10.4381 14.5 11.3335 15.3954 11.3335 16.5C11.3335 17.6046 10.4381 18.5 9.3335 18.5C8.22893 18.5 7.3335 17.6046 7.3335 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14.3335 16.5C14.3335 15.3954 15.2289 14.5 16.3335 14.5C17.4381 14.5 18.3335 15.3954 18.3335 16.5C18.3335 17.6046 17.4381 18.5 16.3335 18.5C15.2289 18.5 14.3335 17.6046 14.3335 16.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M21.3335 16.5C21.3335 15.3954 22.2289 14.5 23.3335 14.5C24.4381 14.5 25.3335 15.3954 25.3335 16.5C25.3335 17.6046 24.4381 18.5 23.3335 18.5C22.2289 18.5 21.3335 17.6046 21.3335 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28.3335 16.5C28.3335 15.3954 29.2289 14.5 30.3335 14.5C31.4381 14.5 32.3335 15.3954 32.3335 16.5C32.3335 17.6046 31.4381 18.5 30.3335 18.5C29.2289 18.5 28.3335 17.6046 28.3335 16.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M35.3335 16.5C35.3335 15.3954 36.2289 14.5 37.3335 14.5C38.4381 14.5 39.3335 15.3954 39.3335 16.5C39.3335 17.6046 38.4381 18.5 37.3335 18.5C36.2289 18.5 35.3335 17.6046 35.3335 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42.3335 16.5C42.3335 15.3954 43.2289 14.5 44.3335 14.5C45.4381 14.5 46.3335 15.3954 46.3335 16.5C46.3335 17.6046 45.4381 18.5 44.3335 18.5C43.2289 18.5 42.3335 17.6046 42.3335 16.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M49.3335 16.5C49.3335 15.3954 50.2289 14.5 51.3335 14.5C52.4381 14.5 53.3335 15.3954 53.3335 16.5C53.3335 17.6046 52.4381 18.5 51.3335 18.5C50.2289 18.5 49.3335 17.6046 49.3335 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56.3335 16.5C56.3335 15.3954 57.2289 14.5 58.3335 14.5C59.4381 14.5 60.3335 15.3954 60.3335 16.5C60.3335 17.6046 59.4381 18.5 58.3335 18.5C57.2289 18.5 56.3335 17.6046 56.3335 16.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M0.333496 23.5C0.333496 22.3954 1.22893 21.5 2.3335 21.5C3.43807 21.5 4.3335 22.3954 4.3335 23.5C4.3335 24.6046 3.43807 25.5 2.3335 25.5C1.22893 25.5 0.333496 24.6046 0.333496 23.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M7.3335 23.5C7.3335 22.3954 8.22893 21.5 9.3335 21.5C10.4381 21.5 11.3335 22.3954 11.3335 23.5C11.3335 24.6046 10.4381 25.5 9.3335 25.5C8.22893 25.5 7.3335 24.6046 7.3335 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3335 23.5C14.3335 22.3954 15.2289 21.5 16.3335 21.5C17.4381 21.5 18.3335 22.3954 18.3335 23.5C18.3335 24.6046 17.4381 25.5 16.3335 25.5C15.2289 25.5 14.3335 24.6046 14.3335 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.3335 23.5C21.3335 22.3954 22.2289 21.5 23.3335 21.5C24.4381 21.5 25.3335 22.3954 25.3335 23.5C25.3335 24.6046 24.4381 25.5 23.3335 25.5C22.2289 25.5 21.3335 24.6046 21.3335 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.3335 23.5C28.3335 22.3954 29.2289 21.5 30.3335 21.5C31.4381 21.5 32.3335 22.3954 32.3335 23.5C32.3335 24.6046 31.4381 25.5 30.3335 25.5C29.2289 25.5 28.3335 24.6046 28.3335 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M35.3335 23.5C35.3335 22.3954 36.2289 21.5 37.3335 21.5C38.4381 21.5 39.3335 22.3954 39.3335 23.5C39.3335 24.6046 38.4381 25.5 37.3335 25.5C36.2289 25.5 35.3335 24.6046 35.3335 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42.3335 23.5C42.3335 22.3954 43.2289 21.5 44.3335 21.5C45.4381 21.5 46.3335 22.3954 46.3335 23.5C46.3335 24.6046 45.4381 25.5 44.3335 25.5C43.2289 25.5 42.3335 24.6046 42.3335 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.3335 23.5C49.3335 22.3954 50.2289 21.5 51.3335 21.5C52.4381 21.5 53.3335 22.3954 53.3335 23.5C53.3335 24.6046 52.4381 25.5 51.3335 25.5C50.2289 25.5 49.3335 24.6046 49.3335 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56.3335 23.5C56.3335 22.3954 57.2289 21.5 58.3335 21.5C59.4381 21.5 60.3335 22.3954 60.3335 23.5C60.3335 24.6046 59.4381 25.5 58.3335 25.5C57.2289 25.5 56.3335 24.6046 56.3335 23.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M0.333496 30.5C0.333496 29.3954 1.22893 28.5 2.3335 28.5C3.43807 28.5 4.3335 29.3954 4.3335 30.5C4.3335 31.6046 3.43807 32.5 2.3335 32.5C1.22893 32.5 0.333496 31.6046 0.333496 30.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M7.3335 30.5C7.3335 29.3954 8.22893 28.5 9.3335 28.5C10.4381 28.5 11.3335 29.3954 11.3335 30.5C11.3335 31.6046 10.4381 32.5 9.3335 32.5C8.22893 32.5 7.3335 31.6046 7.3335 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14.3335 30.5C14.3335 29.3954 15.2289 28.5 16.3335 28.5C17.4381 28.5 18.3335 29.3954 18.3335 30.5C18.3335 31.6046 17.4381 32.5 16.3335 32.5C15.2289 32.5 14.3335 31.6046 14.3335 30.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M21.3335 30.5C21.3335 29.3954 22.2289 28.5 23.3335 28.5C24.4381 28.5 25.3335 29.3954 25.3335 30.5C25.3335 31.6046 24.4381 32.5 23.3335 32.5C22.2289 32.5 21.3335 31.6046 21.3335 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28.3335 30.5C28.3335 29.3954 29.2289 28.5 30.3335 28.5C31.4381 28.5 32.3335 29.3954 32.3335 30.5C32.3335 31.6046 31.4381 32.5 30.3335 32.5C29.2289 32.5 28.3335 31.6046 28.3335 30.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M35.3335 30.5C35.3335 29.3954 36.2289 28.5 37.3335 28.5C38.4381 28.5 39.3335 29.3954 39.3335 30.5C39.3335 31.6046 38.4381 32.5 37.3335 32.5C36.2289 32.5 35.3335 31.6046 35.3335 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42.3335 30.5C42.3335 29.3954 43.2289 28.5 44.3335 28.5C45.4381 28.5 46.3335 29.3954 46.3335 30.5C46.3335 31.6046 45.4381 32.5 44.3335 32.5C43.2289 32.5 42.3335 31.6046 42.3335 30.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M49.3335 30.5C49.3335 29.3954 50.2289 28.5 51.3335 28.5C52.4381 28.5 53.3335 29.3954 53.3335 30.5C53.3335 31.6046 52.4381 32.5 51.3335 32.5C50.2289 32.5 49.3335 31.6046 49.3335 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56.3335 30.5C56.3335 29.3954 57.2289 28.5 58.3335 28.5C59.4381 28.5 60.3335 29.3954 60.3335 30.5C60.3335 31.6046 59.4381 32.5 58.3335 32.5C57.2289 32.5 56.3335 31.6046 56.3335 30.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M0.333496 37.5C0.333496 36.3954 1.22893 35.5 2.3335 35.5C3.43807 35.5 4.3335 36.3954 4.3335 37.5C4.3335 38.6046 3.43807 39.5 2.3335 39.5C1.22893 39.5 0.333496 38.6046 0.333496 37.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M7.3335 37.5C7.3335 36.3954 8.22893 35.5 9.3335 35.5C10.4381 35.5 11.3335 36.3954 11.3335 37.5C11.3335 38.6046 10.4381 39.5 9.3335 39.5C8.22893 39.5 7.3335 38.6046 7.3335 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3335 37.5C14.3335 36.3954 15.2289 35.5 16.3335 35.5C17.4381 35.5 18.3335 36.3954 18.3335 37.5C18.3335 38.6046 17.4381 39.5 16.3335 39.5C15.2289 39.5 14.3335 38.6046 14.3335 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.3335 37.5C21.3335 36.3954 22.2289 35.5 23.3335 35.5C24.4381 35.5 25.3335 36.3954 25.3335 37.5C25.3335 38.6046 24.4381 39.5 23.3335 39.5C22.2289 39.5 21.3335 38.6046 21.3335 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.3335 37.5C28.3335 36.3954 29.2289 35.5 30.3335 35.5C31.4381 35.5 32.3335 36.3954 32.3335 37.5C32.3335 38.6046 31.4381 39.5 30.3335 39.5C29.2289 39.5 28.3335 38.6046 28.3335 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M35.3335 37.5C35.3335 36.3954 36.2289 35.5 37.3335 35.5C38.4381 35.5 39.3335 36.3954 39.3335 37.5C39.3335 38.6046 38.4381 39.5 37.3335 39.5C36.2289 39.5 35.3335 38.6046 35.3335 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42.3335 37.5C42.3335 36.3954 43.2289 35.5 44.3335 35.5C45.4381 35.5 46.3335 36.3954 46.3335 37.5C46.3335 38.6046 45.4381 39.5 44.3335 39.5C43.2289 39.5 42.3335 38.6046 42.3335 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.3335 37.5C49.3335 36.3954 50.2289 35.5 51.3335 35.5C52.4381 35.5 53.3335 36.3954 53.3335 37.5C53.3335 38.6046 52.4381 39.5 51.3335 39.5C50.2289 39.5 49.3335 38.6046 49.3335 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56.3335 37.5C56.3335 36.3954 57.2289 35.5 58.3335 35.5C59.4381 35.5 60.3335 36.3954 60.3335 37.5C60.3335 38.6046 59.4381 39.5 58.3335 39.5C57.2289 39.5 56.3335 38.6046 56.3335 37.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M0.333496 44.5C0.333496 43.3954 1.22893 42.5 2.3335 42.5C3.43807 42.5 4.3335 43.3954 4.3335 44.5C4.3335 45.6046 3.43807 46.5 2.3335 46.5C1.22893 46.5 0.333496 45.6046 0.333496 44.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M7.3335 44.5C7.3335 43.3954 8.22893 42.5 9.3335 42.5C10.4381 42.5 11.3335 43.3954 11.3335 44.5C11.3335 45.6046 10.4381 46.5 9.3335 46.5C8.22893 46.5 7.3335 45.6046 7.3335 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3335 44.5C14.3335 43.3954 15.2289 42.5 16.3335 42.5C17.4381 42.5 18.3335 43.3954 18.3335 44.5C18.3335 45.6046 17.4381 46.5 16.3335 46.5C15.2289 46.5 14.3335 45.6046 14.3335 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M21.3335 44.5C21.3335 43.3954 22.2289 42.5 23.3335 42.5C24.4381 42.5 25.3335 43.3954 25.3335 44.5C25.3335 45.6046 24.4381 46.5 23.3335 46.5C22.2289 46.5 21.3335 45.6046 21.3335 44.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M28.3335 44.5C28.3335 43.3954 29.2289 42.5 30.3335 42.5C31.4381 42.5 32.3335 43.3954 32.3335 44.5C32.3335 45.6046 31.4381 46.5 30.3335 46.5C29.2289 46.5 28.3335 45.6046 28.3335 44.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M35.3335 44.5C35.3335 43.3954 36.2289 42.5 37.3335 42.5C38.4381 42.5 39.3335 43.3954 39.3335 44.5C39.3335 45.6046 38.4381 46.5 37.3335 46.5C36.2289 46.5 35.3335 45.6046 35.3335 44.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M42.3335 44.5C42.3335 43.3954 43.2289 42.5 44.3335 42.5C45.4381 42.5 46.3335 43.3954 46.3335 44.5C46.3335 45.6046 45.4381 46.5 44.3335 46.5C43.2289 46.5 42.3335 45.6046 42.3335 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.3335 44.5C49.3335 43.3954 50.2289 42.5 51.3335 42.5C52.4381 42.5 53.3335 43.3954 53.3335 44.5C53.3335 45.6046 52.4381 46.5 51.3335 46.5C50.2289 46.5 49.3335 45.6046 49.3335 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56.3335 44.5C56.3335 43.3954 57.2289 42.5 58.3335 42.5C59.4381 42.5 60.3335 43.3954 60.3335 44.5C60.3335 45.6046 59.4381 46.5 58.3335 46.5C57.2289 46.5 56.3335 45.6046 56.3335 44.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M0.333496 51.5C0.333496 50.3954 1.22893 49.5 2.3335 49.5C3.43807 49.5 4.3335 50.3954 4.3335 51.5C4.3335 52.6046 3.43807 53.5 2.3335 53.5C1.22893 53.5 0.333496 52.6046 0.333496 51.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M7.3335 51.5C7.3335 50.3954 8.22893 49.5 9.3335 49.5C10.4381 49.5 11.3335 50.3954 11.3335 51.5C11.3335 52.6046 10.4381 53.5 9.3335 53.5C8.22893 53.5 7.3335 52.6046 7.3335 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3335 51.5C14.3335 50.3954 15.2289 49.5 16.3335 49.5C17.4381 49.5 18.3335 50.3954 18.3335 51.5C18.3335 52.6046 17.4381 53.5 16.3335 53.5C15.2289 53.5 14.3335 52.6046 14.3335 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M21.3335 51.5C21.3335 50.3954 22.2289 49.5 23.3335 49.5C24.4381 49.5 25.3335 50.3954 25.3335 51.5C25.3335 52.6046 24.4381 53.5 23.3335 53.5C22.2289 53.5 21.3335 52.6046 21.3335 51.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M28.3335 51.5C28.3335 50.3954 29.2289 49.5 30.3335 49.5C31.4381 49.5 32.3335 50.3954 32.3335 51.5C32.3335 52.6046 31.4381 53.5 30.3335 53.5C29.2289 53.5 28.3335 52.6046 28.3335 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35.3335 51.5C35.3335 50.3954 36.2289 49.5 37.3335 49.5C38.4381 49.5 39.3335 50.3954 39.3335 51.5C39.3335 52.6046 38.4381 53.5 37.3335 53.5C36.2289 53.5 35.3335 52.6046 35.3335 51.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M42.3335 51.5C42.3335 50.3954 43.2289 49.5 44.3335 49.5C45.4381 49.5 46.3335 50.3954 46.3335 51.5C46.3335 52.6046 45.4381 53.5 44.3335 53.5C43.2289 53.5 42.3335 52.6046 42.3335 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.3335 51.5C49.3335 50.3954 50.2289 49.5 51.3335 49.5C52.4381 49.5 53.3335 50.3954 53.3335 51.5C53.3335 52.6046 52.4381 53.5 51.3335 53.5C50.2289 53.5 49.3335 52.6046 49.3335 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56.3335 51.5C56.3335 50.3954 57.2289 49.5 58.3335 49.5C59.4381 49.5 60.3335 50.3954 60.3335 51.5C60.3335 52.6046 59.4381 53.5 58.3335 53.5C57.2289 53.5 56.3335 52.6046 56.3335 51.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path d='M0.333496 58.5C0.333496 57.3954 1.22893 56.5 2.3335 56.5C3.43807 56.5 4.3335 57.3954 4.3335 58.5C4.3335 59.6046 3.43807 60.5 2.3335 60.5C1.22893 60.5 0.333496 59.6046 0.333496 58.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M7.3335 58.5C7.3335 57.3954 8.22893 56.5 9.3335 56.5C10.4381 56.5 11.3335 57.3954 11.3335 58.5C11.3335 59.6046 10.4381 60.5 9.3335 60.5C8.22893 60.5 7.3335 59.6046 7.3335 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3335 58.5C14.3335 57.3954 15.2289 56.5 16.3335 56.5C17.4381 56.5 18.3335 57.3954 18.3335 58.5C18.3335 59.6046 17.4381 60.5 16.3335 60.5C15.2289 60.5 14.3335 59.6046 14.3335 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M21.3335 58.5C21.3335 57.3954 22.2289 56.5 23.3335 56.5C24.4381 56.5 25.3335 57.3954 25.3335 58.5C25.3335 59.6046 24.4381 60.5 23.3335 60.5C22.2289 60.5 21.3335 59.6046 21.3335 58.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M28.3335 58.5C28.3335 57.3954 29.2289 56.5 30.3335 56.5C31.4381 56.5 32.3335 57.3954 32.3335 58.5C32.3335 59.6046 31.4381 60.5 30.3335 60.5C29.2289 60.5 28.3335 59.6046 28.3335 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35.3335 58.5C35.3335 57.3954 36.2289 56.5 37.3335 56.5C38.4381 56.5 39.3335 57.3954 39.3335 58.5C39.3335 59.6046 38.4381 60.5 37.3335 60.5C36.2289 60.5 35.3335 59.6046 35.3335 58.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<path opacity='0.18' d='M42.3335 58.5C42.3335 57.3954 43.2289 56.5 44.3335 56.5C45.4381 56.5 46.3335 57.3954 46.3335 58.5C46.3335 59.6046 45.4381 60.5 44.3335 60.5C43.2289 60.5 42.3335 59.6046 42.3335 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.3335 58.5C49.3335 57.3954 50.2289 56.5 51.3335 56.5C52.4381 56.5 53.3335 57.3954 53.3335 58.5C53.3335 59.6046 52.4381 60.5 51.3335 60.5C50.2289 60.5 49.3335 59.6046 49.3335 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56.3335 58.5C56.3335 57.3954 57.2289 56.5 58.3335 56.5C59.4381 56.5 60.3335 57.3954 60.3335 58.5C60.3335 59.6046 59.4381 60.5 58.3335 60.5C57.2289 60.5 56.3335 59.6046 56.3335 58.5Z' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id='clip0_1_5366'>
|
||||
<rect width='60' height='60' fill='white' transform='translate(0.333496 0.5)' />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Enterprise
|
||||
12
dify/web/app/components/billing/pricing/assets/index.tsx
Normal file
12
dify/web/app/components/billing/pricing/assets/index.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
export { default as Cloud } from './cloud'
|
||||
export { default as SelfHosted } from './self-hosted'
|
||||
export { default as Sandbox } from './sandbox'
|
||||
export { default as Professional } from './professional'
|
||||
export { default as Team } from './team'
|
||||
export { default as Community } from './community'
|
||||
export { default as Premium } from './premium'
|
||||
export { default as Enterprise } from './enterprise'
|
||||
export { default as NoiseTop } from './noise-top'
|
||||
export { default as NoiseBottom } from './noise-bottom'
|
||||
export { default as PremiumNoise } from './premium-noise'
|
||||
export { default as EnterpriseNoise } from './enterprise-noise'
|
||||
@@ -0,0 +1,22 @@
|
||||
const NoiseBottom = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='148' viewBox='0 0 100% 148' fill='none'>
|
||||
<g opacity='0.1' filter='url(#filter0_g_1_5505)'>
|
||||
<rect y='52' width='100%' height='96' fill='var(--color-text-quaternary)' />
|
||||
</g>
|
||||
<defs>
|
||||
<filter id='filter0_g_1_5505' x='0' y='0' width='100%' height='296' filterUnits='userSpaceOnUse' colorInterpolationFilters='sRGB'>
|
||||
<feFlood floodOpacity='0' result='BackgroundImageFix' />
|
||||
<feBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape' />
|
||||
<feTurbulence type='fractalNoise' baseFrequency='0.625 0.625' numOctaves='3' seed='5427' />
|
||||
<feDisplacementMap in='shape' scale='200' xChannelSelector='R' yChannelSelector='G' result='displacedImage' width='100%' height='100%' />
|
||||
<feMerge result='effect1_texture_1_5505'>
|
||||
<feMergeNode in='displacedImage' />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default NoiseBottom
|
||||
22
dify/web/app/components/billing/pricing/assets/noise-top.tsx
Normal file
22
dify/web/app/components/billing/pricing/assets/noise-top.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
const NoiseTop = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='148' viewBox='0 0 100% 148' fill='none'>
|
||||
<g opacity='0.1' filter='url(#filter0_g_2_13388)'>
|
||||
<rect y='0' width='100%' height='96' fill='var(--color-text-quaternary)' />
|
||||
</g>
|
||||
<defs>
|
||||
<filter id='filter0_g_2_13388' x='0' y='0' width='100%' height='296' filterUnits='userSpaceOnUse' colorInterpolationFilters='sRGB'>
|
||||
<feFlood floodOpacity='0' result='BackgroundImageFix' />
|
||||
<feBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape' />
|
||||
<feTurbulence type='fractalNoise' baseFrequency='0.625 0.625' numOctaves='3' seed='5427' />
|
||||
<feDisplacementMap in='shape' scale='200' xChannelSelector='R' yChannelSelector='G' result='displacedImage' width='100%' height='100%' />
|
||||
<feMerge result='effect1_texture_2_13388'>
|
||||
<feMergeNode in='displacedImage' />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default NoiseTop
|
||||
@@ -0,0 +1,22 @@
|
||||
const PremiumNoise = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='148' viewBox='0 0 100% 148' fill='none'>
|
||||
<g opacity='0.05' filter='url(#filter0_g_1_5238)'>
|
||||
<rect y='0' width='100%' height='96' fill='var(--color-text-warning)' />
|
||||
</g>
|
||||
<defs>
|
||||
<filter id='filter0_g_1_5238' x='0' y='0' width='100%' height='296' filterUnits='userSpaceOnUse' colorInterpolationFilters='sRGB'>
|
||||
<feFlood floodOpacity='0' result='BackgroundImageFix' />
|
||||
<feBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape' />
|
||||
<feTurbulence type='fractalNoise' baseFrequency='0.625 0.625' numOctaves='3' seed='5427' />
|
||||
<feDisplacementMap in='shape' scale='200' xChannelSelector='R' yChannelSelector='G' result='displacedImage' width='100%' height='100%' />
|
||||
<feMerge result='effect1_texture_1_5238'>
|
||||
<feMergeNode in='displacedImage' />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default PremiumNoise
|
||||
96
dify/web/app/components/billing/pricing/assets/premium.tsx
Normal file
96
dify/web/app/components/billing/pricing/assets/premium.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
const Premium = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='61' height='61' viewBox='0 0 61 61' fill='none'>
|
||||
<g clipPath='url(#clip0_1_5240)'>
|
||||
<path opacity='0.18' d='M0.666748 2.5C0.666748 1.39543 1.56218 0.5 2.66675 0.5C3.77132 0.5 4.66675 1.39543 4.66675 2.5C4.66675 3.60457 3.77132 4.5 2.66675 4.5C1.56218 4.5 0.666748 3.60457 0.666748 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7.66675 2.5C7.66675 1.39543 8.56218 0.5 9.66675 0.5C10.7713 0.5 11.6667 1.39543 11.6667 2.5C11.6667 3.60457 10.7713 4.5 9.66675 4.5C8.56218 4.5 7.66675 3.60457 7.66675 2.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M14.6667 2.5C14.6667 1.39543 15.5622 0.5 16.6667 0.5C17.7713 0.5 18.6667 1.39543 18.6667 2.5C18.6667 3.60457 17.7713 4.5 16.6667 4.5C15.5622 4.5 14.6667 3.60457 14.6667 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.6667 2.5C21.6667 1.39543 22.5622 0.5 23.6667 0.5C24.7713 0.5 25.6667 1.39543 25.6667 2.5C25.6667 3.60457 24.7713 4.5 23.6667 4.5C22.5622 4.5 21.6667 3.60457 21.6667 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.6667 2.5C28.6667 1.39543 29.5622 0.5 30.6667 0.5C31.7713 0.5 32.6667 1.39543 32.6667 2.5C32.6667 3.60457 31.7713 4.5 30.6667 4.5C29.5622 4.5 28.6667 3.60457 28.6667 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35.6667 2.5C35.6667 1.39543 36.5622 0.5 37.6667 0.5C38.7713 0.5 39.6667 1.39543 39.6667 2.5C39.6667 3.60457 38.7713 4.5 37.6667 4.5C36.5622 4.5 35.6667 3.60457 35.6667 2.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M42.6667 2.5C42.6667 1.39543 43.5622 0.5 44.6667 0.5C45.7713 0.5 46.6667 1.39543 46.6667 2.5C46.6667 3.60457 45.7713 4.5 44.6667 4.5C43.5622 4.5 42.6667 3.60457 42.6667 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.6667 2.5C49.6667 1.39543 50.5622 0.5 51.6667 0.5C52.7713 0.5 53.6667 1.39543 53.6667 2.5C53.6667 3.60457 52.7713 4.5 51.6667 4.5C50.5622 4.5 49.6667 3.60457 49.6667 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.6667 2.5C56.6667 1.39543 57.5622 0.5 58.6667 0.5C59.7713 0.5 60.6667 1.39543 60.6667 2.5C60.6667 3.60457 59.7713 4.5 58.6667 4.5C57.5622 4.5 56.6667 3.60457 56.6667 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0.666748 9.5C0.666748 8.39543 1.56218 7.5 2.66675 7.5C3.77132 7.5 4.66675 8.39543 4.66675 9.5C4.66675 10.6046 3.77132 11.5 2.66675 11.5C1.56218 11.5 0.666748 10.6046 0.666748 9.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M7.66675 9.5C7.66675 8.39543 8.56218 7.5 9.66675 7.5C10.7713 7.5 11.6667 8.39543 11.6667 9.5C11.6667 10.6046 10.7713 11.5 9.66675 11.5C8.56218 11.5 7.66675 10.6046 7.66675 9.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M14.6667 9.5C14.6667 8.39543 15.5622 7.5 16.6667 7.5C17.7713 7.5 18.6667 8.39543 18.6667 9.5C18.6667 10.6046 17.7713 11.5 16.6667 11.5C15.5622 11.5 14.6667 10.6046 14.6667 9.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M21.6667 9.5C21.6667 8.39543 22.5622 7.5 23.6667 7.5C24.7713 7.5 25.6667 8.39543 25.6667 9.5C25.6667 10.6046 24.7713 11.5 23.6667 11.5C22.5622 11.5 21.6667 10.6046 21.6667 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.6667 9.5C28.6667 8.39543 29.5622 7.5 30.6667 7.5C31.7713 7.5 32.6667 8.39543 32.6667 9.5C32.6667 10.6046 31.7713 11.5 30.6667 11.5C29.5622 11.5 28.6667 10.6046 28.6667 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35.6667 9.5C35.6667 8.39543 36.5622 7.5 37.6667 7.5C38.7713 7.5 39.6667 8.39543 39.6667 9.5C39.6667 10.6046 38.7713 11.5 37.6667 11.5C36.5622 11.5 35.6667 10.6046 35.6667 9.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M42.6667 9.5C42.6667 8.39543 43.5622 7.5 44.6667 7.5C45.7713 7.5 46.6667 8.39543 46.6667 9.5C46.6667 10.6046 45.7713 11.5 44.6667 11.5C43.5622 11.5 42.6667 10.6046 42.6667 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.6667 9.5C49.6667 8.39543 50.5622 7.5 51.6667 7.5C52.7713 7.5 53.6667 8.39543 53.6667 9.5C53.6667 10.6046 52.7713 11.5 51.6667 11.5C50.5622 11.5 49.6667 10.6046 49.6667 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.6667 9.5C56.6667 8.39543 57.5622 7.5 58.6667 7.5C59.7713 7.5 60.6667 8.39543 60.6667 9.5C60.6667 10.6046 59.7713 11.5 58.6667 11.5C57.5622 11.5 56.6667 10.6046 56.6667 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.666748 16.5C0.666748 15.3954 1.56218 14.5 2.66675 14.5C3.77132 14.5 4.66675 15.3954 4.66675 16.5C4.66675 17.6046 3.77132 18.5 2.66675 18.5C1.56218 18.5 0.666748 17.6046 0.666748 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7.66675 16.5C7.66675 15.3954 8.56218 14.5 9.66675 14.5C10.7713 14.5 11.6667 15.3954 11.6667 16.5C11.6667 17.6046 10.7713 18.5 9.66675 18.5C8.56218 18.5 7.66675 17.6046 7.66675 16.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M14.6667 16.5C14.6667 15.3954 15.5622 14.5 16.6667 14.5C17.7713 14.5 18.6667 15.3954 18.6667 16.5C18.6667 17.6046 17.7713 18.5 16.6667 18.5C15.5622 18.5 14.6667 17.6046 14.6667 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.6667 16.5C21.6667 15.3954 22.5622 14.5 23.6667 14.5C24.7713 14.5 25.6667 15.3954 25.6667 16.5C25.6667 17.6046 24.7713 18.5 23.6667 18.5C22.5622 18.5 21.6667 17.6046 21.6667 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28.6667 16.5C28.6667 15.3954 29.5622 14.5 30.6667 14.5C31.7713 14.5 32.6667 15.3954 32.6667 16.5C32.6667 17.6046 31.7713 18.5 30.6667 18.5C29.5622 18.5 28.6667 17.6046 28.6667 16.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M35.6667 16.5C35.6667 15.3954 36.5622 14.5 37.6667 14.5C38.7713 14.5 39.6667 15.3954 39.6667 16.5C39.6667 17.6046 38.7713 18.5 37.6667 18.5C36.5622 18.5 35.6667 17.6046 35.6667 16.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M42.6667 16.5C42.6667 15.3954 43.5622 14.5 44.6667 14.5C45.7713 14.5 46.6667 15.3954 46.6667 16.5C46.6667 17.6046 45.7713 18.5 44.6667 18.5C43.5622 18.5 42.6667 17.6046 42.6667 16.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M49.6667 16.5C49.6667 15.3954 50.5622 14.5 51.6667 14.5C52.7713 14.5 53.6667 15.3954 53.6667 16.5C53.6667 17.6046 52.7713 18.5 51.6667 18.5C50.5622 18.5 49.6667 17.6046 49.6667 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.6667 16.5C56.6667 15.3954 57.5622 14.5 58.6667 14.5C59.7713 14.5 60.6667 15.3954 60.6667 16.5C60.6667 17.6046 59.7713 18.5 58.6667 18.5C57.5622 18.5 56.6667 17.6046 56.6667 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.666748 23.5C0.666748 22.3954 1.56218 21.5 2.66675 21.5C3.77132 21.5 4.66675 22.3954 4.66675 23.5C4.66675 24.6046 3.77132 25.5 2.66675 25.5C1.56218 25.5 0.666748 24.6046 0.666748 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.66675 23.5C7.66675 22.3954 8.56218 21.5 9.66675 21.5C10.7713 21.5 11.6667 22.3954 11.6667 23.5C11.6667 24.6046 10.7713 25.5 9.66675 25.5C8.56218 25.5 7.66675 24.6046 7.66675 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14.6667 23.5C14.6667 22.3954 15.5622 21.5 16.6667 21.5C17.7713 21.5 18.6667 22.3954 18.6667 23.5C18.6667 24.6046 17.7713 25.5 16.6667 25.5C15.5622 25.5 14.6667 24.6046 14.6667 23.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M21.6667 23.5C21.6667 22.3954 22.5622 21.5 23.6667 21.5C24.7713 21.5 25.6667 22.3954 25.6667 23.5C25.6667 24.6046 24.7713 25.5 23.6667 25.5C22.5622 25.5 21.6667 24.6046 21.6667 23.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M28.6667 23.5C28.6667 22.3954 29.5622 21.5 30.6667 21.5C31.7713 21.5 32.6667 22.3954 32.6667 23.5C32.6667 24.6046 31.7713 25.5 30.6667 25.5C29.5622 25.5 28.6667 24.6046 28.6667 23.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M35.6667 23.5C35.6667 22.3954 36.5622 21.5 37.6667 21.5C38.7713 21.5 39.6667 22.3954 39.6667 23.5C39.6667 24.6046 38.7713 25.5 37.6667 25.5C36.5622 25.5 35.6667 24.6046 35.6667 23.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M42.6667 23.5C42.6667 22.3954 43.5622 21.5 44.6667 21.5C45.7713 21.5 46.6667 22.3954 46.6667 23.5C46.6667 24.6046 45.7713 25.5 44.6667 25.5C43.5622 25.5 42.6667 24.6046 42.6667 23.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M49.6667 23.5C49.6667 22.3954 50.5622 21.5 51.6667 21.5C52.7713 21.5 53.6667 22.3954 53.6667 23.5C53.6667 24.6046 52.7713 25.5 51.6667 25.5C50.5622 25.5 49.6667 24.6046 49.6667 23.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M56.6667 23.5C56.6667 22.3954 57.5622 21.5 58.6667 21.5C59.7713 21.5 60.6667 22.3954 60.6667 23.5C60.6667 24.6046 59.7713 25.5 58.6667 25.5C57.5622 25.5 56.6667 24.6046 56.6667 23.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M0.666748 30.5C0.666748 29.3954 1.56218 28.5 2.66675 28.5C3.77132 28.5 4.66675 29.3954 4.66675 30.5C4.66675 31.6046 3.77132 32.5 2.66675 32.5C1.56218 32.5 0.666748 31.6046 0.666748 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.66675 30.5C7.66675 29.3954 8.56218 28.5 9.66675 28.5C10.7713 28.5 11.6667 29.3954 11.6667 30.5C11.6667 31.6046 10.7713 32.5 9.66675 32.5C8.56218 32.5 7.66675 31.6046 7.66675 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.6667 30.5C14.6667 29.3954 15.5622 28.5 16.6667 28.5C17.7713 28.5 18.6667 29.3954 18.6667 30.5C18.6667 31.6046 17.7713 32.5 16.6667 32.5C15.5622 32.5 14.6667 31.6046 14.6667 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.6667 30.5C21.6667 29.3954 22.5622 28.5 23.6667 28.5C24.7713 28.5 25.6667 29.3954 25.6667 30.5C25.6667 31.6046 24.7713 32.5 23.6667 32.5C22.5622 32.5 21.6667 31.6046 21.6667 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28.6667 30.5C28.6667 29.3954 29.5622 28.5 30.6667 28.5C31.7713 28.5 32.6667 29.3954 32.6667 30.5C32.6667 31.6046 31.7713 32.5 30.6667 32.5C29.5622 32.5 28.6667 31.6046 28.6667 30.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M35.6667 30.5C35.6667 29.3954 36.5622 28.5 37.6667 28.5C38.7713 28.5 39.6667 29.3954 39.6667 30.5C39.6667 31.6046 38.7713 32.5 37.6667 32.5C36.5622 32.5 35.6667 31.6046 35.6667 30.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M42.6667 30.5C42.6667 29.3954 43.5622 28.5 44.6667 28.5C45.7713 28.5 46.6667 29.3954 46.6667 30.5C46.6667 31.6046 45.7713 32.5 44.6667 32.5C43.5622 32.5 42.6667 31.6046 42.6667 30.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M49.6667 30.5C49.6667 29.3954 50.5622 28.5 51.6667 28.5C52.7713 28.5 53.6667 29.3954 53.6667 30.5C53.6667 31.6046 52.7713 32.5 51.6667 32.5C50.5622 32.5 49.6667 31.6046 49.6667 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.6667 30.5C56.6667 29.3954 57.5622 28.5 58.6667 28.5C59.7713 28.5 60.6667 29.3954 60.6667 30.5C60.6667 31.6046 59.7713 32.5 58.6667 32.5C57.5622 32.5 56.6667 31.6046 56.6667 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.666748 37.5C0.666748 36.3954 1.56218 35.5 2.66675 35.5C3.77132 35.5 4.66675 36.3954 4.66675 37.5C4.66675 38.6046 3.77132 39.5 2.66675 39.5C1.56218 39.5 0.666748 38.6046 0.666748 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.66675 37.5C7.66675 36.3954 8.56218 35.5 9.66675 35.5C10.7713 35.5 11.6667 36.3954 11.6667 37.5C11.6667 38.6046 10.7713 39.5 9.66675 39.5C8.56218 39.5 7.66675 38.6046 7.66675 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14.6667 37.5C14.6667 36.3954 15.5622 35.5 16.6667 35.5C17.7713 35.5 18.6667 36.3954 18.6667 37.5C18.6667 38.6046 17.7713 39.5 16.6667 39.5C15.5622 39.5 14.6667 38.6046 14.6667 37.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M21.6667 37.5C21.6667 36.3954 22.5622 35.5 23.6667 35.5C24.7713 35.5 25.6667 36.3954 25.6667 37.5C25.6667 38.6046 24.7713 39.5 23.6667 39.5C22.5622 39.5 21.6667 38.6046 21.6667 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.6667 37.5C28.6667 36.3954 29.5622 35.5 30.6667 35.5C31.7713 35.5 32.6667 36.3954 32.6667 37.5C32.6667 38.6046 31.7713 39.5 30.6667 39.5C29.5622 39.5 28.6667 38.6046 28.6667 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35.6667 37.5C35.6667 36.3954 36.5622 35.5 37.6667 35.5C38.7713 35.5 39.6667 36.3954 39.6667 37.5C39.6667 38.6046 38.7713 39.5 37.6667 39.5C36.5622 39.5 35.6667 38.6046 35.6667 37.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M42.6667 37.5C42.6667 36.3954 43.5622 35.5 44.6667 35.5C45.7713 35.5 46.6667 36.3954 46.6667 37.5C46.6667 38.6046 45.7713 39.5 44.6667 39.5C43.5622 39.5 42.6667 38.6046 42.6667 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.6667 37.5C49.6667 36.3954 50.5622 35.5 51.6667 35.5C52.7713 35.5 53.6667 36.3954 53.6667 37.5C53.6667 38.6046 52.7713 39.5 51.6667 39.5C50.5622 39.5 49.6667 38.6046 49.6667 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.6667 37.5C56.6667 36.3954 57.5622 35.5 58.6667 35.5C59.7713 35.5 60.6667 36.3954 60.6667 37.5C60.6667 38.6046 59.7713 39.5 58.6667 39.5C57.5622 39.5 56.6667 38.6046 56.6667 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.666748 44.5C0.666748 43.3954 1.56218 42.5 2.66675 42.5C3.77132 42.5 4.66675 43.3954 4.66675 44.5C4.66675 45.6046 3.77132 46.5 2.66675 46.5C1.56218 46.5 0.666748 45.6046 0.666748 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7.66675 44.5C7.66675 43.3954 8.56218 42.5 9.66675 42.5C10.7713 42.5 11.6667 43.3954 11.6667 44.5C11.6667 45.6046 10.7713 46.5 9.66675 46.5C8.56218 46.5 7.66675 45.6046 7.66675 44.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M14.6667 44.5C14.6667 43.3954 15.5622 42.5 16.6667 42.5C17.7713 42.5 18.6667 43.3954 18.6667 44.5C18.6667 45.6046 17.7713 46.5 16.6667 46.5C15.5622 46.5 14.6667 45.6046 14.6667 44.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M21.6667 44.5C21.6667 43.3954 22.5622 42.5 23.6667 42.5C24.7713 42.5 25.6667 43.3954 25.6667 44.5C25.6667 45.6046 24.7713 46.5 23.6667 46.5C22.5622 46.5 21.6667 45.6046 21.6667 44.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M28.6667 44.5C28.6667 43.3954 29.5622 42.5 30.6667 42.5C31.7713 42.5 32.6667 43.3954 32.6667 44.5C32.6667 45.6046 31.7713 46.5 30.6667 46.5C29.5622 46.5 28.6667 45.6046 28.6667 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35.6667 44.5C35.6667 43.3954 36.5622 42.5 37.6667 42.5C38.7713 42.5 39.6667 43.3954 39.6667 44.5C39.6667 45.6046 38.7713 46.5 37.6667 46.5C36.5622 46.5 35.6667 45.6046 35.6667 44.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M42.6667 44.5C42.6667 43.3954 43.5622 42.5 44.6667 42.5C45.7713 42.5 46.6667 43.3954 46.6667 44.5C46.6667 45.6046 45.7713 46.5 44.6667 46.5C43.5622 46.5 42.6667 45.6046 42.6667 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.6667 44.5C49.6667 43.3954 50.5622 42.5 51.6667 42.5C52.7713 42.5 53.6667 43.3954 53.6667 44.5C53.6667 45.6046 52.7713 46.5 51.6667 46.5C50.5622 46.5 49.6667 45.6046 49.6667 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.6667 44.5C56.6667 43.3954 57.5622 42.5 58.6667 42.5C59.7713 42.5 60.6667 43.3954 60.6667 44.5C60.6667 45.6046 59.7713 46.5 58.6667 46.5C57.5622 46.5 56.6667 45.6046 56.6667 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.666748 51.5C0.666748 50.3954 1.56218 49.5 2.66675 49.5C3.77132 49.5 4.66675 50.3954 4.66675 51.5C4.66675 52.6046 3.77132 53.5 2.66675 53.5C1.56218 53.5 0.666748 52.6046 0.666748 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.66675 51.5C7.66675 50.3954 8.56218 49.5 9.66675 49.5C10.7713 49.5 11.6667 50.3954 11.6667 51.5C11.6667 52.6046 10.7713 53.5 9.66675 53.5C8.56218 53.5 7.66675 52.6046 7.66675 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14.6667 51.5C14.6667 50.3954 15.5622 49.5 16.6667 49.5C17.7713 49.5 18.6667 50.3954 18.6667 51.5C18.6667 52.6046 17.7713 53.5 16.6667 53.5C15.5622 53.5 14.6667 52.6046 14.6667 51.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M21.6667 51.5C21.6667 50.3954 22.5622 49.5 23.6667 49.5C24.7713 49.5 25.6667 50.3954 25.6667 51.5C25.6667 52.6046 24.7713 53.5 23.6667 53.5C22.5622 53.5 21.6667 52.6046 21.6667 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.6667 51.5C28.6667 50.3954 29.5622 49.5 30.6667 49.5C31.7713 49.5 32.6667 50.3954 32.6667 51.5C32.6667 52.6046 31.7713 53.5 30.6667 53.5C29.5622 53.5 28.6667 52.6046 28.6667 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35.6667 51.5C35.6667 50.3954 36.5622 49.5 37.6667 49.5C38.7713 49.5 39.6667 50.3954 39.6667 51.5C39.6667 52.6046 38.7713 53.5 37.6667 53.5C36.5622 53.5 35.6667 52.6046 35.6667 51.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M42.6667 51.5C42.6667 50.3954 43.5622 49.5 44.6667 49.5C45.7713 49.5 46.6667 50.3954 46.6667 51.5C46.6667 52.6046 45.7713 53.5 44.6667 53.5C43.5622 53.5 42.6667 52.6046 42.6667 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.6667 51.5C49.6667 50.3954 50.5622 49.5 51.6667 49.5C52.7713 49.5 53.6667 50.3954 53.6667 51.5C53.6667 52.6046 52.7713 53.5 51.6667 53.5C50.5622 53.5 49.6667 52.6046 49.6667 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.6667 51.5C56.6667 50.3954 57.5622 49.5 58.6667 49.5C59.7713 49.5 60.6667 50.3954 60.6667 51.5C60.6667 52.6046 59.7713 53.5 58.6667 53.5C57.5622 53.5 56.6667 52.6046 56.6667 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.666748 58.5C0.666748 57.3954 1.56218 56.5 2.66675 56.5C3.77132 56.5 4.66675 57.3954 4.66675 58.5C4.66675 59.6046 3.77132 60.5 2.66675 60.5C1.56218 60.5 0.666748 59.6046 0.666748 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.66675 58.5C7.66675 57.3954 8.56218 56.5 9.66675 56.5C10.7713 56.5 11.6667 57.3954 11.6667 58.5C11.6667 59.6046 10.7713 60.5 9.66675 60.5C8.56218 60.5 7.66675 59.6046 7.66675 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14.6667 58.5C14.6667 57.3954 15.5622 56.5 16.6667 56.5C17.7713 56.5 18.6667 57.3954 18.6667 58.5C18.6667 59.6046 17.7713 60.5 16.6667 60.5C15.5622 60.5 14.6667 59.6046 14.6667 58.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M21.6667 58.5C21.6667 57.3954 22.5622 56.5 23.6667 56.5C24.7713 56.5 25.6667 57.3954 25.6667 58.5C25.6667 59.6046 24.7713 60.5 23.6667 60.5C22.5622 60.5 21.6667 59.6046 21.6667 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.6667 58.5C28.6667 57.3954 29.5622 56.5 30.6667 56.5C31.7713 56.5 32.6667 57.3954 32.6667 58.5C32.6667 59.6046 31.7713 60.5 30.6667 60.5C29.5622 60.5 28.6667 59.6046 28.6667 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35.6667 58.5C35.6667 57.3954 36.5622 56.5 37.6667 56.5C38.7713 56.5 39.6667 57.3954 39.6667 58.5C39.6667 59.6046 38.7713 60.5 37.6667 60.5C36.5622 60.5 35.6667 59.6046 35.6667 58.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M42.6667 58.5C42.6667 57.3954 43.5622 56.5 44.6667 56.5C45.7713 56.5 46.6667 57.3954 46.6667 58.5C46.6667 59.6046 45.7713 60.5 44.6667 60.5C43.5622 60.5 42.6667 59.6046 42.6667 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.6667 58.5C49.6667 57.3954 50.5622 56.5 51.6667 56.5C52.7713 56.5 53.6667 57.3954 53.6667 58.5C53.6667 59.6046 52.7713 60.5 51.6667 60.5C50.5622 60.5 49.6667 59.6046 49.6667 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.6667 58.5C56.6667 57.3954 57.5622 56.5 58.6667 56.5C59.7713 56.5 60.6667 57.3954 60.6667 58.5C60.6667 59.6046 59.7713 60.5 58.6667 60.5C57.5622 60.5 56.6667 59.6046 56.6667 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id='clip0_1_5240'>
|
||||
<rect width='60' height='60' fill='white' transform='translate(0.666748 0.5)' />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Premium
|
||||
@@ -0,0 +1,96 @@
|
||||
const Professional = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='61' height='61' viewBox='0 0 61 61' fill='none'>
|
||||
<g clipPath='url(#clip0_1_4802)'>
|
||||
<rect opacity='0.18' x='0.666626' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='7.66663' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14.6666' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='21.6666' y='0.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect x='28.6666' y='0.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect x='35.6666' y='0.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='42.6666' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49.6666' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='56.6666' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='0.666626' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='7.66663' y='7.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect x='14.6666' y='7.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='21.6666' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28.6666' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35.6666' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='42.6666' y='7.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect x='49.6666' y='7.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='56.6666' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='0.666626' y='14.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='7.66663' y='14.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='14.6666' y='14.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21.6666' y='14.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28.6666' y='14.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35.6666' y='14.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='42.6666' y='14.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='49.6666' y='14.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='56.6666' y='14.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='0.666626' y='21.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='7.66663' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14.6666' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21.6666' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28.6666' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35.6666' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='42.6666' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49.6666' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='56.6666' y='21.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect x='0.666626' y='28.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='7.66663' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14.6666' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21.6666' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28.6666' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35.6666' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='42.6666' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49.6666' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='56.6666' y='28.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect x='0.666626' y='35.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='7.66663' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14.6666' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21.6666' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28.6666' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35.6666' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='42.6666' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49.6666' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='56.6666' y='35.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='0.666626' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='7.66663' y='42.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='14.6666' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21.6666' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28.6666' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35.6666' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='42.6666' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='49.6666' y='42.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='56.6666' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='0.666626' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='7.66663' y='49.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect x='14.6666' y='49.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='21.6666' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28.6666' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35.6666' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='42.6666' y='49.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect x='49.6666' y='49.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='56.6666' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='0.666626' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='7.66663' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14.6666' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='21.6666' y='56.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect x='28.6666' y='56.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect x='35.6666' y='56.5' width='4' height='4' rx='2' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
<rect opacity='0.18' x='42.6666' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49.6666' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='56.6666' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id='clip0_1_4802'>
|
||||
<rect width='60' height='60' fill='white' transform='translate(0.666626 0.5)' />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Professional
|
||||
96
dify/web/app/components/billing/pricing/assets/sandbox.tsx
Normal file
96
dify/web/app/components/billing/pricing/assets/sandbox.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
const Sandbox = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='60' height='61' viewBox='0 0 60 61' fill='none'>
|
||||
<g clipPath='url(#clip0_1_65915)'>
|
||||
<rect opacity='0.18' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='7' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14 2.5C14 1.39543 14.8954 0.5 16 0.5C17.1046 0.5 18 1.39543 18 2.5C18 3.60457 17.1046 4.5 16 4.5C14.8954 4.5 14 3.60457 14 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M21 2.5C21 1.39543 21.8954 0.5 23 0.5C24.1046 0.5 25 1.39543 25 2.5C25 3.60457 24.1046 4.5 23 4.5C21.8954 4.5 21 3.60457 21 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 2.5C28 1.39543 28.8954 0.5 30 0.5C31.1046 0.5 32 1.39543 32 2.5C32 3.60457 31.1046 4.5 30 4.5C28.8954 4.5 28 3.60457 28 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35 2.5C35 1.39543 35.8954 0.5 37 0.5C38.1046 0.5 39 1.39543 39 2.5C39 3.60457 38.1046 4.5 37 4.5C35.8954 4.5 35 3.60457 35 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 2.5C42 1.39543 42.8954 0.5 44 0.5C45.1046 0.5 46 1.39543 46 2.5C46 3.60457 45.1046 4.5 44 4.5C42.8954 4.5 42 3.60457 42 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M49 2.5C49 1.39543 49.8954 0.5 51 0.5C52.1046 0.5 53 1.39543 53 2.5C53 3.60457 52.1046 4.5 51 4.5C49.8954 4.5 49 3.60457 49 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56 2.5C56 1.39543 56.8954 0.5 58 0.5C59.1046 0.5 60 1.39543 60 2.5C60 3.60457 59.1046 4.5 58 4.5C56.8954 4.5 56 3.60457 56 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7 9.5C7 8.39543 7.89543 7.5 9 7.5C10.1046 7.5 11 8.39543 11 9.5C11 10.6046 10.1046 11.5 9 11.5C7.89543 11.5 7 10.6046 7 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='42' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M49 9.5C49 8.39543 49.8954 7.5 51 7.5C52.1046 7.5 53 8.39543 53 9.5C53 10.6046 52.1046 11.5 51 11.5C49.8954 11.5 49 10.6046 49 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56 9.5C56 8.39543 56.8954 7.5 58 7.5C59.1046 7.5 60 8.39543 60 9.5C60 10.6046 59.1046 11.5 58 11.5C56.8954 11.5 56 10.6046 56 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0 16.5C0 15.3954 0.895431 14.5 2 14.5C3.10457 14.5 4 15.3954 4 16.5C4 17.6046 3.10457 18.5 2 18.5C0.895431 18.5 0 17.6046 0 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7 16.5C7 15.3954 7.89543 14.5 9 14.5C10.1046 14.5 11 15.3954 11 16.5C11 17.6046 10.1046 18.5 9 18.5C7.89543 18.5 7 17.6046 7 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14 16.5C14 15.3954 14.8954 14.5 16 14.5C17.1046 14.5 18 15.3954 18 16.5C18 17.6046 17.1046 18.5 16 18.5C14.8954 18.5 14 17.6046 14 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M21 16.5C21 15.3954 21.8954 14.5 23 14.5C24.1046 14.5 25 15.3954 25 16.5C25 17.6046 24.1046 18.5 23 18.5C21.8954 18.5 21 17.6046 21 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 16.5C28 15.3954 28.8954 14.5 30 14.5C31.1046 14.5 32 15.3954 32 16.5C32 17.6046 31.1046 18.5 30 18.5C28.8954 18.5 28 17.6046 28 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35 16.5C35 15.3954 35.8954 14.5 37 14.5C38.1046 14.5 39 15.3954 39 16.5C39 17.6046 38.1046 18.5 37 18.5C35.8954 18.5 35 17.6046 35 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 16.5C42 15.3954 42.8954 14.5 44 14.5C45.1046 14.5 46 15.3954 46 16.5C46 17.6046 45.1046 18.5 44 18.5C42.8954 18.5 42 17.6046 42 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49' y='14.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56 16.5C56 15.3954 56.8954 14.5 58 14.5C59.1046 14.5 60 15.3954 60 16.5C60 17.6046 59.1046 18.5 58 18.5C56.8954 18.5 56 17.6046 56 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0 23.5C0 22.3954 0.895431 21.5 2 21.5C3.10457 21.5 4 22.3954 4 23.5C4 24.6046 3.10457 25.5 2 25.5C0.895431 25.5 0 24.6046 0 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='7' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 23.5C42 22.3954 42.8954 21.5 44 21.5C45.1046 21.5 46 22.3954 46 23.5C46 24.6046 45.1046 25.5 44 25.5C42.8954 25.5 42 24.6046 42 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56 23.5C56 22.3954 56.8954 21.5 58 21.5C59.1046 21.5 60 22.3954 60 23.5C60 24.6046 59.1046 25.5 58 25.5C56.8954 25.5 56 24.6046 56 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0 30.5C0 29.3954 0.895431 28.5 2 28.5C3.10457 28.5 4 29.3954 4 30.5C4 31.6046 3.10457 32.5 2 32.5C0.895431 32.5 0 31.6046 0 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='7' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 30.5C42 29.3954 42.8954 28.5 44 28.5C45.1046 28.5 46 29.3954 46 30.5C46 31.6046 45.1046 32.5 44 32.5C42.8954 32.5 42 31.6046 42 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56 30.5C56 29.3954 56.8954 28.5 58 28.5C59.1046 28.5 60 29.3954 60 30.5C60 31.6046 59.1046 32.5 58 32.5C56.8954 32.5 56 31.6046 56 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0 37.5C0 36.3954 0.895431 35.5 2 35.5C3.10457 35.5 4 36.3954 4 37.5C4 38.6046 3.10457 39.5 2 39.5C0.895431 39.5 0 38.6046 0 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='7' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 37.5C42 36.3954 42.8954 35.5 44 35.5C45.1046 35.5 46 36.3954 46 37.5C46 38.6046 45.1046 39.5 44 39.5C42.8954 39.5 42 38.6046 42 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56 37.5C56 36.3954 56.8954 35.5 58 35.5C59.1046 35.5 60 36.3954 60 37.5C60 38.6046 59.1046 39.5 58 39.5C56.8954 39.5 56 38.6046 56 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0 44.5C0 43.3954 0.895431 42.5 2 42.5C3.10457 42.5 4 43.3954 4 44.5C4 45.6046 3.10457 46.5 2 46.5C0.895431 46.5 0 45.6046 0 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='7' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 44.5C42 43.3954 42.8954 42.5 44 42.5C45.1046 42.5 46 43.3954 46 44.5C46 45.6046 45.1046 46.5 44 46.5C42.8954 46.5 42 45.6046 42 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56 44.5C56 43.3954 56.8954 42.5 58 42.5C59.1046 42.5 60 43.3954 60 44.5C60 45.6046 59.1046 46.5 58 46.5C56.8954 46.5 56 45.6046 56 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0 51.5C0 50.3954 0.895431 49.5 2 49.5C3.10457 49.5 4 50.3954 4 51.5C4 52.6046 3.10457 53.5 2 53.5C0.895431 53.5 0 52.6046 0 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='7' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 51.5C42 50.3954 42.8954 49.5 44 49.5C45.1046 49.5 46 50.3954 46 51.5C46 52.6046 45.1046 53.5 44 53.5C42.8954 53.5 42 52.6046 42 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M49 51.5C49 50.3954 49.8954 49.5 51 49.5C52.1046 49.5 53 50.3954 53 51.5C53 52.6046 52.1046 53.5 51 53.5C49.8954 53.5 49 52.6046 49 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='56' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0 58.5C0 57.3954 0.895431 56.5 2 56.5C3.10457 56.5 4 57.3954 4 58.5C4 59.6046 3.10457 60.5 2 60.5C0.895431 60.5 0 59.6046 0 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7 58.5C7 57.3954 7.89543 56.5 9 56.5C10.1046 56.5 11 57.3954 11 58.5C11 59.6046 10.1046 60.5 9 60.5C7.89543 60.5 7 59.6046 7 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14 58.5C14 57.3954 14.8954 56.5 16 56.5C17.1046 56.5 18 57.3954 18 58.5C18 59.6046 17.1046 60.5 16 60.5C14.8954 60.5 14 59.6046 14 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M21 58.5C21 57.3954 21.8954 56.5 23 56.5C24.1046 56.5 25 57.3954 25 58.5C25 59.6046 24.1046 60.5 23 60.5C21.8954 60.5 21 59.6046 21 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 58.5C28 57.3954 28.8954 56.5 30 56.5C31.1046 56.5 32 57.3954 32 58.5C32 59.6046 31.1046 60.5 30 60.5C28.8954 60.5 28 59.6046 28 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35 58.5C35 57.3954 35.8954 56.5 37 56.5C38.1046 56.5 39 57.3954 39 58.5C39 59.6046 38.1046 60.5 37 60.5C35.8954 60.5 35 59.6046 35 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 58.5C42 57.3954 42.8954 56.5 44 56.5C45.1046 56.5 46 57.3954 46 58.5C46 59.6046 45.1046 60.5 44 60.5C42.8954 60.5 42 59.6046 42 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='56' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id='clip0_1_65915'>
|
||||
<rect width='60' height='60' fill='white' transform='translate(0 0.5)' />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Sandbox
|
||||
@@ -0,0 +1,32 @@
|
||||
type SelfHostedProps = {
|
||||
isActive: boolean
|
||||
}
|
||||
|
||||
const SelfHosted = ({
|
||||
isActive,
|
||||
}: SelfHostedProps) => {
|
||||
const color = isActive ? 'var(--color-saas-dify-blue-accessible)' : 'var(--color-text-primary)'
|
||||
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'>
|
||||
<g clipPath='url(#clip0_1_4644)'>
|
||||
<rect opacity='0.18' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='6' y='0.5' width='4' height='4' rx='2' fill={color} />
|
||||
<rect opacity='0.18' x='12' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect y='6.5' width='4' height='4' rx='2' fill={color} />
|
||||
<rect opacity='0.18' x='6' y='6.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='12' y='6.5' width='4' height='4' rx='2' fill={color} />
|
||||
<rect opacity='0.18' y='12.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='6' y='12.5' width='4' height='4' rx='2' fill={color} />
|
||||
<rect opacity='0.18' x='12' y='12.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id='clip0_1_4644'>
|
||||
<rect width='16' height='16' fill='white' transform='translate(0 0.5)' />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default SelfHosted
|
||||
96
dify/web/app/components/billing/pricing/assets/team.tsx
Normal file
96
dify/web/app/components/billing/pricing/assets/team.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
const Team = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='61' height='61' viewBox='0 0 61 61' fill='none'>
|
||||
<g clipPath='url(#clip0_1_4943)'>
|
||||
<rect x='0.333374' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<rect x='7.33337' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<rect x='14.3334' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M21.3334 2.5C21.3334 1.39543 22.2288 0.5 23.3334 0.5C24.4379 0.5 25.3334 1.39543 25.3334 2.5C25.3334 3.60457 24.4379 4.5 23.3334 4.5C22.2288 4.5 21.3334 3.60457 21.3334 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.3334 2.5C28.3334 1.39543 29.2288 0.5 30.3334 0.5C31.4379 0.5 32.3334 1.39543 32.3334 2.5C32.3334 3.60457 31.4379 4.5 30.3334 4.5C29.2288 4.5 28.3334 3.60457 28.3334 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='35.3334' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M42.3334 2.5C42.3334 1.39543 43.2288 0.5 44.3334 0.5C45.4379 0.5 46.3334 1.39543 46.3334 2.5C46.3334 3.60457 45.4379 4.5 44.3334 4.5C43.2288 4.5 42.3334 3.60457 42.3334 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.3334 2.5C49.3334 1.39543 50.2288 0.5 51.3334 0.5C52.4379 0.5 53.3334 1.39543 53.3334 2.5C53.3334 3.60457 52.4379 4.5 51.3334 4.5C50.2288 4.5 49.3334 3.60457 49.3334 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.3334 2.5C56.3334 1.39543 57.2288 0.5 58.3334 0.5C59.4379 0.5 60.3334 1.39543 60.3334 2.5C60.3334 3.60457 59.4379 4.5 58.3334 4.5C57.2288 4.5 56.3334 3.60457 56.3334 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.333374 9.5C0.333374 8.39543 1.2288 7.5 2.33337 7.5C3.43794 7.5 4.33337 8.39543 4.33337 9.5C4.33337 10.6046 3.43794 11.5 2.33337 11.5C1.2288 11.5 0.333374 10.6046 0.333374 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.33337 9.5C7.33337 8.39543 8.2288 7.5 9.33337 7.5C10.4379 7.5 11.3334 8.39543 11.3334 9.5C11.3334 10.6046 10.4379 11.5 9.33337 11.5C8.2288 11.5 7.33337 10.6046 7.33337 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3334 9.5C14.3334 8.39543 15.2288 7.5 16.3334 7.5C17.4379 7.5 18.3334 8.39543 18.3334 9.5C18.3334 10.6046 17.4379 11.5 16.3334 11.5C15.2288 11.5 14.3334 10.6046 14.3334 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='21.3334' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<rect x='28.3334' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M35.3334 9.5C35.3334 8.39543 36.2288 7.5 37.3334 7.5C38.4379 7.5 39.3334 8.39543 39.3334 9.5C39.3334 10.6046 38.4379 11.5 37.3334 11.5C36.2288 11.5 35.3334 10.6046 35.3334 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='42.3334' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<rect x='49.3334' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M56.3334 9.5C56.3334 8.39543 57.2288 7.5 58.3334 7.5C59.4379 7.5 60.3334 8.39543 60.3334 9.5C60.3334 10.6046 59.4379 11.5 58.3334 11.5C57.2288 11.5 56.3334 10.6046 56.3334 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.333374 16.5C0.333374 15.3954 1.2288 14.5 2.33337 14.5C3.43794 14.5 4.33337 15.3954 4.33337 16.5C4.33337 17.6046 3.43794 18.5 2.33337 18.5C1.2288 18.5 0.333374 17.6046 0.333374 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.33337 16.5C7.33337 15.3954 8.2288 14.5 9.33337 14.5C10.4379 14.5 11.3334 15.3954 11.3334 16.5C11.3334 17.6046 10.4379 18.5 9.33337 18.5C8.2288 18.5 7.33337 17.6046 7.33337 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3334 16.5C14.3334 15.3954 15.2288 14.5 16.3334 14.5C17.4379 14.5 18.3334 15.3954 18.3334 16.5C18.3334 17.6046 17.4379 18.5 16.3334 18.5C15.2288 18.5 14.3334 17.6046 14.3334 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.3334 16.5C21.3334 15.3954 22.2288 14.5 23.3334 14.5C24.4379 14.5 25.3334 15.3954 25.3334 16.5C25.3334 17.6046 24.4379 18.5 23.3334 18.5C22.2288 18.5 21.3334 17.6046 21.3334 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='28.3334' y='14.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M35.3334 16.5C35.3334 15.3954 36.2288 14.5 37.3334 14.5C38.4379 14.5 39.3334 15.3954 39.3334 16.5C39.3334 17.6046 38.4379 18.5 37.3334 18.5C36.2288 18.5 35.3334 17.6046 35.3334 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42.3334 16.5C42.3334 15.3954 43.2288 14.5 44.3334 14.5C45.4379 14.5 46.3334 15.3954 46.3334 16.5C46.3334 17.6046 45.4379 18.5 44.3334 18.5C43.2288 18.5 42.3334 17.6046 42.3334 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='49.3334' y='14.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M56.3334 16.5C56.3334 15.3954 57.2288 14.5 58.3334 14.5C59.4379 14.5 60.3334 15.3954 60.3334 16.5C60.3334 17.6046 59.4379 18.5 58.3334 18.5C57.2288 18.5 56.3334 17.6046 56.3334 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.333374 23.5C0.333374 22.3954 1.2288 21.5 2.33337 21.5C3.43794 21.5 4.33337 22.3954 4.33337 23.5C4.33337 24.6046 3.43794 25.5 2.33337 25.5C1.2288 25.5 0.333374 24.6046 0.333374 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.33337 23.5C7.33337 22.3954 8.2288 21.5 9.33337 21.5C10.4379 21.5 11.3334 22.3954 11.3334 23.5C11.3334 24.6046 10.4379 25.5 9.33337 25.5C8.2288 25.5 7.33337 24.6046 7.33337 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3334 23.5C14.3334 22.3954 15.2288 21.5 16.3334 21.5C17.4379 21.5 18.3334 22.3954 18.3334 23.5C18.3334 24.6046 17.4379 25.5 16.3334 25.5C15.2288 25.5 14.3334 24.6046 14.3334 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.3334 23.5C21.3334 22.3954 22.2288 21.5 23.3334 21.5C24.4379 21.5 25.3334 22.3954 25.3334 23.5C25.3334 24.6046 24.4379 25.5 23.3334 25.5C22.2288 25.5 21.3334 24.6046 21.3334 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.3334 23.5C28.3334 22.3954 29.2288 21.5 30.3334 21.5C31.4379 21.5 32.3334 22.3954 32.3334 23.5C32.3334 24.6046 31.4379 25.5 30.3334 25.5C29.2288 25.5 28.3334 24.6046 28.3334 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='35.3334' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M42.3334 23.5C42.3334 22.3954 43.2288 21.5 44.3334 21.5C45.4379 21.5 46.3334 22.3954 46.3334 23.5C46.3334 24.6046 45.4379 25.5 44.3334 25.5C43.2288 25.5 42.3334 24.6046 42.3334 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.3334 23.5C49.3334 22.3954 50.2288 21.5 51.3334 21.5C52.4379 21.5 53.3334 22.3954 53.3334 23.5C53.3334 24.6046 52.4379 25.5 51.3334 25.5C50.2288 25.5 49.3334 24.6046 49.3334 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='56.3334' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M0.333374 30.5C0.333374 29.3954 1.2288 28.5 2.33337 28.5C3.43794 28.5 4.33337 29.3954 4.33337 30.5C4.33337 31.6046 3.43794 32.5 2.33337 32.5C1.2288 32.5 0.333374 31.6046 0.333374 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.33337 30.5C7.33337 29.3954 8.2288 28.5 9.33337 28.5C10.4379 28.5 11.3334 29.3954 11.3334 30.5C11.3334 31.6046 10.4379 32.5 9.33337 32.5C8.2288 32.5 7.33337 31.6046 7.33337 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3334 30.5C14.3334 29.3954 15.2288 28.5 16.3334 28.5C17.4379 28.5 18.3334 29.3954 18.3334 30.5C18.3334 31.6046 17.4379 32.5 16.3334 32.5C15.2288 32.5 14.3334 31.6046 14.3334 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.3334 30.5C21.3334 29.3954 22.2288 28.5 23.3334 28.5C24.4379 28.5 25.3334 29.3954 25.3334 30.5C25.3334 31.6046 24.4379 32.5 23.3334 32.5C22.2288 32.5 21.3334 31.6046 21.3334 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.3334 30.5C28.3334 29.3954 29.2288 28.5 30.3334 28.5C31.4379 28.5 32.3334 29.3954 32.3334 30.5C32.3334 31.6046 31.4379 32.5 30.3334 32.5C29.2288 32.5 28.3334 31.6046 28.3334 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='35.3334' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M42.3334 30.5C42.3334 29.3954 43.2288 28.5 44.3334 28.5C45.4379 28.5 46.3334 29.3954 46.3334 30.5C46.3334 31.6046 45.4379 32.5 44.3334 32.5C43.2288 32.5 42.3334 31.6046 42.3334 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.3334 30.5C49.3334 29.3954 50.2288 28.5 51.3334 28.5C52.4379 28.5 53.3334 29.3954 53.3334 30.5C53.3334 31.6046 52.4379 32.5 51.3334 32.5C50.2288 32.5 49.3334 31.6046 49.3334 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='56.3334' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M0.333374 37.5C0.333374 36.3954 1.2288 35.5 2.33337 35.5C3.43794 35.5 4.33337 36.3954 4.33337 37.5C4.33337 38.6046 3.43794 39.5 2.33337 39.5C1.2288 39.5 0.333374 38.6046 0.333374 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.33337 37.5C7.33337 36.3954 8.2288 35.5 9.33337 35.5C10.4379 35.5 11.3334 36.3954 11.3334 37.5C11.3334 38.6046 10.4379 39.5 9.33337 39.5C8.2288 39.5 7.33337 38.6046 7.33337 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3334 37.5C14.3334 36.3954 15.2288 35.5 16.3334 35.5C17.4379 35.5 18.3334 36.3954 18.3334 37.5C18.3334 38.6046 17.4379 39.5 16.3334 39.5C15.2288 39.5 14.3334 38.6046 14.3334 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.3334 37.5C21.3334 36.3954 22.2288 35.5 23.3334 35.5C24.4379 35.5 25.3334 36.3954 25.3334 37.5C25.3334 38.6046 24.4379 39.5 23.3334 39.5C22.2288 39.5 21.3334 38.6046 21.3334 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.3334 37.5C28.3334 36.3954 29.2288 35.5 30.3334 35.5C31.4379 35.5 32.3334 36.3954 32.3334 37.5C32.3334 38.6046 31.4379 39.5 30.3334 39.5C29.2288 39.5 28.3334 38.6046 28.3334 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='35.3334' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M42.3334 37.5C42.3334 36.3954 43.2288 35.5 44.3334 35.5C45.4379 35.5 46.3334 36.3954 46.3334 37.5C46.3334 38.6046 45.4379 39.5 44.3334 39.5C43.2288 39.5 42.3334 38.6046 42.3334 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.3334 37.5C49.3334 36.3954 50.2288 35.5 51.3334 35.5C52.4379 35.5 53.3334 36.3954 53.3334 37.5C53.3334 38.6046 52.4379 39.5 51.3334 39.5C50.2288 39.5 49.3334 38.6046 49.3334 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='56.3334' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M0.333374 44.5C0.333374 43.3954 1.2288 42.5 2.33337 42.5C3.43794 42.5 4.33337 43.3954 4.33337 44.5C4.33337 45.6046 3.43794 46.5 2.33337 46.5C1.2288 46.5 0.333374 45.6046 0.333374 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.33337 44.5C7.33337 43.3954 8.2288 42.5 9.33337 42.5C10.4379 42.5 11.3334 43.3954 11.3334 44.5C11.3334 45.6046 10.4379 46.5 9.33337 46.5C8.2288 46.5 7.33337 45.6046 7.33337 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3334 44.5C14.3334 43.3954 15.2288 42.5 16.3334 42.5C17.4379 42.5 18.3334 43.3954 18.3334 44.5C18.3334 45.6046 17.4379 46.5 16.3334 46.5C15.2288 46.5 14.3334 45.6046 14.3334 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.3334 44.5C21.3334 43.3954 22.2288 42.5 23.3334 42.5C24.4379 42.5 25.3334 43.3954 25.3334 44.5C25.3334 45.6046 24.4379 46.5 23.3334 46.5C22.2288 46.5 21.3334 45.6046 21.3334 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='28.3334' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M35.3334 44.5C35.3334 43.3954 36.2288 42.5 37.3334 42.5C38.4379 42.5 39.3334 43.3954 39.3334 44.5C39.3334 45.6046 38.4379 46.5 37.3334 46.5C36.2288 46.5 35.3334 45.6046 35.3334 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42.3334 44.5C42.3334 43.3954 43.2288 42.5 44.3334 42.5C45.4379 42.5 46.3334 43.3954 46.3334 44.5C46.3334 45.6046 45.4379 46.5 44.3334 46.5C43.2288 46.5 42.3334 45.6046 42.3334 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='49.3334' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M56.3334 44.5C56.3334 43.3954 57.2288 42.5 58.3334 42.5C59.4379 42.5 60.3334 43.3954 60.3334 44.5C60.3334 45.6046 59.4379 46.5 58.3334 46.5C57.2288 46.5 56.3334 45.6046 56.3334 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.333374 51.5C0.333374 50.3954 1.2288 49.5 2.33337 49.5C3.43794 49.5 4.33337 50.3954 4.33337 51.5C4.33337 52.6046 3.43794 53.5 2.33337 53.5C1.2288 53.5 0.333374 52.6046 0.333374 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.33337 51.5C7.33337 50.3954 8.2288 49.5 9.33337 49.5C10.4379 49.5 11.3334 50.3954 11.3334 51.5C11.3334 52.6046 10.4379 53.5 9.33337 53.5C8.2288 53.5 7.33337 52.6046 7.33337 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3334 51.5C14.3334 50.3954 15.2288 49.5 16.3334 49.5C17.4379 49.5 18.3334 50.3954 18.3334 51.5C18.3334 52.6046 17.4379 53.5 16.3334 53.5C15.2288 53.5 14.3334 52.6046 14.3334 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='21.3334' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<rect x='28.3334' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M35.3334 51.5C35.3334 50.3954 36.2288 49.5 37.3334 49.5C38.4379 49.5 39.3334 50.3954 39.3334 51.5C39.3334 52.6046 38.4379 53.5 37.3334 53.5C36.2288 53.5 35.3334 52.6046 35.3334 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='42.3334' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<rect x='49.3334' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M56.3334 51.5C56.3334 50.3954 57.2288 49.5 58.3334 49.5C59.4379 49.5 60.3334 50.3954 60.3334 51.5C60.3334 52.6046 59.4379 53.5 58.3334 53.5C57.2288 53.5 56.3334 52.6046 56.3334 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='0.333374' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<rect x='7.33337' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<rect x='14.3334' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M21.3334 58.5C21.3334 57.3954 22.2288 56.5 23.3334 56.5C24.4379 56.5 25.3334 57.3954 25.3334 58.5C25.3334 59.6046 24.4379 60.5 23.3334 60.5C22.2288 60.5 21.3334 59.6046 21.3334 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.3334 58.5C28.3334 57.3954 29.2288 56.5 30.3334 56.5C31.4379 56.5 32.3334 57.3954 32.3334 58.5C32.3334 59.6046 31.4379 60.5 30.3334 60.5C29.2288 60.5 28.3334 59.6046 28.3334 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='35.3334' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M42.3334 58.5C42.3334 57.3954 43.2288 56.5 44.3334 56.5C45.4379 56.5 46.3334 57.3954 46.3334 58.5C46.3334 59.6046 45.4379 60.5 44.3334 60.5C43.2288 60.5 42.3334 59.6046 42.3334 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.3334 58.5C49.3334 57.3954 50.2288 56.5 51.3334 56.5C52.4379 56.5 53.3334 57.3954 53.3334 58.5C53.3334 59.6046 52.4379 60.5 51.3334 60.5C50.2288 60.5 49.3334 59.6046 49.3334 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.3334 58.5C56.3334 57.3954 57.2288 56.5 58.3334 56.5C59.4379 56.5 60.3334 57.3954 60.3334 58.5C60.3334 59.6046 59.4379 60.5 58.3334 60.5C57.2288 60.5 56.3334 59.6046 56.3334 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id='clip0_1_4943'>
|
||||
<rect width='60' height='60' fill='white' transform='translate(0.333374 0.5)' />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Team
|
||||
43
dify/web/app/components/billing/pricing/footer.tsx
Normal file
43
dify/web/app/components/billing/pricing/footer.tsx
Normal file
@@ -0,0 +1,43 @@
|
||||
import React from 'react'
|
||||
import Link from 'next/link'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { RiArrowRightUpLine } from '@remixicon/react'
|
||||
import { type Category, CategoryEnum } from '.'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type FooterProps = {
|
||||
pricingPageURL: string
|
||||
currentCategory: Category
|
||||
}
|
||||
|
||||
const Footer = ({
|
||||
pricingPageURL,
|
||||
currentCategory,
|
||||
}: FooterProps) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className='flex min-h-16 w-full justify-center border-t border-divider-accent px-10'>
|
||||
<div className={cn('flex max-w-[1680px] grow border-x border-divider-accent p-6', currentCategory === CategoryEnum.CLOUD ? 'justify-between' : 'justify-end') }>
|
||||
{currentCategory === CategoryEnum.CLOUD && (
|
||||
<div className='flex flex-col text-text-tertiary'>
|
||||
<span className='system-xs-regular'>{t('billing.plansCommon.taxTip')}</span>
|
||||
<span className='system-xs-regular'>{t('billing.plansCommon.taxTipSecond')}</span>
|
||||
</div>
|
||||
)}
|
||||
<span className='flex h-fit items-center gap-x-1 text-saas-dify-blue-accessible'>
|
||||
<Link
|
||||
href={pricingPageURL}
|
||||
className='system-md-regular'
|
||||
target='_blank'
|
||||
>
|
||||
{t('billing.plansCommon.comparePlanAndFeatures')}
|
||||
</Link>
|
||||
<RiArrowRightUpLine className='size-4' />
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Footer)
|
||||
42
dify/web/app/components/billing/pricing/header.tsx
Normal file
42
dify/web/app/components/billing/pricing/header.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import React from 'react'
|
||||
import DifyLogo from '../../base/logo/dify-logo'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../base/button'
|
||||
import { RiCloseLine } from '@remixicon/react'
|
||||
|
||||
type HeaderProps = {
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const Header = ({
|
||||
onClose,
|
||||
}: HeaderProps) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className='flex min-h-[105px] w-full justify-center px-10'>
|
||||
<div className='relative flex max-w-[1680px] grow flex-col justify-end gap-y-1 border-x border-divider-accent p-6 pt-8'>
|
||||
<div className='flex items-end'>
|
||||
<div className='py-[5px]'>
|
||||
<DifyLogo className='h-[27px] w-[60px]' />
|
||||
</div>
|
||||
<span className='bg-billing-plan-title-bg bg-clip-text px-1.5 font-instrument text-[37px] italic leading-[1.2] text-transparent'>
|
||||
{t('billing.plansCommon.title.plans')}
|
||||
</span>
|
||||
</div>
|
||||
<p className='system-sm-regular text-text-tertiary'>
|
||||
{t('billing.plansCommon.title.description')}
|
||||
</p>
|
||||
<Button
|
||||
variant='secondary'
|
||||
className='absolute bottom-[40.5px] right-[-18px] z-10 size-9 rounded-full p-2'
|
||||
onClick={onClose}
|
||||
>
|
||||
<RiCloseLine className='size-5' />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Header)
|
||||
73
dify/web/app/components/billing/pricing/index.tsx
Normal file
73
dify/web/app/components/billing/pricing/index.tsx
Normal file
@@ -0,0 +1,73 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useState } from 'react'
|
||||
import { createPortal } from 'react-dom'
|
||||
import Header from './header'
|
||||
import PlanSwitcher from './plan-switcher'
|
||||
import Plans from './plans'
|
||||
import Footer from './footer'
|
||||
import { PlanRange } from './plan-switcher/plan-range-switcher'
|
||||
import { useKeyPress } from 'ahooks'
|
||||
import { useProviderContext } from '@/context/provider-context'
|
||||
import { useAppContext } from '@/context/app-context'
|
||||
import { useGetPricingPageLanguage } from '@/context/i18n'
|
||||
import { NoiseBottom, NoiseTop } from './assets'
|
||||
|
||||
export enum CategoryEnum {
|
||||
CLOUD = 'cloud',
|
||||
SELF = 'self',
|
||||
}
|
||||
|
||||
export type Category = CategoryEnum.CLOUD | CategoryEnum.SELF
|
||||
|
||||
type PricingProps = {
|
||||
onCancel: () => void
|
||||
}
|
||||
|
||||
const Pricing: FC<PricingProps> = ({
|
||||
onCancel,
|
||||
}) => {
|
||||
const { plan } = useProviderContext()
|
||||
const { isCurrentWorkspaceManager } = useAppContext()
|
||||
const [planRange, setPlanRange] = React.useState<PlanRange>(PlanRange.monthly)
|
||||
const [currentCategory, setCurrentCategory] = useState<Category>(CategoryEnum.CLOUD)
|
||||
const canPay = isCurrentWorkspaceManager
|
||||
useKeyPress(['esc'], onCancel)
|
||||
|
||||
const pricingPageLanguage = useGetPricingPageLanguage()
|
||||
const pricingPageURL = pricingPageLanguage
|
||||
? `https://dify.ai/${pricingPageLanguage}/pricing#plans-and-features`
|
||||
: 'https://dify.ai/pricing#plans-and-features'
|
||||
|
||||
return createPortal(
|
||||
<div
|
||||
className='fixed inset-0 bottom-0 left-0 right-0 top-0 z-[1000] overflow-auto bg-saas-background'
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<div className='relative grid min-h-full min-w-[1200px] grid-rows-[1fr_auto_auto_1fr] overflow-hidden'>
|
||||
<div className='absolute -top-12 left-0 right-0 -z-10'>
|
||||
<NoiseTop />
|
||||
</div>
|
||||
<Header onClose={onCancel} />
|
||||
<PlanSwitcher
|
||||
currentCategory={currentCategory}
|
||||
onChangeCategory={setCurrentCategory}
|
||||
currentPlanRange={planRange}
|
||||
onChangePlanRange={setPlanRange}
|
||||
/>
|
||||
<Plans
|
||||
plan={plan}
|
||||
currentPlan={currentCategory}
|
||||
planRange={planRange}
|
||||
canPay={canPay}
|
||||
/>
|
||||
<Footer pricingPageURL={pricingPageURL} currentCategory={currentCategory}/>
|
||||
<div className='absolute -bottom-12 left-0 right-0 -z-10'>
|
||||
<NoiseBottom />
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
)
|
||||
}
|
||||
export default React.memo(Pricing)
|
||||
@@ -0,0 +1,67 @@
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import type { Category } from '../index'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { Cloud, SelfHosted } from '../assets'
|
||||
import Tab from './tab'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import type { PlanRange } from './plan-range-switcher'
|
||||
import PlanRangeSwitcher from './plan-range-switcher'
|
||||
|
||||
type PlanSwitcherProps = {
|
||||
currentCategory: Category
|
||||
currentPlanRange: PlanRange
|
||||
onChangeCategory: (category: Category) => void
|
||||
onChangePlanRange: (value: PlanRange) => void
|
||||
}
|
||||
|
||||
const PlanSwitcher: FC<PlanSwitcherProps> = ({
|
||||
currentCategory,
|
||||
currentPlanRange,
|
||||
onChangeCategory,
|
||||
onChangePlanRange,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const isCloud = currentCategory === 'cloud'
|
||||
|
||||
const tabs = {
|
||||
cloud: {
|
||||
value: 'cloud' as Category,
|
||||
label: t('billing.plansCommon.cloud'),
|
||||
Icon: Cloud,
|
||||
},
|
||||
self: {
|
||||
value: 'self' as Category,
|
||||
label: t('billing.plansCommon.self'),
|
||||
Icon: SelfHosted,
|
||||
},
|
||||
}
|
||||
|
||||
return (
|
||||
<div className='flex w-full justify-center border-t border-divider-accent px-10'>
|
||||
<div className='flex max-w-[1680px] grow items-center justify-between border-x border-divider-accent p-1'>
|
||||
<div className='flex items-center'>
|
||||
<Tab<Category>
|
||||
{...tabs.cloud}
|
||||
isActive={currentCategory === tabs.cloud.value}
|
||||
onClick={onChangeCategory}
|
||||
/>
|
||||
<Divider type='vertical' className='mx-2 h-4 bg-divider-accent' />
|
||||
<Tab<Category>
|
||||
{...tabs.self}
|
||||
isActive={currentCategory === tabs.self.value}
|
||||
onClick={onChangeCategory}
|
||||
/>
|
||||
</div>
|
||||
{isCloud && (
|
||||
<PlanRangeSwitcher
|
||||
value={currentPlanRange}
|
||||
onChange={onChangePlanRange}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(PlanSwitcher)
|
||||
@@ -0,0 +1,38 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Switch from '../../../base/switch'
|
||||
|
||||
export enum PlanRange {
|
||||
monthly = 'monthly',
|
||||
yearly = 'yearly',
|
||||
}
|
||||
|
||||
type PlanRangeSwitcherProps = {
|
||||
value: PlanRange
|
||||
onChange: (value: PlanRange) => void
|
||||
}
|
||||
|
||||
const PlanRangeSwitcher: FC<PlanRangeSwitcherProps> = ({
|
||||
value,
|
||||
onChange,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className='flex items-center justify-end gap-x-3 pr-5'>
|
||||
<Switch
|
||||
size='l'
|
||||
defaultValue={value === PlanRange.yearly}
|
||||
onChange={(v) => {
|
||||
onChange(v ? PlanRange.yearly : PlanRange.monthly)
|
||||
}}
|
||||
/>
|
||||
<span className='system-md-regular text-text-tertiary'>
|
||||
{t('billing.plansCommon.annualBilling', { percent: 17 })}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(PlanRangeSwitcher)
|
||||
@@ -0,0 +1,41 @@
|
||||
import React, { useCallback } from 'react'
|
||||
import cn from '@/utils/classnames'
|
||||
|
||||
type TabProps<T> = {
|
||||
Icon: React.ComponentType<{ isActive: boolean }>
|
||||
value: T
|
||||
label: string
|
||||
isActive: boolean
|
||||
onClick: (value: T) => void
|
||||
}
|
||||
|
||||
const Tab = <T,>({
|
||||
Icon,
|
||||
value,
|
||||
label,
|
||||
isActive,
|
||||
onClick,
|
||||
}: TabProps<T>) => {
|
||||
const handleClick = useCallback(() => {
|
||||
onClick(value)
|
||||
}, [onClick, value])
|
||||
|
||||
return (
|
||||
<div
|
||||
className='flex cursor-pointer items-center justify-center gap-x-2 px-5 py-3'
|
||||
onClick={handleClick}
|
||||
>
|
||||
<Icon isActive={isActive} />
|
||||
<span
|
||||
className={cn(
|
||||
'system-xl-semibold text-text-secondary',
|
||||
isActive && 'text-saas-dify-blue-accessible',
|
||||
)}
|
||||
>
|
||||
{label}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Tab) as typeof Tab
|
||||
@@ -0,0 +1,53 @@
|
||||
import React from 'react'
|
||||
import type { BasicPlan } from '../../../type'
|
||||
import { Plan } from '../../../type'
|
||||
import cn from '@/utils/classnames'
|
||||
import { RiArrowRightLine } from '@remixicon/react'
|
||||
|
||||
const BUTTON_CLASSNAME = {
|
||||
[Plan.sandbox]: {
|
||||
btnClassname: 'bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover text-text-primary',
|
||||
btnDisabledClassname: 'bg-components-button-tertiary-bg-disabled hover:bg-components-button-tertiary-bg-disabled text-text-disabled',
|
||||
},
|
||||
[Plan.professional]: {
|
||||
btnClassname: 'bg-saas-dify-blue-static hover:bg-saas-dify-blue-static-hover text-text-primary-on-surface',
|
||||
btnDisabledClassname: 'bg-components-button-tertiary-bg-disabled hover:bg-components-button-tertiary-bg-disabled text-text-disabled',
|
||||
},
|
||||
[Plan.team]: {
|
||||
btnClassname: 'bg-saas-background-inverted hover:bg-saas-background-inverted-hover text-background-default',
|
||||
btnDisabledClassname: 'bg-components-button-tertiary-bg-disabled hover:bg-components-button-tertiary-bg-disabled text-text-disabled',
|
||||
},
|
||||
}
|
||||
|
||||
type ButtonProps = {
|
||||
plan: BasicPlan
|
||||
isPlanDisabled: boolean
|
||||
btnText: string
|
||||
handleGetPayUrl: () => void
|
||||
}
|
||||
|
||||
const Button = ({
|
||||
plan,
|
||||
isPlanDisabled,
|
||||
btnText,
|
||||
handleGetPayUrl,
|
||||
}: ButtonProps) => {
|
||||
return (
|
||||
<button
|
||||
type='button'
|
||||
disabled={isPlanDisabled}
|
||||
className={cn(
|
||||
'system-xl-semibold flex items-center gap-x-2 py-3 pl-5 pr-4',
|
||||
BUTTON_CLASSNAME[plan].btnClassname,
|
||||
isPlanDisabled && BUTTON_CLASSNAME[plan].btnDisabledClassname,
|
||||
isPlanDisabled && 'cursor-not-allowed',
|
||||
)}
|
||||
onClick={handleGetPayUrl}
|
||||
>
|
||||
<span className='grow text-start'>{btnText}</span>
|
||||
{!isPlanDisabled && <RiArrowRightLine className='size-5 shrink-0' />}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Button)
|
||||
@@ -0,0 +1,133 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useMemo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import type { BasicPlan } from '../../../type'
|
||||
import { Plan } from '../../../type'
|
||||
import { ALL_PLANS } from '../../../config'
|
||||
import Toast from '../../../../base/toast'
|
||||
import { PlanRange } from '../../plan-switcher/plan-range-switcher'
|
||||
import { useAppContext } from '@/context/app-context'
|
||||
import { fetchSubscriptionUrls } from '@/service/billing'
|
||||
import List from './list'
|
||||
import Button from './button'
|
||||
import { Professional, Sandbox, Team } from '../../assets'
|
||||
|
||||
const ICON_MAP = {
|
||||
[Plan.sandbox]: <Sandbox />,
|
||||
[Plan.professional]: <Professional />,
|
||||
[Plan.team]: <Team />,
|
||||
}
|
||||
|
||||
type CloudPlanItemProps = {
|
||||
currentPlan: BasicPlan
|
||||
plan: BasicPlan
|
||||
planRange: PlanRange
|
||||
canPay: boolean
|
||||
}
|
||||
|
||||
const CloudPlanItem: FC<CloudPlanItemProps> = ({
|
||||
plan,
|
||||
currentPlan,
|
||||
planRange,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [loading, setLoading] = React.useState(false)
|
||||
const i18nPrefix = `billing.plans.${plan}`
|
||||
const isFreePlan = plan === Plan.sandbox
|
||||
const isMostPopularPlan = plan === Plan.professional
|
||||
const planInfo = ALL_PLANS[plan]
|
||||
const isYear = planRange === PlanRange.yearly
|
||||
const isCurrent = plan === currentPlan
|
||||
const isPlanDisabled = planInfo.level <= ALL_PLANS[currentPlan].level
|
||||
const { isCurrentWorkspaceManager } = useAppContext()
|
||||
|
||||
const btnText = useMemo(() => {
|
||||
if (isCurrent)
|
||||
return t('billing.plansCommon.currentPlan')
|
||||
|
||||
return ({
|
||||
[Plan.sandbox]: t('billing.plansCommon.startForFree'),
|
||||
[Plan.professional]: t('billing.plansCommon.startBuilding'),
|
||||
[Plan.team]: t('billing.plansCommon.getStarted'),
|
||||
})[plan]
|
||||
}, [isCurrent, plan, t])
|
||||
|
||||
const handleGetPayUrl = async () => {
|
||||
if (loading)
|
||||
return
|
||||
|
||||
if (isPlanDisabled)
|
||||
return
|
||||
|
||||
if (isFreePlan)
|
||||
return
|
||||
|
||||
// Only workspace manager can buy plan
|
||||
if (!isCurrentWorkspaceManager) {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: t('billing.buyPermissionDeniedTip'),
|
||||
className: 'z-[1001]',
|
||||
})
|
||||
return
|
||||
}
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await fetchSubscriptionUrls(plan, isYear ? 'year' : 'month')
|
||||
// Adb Block additional tracking block the gtag, so we need to redirect directly
|
||||
window.location.href = res.url
|
||||
}
|
||||
finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className='flex min-w-0 flex-1 flex-col pb-3'>
|
||||
<div className='flex flex-col px-5 py-4'>
|
||||
<div className='flex flex-col gap-y-6 px-1 pt-10'>
|
||||
{ICON_MAP[plan]}
|
||||
<div className='flex min-h-[104px] flex-col gap-y-2'>
|
||||
<div className='flex items-center gap-x-2.5'>
|
||||
<div className='text-[30px] font-medium leading-[1.2] text-text-primary'>{t(`${i18nPrefix}.name`)}</div>
|
||||
{
|
||||
isMostPopularPlan && (
|
||||
<div className='flex items-center justify-center bg-saas-dify-blue-static px-1.5 py-1'>
|
||||
<span className='system-2xs-semibold-uppercase text-text-primary-on-surface'>
|
||||
{t('billing.plansCommon.mostPopular')}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<div className='system-sm-regular text-text-secondary'>{t(`${i18nPrefix}.description`)}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Price */}
|
||||
<div className='flex items-end gap-x-2 px-1 pb-8 pt-4'>
|
||||
{isFreePlan && (
|
||||
<span className='title-4xl-semi-bold text-text-primary'>{t('billing.plansCommon.free')}</span>
|
||||
)}
|
||||
{!isFreePlan && (
|
||||
<>
|
||||
{isYear && <span className='title-4xl-semi-bold text-text-quaternary line-through'>${planInfo.price * 12}</span>}
|
||||
<span className='title-4xl-semi-bold text-text-primary'>${isYear ? planInfo.price * 10 : planInfo.price}</span>
|
||||
<span className='system-md-regular pb-0.5 text-text-tertiary'>
|
||||
{t('billing.plansCommon.priceTip')}
|
||||
{t(`billing.plansCommon.${!isYear ? 'month' : 'year'}`)}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
plan={plan}
|
||||
isPlanDisabled={isPlanDisabled}
|
||||
btnText={btnText}
|
||||
handleGetPayUrl={handleGetPayUrl}
|
||||
/>
|
||||
</div>
|
||||
<List plan={plan} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(CloudPlanItem)
|
||||
@@ -0,0 +1,104 @@
|
||||
import React from 'react'
|
||||
import { type BasicPlan, Plan } from '../../../../type'
|
||||
import Item from './item'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { ALL_PLANS, NUM_INFINITE } from '../../../../config'
|
||||
import Divider from '@/app/components/base/divider'
|
||||
|
||||
type ListProps = {
|
||||
plan: BasicPlan
|
||||
}
|
||||
|
||||
const List = ({
|
||||
plan,
|
||||
}: ListProps) => {
|
||||
const { t } = useTranslation()
|
||||
const isFreePlan = plan === Plan.sandbox
|
||||
const planInfo = ALL_PLANS[plan]
|
||||
|
||||
return (
|
||||
<div className='flex flex-col gap-y-2.5 p-6'>
|
||||
<Item
|
||||
label={isFreePlan
|
||||
? t('billing.plansCommon.messageRequest.title', { count: planInfo.messageRequest })
|
||||
: t('billing.plansCommon.messageRequest.titlePerMonth', { count: planInfo.messageRequest })}
|
||||
tooltip={t('billing.plansCommon.messageRequest.tooltip') as string}
|
||||
/>
|
||||
<Item
|
||||
label={t('billing.plansCommon.teamWorkspace', { count: planInfo.teamWorkspace })}
|
||||
/>
|
||||
<Item
|
||||
label={t('billing.plansCommon.teamMember', { count: planInfo.teamMembers })}
|
||||
/>
|
||||
<Item
|
||||
label={t('billing.plansCommon.buildApps', { count: planInfo.buildApps })}
|
||||
/>
|
||||
<Divider bgStyle='gradient' />
|
||||
<Item
|
||||
label={t('billing.plansCommon.documents', { count: planInfo.documents })}
|
||||
tooltip={t('billing.plansCommon.documentsTooltip') as string}
|
||||
/>
|
||||
<Item
|
||||
label={t('billing.plansCommon.vectorSpace', { size: planInfo.vectorSpace })}
|
||||
tooltip={t('billing.plansCommon.vectorSpaceTooltip') as string}
|
||||
/>
|
||||
<Item
|
||||
label={t('billing.plansCommon.documentsRequestQuota', { count: planInfo.documentsRequestQuota })}
|
||||
tooltip={t('billing.plansCommon.documentsRequestQuotaTooltip')}
|
||||
/>
|
||||
<Item
|
||||
label={[t(`billing.plansCommon.priority.${planInfo.documentProcessingPriority}`), t('billing.plansCommon.documentProcessingPriority')].join('')}
|
||||
/>
|
||||
<Divider bgStyle='gradient' />
|
||||
<Item
|
||||
label={
|
||||
planInfo.triggerEvents === NUM_INFINITE
|
||||
? t('billing.plansCommon.triggerEvents.unlimited')
|
||||
: plan === Plan.sandbox
|
||||
? t('billing.plansCommon.triggerEvents.sandbox', { count: planInfo.triggerEvents })
|
||||
: t('billing.plansCommon.triggerEvents.professional', { count: planInfo.triggerEvents })
|
||||
}
|
||||
tooltip={t('billing.plansCommon.triggerEvents.tooltip') as string}
|
||||
/>
|
||||
<Item
|
||||
label={
|
||||
plan === Plan.sandbox
|
||||
? t('billing.plansCommon.startNodes.limited', { count: 2 })
|
||||
: t('billing.plansCommon.startNodes.unlimited')
|
||||
}
|
||||
/>
|
||||
<Item
|
||||
label={
|
||||
plan === Plan.sandbox
|
||||
? t('billing.plansCommon.workflowExecution.standard')
|
||||
: plan === Plan.professional
|
||||
? t('billing.plansCommon.workflowExecution.faster')
|
||||
: t('billing.plansCommon.workflowExecution.priority')
|
||||
}
|
||||
tooltip={t('billing.plansCommon.workflowExecution.tooltip') as string}
|
||||
/>
|
||||
<Divider bgStyle='gradient' />
|
||||
<Item
|
||||
label={t('billing.plansCommon.annotatedResponse.title', { count: planInfo.annotatedResponse })}
|
||||
tooltip={t('billing.plansCommon.annotatedResponse.tooltip') as string}
|
||||
/>
|
||||
<Item
|
||||
label={t('billing.plansCommon.logsHistory', { days: planInfo.logHistory === NUM_INFINITE ? t('billing.plansCommon.unlimited') as string : `${planInfo.logHistory} ${t('billing.plansCommon.days')}` })}
|
||||
/>
|
||||
<Item
|
||||
label={
|
||||
planInfo.apiRateLimit === NUM_INFINITE
|
||||
? t('billing.plansCommon.unlimitedApiRate')
|
||||
: `${t('billing.plansCommon.apiRateLimitUnit', { count: planInfo.apiRateLimit })} ${t('billing.plansCommon.apiRateLimit')}/${t('billing.plansCommon.month')}`
|
||||
}
|
||||
tooltip={planInfo.apiRateLimit === NUM_INFINITE ? undefined : t('billing.plansCommon.apiRateLimitTooltip') as string}
|
||||
/>
|
||||
<Divider bgStyle='gradient' />
|
||||
<Item
|
||||
label={t('billing.plansCommon.modelProviders')}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(List)
|
||||
@@ -0,0 +1,25 @@
|
||||
import React from 'react'
|
||||
import Tooltip from './tooltip'
|
||||
|
||||
type ItemProps = {
|
||||
label: string
|
||||
tooltip?: string
|
||||
}
|
||||
|
||||
const Item = ({
|
||||
label,
|
||||
tooltip,
|
||||
}: ItemProps) => {
|
||||
return (
|
||||
<div className='flex items-center'>
|
||||
<span className='system-sm-regular grow text-text-secondary'>{label}</span>
|
||||
{tooltip && (
|
||||
<Tooltip
|
||||
content={tooltip}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Item)
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from 'react'
|
||||
import { RiInfoI } from '@remixicon/react'
|
||||
|
||||
type TooltipProps = {
|
||||
content: string
|
||||
}
|
||||
|
||||
const Tooltip = ({
|
||||
content,
|
||||
}: TooltipProps) => {
|
||||
return (
|
||||
<div className='group relative z-10 size-[18px] overflow-visible'>
|
||||
<div className='system-xs-regular absolute bottom-0 right-0 -z-10 hidden w-[260px] bg-saas-dify-blue-static px-5 py-[18px] text-text-primary-on-surface group-hover:block'>
|
||||
{content}
|
||||
</div>
|
||||
<div className='flex h-full w-full items-center justify-center rounded-[4px] bg-state-base-hover transition-all duration-500 ease-in-out group-hover:rounded-none group-hover:bg-saas-dify-blue-static'>
|
||||
<RiInfoI className='size-3.5 text-text-tertiary group-hover:text-text-primary-on-surface' />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Tooltip)
|
||||
74
dify/web/app/components/billing/pricing/plans/index.tsx
Normal file
74
dify/web/app/components/billing/pricing/plans/index.tsx
Normal file
@@ -0,0 +1,74 @@
|
||||
import Divider from '@/app/components/base/divider'
|
||||
import { type BasicPlan, Plan, SelfHostedPlan, type UsagePlanInfo } from '../../type'
|
||||
import CloudPlanItem from './cloud-plan-item'
|
||||
import type { PlanRange } from '../plan-switcher/plan-range-switcher'
|
||||
import SelfHostedPlanItem from './self-hosted-plan-item'
|
||||
|
||||
type PlansProps = {
|
||||
plan: {
|
||||
type: Plan
|
||||
usage: UsagePlanInfo
|
||||
total: UsagePlanInfo
|
||||
}
|
||||
currentPlan: string
|
||||
planRange: PlanRange
|
||||
canPay: boolean
|
||||
}
|
||||
|
||||
const Plans = ({
|
||||
plan,
|
||||
currentPlan,
|
||||
planRange,
|
||||
canPay,
|
||||
}: PlansProps) => {
|
||||
const currentPlanType: BasicPlan = plan.type === Plan.enterprise ? Plan.team : plan.type
|
||||
return (
|
||||
<div className='flex w-full justify-center border-t border-divider-accent px-10'>
|
||||
<div className='flex max-w-[1680px] grow border-x border-divider-accent'>
|
||||
{
|
||||
currentPlan === 'cloud' && (
|
||||
<>
|
||||
<CloudPlanItem
|
||||
currentPlan={currentPlanType}
|
||||
plan={Plan.sandbox}
|
||||
planRange={planRange}
|
||||
canPay={canPay}
|
||||
/>
|
||||
<Divider type='vertical' className='mx-0 shrink-0 bg-divider-accent' />
|
||||
<CloudPlanItem
|
||||
currentPlan={currentPlanType}
|
||||
plan={Plan.professional}
|
||||
planRange={planRange}
|
||||
canPay={canPay}
|
||||
/>
|
||||
<Divider type='vertical' className='mx-0 shrink-0 bg-divider-accent' />
|
||||
<CloudPlanItem
|
||||
currentPlan={currentPlanType}
|
||||
plan={Plan.team}
|
||||
planRange={planRange}
|
||||
canPay={canPay}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
{
|
||||
currentPlan === 'self' && <>
|
||||
<SelfHostedPlanItem
|
||||
plan={SelfHostedPlan.community}
|
||||
/>
|
||||
<Divider type='vertical' className='mx-0 shrink-0 bg-divider-accent' />
|
||||
<SelfHostedPlanItem
|
||||
plan={SelfHostedPlan.premium}
|
||||
/>
|
||||
<Divider type='vertical' className='mx-0 shrink-0 bg-divider-accent' />
|
||||
<SelfHostedPlanItem
|
||||
plan={SelfHostedPlan.enterprise}
|
||||
/>
|
||||
</>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Plans
|
||||
@@ -0,0 +1,55 @@
|
||||
import React, { useMemo } from 'react'
|
||||
import { SelfHostedPlan } from '../../../type'
|
||||
import { AwsMarketplaceDark, AwsMarketplaceLight } from '@/app/components/base/icons/src/public/billing'
|
||||
import { RiArrowRightLine } from '@remixicon/react'
|
||||
import cn from '@/utils/classnames'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import useTheme from '@/hooks/use-theme'
|
||||
import { Theme } from '@/types/app'
|
||||
|
||||
const BUTTON_CLASSNAME = {
|
||||
[SelfHostedPlan.community]: 'text-text-primary bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover',
|
||||
[SelfHostedPlan.premium]: 'text-background-default bg-saas-background-inverted hover:bg-saas-background-inverted-hover',
|
||||
[SelfHostedPlan.enterprise]: 'text-text-primary-on-surface bg-saas-dify-blue-static hover:bg-saas-dify-blue-static-hover',
|
||||
}
|
||||
|
||||
type ButtonProps = {
|
||||
plan: SelfHostedPlan
|
||||
handleGetPayUrl: () => void
|
||||
}
|
||||
|
||||
const Button = ({
|
||||
plan,
|
||||
handleGetPayUrl,
|
||||
}: ButtonProps) => {
|
||||
const { t } = useTranslation()
|
||||
const { theme } = useTheme()
|
||||
const i18nPrefix = `billing.plans.${plan}`
|
||||
const isPremiumPlan = plan === SelfHostedPlan.premium
|
||||
const AwsMarketplace = useMemo(() => {
|
||||
return theme === Theme.light ? AwsMarketplaceLight : AwsMarketplaceDark
|
||||
}, [theme])
|
||||
|
||||
return (
|
||||
<button type="button"
|
||||
className={cn(
|
||||
'system-xl-semibold flex items-center gap-x-2 py-3 pl-5 pr-4',
|
||||
BUTTON_CLASSNAME[plan],
|
||||
isPremiumPlan && 'py-2',
|
||||
)}
|
||||
onClick={handleGetPayUrl}
|
||||
>
|
||||
<div className='flex grow items-center gap-x-2'>
|
||||
<span>{t(`${i18nPrefix}.btnText`)}</span>
|
||||
{isPremiumPlan && (
|
||||
<span className='pb-px pt-[7px]'>
|
||||
<AwsMarketplace className='h-6' />
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<RiArrowRightLine className='size-5 shrink-0' />
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Button)
|
||||
@@ -0,0 +1,124 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useCallback } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { SelfHostedPlan } from '../../../type'
|
||||
import { contactSalesUrl, getStartedWithCommunityUrl, getWithPremiumUrl } from '../../../config'
|
||||
import Toast from '../../../../base/toast'
|
||||
import cn from '@/utils/classnames'
|
||||
import { useAppContext } from '@/context/app-context'
|
||||
import Button from './button'
|
||||
import List from './list'
|
||||
import { Azure, GoogleCloud } from '@/app/components/base/icons/src/public/billing'
|
||||
import { Community, Enterprise, EnterpriseNoise, Premium, PremiumNoise } from '../../assets'
|
||||
|
||||
const STYLE_MAP = {
|
||||
[SelfHostedPlan.community]: {
|
||||
icon: <Community />,
|
||||
bg: '',
|
||||
noise: null,
|
||||
},
|
||||
[SelfHostedPlan.premium]: {
|
||||
icon: <Premium />,
|
||||
bg: 'bg-billing-plan-card-premium-bg opacity-10',
|
||||
noise: (
|
||||
<div className='absolute -top-12 left-0 right-0 -z-10'>
|
||||
<PremiumNoise />
|
||||
</div>
|
||||
),
|
||||
},
|
||||
[SelfHostedPlan.enterprise]: {
|
||||
icon: <Enterprise />,
|
||||
bg: 'bg-billing-plan-card-enterprise-bg opacity-10',
|
||||
noise: (
|
||||
<div className='absolute -top-12 left-0 right-0 -z-10'>
|
||||
<EnterpriseNoise />
|
||||
</div>
|
||||
),
|
||||
},
|
||||
}
|
||||
|
||||
type SelfHostedPlanItemProps = {
|
||||
plan: SelfHostedPlan
|
||||
}
|
||||
|
||||
const SelfHostedPlanItem: FC<SelfHostedPlanItemProps> = ({
|
||||
plan,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const i18nPrefix = `billing.plans.${plan}`
|
||||
const isFreePlan = plan === SelfHostedPlan.community
|
||||
const isPremiumPlan = plan === SelfHostedPlan.premium
|
||||
const isEnterprisePlan = plan === SelfHostedPlan.enterprise
|
||||
const { isCurrentWorkspaceManager } = useAppContext()
|
||||
|
||||
const handleGetPayUrl = useCallback(() => {
|
||||
// Only workspace manager can buy plan
|
||||
if (!isCurrentWorkspaceManager) {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: t('billing.buyPermissionDeniedTip'),
|
||||
className: 'z-[1001]',
|
||||
})
|
||||
return
|
||||
}
|
||||
if (isFreePlan) {
|
||||
window.location.href = getStartedWithCommunityUrl
|
||||
return
|
||||
}
|
||||
if (isPremiumPlan) {
|
||||
window.location.href = getWithPremiumUrl
|
||||
return
|
||||
}
|
||||
|
||||
if (isEnterprisePlan)
|
||||
window.location.href = contactSalesUrl
|
||||
}, [isCurrentWorkspaceManager, isFreePlan, isPremiumPlan, isEnterprisePlan, t])
|
||||
|
||||
return (
|
||||
<div className='relative flex flex-1 flex-col overflow-hidden'>
|
||||
<div className={cn('absolute inset-0 -z-10', STYLE_MAP[plan].bg)} />
|
||||
{/* Noise Effect */}
|
||||
{STYLE_MAP[plan].noise}
|
||||
<div className='flex flex-col px-5 py-4'>
|
||||
<div className=' flex flex-col gap-y-6 px-1 pt-10'>
|
||||
{STYLE_MAP[plan].icon}
|
||||
<div className='flex min-h-[104px] flex-col gap-y-2'>
|
||||
<div className='text-[30px] font-medium leading-[1.2] text-text-primary'>{t(`${i18nPrefix}.name`)}</div>
|
||||
<div className='system-md-regular line-clamp-2 text-text-secondary'>{t(`${i18nPrefix}.description`)}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Price */}
|
||||
<div className='flex items-end gap-x-2 px-1 pb-8 pt-4'>
|
||||
<div className='title-4xl-semi-bold shrink-0 text-text-primary'>{t(`${i18nPrefix}.price`)}</div>
|
||||
{!isFreePlan && (
|
||||
<span className='system-md-regular pb-0.5 text-text-tertiary'>
|
||||
{t(`${i18nPrefix}.priceTip`)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
plan={plan}
|
||||
handleGetPayUrl={handleGetPayUrl}
|
||||
/>
|
||||
</div>
|
||||
<List plan={plan} />
|
||||
{isPremiumPlan && (
|
||||
<div className='flex grow flex-col justify-end gap-y-2 p-6 pt-0'>
|
||||
<div className='flex items-center gap-x-1'>
|
||||
<div className='flex size-8 items-center justify-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default shadow-xs shadow-shadow-shadow-3'>
|
||||
<Azure />
|
||||
</div>
|
||||
<div className='flex size-8 items-center justify-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default shadow-xs shadow-shadow-shadow-3'>
|
||||
<GoogleCloud />
|
||||
</div>
|
||||
</div>
|
||||
<span className='system-xs-regular text-text-tertiary'>
|
||||
{t('billing.plans.premium.comingSoon')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(SelfHostedPlanItem)
|
||||
@@ -0,0 +1,35 @@
|
||||
import React from 'react'
|
||||
import type { SelfHostedPlan } from '@/app/components/billing/type'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import Item from './item'
|
||||
|
||||
type ListProps = {
|
||||
plan: SelfHostedPlan
|
||||
}
|
||||
|
||||
const List = ({
|
||||
plan,
|
||||
}: ListProps) => {
|
||||
const { t } = useTranslation()
|
||||
const i18nPrefix = `billing.plans.${plan}`
|
||||
const features = t(`${i18nPrefix}.features`, { returnObjects: true }) as string[]
|
||||
|
||||
return (
|
||||
<div className='flex flex-col gap-y-[10px] p-6'>
|
||||
<div className='system-md-semibold text-text-secondary'>
|
||||
<Trans
|
||||
i18nKey={t(`${i18nPrefix}.includesTitle`)}
|
||||
components={{ highlight: <span className='text-text-warning'></span> }}
|
||||
/>
|
||||
</div>
|
||||
{features.map(feature =>
|
||||
<Item
|
||||
key={`${plan}-${feature}`}
|
||||
label={feature}
|
||||
/>,
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(List)
|
||||
@@ -0,0 +1,21 @@
|
||||
import React from 'react'
|
||||
import { RiCheckLine } from '@remixicon/react'
|
||||
|
||||
type ItemProps = {
|
||||
label: string
|
||||
}
|
||||
|
||||
const Item = ({
|
||||
label,
|
||||
}: ItemProps) => {
|
||||
return (
|
||||
<div className='flex items-center gap-x-1'>
|
||||
<div className='py-px'>
|
||||
<RiCheckLine className='size-4 shrink-0 text-text-tertiary' />
|
||||
</div>
|
||||
<span className='system-sm-regular grow text-text-secondary'>{label}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Item)
|
||||
Reference in New Issue
Block a user