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

web/index.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@import "tw-animate-css";
 @source "node_modules/@sciol/xyzen/dist/xyzen.css";
 
 @custom-variant dark (&:where(.dark, .dark *));
@@ -196,10 +197,125 @@ body {
   border-radius: 0.5rem;
 }
 
-
 @media (prefers-reduced-motion: reduce) {
   .animate-sheen {
     animation: none;
     opacity: .25;
   }
 }
+
+@theme inline {
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

web/src/app/chat/page.tsx

@@ -0,0 +1,37 @@
+'use client';
+
+import { HeroParallax } from '@/components/ui/hero-parallax';
+import { products } from './products';
+
+export default function ChatPage() {
+  return (
+    <div className="relative w-full">
+      <HeroParallax products={products} />
+
+      <div className="relative bg-black py-16 px-4">
+        <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>
+            <p className="text-gray-300 text-lg mb-8">
+              点击下方按钮，立即体验 Xyzen AI Agent
+            </p>
+          </div>
+
+          <button
+            onClick={() => {
+              window.open(
+                'https://www.bohrium.com/apps/xyzen',
+                '_blank'
+              );
+            }}
+            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"
+          >
+            开始使用 Xyzen
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

web/src/app/chat/products.ts

@@ -0,0 +1,95 @@
+export const products = [
+  {
+    title: "chat1",
+    link: "https://www.bohrium.com/apps/xyzen/job?type=app",
+    thumbnail:
+      "https://storage.sciol.ac.cn/library/docs/chat1.png",
+  },
+  {
+    title: "chat2",
+    link: "https://www.bohrium.com/apps/xyzen/job?type=app",
+    thumbnail:
+      "https://storage.sciol.ac.cn/library/docs/chat2.png",
+  },
+  {
+    title: "chat3",
+    link: "https://www.bohrium.com/apps/xyzen/job?type=app",
+    thumbnail:
+      "https://storage.sciol.ac.cn/library/docs/chat3.png",
+  },
+
+  {
+    title: "chat4",
+    link: "https://www.bohrium.com/apps/xyzen/job?type=app",
+    thumbnail:
+      "https://storage.sciol.ac.cn/library/docs/chat4.png",
+  },
+  {
+    title: "chat5",
+    link: "https://www.bohrium.com/apps/xyzen/job?type=app",
+    thumbnail:
+      "https://storage.sciol.ac.cn/library/docs/chat5.png",
+  },
+  {
+    title: "chat6",
+    link: "https://www.bohrium.com/apps/xyzen/job?type=app",
+    thumbnail:
+      "https://storage.sciol.ac.cn/library/docs/chat6.png",
+  },
+
+  {
+    title: "chat7",
+    link: "https://www.bohrium.com/apps/xyzen/job?type=app",
+    thumbnail:
+      "https://storage.sciol.ac.cn/library/docs/chat7.png",
+  },
+  {
+    title: "chat8",
+    link: "https://www.bohrium.com/apps/xyzen/job?type=app",
+    thumbnail:
+      "https://storage.sciol.ac.cn/library/docs/chat8.png",
+  },
+  {
+    title: "chat9",
+    link: "https://www.bohrium.com/apps/xyzen/job?type=app",
+    thumbnail:
+      "https://storage.sciol.ac.cn/library/docs/chat9.png",
+  },
+  {
+    title: "chat10",
+    link: "https://www.bohrium.com/apps/xyzen/job?type=app",
+    thumbnail:
+      "https://storage.sciol.ac.cn/library/docs/chat10.png",
+  },
+  {
+    title: "chat11",
+    link: "https://www.bohrium.com/apps/xyzen/job?type=app",
+    thumbnail:
+      "https://storage.sciol.ac.cn/library/docs/chat11.png",
+  },
+
+  {
+    title: "chat12",
+    link: "https://www.bohrium.com/apps/xyzen/job?type=app",
+    thumbnail:
+      "https://storage.sciol.ac.cn/library/docs/chat12.png",
+  },
+  {
+    title: "chat13",
+    link: "https://www.bohrium.com/apps/xyzen/job?type=app",
+    thumbnail:
+      "https://storage.sciol.ac.cn/library/docs/chat13.png",
+  },
+  {
+    title: "chat14",
+    link: "https://www.bohrium.com/apps/xyzen/job?type=app",
+    thumbnail:
+      "https://storage.sciol.ac.cn/library/docs/chat14.png",
+  },
+  // {
+  //   title: "E Free Invoice",
+  //   link: "https://efreeinvoice.com",
+  //   thumbnail:
+  //     "https://aceternity.com/images/products/thumbnails/new/efreeinvoice.png",
+  // },
+];

web/src/app/navbar/Navbar.tsx

@@ -1,14 +1,22 @@
 'use client';
 import Logo from '@/assets/Logo';
 
-import { useState } from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import About from './About';
 import Community from './Community';
 import Projects from './Projects';
 import { RightSideStatus } from './RightSideStatus';
 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 NavbarMenu = () => {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
@@ -29,8 +37,7 @@ const NavbarMenu = () => {
         open={open}
         setOpen={setOpen}
       />
-
-      <Tutorial
+      <TutorialComponent
         index={4}
         activeMenuItem={activeMenuItem}
         setActiveMenuItem={setActiveMenuItem}