feat: knowledge pipeline (#25360)
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-
32
web/app/components/billing/pricing/assets/cloud.tsx
Normal file
32
web/app/components/billing/pricing/assets/cloud.tsx
Normal file
@@ -0,0 +1,32 @@
|
||||
type CloudProps = {
|
||||
isActive: boolean
|
||||
}
|
||||
|
||||
const Cloud = ({
|
||||
isActive,
|
||||
}: CloudProps) => {
|
||||
const color = isActive ? 'var(--color-saas-dify-blue-accessible)' : 'var(--color-text-primary)'
|
||||
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='16' height='17' viewBox='0 0 16 17' fill='none'>
|
||||
<g clipPath='url(#clip0_1_4630)'>
|
||||
<rect y='0.5' width='4' height='4' rx='2' fill={color} />
|
||||
<rect opacity='0.18' x='6' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='12' y='0.5' width='4' height='4' rx='2' fill={color} />
|
||||
<rect opacity='0.18' y='6.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='6' y='6.5' width='4' height='4' rx='2' fill={color} />
|
||||
<rect opacity='0.18' x='12' y='6.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect y='12.5' width='4' height='4' rx='2' fill={color} />
|
||||
<rect opacity='0.18' x='6' y='12.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect x='12' y='12.5' width='4' height='4' rx='2' fill={color} />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id='clip0_1_4630'>
|
||||
<rect width='16' height='16' fill='white' transform='translate(0 0.5)' />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Cloud
|
||||
96
web/app/components/billing/pricing/assets/community.tsx
Normal file
96
web/app/components/billing/pricing/assets/community.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
const Community = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='60' height='61' viewBox='0 0 60 61' fill='none'>
|
||||
<g clipPath='url(#clip0_1_5128)'>
|
||||
<path opacity='0.18' d='M0 2.5C0 1.39543 0.895431 0.5 2 0.5C3.10457 0.5 4 1.39543 4 2.5C4 3.60457 3.10457 4.5 2 4.5C0.895431 4.5 0 3.60457 0 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7 2.5C7 1.39543 7.89543 0.5 9 0.5C10.1046 0.5 11 1.39543 11 2.5C11 3.60457 10.1046 4.5 9 4.5C7.89543 4.5 7 3.60457 7 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14 2.5C14 1.39543 14.8954 0.5 16 0.5C17.1046 0.5 18 1.39543 18 2.5C18 3.60457 17.1046 4.5 16 4.5C14.8954 4.5 14 3.60457 14 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M21 2.5C21 1.39543 21.8954 0.5 23 0.5C24.1046 0.5 25 1.39543 25 2.5C25 3.60457 24.1046 4.5 23 4.5C21.8954 4.5 21 3.60457 21 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 2.5C28 1.39543 28.8954 0.5 30 0.5C31.1046 0.5 32 1.39543 32 2.5C32 3.60457 31.1046 4.5 30 4.5C28.8954 4.5 28 3.60457 28 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35 2.5C35 1.39543 35.8954 0.5 37 0.5C38.1046 0.5 39 1.39543 39 2.5C39 3.60457 38.1046 4.5 37 4.5C35.8954 4.5 35 3.60457 35 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 2.5C42 1.39543 42.8954 0.5 44 0.5C45.1046 0.5 46 1.39543 46 2.5C46 3.60457 45.1046 4.5 44 4.5C42.8954 4.5 42 3.60457 42 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49 2.5C49 1.39543 49.8954 0.5 51 0.5C52.1046 0.5 53 1.39543 53 2.5C53 3.60457 52.1046 4.5 51 4.5C49.8954 4.5 49 3.60457 49 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56 2.5C56 1.39543 56.8954 0.5 58 0.5C59.1046 0.5 60 1.39543 60 2.5C60 3.60457 59.1046 4.5 58 4.5C56.8954 4.5 56 3.60457 56 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0 9.5C0 8.39543 0.895431 7.5 2 7.5C3.10457 7.5 4 8.39543 4 9.5C4 10.6046 3.10457 11.5 2 11.5C0.895431 11.5 0 10.6046 0 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7 9.5C7 8.39543 7.89543 7.5 9 7.5C10.1046 7.5 11 8.39543 11 9.5C11 10.6046 10.1046 11.5 9 11.5C7.89543 11.5 7 10.6046 7 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14 9.5C14 8.39543 14.8954 7.5 16 7.5C17.1046 7.5 18 8.39543 18 9.5C18 10.6046 17.1046 11.5 16 11.5C14.8954 11.5 14 10.6046 14 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21 9.5C21 8.39543 21.8954 7.5 23 7.5C24.1046 7.5 25 8.39543 25 9.5C25 10.6046 24.1046 11.5 23 11.5C21.8954 11.5 21 10.6046 21 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 9.5C28 8.39543 28.8954 7.5 30 7.5C31.1046 7.5 32 8.39543 32 9.5C32 10.6046 31.1046 11.5 30 11.5C28.8954 11.5 28 10.6046 28 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M35 9.5C35 8.39543 35.8954 7.5 37 7.5C38.1046 7.5 39 8.39543 39 9.5C39 10.6046 38.1046 11.5 37 11.5C35.8954 11.5 35 10.6046 35 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42 9.5C42 8.39543 42.8954 7.5 44 7.5C45.1046 7.5 46 8.39543 46 9.5C46 10.6046 45.1046 11.5 44 11.5C42.8954 11.5 42 10.6046 42 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M49 9.5C49 8.39543 49.8954 7.5 51 7.5C52.1046 7.5 53 8.39543 53 9.5C53 10.6046 52.1046 11.5 51 11.5C49.8954 11.5 49 10.6046 49 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56 9.5C56 8.39543 56.8954 7.5 58 7.5C59.1046 7.5 60 8.39543 60 9.5C60 10.6046 59.1046 11.5 58 11.5C56.8954 11.5 56 10.6046 56 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0 16.5C0 15.3954 0.895431 14.5 2 14.5C3.10457 14.5 4 15.3954 4 16.5C4 17.6046 3.10457 18.5 2 18.5C0.895431 18.5 0 17.6046 0 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7 16.5C7 15.3954 7.89543 14.5 9 14.5C10.1046 14.5 11 15.3954 11 16.5C11 17.6046 10.1046 18.5 9 18.5C7.89543 18.5 7 17.6046 7 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14 16.5C14 15.3954 14.8954 14.5 16 14.5C17.1046 14.5 18 15.3954 18 16.5C18 17.6046 17.1046 18.5 16 18.5C14.8954 18.5 14 17.6046 14 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M21 16.5C21 15.3954 21.8954 14.5 23 14.5C24.1046 14.5 25 15.3954 25 16.5C25 17.6046 24.1046 18.5 23 18.5C21.8954 18.5 21 17.6046 21 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 16.5C28 15.3954 28.8954 14.5 30 14.5C31.1046 14.5 32 15.3954 32 16.5C32 17.6046 31.1046 18.5 30 18.5C28.8954 18.5 28 17.6046 28 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35 16.5C35 15.3954 35.8954 14.5 37 14.5C38.1046 14.5 39 15.3954 39 16.5C39 17.6046 38.1046 18.5 37 18.5C35.8954 18.5 35 17.6046 35 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 16.5C42 15.3954 42.8954 14.5 44 14.5C45.1046 14.5 46 15.3954 46 16.5C46 17.6046 45.1046 18.5 44 18.5C42.8954 18.5 42 17.6046 42 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M49 16.5C49 15.3954 49.8954 14.5 51 14.5C52.1046 14.5 53 15.3954 53 16.5C53 17.6046 52.1046 18.5 51 18.5C49.8954 18.5 49 17.6046 49 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56 16.5C56 15.3954 56.8954 14.5 58 14.5C59.1046 14.5 60 15.3954 60 16.5C60 17.6046 59.1046 18.5 58 18.5C56.8954 18.5 56 17.6046 56 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0 23.5C0 22.3954 0.895431 21.5 2 21.5C3.10457 21.5 4 22.3954 4 23.5C4 24.6046 3.10457 25.5 2 25.5C0.895431 25.5 0 24.6046 0 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7 23.5C7 22.3954 7.89543 21.5 9 21.5C10.1046 21.5 11 22.3954 11 23.5C11 24.6046 10.1046 25.5 9 25.5C7.89543 25.5 7 24.6046 7 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14 23.5C14 22.3954 14.8954 21.5 16 21.5C17.1046 21.5 18 22.3954 18 23.5C18 24.6046 17.1046 25.5 16 25.5C14.8954 25.5 14 24.6046 14 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21 23.5C21 22.3954 21.8954 21.5 23 21.5C24.1046 21.5 25 22.3954 25 23.5C25 24.6046 24.1046 25.5 23 25.5C21.8954 25.5 21 24.6046 21 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 23.5C28 22.3954 28.8954 21.5 30 21.5C31.1046 21.5 32 22.3954 32 23.5C32 24.6046 31.1046 25.5 30 25.5C28.8954 25.5 28 24.6046 28 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M35 23.5C35 22.3954 35.8954 21.5 37 21.5C38.1046 21.5 39 22.3954 39 23.5C39 24.6046 38.1046 25.5 37 25.5C35.8954 25.5 35 24.6046 35 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42 23.5C42 22.3954 42.8954 21.5 44 21.5C45.1046 21.5 46 22.3954 46 23.5C46 24.6046 45.1046 25.5 44 25.5C42.8954 25.5 42 24.6046 42 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49 23.5C49 22.3954 49.8954 21.5 51 21.5C52.1046 21.5 53 22.3954 53 23.5C53 24.6046 52.1046 25.5 51 25.5C49.8954 25.5 49 24.6046 49 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56 23.5C56 22.3954 56.8954 21.5 58 21.5C59.1046 21.5 60 22.3954 60 23.5C60 24.6046 59.1046 25.5 58 25.5C56.8954 25.5 56 24.6046 56 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0 30.5C0 29.3954 0.895431 28.5 2 28.5C3.10457 28.5 4 29.3954 4 30.5C4 31.6046 3.10457 32.5 2 32.5C0.895431 32.5 0 31.6046 0 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7 30.5C7 29.3954 7.89543 28.5 9 28.5C10.1046 28.5 11 29.3954 11 30.5C11 31.6046 10.1046 32.5 9 32.5C7.89543 32.5 7 31.6046 7 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14 30.5C14 29.3954 14.8954 28.5 16 28.5C17.1046 28.5 18 29.3954 18 30.5C18 31.6046 17.1046 32.5 16 32.5C14.8954 32.5 14 31.6046 14 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21 30.5C21 29.3954 21.8954 28.5 23 28.5C24.1046 28.5 25 29.3954 25 30.5C25 31.6046 24.1046 32.5 23 32.5C21.8954 32.5 21 31.6046 21 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 30.5C28 29.3954 28.8954 28.5 30 28.5C31.1046 28.5 32 29.3954 32 30.5C32 31.6046 31.1046 32.5 30 32.5C28.8954 32.5 28 31.6046 28 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M35 30.5C35 29.3954 35.8954 28.5 37 28.5C38.1046 28.5 39 29.3954 39 30.5C39 31.6046 38.1046 32.5 37 32.5C35.8954 32.5 35 31.6046 35 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42 30.5C42 29.3954 42.8954 28.5 44 28.5C45.1046 28.5 46 29.3954 46 30.5C46 31.6046 45.1046 32.5 44 32.5C42.8954 32.5 42 31.6046 42 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M49 30.5C49 29.3954 49.8954 28.5 51 28.5C52.1046 28.5 53 29.3954 53 30.5C53 31.6046 52.1046 32.5 51 32.5C49.8954 32.5 49 31.6046 49 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56 30.5C56 29.3954 56.8954 28.5 58 28.5C59.1046 28.5 60 29.3954 60 30.5C60 31.6046 59.1046 32.5 58 32.5C56.8954 32.5 56 31.6046 56 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0 37.5C0 36.3954 0.895431 35.5 2 35.5C3.10457 35.5 4 36.3954 4 37.5C4 38.6046 3.10457 39.5 2 39.5C0.895431 39.5 0 38.6046 0 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7 37.5C7 36.3954 7.89543 35.5 9 35.5C10.1046 35.5 11 36.3954 11 37.5C11 38.6046 10.1046 39.5 9 39.5C7.89543 39.5 7 38.6046 7 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14 37.5C14 36.3954 14.8954 35.5 16 35.5C17.1046 35.5 18 36.3954 18 37.5C18 38.6046 17.1046 39.5 16 39.5C14.8954 39.5 14 38.6046 14 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21 37.5C21 36.3954 21.8954 35.5 23 35.5C24.1046 35.5 25 36.3954 25 37.5C25 38.6046 24.1046 39.5 23 39.5C21.8954 39.5 21 38.6046 21 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 37.5C28 36.3954 28.8954 35.5 30 35.5C31.1046 35.5 32 36.3954 32 37.5C32 38.6046 31.1046 39.5 30 39.5C28.8954 39.5 28 38.6046 28 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M35 37.5C35 36.3954 35.8954 35.5 37 35.5C38.1046 35.5 39 36.3954 39 37.5C39 38.6046 38.1046 39.5 37 39.5C35.8954 39.5 35 38.6046 35 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42 37.5C42 36.3954 42.8954 35.5 44 35.5C45.1046 35.5 46 36.3954 46 37.5C46 38.6046 45.1046 39.5 44 39.5C42.8954 39.5 42 38.6046 42 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M49 37.5C49 36.3954 49.8954 35.5 51 35.5C52.1046 35.5 53 36.3954 53 37.5C53 38.6046 52.1046 39.5 51 39.5C49.8954 39.5 49 38.6046 49 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56 37.5C56 36.3954 56.8954 35.5 58 35.5C59.1046 35.5 60 36.3954 60 37.5C60 38.6046 59.1046 39.5 58 39.5C56.8954 39.5 56 38.6046 56 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0 44.5C0 43.3954 0.895431 42.5 2 42.5C3.10457 42.5 4 43.3954 4 44.5C4 45.6046 3.10457 46.5 2 46.5C0.895431 46.5 0 45.6046 0 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7 44.5C7 43.3954 7.89543 42.5 9 42.5C10.1046 42.5 11 43.3954 11 44.5C11 45.6046 10.1046 46.5 9 46.5C7.89543 46.5 7 45.6046 7 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14 44.5C14 43.3954 14.8954 42.5 16 42.5C17.1046 42.5 18 43.3954 18 44.5C18 45.6046 17.1046 46.5 16 46.5C14.8954 46.5 14 45.6046 14 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21 44.5C21 43.3954 21.8954 42.5 23 42.5C24.1046 42.5 25 43.3954 25 44.5C25 45.6046 24.1046 46.5 23 46.5C21.8954 46.5 21 45.6046 21 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 44.5C28 43.3954 28.8954 42.5 30 42.5C31.1046 42.5 32 43.3954 32 44.5C32 45.6046 31.1046 46.5 30 46.5C28.8954 46.5 28 45.6046 28 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M35 44.5C35 43.3954 35.8954 42.5 37 42.5C38.1046 42.5 39 43.3954 39 44.5C39 45.6046 38.1046 46.5 37 46.5C35.8954 46.5 35 45.6046 35 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 44.5C42 43.3954 42.8954 42.5 44 42.5C45.1046 42.5 46 43.3954 46 44.5C46 45.6046 45.1046 46.5 44 46.5C42.8954 46.5 42 45.6046 42 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49 44.5C49 43.3954 49.8954 42.5 51 42.5C52.1046 42.5 53 43.3954 53 44.5C53 45.6046 52.1046 46.5 51 46.5C49.8954 46.5 49 45.6046 49 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56 44.5C56 43.3954 56.8954 42.5 58 42.5C59.1046 42.5 60 43.3954 60 44.5C60 45.6046 59.1046 46.5 58 46.5C56.8954 46.5 56 45.6046 56 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0 51.5C0 50.3954 0.895431 49.5 2 49.5C3.10457 49.5 4 50.3954 4 51.5C4 52.6046 3.10457 53.5 2 53.5C0.895431 53.5 0 52.6046 0 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7 51.5C7 50.3954 7.89543 49.5 9 49.5C10.1046 49.5 11 50.3954 11 51.5C11 52.6046 10.1046 53.5 9 53.5C7.89543 53.5 7 52.6046 7 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14 51.5C14 50.3954 14.8954 49.5 16 49.5C17.1046 49.5 18 50.3954 18 51.5C18 52.6046 17.1046 53.5 16 53.5C14.8954 53.5 14 52.6046 14 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M21 51.5C21 50.3954 21.8954 49.5 23 49.5C24.1046 49.5 25 50.3954 25 51.5C25 52.6046 24.1046 53.5 23 53.5C21.8954 53.5 21 52.6046 21 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 51.5C28 50.3954 28.8954 49.5 30 49.5C31.1046 49.5 32 50.3954 32 51.5C32 52.6046 31.1046 53.5 30 53.5C28.8954 53.5 28 52.6046 28 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35 51.5C35 50.3954 35.8954 49.5 37 49.5C38.1046 49.5 39 50.3954 39 51.5C39 52.6046 38.1046 53.5 37 53.5C35.8954 53.5 35 52.6046 35 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42 51.5C42 50.3954 42.8954 49.5 44 49.5C45.1046 49.5 46 50.3954 46 51.5C46 52.6046 45.1046 53.5 44 53.5C42.8954 53.5 42 52.6046 42 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49 51.5C49 50.3954 49.8954 49.5 51 49.5C52.1046 49.5 53 50.3954 53 51.5C53 52.6046 52.1046 53.5 51 53.5C49.8954 53.5 49 52.6046 49 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56 51.5C56 50.3954 56.8954 49.5 58 49.5C59.1046 49.5 60 50.3954 60 51.5C60 52.6046 59.1046 53.5 58 53.5C56.8954 53.5 56 52.6046 56 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0 58.5C0 57.3954 0.895431 56.5 2 56.5C3.10457 56.5 4 57.3954 4 58.5C4 59.6046 3.10457 60.5 2 60.5C0.895431 60.5 0 59.6046 0 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7 58.5C7 57.3954 7.89543 56.5 9 56.5C10.1046 56.5 11 57.3954 11 58.5C11 59.6046 10.1046 60.5 9 60.5C7.89543 60.5 7 59.6046 7 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14 58.5C14 57.3954 14.8954 56.5 16 56.5C17.1046 56.5 18 57.3954 18 58.5C18 59.6046 17.1046 60.5 16 60.5C14.8954 60.5 14 59.6046 14 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21 58.5C21 57.3954 21.8954 56.5 23 56.5C24.1046 56.5 25 57.3954 25 58.5C25 59.6046 24.1046 60.5 23 60.5C21.8954 60.5 21 59.6046 21 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 58.5C28 57.3954 28.8954 56.5 30 56.5C31.1046 56.5 32 57.3954 32 58.5C32 59.6046 31.1046 60.5 30 60.5C28.8954 60.5 28 59.6046 28 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M35 58.5C35 57.3954 35.8954 56.5 37 56.5C38.1046 56.5 39 57.3954 39 58.5C39 59.6046 38.1046 60.5 37 60.5C35.8954 60.5 35 59.6046 35 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42 58.5C42 57.3954 42.8954 56.5 44 56.5C45.1046 56.5 46 57.3954 46 58.5C46 59.6046 45.1046 60.5 44 60.5C42.8954 60.5 42 59.6046 42 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49 58.5C49 57.3954 49.8954 56.5 51 56.5C52.1046 56.5 53 57.3954 53 58.5C53 59.6046 52.1046 60.5 51 60.5C49.8954 60.5 49 59.6046 49 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56 58.5C56 57.3954 56.8954 56.5 58 56.5C59.1046 56.5 60 57.3954 60 58.5C60 59.6046 59.1046 60.5 58 60.5C56.8954 60.5 56 59.6046 56 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id='clip0_1_5128'>
|
||||
<rect width='60' height='60' fill='white' transform='translate(0 0.5)' />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Community
|
||||
@@ -0,0 +1,22 @@
|
||||
const EnterpriseNoise = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='148' viewBox='0 0 100% 148' fill='none'>
|
||||
<g opacity='0.05' filter='url(#filter0_g_1_5499)'>
|
||||
<rect y='0' width='100%' height='96' fill='var(--color-saas-dify-blue-accessible)' />
|
||||
</g>
|
||||
<defs>
|
||||
<filter id='filter0_g_1_5499' x='0' y='0' width='100%' height='296' filterUnits='userSpaceOnUse' colorInterpolationFilters='sRGB'>
|
||||
<feFlood floodOpacity='0' result='BackgroundImageFix' />
|
||||
<feBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape' />
|
||||
<feTurbulence type='fractalNoise' baseFrequency='0.625 0.625' numOctaves='3' seed='5427' />
|
||||
<feDisplacementMap in='shape' scale='200' xChannelSelector='R' yChannelSelector='G' result='displacedImage' width='100%' height='100%' />
|
||||
<feMerge result='effect1_texture_1_5499'>
|
||||
<feMergeNode in='displacedImage' />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default EnterpriseNoise
|
||||
96
web/app/components/billing/pricing/assets/enterprise.tsx
Normal file
96
web/app/components/billing/pricing/assets/enterprise.tsx
Normal 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
12
web/app/components/billing/pricing/assets/index.tsx
Normal file
@@ -0,0 +1,12 @@
|
||||
export { default as Cloud } from './cloud'
|
||||
export { default as SelfHosted } from './self-hosted'
|
||||
export { default as Sandbox } from './sandbox'
|
||||
export { default as Professional } from './professional'
|
||||
export { default as Team } from './team'
|
||||
export { default as Community } from './community'
|
||||
export { default as Premium } from './premium'
|
||||
export { default as Enterprise } from './enterprise'
|
||||
export { default as NoiseTop } from './noise-top'
|
||||
export { default as NoiseBottom } from './noise-bottom'
|
||||
export { default as PremiumNoise } from './premium-noise'
|
||||
export { default as EnterpriseNoise } from './enterprise-noise'
|
||||
22
web/app/components/billing/pricing/assets/noise-bottom.tsx
Normal file
22
web/app/components/billing/pricing/assets/noise-bottom.tsx
Normal 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
22
web/app/components/billing/pricing/assets/noise-top.tsx
Normal file
@@ -0,0 +1,22 @@
|
||||
const NoiseTop = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='148' viewBox='0 0 100% 148' fill='none'>
|
||||
<g opacity='0.1' filter='url(#filter0_g_2_13388)'>
|
||||
<rect y='0' width='100%' height='96' fill='var(--color-text-quaternary)' />
|
||||
</g>
|
||||
<defs>
|
||||
<filter id='filter0_g_2_13388' x='0' y='0' width='100%' height='296' filterUnits='userSpaceOnUse' colorInterpolationFilters='sRGB'>
|
||||
<feFlood floodOpacity='0' result='BackgroundImageFix' />
|
||||
<feBlend mode='normal' in='SourceGraphic' in2='BackgroundImageFix' result='shape' />
|
||||
<feTurbulence type='fractalNoise' baseFrequency='0.625 0.625' numOctaves='3' seed='5427' />
|
||||
<feDisplacementMap in='shape' scale='200' xChannelSelector='R' yChannelSelector='G' result='displacedImage' width='100%' height='100%' />
|
||||
<feMerge result='effect1_texture_2_13388'>
|
||||
<feMergeNode in='displacedImage' />
|
||||
</feMerge>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default NoiseTop
|
||||
22
web/app/components/billing/pricing/assets/premium-noise.tsx
Normal file
22
web/app/components/billing/pricing/assets/premium-noise.tsx
Normal 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
96
web/app/components/billing/pricing/assets/premium.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
const Premium = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='61' height='61' viewBox='0 0 61 61' fill='none'>
|
||||
<g clipPath='url(#clip0_1_5240)'>
|
||||
<path opacity='0.18' d='M0.666748 2.5C0.666748 1.39543 1.56218 0.5 2.66675 0.5C3.77132 0.5 4.66675 1.39543 4.66675 2.5C4.66675 3.60457 3.77132 4.5 2.66675 4.5C1.56218 4.5 0.666748 3.60457 0.666748 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7.66675 2.5C7.66675 1.39543 8.56218 0.5 9.66675 0.5C10.7713 0.5 11.6667 1.39543 11.6667 2.5C11.6667 3.60457 10.7713 4.5 9.66675 4.5C8.56218 4.5 7.66675 3.60457 7.66675 2.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M14.6667 2.5C14.6667 1.39543 15.5622 0.5 16.6667 0.5C17.7713 0.5 18.6667 1.39543 18.6667 2.5C18.6667 3.60457 17.7713 4.5 16.6667 4.5C15.5622 4.5 14.6667 3.60457 14.6667 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.6667 2.5C21.6667 1.39543 22.5622 0.5 23.6667 0.5C24.7713 0.5 25.6667 1.39543 25.6667 2.5C25.6667 3.60457 24.7713 4.5 23.6667 4.5C22.5622 4.5 21.6667 3.60457 21.6667 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.6667 2.5C28.6667 1.39543 29.5622 0.5 30.6667 0.5C31.7713 0.5 32.6667 1.39543 32.6667 2.5C32.6667 3.60457 31.7713 4.5 30.6667 4.5C29.5622 4.5 28.6667 3.60457 28.6667 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35.6667 2.5C35.6667 1.39543 36.5622 0.5 37.6667 0.5C38.7713 0.5 39.6667 1.39543 39.6667 2.5C39.6667 3.60457 38.7713 4.5 37.6667 4.5C36.5622 4.5 35.6667 3.60457 35.6667 2.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M42.6667 2.5C42.6667 1.39543 43.5622 0.5 44.6667 0.5C45.7713 0.5 46.6667 1.39543 46.6667 2.5C46.6667 3.60457 45.7713 4.5 44.6667 4.5C43.5622 4.5 42.6667 3.60457 42.6667 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.6667 2.5C49.6667 1.39543 50.5622 0.5 51.6667 0.5C52.7713 0.5 53.6667 1.39543 53.6667 2.5C53.6667 3.60457 52.7713 4.5 51.6667 4.5C50.5622 4.5 49.6667 3.60457 49.6667 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.6667 2.5C56.6667 1.39543 57.5622 0.5 58.6667 0.5C59.7713 0.5 60.6667 1.39543 60.6667 2.5C60.6667 3.60457 59.7713 4.5 58.6667 4.5C57.5622 4.5 56.6667 3.60457 56.6667 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0.666748 9.5C0.666748 8.39543 1.56218 7.5 2.66675 7.5C3.77132 7.5 4.66675 8.39543 4.66675 9.5C4.66675 10.6046 3.77132 11.5 2.66675 11.5C1.56218 11.5 0.666748 10.6046 0.666748 9.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M7.66675 9.5C7.66675 8.39543 8.56218 7.5 9.66675 7.5C10.7713 7.5 11.6667 8.39543 11.6667 9.5C11.6667 10.6046 10.7713 11.5 9.66675 11.5C8.56218 11.5 7.66675 10.6046 7.66675 9.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M14.6667 9.5C14.6667 8.39543 15.5622 7.5 16.6667 7.5C17.7713 7.5 18.6667 8.39543 18.6667 9.5C18.6667 10.6046 17.7713 11.5 16.6667 11.5C15.5622 11.5 14.6667 10.6046 14.6667 9.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M21.6667 9.5C21.6667 8.39543 22.5622 7.5 23.6667 7.5C24.7713 7.5 25.6667 8.39543 25.6667 9.5C25.6667 10.6046 24.7713 11.5 23.6667 11.5C22.5622 11.5 21.6667 10.6046 21.6667 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.6667 9.5C28.6667 8.39543 29.5622 7.5 30.6667 7.5C31.7713 7.5 32.6667 8.39543 32.6667 9.5C32.6667 10.6046 31.7713 11.5 30.6667 11.5C29.5622 11.5 28.6667 10.6046 28.6667 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35.6667 9.5C35.6667 8.39543 36.5622 7.5 37.6667 7.5C38.7713 7.5 39.6667 8.39543 39.6667 9.5C39.6667 10.6046 38.7713 11.5 37.6667 11.5C36.5622 11.5 35.6667 10.6046 35.6667 9.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M42.6667 9.5C42.6667 8.39543 43.5622 7.5 44.6667 7.5C45.7713 7.5 46.6667 8.39543 46.6667 9.5C46.6667 10.6046 45.7713 11.5 44.6667 11.5C43.5622 11.5 42.6667 10.6046 42.6667 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.6667 9.5C49.6667 8.39543 50.5622 7.5 51.6667 7.5C52.7713 7.5 53.6667 8.39543 53.6667 9.5C53.6667 10.6046 52.7713 11.5 51.6667 11.5C50.5622 11.5 49.6667 10.6046 49.6667 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.6667 9.5C56.6667 8.39543 57.5622 7.5 58.6667 7.5C59.7713 7.5 60.6667 8.39543 60.6667 9.5C60.6667 10.6046 59.7713 11.5 58.6667 11.5C57.5622 11.5 56.6667 10.6046 56.6667 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.666748 16.5C0.666748 15.3954 1.56218 14.5 2.66675 14.5C3.77132 14.5 4.66675 15.3954 4.66675 16.5C4.66675 17.6046 3.77132 18.5 2.66675 18.5C1.56218 18.5 0.666748 17.6046 0.666748 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7.66675 16.5C7.66675 15.3954 8.56218 14.5 9.66675 14.5C10.7713 14.5 11.6667 15.3954 11.6667 16.5C11.6667 17.6046 10.7713 18.5 9.66675 18.5C8.56218 18.5 7.66675 17.6046 7.66675 16.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M14.6667 16.5C14.6667 15.3954 15.5622 14.5 16.6667 14.5C17.7713 14.5 18.6667 15.3954 18.6667 16.5C18.6667 17.6046 17.7713 18.5 16.6667 18.5C15.5622 18.5 14.6667 17.6046 14.6667 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.6667 16.5C21.6667 15.3954 22.5622 14.5 23.6667 14.5C24.7713 14.5 25.6667 15.3954 25.6667 16.5C25.6667 17.6046 24.7713 18.5 23.6667 18.5C22.5622 18.5 21.6667 17.6046 21.6667 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28.6667 16.5C28.6667 15.3954 29.5622 14.5 30.6667 14.5C31.7713 14.5 32.6667 15.3954 32.6667 16.5C32.6667 17.6046 31.7713 18.5 30.6667 18.5C29.5622 18.5 28.6667 17.6046 28.6667 16.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M35.6667 16.5C35.6667 15.3954 36.5622 14.5 37.6667 14.5C38.7713 14.5 39.6667 15.3954 39.6667 16.5C39.6667 17.6046 38.7713 18.5 37.6667 18.5C36.5622 18.5 35.6667 17.6046 35.6667 16.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M42.6667 16.5C42.6667 15.3954 43.5622 14.5 44.6667 14.5C45.7713 14.5 46.6667 15.3954 46.6667 16.5C46.6667 17.6046 45.7713 18.5 44.6667 18.5C43.5622 18.5 42.6667 17.6046 42.6667 16.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M49.6667 16.5C49.6667 15.3954 50.5622 14.5 51.6667 14.5C52.7713 14.5 53.6667 15.3954 53.6667 16.5C53.6667 17.6046 52.7713 18.5 51.6667 18.5C50.5622 18.5 49.6667 17.6046 49.6667 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.6667 16.5C56.6667 15.3954 57.5622 14.5 58.6667 14.5C59.7713 14.5 60.6667 15.3954 60.6667 16.5C60.6667 17.6046 59.7713 18.5 58.6667 18.5C57.5622 18.5 56.6667 17.6046 56.6667 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.666748 23.5C0.666748 22.3954 1.56218 21.5 2.66675 21.5C3.77132 21.5 4.66675 22.3954 4.66675 23.5C4.66675 24.6046 3.77132 25.5 2.66675 25.5C1.56218 25.5 0.666748 24.6046 0.666748 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.66675 23.5C7.66675 22.3954 8.56218 21.5 9.66675 21.5C10.7713 21.5 11.6667 22.3954 11.6667 23.5C11.6667 24.6046 10.7713 25.5 9.66675 25.5C8.56218 25.5 7.66675 24.6046 7.66675 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14.6667 23.5C14.6667 22.3954 15.5622 21.5 16.6667 21.5C17.7713 21.5 18.6667 22.3954 18.6667 23.5C18.6667 24.6046 17.7713 25.5 16.6667 25.5C15.5622 25.5 14.6667 24.6046 14.6667 23.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M21.6667 23.5C21.6667 22.3954 22.5622 21.5 23.6667 21.5C24.7713 21.5 25.6667 22.3954 25.6667 23.5C25.6667 24.6046 24.7713 25.5 23.6667 25.5C22.5622 25.5 21.6667 24.6046 21.6667 23.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M28.6667 23.5C28.6667 22.3954 29.5622 21.5 30.6667 21.5C31.7713 21.5 32.6667 22.3954 32.6667 23.5C32.6667 24.6046 31.7713 25.5 30.6667 25.5C29.5622 25.5 28.6667 24.6046 28.6667 23.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M35.6667 23.5C35.6667 22.3954 36.5622 21.5 37.6667 21.5C38.7713 21.5 39.6667 22.3954 39.6667 23.5C39.6667 24.6046 38.7713 25.5 37.6667 25.5C36.5622 25.5 35.6667 24.6046 35.6667 23.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M42.6667 23.5C42.6667 22.3954 43.5622 21.5 44.6667 21.5C45.7713 21.5 46.6667 22.3954 46.6667 23.5C46.6667 24.6046 45.7713 25.5 44.6667 25.5C43.5622 25.5 42.6667 24.6046 42.6667 23.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M49.6667 23.5C49.6667 22.3954 50.5622 21.5 51.6667 21.5C52.7713 21.5 53.6667 22.3954 53.6667 23.5C53.6667 24.6046 52.7713 25.5 51.6667 25.5C50.5622 25.5 49.6667 24.6046 49.6667 23.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M56.6667 23.5C56.6667 22.3954 57.5622 21.5 58.6667 21.5C59.7713 21.5 60.6667 22.3954 60.6667 23.5C60.6667 24.6046 59.7713 25.5 58.6667 25.5C57.5622 25.5 56.6667 24.6046 56.6667 23.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M0.666748 30.5C0.666748 29.3954 1.56218 28.5 2.66675 28.5C3.77132 28.5 4.66675 29.3954 4.66675 30.5C4.66675 31.6046 3.77132 32.5 2.66675 32.5C1.56218 32.5 0.666748 31.6046 0.666748 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.66675 30.5C7.66675 29.3954 8.56218 28.5 9.66675 28.5C10.7713 28.5 11.6667 29.3954 11.6667 30.5C11.6667 31.6046 10.7713 32.5 9.66675 32.5C8.56218 32.5 7.66675 31.6046 7.66675 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.6667 30.5C14.6667 29.3954 15.5622 28.5 16.6667 28.5C17.7713 28.5 18.6667 29.3954 18.6667 30.5C18.6667 31.6046 17.7713 32.5 16.6667 32.5C15.5622 32.5 14.6667 31.6046 14.6667 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.6667 30.5C21.6667 29.3954 22.5622 28.5 23.6667 28.5C24.7713 28.5 25.6667 29.3954 25.6667 30.5C25.6667 31.6046 24.7713 32.5 23.6667 32.5C22.5622 32.5 21.6667 31.6046 21.6667 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28.6667 30.5C28.6667 29.3954 29.5622 28.5 30.6667 28.5C31.7713 28.5 32.6667 29.3954 32.6667 30.5C32.6667 31.6046 31.7713 32.5 30.6667 32.5C29.5622 32.5 28.6667 31.6046 28.6667 30.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M35.6667 30.5C35.6667 29.3954 36.5622 28.5 37.6667 28.5C38.7713 28.5 39.6667 29.3954 39.6667 30.5C39.6667 31.6046 38.7713 32.5 37.6667 32.5C36.5622 32.5 35.6667 31.6046 35.6667 30.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M42.6667 30.5C42.6667 29.3954 43.5622 28.5 44.6667 28.5C45.7713 28.5 46.6667 29.3954 46.6667 30.5C46.6667 31.6046 45.7713 32.5 44.6667 32.5C43.5622 32.5 42.6667 31.6046 42.6667 30.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M49.6667 30.5C49.6667 29.3954 50.5622 28.5 51.6667 28.5C52.7713 28.5 53.6667 29.3954 53.6667 30.5C53.6667 31.6046 52.7713 32.5 51.6667 32.5C50.5622 32.5 49.6667 31.6046 49.6667 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.6667 30.5C56.6667 29.3954 57.5622 28.5 58.6667 28.5C59.7713 28.5 60.6667 29.3954 60.6667 30.5C60.6667 31.6046 59.7713 32.5 58.6667 32.5C57.5622 32.5 56.6667 31.6046 56.6667 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.666748 37.5C0.666748 36.3954 1.56218 35.5 2.66675 35.5C3.77132 35.5 4.66675 36.3954 4.66675 37.5C4.66675 38.6046 3.77132 39.5 2.66675 39.5C1.56218 39.5 0.666748 38.6046 0.666748 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.66675 37.5C7.66675 36.3954 8.56218 35.5 9.66675 35.5C10.7713 35.5 11.6667 36.3954 11.6667 37.5C11.6667 38.6046 10.7713 39.5 9.66675 39.5C8.56218 39.5 7.66675 38.6046 7.66675 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14.6667 37.5C14.6667 36.3954 15.5622 35.5 16.6667 35.5C17.7713 35.5 18.6667 36.3954 18.6667 37.5C18.6667 38.6046 17.7713 39.5 16.6667 39.5C15.5622 39.5 14.6667 38.6046 14.6667 37.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M21.6667 37.5C21.6667 36.3954 22.5622 35.5 23.6667 35.5C24.7713 35.5 25.6667 36.3954 25.6667 37.5C25.6667 38.6046 24.7713 39.5 23.6667 39.5C22.5622 39.5 21.6667 38.6046 21.6667 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.6667 37.5C28.6667 36.3954 29.5622 35.5 30.6667 35.5C31.7713 35.5 32.6667 36.3954 32.6667 37.5C32.6667 38.6046 31.7713 39.5 30.6667 39.5C29.5622 39.5 28.6667 38.6046 28.6667 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35.6667 37.5C35.6667 36.3954 36.5622 35.5 37.6667 35.5C38.7713 35.5 39.6667 36.3954 39.6667 37.5C39.6667 38.6046 38.7713 39.5 37.6667 39.5C36.5622 39.5 35.6667 38.6046 35.6667 37.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M42.6667 37.5C42.6667 36.3954 43.5622 35.5 44.6667 35.5C45.7713 35.5 46.6667 36.3954 46.6667 37.5C46.6667 38.6046 45.7713 39.5 44.6667 39.5C43.5622 39.5 42.6667 38.6046 42.6667 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.6667 37.5C49.6667 36.3954 50.5622 35.5 51.6667 35.5C52.7713 35.5 53.6667 36.3954 53.6667 37.5C53.6667 38.6046 52.7713 39.5 51.6667 39.5C50.5622 39.5 49.6667 38.6046 49.6667 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.6667 37.5C56.6667 36.3954 57.5622 35.5 58.6667 35.5C59.7713 35.5 60.6667 36.3954 60.6667 37.5C60.6667 38.6046 59.7713 39.5 58.6667 39.5C57.5622 39.5 56.6667 38.6046 56.6667 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.666748 44.5C0.666748 43.3954 1.56218 42.5 2.66675 42.5C3.77132 42.5 4.66675 43.3954 4.66675 44.5C4.66675 45.6046 3.77132 46.5 2.66675 46.5C1.56218 46.5 0.666748 45.6046 0.666748 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7.66675 44.5C7.66675 43.3954 8.56218 42.5 9.66675 42.5C10.7713 42.5 11.6667 43.3954 11.6667 44.5C11.6667 45.6046 10.7713 46.5 9.66675 46.5C8.56218 46.5 7.66675 45.6046 7.66675 44.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M14.6667 44.5C14.6667 43.3954 15.5622 42.5 16.6667 42.5C17.7713 42.5 18.6667 43.3954 18.6667 44.5C18.6667 45.6046 17.7713 46.5 16.6667 46.5C15.5622 46.5 14.6667 45.6046 14.6667 44.5Z' fill='var(--color-text-warning)' />
|
||||
<path d='M21.6667 44.5C21.6667 43.3954 22.5622 42.5 23.6667 42.5C24.7713 42.5 25.6667 43.3954 25.6667 44.5C25.6667 45.6046 24.7713 46.5 23.6667 46.5C22.5622 46.5 21.6667 45.6046 21.6667 44.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M28.6667 44.5C28.6667 43.3954 29.5622 42.5 30.6667 42.5C31.7713 42.5 32.6667 43.3954 32.6667 44.5C32.6667 45.6046 31.7713 46.5 30.6667 46.5C29.5622 46.5 28.6667 45.6046 28.6667 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35.6667 44.5C35.6667 43.3954 36.5622 42.5 37.6667 42.5C38.7713 42.5 39.6667 43.3954 39.6667 44.5C39.6667 45.6046 38.7713 46.5 37.6667 46.5C36.5622 46.5 35.6667 45.6046 35.6667 44.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M42.6667 44.5C42.6667 43.3954 43.5622 42.5 44.6667 42.5C45.7713 42.5 46.6667 43.3954 46.6667 44.5C46.6667 45.6046 45.7713 46.5 44.6667 46.5C43.5622 46.5 42.6667 45.6046 42.6667 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.6667 44.5C49.6667 43.3954 50.5622 42.5 51.6667 42.5C52.7713 42.5 53.6667 43.3954 53.6667 44.5C53.6667 45.6046 52.7713 46.5 51.6667 46.5C50.5622 46.5 49.6667 45.6046 49.6667 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.6667 44.5C56.6667 43.3954 57.5622 42.5 58.6667 42.5C59.7713 42.5 60.6667 43.3954 60.6667 44.5C60.6667 45.6046 59.7713 46.5 58.6667 46.5C57.5622 46.5 56.6667 45.6046 56.6667 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.666748 51.5C0.666748 50.3954 1.56218 49.5 2.66675 49.5C3.77132 49.5 4.66675 50.3954 4.66675 51.5C4.66675 52.6046 3.77132 53.5 2.66675 53.5C1.56218 53.5 0.666748 52.6046 0.666748 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.66675 51.5C7.66675 50.3954 8.56218 49.5 9.66675 49.5C10.7713 49.5 11.6667 50.3954 11.6667 51.5C11.6667 52.6046 10.7713 53.5 9.66675 53.5C8.56218 53.5 7.66675 52.6046 7.66675 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14.6667 51.5C14.6667 50.3954 15.5622 49.5 16.6667 49.5C17.7713 49.5 18.6667 50.3954 18.6667 51.5C18.6667 52.6046 17.7713 53.5 16.6667 53.5C15.5622 53.5 14.6667 52.6046 14.6667 51.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M21.6667 51.5C21.6667 50.3954 22.5622 49.5 23.6667 49.5C24.7713 49.5 25.6667 50.3954 25.6667 51.5C25.6667 52.6046 24.7713 53.5 23.6667 53.5C22.5622 53.5 21.6667 52.6046 21.6667 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.6667 51.5C28.6667 50.3954 29.5622 49.5 30.6667 49.5C31.7713 49.5 32.6667 50.3954 32.6667 51.5C32.6667 52.6046 31.7713 53.5 30.6667 53.5C29.5622 53.5 28.6667 52.6046 28.6667 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35.6667 51.5C35.6667 50.3954 36.5622 49.5 37.6667 49.5C38.7713 49.5 39.6667 50.3954 39.6667 51.5C39.6667 52.6046 38.7713 53.5 37.6667 53.5C36.5622 53.5 35.6667 52.6046 35.6667 51.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M42.6667 51.5C42.6667 50.3954 43.5622 49.5 44.6667 49.5C45.7713 49.5 46.6667 50.3954 46.6667 51.5C46.6667 52.6046 45.7713 53.5 44.6667 53.5C43.5622 53.5 42.6667 52.6046 42.6667 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.6667 51.5C49.6667 50.3954 50.5622 49.5 51.6667 49.5C52.7713 49.5 53.6667 50.3954 53.6667 51.5C53.6667 52.6046 52.7713 53.5 51.6667 53.5C50.5622 53.5 49.6667 52.6046 49.6667 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.6667 51.5C56.6667 50.3954 57.5622 49.5 58.6667 49.5C59.7713 49.5 60.6667 50.3954 60.6667 51.5C60.6667 52.6046 59.7713 53.5 58.6667 53.5C57.5622 53.5 56.6667 52.6046 56.6667 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.666748 58.5C0.666748 57.3954 1.56218 56.5 2.66675 56.5C3.77132 56.5 4.66675 57.3954 4.66675 58.5C4.66675 59.6046 3.77132 60.5 2.66675 60.5C1.56218 60.5 0.666748 59.6046 0.666748 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.66675 58.5C7.66675 57.3954 8.56218 56.5 9.66675 56.5C10.7713 56.5 11.6667 57.3954 11.6667 58.5C11.6667 59.6046 10.7713 60.5 9.66675 60.5C8.56218 60.5 7.66675 59.6046 7.66675 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14.6667 58.5C14.6667 57.3954 15.5622 56.5 16.6667 56.5C17.7713 56.5 18.6667 57.3954 18.6667 58.5C18.6667 59.6046 17.7713 60.5 16.6667 60.5C15.5622 60.5 14.6667 59.6046 14.6667 58.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M21.6667 58.5C21.6667 57.3954 22.5622 56.5 23.6667 56.5C24.7713 56.5 25.6667 57.3954 25.6667 58.5C25.6667 59.6046 24.7713 60.5 23.6667 60.5C22.5622 60.5 21.6667 59.6046 21.6667 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.6667 58.5C28.6667 57.3954 29.5622 56.5 30.6667 56.5C31.7713 56.5 32.6667 57.3954 32.6667 58.5C32.6667 59.6046 31.7713 60.5 30.6667 60.5C29.5622 60.5 28.6667 59.6046 28.6667 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35.6667 58.5C35.6667 57.3954 36.5622 56.5 37.6667 56.5C38.7713 56.5 39.6667 57.3954 39.6667 58.5C39.6667 59.6046 38.7713 60.5 37.6667 60.5C36.5622 60.5 35.6667 59.6046 35.6667 58.5Z' fill='var(--color-text-warning)' />
|
||||
<path opacity='0.18' d='M42.6667 58.5C42.6667 57.3954 43.5622 56.5 44.6667 56.5C45.7713 56.5 46.6667 57.3954 46.6667 58.5C46.6667 59.6046 45.7713 60.5 44.6667 60.5C43.5622 60.5 42.6667 59.6046 42.6667 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.6667 58.5C49.6667 57.3954 50.5622 56.5 51.6667 56.5C52.7713 56.5 53.6667 57.3954 53.6667 58.5C53.6667 59.6046 52.7713 60.5 51.6667 60.5C50.5622 60.5 49.6667 59.6046 49.6667 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.6667 58.5C56.6667 57.3954 57.5622 56.5 58.6667 56.5C59.7713 56.5 60.6667 57.3954 60.6667 58.5C60.6667 59.6046 59.7713 60.5 58.6667 60.5C57.5622 60.5 56.6667 59.6046 56.6667 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id='clip0_1_5240'>
|
||||
<rect width='60' height='60' fill='white' transform='translate(0.666748 0.5)' />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Premium
|
||||
96
web/app/components/billing/pricing/assets/professional.tsx
Normal file
96
web/app/components/billing/pricing/assets/professional.tsx
Normal 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
96
web/app/components/billing/pricing/assets/sandbox.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
const Sandbox = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='60' height='61' viewBox='0 0 60 61' fill='none'>
|
||||
<g clipPath='url(#clip0_1_65915)'>
|
||||
<rect opacity='0.18' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='7' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14 2.5C14 1.39543 14.8954 0.5 16 0.5C17.1046 0.5 18 1.39543 18 2.5C18 3.60457 17.1046 4.5 16 4.5C14.8954 4.5 14 3.60457 14 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M21 2.5C21 1.39543 21.8954 0.5 23 0.5C24.1046 0.5 25 1.39543 25 2.5C25 3.60457 24.1046 4.5 23 4.5C21.8954 4.5 21 3.60457 21 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 2.5C28 1.39543 28.8954 0.5 30 0.5C31.1046 0.5 32 1.39543 32 2.5C32 3.60457 31.1046 4.5 30 4.5C28.8954 4.5 28 3.60457 28 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35 2.5C35 1.39543 35.8954 0.5 37 0.5C38.1046 0.5 39 1.39543 39 2.5C39 3.60457 38.1046 4.5 37 4.5C35.8954 4.5 35 3.60457 35 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 2.5C42 1.39543 42.8954 0.5 44 0.5C45.1046 0.5 46 1.39543 46 2.5C46 3.60457 45.1046 4.5 44 4.5C42.8954 4.5 42 3.60457 42 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M49 2.5C49 1.39543 49.8954 0.5 51 0.5C52.1046 0.5 53 1.39543 53 2.5C53 3.60457 52.1046 4.5 51 4.5C49.8954 4.5 49 3.60457 49 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56 2.5C56 1.39543 56.8954 0.5 58 0.5C59.1046 0.5 60 1.39543 60 2.5C60 3.60457 59.1046 4.5 58 4.5C56.8954 4.5 56 3.60457 56 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7 9.5C7 8.39543 7.89543 7.5 9 7.5C10.1046 7.5 11 8.39543 11 9.5C11 10.6046 10.1046 11.5 9 11.5C7.89543 11.5 7 10.6046 7 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='42' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M49 9.5C49 8.39543 49.8954 7.5 51 7.5C52.1046 7.5 53 8.39543 53 9.5C53 10.6046 52.1046 11.5 51 11.5C49.8954 11.5 49 10.6046 49 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56 9.5C56 8.39543 56.8954 7.5 58 7.5C59.1046 7.5 60 8.39543 60 9.5C60 10.6046 59.1046 11.5 58 11.5C56.8954 11.5 56 10.6046 56 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0 16.5C0 15.3954 0.895431 14.5 2 14.5C3.10457 14.5 4 15.3954 4 16.5C4 17.6046 3.10457 18.5 2 18.5C0.895431 18.5 0 17.6046 0 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7 16.5C7 15.3954 7.89543 14.5 9 14.5C10.1046 14.5 11 15.3954 11 16.5C11 17.6046 10.1046 18.5 9 18.5C7.89543 18.5 7 17.6046 7 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14 16.5C14 15.3954 14.8954 14.5 16 14.5C17.1046 14.5 18 15.3954 18 16.5C18 17.6046 17.1046 18.5 16 18.5C14.8954 18.5 14 17.6046 14 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M21 16.5C21 15.3954 21.8954 14.5 23 14.5C24.1046 14.5 25 15.3954 25 16.5C25 17.6046 24.1046 18.5 23 18.5C21.8954 18.5 21 17.6046 21 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 16.5C28 15.3954 28.8954 14.5 30 14.5C31.1046 14.5 32 15.3954 32 16.5C32 17.6046 31.1046 18.5 30 18.5C28.8954 18.5 28 17.6046 28 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35 16.5C35 15.3954 35.8954 14.5 37 14.5C38.1046 14.5 39 15.3954 39 16.5C39 17.6046 38.1046 18.5 37 18.5C35.8954 18.5 35 17.6046 35 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 16.5C42 15.3954 42.8954 14.5 44 14.5C45.1046 14.5 46 15.3954 46 16.5C46 17.6046 45.1046 18.5 44 18.5C42.8954 18.5 42 17.6046 42 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49' y='14.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56 16.5C56 15.3954 56.8954 14.5 58 14.5C59.1046 14.5 60 15.3954 60 16.5C60 17.6046 59.1046 18.5 58 18.5C56.8954 18.5 56 17.6046 56 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0 23.5C0 22.3954 0.895431 21.5 2 21.5C3.10457 21.5 4 22.3954 4 23.5C4 24.6046 3.10457 25.5 2 25.5C0.895431 25.5 0 24.6046 0 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='7' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 23.5C42 22.3954 42.8954 21.5 44 21.5C45.1046 21.5 46 22.3954 46 23.5C46 24.6046 45.1046 25.5 44 25.5C42.8954 25.5 42 24.6046 42 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56 23.5C56 22.3954 56.8954 21.5 58 21.5C59.1046 21.5 60 22.3954 60 23.5C60 24.6046 59.1046 25.5 58 25.5C56.8954 25.5 56 24.6046 56 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0 30.5C0 29.3954 0.895431 28.5 2 28.5C3.10457 28.5 4 29.3954 4 30.5C4 31.6046 3.10457 32.5 2 32.5C0.895431 32.5 0 31.6046 0 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='7' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 30.5C42 29.3954 42.8954 28.5 44 28.5C45.1046 28.5 46 29.3954 46 30.5C46 31.6046 45.1046 32.5 44 32.5C42.8954 32.5 42 31.6046 42 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56 30.5C56 29.3954 56.8954 28.5 58 28.5C59.1046 28.5 60 29.3954 60 30.5C60 31.6046 59.1046 32.5 58 32.5C56.8954 32.5 56 31.6046 56 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0 37.5C0 36.3954 0.895431 35.5 2 35.5C3.10457 35.5 4 36.3954 4 37.5C4 38.6046 3.10457 39.5 2 39.5C0.895431 39.5 0 38.6046 0 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='7' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 37.5C42 36.3954 42.8954 35.5 44 35.5C45.1046 35.5 46 36.3954 46 37.5C46 38.6046 45.1046 39.5 44 39.5C42.8954 39.5 42 38.6046 42 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56 37.5C56 36.3954 56.8954 35.5 58 35.5C59.1046 35.5 60 36.3954 60 37.5C60 38.6046 59.1046 39.5 58 39.5C56.8954 39.5 56 38.6046 56 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0 44.5C0 43.3954 0.895431 42.5 2 42.5C3.10457 42.5 4 43.3954 4 44.5C4 45.6046 3.10457 46.5 2 46.5C0.895431 46.5 0 45.6046 0 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='7' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 44.5C42 43.3954 42.8954 42.5 44 42.5C45.1046 42.5 46 43.3954 46 44.5C46 45.6046 45.1046 46.5 44 46.5C42.8954 46.5 42 45.6046 42 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M56 44.5C56 43.3954 56.8954 42.5 58 42.5C59.1046 42.5 60 43.3954 60 44.5C60 45.6046 59.1046 46.5 58 46.5C56.8954 46.5 56 45.6046 56 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0 51.5C0 50.3954 0.895431 49.5 2 49.5C3.10457 49.5 4 50.3954 4 51.5C4 52.6046 3.10457 53.5 2 53.5C0.895431 53.5 0 52.6046 0 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='7' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='14' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='21' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='28' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='35' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 51.5C42 50.3954 42.8954 49.5 44 49.5C45.1046 49.5 46 50.3954 46 51.5C46 52.6046 45.1046 53.5 44 53.5C42.8954 53.5 42 52.6046 42 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M49 51.5C49 50.3954 49.8954 49.5 51 49.5C52.1046 49.5 53 50.3954 53 51.5C53 52.6046 52.1046 53.5 51 53.5C49.8954 53.5 49 52.6046 49 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='56' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<path d='M0 58.5C0 57.3954 0.895431 56.5 2 56.5C3.10457 56.5 4 57.3954 4 58.5C4 59.6046 3.10457 60.5 2 60.5C0.895431 60.5 0 59.6046 0 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M7 58.5C7 57.3954 7.89543 56.5 9 56.5C10.1046 56.5 11 57.3954 11 58.5C11 59.6046 10.1046 60.5 9 60.5C7.89543 60.5 7 59.6046 7 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M14 58.5C14 57.3954 14.8954 56.5 16 56.5C17.1046 56.5 18 57.3954 18 58.5C18 59.6046 17.1046 60.5 16 60.5C14.8954 60.5 14 59.6046 14 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M21 58.5C21 57.3954 21.8954 56.5 23 56.5C24.1046 56.5 25 57.3954 25 58.5C25 59.6046 24.1046 60.5 23 60.5C21.8954 60.5 21 59.6046 21 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M28 58.5C28 57.3954 28.8954 56.5 30 56.5C31.1046 56.5 32 57.3954 32 58.5C32 59.6046 31.1046 60.5 30 60.5C28.8954 60.5 28 59.6046 28 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M35 58.5C35 57.3954 35.8954 56.5 37 56.5C38.1046 56.5 39 57.3954 39 58.5C39 59.6046 38.1046 60.5 37 60.5C35.8954 60.5 35 59.6046 35 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path d='M42 58.5C42 57.3954 42.8954 56.5 44 56.5C45.1046 56.5 46 57.3954 46 58.5C46 59.6046 45.1046 60.5 44 60.5C42.8954 60.5 42 59.6046 42 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='49' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
<rect opacity='0.18' x='56' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-quaternary)' />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id='clip0_1_65915'>
|
||||
<rect width='60' height='60' fill='white' transform='translate(0 0.5)' />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Sandbox
|
||||
32
web/app/components/billing/pricing/assets/self-hosted.tsx
Normal file
32
web/app/components/billing/pricing/assets/self-hosted.tsx
Normal 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
96
web/app/components/billing/pricing/assets/team.tsx
Normal file
@@ -0,0 +1,96 @@
|
||||
const Team = () => {
|
||||
return (
|
||||
<svg xmlns='http://www.w3.org/2000/svg' width='61' height='61' viewBox='0 0 61 61' fill='none'>
|
||||
<g clipPath='url(#clip0_1_4943)'>
|
||||
<rect x='0.333374' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<rect x='7.33337' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<rect x='14.3334' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M21.3334 2.5C21.3334 1.39543 22.2288 0.5 23.3334 0.5C24.4379 0.5 25.3334 1.39543 25.3334 2.5C25.3334 3.60457 24.4379 4.5 23.3334 4.5C22.2288 4.5 21.3334 3.60457 21.3334 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.3334 2.5C28.3334 1.39543 29.2288 0.5 30.3334 0.5C31.4379 0.5 32.3334 1.39543 32.3334 2.5C32.3334 3.60457 31.4379 4.5 30.3334 4.5C29.2288 4.5 28.3334 3.60457 28.3334 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='35.3334' y='0.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M42.3334 2.5C42.3334 1.39543 43.2288 0.5 44.3334 0.5C45.4379 0.5 46.3334 1.39543 46.3334 2.5C46.3334 3.60457 45.4379 4.5 44.3334 4.5C43.2288 4.5 42.3334 3.60457 42.3334 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.3334 2.5C49.3334 1.39543 50.2288 0.5 51.3334 0.5C52.4379 0.5 53.3334 1.39543 53.3334 2.5C53.3334 3.60457 52.4379 4.5 51.3334 4.5C50.2288 4.5 49.3334 3.60457 49.3334 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.3334 2.5C56.3334 1.39543 57.2288 0.5 58.3334 0.5C59.4379 0.5 60.3334 1.39543 60.3334 2.5C60.3334 3.60457 59.4379 4.5 58.3334 4.5C57.2288 4.5 56.3334 3.60457 56.3334 2.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.333374 9.5C0.333374 8.39543 1.2288 7.5 2.33337 7.5C3.43794 7.5 4.33337 8.39543 4.33337 9.5C4.33337 10.6046 3.43794 11.5 2.33337 11.5C1.2288 11.5 0.333374 10.6046 0.333374 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.33337 9.5C7.33337 8.39543 8.2288 7.5 9.33337 7.5C10.4379 7.5 11.3334 8.39543 11.3334 9.5C11.3334 10.6046 10.4379 11.5 9.33337 11.5C8.2288 11.5 7.33337 10.6046 7.33337 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3334 9.5C14.3334 8.39543 15.2288 7.5 16.3334 7.5C17.4379 7.5 18.3334 8.39543 18.3334 9.5C18.3334 10.6046 17.4379 11.5 16.3334 11.5C15.2288 11.5 14.3334 10.6046 14.3334 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='21.3334' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<rect x='28.3334' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M35.3334 9.5C35.3334 8.39543 36.2288 7.5 37.3334 7.5C38.4379 7.5 39.3334 8.39543 39.3334 9.5C39.3334 10.6046 38.4379 11.5 37.3334 11.5C36.2288 11.5 35.3334 10.6046 35.3334 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='42.3334' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<rect x='49.3334' y='7.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M56.3334 9.5C56.3334 8.39543 57.2288 7.5 58.3334 7.5C59.4379 7.5 60.3334 8.39543 60.3334 9.5C60.3334 10.6046 59.4379 11.5 58.3334 11.5C57.2288 11.5 56.3334 10.6046 56.3334 9.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.333374 16.5C0.333374 15.3954 1.2288 14.5 2.33337 14.5C3.43794 14.5 4.33337 15.3954 4.33337 16.5C4.33337 17.6046 3.43794 18.5 2.33337 18.5C1.2288 18.5 0.333374 17.6046 0.333374 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.33337 16.5C7.33337 15.3954 8.2288 14.5 9.33337 14.5C10.4379 14.5 11.3334 15.3954 11.3334 16.5C11.3334 17.6046 10.4379 18.5 9.33337 18.5C8.2288 18.5 7.33337 17.6046 7.33337 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3334 16.5C14.3334 15.3954 15.2288 14.5 16.3334 14.5C17.4379 14.5 18.3334 15.3954 18.3334 16.5C18.3334 17.6046 17.4379 18.5 16.3334 18.5C15.2288 18.5 14.3334 17.6046 14.3334 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.3334 16.5C21.3334 15.3954 22.2288 14.5 23.3334 14.5C24.4379 14.5 25.3334 15.3954 25.3334 16.5C25.3334 17.6046 24.4379 18.5 23.3334 18.5C22.2288 18.5 21.3334 17.6046 21.3334 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='28.3334' y='14.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M35.3334 16.5C35.3334 15.3954 36.2288 14.5 37.3334 14.5C38.4379 14.5 39.3334 15.3954 39.3334 16.5C39.3334 17.6046 38.4379 18.5 37.3334 18.5C36.2288 18.5 35.3334 17.6046 35.3334 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42.3334 16.5C42.3334 15.3954 43.2288 14.5 44.3334 14.5C45.4379 14.5 46.3334 15.3954 46.3334 16.5C46.3334 17.6046 45.4379 18.5 44.3334 18.5C43.2288 18.5 42.3334 17.6046 42.3334 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='49.3334' y='14.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M56.3334 16.5C56.3334 15.3954 57.2288 14.5 58.3334 14.5C59.4379 14.5 60.3334 15.3954 60.3334 16.5C60.3334 17.6046 59.4379 18.5 58.3334 18.5C57.2288 18.5 56.3334 17.6046 56.3334 16.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.333374 23.5C0.333374 22.3954 1.2288 21.5 2.33337 21.5C3.43794 21.5 4.33337 22.3954 4.33337 23.5C4.33337 24.6046 3.43794 25.5 2.33337 25.5C1.2288 25.5 0.333374 24.6046 0.333374 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.33337 23.5C7.33337 22.3954 8.2288 21.5 9.33337 21.5C10.4379 21.5 11.3334 22.3954 11.3334 23.5C11.3334 24.6046 10.4379 25.5 9.33337 25.5C8.2288 25.5 7.33337 24.6046 7.33337 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3334 23.5C14.3334 22.3954 15.2288 21.5 16.3334 21.5C17.4379 21.5 18.3334 22.3954 18.3334 23.5C18.3334 24.6046 17.4379 25.5 16.3334 25.5C15.2288 25.5 14.3334 24.6046 14.3334 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.3334 23.5C21.3334 22.3954 22.2288 21.5 23.3334 21.5C24.4379 21.5 25.3334 22.3954 25.3334 23.5C25.3334 24.6046 24.4379 25.5 23.3334 25.5C22.2288 25.5 21.3334 24.6046 21.3334 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.3334 23.5C28.3334 22.3954 29.2288 21.5 30.3334 21.5C31.4379 21.5 32.3334 22.3954 32.3334 23.5C32.3334 24.6046 31.4379 25.5 30.3334 25.5C29.2288 25.5 28.3334 24.6046 28.3334 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='35.3334' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M42.3334 23.5C42.3334 22.3954 43.2288 21.5 44.3334 21.5C45.4379 21.5 46.3334 22.3954 46.3334 23.5C46.3334 24.6046 45.4379 25.5 44.3334 25.5C43.2288 25.5 42.3334 24.6046 42.3334 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.3334 23.5C49.3334 22.3954 50.2288 21.5 51.3334 21.5C52.4379 21.5 53.3334 22.3954 53.3334 23.5C53.3334 24.6046 52.4379 25.5 51.3334 25.5C50.2288 25.5 49.3334 24.6046 49.3334 23.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='56.3334' y='21.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M0.333374 30.5C0.333374 29.3954 1.2288 28.5 2.33337 28.5C3.43794 28.5 4.33337 29.3954 4.33337 30.5C4.33337 31.6046 3.43794 32.5 2.33337 32.5C1.2288 32.5 0.333374 31.6046 0.333374 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.33337 30.5C7.33337 29.3954 8.2288 28.5 9.33337 28.5C10.4379 28.5 11.3334 29.3954 11.3334 30.5C11.3334 31.6046 10.4379 32.5 9.33337 32.5C8.2288 32.5 7.33337 31.6046 7.33337 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3334 30.5C14.3334 29.3954 15.2288 28.5 16.3334 28.5C17.4379 28.5 18.3334 29.3954 18.3334 30.5C18.3334 31.6046 17.4379 32.5 16.3334 32.5C15.2288 32.5 14.3334 31.6046 14.3334 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.3334 30.5C21.3334 29.3954 22.2288 28.5 23.3334 28.5C24.4379 28.5 25.3334 29.3954 25.3334 30.5C25.3334 31.6046 24.4379 32.5 23.3334 32.5C22.2288 32.5 21.3334 31.6046 21.3334 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.3334 30.5C28.3334 29.3954 29.2288 28.5 30.3334 28.5C31.4379 28.5 32.3334 29.3954 32.3334 30.5C32.3334 31.6046 31.4379 32.5 30.3334 32.5C29.2288 32.5 28.3334 31.6046 28.3334 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='35.3334' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M42.3334 30.5C42.3334 29.3954 43.2288 28.5 44.3334 28.5C45.4379 28.5 46.3334 29.3954 46.3334 30.5C46.3334 31.6046 45.4379 32.5 44.3334 32.5C43.2288 32.5 42.3334 31.6046 42.3334 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.3334 30.5C49.3334 29.3954 50.2288 28.5 51.3334 28.5C52.4379 28.5 53.3334 29.3954 53.3334 30.5C53.3334 31.6046 52.4379 32.5 51.3334 32.5C50.2288 32.5 49.3334 31.6046 49.3334 30.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='56.3334' y='28.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M0.333374 37.5C0.333374 36.3954 1.2288 35.5 2.33337 35.5C3.43794 35.5 4.33337 36.3954 4.33337 37.5C4.33337 38.6046 3.43794 39.5 2.33337 39.5C1.2288 39.5 0.333374 38.6046 0.333374 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.33337 37.5C7.33337 36.3954 8.2288 35.5 9.33337 35.5C10.4379 35.5 11.3334 36.3954 11.3334 37.5C11.3334 38.6046 10.4379 39.5 9.33337 39.5C8.2288 39.5 7.33337 38.6046 7.33337 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3334 37.5C14.3334 36.3954 15.2288 35.5 16.3334 35.5C17.4379 35.5 18.3334 36.3954 18.3334 37.5C18.3334 38.6046 17.4379 39.5 16.3334 39.5C15.2288 39.5 14.3334 38.6046 14.3334 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.3334 37.5C21.3334 36.3954 22.2288 35.5 23.3334 35.5C24.4379 35.5 25.3334 36.3954 25.3334 37.5C25.3334 38.6046 24.4379 39.5 23.3334 39.5C22.2288 39.5 21.3334 38.6046 21.3334 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.3334 37.5C28.3334 36.3954 29.2288 35.5 30.3334 35.5C31.4379 35.5 32.3334 36.3954 32.3334 37.5C32.3334 38.6046 31.4379 39.5 30.3334 39.5C29.2288 39.5 28.3334 38.6046 28.3334 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='35.3334' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M42.3334 37.5C42.3334 36.3954 43.2288 35.5 44.3334 35.5C45.4379 35.5 46.3334 36.3954 46.3334 37.5C46.3334 38.6046 45.4379 39.5 44.3334 39.5C43.2288 39.5 42.3334 38.6046 42.3334 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.3334 37.5C49.3334 36.3954 50.2288 35.5 51.3334 35.5C52.4379 35.5 53.3334 36.3954 53.3334 37.5C53.3334 38.6046 52.4379 39.5 51.3334 39.5C50.2288 39.5 49.3334 38.6046 49.3334 37.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='56.3334' y='35.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M0.333374 44.5C0.333374 43.3954 1.2288 42.5 2.33337 42.5C3.43794 42.5 4.33337 43.3954 4.33337 44.5C4.33337 45.6046 3.43794 46.5 2.33337 46.5C1.2288 46.5 0.333374 45.6046 0.333374 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.33337 44.5C7.33337 43.3954 8.2288 42.5 9.33337 42.5C10.4379 42.5 11.3334 43.3954 11.3334 44.5C11.3334 45.6046 10.4379 46.5 9.33337 46.5C8.2288 46.5 7.33337 45.6046 7.33337 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3334 44.5C14.3334 43.3954 15.2288 42.5 16.3334 42.5C17.4379 42.5 18.3334 43.3954 18.3334 44.5C18.3334 45.6046 17.4379 46.5 16.3334 46.5C15.2288 46.5 14.3334 45.6046 14.3334 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M21.3334 44.5C21.3334 43.3954 22.2288 42.5 23.3334 42.5C24.4379 42.5 25.3334 43.3954 25.3334 44.5C25.3334 45.6046 24.4379 46.5 23.3334 46.5C22.2288 46.5 21.3334 45.6046 21.3334 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='28.3334' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M35.3334 44.5C35.3334 43.3954 36.2288 42.5 37.3334 42.5C38.4379 42.5 39.3334 43.3954 39.3334 44.5C39.3334 45.6046 38.4379 46.5 37.3334 46.5C36.2288 46.5 35.3334 45.6046 35.3334 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M42.3334 44.5C42.3334 43.3954 43.2288 42.5 44.3334 42.5C45.4379 42.5 46.3334 43.3954 46.3334 44.5C46.3334 45.6046 45.4379 46.5 44.3334 46.5C43.2288 46.5 42.3334 45.6046 42.3334 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='49.3334' y='42.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M56.3334 44.5C56.3334 43.3954 57.2288 42.5 58.3334 42.5C59.4379 42.5 60.3334 43.3954 60.3334 44.5C60.3334 45.6046 59.4379 46.5 58.3334 46.5C57.2288 46.5 56.3334 45.6046 56.3334 44.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M0.333374 51.5C0.333374 50.3954 1.2288 49.5 2.33337 49.5C3.43794 49.5 4.33337 50.3954 4.33337 51.5C4.33337 52.6046 3.43794 53.5 2.33337 53.5C1.2288 53.5 0.333374 52.6046 0.333374 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M7.33337 51.5C7.33337 50.3954 8.2288 49.5 9.33337 49.5C10.4379 49.5 11.3334 50.3954 11.3334 51.5C11.3334 52.6046 10.4379 53.5 9.33337 53.5C8.2288 53.5 7.33337 52.6046 7.33337 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M14.3334 51.5C14.3334 50.3954 15.2288 49.5 16.3334 49.5C17.4379 49.5 18.3334 50.3954 18.3334 51.5C18.3334 52.6046 17.4379 53.5 16.3334 53.5C15.2288 53.5 14.3334 52.6046 14.3334 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='21.3334' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<rect x='28.3334' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M35.3334 51.5C35.3334 50.3954 36.2288 49.5 37.3334 49.5C38.4379 49.5 39.3334 50.3954 39.3334 51.5C39.3334 52.6046 38.4379 53.5 37.3334 53.5C36.2288 53.5 35.3334 52.6046 35.3334 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='42.3334' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<rect x='49.3334' y='49.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M56.3334 51.5C56.3334 50.3954 57.2288 49.5 58.3334 49.5C59.4379 49.5 60.3334 50.3954 60.3334 51.5C60.3334 52.6046 59.4379 53.5 58.3334 53.5C57.2288 53.5 56.3334 52.6046 56.3334 51.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='0.333374' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<rect x='7.33337' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<rect x='14.3334' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M21.3334 58.5C21.3334 57.3954 22.2288 56.5 23.3334 56.5C24.4379 56.5 25.3334 57.3954 25.3334 58.5C25.3334 59.6046 24.4379 60.5 23.3334 60.5C22.2288 60.5 21.3334 59.6046 21.3334 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M28.3334 58.5C28.3334 57.3954 29.2288 56.5 30.3334 56.5C31.4379 56.5 32.3334 57.3954 32.3334 58.5C32.3334 59.6046 31.4379 60.5 30.3334 60.5C29.2288 60.5 28.3334 59.6046 28.3334 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<rect x='35.3334' y='56.5' width='4' height='4' rx='2' fill='var(--color-text-secondary)' />
|
||||
<path opacity='0.18' d='M42.3334 58.5C42.3334 57.3954 43.2288 56.5 44.3334 56.5C45.4379 56.5 46.3334 57.3954 46.3334 58.5C46.3334 59.6046 45.4379 60.5 44.3334 60.5C43.2288 60.5 42.3334 59.6046 42.3334 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M49.3334 58.5C49.3334 57.3954 50.2288 56.5 51.3334 56.5C52.4379 56.5 53.3334 57.3954 53.3334 58.5C53.3334 59.6046 52.4379 60.5 51.3334 60.5C50.2288 60.5 49.3334 59.6046 49.3334 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
<path opacity='0.18' d='M56.3334 58.5C56.3334 57.3954 57.2288 56.5 58.3334 56.5C59.4379 56.5 60.3334 57.3954 60.3334 58.5C60.3334 59.6046 59.4379 60.5 58.3334 60.5C57.2288 60.5 56.3334 59.6046 56.3334 58.5Z' fill='var(--color-text-quaternary)' />
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id='clip0_1_4943'>
|
||||
<rect width='60' height='60' fill='white' transform='translate(0.333374 0.5)' />
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Team
|
||||
33
web/app/components/billing/pricing/footer.tsx
Normal file
33
web/app/components/billing/pricing/footer.tsx
Normal 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
42
web/app/components/billing/pricing/header.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
import React from 'react'
|
||||
import DifyLogo from '../../base/logo/dify-logo'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import Button from '../../base/button'
|
||||
import { RiCloseLine } from '@remixicon/react'
|
||||
|
||||
type HeaderProps = {
|
||||
onClose: () => void
|
||||
}
|
||||
|
||||
const Header = ({
|
||||
onClose,
|
||||
}: HeaderProps) => {
|
||||
const { t } = useTranslation()
|
||||
|
||||
return (
|
||||
<div className='flex min-h-[105px] w-full justify-center px-10'>
|
||||
<div className='relative flex max-w-[1680px] grow flex-col justify-end gap-y-1 border-x border-divider-accent p-6 pt-8'>
|
||||
<div className='flex items-end'>
|
||||
<div className='py-[5px]'>
|
||||
<DifyLogo className='h-[27px] w-[60px]' />
|
||||
</div>
|
||||
<span className='bg-billing-plan-title-bg bg-clip-text px-1.5 font-instrument text-[37px] italic leading-[1.2] text-transparent'>
|
||||
{t('billing.plansCommon.title.plans')}
|
||||
</span>
|
||||
</div>
|
||||
<p className='system-sm-regular text-text-tertiary'>
|
||||
{t('billing.plansCommon.title.description')}
|
||||
</p>
|
||||
<Button
|
||||
variant='secondary'
|
||||
className='absolute bottom-[40.5px] right-[-18px] z-10 size-9 rounded-full p-2'
|
||||
onClick={onClose}
|
||||
>
|
||||
<RiCloseLine className='size-5' />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Header)
|
||||
@@ -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,
|
||||
)
|
||||
}
|
||||
|
||||
@@ -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
67
web/app/components/billing/pricing/plan-switcher/index.tsx
Normal 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)
|
||||
@@ -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
41
web/app/components/billing/pricing/plan-switcher/tab.tsx
Normal 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
|
||||
@@ -0,0 +1,53 @@
|
||||
import React from 'react'
|
||||
import type { BasicPlan } from '../../../type'
|
||||
import { Plan } from '../../../type'
|
||||
import cn from '@/utils/classnames'
|
||||
import { RiArrowRightLine } from '@remixicon/react'
|
||||
|
||||
const BUTTON_CLASSNAME = {
|
||||
[Plan.sandbox]: {
|
||||
btnClassname: 'bg-components-button-tertiary-bg hover:bg-components-button-tertiary-bg-hover text-text-primary',
|
||||
btnDisabledClassname: 'bg-components-button-tertiary-bg-disabled hover:bg-components-button-tertiary-bg-disabled text-text-disabled',
|
||||
},
|
||||
[Plan.professional]: {
|
||||
btnClassname: 'bg-saas-dify-blue-static hover:bg-saas-dify-blue-static-hover text-text-primary-on-surface',
|
||||
btnDisabledClassname: 'bg-components-button-tertiary-bg-disabled hover:bg-components-button-tertiary-bg-disabled text-text-disabled',
|
||||
},
|
||||
[Plan.team]: {
|
||||
btnClassname: 'bg-saas-background-inverted hover:bg-saas-background-inverted-hover text-background-default',
|
||||
btnDisabledClassname: 'bg-components-button-tertiary-bg-disabled hover:bg-components-button-tertiary-bg-disabled text-text-disabled',
|
||||
},
|
||||
}
|
||||
|
||||
type ButtonProps = {
|
||||
plan: BasicPlan
|
||||
isPlanDisabled: boolean
|
||||
btnText: string
|
||||
handleGetPayUrl: () => void
|
||||
}
|
||||
|
||||
const Button = ({
|
||||
plan,
|
||||
isPlanDisabled,
|
||||
btnText,
|
||||
handleGetPayUrl,
|
||||
}: ButtonProps) => {
|
||||
return (
|
||||
<button
|
||||
type='button'
|
||||
disabled={isPlanDisabled}
|
||||
className={cn(
|
||||
'system-xl-semibold flex items-center gap-x-2 py-3 pl-5 pr-4',
|
||||
BUTTON_CLASSNAME[plan].btnClassname,
|
||||
isPlanDisabled && BUTTON_CLASSNAME[plan].btnDisabledClassname,
|
||||
isPlanDisabled && 'cursor-not-allowed',
|
||||
)}
|
||||
onClick={handleGetPayUrl}
|
||||
>
|
||||
<span className='grow text-start'>{btnText}</span>
|
||||
{!isPlanDisabled && <RiArrowRightLine className='size-5 shrink-0' />}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Button)
|
||||
@@ -0,0 +1,133 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useMemo } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import type { BasicPlan } from '../../../type'
|
||||
import { Plan } from '../../../type'
|
||||
import { ALL_PLANS } from '../../../config'
|
||||
import Toast from '../../../../base/toast'
|
||||
import { PlanRange } from '../../plan-switcher/plan-range-switcher'
|
||||
import { useAppContext } from '@/context/app-context'
|
||||
import { fetchSubscriptionUrls } from '@/service/billing'
|
||||
import List from './list'
|
||||
import Button from './button'
|
||||
import { Professional, Sandbox, Team } from '../../assets'
|
||||
|
||||
const ICON_MAP = {
|
||||
[Plan.sandbox]: <Sandbox />,
|
||||
[Plan.professional]: <Professional />,
|
||||
[Plan.team]: <Team />,
|
||||
}
|
||||
|
||||
type CloudPlanItemProps = {
|
||||
currentPlan: BasicPlan
|
||||
plan: BasicPlan
|
||||
planRange: PlanRange
|
||||
canPay: boolean
|
||||
}
|
||||
|
||||
const CloudPlanItem: FC<CloudPlanItemProps> = ({
|
||||
plan,
|
||||
currentPlan,
|
||||
planRange,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const [loading, setLoading] = React.useState(false)
|
||||
const i18nPrefix = `billing.plans.${plan}`
|
||||
const isFreePlan = plan === Plan.sandbox
|
||||
const isMostPopularPlan = plan === Plan.professional
|
||||
const planInfo = ALL_PLANS[plan]
|
||||
const isYear = planRange === PlanRange.yearly
|
||||
const isCurrent = plan === currentPlan
|
||||
const isPlanDisabled = planInfo.level <= ALL_PLANS[currentPlan].level
|
||||
const { isCurrentWorkspaceManager } = useAppContext()
|
||||
|
||||
const btnText = useMemo(() => {
|
||||
if (isCurrent)
|
||||
return t('billing.plansCommon.currentPlan')
|
||||
|
||||
return ({
|
||||
[Plan.sandbox]: t('billing.plansCommon.startForFree'),
|
||||
[Plan.professional]: t('billing.plansCommon.startBuilding'),
|
||||
[Plan.team]: t('billing.plansCommon.getStarted'),
|
||||
})[plan]
|
||||
}, [isCurrent, plan, t])
|
||||
|
||||
const handleGetPayUrl = async () => {
|
||||
if (loading)
|
||||
return
|
||||
|
||||
if (isPlanDisabled)
|
||||
return
|
||||
|
||||
if (isFreePlan)
|
||||
return
|
||||
|
||||
// Only workspace manager can buy plan
|
||||
if (!isCurrentWorkspaceManager) {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: t('billing.buyPermissionDeniedTip'),
|
||||
className: 'z-[1001]',
|
||||
})
|
||||
return
|
||||
}
|
||||
setLoading(true)
|
||||
try {
|
||||
const res = await fetchSubscriptionUrls(plan, isYear ? 'year' : 'month')
|
||||
// Adb Block additional tracking block the gtag, so we need to redirect directly
|
||||
window.location.href = res.url
|
||||
}
|
||||
finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div className='flex min-w-0 flex-1 flex-col pb-3'>
|
||||
<div className='flex flex-col px-5 py-4'>
|
||||
<div className='flex flex-col gap-y-6 px-1 pt-10'>
|
||||
{ICON_MAP[plan]}
|
||||
<div className='flex min-h-[104px] flex-col gap-y-2'>
|
||||
<div className='flex items-center gap-x-2.5'>
|
||||
<div className='text-[30px] font-medium leading-[1.2] text-text-primary'>{t(`${i18nPrefix}.name`)}</div>
|
||||
{
|
||||
isMostPopularPlan && (
|
||||
<div className='flex items-center justify-center bg-saas-dify-blue-static px-1.5 py-1'>
|
||||
<span className='system-2xs-semibold-uppercase text-text-primary-on-surface'>
|
||||
{t('billing.plansCommon.mostPopular')}
|
||||
</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</div>
|
||||
<div className='system-sm-regular text-text-secondary'>{t(`${i18nPrefix}.description`)}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Price */}
|
||||
<div className='flex items-end gap-x-2 px-1 pb-8 pt-4'>
|
||||
{isFreePlan && (
|
||||
<span className='title-4xl-semi-bold text-text-primary'>{t('billing.plansCommon.free')}</span>
|
||||
)}
|
||||
{!isFreePlan && (
|
||||
<>
|
||||
{isYear && <span className='title-4xl-semi-bold text-text-quaternary line-through'>${planInfo.price * 12}</span>}
|
||||
<span className='title-4xl-semi-bold text-text-primary'>${isYear ? planInfo.price * 10 : planInfo.price}</span>
|
||||
<span className='system-md-regular pb-0.5 text-text-tertiary'>
|
||||
{t('billing.plansCommon.priceTip')}
|
||||
{t(`billing.plansCommon.${!isYear ? 'month' : 'year'}`)}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
plan={plan}
|
||||
isPlanDisabled={isPlanDisabled}
|
||||
btnText={btnText}
|
||||
handleGetPayUrl={handleGetPayUrl}
|
||||
/>
|
||||
</div>
|
||||
<List plan={plan} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(CloudPlanItem)
|
||||
@@ -0,0 +1,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)
|
||||
@@ -0,0 +1,25 @@
|
||||
import React from 'react'
|
||||
import Tooltip from './tooltip'
|
||||
|
||||
type ItemProps = {
|
||||
label: string
|
||||
tooltip?: string
|
||||
}
|
||||
|
||||
const Item = ({
|
||||
label,
|
||||
tooltip,
|
||||
}: ItemProps) => {
|
||||
return (
|
||||
<div className='flex items-center'>
|
||||
<span className='system-sm-regular grow text-text-secondary'>{label}</span>
|
||||
{tooltip && (
|
||||
<Tooltip
|
||||
content={tooltip}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Item)
|
||||
@@ -0,0 +1,23 @@
|
||||
import React from 'react'
|
||||
import { RiInfoI } from '@remixicon/react'
|
||||
|
||||
type TooltipProps = {
|
||||
content: string
|
||||
}
|
||||
|
||||
const Tooltip = ({
|
||||
content,
|
||||
}: TooltipProps) => {
|
||||
return (
|
||||
<div className='group relative z-10 size-[18px] overflow-visible'>
|
||||
<div className='system-xs-regular absolute bottom-0 right-0 -z-10 hidden w-[260px] bg-saas-dify-blue-static px-5 py-[18px] text-text-primary-on-surface group-hover:block'>
|
||||
{content}
|
||||
</div>
|
||||
<div className='flex h-full w-full items-center justify-center rounded-[4px] bg-state-base-hover transition-all duration-500 ease-in-out group-hover:rounded-none group-hover:bg-saas-dify-blue-static'>
|
||||
<RiInfoI className='size-3.5 text-text-tertiary group-hover:text-text-primary-on-surface' />
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Tooltip)
|
||||
73
web/app/components/billing/pricing/plans/index.tsx
Normal file
73
web/app/components/billing/pricing/plans/index.tsx
Normal 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
|
||||
@@ -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)
|
||||
@@ -0,0 +1,124 @@
|
||||
'use client'
|
||||
import type { FC } from 'react'
|
||||
import React, { useCallback } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { SelfHostedPlan } from '../../../type'
|
||||
import { contactSalesUrl, getStartedWithCommunityUrl, getWithPremiumUrl } from '../../../config'
|
||||
import Toast from '../../../../base/toast'
|
||||
import cn from '@/utils/classnames'
|
||||
import { useAppContext } from '@/context/app-context'
|
||||
import Button from './button'
|
||||
import List from './list'
|
||||
import { Azure, GoogleCloud } from '@/app/components/base/icons/src/public/billing'
|
||||
import { Community, Enterprise, EnterpriseNoise, Premium, PremiumNoise } from '../../assets'
|
||||
|
||||
const STYLE_MAP = {
|
||||
[SelfHostedPlan.community]: {
|
||||
icon: <Community />,
|
||||
bg: '',
|
||||
noise: null,
|
||||
},
|
||||
[SelfHostedPlan.premium]: {
|
||||
icon: <Premium />,
|
||||
bg: 'bg-billing-plan-card-premium-bg opacity-10',
|
||||
noise: (
|
||||
<div className='absolute -top-12 left-0 right-0 -z-10'>
|
||||
<PremiumNoise />
|
||||
</div>
|
||||
),
|
||||
},
|
||||
[SelfHostedPlan.enterprise]: {
|
||||
icon: <Enterprise />,
|
||||
bg: 'bg-billing-plan-card-enterprise-bg opacity-10',
|
||||
noise: (
|
||||
<div className='absolute -top-12 left-0 right-0 -z-10'>
|
||||
<EnterpriseNoise />
|
||||
</div>
|
||||
),
|
||||
},
|
||||
}
|
||||
|
||||
type SelfHostedPlanItemProps = {
|
||||
plan: SelfHostedPlan
|
||||
}
|
||||
|
||||
const SelfHostedPlanItem: FC<SelfHostedPlanItemProps> = ({
|
||||
plan,
|
||||
}) => {
|
||||
const { t } = useTranslation()
|
||||
const i18nPrefix = `billing.plans.${plan}`
|
||||
const isFreePlan = plan === SelfHostedPlan.community
|
||||
const isPremiumPlan = plan === SelfHostedPlan.premium
|
||||
const isEnterprisePlan = plan === SelfHostedPlan.enterprise
|
||||
const { isCurrentWorkspaceManager } = useAppContext()
|
||||
|
||||
const handleGetPayUrl = useCallback(() => {
|
||||
// Only workspace manager can buy plan
|
||||
if (!isCurrentWorkspaceManager) {
|
||||
Toast.notify({
|
||||
type: 'error',
|
||||
message: t('billing.buyPermissionDeniedTip'),
|
||||
className: 'z-[1001]',
|
||||
})
|
||||
return
|
||||
}
|
||||
if (isFreePlan) {
|
||||
window.location.href = getStartedWithCommunityUrl
|
||||
return
|
||||
}
|
||||
if (isPremiumPlan) {
|
||||
window.location.href = getWithPremiumUrl
|
||||
return
|
||||
}
|
||||
|
||||
if (isEnterprisePlan)
|
||||
window.location.href = contactSalesUrl
|
||||
}, [isCurrentWorkspaceManager, isFreePlan, isPremiumPlan, isEnterprisePlan, t])
|
||||
|
||||
return (
|
||||
<div className='relative flex flex-1 flex-col overflow-hidden'>
|
||||
<div className={cn('absolute inset-0 -z-10', STYLE_MAP[plan].bg)} />
|
||||
{/* Noise Effect */}
|
||||
{STYLE_MAP[plan].noise}
|
||||
<div className='flex flex-col px-5 py-4'>
|
||||
<div className=' flex flex-col gap-y-6 px-1 pt-10'>
|
||||
{STYLE_MAP[plan].icon}
|
||||
<div className='flex min-h-[104px] flex-col gap-y-2'>
|
||||
<div className='text-[30px] font-medium leading-[1.2] text-text-primary'>{t(`${i18nPrefix}.name`)}</div>
|
||||
<div className='system-md-regular line-clamp-2 text-text-secondary'>{t(`${i18nPrefix}.description`)}</div>
|
||||
</div>
|
||||
</div>
|
||||
{/* Price */}
|
||||
<div className='flex items-end gap-x-2 px-1 pb-8 pt-4'>
|
||||
<div className='title-4xl-semi-bold shrink-0 text-text-primary'>{t(`${i18nPrefix}.price`)}</div>
|
||||
{!isFreePlan && (
|
||||
<span className='system-md-regular pb-0.5 text-text-tertiary'>
|
||||
{t(`${i18nPrefix}.priceTip`)}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<Button
|
||||
plan={plan}
|
||||
handleGetPayUrl={handleGetPayUrl}
|
||||
/>
|
||||
</div>
|
||||
<List plan={plan} />
|
||||
{isPremiumPlan && (
|
||||
<div className='flex grow flex-col justify-end gap-y-2 p-6 pt-0'>
|
||||
<div className='flex items-center gap-x-1'>
|
||||
<div className='flex size-8 items-center justify-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default shadow-xs shadow-shadow-shadow-3'>
|
||||
<Azure />
|
||||
</div>
|
||||
<div className='flex size-8 items-center justify-center rounded-lg border-[0.5px] border-components-panel-border-subtle bg-background-default shadow-xs shadow-shadow-shadow-3'>
|
||||
<GoogleCloud />
|
||||
</div>
|
||||
</div>
|
||||
<span className='system-xs-regular text-text-tertiary'>
|
||||
{t('billing.plans.premium.comingSoon')}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default React.memo(SelfHostedPlanItem)
|
||||
@@ -0,0 +1,35 @@
|
||||
import React from 'react'
|
||||
import type { SelfHostedPlan } from '@/app/components/billing/type'
|
||||
import { Trans, useTranslation } from 'react-i18next'
|
||||
import Item from './item'
|
||||
|
||||
type ListProps = {
|
||||
plan: SelfHostedPlan
|
||||
}
|
||||
|
||||
const List = ({
|
||||
plan,
|
||||
}: ListProps) => {
|
||||
const { t } = useTranslation()
|
||||
const i18nPrefix = `billing.plans.${plan}`
|
||||
const features = t(`${i18nPrefix}.features`, { returnObjects: true }) as string[]
|
||||
|
||||
return (
|
||||
<div className='flex flex-col gap-y-[10px] p-6'>
|
||||
<div className='system-md-semibold text-text-secondary'>
|
||||
<Trans
|
||||
i18nKey={t(`${i18nPrefix}.includesTitle`)}
|
||||
components={{ highlight: <span className='text-text-warning'></span> }}
|
||||
/>
|
||||
</div>
|
||||
{features.map(feature =>
|
||||
<Item
|
||||
key={`${plan}-${feature}`}
|
||||
label={feature}
|
||||
/>,
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(List)
|
||||
@@ -0,0 +1,21 @@
|
||||
import React from 'react'
|
||||
import { RiCheckLine } from '@remixicon/react'
|
||||
|
||||
type ItemProps = {
|
||||
label: string
|
||||
}
|
||||
|
||||
const Item = ({
|
||||
label,
|
||||
}: ItemProps) => {
|
||||
return (
|
||||
<div className='flex items-center gap-x-1'>
|
||||
<div className='py-px'>
|
||||
<RiCheckLine className='size-4 shrink-0 text-text-tertiary' />
|
||||
</div>
|
||||
<span className='system-sm-regular grow text-text-secondary'>{label}</span>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default React.memo(Item)
|
||||
@@ -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)
|
||||
@@ -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)
|
||||
Reference in New Issue
Block a user