admin/dify
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: knowledge pipeline (#25360)

Browse Source 
Signed-off-by: -LAN- <laipz8200@outlook.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: crazywoola <100913391+crazywoola@users.noreply.github.com>
Co-authored-by: jyong <718720800@qq.com>
Co-authored-by: Wu Tianwei <30284043+WTW0313@users.noreply.github.com>
Co-authored-by: QuantumGhost <obelisk.reg+git@gmail.com>
Co-authored-by: lyzno1 <yuanyouhuilyz@gmail.com>
Co-authored-by: quicksand <quicksandzn@gmail.com>
Co-authored-by: Jyong <76649700+JohnJyong@users.noreply.github.com>
Co-authored-by: lyzno1 <92089059+lyzno1@users.noreply.github.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: Yongtao Huang <yongtaoh2022@gmail.com>
Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
Co-authored-by: Joel <iamjoel007@gmail.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: nite-knite <nkCoding@gmail.com>
Co-authored-by: Hanqing Zhao <sherry9277@gmail.com>
Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com>
Co-authored-by: Harry <xh001x@hotmail.com>
This commit is contained in:
-LAN-
2025-09-18 12:49:10 +08:00
committed by GitHub
parent 7dadb33003
commit 85cda47c70
1772 changed files with 102407 additions and 31710 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
web/app/components/billing/plan/assets/enterprise.tsx Normal file
View File

@@ -0,0 +1,89 @@
const Enterprise = () => {
return (
<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'>
<path d='M1 2C1 1.44772 1.44772 1 2 1C2.55228 1 3 1.44772 3 2C3 2.55228 2.55228 3 2 3C1.44772 3 1 2.55228 1 2Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M4.5 2C4.5 1.44772 4.94772 1 5.5 1C6.05228 1 6.5 1.44772 6.5 2C6.5 2.55228 6.05228 3 5.5 3C4.94772 3 4.5 2.55228 4.5 2Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M8 2C8 1.44772 8.44772 1 9 1C9.55228 1 10 1.44772 10 2C10 2.55228 9.55228 3 9 3C8.44772 3 8 2.55228 8 2Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M11.5 2C11.5 1.44772 11.9477 1 12.5 1C13.0523 1 13.5 1.44772 13.5 2C13.5 2.55228 13.0523 3 12.5 3C11.9477 3 11.5 2.55228 11.5 2Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M15 2C15 1.44772 15.4477 1 16 1C16.5523 1 17 1.44772 17 2C17 2.55228 16.5523 3 16 3C15.4477 3 15 2.55228 15 2Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M18.5 2C18.5 1.44772 18.9477 1 19.5 1C20.0523 1 20.5 1.44772 20.5 2C20.5 2.55228 20.0523 3 19.5 3C18.9477 3 18.5 2.55228 18.5 2Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M22 2C22 1.44772 22.4477 1 23 1C23.5523 1 24 1.44772 24 2C24 2.55228 23.5523 3 23 3C22.4477 3 22 2.55228 22 2Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M25.5 2C25.5 1.44772 25.9477 1 26.5 1C27.0523 1 27.5 1.44772 27.5 2C27.5 2.55228 27.0523 3 26.5 3C25.9477 3 25.5 2.55228 25.5 2Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M29 2C29 1.44772 29.4477 1 30 1C30.5523 1 31 1.44772 31 2C31 2.55228 30.5523 3 30 3C29.4477 3 29 2.55228 29 2Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M1 5.5C1 4.94772 1.44772 4.5 2 4.5C2.55228 4.5 3 4.94772 3 5.5C3 6.05228 2.55228 6.5 2 6.5C1.44772 6.5 1 6.05228 1 5.5Z' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M4.5 5.5C4.5 4.94772 4.94772 4.5 5.5 4.5C6.05228 4.5 6.5 4.94772 6.5 5.5C6.5 6.05228 6.05228 6.5 5.5 6.5C4.94772 6.5 4.5 6.05228 4.5 5.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M8 5.5C8 4.94772 8.44772 4.5 9 4.5C9.55228 4.5 10 4.94772 10 5.5C10 6.05228 9.55228 6.5 9 6.5C8.44772 6.5 8 6.05228 8 5.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M11.5 5.5C11.5 4.94772 11.9477 4.5 12.5 4.5C13.0523 4.5 13.5 4.94772 13.5 5.5C13.5 6.05228 13.0523 6.5 12.5 6.5C11.9477 6.5 11.5 6.05228 11.5 5.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M15 5.5C15 4.94772 15.4477 4.5 16 4.5C16.5523 4.5 17 4.94772 17 5.5C17 6.05228 16.5523 6.5 16 6.5C15.4477 6.5 15 6.05228 15 5.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M18.5 5.5C18.5 4.94772 18.9477 4.5 19.5 4.5C20.0523 4.5 20.5 4.94772 20.5 5.5C20.5 6.05228 20.0523 6.5 19.5 6.5C18.9477 6.5 18.5 6.05228 18.5 5.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M22 5.5C22 4.94772 22.4477 4.5 23 4.5C23.5523 4.5 24 4.94772 24 5.5C24 6.05228 23.5523 6.5 23 6.5C22.4477 6.5 22 6.05228 22 5.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M25.5 5.5C25.5 4.94772 25.9477 4.5 26.5 4.5C27.0523 4.5 27.5 4.94772 27.5 5.5C27.5 6.05228 27.0523 6.5 26.5 6.5C25.9477 6.5 25.5 6.05228 25.5 5.5Z' fill='var(--color-text-quaternary)' />
<path d='M29 5.5C29 4.94772 29.4477 4.5 30 4.5C30.5523 4.5 31 4.94772 31 5.5C31 6.05228 30.5523 6.5 30 6.5C29.4477 6.5 29 6.05228 29 5.5Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M1 9C1 8.44772 1.44772 8 2 8C2.55228 8 3 8.44772 3 9C3 9.55228 2.55228 10 2 10C1.44772 10 1 9.55228 1 9Z' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M4.5 9C4.5 8.44772 4.94772 8 5.5 8C6.05228 8 6.5 8.44772 6.5 9C6.5 9.55228 6.05228 10 5.5 10C4.94772 10 4.5 9.55228 4.5 9Z' fill='var(--color-text-quaternary)' />
<path d='M8 9C8 8.44772 8.44772 8 9 8C9.55228 8 10 8.44772 10 9C10 9.55228 9.55228 10 9 10C8.44772 10 8 9.55228 8 9Z' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M11.5 9C11.5 8.44772 11.9477 8 12.5 8C13.0523 8 13.5 8.44772 13.5 9C13.5 9.55228 13.0523 10 12.5 10C11.9477 10 11.5 9.55228 11.5 9Z' fill='var(--color-text-quaternary)' />
<path d='M15 9C15 8.44772 15.4477 8 16 8C16.5523 8 17 8.44772 17 9C17 9.55228 16.5523 10 16 10C15.4477 10 15 9.55228 15 9Z' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M18.5 9C18.5 8.44772 18.9477 8 19.5 8C20.0523 8 20.5 8.44772 20.5 9C20.5 9.55228 20.0523 10 19.5 10C18.9477 10 18.5 9.55228 18.5 9Z' fill='var(--color-text-quaternary)' />
<path d='M22 9C22 8.44772 22.4477 8 23 8C23.5523 8 24 8.44772 24 9C24 9.55228 23.5523 10 23 10C22.4477 10 22 9.55228 22 9Z' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M25.5 9C25.5 8.44772 25.9477 8 26.5 8C27.0523 8 27.5 8.44772 27.5 9C27.5 9.55228 27.0523 10 26.5 10C25.9477 10 25.5 9.55228 25.5 9Z' fill='var(--color-text-quaternary)' />
<path d='M29 9C29 8.44772 29.4477 8 30 8C30.5523 8 31 8.44772 31 9C31 9.55228 30.5523 10 30 10C29.4477 10 29 9.55228 29 9Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M1 12.5C1 11.9477 1.44772 11.5 2 11.5C2.55228 11.5 3 11.9477 3 12.5C3 13.0523 2.55228 13.5 2 13.5C1.44772 13.5 1 13.0523 1 12.5Z' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M4.5 12.5C4.5 11.9477 4.94772 11.5 5.5 11.5C6.05228 11.5 6.5 11.9477 6.5 12.5C6.5 13.0523 6.05228 13.5 5.5 13.5C4.94772 13.5 4.5 13.0523 4.5 12.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M8 12.5C8 11.9477 8.44772 11.5 9 11.5C9.55228 11.5 10 11.9477 10 12.5C10 13.0523 9.55228 13.5 9 13.5C8.44772 13.5 8 13.0523 8 12.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M11.5 12.5C11.5 11.9477 11.9477 11.5 12.5 11.5C13.0523 11.5 13.5 11.9477 13.5 12.5C13.5 13.0523 13.0523 13.5 12.5 13.5C11.9477 13.5 11.5 13.0523 11.5 12.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M15 12.5C15 11.9477 15.4477 11.5 16 11.5C16.5523 11.5 17 11.9477 17 12.5C17 13.0523 16.5523 13.5 16 13.5C15.4477 13.5 15 13.0523 15 12.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M18.5 12.5C18.5 11.9477 18.9477 11.5 19.5 11.5C20.0523 11.5 20.5 11.9477 20.5 12.5C20.5 13.0523 20.0523 13.5 19.5 13.5C18.9477 13.5 18.5 13.0523 18.5 12.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M22 12.5C22 11.9477 22.4477 11.5 23 11.5C23.5523 11.5 24 11.9477 24 12.5C24 13.0523 23.5523 13.5 23 13.5C22.4477 13.5 22 13.0523 22 12.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M25.5 12.5C25.5 11.9477 25.9477 11.5 26.5 11.5C27.0523 11.5 27.5 11.9477 27.5 12.5C27.5 13.0523 27.0523 13.5 26.5 13.5C25.9477 13.5 25.5 13.0523 25.5 12.5Z' fill='var(--color-text-quaternary)' />
<path d='M29 12.5C29 11.9477 29.4477 11.5 30 11.5C30.5523 11.5 31 11.9477 31 12.5C31 13.0523 30.5523 13.5 30 13.5C29.4477 13.5 29 13.0523 29 12.5Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M1 16C1 15.4477 1.44772 15 2 15C2.55228 15 3 15.4477 3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16Z' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M4.5 16C4.5 15.4477 4.94772 15 5.5 15C6.05228 15 6.5 15.4477 6.5 16C6.5 16.5523 6.05228 17 5.5 17C4.94772 17 4.5 16.5523 4.5 16Z' fill='var(--color-text-quaternary)' />
<path d='M8 16C8 15.4477 8.44772 15 9 15C9.55228 15 10 15.4477 10 16C10 16.5523 9.55228 17 9 17C8.44772 17 8 16.5523 8 16Z' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M11.5 16C11.5 15.4477 11.9477 15 12.5 15C13.0523 15 13.5 15.4477 13.5 16C13.5 16.5523 13.0523 17 12.5 17C11.9477 17 11.5 16.5523 11.5 16Z' fill='var(--color-text-quaternary)' />
<path d='M15 16C15 15.4477 15.4477 15 16 15C16.5523 15 17 15.4477 17 16C17 16.5523 16.5523 17 16 17C15.4477 17 15 16.5523 15 16Z' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M18.5 16C18.5 15.4477 18.9477 15 19.5 15C20.0523 15 20.5 15.4477 20.5 16C20.5 16.5523 20.0523 17 19.5 17C18.9477 17 18.5 16.5523 18.5 16Z' fill='var(--color-text-quaternary)' />
<path d='M22 16C22 15.4477 22.4477 15 23 15C23.5523 15 24 15.4477 24 16C24 16.5523 23.5523 17 23 17C22.4477 17 22 16.5523 22 16Z' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M25.5 16C25.5 15.4477 25.9477 15 26.5 15C27.0523 15 27.5 15.4477 27.5 16C27.5 16.5523 27.0523 17 26.5 17C25.9477 17 25.5 16.5523 25.5 16Z' fill='var(--color-text-quaternary)' />
<path d='M29 16C29 15.4477 29.4477 15 30 15C30.5523 15 31 15.4477 31 16C31 16.5523 30.5523 17 30 17C29.4477 17 29 16.5523 29 16Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M1 19.5C1 18.9477 1.44772 18.5 2 18.5C2.55228 18.5 3 18.9477 3 19.5C3 20.0523 2.55228 20.5 2 20.5C1.44772 20.5 1 20.0523 1 19.5Z' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M4.5 19.5C4.5 18.9477 4.94772 18.5 5.5 18.5C6.05228 18.5 6.5 18.9477 6.5 19.5C6.5 20.0523 6.05228 20.5 5.5 20.5C4.94772 20.5 4.5 20.0523 4.5 19.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M8 19.5C8 18.9477 8.44772 18.5 9 18.5C9.55228 18.5 10 18.9477 10 19.5C10 20.0523 9.55228 20.5 9 20.5C8.44772 20.5 8 20.0523 8 19.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M11.5 19.5C11.5 18.9477 11.9477 18.5 12.5 18.5C13.0523 18.5 13.5 18.9477 13.5 19.5C13.5 20.0523 13.0523 20.5 12.5 20.5C11.9477 20.5 11.5 20.0523 11.5 19.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M15 19.5C15 18.9477 15.4477 18.5 16 18.5C16.5523 18.5 17 18.9477 17 19.5C17 20.0523 16.5523 20.5 16 20.5C15.4477 20.5 15 20.0523 15 19.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M18.5 19.5C18.5 18.9477 18.9477 18.5 19.5 18.5C20.0523 18.5 20.5 18.9477 20.5 19.5C20.5 20.0523 20.0523 20.5 19.5 20.5C18.9477 20.5 18.5 20.0523 18.5 19.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M22 19.5C22 18.9477 22.4477 18.5 23 18.5C23.5523 18.5 24 18.9477 24 19.5C24 20.0523 23.5523 20.5 23 20.5C22.4477 20.5 22 20.0523 22 19.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M25.5 19.5C25.5 18.9477 25.9477 18.5 26.5 18.5C27.0523 18.5 27.5 18.9477 27.5 19.5C27.5 20.0523 27.0523 20.5 26.5 20.5C25.9477 20.5 25.5 20.0523 25.5 19.5Z' fill='var(--color-text-quaternary)' />
<path d='M29 19.5C29 18.9477 29.4477 18.5 30 18.5C30.5523 18.5 31 18.9477 31 19.5C31 20.0523 30.5523 20.5 30 20.5C29.4477 20.5 29 20.0523 29 19.5Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M1 23C1 22.4477 1.44772 22 2 22C2.55228 22 3 22.4477 3 23C3 23.5523 2.55228 24 2 24C1.44772 24 1 23.5523 1 23Z' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M4.5 23C4.5 22.4477 4.94772 22 5.5 22C6.05228 22 6.5 22.4477 6.5 23C6.5 23.5523 6.05228 24 5.5 24C4.94772 24 4.5 23.5523 4.5 23Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M8 23C8 22.4477 8.44772 22 9 22C9.55228 22 10 22.4477 10 23C10 23.5523 9.55228 24 9 24C8.44772 24 8 23.5523 8 23Z' fill='var(--color-text-quaternary)' />
<path d='M11.5 23C11.5 22.4477 11.9477 22 12.5 22C13.0523 22 13.5 22.4477 13.5 23C13.5 23.5523 13.0523 24 12.5 24C11.9477 24 11.5 23.5523 11.5 23Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M15 23C15 22.4477 15.4477 22 16 22C16.5523 22 17 22.4477 17 23C17 23.5523 16.5523 24 16 24C15.4477 24 15 23.5523 15 23Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M18.5 23C18.5 22.4477 18.9477 22 19.5 22C20.0523 22 20.5 22.4477 20.5 23C20.5 23.5523 20.0523 24 19.5 24C18.9477 24 18.5 23.5523 18.5 23Z' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M22 23C22 22.4477 22.4477 22 23 22C23.5523 22 24 22.4477 24 23C24 23.5523 23.5523 24 23 24C22.4477 24 22 23.5523 22 23Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M25.5 23C25.5 22.4477 25.9477 22 26.5 22C27.0523 22 27.5 22.4477 27.5 23C27.5 23.5523 27.0523 24 26.5 24C25.9477 24 25.5 23.5523 25.5 23Z' fill='var(--color-text-quaternary)' />
<path d='M29 23C29 22.4477 29.4477 22 30 22C30.5523 22 31 22.4477 31 23C31 23.5523 30.5523 24 30 24C29.4477 24 29 23.5523 29 23Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M1 26.5C1 25.9477 1.44772 25.5 2 25.5C2.55228 25.5 3 25.9477 3 26.5C3 27.0523 2.55228 27.5 2 27.5C1.44772 27.5 1 27.0523 1 26.5Z' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M4.5 26.5C4.5 25.9477 4.94772 25.5 5.5 25.5C6.05228 25.5 6.5 25.9477 6.5 26.5C6.5 27.0523 6.05228 27.5 5.5 27.5C4.94772 27.5 4.5 27.0523 4.5 26.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M8 26.5C8 25.9477 8.44772 25.5 9 25.5C9.55228 25.5 10 25.9477 10 26.5C10 27.0523 9.55228 27.5 9 27.5C8.44772 27.5 8 27.0523 8 26.5Z' fill='var(--color-text-quaternary)' />
<path d='M11.5 26.5C11.5 25.9477 11.9477 25.5 12.5 25.5C13.0523 25.5 13.5 25.9477 13.5 26.5C13.5 27.0523 13.0523 27.5 12.5 27.5C11.9477 27.5 11.5 27.0523 11.5 26.5Z' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M15 26.5C15 25.9477 15.4477 25.5 16 25.5C16.5523 25.5 17 25.9477 17 26.5C17 27.0523 16.5523 27.5 16 27.5C15.4477 27.5 15 27.0523 15 26.5Z' fill='var(--color-text-quaternary)' />
<path d='M18.5 26.5C18.5 25.9477 18.9477 25.5 19.5 25.5C20.0523 25.5 20.5 25.9477 20.5 26.5C20.5 27.0523 20.0523 27.5 19.5 27.5C18.9477 27.5 18.5 27.0523 18.5 26.5Z' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M22 26.5C22 25.9477 22.4477 25.5 23 25.5C23.5523 25.5 24 25.9477 24 26.5C24 27.0523 23.5523 27.5 23 27.5C22.4477 27.5 22 27.0523 22 26.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M25.5 26.5C25.5 25.9477 25.9477 25.5 26.5 25.5C27.0523 25.5 27.5 25.9477 27.5 26.5C27.5 27.0523 27.0523 27.5 26.5 27.5C25.9477 27.5 25.5 27.0523 25.5 26.5Z' fill='var(--color-text-quaternary)' />
<path d='M29 26.5C29 25.9477 29.4477 25.5 30 25.5C30.5523 25.5 31 25.9477 31 26.5C31 27.0523 30.5523 27.5 30 27.5C29.4477 27.5 29 27.0523 29 26.5Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M1 30C1 29.4477 1.44772 29 2 29C2.55228 29 3 29.4477 3 30C3 30.5523 2.55228 31 2 31C1.44772 31 1 30.5523 1 30Z' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M4.5 30C4.5 29.4477 4.94772 29 5.5 29C6.05228 29 6.5 29.4477 6.5 30C6.5 30.5523 6.05228 31 5.5 31C4.94772 31 4.5 30.5523 4.5 30Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M8 30C8 29.4477 8.44772 29 9 29C9.55228 29 10 29.4477 10 30C10 30.5523 9.55228 31 9 31C8.44772 31 8 30.5523 8 30Z' fill='var(--color-text-quaternary)' />
<path d='M11.5 30C11.5 29.4477 11.9477 29 12.5 29C13.0523 29 13.5 29.4477 13.5 30C13.5 30.5523 13.0523 31 12.5 31C11.9477 31 11.5 30.5523 11.5 30Z' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M15 30C15 29.4477 15.4477 29 16 29C16.5523 29 17 29.4477 17 30C17 30.5523 16.5523 31 16 31C15.4477 31 15 30.5523 15 30Z' fill='var(--color-text-quaternary)' />
<path d='M18.5 30C18.5 29.4477 18.9477 29 19.5 29C20.0523 29 20.5 29.4477 20.5 30C20.5 30.5523 20.0523 31 19.5 31C18.9477 31 18.5 30.5523 18.5 30Z' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M22 30C22 29.4477 22.4477 29 23 29C23.5523 29 24 29.4477 24 30C24 30.5523 23.5523 31 23 31C22.4477 31 22 30.5523 22 30Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M25.5 30C25.5 29.4477 25.9477 29 26.5 29C27.0523 29 27.5 29.4477 27.5 30C27.5 30.5523 27.0523 31 26.5 31C25.9477 31 25.5 30.5523 25.5 30Z' fill='var(--color-text-quaternary)' />
<path d='M29 30C29 29.4477 29.4477 29 30 29C30.5523 29 31 29.4477 31 30C31 30.5523 30.5523 31 30 31C29.4477 31 29 30.5523 29 30Z' fill='var(--color-saas-dify-blue-inverted)' />
</svg>
)
}
export default Enterprise

4
web/app/components/billing/plan/assets/index.tsx Normal file
View File

@@ -0,0 +1,4 @@
export { default as Sandbox } from './sandbox'
export { default as Professional } from './professional'
export { default as Team } from './team'
export { default as Enterprise } from './enterprise'

89
web/app/components/billing/plan/assets/professional.tsx Normal file
View File

@@ -0,0 +1,89 @@
const Professional = () => {
return (
<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'>
<rect opacity='0.18' x='4.5' y='1' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='8' y='1' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect x='11.5' y='1' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect x='15' y='1' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect x='18.5' y='1' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect opacity='0.18' x='22' y='1' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='25.5' y='1' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='29' y='1' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='1' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect x='4.5' y='4.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect x='8' y='4.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect opacity='0.18' x='11.5' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='15' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='18.5' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect x='22' y='4.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect x='25.5' y='4.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect opacity='0.18' x='29' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='1' y='8' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='8' y='8' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='11.5' y='8' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='15' y='8' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='18.5' y='8' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='22' y='8' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect x='25.5' y='8' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect opacity='0.18' x='29' y='8' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect x='1' y='11.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect opacity='0.18' x='8' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='11.5' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='15' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='18.5' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='22' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='25.5' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='4.5' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='8' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='11.5' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='15' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='18.5' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='22' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='25.5' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect x='29' y='15' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect x='1' y='18.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect opacity='0.18' x='4.5' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='8' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='11.5' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='15' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='18.5' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='22' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='25.5' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect x='29' y='18.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect opacity='0.18' x='1' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect x='4.5' y='22' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect opacity='0.18' x='8' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='11.5' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='15' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='18.5' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='22' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect x='25.5' y='22' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect opacity='0.18' x='29' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='1' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect x='4.5' y='25.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect x='8' y='25.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect opacity='0.18' x='11.5' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='15' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='18.5' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect x='22' y='25.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect x='25.5' y='25.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect opacity='0.18' x='29' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='1' y='29' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='4.5' y='29' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='8' y='29' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect x='11.5' y='29' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect x='15' y='29' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect x='18.5' y='29' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect opacity='0.18' x='22' y='29' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='25.5' y='29' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='29' y='29' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='1' y='1' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect x='1' y='15' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect opacity='0.18' x='4.5' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect x='29' y='11.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect x='4.5' y='8' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
</svg>
)
}
export default Professional

91
web/app/components/billing/plan/assets/sandbox.tsx Normal file
View File

@@ -0,0 +1,91 @@
import React from 'react'
const Sandbox = () => {
return (
<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'>
<rect opacity='0.18' x='1' y='1' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='4.5' y='1' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<path d='M8 2C8 1.44772 8.44772 1 9 1C9.55228 1 10 1.44772 10 2C10 2.55228 9.55228 3 9 3C8.44772 3 8 2.55228 8 2Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M11.5 2C11.5 1.44772 11.9477 1 12.5 1C13.0523 1 13.5 1.44772 13.5 2C13.5 2.55228 13.0523 3 12.5 3C11.9477 3 11.5 2.55228 11.5 2Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M15 2C15 1.44772 15.4477 1 16 1C16.5523 1 17 1.44772 17 2C17 2.55228 16.5523 3 16 3C15.4477 3 15 2.55228 15 2Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M18.5 2C18.5 1.44772 18.9477 1 19.5 1C20.0523 1 20.5 1.44772 20.5 2C20.5 2.55228 20.0523 3 19.5 3C18.9477 3 18.5 2.55228 18.5 2Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M22 2C22 1.44772 22.4477 1 23 1C23.5523 1 24 1.44772 24 2C24 2.55228 23.5523 3 23 3C22.4477 3 22 2.55228 22 2Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M25.5 2C25.5 1.44772 25.9477 1 26.5 1C27.0523 1 27.5 1.44772 27.5 2C27.5 2.55228 27.0523 3 26.5 3C25.9477 3 25.5 2.55228 25.5 2Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M29 2C29 1.44772 29.4477 1 30 1C30.5523 1 31 1.44772 31 2C31 2.55228 30.5523 3 30 3C29.4477 3 29 2.55228 29 2Z' fill='var(--color-saas-dify-blue-inverted)' />
<rect opacity='0.18' x='1' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<path d='M4.5 5.5C4.5 4.94772 4.94772 4.5 5.5 4.5C6.05228 4.5 6.5 4.94772 6.5 5.5C6.5 6.05228 6.05228 6.5 5.5 6.5C4.94772 6.5 4.5 6.05228 4.5 5.5Z' fill='var(--color-saas-dify-blue-inverted)' />
<rect opacity='0.18' x='8' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='11.5' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='15' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='18.5' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='22' y='4.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<path d='M25.5 5.5C25.5 4.94772 25.9477 4.5 26.5 4.5C27.0523 4.5 27.5 4.94772 27.5 5.5C27.5 6.05228 27.0523 6.5 26.5 6.5C25.9477 6.5 25.5 6.05228 25.5 5.5Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M29 5.5C29 4.94772 29.4477 4.5 30 4.5C30.5523 4.5 31 4.94772 31 5.5C31 6.05228 30.5523 6.5 30 6.5C29.4477 6.5 29 6.05228 29 5.5Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M1 9C1 8.44772 1.44772 8 2 8C2.55228 8 3 8.44772 3 9C3 9.55228 2.55228 10 2 10C1.44772 10 1 9.55228 1 9Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M4.5 9C4.5 8.44772 4.94772 8 5.5 8C6.05228 8 6.5 8.44772 6.5 9C6.5 9.55228 6.05228 10 5.5 10C4.94772 10 4.5 9.55228 4.5 9Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M8 9C8 8.44772 8.44772 8 9 8C9.55228 8 10 8.44772 10 9C10 9.55228 9.55228 10 9 10C8.44772 10 8 9.55228 8 9Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M11.5 9C11.5 8.44772 11.9477 8 12.5 8C13.0523 8 13.5 8.44772 13.5 9C13.5 9.55228 13.0523 10 12.5 10C11.9477 10 11.5 9.55228 11.5 9Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M15 9C15 8.44772 15.4477 8 16 8C16.5523 8 17 8.44772 17 9C17 9.55228 16.5523 10 16 10C15.4477 10 15 9.55228 15 9Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M18.5 9C18.5 8.44772 18.9477 8 19.5 8C20.0523 8 20.5 8.44772 20.5 9C20.5 9.55228 20.0523 10 19.5 10C18.9477 10 18.5 9.55228 18.5 9Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M22 9C22 8.44772 22.4477 8 23 8C23.5523 8 24 8.44772 24 9C24 9.55228 23.5523 10 23 10C22.4477 10 22 9.55228 22 9Z' fill='var(--color-saas-dify-blue-inverted)' />
<rect opacity='0.18' x='25.5' y='8' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<path d='M29 9C29 8.44772 29.4477 8 30 8C30.5523 8 31 8.44772 31 9C31 9.55228 30.5523 10 30 10C29.4477 10 29 9.55228 29 9Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M1 12.5C1 11.9477 1.44772 11.5 2 11.5C2.55228 11.5 3 11.9477 3 12.5C3 13.0523 2.55228 13.5 2 13.5C1.44772 13.5 1 13.0523 1 12.5Z' fill='var(--color-saas-dify-blue-inverted)' />
<rect opacity='0.18' x='4.5' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='8' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='11.5' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='15' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='18.5' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<path d='M22 12.5C22 11.9477 22.4477 11.5 23 11.5C23.5523 11.5 24 11.9477 24 12.5C24 13.0523 23.5523 13.5 23 13.5C22.4477 13.5 22 13.0523 22 12.5Z' fill='var(--color-saas-dify-blue-inverted)' />
<rect opacity='0.18' x='25.5' y='11.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<path d='M29 12.5C29 11.9477 29.4477 11.5 30 11.5C30.5523 11.5 31 11.9477 31 12.5C31 13.0523 30.5523 13.5 30 13.5C29.4477 13.5 29 13.0523 29 12.5Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M1 16C1 15.4477 1.44772 15 2 15C2.55228 15 3 15.4477 3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16Z' fill='var(--color-saas-dify-blue-inverted)' />
<rect opacity='0.18' x='4.5' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='8' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='11.5' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='15' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='18.5' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<path d='M22 16C22 15.4477 22.4477 15 23 15C23.5523 15 24 15.4477 24 16C24 16.5523 23.5523 17 23 17C22.4477 17 22 16.5523 22 16Z' fill='var(--color-saas-dify-blue-inverted)' />
<rect opacity='0.18' x='25.5' y='15' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<path d='M29 16C29 15.4477 29.4477 15 30 15C30.5523 15 31 15.4477 31 16C31 16.5523 30.5523 17 30 17C29.4477 17 29 16.5523 29 16Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M1 19.5C1 18.9477 1.44772 18.5 2 18.5C2.55228 18.5 3 18.9477 3 19.5C3 20.0523 2.55228 20.5 2 20.5C1.44772 20.5 1 20.0523 1 19.5Z' fill='var(--color-saas-dify-blue-inverted)' />
<rect opacity='0.18' x='4.5' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='8' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='11.5' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='15' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='18.5' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<path d='M22 19.5C22 18.9477 22.4477 18.5 23 18.5C23.5523 18.5 24 18.9477 24 19.5C24 20.0523 23.5523 20.5 23 20.5C22.4477 20.5 22 20.0523 22 19.5Z' fill='var(--color-saas-dify-blue-inverted)' />
<rect opacity='0.18' x='25.5' y='18.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<path d='M29 19.5C29 18.9477 29.4477 18.5 30 18.5C30.5523 18.5 31 18.9477 31 19.5C31 20.0523 30.5523 20.5 30 20.5C29.4477 20.5 29 20.0523 29 19.5Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M1 23C1 22.4477 1.44772 22 2 22C2.55228 22 3 22.4477 3 23C3 23.5523 2.55228 24 2 24C1.44772 24 1 23.5523 1 23Z' fill='var(--color-saas-dify-blue-inverted)' />
<rect opacity='0.18' x='4.5' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='8' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='11.5' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='15' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='18.5' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<path d='M22 23C22 22.4477 22.4477 22 23 22C23.5523 22 24 22.4477 24 23C24 23.5523 23.5523 24 23 24C22.4477 24 22 23.5523 22 23Z' fill='var(--color-saas-dify-blue-inverted)' />
<rect opacity='0.18' x='25.5' y='22' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<path d='M29 23C29 22.4477 29.4477 22 30 22C30.5523 22 31 22.4477 31 23C31 23.5523 30.5523 24 30 24C29.4477 24 29 23.5523 29 23Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M1 26.5C1 25.9477 1.44772 25.5 2 25.5C2.55228 25.5 3 25.9477 3 26.5C3 27.0523 2.55228 27.5 2 27.5C1.44772 27.5 1 27.0523 1 26.5Z' fill='var(--color-saas-dify-blue-inverted)' />
<rect opacity='0.18' x='4.5' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='8' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='11.5' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='15' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='18.5' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<path d='M22 26.5C22 25.9477 22.4477 25.5 23 25.5C23.5523 25.5 24 25.9477 24 26.5C24 27.0523 23.5523 27.5 23 27.5C22.4477 27.5 22 27.0523 22 26.5Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M25.5 26.5C25.5 25.9477 25.9477 25.5 26.5 25.5C27.0523 25.5 27.5 25.9477 27.5 26.5C27.5 27.0523 27.0523 27.5 26.5 27.5C25.9477 27.5 25.5 27.0523 25.5 26.5Z' fill='var(--color-saas-dify-blue-inverted)' />
<rect opacity='0.18' x='29' y='25.5' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<path d='M1 30C1 29.4477 1.44772 29 2 29C2.55228 29 3 29.4477 3 30C3 30.5523 2.55228 31 2 31C1.44772 31 1 30.5523 1 30Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M4.5 30C4.5 29.4477 4.94772 29 5.5 29C6.05228 29 6.5 29.4477 6.5 30C6.5 30.5523 6.05228 31 5.5 31C4.94772 31 4.5 30.5523 4.5 30Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M8 30C8 29.4477 8.44772 29 9 29C9.55228 29 10 29.4477 10 30C10 30.5523 9.55228 31 9 31C8.44772 31 8 30.5523 8 30Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M11.5 30C11.5 29.4477 11.9477 29 12.5 29C13.0523 29 13.5 29.4477 13.5 30C13.5 30.5523 13.0523 31 12.5 31C11.9477 31 11.5 30.5523 11.5 30Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M15 30C15 29.4477 15.4477 29 16 29C16.5523 29 17 29.4477 17 30C17 30.5523 16.5523 31 16 31C15.4477 31 15 30.5523 15 30Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M18.5 30C18.5 29.4477 18.9477 29 19.5 29C20.0523 29 20.5 29.4477 20.5 30C20.5 30.5523 20.0523 31 19.5 31C18.9477 31 18.5 30.5523 18.5 30Z' fill='var(--color-saas-dify-blue-inverted)' />
<path d='M22 30C22 29.4477 22.4477 29 23 29C23.5523 29 24 29.4477 24 30C24 30.5523 23.5523 31 23 31C22.4477 31 22 30.5523 22 30Z' fill='var(--color-saas-dify-blue-inverted)' />
<rect opacity='0.18' x='25.5' y='29' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
<rect opacity='0.18' x='29' y='29' width='2' height='2' rx='1' fill='var(--color-text-quaternary)' />
</svg>
)
}
export default React.memo(Sandbox)

89
web/app/components/billing/plan/assets/team.tsx Normal file
View File

@@ -0,0 +1,89 @@
const Team = () => {
return (
<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32' fill='none'>
<rect x='1' y='1' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect x='4.5' y='1' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect x='8' y='1' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M11.5 2C11.5 1.44772 11.9477 1 12.5 1C13.0523 1 13.5 1.44772 13.5 2C13.5 2.55228 13.0523 3 12.5 3C11.9477 3 11.5 2.55228 11.5 2Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M15 2C15 1.44772 15.4477 1 16 1C16.5523 1 17 1.44772 17 2C17 2.55228 16.5523 3 16 3C15.4477 3 15 2.55228 15 2Z' fill='var(--color-text-quaternary)' />
<rect x='18.5' y='1' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M22 2C22 1.44772 22.4477 1 23 1C23.5523 1 24 1.44772 24 2C24 2.55228 23.5523 3 23 3C22.4477 3 22 2.55228 22 2Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M25.5 2C25.5 1.44772 25.9477 1 26.5 1C27.0523 1 27.5 1.44772 27.5 2C27.5 2.55228 27.0523 3 26.5 3C25.9477 3 25.5 2.55228 25.5 2Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M29 2C29 1.44772 29.4477 1 30 1C30.5523 1 31 1.44772 31 2C31 2.55228 30.5523 3 30 3C29.4477 3 29 2.55228 29 2Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M1 5.5C1 4.94772 1.44772 4.5 2 4.5C2.55228 4.5 3 4.94772 3 5.5C3 6.05228 2.55228 6.5 2 6.5C1.44772 6.5 1 6.05228 1 5.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M4.5 5.5C4.5 4.94772 4.94772 4.5 5.5 4.5C6.05228 4.5 6.5 4.94772 6.5 5.5C6.5 6.05228 6.05228 6.5 5.5 6.5C4.94772 6.5 4.5 6.05228 4.5 5.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M8 5.5C8 4.94772 8.44772 4.5 9 4.5C9.55228 4.5 10 4.94772 10 5.5C10 6.05228 9.55228 6.5 9 6.5C8.44772 6.5 8 6.05228 8 5.5Z' fill='var(--color-text-quaternary)' />
<rect x='11.5' y='4.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect x='15' y='4.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M18.5 5.5C18.5 4.94772 18.9477 4.5 19.5 4.5C20.0523 4.5 20.5 4.94772 20.5 5.5C20.5 6.05228 20.0523 6.5 19.5 6.5C18.9477 6.5 18.5 6.05228 18.5 5.5Z' fill='var(--color-text-quaternary)' />
<rect x='22' y='4.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect x='25.5' y='4.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M29 5.5C29 4.94772 29.4477 4.5 30 4.5C30.5523 4.5 31 4.94772 31 5.5C31 6.05228 30.5523 6.5 30 6.5C29.4477 6.5 29 6.05228 29 5.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M1 9C1 8.44772 1.44772 8 2 8C2.55228 8 3 8.44772 3 9C3 9.55228 2.55228 10 2 10C1.44772 10 1 9.55228 1 9Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M4.5 9C4.5 8.44772 4.94772 8 5.5 8C6.05228 8 6.5 8.44772 6.5 9C6.5 9.55228 6.05228 10 5.5 10C4.94772 10 4.5 9.55228 4.5 9Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M8 9C8 8.44772 8.44772 8 9 8C9.55228 8 10 8.44772 10 9C10 9.55228 9.55228 10 9 10C8.44772 10 8 9.55228 8 9Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M11.5 9C11.5 8.44772 11.9477 8 12.5 8C13.0523 8 13.5 8.44772 13.5 9C13.5 9.55228 13.0523 10 12.5 10C11.9477 10 11.5 9.55228 11.5 9Z' fill='var(--color-text-quaternary)' />
<rect x='15' y='8' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M18.5 9C18.5 8.44772 18.9477 8 19.5 8C20.0523 8 20.5 8.44772 20.5 9C20.5 9.55228 20.0523 10 19.5 10C18.9477 10 18.5 9.55228 18.5 9Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M22 9C22 8.44772 22.4477 8 23 8C23.5523 8 24 8.44772 24 9C24 9.55228 23.5523 10 23 10C22.4477 10 22 9.55228 22 9Z' fill='var(--color-text-quaternary)' />
<rect x='25.5' y='8' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M29 9C29 8.44772 29.4477 8 30 8C30.5523 8 31 8.44772 31 9C31 9.55228 30.5523 10 30 10C29.4477 10 29 9.55228 29 9Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M1 12.5C1 11.9477 1.44772 11.5 2 11.5C2.55228 11.5 3 11.9477 3 12.5C3 13.0523 2.55228 13.5 2 13.5C1.44772 13.5 1 13.0523 1 12.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M4.5 12.5C4.5 11.9477 4.94772 11.5 5.5 11.5C6.05228 11.5 6.5 11.9477 6.5 12.5C6.5 13.0523 6.05228 13.5 5.5 13.5C4.94772 13.5 4.5 13.0523 4.5 12.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M8 12.5C8 11.9477 8.44772 11.5 9 11.5C9.55228 11.5 10 11.9477 10 12.5C10 13.0523 9.55228 13.5 9 13.5C8.44772 13.5 8 13.0523 8 12.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M11.5 12.5C11.5 11.9477 11.9477 11.5 12.5 11.5C13.0523 11.5 13.5 11.9477 13.5 12.5C13.5 13.0523 13.0523 13.5 12.5 13.5C11.9477 13.5 11.5 13.0523 11.5 12.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M15 12.5C15 11.9477 15.4477 11.5 16 11.5C16.5523 11.5 17 11.9477 17 12.5C17 13.0523 16.5523 13.5 16 13.5C15.4477 13.5 15 13.0523 15 12.5Z' fill='var(--color-text-quaternary)' />
<rect x='18.5' y='11.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M22 12.5C22 11.9477 22.4477 11.5 23 11.5C23.5523 11.5 24 11.9477 24 12.5C24 13.0523 23.5523 13.5 23 13.5C22.4477 13.5 22 13.0523 22 12.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M25.5 12.5C25.5 11.9477 25.9477 11.5 26.5 11.5C27.0523 11.5 27.5 11.9477 27.5 12.5C27.5 13.0523 27.0523 13.5 26.5 13.5C25.9477 13.5 25.5 13.0523 25.5 12.5Z' fill='var(--color-text-quaternary)' />
<rect x='29' y='11.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M1 16C1 15.4477 1.44772 15 2 15C2.55228 15 3 15.4477 3 16C3 16.5523 2.55228 17 2 17C1.44772 17 1 16.5523 1 16Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M4.5 16C4.5 15.4477 4.94772 15 5.5 15C6.05228 15 6.5 15.4477 6.5 16C6.5 16.5523 6.05228 17 5.5 17C4.94772 17 4.5 16.5523 4.5 16Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M8 16C8 15.4477 8.44772 15 9 15C9.55228 15 10 15.4477 10 16C10 16.5523 9.55228 17 9 17C8.44772 17 8 16.5523 8 16Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M11.5 16C11.5 15.4477 11.9477 15 12.5 15C13.0523 15 13.5 15.4477 13.5 16C13.5 16.5523 13.0523 17 12.5 17C11.9477 17 11.5 16.5523 11.5 16Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M15 16C15 15.4477 15.4477 15 16 15C16.5523 15 17 15.4477 17 16C17 16.5523 16.5523 17 16 17C15.4477 17 15 16.5523 15 16Z' fill='var(--color-text-quaternary)' />
<rect x='18.5' y='15' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M22 16C22 15.4477 22.4477 15 23 15C23.5523 15 24 15.4477 24 16C24 16.5523 23.5523 17 23 17C22.4477 17 22 16.5523 22 16Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M25.5 16C25.5 15.4477 25.9477 15 26.5 15C27.0523 15 27.5 15.4477 27.5 16C27.5 16.5523 27.0523 17 26.5 17C25.9477 17 25.5 16.5523 25.5 16Z' fill='var(--color-text-quaternary)' />
<rect x='29' y='15' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M1 19.5C1 18.9477 1.44772 18.5 2 18.5C2.55228 18.5 3 18.9477 3 19.5C3 20.0523 2.55228 20.5 2 20.5C1.44772 20.5 1 20.0523 1 19.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M4.5 19.5C4.5 18.9477 4.94772 18.5 5.5 18.5C6.05228 18.5 6.5 18.9477 6.5 19.5C6.5 20.0523 6.05228 20.5 5.5 20.5C4.94772 20.5 4.5 20.0523 4.5 19.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M8 19.5C8 18.9477 8.44772 18.5 9 18.5C9.55228 18.5 10 18.9477 10 19.5C10 20.0523 9.55228 20.5 9 20.5C8.44772 20.5 8 20.0523 8 19.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M11.5 19.5C11.5 18.9477 11.9477 18.5 12.5 18.5C13.0523 18.5 13.5 18.9477 13.5 19.5C13.5 20.0523 13.0523 20.5 12.5 20.5C11.9477 20.5 11.5 20.0523 11.5 19.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M15 19.5C15 18.9477 15.4477 18.5 16 18.5C16.5523 18.5 17 18.9477 17 19.5C17 20.0523 16.5523 20.5 16 20.5C15.4477 20.5 15 20.0523 15 19.5Z' fill='var(--color-text-quaternary)' />
<rect x='18.5' y='18.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M22 19.5C22 18.9477 22.4477 18.5 23 18.5C23.5523 18.5 24 18.9477 24 19.5C24 20.0523 23.5523 20.5 23 20.5C22.4477 20.5 22 20.0523 22 19.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M25.5 19.5C25.5 18.9477 25.9477 18.5 26.5 18.5C27.0523 18.5 27.5 18.9477 27.5 19.5C27.5 20.0523 27.0523 20.5 26.5 20.5C25.9477 20.5 25.5 20.0523 25.5 19.5Z' fill='var(--color-text-quaternary)' />
<rect x='29' y='18.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M1 23C1 22.4477 1.44772 22 2 22C2.55228 22 3 22.4477 3 23C3 23.5523 2.55228 24 2 24C1.44772 24 1 23.5523 1 23Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M4.5 23C4.5 22.4477 4.94772 22 5.5 22C6.05228 22 6.5 22.4477 6.5 23C6.5 23.5523 6.05228 24 5.5 24C4.94772 24 4.5 23.5523 4.5 23Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M8 23C8 22.4477 8.44772 22 9 22C9.55228 22 10 22.4477 10 23C10 23.5523 9.55228 24 9 24C8.44772 24 8 23.5523 8 23Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M11.5 23C11.5 22.4477 11.9477 22 12.5 22C13.0523 22 13.5 22.4477 13.5 23C13.5 23.5523 13.0523 24 12.5 24C11.9477 24 11.5 23.5523 11.5 23Z' fill='var(--color-text-quaternary)' />
<rect x='15' y='22' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M18.5 23C18.5 22.4477 18.9477 22 19.5 22C20.0523 22 20.5 22.4477 20.5 23C20.5 23.5523 20.0523 24 19.5 24C18.9477 24 18.5 23.5523 18.5 23Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M22 23C22 22.4477 22.4477 22 23 22C23.5523 22 24 22.4477 24 23C24 23.5523 23.5523 24 23 24C22.4477 24 22 23.5523 22 23Z' fill='var(--color-text-quaternary)' />
<rect x='25.5' y='22' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M29 23C29 22.4477 29.4477 22 30 22C30.5523 22 31 22.4477 31 23C31 23.5523 30.5523 24 30 24C29.4477 24 29 23.5523 29 23Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M1 26.5C1 25.9477 1.44772 25.5 2 25.5C2.55228 25.5 3 25.9477 3 26.5C3 27.0523 2.55228 27.5 2 27.5C1.44772 27.5 1 27.0523 1 26.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M4.5 26.5C4.5 25.9477 4.94772 25.5 5.5 25.5C6.05228 25.5 6.5 25.9477 6.5 26.5C6.5 27.0523 6.05228 27.5 5.5 27.5C4.94772 27.5 4.5 27.0523 4.5 26.5Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M8 26.5C8 25.9477 8.44772 25.5 9 25.5C9.55228 25.5 10 25.9477 10 26.5C10 27.0523 9.55228 27.5 9 27.5C8.44772 27.5 8 27.0523 8 26.5Z' fill='var(--color-text-quaternary)' />
<rect x='11.5' y='25.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect x='15' y='25.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M18.5 26.5C18.5 25.9477 18.9477 25.5 19.5 25.5C20.0523 25.5 20.5 25.9477 20.5 26.5C20.5 27.0523 20.0523 27.5 19.5 27.5C18.9477 27.5 18.5 27.0523 18.5 26.5Z' fill='var(--color-text-quaternary)' />
<rect x='22' y='25.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect x='25.5' y='25.5' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M29 26.5C29 25.9477 29.4477 25.5 30 25.5C30.5523 25.5 31 25.9477 31 26.5C31 27.0523 30.5523 27.5 30 27.5C29.4477 27.5 29 27.0523 29 26.5Z' fill='var(--color-text-quaternary)' />
<rect x='1' y='29' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect x='4.5' y='29' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<rect x='8' y='29' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M11.5 30C11.5 29.4477 11.9477 29 12.5 29C13.0523 29 13.5 29.4477 13.5 30C13.5 30.5523 13.0523 31 12.5 31C11.9477 31 11.5 30.5523 11.5 30Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M15 30C15 29.4477 15.4477 29 16 29C16.5523 29 17 29.4477 17 30C17 30.5523 16.5523 31 16 31C15.4477 31 15 30.5523 15 30Z' fill='var(--color-text-quaternary)' />
<rect x='18.5' y='29' width='2' height='2' rx='1' fill='var(--color-saas-dify-blue-inverted)' />
<path opacity='0.18' d='M22 30C22 29.4477 22.4477 29 23 29C23.5523 29 24 29.4477 24 30C24 30.5523 23.5523 31 23 31C22.4477 31 22 30.5523 22 30Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M25.5 30C25.5 29.4477 25.9477 29 26.5 29C27.0523 29 27.5 29.4477 27.5 30C27.5 30.5523 27.0523 31 26.5 31C25.9477 31 25.5 30.5523 25.5 30Z' fill='var(--color-text-quaternary)' />
<path opacity='0.18' d='M29 30C29 29.4477 29.4477 29 30 29C30.5523 29 31 29.4477 31 30C31 30.5523 30.5523 31 30 31C29.4477 31 29 30.5523 29 30Z' fill='var(--color-text-quaternary)' />
</svg>
)
}
export default Team

16
web/app/components/billing/plan/index.tsx
View File

@@ -5,12 +5,9 @@ import { useTranslation } from 'react-i18next'
import { useRouter } from 'next/navigation'
import {
RiBook2Line,
RiBox3Line,
RiFileEditLine,
RiGraduationCapLine,
RiGroup3Line,
RiGroupLine,
RiSquareLine,
} from '@remixicon/react'
import { Plan, SelfHostedPlan } from '../type'
import VectorSpaceInfo from '../usage-info/vector-space-info'
@@ -24,6 +21,7 @@ import VerifyStateModal from '@/app/education-apply/verify-state-modal'
import { EDUCATION_VERIFYING_LOCALSTORAGE_ITEM } from '@/app/education-apply/constants'
import { useEducationVerify } from '@/service/use-education'
import { useModalContextSelector } from '@/context/modal-context'
import { Enterprise, Professional, Sandbox, Team } from './assets'
type Props = {
loc: string
@@ -59,19 +57,19 @@ const PlanComp: FC<Props> = ({
})
}
return (
<div className='rounded-2xl border-[0.5px] border-effects-highlight-lightmode-off bg-background-section-burn'>
<div className='relative rounded-2xl border-[0.5px] border-effects-highlight-lightmode-off bg-background-section-burn'>
<div className='p-6 pb-2'>
{plan.type === Plan.sandbox && (
<RiBox3Line className='h-7 w-7 text-text-primary'/>
<Sandbox />
)}
{plan.type === Plan.professional && (
<RiSquareLine className='h-7 w-7 rotate-90 text-util-colors-blue-brand-blue-brand-600'/>
<Professional />
)}
{plan.type === Plan.team && (
<RiGroup3Line className='h-7 w-7 text-util-colors-indigo-indigo-600'/>
<Team />
)}
{(plan.type as any) === SelfHostedPlan.enterprise && (
<RiGroup3Line className='h-7 w-7 text-util-colors-indigo-indigo-600'/>
<Enterprise />
)}
<div className='mt-1 flex items-center'>
<div className='grow'>
@@ -84,7 +82,7 @@ const PlanComp: FC<Props> = ({
<div className='flex shrink-0 items-center gap-1'>
{enableEducationPlan && (!isEducationAccount || isAboutToExpire) && (
<Button variant='ghost' onClick={handleVerify}>
<RiGraduationCapLine className='mr-1 h-4 w-4'/>
<RiGraduationCapLine className='mr-1 h-4 w-4' />
{t('education.toVerified')}
</Button>
)}

32
web/app/components/billing/pricing/assets/cloud.tsx Normal file
View 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
web/app/components/billing/pricing/assets/community.tsx Normal file
View 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

22
web/app/components/billing/pricing/assets/enterprise-noise.tsx Normal file
View File

@@ -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

96
web/app/components/billing/pricing/assets/enterprise.tsx Normal file
View File

@@ -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
web/app/components/billing/pricing/assets/index.tsx Normal file
View 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'

22
web/app/components/billing/pricing/assets/noise-bottom.tsx Normal file
View File

@@ -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
web/app/components/billing/pricing/assets/noise-top.tsx Normal file
View 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

22
web/app/components/billing/pricing/assets/premium-noise.tsx Normal file
View File

@@ -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
web/app/components/billing/pricing/assets/premium.tsx Normal file
View 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

96
web/app/components/billing/pricing/assets/professional.tsx Normal file
View File

@@ -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
web/app/components/billing/pricing/assets/sandbox.tsx Normal file
View 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

32
web/app/components/billing/pricing/assets/self-hosted.tsx Normal file
View File

@@ -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
web/app/components/billing/pricing/assets/team.tsx Normal file
View 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

33
web/app/components/billing/pricing/footer.tsx Normal file
View File

@@ -0,0 +1,33 @@
import React from 'react'
import Link from 'next/link'
import { useTranslation } from 'react-i18next'
import { RiArrowRightUpLine } from '@remixicon/react'
type FooterProps = {
pricingPageURL: string
}
const Footer = ({
pricingPageURL,
}: FooterProps) => {
const { t } = useTranslation()
return (
<div className='flex min-h-16 w-full justify-center border-t border-divider-accent px-10'>
<div className='flex max-w-[1680px] grow justify-end border-x border-divider-accent p-6'>
<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
web/app/components/billing/pricing/header.tsx Normal file
View 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)

149
web/app/components/billing/pricing/index.tsx
View File

@@ -1,36 +1,32 @@
'use client'
import type { FC } from 'react'
import React from 'react'
import React, { useState } from 'react'
import { createPortal } from 'react-dom'
import { useTranslation } from 'react-i18next'
import { RiArrowRightUpLine, RiCloseLine, RiCloudFill, RiTerminalBoxFill } from '@remixicon/react'
import Link from 'next/link'
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 { Plan, SelfHostedPlan } from '../type'
import TabSlider from '../../base/tab-slider'
import SelectPlanRange, { PlanRange } from './select-plan-range'
import PlanItem from './plan-item'
import SelfHostedPlanItem from './self-hosted-plan-item'
import { useProviderContext } from '@/context/provider-context'
import GridMask from '@/app/components/base/grid-mask'
import { useAppContext } from '@/context/app-context'
import classNames from '@/utils/classnames'
import { useGetPricingPageLanguage } from '@/context/i18n'
import { NoiseBottom, NoiseTop } from './assets'
type Props = {
export type Category = 'cloud' | 'self'
type PricingProps = {
onCancel: () => void
}
const Pricing: FC<Props> = ({
const Pricing: FC<PricingProps> = ({
onCancel,
}) => {
const { t } = useTranslation()
const { plan } = useProviderContext()
const { isCurrentWorkspaceManager } = useAppContext()
const canPay = isCurrentWorkspaceManager
const [planRange, setPlanRange] = React.useState<PlanRange>(PlanRange.monthly)
const [currentPlan, setCurrentPlan] = React.useState<string>('cloud')
const [currentCategory, setCurrentCategory] = useState<Category>('cloud')
const canPay = isCurrentWorkspaceManager
useKeyPress(['esc'], onCancel)
@@ -41,105 +37,32 @@ const Pricing: FC<Props> = ({
return createPortal(
<div
className='fixed inset-0 bottom-0 left-0 right-0 top-0 z-[1000] bg-background-overlay-backdrop p-4 backdrop-blur-[6px]'
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 h-full w-full overflow-auto rounded-2xl border border-effects-highlight bg-saas-background'>
<div
className='fixed right-7 top-7 z-[1001] flex h-9 w-9 cursor-pointer items-center justify-center rounded-[10px] bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover'
onClick={onCancel}
>
<RiCloseLine className='size-5 text-components-button-tertiary-text' />
<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>
<GridMask wrapperClassName='w-full min-h-full' canvasClassName='min-h-full'>
<div className='flex flex-col items-center px-8 pb-7 pt-12'>
<div className='title-5xl-bold mb-2 text-text-primary'>
{t('billing.plansCommon.title')}
</div>
<div className='system-sm-regular text-text-secondary'>
<span>{t('billing.plansCommon.freeTrialTipPrefix')}</span>
<span className='text-gradient font-semibold'>{t('billing.plansCommon.freeTrialTip')}</span>
<span>{t('billing.plansCommon.freeTrialTipSuffix')}</span>
</div>
</div>
<div className='mx-auto w-[1152px]'>
<div className='flex h-[64px] items-center justify-between py-2'>
<TabSlider
value={currentPlan}
className='inline-flex'
options={[
{
value: 'cloud',
text: <div className={
classNames('system-md-semibold-uppercase inline-flex items-center text-text-secondary',
currentPlan === 'cloud' && 'text-text-accent-light-mode-only')} >
<RiCloudFill className='mr-2 size-4' />{t('billing.plansCommon.cloud')}</div>,
},
{
value: 'self',
text: <div className={
classNames('system-md-semibold-uppercase inline-flex items-center text-text-secondary',
currentPlan === 'self' && 'text-text-accent-light-mode-only')}>
<RiTerminalBoxFill className='mr-2 size-4' />{t('billing.plansCommon.self')}</div>,
}]}
onChange={v => setCurrentPlan(v)} />
{currentPlan === 'cloud' && <SelectPlanRange
value={planRange}
onChange={setPlanRange}
/>}
</div>
<div className='pb-8 pt-3'>
<div className='flex flex-nowrap justify-center gap-x-4'>
{currentPlan === 'cloud' && <>
<PlanItem
currentPlan={plan.type}
plan={Plan.sandbox}
planRange={planRange}
canPay={canPay}
/>
<PlanItem
currentPlan={plan.type}
plan={Plan.professional}
planRange={planRange}
canPay={canPay}
/>
<PlanItem
currentPlan={plan.type}
plan={Plan.team}
planRange={planRange}
canPay={canPay}
/>
</>}
{currentPlan === 'self' && <>
<SelfHostedPlanItem
plan={SelfHostedPlan.community}
planRange={planRange}
canPay={canPay}
/>
<SelfHostedPlanItem
plan={SelfHostedPlan.premium}
planRange={planRange}
canPay={canPay}
/>
<SelfHostedPlanItem
plan={SelfHostedPlan.enterprise}
planRange={planRange}
canPay={canPay}
/>
</>}
</div>
</div>
</div>
<div className='flex items-center justify-center py-4'>
<div className='flex items-center justify-center gap-x-0.5 rounded-lg px-3 py-2 text-components-button-secondary-accent-text hover:cursor-pointer hover:bg-state-accent-hover'>
<Link href={pricingPageURL} className='system-sm-medium'>{t('billing.plansCommon.comparePlanAndFeatures')}</Link>
<RiArrowRightUpLine className='size-4' />
</div>
</div>
</GridMask>
</div >
</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} />
<div className='absolute -bottom-12 left-0 right-0 -z-10'>
<NoiseBottom />
</div>
</div>
</div>,
document.body,
)
}

235
web/app/components/billing/pricing/plan-item.tsx
View File

@@ -1,235 +0,0 @@
'use client'
import type { FC, ReactNode } from 'react'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { RiApps2Line, RiBook2Line, RiBrain2Line, RiChatAiLine, RiFileEditLine, RiFolder6Line, RiGroupLine, RiHardDrive3Line, RiHistoryLine, RiProgress3Line, RiQuestionLine, RiSeoLine, RiTerminalBoxLine } from '@remixicon/react'
import type { BasicPlan } from '../type'
import { Plan } from '../type'
import { ALL_PLANS, NUM_INFINITE } from '../config'
import Toast from '../../base/toast'
import Tooltip from '../../base/tooltip'
import Divider from '../../base/divider'
import { ArCube1, Group2, Keyframe, SparklesSoft } from '../../base/icons/src/public/billing'
import { PlanRange } from './select-plan-range'
import cn from '@/utils/classnames'
import { useAppContext } from '@/context/app-context'
import { fetchSubscriptionUrls } from '@/service/billing'
type Props = {
currentPlan: BasicPlan
plan: BasicPlan
planRange: PlanRange
canPay: boolean
}
const KeyValue = ({ icon, label, tooltip }: { icon: ReactNode; label: string; tooltip?: ReactNode }) => {
return (
<div className='flex text-text-tertiary'>
<div className='flex size-4 items-center justify-center'>
{icon}
</div>
<div className='system-sm-regular ml-2 mr-0.5 text-text-primary'>{label}</div>
{tooltip && (
<Tooltip
asChild
popupContent={tooltip}
popupClassName='w-[200px]'
>
<div className='flex size-4 items-center justify-center'>
<RiQuestionLine className='text-text-quaternary' />
</div>
</Tooltip>
)}
</div>
)
}
const priceClassName = 'leading-[125%] text-[28px] font-bold text-text-primary'
const style = {
[Plan.sandbox]: {
icon: <ArCube1 className='size-7 text-text-primary' />,
description: 'text-util-colors-gray-gray-600',
btnStyle: 'bg-components-button-secondary-bg hover:bg-components-button-secondary-bg-hover border-[0.5px] border-components-button-secondary-border text-text-primary',
btnDisabledStyle: 'bg-components-button-secondary-bg-disabled hover:bg-components-button-secondary-bg-disabled border-components-button-secondary-border-disabled text-components-button-secondary-text-disabled',
},
[Plan.professional]: {
icon: <Keyframe className='size-7 text-util-colors-blue-brand-blue-brand-600' />,
description: 'text-util-colors-blue-brand-blue-brand-600',
btnStyle: 'bg-components-button-primary-bg hover:bg-components-button-primary-bg-hover border border-components-button-primary-border text-components-button-primary-text',
btnDisabledStyle: 'bg-components-button-primary-bg-disabled hover:bg-components-button-primary-bg-disabled border-components-button-primary-border-disabled text-components-button-primary-text-disabled',
},
[Plan.team]: {
icon: <Group2 className='size-7 text-util-colors-indigo-indigo-600' />,
description: 'text-util-colors-indigo-indigo-600',
btnStyle: 'bg-components-button-indigo-bg hover:bg-components-button-indigo-bg-hover border border-components-button-primary-border text-components-button-primary-text',
btnDisabledStyle: 'bg-components-button-indigo-bg-disabled hover:bg-components-button-indigo-bg-disabled border-components-button-indigo-border-disabled text-components-button-primary-text-disabled',
},
}
const PlanItem: FC<Props> = ({
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 = (() => {
if (isCurrent)
return t('billing.plansCommon.currentPlan')
return ({
[Plan.sandbox]: t('billing.plansCommon.startForFree'),
[Plan.professional]: t('billing.plansCommon.getStarted'),
[Plan.team]: t('billing.plansCommon.getStarted'),
})[plan]
})()
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={cn('flex w-[373px] flex-col rounded-2xl border-[0.5px] border-effects-highlight-lightmode-off bg-background-section-burn p-6',
isMostPopularPlan ? 'border-effects-highlight shadow-lg backdrop-blur-[5px]' : 'hover:border-effects-highlight hover:shadow-lg hover:backdrop-blur-[5px]',
)}>
<div className='flex flex-col gap-y-1'>
{style[plan].icon}
<div className='flex items-center'>
<div className='grow text-lg font-semibold uppercase leading-[125%] text-text-primary'>{t(`${i18nPrefix}.name`)}</div>
{isMostPopularPlan && <div className='ml-1 flex shrink-0 items-center justify-center rounded-full border-[0.5px] bg-price-premium-badge-background px-1 py-[3px] text-components-premium-badge-grey-text-stop-0 shadow-xs'>
<div className='pl-0.5'>
<SparklesSoft className='size-3' />
</div>
<span className='system-2xs-semibold-uppercase bg-price-premium-text-background bg-clip-text px-0.5 text-transparent'>{t('billing.plansCommon.mostPopular')}</span>
</div>}
</div>
<div className={cn(style[plan].description, 'system-sm-regular')}>{t(`${i18nPrefix}.description`)}</div>
</div>
<div className='my-5'>
{/* Price */}
{isFreePlan && (
<div className={priceClassName}>{t('billing.plansCommon.free')}</div>
)}
{!isFreePlan && (
<div className='flex items-end'>
<div className={priceClassName}>${isYear ? planInfo.price * 10 : planInfo.price}</div>
<div className='ml-1 flex flex-col'>
{isYear && <div className='text-[14px] font-normal italic leading-[14px] text-text-warning'>{t('billing.plansCommon.save')}${planInfo.price * 2}</div>}
<div className='text-[14px] font-normal leading-normal text-text-tertiary'>
{t('billing.plansCommon.priceTip')}
{t(`billing.plansCommon.${!isYear ? 'month' : 'year'}`)}</div>
</div>
</div>
)}
</div>
<div
className={cn('flex h-[42px] items-center justify-center rounded-full px-5 py-3',
style[plan].btnStyle,
isPlanDisabled && style[plan].btnDisabledStyle,
isPlanDisabled ? 'cursor-not-allowed' : 'cursor-pointer')}
onClick={handleGetPayUrl}
>
{btnText}
</div>
<div className='mt-6 flex flex-col gap-y-3'>
<KeyValue
icon={<RiChatAiLine />}
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}
/>
<KeyValue
icon={<RiBrain2Line />}
label={t('billing.plansCommon.modelProviders')}
/>
<KeyValue
icon={<RiFolder6Line />}
label={t('billing.plansCommon.teamWorkspace', { count: planInfo.teamWorkspace })}
/>
<KeyValue
icon={<RiGroupLine />}
label={t('billing.plansCommon.teamMember', { count: planInfo.teamMembers })}
/>
<KeyValue
icon={<RiApps2Line />}
label={t('billing.plansCommon.buildApps', { count: planInfo.buildApps })}
/>
<Divider bgStyle='gradient' />
<KeyValue
icon={<RiBook2Line />}
label={t('billing.plansCommon.documents', { count: planInfo.documents })}
tooltip={t('billing.plansCommon.documentsTooltip') as string}
/>
<KeyValue
icon={<RiHardDrive3Line />}
label={t('billing.plansCommon.vectorSpace', { size: planInfo.vectorSpace })}
tooltip={t('billing.plansCommon.vectorSpaceTooltip') as string}
/>
<KeyValue
icon={<RiSeoLine />}
label={t('billing.plansCommon.documentsRequestQuota', { count: planInfo.documentsRequestQuota })}
tooltip={t('billing.plansCommon.documentsRequestQuotaTooltip')}
/>
<KeyValue
icon={<RiTerminalBoxLine />}
label={
planInfo.apiRateLimit === NUM_INFINITE ? `${t('billing.plansCommon.unlimitedApiRate')}`
: `${t('billing.plansCommon.apiRateLimitUnit', { count: planInfo.apiRateLimit })} ${t('billing.plansCommon.apiRateLimit')}`
}
tooltip={planInfo.apiRateLimit === NUM_INFINITE ? null : t('billing.plansCommon.apiRateLimitTooltip') as string}
/>
<KeyValue
icon={<RiProgress3Line />}
label={[t(`billing.plansCommon.priority.${planInfo.documentProcessingPriority}`), t('billing.plansCommon.documentProcessingPriority')].join('')}
/>
<Divider bgStyle='gradient' />
<KeyValue
icon={<RiFileEditLine />}
label={t('billing.plansCommon.annotatedResponse.title', { count: planInfo.annotatedResponse })}
tooltip={t('billing.plansCommon.annotatedResponse.tooltip') as string}
/>
<KeyValue
icon={<RiHistoryLine />}
label={t('billing.plansCommon.logsHistory', { days: planInfo.logHistory === NUM_INFINITE ? t('billing.plansCommon.unlimited') as string : `${planInfo.logHistory} ${t('billing.plansCommon.days')}` })}
/>
</div>
</div>
)
}
export default React.memo(PlanItem)

67
web/app/components/billing/pricing/plan-switcher/index.tsx Normal file
View File

@@ -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)

38
web/app/components/billing/pricing/plan-switcher/plan-range-switcher.tsx Normal file
View File

@@ -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)

41
web/app/components/billing/pricing/plan-switcher/tab.tsx Normal file
View File

@@ -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

53
web/app/components/billing/pricing/plans/cloud-plan-item/button.tsx Normal file
View File

@@ -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)

133
web/app/components/billing/pricing/plans/cloud-plan-item/index.tsx Normal file
View File

@@ -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)

75
web/app/components/billing/pricing/plans/cloud-plan-item/list/index.tsx Normal file
View File

@@ -0,0 +1,75 @@
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={
planInfo.apiRateLimit === NUM_INFINITE ? `${t('billing.plansCommon.unlimitedApiRate')}`
: `${t('billing.plansCommon.apiRateLimitUnit', { count: planInfo.apiRateLimit })} ${t('billing.plansCommon.apiRateLimit')}`
}
tooltip={planInfo.apiRateLimit === NUM_INFINITE ? undefined : t('billing.plansCommon.apiRateLimitTooltip') as string}
/>
<Item
label={[t(`billing.plansCommon.priority.${planInfo.documentProcessingPriority}`), t('billing.plansCommon.documentProcessingPriority')].join('')}
/>
<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')}` })}
/>
<Divider bgStyle='gradient' />
<Item
label={t('billing.plansCommon.modelProviders')}
/>
</div>
)
}
export default React.memo(List)

25
web/app/components/billing/pricing/plans/cloud-plan-item/list/item/index.tsx Normal file
View File

@@ -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)

23
web/app/components/billing/pricing/plans/cloud-plan-item/list/item/tooltip.tsx Normal file
View File

@@ -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)

73
web/app/components/billing/pricing/plans/index.tsx Normal file
View File

@@ -0,0 +1,73 @@
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: BasicPlan
usage: UsagePlanInfo
total: UsagePlanInfo
}
currentPlan: string
planRange: PlanRange
canPay: boolean
}
const Plans = ({
plan,
currentPlan,
planRange,
canPay,
}: PlansProps) => {
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={plan.type}
plan={Plan.sandbox}
planRange={planRange}
canPay={canPay}
/>
<Divider type='vertical' className='mx-0 shrink-0 bg-divider-accent' />
<CloudPlanItem
currentPlan={plan.type}
plan={Plan.professional}
planRange={planRange}
canPay={canPay}
/>
<Divider type='vertical' className='mx-0 shrink-0 bg-divider-accent' />
<CloudPlanItem
currentPlan={plan.type}
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

55
web/app/components/billing/pricing/plans/self-hosted-plan-item/button.tsx Normal file
View File

@@ -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
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)

124
web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx Normal file
View File

@@ -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)

35
web/app/components/billing/pricing/plans/self-hosted-plan-item/list/index.tsx Normal file
View File

@@ -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)

21
web/app/components/billing/pricing/plans/self-hosted-plan-item/list/item.tsx Normal file
View File

@@ -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)

54
web/app/components/billing/pricing/select-plan-range.tsx
View File

@@ -1,54 +0,0 @@
'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 Props = {
value: PlanRange
onChange: (value: PlanRange) => void
}
const ArrowIcon = (
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="29" viewBox="0 0 22 29" fill="none">
<g clipPath="url(#clip0_394_43518)">
<path d="M2.11312 1.64777C2.11312 1.64777 2.10178 1.64849 2.09045 1.6492C2.06211 1.65099 2.08478 1.64956 2.11312 1.64777ZM9.047 20.493C9.43106 19.9965 8.97268 19.2232 8.35639 19.2848C7.72208 19.4215 6.27243 20.3435 5.13995 20.8814C4.2724 21.3798 3.245 21.6892 2.54015 22.4221C1.87751 23.2831 2.70599 23.9706 3.47833 24.3088C4.73679 24.9578 6.00624 25.6004 7.25975 26.2611C8.4424 26.8807 9.57833 27.5715 10.7355 28.2383C10.9236 28.3345 11.1464 28.3489 11.3469 28.2794C11.9886 28.0796 12.0586 27.1137 11.4432 26.8282C9.83391 25.8485 8.17365 24.9631 6.50314 24.0955C8.93023 24.2384 11.3968 24.1058 13.5161 22.7945C16.6626 20.8097 19.0246 17.5714 20.2615 14.0854C22.0267 8.96164 18.9313 4.08153 13.9897 2.40722C10.5285 1.20289 6.76599 0.996166 3.14837 1.46306C2.50624 1.56611 2.68616 1.53201 2.10178 1.64849C2.12445 1.64706 2.14712 1.64563 2.16979 1.6442C2.01182 1.66553 1.86203 1.72618 1.75582 1.84666C1.48961 2.13654 1.58903 2.63096 1.9412 2.80222C2.19381 2.92854 2.4835 2.83063 2.74986 2.81385C3.7267 2.69541 4.70711 2.63364 5.69109 2.62853C8.30015 2.58932 10.5052 2.82021 13.2684 3.693C21.4149 6.65607 20.7135 14.2162 14.6733 20.0304C12.4961 22.2272 9.31209 22.8944 6.11128 22.4816C5.92391 22.4877 5.72342 22.4662 5.52257 22.439C6.35474 22.011 7.20002 21.6107 8.01305 21.1498C8.35227 20.935 8.81233 20.8321 9.05266 20.4926L9.047 20.493Z" fill="url(#paint0_linear_394_43518)" />
</g>
<defs>
<linearGradient id="paint0_linear_394_43518" x1="11" y1="-48.5001" x2="12.2401" y2="28.2518" gradientUnits="userSpaceOnUse">
<stop stopColor="#FDB022" />
<stop offset="1" stopColor="#F79009" />
</linearGradient>
<clipPath id="clip0_394_43518">
<rect width="19.1928" height="27.3696" fill="white" transform="translate(21.8271 27.6475) rotate(176.395)" />
</clipPath>
</defs>
</svg>
)
const SelectPlanRange: FC<Props> = ({
value,
onChange,
}) => {
const { t } = useTranslation()
return (
<div className='relative flex flex-col items-end pr-6'>
<div className='bg-premium-yearly-tip-text-background bg-clip-text text-sm italic text-transparent'>{t('billing.plansCommon.yearlyTip')}</div>
<div className='flex items-center py-1'>
<span className='mr-2 text-[13px]'>{t('billing.plansCommon.annualBilling')}</span>
<Switch size='l' defaultValue={value === PlanRange.yearly} onChange={(v) => {
onChange(v ? PlanRange.yearly : PlanRange.monthly)
}} />
</div>
<div className='absolute right-0 top-2'>
{ArrowIcon}
</div>
</div>
)
}
export default React.memo(SelectPlanRange)

176
web/app/components/billing/pricing/self-hosted-plan-item.tsx
View File

@@ -1,176 +0,0 @@
'use client'
import type { FC, ReactNode } from 'react'
import React from 'react'
import { useTranslation } from 'react-i18next'
import { RiArrowRightUpLine, RiBrain2Line, RiCheckLine, RiQuestionLine } from '@remixicon/react'
import { SelfHostedPlan } from '../type'
import { contactSalesUrl, getStartedWithCommunityUrl, getWithPremiumUrl } from '../config'
import Toast from '../../base/toast'
import Tooltip from '../../base/tooltip'
import { Asterisk, AwsMarketplace, Azure, Buildings, Diamond, GoogleCloud } from '../../base/icons/src/public/billing'
import type { PlanRange } from './select-plan-range'
import cn from '@/utils/classnames'
import { useAppContext } from '@/context/app-context'
type Props = {
plan: SelfHostedPlan
planRange: PlanRange
canPay: boolean
}
const KeyValue = ({ label, tooltip, textColor, tooltipIconColor }: { icon: ReactNode; label: string; tooltip?: string; textColor: string; tooltipIconColor: string }) => {
return (
<div className={cn('flex', textColor)}>
<div className='flex size-4 items-center justify-center'>
<RiCheckLine />
</div>
<div className={cn('system-sm-regular ml-2 mr-0.5', textColor)}>{label}</div>
{tooltip && (
<Tooltip
asChild
popupContent={tooltip}
popupClassName='w-[200px]'
>
<div className='flex size-4 items-center justify-center'>
<RiQuestionLine className={cn(tooltipIconColor)} />
</div>
</Tooltip>
)}
</div>
)
}
const style = {
[SelfHostedPlan.community]: {
icon: <Asterisk className='size-7 text-text-primary' />,
title: 'text-text-primary',
price: 'text-text-primary',
priceTip: 'text-text-tertiary',
description: 'text-util-colors-gray-gray-600',
bg: 'border-effects-highlight-lightmode-off bg-background-section-burn',
btnStyle: 'bg-components-button-secondary-bg hover:bg-components-button-secondary-bg-hover border-[0.5px] border-components-button-secondary-border text-text-primary',
values: 'text-text-secondary',
tooltipIconColor: 'text-text-tertiary',
},
[SelfHostedPlan.premium]: {
icon: <Diamond className='size-7 text-text-warning' />,
title: 'text-text-primary',
price: 'text-text-primary',
priceTip: 'text-text-tertiary',
description: 'text-text-warning',
bg: 'border-effects-highlight bg-background-section-burn',
btnStyle: 'bg-third-party-aws hover:bg-third-party-aws-hover border border-components-button-primary-border text-text-primary-on-surface shadow-xs',
values: 'text-text-secondary',
tooltipIconColor: 'text-text-tertiary',
},
[SelfHostedPlan.enterprise]: {
icon: <Buildings className='size-7 text-text-primary-on-surface' />,
title: 'text-text-primary-on-surface',
price: 'text-text-primary-on-surface',
priceTip: 'text-text-primary-on-surface',
description: 'text-text-primary-on-surface',
bg: 'border-effects-highlight bg-[#155AEF] text-text-primary-on-surface',
btnStyle: 'bg-white/96 hover:opacity-85 border-[0.5px] border-components-button-secondary-border text-[#155AEF] shadow-xs',
values: 'text-text-primary-on-surface',
tooltipIconColor: 'text-text-primary-on-surface',
},
}
const SelfHostedPlanItem: FC<Props> = ({
plan,
}) => {
const { t } = useTranslation()
const isFreePlan = plan === SelfHostedPlan.community
const isPremiumPlan = plan === SelfHostedPlan.premium
const i18nPrefix = `billing.plans.${plan}`
const isEnterprisePlan = plan === SelfHostedPlan.enterprise
const { isCurrentWorkspaceManager } = useAppContext()
const features = t(`${i18nPrefix}.features`, { returnObjects: true }) as string[]
const handleGetPayUrl = () => {
// 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
}
return (
<div className={cn(`relative flex w-[374px] flex-col overflow-hidden rounded-2xl
border-[0.5px] hover:border-effects-highlight hover:shadow-lg hover:backdrop-blur-[5px]`, style[plan].bg)}>
<div>
<div className={cn(isEnterprisePlan ? 'z-1 absolute bottom-0 left-0 right-0 top-0 bg-price-enterprise-background' : '')} >
</div>
{isEnterprisePlan && <div className='z-15 absolute -left-[90px] -top-[104px] size-[341px] rounded-full bg-[#09328c] opacity-15 mix-blend-plus-darker blur-[80px]'></div>}
{isEnterprisePlan && <div className='z-15 absolute -bottom-[72px] -right-[40px] size-[341px] rounded-full bg-[#e2eafb] opacity-15 mix-blend-plus-darker blur-[80px]'></div>}
</div>
<div className='relative z-10 min-h-[559px] w-full p-6'>
<div className=' flex min-h-[108px] flex-col gap-y-1'>
{style[plan].icon}
<div className='flex items-center'>
<div className={cn('system-md-semibold uppercase leading-[125%]', style[plan].title)}>{t(`${i18nPrefix}.name`)}</div>
</div>
<div className={cn(style[plan].description, 'system-sm-regular')}>{t(`${i18nPrefix}.description`)}</div>
</div>
<div className='my-3'>
<div className='flex items-end'>
<div className={cn('shrink-0 text-[28px] font-bold leading-[125%]', style[plan].price)}>{t(`${i18nPrefix}.price`)}</div>
{!isFreePlan
&& <span className={cn('ml-2 py-1 text-[14px] font-normal leading-normal', style[plan].priceTip)}>
{t(`${i18nPrefix}.priceTip`)}
</span>}
</div>
</div>
<div
className={cn('system-md-semibold flex h-[44px] cursor-pointer items-center justify-center rounded-full px-5 py-3',
style[plan].btnStyle)}
onClick={handleGetPayUrl}
>
{t(`${i18nPrefix}.btnText`)}
{isPremiumPlan
&& <>
<div className='mx-1 pt-[6px]'>
<AwsMarketplace className='h-6' />
</div>
<RiArrowRightUpLine className='size-4' />
</>}
</div>
<div className={cn('system-sm-semibold mb-2 mt-6', style[plan].values)}>{t(`${i18nPrefix}.includesTitle`)}</div>
<div className='flex flex-col gap-y-3'>
{features.map(v =>
<KeyValue key={`${plan}-${v}`}
textColor={style[plan].values}
tooltipIconColor={style[plan].tooltipIconColor}
icon={<RiBrain2Line />}
label={v}
/>)}
</div>
{isPremiumPlan && <div className='mt-[68px]'>
<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'>
<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'>
<GoogleCloud />
</div>
</div>
<span className={cn('system-xs-regular mt-2', style[plan].tooltipIconColor)}>{t('billing.plans.premium.comingSoon')}</span>
</div>}
</div>
</div>
)
}
export default React.memo(SelfHostedPlanItem)

31
web/app/components/billing/priority-label/index.tsx
View File

@@ -6,11 +6,8 @@ import {
} from '../type'
import cn from '@/utils/classnames'
import { useProviderContext } from '@/context/provider-context'
import {
ZapFast,
ZapNarrow,
} from '@/app/components/base/icons/src/vender/solid/general'
import Tooltip from '@/app/components/base/tooltip'
import { RiAedFill } from '@remixicon/react'
type PriorityLabelProps = {
className?: string
@@ -34,30 +31,26 @@ const PriorityLabel = ({ className }: PriorityLabelProps) => {
return (
<Tooltip popupContent={
<div>
<div className='mb-1 text-xs font-semibold text-gray-700'>{`${t('billing.plansCommon.documentProcessingPriority')}: ${t(`billing.plansCommon.priority.${priority}`)}`}</div>
<div className='mb-1 text-xs font-semibold text-text-primary'>{`${t('billing.plansCommon.documentProcessingPriority')}: ${t(`billing.plansCommon.priority.${priority}`)}`}</div>
{
priority !== DocumentProcessingPriority.topPriority && (
<div className='text-xs text-gray-500'>{t('billing.plansCommon.documentProcessingPriorityTip')}</div>
<div className='text-xs text-text-secondary'>{t('billing.plansCommon.documentProcessingPriorityTip')}</div>
)
}
</div>
}>
<span className={cn(`
ml-1 flex h-[18px] shrink-0 items-center rounded-[5px] border border-text-accent-secondary px-1
text-2xs font-medium text-text-accent-secondary
`, className)}>
<div
className={cn(
'system-2xs-medium ml-1 inline-flex h-[18px] shrink-0 items-center rounded-[5px] border border-text-accent-secondary bg-components-badge-bg-dimm px-[5px] text-text-accent-secondary',
className,
)}>
{
plan.type === Plan.professional && (
<ZapNarrow className='mr-0.5 size-3' />
(plan.type === Plan.professional || plan.type === Plan.team || plan.type === Plan.enterprise) && (
<RiAedFill className='mr-0.5 size-3' />
)
}
{
(plan.type === Plan.team || plan.type === Plan.enterprise) && (
<ZapFast className='mr-0.5 size-3' />
)
}
{t(`billing.plansCommon.priority.${priority}`)}
</span>
<span>{t(`billing.plansCommon.priority.${priority}`)}</span>
</div>
</Tooltip>
)
}

3
web/app/components/billing/type.ts
View File

@@ -101,6 +101,9 @@ export type CurrentPlanInfoBackend = {
limit: number
},
is_allow_transfer_workspace: boolean
knowledge_pipeline: {
publish_enabled: boolean
},
}
export type SubscriptionItem = {

4
web/app/components/billing/upgrade-btn/index.tsx
View File

@@ -50,8 +50,8 @@ const UpgradeBtn: FC<Props> = ({
return (
<PremiumBadge
size="m"
color="blue"
size='m'
color='blue'
allowHover={true}
onClick={onClick}
>