feat: gradient line

web/app/components/explore/universal-chat/init/index.tsx

@@ -7,6 +7,19 @@ import type { IConfigProps } from '../config'
 import Config from '../config'
 import s from './style.module.css'
 
+const Line = (
+  <svg width="720" height="1" viewBox="0 0 720 1" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <line y1="0.5" x2="720" y2="0.5" stroke="url(#paint0_linear_6845_53470)"/>
+    <defs>
+      <linearGradient id="paint0_linear_6845_53470" x1="0" y1="1" x2="720" y2="1" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#F2F4F7" stopOpacity="0"/>
+        <stop offset="0.491667" stopColor="#F2F4F7"/>
+        <stop offset="1" stopColor="#F2F4F7" stopOpacity="0"/>
+      </linearGradient>
+    </defs>
+  </svg>
+)
+
 const Init: FC<IConfigProps> = ({
   ...configProps
 }) => {
@@ -20,7 +33,7 @@ const Init: FC<IConfigProps> = ({
           <div className='mb-2 font-normal text-sm text-gray-500'>{t('explore.universalChat.welcomeDescribe')}</div>
         </div>
         <div className='flex mb-2 mx-auto h-8 items-center'>
-          <div className={s.line}></div>
+          {Line}
         </div>
         <Config className='w-[480px] mx-auto' {...configProps} />
       </div>

web/app/components/explore/universal-chat/init/style.module.css

@@ -6,10 +6,4 @@
   text-fill-color: transparent;
 }
 
-.line {
-  width: 720px;
-  border-top: 1px solid #eee; /* TODO: gradient */ 
-  /* border-image-source: linear-gradient(90deg, rgba(242, 244, 247, 0) 0%, #F2F4F7 49.17%, rgba(242, 244, 247, 0) 100%); */
-}
-