✨ feat: xyzen chat landing page (#11)

* ✨ feat: Add Xyzen chat landing page with HeroParallax and CTA button

- ♻️ refactor:Create /chat route with HeroParallax component for product showcase
- Add products.ts with Xyzen product data
- Implement chat page layout with animated parallax effect
- Add CTA button linking to Bohrium Xyzen application
- Update Navbar to include Projects menu with 5 ScienceOL products
- Add dark mode styling for better visual appearance
- Integrate React Router with new /chat route in router.tsx

* ✨ feat: Add Xyzen chat landing page with dark/light mode support

- Create /chat route with HeroParallax component and product carousel
- Add Projects menu to navbar with 5 ScienceOL products (Studio, Xyzen, PROTIUM, Anti, Lab-OS)
- Implement responsive chat page with animated parallax and CTA button
- Add Tutorial menu item linking to documentation
- Create custom useTheme hook integrated with existing UiCore system
- Support dynamic theme switching (system/dark/light modes)
- Merge main branch and resolve conflicts

Author: zhangligei

web/src/app/chat/page.tsx

@@ -1,20 +1,35 @@
 'use client';
 
 import { HeroParallax } from '@/components/ui/hero-parallax';
+import { useTheme } from '@/hooks/useTheme';
 import { products } from './products';
 
 export default function ChatPage() {
+  const { isDark } = useTheme();
+
   return (
     <div className="relative w-full">
       <HeroParallax products={products} />
 
-      <div className="relative bg-black py-16 px-4">
+      <div
+        className={`relative py-16 px-4 pb-48 transition-colors duration-300 ${
+          isDark ? 'bg-black' : 'bg-white'
+        }`}
+      >
         <div className="max-w-7xl mx-auto flex flex-col items-center justify-center gap-8">
           <div className="text-center">
-            <h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
+            <h2
+              className={`text-3xl md:text-4xl font-bold mb-4 transition-colors duration-300 ${
+                isDark ? 'text-white' : 'text-gray-900'
+              }`}
+            >
               准备好开始了吗？
             </h2>
-            <p className="text-gray-300 text-lg mb-8">
+            <p
+              className={`text-lg mb-8 transition-colors duration-300 ${
+                isDark ? 'text-gray-300' : 'text-gray-600'
+              }`}
+            >
               点击下方按钮，立即体验 Xyzen AI Agent
             </p>
           </div>

web/src/app/chat/products.ts

@@ -9,7 +9,7 @@ export const products = [
     title: "chat2",
     link: "https://www.bohrium.com/apps/xyzen/job?type=app",
     thumbnail:
-      "https://storage.sciol.ac.cn/library/docs/chat2.png",
+      "https://storage.sciol.ac.cn/library/docs/chat2_light.png",
   },
   {
     title: "chat3",
@@ -22,7 +22,7 @@ export const products = [
     title: "chat4",
     link: "https://www.bohrium.com/apps/xyzen/job?type=app",
     thumbnail:
-      "https://storage.sciol.ac.cn/library/docs/chat4.png",
+      "https://storage.sciol.ac.cn/library/docs/chat4_light.png",
   },
   {
     title: "chat5",
@@ -34,7 +34,7 @@ export const products = [
     title: "chat6",
     link: "https://www.bohrium.com/apps/xyzen/job?type=app",
     thumbnail:
-      "https://storage.sciol.ac.cn/library/docs/chat6.png",
+      "https://storage.sciol.ac.cn/library/docs/chat6_light.png",
   },
 
   {
@@ -47,7 +47,7 @@ export const products = [
     title: "chat8",
     link: "https://www.bohrium.com/apps/xyzen/job?type=app",
     thumbnail:
-      "https://storage.sciol.ac.cn/library/docs/chat8.png",
+      "https://storage.sciol.ac.cn/library/docs/chat8_light.png",
   },
   {
     title: "chat9",
@@ -59,7 +59,7 @@ export const products = [
     title: "chat10",
     link: "https://www.bohrium.com/apps/xyzen/job?type=app",
     thumbnail:
-      "https://storage.sciol.ac.cn/library/docs/chat10.png",
+      "https://storage.sciol.ac.cn/library/docs/chat10_light.png",
   },
   {
     title: "chat11",
@@ -72,7 +72,7 @@ export const products = [
     title: "chat12",
     link: "https://www.bohrium.com/apps/xyzen/job?type=app",
     thumbnail:
-      "https://storage.sciol.ac.cn/library/docs/chat12.png",
+      "https://storage.sciol.ac.cn/library/docs/chat12_light.png",
   },
   {
     title: "chat13",
@@ -84,7 +84,7 @@ export const products = [
     title: "chat14",
     link: "https://www.bohrium.com/apps/xyzen/job?type=app",
     thumbnail:
-      "https://storage.sciol.ac.cn/library/docs/chat14.png",
+      "https://storage.sciol.ac.cn/library/docs/chat14_light.png",
   },
   // {
   //   title: "E Free Invoice",

web/src/app/navbar/Navbar.tsx

@@ -7,15 +7,15 @@ import About from './About';
 import Community from './Community';
 import Projects from './Projects';
 import { RightSideStatus } from './RightSideStatus';
-import Tutorial from './Tutorials';
+// import Tutorial from './Tutorials';
 
-const TutorialComponent = Tutorial as React.ComponentType<{
-  index: number;
-  activeMenuItem: number | null;
-  setActiveMenuItem: React.Dispatch<React.SetStateAction<number | null>>;
-  open: boolean;
-  setOpen: React.Dispatch<React.SetStateAction<boolean>>;
-}>;
+// const Tutorial = Tutorial as React.ComponentType<{
+//   index: number;
+//   activeMenuItem: number | null;
+//   setActiveMenuItem: React.Dispatch<React.SetStateAction<number | null>>;
+//   open: boolean;
+//   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+// }>;
 
 const NavbarMenu = () => {
   const { t } = useTranslation();
@@ -37,13 +37,19 @@ const NavbarMenu = () => {
         open={open}
         setOpen={setOpen}
       />
-      <TutorialComponent
+      <a
+        className={`inline-flex items-center gap-x-1 text-sm font-semibold leading-6 text-neutral-900 focus:outline-none dark:text-neutral-100 ${'hover:text-indigo-600 dark:hover:text-indigo-500'}`}
+        href='https://docs.sciol.ac.cn'
+      >
+        <span>{t('navbar.tutorial')}</span>
+      </a>
+      {/* <Tutorial
         index={4}
         activeMenuItem={activeMenuItem}
         setActiveMenuItem={setActiveMenuItem}
         open={open}
         setOpen={setOpen}
-      />
+      /> */}
       <Community
         index={3}
         activeMenuItem={activeMenuItem}

web/src/app/navbar/Tutorials.tsx

@@ -59,17 +59,21 @@
 
 'use client';
 
-// import Link from 'next/link';
+// import Link from 'next/link'
+import { useTranslation } from "react-i18next";
 
 export default function Tutorial() {
+  const { t } = useTranslation();
+
+
   return (
     <a
       href="https://docs.sciol.ac.cn"
       target="_blank"
       rel="noopener noreferrer"
-      className="text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100"
-    >
-      教程
-    </a>
+      className="inline-flex items-center gap-x-1 text-sm font-semibold leading-6 text-neutral-900 focus:outline-none dark:text-neutral-100 hover:text-indigo-600 dark:hover:text-indigo-500"
+      >
+      {t('navbar.tutorial','Tutorial')}
+      </a>
   );
 }

web/src/components/ui/hero-parallax.tsx

@@ -7,6 +7,7 @@ import {
   useTransform,
 } from 'motion/react';
 import React from 'react';
+import { useTheme } from '@/hooks/useTheme';
 
 export const HeroParallax = ({
   products,
@@ -17,6 +18,8 @@ export const HeroParallax = ({
     thumbnail: string;
   }[];
 }) => {
+  const { isDark } = useTheme();
+
   const firstRow = products.slice(0, 5);
   const secondRow = products.slice(5, 10);
   const thirdRow = products.slice(10, 15);
@@ -56,9 +59,9 @@ export const HeroParallax = ({
     <div
       ref={ref}
       //deep color background
-      className="h-[300vh] py-40 overflow-hidden antialiased relative flex flex-col self-auto [perspective:1000px] [transform-style:preserve-3d] bg-black dark:bg-black"
+      className={`h-[300vh] py-40 overflow-hidden antialiased relative flex flex-col self-auto [perspective:1000px] [transform-style:preserve-3d] ${isDark ? 'bg-black' : 'bg-white'}`}
     >
-      <Header />
+      <Header isDark={isDark} />
       <motion.div
         style={{
           rotateX,
@@ -100,14 +103,14 @@ export const HeroParallax = ({
   );
 };
 
-export const Header = () => {
+export const Header = ({isDark}:{isDark: boolean}) => {
   return (
     //white text
     <div className="max-w-7xl relative mx-auto py-20 md:py-40 px-4 w-full left-0 top-0">
-      <h1 className="text-2xl md:text-7xl font-bold text-white dark:text-white">
+      <h1 className={`text-2xl md:text-7xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>
         Xyzen (/ˈsaɪ.zan/)！ <br /> AI-driven Agent IDE
       </h1>
-      <p className="max-w-2xl text-base md:text-xl mt-8 text-gray-300 dark:text-gray-300">
+      <p className={`max-w-2xl text-base md:text-xl mt-8 ${isDark ? 'text-gray-300' : 'text-gray-600'}`}>
         Xyzen 是一个 Agent， 他是一个会创造 Agent 的 Agent。 Xyzen
         可以为你开启一个通往Agent 与MCP无限可能的大门。
       </p>

web/src/hooks/useTheme.ts

@@ -0,0 +1,28 @@
+'use client';
+
+import { useUI } from '@/hooks/useUI';
+import { useEffect, useState } from 'react';
+
+export function useTheme() {
+  const { theme } = useUI();
+  const [isDark, setIsDark] = useState(false);
+
+  useEffect(() => {
+    // 根据主题设置 isDark
+    const updateIsDark = () => {
+      setIsDark(theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches));
+    };
+
+    updateIsDark();
+
+    // 监听系统主题变化（当主题设置为 system 时）
+    const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+    mediaQuery.addEventListener('change', updateIsDark);
+
+    return () => {
+      mediaQuery.removeEventListener('change', updateIsDark);
+    };
+  }, [theme]);
+
+  return { isDark };
+}