@baishuyun/ai-design 1.0.0

package/src/components/ui/popover.tsx

@@ -0,0 +1,50 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { cn } from '../../lib/utils';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+type PopoverContentProps = React.ComponentPropsWithoutRef<
+  typeof PopoverPrimitive.Content
+> & {
+  portalContainer?: HTMLElement | null;
+};
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  PopoverContentProps
+>(
+  (
+    { className, align = 'start', sideOffset = 4, portalContainer, ...props },
+    ref
+  ) => (
+    <PopoverPrimitive.Portal container={portalContainer ?? undefined}>
+      <PopoverPrimitive.Content
+        ref={ref}
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'z-50 w-60 rounded-[4px] border bg-white p-1 text-[#121111] shadow-[0_0_16px_rgba(0,0,0,0.1)] outline-none',
+          'data-[state=open]:animate-in data-[state=closed]:animate-out',
+          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
+          'data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
+          'data-[side=bottom]:slide-in-from-top-2',
+          'data-[side=left]:slide-in-from-right-2',
+          'data-[side=right]:slide-in-from-left-2',
+          'data-[side=top]:slide-in-from-bottom-2',
+          'origin-[--radix-popover-content-transform-origin]',
+          className
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  )
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/src/components/ui/spinner.tsx

@@ -0,0 +1,17 @@
+import { Loader2Icon } from "lucide-react";
+
+import { cn } from "../../lib/utils";
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    // @ts-ignore
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  );
+}
+
+export { Spinner };

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+
+import { cn } from '../../lib/utils';
+
+const TooltipZIndexContext = React.createContext<number | undefined>(undefined);
+
+type TooltipProviderProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider> & {
+  zIndex?: number;
+};
+
+const TooltipProvider = ({ zIndex, children, ...props }: TooltipProviderProps) => (
+  <TooltipZIndexContext.Provider value={zIndex}>
+    <TooltipPrimitive.Provider {...props}>{children}</TooltipPrimitive.Provider>
+  </TooltipZIndexContext.Provider>
+);
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+type TooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+  portalContainer?: HTMLElement | null;
+};
+
+const TooltipContent = React.forwardRef<
+  React.ElementRef<typeof TooltipPrimitive.Content>,
+  TooltipContentProps
+>(({ className, sideOffset = 4, portalContainer, style, ...props }, ref) => {
+  const zIndexFromProvider = React.useContext(TooltipZIndexContext);
+
+  return (
+    <TooltipPrimitive.Portal container={portalContainer ?? undefined}>
+      <TooltipPrimitive.Content
+        ref={ref}
+        sideOffset={sideOffset}
+        className={cn(
+          // 'z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 origin-[--radix-tooltip-content-transform-origin]',
+          className
+        )}
+        style={zIndexFromProvider != null ? { ...style, zIndex: zIndexFromProvider } : style}
+        {...props}
+      >
+        {props.children}
+        <TooltipPrimitive.Arrow className="fill-[#525867] stroke-[#525867] stroke-[2px] stroke-linejoin-round [paint-order:stroke_fill]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+});
+
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/components/user-txt-msg-bubble.tsx

@@ -0,0 +1,19 @@
+export interface UserTextMsgBubbleProps {
+  text?: string;
+  children?: string;
+}
+
+export const UserTextMsgBubble = ({ text, children }: UserTextMsgBubbleProps) => {
+  return (
+    <div
+      className="px-2.5 py-[7px] text-[#0265FF] text-[14px] w-fit"
+      style={{
+        borderRadius: `10px 0 10px 10px`,
+        wordWrap: 'break-word',
+        background: `linear-gradient(180deg, #DBE9FF 0%, #E9FFFD 100%)`,
+      }}
+    >
+      {text || children}
+    </div>
+  );
+};

package/src/components/warning-msg.tsx

@@ -0,0 +1,27 @@
+import { cn } from '../lib/utils';
+import { WarningImgUrl } from '../const/ui';
+
+export interface WarningMessageProps {
+  message?: string;
+  className?: string;
+}
+
+export const WarningMessage = ({
+  message = '程序错误，请刷新页面重试',
+  className,
+}: WarningMessageProps) => {
+  return (
+    <div className={cn('flex flex-col items-center gap-[10px]', className)}>
+      <div
+        className="bg-no-repeat bg-center"
+        style={{
+          backgroundImage: WarningImgUrl,
+          backgroundSize: '100% 100%',
+          width: 120,
+          height: 77,
+        }}
+      />
+      <p className="text-[12px] text-[#999] leading-normal">{message}</p>
+    </div>
+  );
+};

package/src/const/ui.ts

@@ -0,0 +1,52 @@
+import { FormIconOption } from "../types";
+
+export const BotImgUrl = `
+  url(data:image/png;base64,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)
+  `;
+
+export const WarningImgUrl = `
+url(data:image/png;base64,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)`;
+
+export const ChatHeaderBgImgUrl = `url(data:image/png;base64,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)`;
+
+export const transCls = 'transition-all duration-200 ease-out';
+// Form icon data from iconfont.json (icons with name starting with "表单")
+
+export const FORM_ICON_OPTIONS: FormIconOption[] = [
+  { id: 'biaodan1', code: '', label: '表单1', value: 25 },
+  { id: 'biaodan2', code: '', label: '表单2', value: 26 },
+  { id: 'biaodan3', code: '', label: '表单3', value: 27 },
+  { id: 'biaodan4', code: '', label: '表单4', value: 28 },
+  { id: 'biaodan5', code: '', label: '表单5', value: 29 },
+  { id: 'biaodan6', code: '', label: '表单6', value: 30 },
+  { id: 'biaodan7', code: '', label: '表单7', value: 31 },
+  { id: 'biaodan8', code: '', label: '表单8', value: 32 },
+  { id: 'biaodan9', code: '', label: '表单9', value: 33 },
+  { id: 'biaodan10', code: '', label: '表单10', value: 34 },
+  { id: 'biaodan11', code: '', label: '表单11', value: 35 },
+  { id: 'biaodan12', code: '', label: '表单12', value: 36 },
+  { id: 'biaodan13', code: '', label: '表单13', value: 37 },
+  { id: 'biaodan14', code: '', label: '表单14', value: 38 },
+  { id: 'biaodan15', code: '', label: '表单15', value: 39 },
+  { id: 'biaodan16', code: '', label: '表单16', value: 40 },
+  { id: 'biaodan17', code: '', label: '表单17', value: 41 },
+  { id: 'biaodan18', code: '', label: '表单18', value: 42 },
+  { id: 'biaodan19', code: '', label: '表单19', value: 43 },
+  { id: 'biaodan20', code: '', label: '表单20', value: 44 },
+  { id: 'biaodan21', code: '', label: '表单21', value: 45 },
+  { id: 'biaodan22', code: '', label: '表单22', value: 46 },
+  { id: 'biaodan23', code: '', label: '表单23', value: 47 },
+  { id: 'biaodan24', code: '', label: '表单24', value: 48 },
+  { id: 'biaodan25', code: '', label: '表单25', value: 49 },
+  { id: 'biaodan26', code: '', label: '表单26', value: 50 },
+  { id: 'biaodan27', code: '', label: '表单27', value: 51 },
+  { id: 'biaodan28', code: '', label: '表单28', value: 52 },
+  { id: 'biaodan29', code: '', label: '表单29', value: 53 },
+  { id: 'biaodan30', code: '', label: '表单30', value: 54 },
+  { id: 'biaodan31', code: '', label: '表单31', value: 55 },
+  { id: 'biaodan32', code: '', label: '表单32', value: 56 },
+  { id: 'biaodan33', code: '', label: '表单33', value: 57 },
+  { id: 'biaodan34', code: '', label: '表单34', value: 58 },
+  { id: 'biaodan35', code: '', label: '表单35', value: 59 },
+  { id: 'biaodan36', code: '', label: '表单36', value: 60 },
+];

package/src/hooks/use-resizable-width.ts

@@ -0,0 +1,92 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+
+interface UseResizableWidthOptions {
+  /** 宽度范围 [min, max]，单位 px */
+  range: [number, number];
+  /** 初始宽度，未指定时取 range 上限 */
+  initialWidth?: number;
+}
+
+interface UseResizableWidthResult {
+  /** 当前宽度 */
+  width: number;
+  /** 拖拽手柄的 onMouseDown 处理器 */
+  handleMouseDown: (e: React.MouseEvent) => void;
+  /** 是否正在拖拽 */
+  isDragging: boolean;
+  /** 是否到达边缘（最小或最大值） */
+  isAtEdge: boolean;
+}
+
+/**
+ * 支持通过拖拽调整宽度的 Hook
+ * @param options 配置项：宽度范围、初始宽度
+ * @returns 当前宽度、拖拽处理器、拖拽状态
+ */
+export const useResizableWidth = ({
+  range,
+  initialWidth,
+}: UseResizableWidthOptions): UseResizableWidthResult => {
+  const [minWidth, maxWidth] = range;
+  const [width, setWidth] = useState<number>(initialWidth ?? maxWidth);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const stateRef = useRef({
+    startX: 0,
+    startWidth: 0,
+  });
+
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      const delta = e.clientX - stateRef.current.startX;
+      const newWidth = Math.min(Math.max(stateRef.current.startWidth + delta, minWidth), maxWidth);
+
+      setWidth(newWidth);
+    },
+    [minWidth, maxWidth]
+  );
+
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+    document.body.style.userSelect = '';
+    document.removeEventListener('mousemove', handleMouseMove);
+    document.removeEventListener('mouseup', handleMouseUp);
+
+    document.body.style.cursor = ''; // 恢复默认光标
+  }, [handleMouseMove]);
+
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      setIsDragging(true);
+      stateRef.current = {
+        startX: e.clientX,
+        startWidth: width,
+      };
+      document.body.style.userSelect = 'none';
+      document.addEventListener('mousemove', handleMouseMove);
+      document.addEventListener('mouseup', handleMouseUp);
+
+      document.body.style.cursor = 'col-resize'; // 设置全局拖拽光标
+    },
+    [width, handleMouseMove, handleMouseUp]
+  );
+
+  useEffect(() => {
+    return () => {
+      document.removeEventListener('mousemove', handleMouseMove);
+      document.removeEventListener('mouseup', handleMouseUp);
+      document.body.style.userSelect = '';
+
+      document.body.style.cursor = ''; // 清理光标样式
+    };
+  }, [handleMouseMove, handleMouseUp]);
+
+  const isAtEdge = width === minWidth || width === maxWidth;
+
+  return {
+    width,
+    handleMouseDown,
+    isDragging,
+    isAtEdge,
+  };
+};

package/src/hooks/use-shadow.ts

@@ -0,0 +1,127 @@
+import { useState, useEffect, useRef } from 'react';
+
+interface UseShadowOptions {
+  /** Shadow DOM挂载的根元素（默认挂到body） */
+  rootEl?: HTMLElement;
+  /** 要注入到Shadow DOM中的样式文本 */
+  style?: string;
+  /** Shadow内部容器的类名 */
+  containerClasses?: string[];
+  /** 包裹Shadow的外层元素类名 */
+  wrapperClasses?: string[];
+  /** 包裹元素的内联样式 */
+  wrapperStyle?: React.CSSProperties;
+
+  extraHtml?: string;
+
+  id: string;
+}
+
+/**
+ * 通用的创建Shadow DOM的Hook
+ * @param options 配置项：样式、根元素、类名等
+ * @returns Shadow DOM内部的容器元素（用于React Portal挂载）
+ */
+export const useShadow = ({
+  id,
+  style = '',
+  rootEl,
+  containerClasses = [],
+  wrapperClasses = [],
+  wrapperStyle = {},
+  extraHtml = '',
+}: UseShadowOptions): { shadowContainer: HTMLElement | null; destroy: () => void } => {
+  const [shadowContainer, setShadowContainer] = useState<HTMLElement | null>(null);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    wrapperRef.current?.classList.add(...wrapperClasses);
+    shadowContainer?.classList.add(...containerClasses);
+  }, [wrapperClasses, containerClasses]);
+
+  useEffect(() => {
+    if (wrapperRef.current) {
+      Object.entries(wrapperStyle).forEach(([key, value]) => {
+        if (value !== undefined) {
+          // @ts-ignore
+          wrapperRef.current!.style[key as any] = value;
+        }
+      });
+    }
+  }, [wrapperStyle]);
+
+  useEffect(() => {
+    // Cleanup previous shadow container if it exists
+    if (wrapperRef.current && wrapperRef.current.parentNode) {
+      wrapperRef.current.parentNode.removeChild(wrapperRef.current);
+      wrapperRef.current = null;
+    }
+
+    try {
+      // 1. 创建外层包裹元素（挂载Shadow Root的载体）
+      const wrapperEl = document.createElement('div');
+      wrapperEl.classList.add(...wrapperClasses, 'wrapper');
+      // wrapperEl.style.height = '100%';
+      wrapperRef.current = wrapperEl;
+
+      // apply wrapper styles
+      Object.entries(wrapperStyle).forEach(([key, value]) => {
+        if (value !== undefined) {
+          // @ts-ignore
+          wrapperEl.style[key as any] = value;
+        }
+      });
+
+      // 2. 创建并挂载Shadow Root
+      const shadowRoot = wrapperEl.attachShadow({ mode: 'open' });
+
+      // 注入额外的HTML内容
+      if (extraHtml) {
+        shadowRoot.innerHTML = extraHtml;
+      }
+
+      // 3. 注入样式到Shadow DOM
+      if (style) {
+        const styleEl = document.createElement('style');
+        styleEl.textContent = style;
+        shadowRoot.appendChild(styleEl);
+      }
+
+      // 4. 创建Shadow内部的容器（最终挂载React Portal的元素）
+      const containerEl = document.createElement('div');
+      containerEl.classList.add(...containerClasses, 'shadow-container');
+      shadowRoot.appendChild(containerEl);
+
+      // 5. 将外层元素挂载到指定根节点
+      const mountRoot = rootEl || document.body;
+      mountRoot.appendChild(wrapperEl);
+
+      setShadowContainer(containerEl);
+    } catch (error) {
+      console.error('创建Shadow DOM失败:', error);
+      setShadowContainer(null);
+    }
+
+    // Cleanup on unmount or when rootEl changes
+    // return () => {
+    //   if (wrapperRef.current && wrapperRef.current.parentNode) {
+    //     wrapperRef.current.parentNode.removeChild(wrapperRef.current);
+    //     wrapperRef.current = null;
+    //   }
+    // };
+  }, [rootEl]); // Recreate when rootEl changes
+
+  if (shadowContainer) {
+    shadowContainer.id = id;
+  }
+
+  return {
+    shadowContainer,
+    destroy: () => {
+      if (wrapperRef.current && wrapperRef.current.parentNode) {
+        wrapperRef.current.parentNode.removeChild(wrapperRef.current);
+        wrapperRef.current = null;
+      }
+    },
+  };
+};

package/src/index.ts

@@ -0,0 +1,76 @@
+// Utils
+export { cn, copyTextToClipboard } from './lib/utils';
+
+// Hooks
+export { useShadow } from './hooks/use-shadow';
+
+// Constants
+export { transCls, BotImgUrl, WarningImgUrl, ChatHeaderBgImgUrl, FORM_ICON_OPTIONS } from './const/ui';
+
+// Types
+export type { FormIconOption, LegacySlotRenderer } from './types';
+
+// UI primitives (shadcn)
+export * from './components/ui/button';
+export * from './components/ui/dialog';
+export * from './components/ui/popover';
+export * from './components/ui/tooltip';
+export * from './components/ui/spinner';
+
+// AI Design Components
+export { AbsFullscreenGradientBg } from './components/abs-fullscreen-gradient-bg';
+export { AgentSelect } from './components/agent-select';
+export type { AgentSelectAgent, AgentSelectProps } from './components/agent-select';
+export { AgentScrollSelector } from './components/agent-scroll-selector';
+export type { AgentScrollSelectorProps } from './components/agent-scroll-selector';
+export { AttachmentPartGroup } from './components/attachment-part-group';
+export { AttachmentPart } from './components/attachment-part';
+export type { FilePart } from './components/attachment-part';
+export { AttachmentsPreviewer } from './components/attachments-previewer';
+export { BaseButton } from './components/base-button';
+export { BsEntrySelect } from './components/bs-entry-select';
+export type { BsEntrySelectProps, BsEntrySelectChangeResult } from './components/bs-entry-select';
+export { BorderAnimation } from './components/border-animation';
+export { BorderColorAnimation } from './components/border-color-animation';
+export { BotAvatarAndName } from './components/bot-avatar-name';
+export { BotIcon } from './components/bot-icon';
+export * from './components/bs-icons';
+export { CardFieldsWrapper, CardField } from './components/card-field';
+export { Card } from './components/card';
+export { ChatAreaHeader } from './components/chat-area-header';
+export { CircleChecker } from './components/circle-checker';
+export { CollapsibleTxtMsg } from './components/collapsible-txt-msg';
+export { ConfirmDialog } from './components/confirm-dialog';
+export { FieldsDesignInfoTable } from './components/fields-design-info-table';
+export { FieldsGeneratingIndicator } from './components/fields-generating-indicator';
+export { FakeBotMessage } from './components/fake-bot-msg';
+export { FieldsPortal } from './components/fields-portal';
+export { FieldsPreviewer } from './components/fields-previewer';
+export { FontIcon } from './components/font-icon';
+export { FormInfoEditor } from './components/form-info-editor';
+export { FormulaTag } from './components/formula-tag';
+export { GenerateAnimation } from './components/generate-animation';
+export { IconBtn } from './components/icon-btn';
+export { ImgMsgPart } from './components/img-part';
+export { LineChecker } from './components/line-checker';
+export { LegacySlot } from './components/legacy-slot';
+export type { LegacySlotProps } from './components/legacy-slot';
+export { LinearGradientBorderBtn } from './components/linear-gradient-border-btn';
+export { MemoizedMarkdown } from './components/memoized-markdown';
+export { MessageContent } from './components/message-content';
+export type { MessageContentProps } from './components/message-content';
+export { LinearGradientColorBgAnimation } from './components/linear-gradient-color-bg-animation';
+export { NumbersMsgPart } from './components/number-part';
+export { OptionItem } from './components/option-item';
+export { PreviewerHeader } from './components/previewer-header';
+export { PrimaryConfirmBtn } from './components/primary-confirm-btn';
+export { PrimaryEntryBtn } from './components/primary-entry-btn';
+export { ScrollToBottomBtn } from './components/scroll-to-bottom-btn';
+export { SplitLine } from './components/split-line';
+export { SquareChecker } from './components/square-checker';
+export { TabRadioGroup, TabRadioItem } from './components/tab-radio-group';
+export { BsTooltip } from './components/tooltip';
+export { UserTextMsgBubble } from './components/user-txt-msg-bubble';
+export { OfficeContainer } from './components/office-container';
+export type { IOfficeContainerProps } from './components/office-container';
+export { WarningMessage } from './components/warning-msg';

package/src/lib/utils.ts

@@ -0,0 +1,52 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+// 复制文本的核心函数（TypeScript 版本）
+export async function copyTextToClipboard(text: string): Promise<boolean> {
+  // 校验输入：确保复制的文本是字符串且非空
+  if (typeof text !== 'string' || text.trim() === '') {
+    console.error('要复制的文本必须是非空字符串');
+    return false;
+  }
+
+  try {
+    // 方案1：优先使用现代浏览器的 Clipboard API（更安全、无DOM操作）
+    if (navigator.clipboard && window.isSecureContext) {
+      await navigator.clipboard.writeText(text);
+      console.log('文本复制成功（Clipboard API）');
+      return true;
+    }
+
+    // 方案2：降级使用 execCommand（兼容旧浏览器，需创建临时DOM元素）
+    // 1. 创建临时textarea元素（隐藏，避免影响页面布局）
+    const textarea = document.createElement('textarea');
+    textarea.value = text;
+    textarea.style.position = 'fixed'; // 避免滚动条偏移
+    textarea.style.left = '-9999px';
+    textarea.style.top = '-9999px';
+    document.body.appendChild(textarea);
+
+    // 2. 选中文本并执行复制
+    textarea.focus();
+    textarea.select();
+    const success = document.execCommand('copy');
+
+    // 3. 移除临时元素
+    document.body.removeChild(textarea);
+
+    if (success) {
+      console.log('文本复制成功（execCommand 降级方案）');
+      return true;
+    } else {
+      throw new Error('execCommand 复制失败');
+    }
+  } catch (error) {
+    // 捕获复制失败的异常（如用户拒绝权限、浏览器不支持等）
+    console.error('文本复制失败：', error);
+    return false;
+  }
+}

package/src/stories/AbsFullscreenGradientBg.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from '@storybook/react-vite';
+
+import { AbsFullscreenGradientBg } from '../components/abs-fullscreen-gradient-bg';
+
+const meta = {
+  title: 'Example/Chat/AbsFullscreenGradientBg',
+  component: AbsFullscreenGradientBg,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+  },
+  args: {
+    zIndex: 1,
+  },
+} satisfies Meta<typeof AbsFullscreenGradientBg>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    zIndex: 1,
+  },
+};
+
+export const WithContent: Story = {
+  args: {
+    zIndex: 1,
+    children: (
+      <div style={{ position: 'relative', zIndex: 1, padding: '40px', color: '#333' }}>
+        <h1>Content over gradient background</h1>
+        <p>This demonstrates how content can be placed over the gradient background.</p>
+      </div>
+    ),
+  },
+};