Initial commit

src/styles/brainwave-colors.css

@@ -0,0 +1,83 @@
+/* Brainwave 色彩变量定义 */
+: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;
+}
+
+/* CSS类名映射到变量 */
+.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-1\/10 { border-color: rgba(255, 255, 255, 0.1) !important; }
+.border-n-2\/5 { border-color: rgba(202, 198, 221, 0.05) !important; }
+.border-n-2\/10 { border-color: rgba(202, 198, 221, 0.1) !important; }
+
+.bg-stroke-1 { background-color: var(--stroke-1) !important; }
+
+/* 渐变背景 */
+.bg-conic-gradient {
+  background: conic-gradient(from 225deg, #FFC876, #79FFF7, #9F53FF, #FF98E2, #FFC876) !important;
+}
+
+.bg-gradient-to-br {
+  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops)) !important;
+}
+
+.from-n-8 { --tw-gradient-from: var(--color-n-8); --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
+.via-n-7 { --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--color-n-7), var(--tw-gradient-to); }
+.to-n-6 { --tw-gradient-to: var(--color-n-6); }
+
+/* 文字渐变 */
+.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-stops)) !important; }
+.from-color-1 { --tw-gradient-from: var(--color-1); --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
+.to-color-2 { --tw-gradient-to: var(--color-2); }
+.from-color-2 { --tw-gradient-from: var(--color-2); --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
+.to-color-1 { --tw-gradient-to: var(--color-1); }
+
+.bg-clip-text { 
+  -webkit-background-clip: text !important;
+  background-clip: text !important;
+}
+.text-transparent { 
+  color: transparent !important;
+}
+
+/* 其他样式增强 */
+.backdrop-blur-sm { backdrop-filter: blur(8px) !important; }
+.backdrop-blur { backdrop-filter: blur(16px) !important; }
+
+/* 确保body有深色背景 */
+body {
+  background-color: var(--color-n-8) !important;
+}
+
+/* z-index 修复 */
+.z-50 { z-index: 50 !important; }
+.z-10 { z-index: 10 !important; }
+.z-2 { z-index: 2 !important; }
+.z-1 { z-index: 1 !important; }

src/styles/brainwave.css

@@ -0,0 +1,35 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+body {
+}
+
+/* styles for splide carousel */
+@layer components {
+    .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;
+    }
+
+    .splide-custom .splide__arrow:hover svg {
+        @apply fill-n-1;
+    }
+
+    .splide-custom .splide__arrow svg {
+        @apply w-4 h-4 fill-n-4 transform-none transition-colors;
+    }
+
+    .splide-visible .splide__track {
+        @apply overflow-visible;
+    }
+
+    .splide-pricing .splide__list {
+        @apply lg:grid !important;
+        @apply lg:grid-cols-3 lg:gap-4;
+    }
+
+    .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];
+    }
+}

src/styles/home-animations.css

@@ -0,0 +1,70 @@
+/* HomePage动画样式 */
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
+}
+
+@keyframes pulse {
+  0%, 100% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 0.8;
+  }
+}
+
+@keyframes slideInUp {
+  from {
+    opacity: 0;
+    transform: translateY(30px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.float-animation {
+  animation: float 6s ease-in-out infinite;
+}
+
+.float-animation-reverse {
+  animation: float 8s ease-in-out infinite reverse;
+}
+
+.pulse-animation {
+  animation: pulse 4s ease-in-out infinite;
+}
+
+.slide-in-animation {
+  animation: slideInUp 0.8s ease-out;
+}
+
+/* 毛玻璃效果 */
+.glassmorphism {
+  background: rgba(255, 255, 255, 0.1);
+  backdrop-filter: blur(10px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* 渐变边框 */
+.gradient-border {
+  position: relative;
+  background: linear-gradient(135deg, rgba(255, 215, 0, 0.1) 0%, rgba(255, 165, 0, 0.05) 100%);
+}
+
+.gradient-border::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  padding: 2px;
+  background: linear-gradient(135deg, #FFD700, #FFA500);
+  border-radius: inherit;
+  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
+  mask-composite: xor;
+}