feat(ui): introduce LinearBorderContainer component and enhance NotFound pages

- Added LinearBorderContainer component for improved UI styling with gradient borders.
- Refactored NotFound components in both web and dashboard to utilize LinearBorderContainer, enhancing visual presentation and user experience.
- Updated layout and messaging for 404 error pages to provide clearer navigation options.

Signed-off-by: Innei <tukon479@gmail.com>

packages/ui/src/container/LinearBorderContainer.tsx

@@ -0,0 +1,74 @@
+import { clsxm } from '@afilmory/utils'
+import type { FC, ReactNode } from 'react'
+
+type LinearBorderContainerProps = {
+  children: ReactNode
+  className?: string
+
+  /**
+   * Color tint for the border gradient.
+   * @default 'var(--color-text-secondary)' - Uses the default text secondary color
+   * @example 'var(--color-accent)' - Uses the accent color
+   * @example 'var(--color-red)' - Uses the red system color
+   */
+  tint?: string
+}
+
+/**
+ * A container with linear gradient borders on all sides.
+ * Creates a sophisticated border effect using CSS gradients.
+ *
+ * @example
+ * ```tsx
+ * <LinearBorderContainer className="bg-background-tertiary">
+ *   <div className="p-12">
+ *     <h1>Content with linear gradient borders</h1>
+ *   </div>
+ * </LinearBorderContainer>
+ * ```
+ *
+ * @example With custom tint
+ * ```tsx
+ * <LinearBorderContainer tint="var(--color-accent)">
+ *   <div>Accent-colored borders</div>
+ * </LinearBorderContainer>
+ * ```
+ */
+export const LinearBorderContainer: FC<LinearBorderContainerProps> = ({
+  children,
+  className,
+  tint = 'var(--color-text-secondary)',
+}) => {
+  // Generate inline styles for gradients with dynamic tint color
+  const horizontalGradient = {
+    background: `linear-gradient(to right, transparent, ${tint}, transparent)`,
+  }
+  const verticalGradient = {
+    background: `linear-gradient(to bottom, transparent -15%, ${tint} 50%, transparent 115%)`,
+  }
+
+  return (
+    <div className="flex flex-col">
+      <div className={clsxm('flex flex-row', className)}>
+        {/* Top border */}
+        <div className="absolute right-0 left-0 z-1 h-[0.5px]" style={horizontalGradient} />
+
+        {/* Left border */}
+        <div className="absolute top-0 bottom-0 z-1 w-[0.5px]" style={verticalGradient} />
+
+        {/* Main content area */}
+        {children}
+
+        {/* Right border */}
+        <div className="flex shrink-0 flex-col">
+          <div className="absolute top-0 bottom-0 z-1 w-[0.5px]" style={verticalGradient} />
+        </div>
+      </div>
+
+      {/* Bottom border */}
+      <div className="w-[2px] shrink-0">
+        <div className="absolute right-0 left-0 z-1 h-[0.5px]" style={horizontalGradient} />
+      </div>
+    </div>
+  )
+}

packages/ui/src/container/index.ts

@@ -0,0 +1 @@
+export { LinearBorderContainer } from './LinearBorderContainer'

packages/ui/src/index.ts

@@ -2,6 +2,7 @@ export * from './button'
 export * from './checkbox'
 export * from './checkbox'
 export * from './collapsible'
+export * from './container'
 export * from './context-menu'
 export * from './dialog'
 export * from './divider'