update pay function

src/index.js

@@ -2,8 +2,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import { BrowserRouter as Router } from 'react-router-dom';
-// 导入 Tailwind CSS 和 Brainwave 样式
-import './styles/brainwave.css';
+// 导入 Brainwave 样式
+import './styles/brainwave-vars.css';  // Brainwave 颜色变量
+import './styles/brainwave.css';       // Brainwave 组件样式
 
 // 导入 Bytedesk 客服系统 z-index 覆盖样式（必须在所有样式之后导入）
 import './styles/bytedesk-override.css';

src/styles/brainwave-vars.css

@@ -0,0 +1,42 @@
+/* Brainwave 颜色变量 - 不依赖 Tailwind */
+:root {
+  /* Brainwave 中性色系 */
+  --color-n-1: #FFFFFF;
+  --color-n-2: #CAC6DD;
+  --color-n-3: #ADA8C3;
+  --color-n-4: #757185;
+  --color-n-5: #3F3A52;
+  --color-n-6: #252134;
+  --color-n-7: #15131D;
+  --color-n-8: #0E0C15;
+
+  /* Brainwave 主题色 */
+  --color-1: #AC6AFF;
+  --color-2: #FFC876;
+  --color-3: #FF776F;
+  --color-4: #7ADB78;
+  --color-5: #858DFF;
+  --color-6: #FF98E2;
+
+  /* 描边色 */
+  --stroke-1: #26242C;
+}
+
+/* Tailwind 兼容的工具类 */
+.bg-n-8 { background-color: var(--color-n-8) !important; }
+.bg-n-7 { background-color: var(--color-n-7) !important; }
+.bg-n-6 { background-color: var(--color-n-6) !important; }
+
+.text-n-1 { color: var(--color-n-1) !important; }
+.text-n-2 { color: var(--color-n-2) !important; }
+.text-n-3 { color: var(--color-n-3) !important; }
+.text-n-4 { color: var(--color-n-4) !important; }
+
+.border-n-6 { border-color: var(--color-n-6) !important; }
+.border-n-4\/50 { border-color: rgba(117, 113, 133, 0.5) !important; }
+.border-n-3 { border-color: var(--color-n-3) !important; }
+
+.fill-n-1 { fill: var(--color-n-1) !important; }
+.fill-n-4 { fill: var(--color-n-4) !important; }
+
+.bg-stroke-1 { background-color: var(--stroke-1) !important; }

src/styles/brainwave.css

@@ -1,34 +1,62 @@
 /* Brainwave 样式文件 */
-/* Tailwind 由 Hero UI 内部处理，这里只保留自定义样式 */
+/* 将 Tailwind 的 @apply 改为普通 CSS */
 
 body {
 }
 
-/* styles for splide carousel */
-@layer components {
+/* Splide carousel 样式 */
 .splide-custom .splide__arrow {
-        @apply relative top-0 left-0 right-0 flex items-center justify-center w-12 h-12 bg-transparent border border-solid border-n-4/50 rounded-full transform-none transition-colors hover:border-n-3;
+    position: relative;
+    top: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 3rem;
+    height: 3rem;
+    background-color: transparent;
+    border: 1px solid rgba(117, 113, 133, 0.5);
+    border-radius: 9999px;
+    transform: none;
+    transition: border-color 0.3s, color 0.3s;
+}
+
+.splide-custom .splide__arrow:hover {
+    border-color: var(--color-n-3);
 }
 
 .splide-custom .splide__arrow:hover svg {
-        @apply fill-n-1;
+    fill: var(--color-n-1);
 }
 
 .splide-custom .splide__arrow svg {
-        @apply w-4 h-4 fill-n-4 transform-none transition-colors;
+    width: 1rem;
+    height: 1rem;
+    fill: var(--color-n-4);
+    transform: none;
+    transition: fill 0.3s;
 }
 
 .splide-visible .splide__track {
-        @apply overflow-visible;
+    overflow: visible;
 }
 
 .splide-pricing .splide__list {
-        @apply lg:grid !important;
-        @apply lg:grid-cols-3 lg:gap-4;
+    display: grid !important;
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1rem;
 }
 
 .splide-benefits .splide__list {
-        @apply md:grid !important;
-        @apply md:grid-cols-3 md:gap-x-10 md:gap-y-[4.5rem] xl:gap-y-[6rem];
+    display: grid !important;
+    grid-template-columns: repeat(3, 1fr);
+    column-gap: 2.5rem;
+    row-gap: 4.5rem;
+}
+
+@media (min-width: 1280px) {
+    .splide-benefits .splide__list {
+        row-gap: 6rem;
     }
 }