feat(billing): add noise effects to pricing plans and update rendering logic

web/app/components/billing/pricing/assets/enterprise-noise.tsx

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

web/app/components/billing/pricing/assets/index.tsx

@@ -6,3 +6,7 @@ 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'

web/app/components/billing/pricing/assets/noise-bottom.tsx

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

web/app/components/billing/pricing/assets/noise-top.tsx

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

web/app/components/billing/pricing/assets/premium-noise.tsx

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

web/app/components/billing/pricing/index.tsx

@@ -11,6 +11,7 @@ import { useKeyPress } from 'ahooks'
 import { useProviderContext } from '@/context/provider-context'
 import { useAppContext } from '@/context/app-context'
 import { useGetPricingPageLanguage } from '@/context/i18n'
+import { NoiseBottom, NoiseTop } from './assets'
 
 export type Category = 'cloud' | 'self'
 
@@ -39,7 +40,10 @@ const Pricing: FC<PricingProps> = ({
       className='fixed inset-0 bottom-0 left-0 right-0 top-0 z-[1000] overflow-auto bg-saas-background'
       onClick={e => e.stopPropagation()}
     >
-      <div className='relative grid min-h-full min-w-[1200px] grid-rows-[1fr_auto_auto_1fr]'>
+      <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'>
+          <NoiseTop />
+        </div>
         <Header onClose={onCancel} />
         <PlanSwitcher
           currentCategory={currentCategory}
@@ -54,6 +58,9 @@ const Pricing: FC<PricingProps> = ({
           canPay={canPay}
         />
         <Footer pricingPageURL={pricingPageURL} />
+        <div className='absolute -bottom-12 left-0 right-0'>
+          <NoiseBottom />
+        </div>
       </div>
     </div>,
     document.body,

web/app/components/billing/pricing/plans/self-hosted-plan-item/index.tsx

@@ -10,20 +10,31 @@ 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, Premium } from '../../assets'
+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'>
+        <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'>
+        <EnterpriseNoise />
+      </div>
+    ),
   },
 }
 
@@ -65,8 +76,10 @@ const SelfHostedPlanItem: FC<SelfHostedPlanItemProps> = ({
   }, [isCurrentWorkspaceManager, isFreePlan, isPremiumPlan, isEnterprisePlan, t])
 
   return (
-    <div className='relative flex flex-1 flex-col'>
+    <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}