Skip to content

Commit 9ee1071

Browse files
authored
✨ 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
1 parent bf8adce commit 9ee1071

6 files changed

Lines changed: 86 additions & 30 deletions

File tree

web/src/app/chat/page.tsx

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,35 @@
11
'use client';
22

33
import { HeroParallax } from '@/components/ui/hero-parallax';
4+
import { useTheme } from '@/hooks/useTheme';
45
import { products } from './products';
56

67
export default function ChatPage() {
8+
const { isDark } = useTheme();
9+
710
return (
811
<div className="relative w-full">
912
<HeroParallax products={products} />
1013

11-
<div className="relative bg-black py-16 px-4">
14+
<div
15+
className={`relative py-16 px-4 pb-48 transition-colors duration-300 ${
16+
isDark ? 'bg-black' : 'bg-white'
17+
}`}
18+
>
1219
<div className="max-w-7xl mx-auto flex flex-col items-center justify-center gap-8">
1320
<div className="text-center">
14-
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
21+
<h2
22+
className={`text-3xl md:text-4xl font-bold mb-4 transition-colors duration-300 ${
23+
isDark ? 'text-white' : 'text-gray-900'
24+
}`}
25+
>
1526
准备好开始了吗?
1627
</h2>
17-
<p className="text-gray-300 text-lg mb-8">
28+
<p
29+
className={`text-lg mb-8 transition-colors duration-300 ${
30+
isDark ? 'text-gray-300' : 'text-gray-600'
31+
}`}
32+
>
1833
点击下方按钮,立即体验 Xyzen AI Agent
1934
</p>
2035
</div>

web/src/app/chat/products.ts

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const products = [
99
title: "chat2",
1010
link: "https://www.bohrium.com/apps/xyzen/job?type=app",
1111
thumbnail:
12-
"https://storage.sciol.ac.cn/library/docs/chat2.png",
12+
"https://storage.sciol.ac.cn/library/docs/chat2_light.png",
1313
},
1414
{
1515
title: "chat3",
@@ -22,7 +22,7 @@ export const products = [
2222
title: "chat4",
2323
link: "https://www.bohrium.com/apps/xyzen/job?type=app",
2424
thumbnail:
25-
"https://storage.sciol.ac.cn/library/docs/chat4.png",
25+
"https://storage.sciol.ac.cn/library/docs/chat4_light.png",
2626
},
2727
{
2828
title: "chat5",
@@ -34,7 +34,7 @@ export const products = [
3434
title: "chat6",
3535
link: "https://www.bohrium.com/apps/xyzen/job?type=app",
3636
thumbnail:
37-
"https://storage.sciol.ac.cn/library/docs/chat6.png",
37+
"https://storage.sciol.ac.cn/library/docs/chat6_light.png",
3838
},
3939

4040
{
@@ -47,7 +47,7 @@ export const products = [
4747
title: "chat8",
4848
link: "https://www.bohrium.com/apps/xyzen/job?type=app",
4949
thumbnail:
50-
"https://storage.sciol.ac.cn/library/docs/chat8.png",
50+
"https://storage.sciol.ac.cn/library/docs/chat8_light.png",
5151
},
5252
{
5353
title: "chat9",
@@ -59,7 +59,7 @@ export const products = [
5959
title: "chat10",
6060
link: "https://www.bohrium.com/apps/xyzen/job?type=app",
6161
thumbnail:
62-
"https://storage.sciol.ac.cn/library/docs/chat10.png",
62+
"https://storage.sciol.ac.cn/library/docs/chat10_light.png",
6363
},
6464
{
6565
title: "chat11",
@@ -72,7 +72,7 @@ export const products = [
7272
title: "chat12",
7373
link: "https://www.bohrium.com/apps/xyzen/job?type=app",
7474
thumbnail:
75-
"https://storage.sciol.ac.cn/library/docs/chat12.png",
75+
"https://storage.sciol.ac.cn/library/docs/chat12_light.png",
7676
},
7777
{
7878
title: "chat13",
@@ -84,7 +84,7 @@ export const products = [
8484
title: "chat14",
8585
link: "https://www.bohrium.com/apps/xyzen/job?type=app",
8686
thumbnail:
87-
"https://storage.sciol.ac.cn/library/docs/chat14.png",
87+
"https://storage.sciol.ac.cn/library/docs/chat14_light.png",
8888
},
8989
// {
9090
// title: "E Free Invoice",

web/src/app/navbar/Navbar.tsx

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,15 @@ import About from './About';
77
import Community from './Community';
88
import Projects from './Projects';
99
import { RightSideStatus } from './RightSideStatus';
10-
import Tutorial from './Tutorials';
10+
// import Tutorial from './Tutorials';
1111

12-
const TutorialComponent = Tutorial as React.ComponentType<{
13-
index: number;
14-
activeMenuItem: number | null;
15-
setActiveMenuItem: React.Dispatch<React.SetStateAction<number | null>>;
16-
open: boolean;
17-
setOpen: React.Dispatch<React.SetStateAction<boolean>>;
18-
}>;
12+
// const Tutorial = Tutorial as React.ComponentType<{
13+
// index: number;
14+
// activeMenuItem: number | null;
15+
// setActiveMenuItem: React.Dispatch<React.SetStateAction<number | null>>;
16+
// open: boolean;
17+
// setOpen: React.Dispatch<React.SetStateAction<boolean>>;
18+
// }>;
1919

2020
const NavbarMenu = () => {
2121
const { t } = useTranslation();
@@ -37,13 +37,19 @@ const NavbarMenu = () => {
3737
open={open}
3838
setOpen={setOpen}
3939
/>
40-
<TutorialComponent
40+
<a
41+
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'}`}
42+
href='https://docs.sciol.ac.cn'
43+
>
44+
<span>{t('navbar.tutorial')}</span>
45+
</a>
46+
{/* <Tutorial
4147
index={4}
4248
activeMenuItem={activeMenuItem}
4349
setActiveMenuItem={setActiveMenuItem}
4450
open={open}
4551
setOpen={setOpen}
46-
/>
52+
/> */}
4753
<Community
4854
index={3}
4955
activeMenuItem={activeMenuItem}

web/src/app/navbar/Tutorials.tsx

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -59,17 +59,21 @@
5959

6060
'use client';
6161

62-
// import Link from 'next/link';
62+
// import Link from 'next/link'
63+
import { useTranslation } from "react-i18next";
6364

6465
export default function Tutorial() {
66+
const { t } = useTranslation();
67+
68+
6569
return (
6670
<a
6771
href="https://docs.sciol.ac.cn"
6872
target="_blank"
6973
rel="noopener noreferrer"
70-
className="text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-300 dark:hover:text-gray-100"
71-
>
72-
教程
73-
</a>
74+
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"
75+
>
76+
{t('navbar.tutorial','Tutorial')}
77+
</a>
7478
);
7579
}

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

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ import {
77
useTransform,
88
} from 'motion/react';
99
import React from 'react';
10+
import { useTheme } from '@/hooks/useTheme';
1011

1112
export const HeroParallax = ({
1213
products,
@@ -17,6 +18,8 @@ export const HeroParallax = ({
1718
thumbnail: string;
1819
}[];
1920
}) => {
21+
const { isDark } = useTheme();
22+
2023
const firstRow = products.slice(0, 5);
2124
const secondRow = products.slice(5, 10);
2225
const thirdRow = products.slice(10, 15);
@@ -56,9 +59,9 @@ export const HeroParallax = ({
5659
<div
5760
ref={ref}
5861
//deep color background
59-
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"
62+
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'}`}
6063
>
61-
<Header />
64+
<Header isDark={isDark} />
6265
<motion.div
6366
style={{
6467
rotateX,
@@ -100,14 +103,14 @@ export const HeroParallax = ({
100103
);
101104
};
102105

103-
export const Header = () => {
106+
export const Header = ({isDark}:{isDark: boolean}) => {
104107
return (
105108
//white text
106109
<div className="max-w-7xl relative mx-auto py-20 md:py-40 px-4 w-full left-0 top-0">
107-
<h1 className="text-2xl md:text-7xl font-bold text-white dark:text-white">
110+
<h1 className={`text-2xl md:text-7xl font-bold ${isDark ? 'text-white' : 'text-gray-900'}`}>
108111
Xyzen (/ˈsaɪ.zan/)! <br /> AI-driven Agent IDE
109112
</h1>
110-
<p className="max-w-2xl text-base md:text-xl mt-8 text-gray-300 dark:text-gray-300">
113+
<p className={`max-w-2xl text-base md:text-xl mt-8 ${isDark ? 'text-gray-300' : 'text-gray-600'}`}>
111114
Xyzen 是一个 Agent, 他是一个会创造 Agent 的 Agent。 Xyzen
112115
可以为你开启一个通往Agent 与MCP无限可能的大门。
113116
</p>

web/src/hooks/useTheme.ts

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
'use client';
2+
3+
import { useUI } from '@/hooks/useUI';
4+
import { useEffect, useState } from 'react';
5+
6+
export function useTheme() {
7+
const { theme } = useUI();
8+
const [isDark, setIsDark] = useState(false);
9+
10+
useEffect(() => {
11+
// 根据主题设置 isDark
12+
const updateIsDark = () => {
13+
setIsDark(theme === 'dark' || (theme === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches));
14+
};
15+
16+
updateIsDark();
17+
18+
// 监听系统主题变化(当主题设置为 system 时)
19+
const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
20+
mediaQuery.addEventListener('change', updateIsDark);
21+
22+
return () => {
23+
mediaQuery.removeEventListener('change', updateIsDark);
24+
};
25+
}, [theme]);
26+
27+
return { isDark };
28+
}

0 commit comments

Comments
 (0)