dify

dify/web/app/components/base/grid-mask/index.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/nextjs'
+import GridMask from '.'
+
+const meta = {
+  title: 'Base/Layout/GridMask',
+  component: GridMask,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: 'Displays a soft grid overlay with gradient mask, useful for framing hero sections or marketing callouts.',
+      },
+    },
+  },
+  args: {
+    wrapperClassName: 'rounded-2xl p-10',
+    canvasClassName: '',
+    gradientClassName: '',
+    children: (
+      <div className="relative z-10 flex flex-col gap-3 text-left text-white">
+        <span className="text-xs uppercase tracking-[0.16em] text-white/70">Grid Mask Demo</span>
+        <span className="text-2xl font-semibold leading-tight">Beautiful backgrounds for feature highlights</span>
+        <p className="max-w-md text-sm text-white/80">
+          Place any content inside the mask. On dark backgrounds the grid and soft gradient add depth without distracting from the main message.
+        </p>
+      </div>
+    ),
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof GridMask>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Playground: Story = {}
+
+export const CustomBackground: Story = {
+  args: {
+    wrapperClassName: 'rounded-3xl p-10 bg-[#0A0A1A]',
+    gradientClassName: 'bg-gradient-to-r from-[#0A0A1A]/90 via-[#101030]/60 to-[#05050A]/90',
+    children: (
+      <div className="flex flex-col gap-2 text-white">
+        <span className="text-sm font-medium text-white/80">Custom gradient</span>
+        <span className="text-3xl font-semibold leading-tight">Use your own colors</span>
+        <p className="max-w-md text-sm text-white/70">
+          Override gradient and canvas classes to match brand palettes while keeping the grid texture.
+        </p>
+      </div>
+    ),
+  },
+}

dify/web/app/components/base/grid-mask/index.tsx

@@ -0,0 +1,26 @@
+import type { FC } from 'react'
+import Style from './style.module.css'
+import classNames from '@/utils/classnames'
+
+type GridMaskProps = {
+  children: React.ReactNode
+  wrapperClassName?: string
+  canvasClassName?: string
+  gradientClassName?: string
+}
+const GridMask: FC<GridMaskProps> = ({
+  children,
+  wrapperClassName,
+  canvasClassName,
+  gradientClassName,
+}) => {
+  return (
+    <div className={classNames('relative bg-saas-background', wrapperClassName)}>
+      <div className={classNames('absolute inset-0 z-0 h-full w-full opacity-70', canvasClassName, Style.gridBg)} />
+      <div className={classNames('absolute z-[1] h-full w-full rounded-lg bg-grid-mask-background', gradientClassName)} />
+      <div className='relative z-[2]'>{children}</div>
+    </div>
+  )
+}
+
+export default GridMask

dify/web/app/components/base/grid-mask/style.module.css

@@ -0,0 +1,5 @@
+.gridBg{
+  background-image: url(./Grid.svg);
+  background-repeat: repeat;
+  background-position: 0 0;
+}