Skip to content

Commit 487341a

Browse files
zhangligeizhangligei
committed
✨ 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
1 parent d44b8ba commit 487341a

9 files changed

Lines changed: 672 additions & 158 deletions

File tree

‎web/index.css‎

Lines changed: 117 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import "tailwindcss";
2+
@import "tw-animate-css";
23
@source "node_modules/@sciol/xyzen/dist/xyzen.css";
34

45
@custom-variant dark (&:where(.dark, .dark *));
@@ -196,10 +197,125 @@ body {
196197
border-radius: 0.5rem;
197198
}
198199

199-
200200
@media (prefers-reduced-motion: reduce) {
201201
.animate-sheen {
202202
animation: none;
203203
opacity: .25;
204204
}
205205
}
206+
207+
@theme inline {
208+
--radius-sm: calc(var(--radius) - 4px);
209+
--radius-md: calc(var(--radius) - 2px);
210+
--radius-lg: var(--radius);
211+
--radius-xl: calc(var(--radius) + 4px);
212+
--color-background: var(--background);
213+
--color-foreground: var(--foreground);
214+
--color-card: var(--card);
215+
--color-card-foreground: var(--card-foreground);
216+
--color-popover: var(--popover);
217+
--color-popover-foreground: var(--popover-foreground);
218+
--color-primary: var(--primary);
219+
--color-primary-foreground: var(--primary-foreground);
220+
--color-secondary: var(--secondary);
221+
--color-secondary-foreground: var(--secondary-foreground);
222+
--color-muted: var(--muted);
223+
--color-muted-foreground: var(--muted-foreground);
224+
--color-accent: var(--accent);
225+
--color-accent-foreground: var(--accent-foreground);
226+
--color-destructive: var(--destructive);
227+
--color-border: var(--border);
228+
--color-input: var(--input);
229+
--color-ring: var(--ring);
230+
--color-chart-1: var(--chart-1);
231+
--color-chart-2: var(--chart-2);
232+
--color-chart-3: var(--chart-3);
233+
--color-chart-4: var(--chart-4);
234+
--color-chart-5: var(--chart-5);
235+
--color-sidebar: var(--sidebar);
236+
--color-sidebar-foreground: var(--sidebar-foreground);
237+
--color-sidebar-primary: var(--sidebar-primary);
238+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
239+
--color-sidebar-accent: var(--sidebar-accent);
240+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
241+
--color-sidebar-border: var(--sidebar-border);
242+
--color-sidebar-ring: var(--sidebar-ring);
243+
}
244+
245+
:root {
246+
--radius: 0.625rem;
247+
--background: oklch(1 0 0);
248+
--foreground: oklch(0.145 0 0);
249+
--card: oklch(1 0 0);
250+
--card-foreground: oklch(0.145 0 0);
251+
--popover: oklch(1 0 0);
252+
--popover-foreground: oklch(0.145 0 0);
253+
--primary: oklch(0.205 0 0);
254+
--primary-foreground: oklch(0.985 0 0);
255+
--secondary: oklch(0.97 0 0);
256+
--secondary-foreground: oklch(0.205 0 0);
257+
--muted: oklch(0.97 0 0);
258+
--muted-foreground: oklch(0.556 0 0);
259+
--accent: oklch(0.97 0 0);
260+
--accent-foreground: oklch(0.205 0 0);
261+
--destructive: oklch(0.577 0.245 27.325);
262+
--border: oklch(0.922 0 0);
263+
--input: oklch(0.922 0 0);
264+
--ring: oklch(0.708 0 0);
265+
--chart-1: oklch(0.646 0.222 41.116);
266+
--chart-2: oklch(0.6 0.118 184.704);
267+
--chart-3: oklch(0.398 0.07 227.392);
268+
--chart-4: oklch(0.828 0.189 84.429);
269+
--chart-5: oklch(0.769 0.188 70.08);
270+
--sidebar: oklch(0.985 0 0);
271+
--sidebar-foreground: oklch(0.145 0 0);
272+
--sidebar-primary: oklch(0.205 0 0);
273+
--sidebar-primary-foreground: oklch(0.985 0 0);
274+
--sidebar-accent: oklch(0.97 0 0);
275+
--sidebar-accent-foreground: oklch(0.205 0 0);
276+
--sidebar-border: oklch(0.922 0 0);
277+
--sidebar-ring: oklch(0.708 0 0);
278+
}
279+
280+
.dark {
281+
--background: oklch(0.145 0 0);
282+
--foreground: oklch(0.985 0 0);
283+
--card: oklch(0.205 0 0);
284+
--card-foreground: oklch(0.985 0 0);
285+
--popover: oklch(0.205 0 0);
286+
--popover-foreground: oklch(0.985 0 0);
287+
--primary: oklch(0.922 0 0);
288+
--primary-foreground: oklch(0.205 0 0);
289+
--secondary: oklch(0.269 0 0);
290+
--secondary-foreground: oklch(0.985 0 0);
291+
--muted: oklch(0.269 0 0);
292+
--muted-foreground: oklch(0.708 0 0);
293+
--accent: oklch(0.269 0 0);
294+
--accent-foreground: oklch(0.985 0 0);
295+
--destructive: oklch(0.704 0.191 22.216);
296+
--border: oklch(1 0 0 / 10%);
297+
--input: oklch(1 0 0 / 15%);
298+
--ring: oklch(0.556 0 0);
299+
--chart-1: oklch(0.488 0.243 264.376);
300+
--chart-2: oklch(0.696 0.17 162.48);
301+
--chart-3: oklch(0.769 0.188 70.08);
302+
--chart-4: oklch(0.627 0.265 303.9);
303+
--chart-5: oklch(0.645 0.246 16.439);
304+
--sidebar: oklch(0.205 0 0);
305+
--sidebar-foreground: oklch(0.985 0 0);
306+
--sidebar-primary: oklch(0.488 0.243 264.376);
307+
--sidebar-primary-foreground: oklch(0.985 0 0);
308+
--sidebar-accent: oklch(0.269 0 0);
309+
--sidebar-accent-foreground: oklch(0.985 0 0);
310+
--sidebar-border: oklch(1 0 0 / 10%);
311+
--sidebar-ring: oklch(0.556 0 0);
312+
}
313+
314+
@layer base {
315+
* {
316+
@apply border-border outline-ring/50;
317+
}
318+
body {
319+
@apply bg-background text-foreground;
320+
}
321+
}

‎web/src/app/chat/page.tsx‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
'use client';
2+
3+
import { HeroParallax } from '@/components/ui/hero-parallax';
4+
import { products } from './products';
5+
6+
export default function ChatPage() {
7+
return (
8+
<div className="relative w-full">
9+
<HeroParallax products={products} />
10+
11+
<div className="relative bg-black py-16 px-4">
12+
<div className="max-w-7xl mx-auto flex flex-col items-center justify-center gap-8">
13+
<div className="text-center">
14+
<h2 className="text-3xl md:text-4xl font-bold text-white mb-4">
15+
准备好开始了吗？
16+
</h2>
17+
<p className="text-gray-300 text-lg mb-8">
18+
点击下方按钮，立即体验 Xyzen AI Agent
19+
</p>
20+
</div>
21+
22+
<button
23+
onClick={() => {
24+
window.open(
25+
'https://www.bohrium.com/apps/xyzen',
26+
'_blank'
27+
);
28+
}}
29+
className="group relative px-8 py-3 text-lg font-semibold rounded bg-gradient-to-br from-violet-600 to-fuchsia-600 text-white hover:shadow-2xl transition-all duration-300 hover:scale-105"
30+
>
31+
开始使用 Xyzen
32+
</button>
33+
</div>
34+
</div>
35+
</div>
36+
);
37+
}

‎web/src/app/chat/products.ts‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
export const products = [
2+
{
3+
title: "chat1",
4+
link: "https://www.bohrium.com/apps/xyzen/job?type=app",
5+
thumbnail:
6+
"https://storage.sciol.ac.cn/library/docs/chat1.png",
7+
},
8+
{
9+
title: "chat2",
10+
link: "https://www.bohrium.com/apps/xyzen/job?type=app",
11+
thumbnail:
12+
"https://storage.sciol.ac.cn/library/docs/chat2.png",
13+
},
14+
{
15+
title: "chat3",
16+
link: "https://www.bohrium.com/apps/xyzen/job?type=app",
17+
thumbnail:
18+
"https://storage.sciol.ac.cn/library/docs/chat3.png",
19+
},
20+
21+
{
22+
title: "chat4",
23+
link: "https://www.bohrium.com/apps/xyzen/job?type=app",
24+
thumbnail:
25+
"https://storage.sciol.ac.cn/library/docs/chat4.png",
26+
},
27+
{
28+
title: "chat5",
29+
link: "https://www.bohrium.com/apps/xyzen/job?type=app",
30+
thumbnail:
31+
"https://storage.sciol.ac.cn/library/docs/chat5.png",
32+
},
33+
{
34+
title: "chat6",
35+
link: "https://www.bohrium.com/apps/xyzen/job?type=app",
36+
thumbnail:
37+
"https://storage.sciol.ac.cn/library/docs/chat6.png",
38+
},
39+
40+
{
41+
title: "chat7",
42+
link: "https://www.bohrium.com/apps/xyzen/job?type=app",
43+
thumbnail:
44+
"https://storage.sciol.ac.cn/library/docs/chat7.png",
45+
},
46+
{
47+
title: "chat8",
48+
link: "https://www.bohrium.com/apps/xyzen/job?type=app",
49+
thumbnail:
50+
"https://storage.sciol.ac.cn/library/docs/chat8.png",
51+
},
52+
{
53+
title: "chat9",
54+
link: "https://www.bohrium.com/apps/xyzen/job?type=app",
55+
thumbnail:
56+
"https://storage.sciol.ac.cn/library/docs/chat9.png",
57+
},
58+
{
59+
title: "chat10",
60+
link: "https://www.bohrium.com/apps/xyzen/job?type=app",
61+
thumbnail:
62+
"https://storage.sciol.ac.cn/library/docs/chat10.png",
63+
},
64+
{
65+
title: "chat11",
66+
link: "https://www.bohrium.com/apps/xyzen/job?type=app",
67+
thumbnail:
68+
"https://storage.sciol.ac.cn/library/docs/chat11.png",
69+
},
70+
71+
{
72+
title: "chat12",
73+
link: "https://www.bohrium.com/apps/xyzen/job?type=app",
74+
thumbnail:
75+
"https://storage.sciol.ac.cn/library/docs/chat12.png",
76+
},
77+
{
78+
title: "chat13",
79+
link: "https://www.bohrium.com/apps/xyzen/job?type=app",
80+
thumbnail:
81+
"https://storage.sciol.ac.cn/library/docs/chat13.png",
82+
},
83+
{
84+
title: "chat14",
85+
link: "https://www.bohrium.com/apps/xyzen/job?type=app",
86+
thumbnail:
87+
"https://storage.sciol.ac.cn/library/docs/chat14.png",
88+
},
89+
// {
90+
// title: "E Free Invoice",
91+
// link: "https://efreeinvoice.com",
92+
// thumbnail:
93+
// "https://aceternity.com/images/products/thumbnails/new/efreeinvoice.png",
94+
// },
95+
];

‎web/src/app/navbar/Navbar.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,22 @@
11
'use client';
22
import Logo from '@/assets/Logo';
33

4-
import { useState } from 'react';
4+
import React, { useState } from 'react';
55
import { useTranslation } from 'react-i18next';
66
import About from './About';
77
import Community from './Community';
88
import Projects from './Projects';
99
import { RightSideStatus } from './RightSideStatus';
1010
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+
}>;
19+
1220
const NavbarMenu = () => {
1321
const { t } = useTranslation();
1422
const [open, setOpen] = useState(false);
@@ -29,8 +37,7 @@ const NavbarMenu = () => {
2937
open={open}
3038
setOpen={setOpen}
3139
/>
32-
33-
<Tutorial
40+
<TutorialComponent
3441
index={4}
3542
activeMenuItem={activeMenuItem}
3643
setActiveMenuItem={setActiveMenuItem}

0 commit comments

Comments
 (0)