diff --git a/web/src/app/chat/page.tsx b/web/src/app/chat/page.tsx new file mode 100644 index 0000000..452fd45 --- /dev/null +++ b/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 ( +
+ + +
+
+
+

+ 准备好开始了吗？ +

+

+ 点击下方按钮，立即体验 Xyzen AI Agent +

+
+ + +
+
+
+ ); +} diff --git a/web/src/app/chat/products.ts b/web/src/app/chat/products.ts new file mode 100644 index 0000000..ae9c9d5 --- /dev/null +++ b/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", + // }, +]; diff --git a/web/src/app/navbar/Navbar.tsx b/web/src/app/navbar/Navbar.tsx index 1226165..3c50cb2 100644 --- a/web/src/app/navbar/Navbar.tsx +++ b/web/src/app/navbar/Navbar.tsx @@ -1,7 +1,7 @@ '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'; @@ -9,6 +9,14 @@ 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>; + open: boolean; + setOpen: React.Dispatch>; +}>; + const NavbarMenu = () => { const { t } = useTranslation(); const [open, setOpen] = useState(false); @@ -29,8 +37,7 @@ const NavbarMenu = () => { open={open} setOpen={setOpen} /> - - +// ) { +// return ( +// +// ); +// } + import { - ABACUSIcon, - AISSquareIcon, - DeePMDIcon, - DPGenIcon, -} from '@/assets/Icons'; -import Logo from '@/assets/Logo'; -import NavbarFullWidthPreview from './NavbarFullWidthPreview'; -import type { NavbarFullWidthPreviewProps } from './types'; + // BookmarkSquareIcon, + EnvelopeIcon, + // PuzzlePieceIcon, + // RectangleGroupIcon, +} from '@heroicons/react/24/outline'; + +import { SiUnrealengine,SiUnity,SiProton,SiX,SiStmicroelectronics } from 'react-icons/si'; +import { GitHubIcon } from '@/assets/SocialIcons'; +import NavbarFullWidth from './NavbarFullWidth'; +import type { NavbarFullWidthProps } from './types'; +// import { color } from 'framer-motion'; -const options = { - 'Molecule Dynamics': [ - { - name: 'DeePMD-kit', - description: 'Learn how to use DeePMD-kit', - href: `/space/DeePMD-kit`, - icon: DeePMDIcon, - }, - { - name: 'DPGen', - description: 'Learn from DPGen publications', - href: `/dp-gen`, - icon: DPGenIcon, - }, - { - name: 'DeePMD-kit', - description: 'Learn how to use DeePMD-kit', - href: `/DeePMD-kit`, - icon: DeePMDIcon, - }, - { - name: 'DPGen', - description: 'Learn from DPGen publications', - href: `/DeePMD-kit`, - icon: DPGenIcon, - }, - { - name: 'DeePMD-kit', - description: 'Learn how to use DeePMD-kit', - href: `/DeePMD-kit`, - icon: DeePMDIcon, - }, - { - name: 'DPGen', - description: 'Learn from DPGen publications', - href: `/DeePMD-kit`, - icon: DPGenIcon, - }, - { - name: 'DeePMD-kit', - description: 'Learn how to use DeePMD-kit', - href: `/DeePMD-kit`, - icon: DeePMDIcon, - }, - { - name: 'DPGen', - description: 'Learn from DPGen publications', - href: `/DeePMD-kit`, - icon: DPGenIcon, - }, - ], - 'Density Functional Theory': [ - { - name: 'ABACUS', - description: 'Learn how to use ABACUS', - href: `/abacus`, - icon: ABACUSIcon, - }, - ], - 'Finite Element Method': [ - { - name: 'Protium', - description: 'Get all of our website information', - href: ``, - icon: Logo, - }, - { - name: 'DeePMD-kit', - description: 'Learn how to use DeePMD-kit', - href: `/DeePMD-kit`, - icon: DeePMDIcon, - }, - ], - 'Community Platform': [ - { - name: 'Protium', - description: 'Get all of our website information', - href: ``, - icon: Logo, - }, - { - name: 'AIS-Square', - description: 'Learn how to use DeePMD-kit', - href: `/DeePMD-kit`, - icon: AISSquareIcon, - }, - ], -}; +const resources = [ + { + name: 'Studio', + description: '所有ScienceOL服务和社区的门户', + href: ``, + icon:SiStmicroelectronics, + color:'text-sky-500', + }, + { + name: 'Xyzen', + description: '面向实验室场景的专用智能体', + href: `/chat`, + icon: SiX, + color:'text-amber-500', + }, + { + name: 'PROTIUM', + description: '为科学计算设计的AI原生工作流引擎', + href: `/deepmd-kit`, + icon: SiProton, + color:'text-indigo-500', + }, + { + name: 'Anti', + description: '用于实验室模拟的3D数字孪生平台', + href: `/deepmd-kit`, + icon: SiUnity, + color:'text-rose-500', + }, + { + name: 'Lab-OS', + description: '用于模块化实验室硬件的开源操作系统', + href: `/deepmd-kit`, + icon: SiUnrealengine, + color:'text-emerald-500', + } +]; const callsToAction = [ - { name: 'See All Projects', href: '/space', icon: RocketLaunchIcon }, { name: 'Follow in Github', href: 'https://github.com/Protium', @@ -112,15 +189,17 @@ const callsToAction = [ export default function Projects( props: Omit< - NavbarFullWidthPreviewProps, - 'callsToAction' | 'buttonName' | 'options' + NavbarFullWidthProps, + 'solutions' | 'callsToAction' | 'buttonName' > ) { return ( - ); diff --git a/web/src/app/navbar/Tutorials.tsx b/web/src/app/navbar/Tutorials.tsx index ce0577f..483fab8 100644 --- a/web/src/app/navbar/Tutorials.tsx +++ b/web/src/app/navbar/Tutorials.tsx @@ -1,58 +1,75 @@ -import { - BookmarkSquareIcon, - EnvelopeIcon, - PuzzlePieceIcon, - RectangleGroupIcon, -} from '@heroicons/react/24/outline'; +// import { +// BookmarkSquareIcon, +// EnvelopeIcon, +// PuzzlePieceIcon, +// RectangleGroupIcon, +// } from '@heroicons/react/24/outline'; -import { GitHubIcon } from '@/assets/SocialIcons'; -import NavbarFullWidth from './NavbarFullWidth'; -import type { NavbarFullWidthProps } from './types'; +// import { GitHubIcon } from '@/assets/SocialIcons'; +// import NavbarFullWidth from './NavbarFullWidth'; +// import type { NavbarFullWidthProps } from './types'; -const resources = [ - { - name: 'Overview', - description: 'Get review of our projects', - href: ``, - icon: BookmarkSquareIcon, - }, - { - name: 'Workflow', - description: 'Learn from DeePMD-kit publications', - href: `/deepmd-kit`, - icon: RectangleGroupIcon, - }, - { - name: 'Flociety', - description: 'Learn from DPGen publications', - href: `/deepmd-kit`, - icon: PuzzlePieceIcon, - }, -]; +// const resources = [ +// { +// name: 'Overview', +// description: 'Get review of our projects', +// href: ``, +// icon: BookmarkSquareIcon, +// }, +// { +// name: 'Workflow', +// description: 'Learn from DeePMD-kit publications', +// href: `/deepmd-kit`, +// icon: RectangleGroupIcon, +// }, +// { +// name: 'Flociety', +// description: 'Learn from DPGen publications', +// href: `/deepmd-kit`, +// icon: PuzzlePieceIcon, +// }, +// ]; -const callsToAction = [ - { - name: 'Follow in Github', - href: 'https://github.com/Protium', - icon: GitHubIcon, - }, - { name: 'Contact us', href: '#', icon: EnvelopeIcon }, -]; +// const callsToAction = [ +// { +// name: 'Follow in Github', +// href: 'https://github.com/Protium', +// icon: GitHubIcon, +// }, +// { name: 'Contact us', href: '#', icon: EnvelopeIcon }, +// ]; -export default function Tutorial( - props: Omit< - NavbarFullWidthProps, - 'solutions' | 'callsToAction' | 'buttonName' - > -) { +// export default function Tutorial( +// props: Omit< +// NavbarFullWidthProps, +// 'solutions' | 'callsToAction' | 'buttonName' +// > +// ) { +// return ( +// +// ); +// } + +'use client'; + +// import Link from 'next/link'; + +export default function Tutorial() { return ( - + + 教程 + ); } diff --git a/web/src/components/ui/hero-parallax.tsx b/web/src/components/ui/hero-parallax.tsx new file mode 100644 index 0000000..75ae479 --- /dev/null +++ b/web/src/components/ui/hero-parallax.tsx @@ -0,0 +1,155 @@ +'use client'; +import { + motion, + MotionValue, + useScroll, + useSpring, + useTransform, +} from 'motion/react'; +import React from 'react'; + +export const HeroParallax = ({ + products, +}: { + products: { + title: string; + link: string; + thumbnail: string; + }[]; +}) => { + const firstRow = products.slice(0, 5); + const secondRow = products.slice(5, 10); + const thirdRow = products.slice(10, 15); + const ref = React.useRef(null); + const { scrollYProgress } = useScroll({ + target: ref, + offset: ['start start', 'end start'], + }); + + const springConfig = { stiffness: 300, damping: 30, bounce: 100 }; + + const translateX = useSpring( + useTransform(scrollYProgress, [0, 1], [0, 1000]), + springConfig + ); + const translateXReverse = useSpring( + useTransform(scrollYProgress, [0, 1], [0, -1000]), + springConfig + ); + const rotateX = useSpring( + useTransform(scrollYProgress, [0, 0.2], [15, 0]), + springConfig + ); + const opacity = useSpring( + useTransform(scrollYProgress, [0, 0.2], [0.2, 1]), + springConfig + ); + const rotateZ = useSpring( + useTransform(scrollYProgress, [0, 0.2], [20, 0]), + springConfig + ); + const translateY = useSpring( + useTransform(scrollYProgress, [0, 0.2], [-700, 500]), + springConfig + ); + return ( +
+
+ + + {firstRow.map((product) => ( + + ))} + + + {secondRow.map((product) => ( + + ))} + + + {thirdRow.map((product) => ( + + ))} + + +
+ ); +}; + +export const Header = () => { + return ( + //white text +
+

+ Xyzen (/ˈsaɪ.zan/)！
AI-driven Agent IDE +

+

+ Xyzen 是一个 Agent， 他是一个会创造 Agent 的 Agent。 Xyzen + 可以为你开启一个通往Agent 与MCP无限可能的大门。 +

+
+ ); +}; + +export const ProductCard = ({ + product, + translate, +}: { + product: { + title: string; + link: string; + thumbnail: string; + }; + translate: MotionValue; +}) => { + return ( + + + {product.title} + +
+

+ {product.title} +

+ + ); +}; diff --git a/web/src/router.tsx b/web/src/router.tsx index 493edd4..8c9ac81 100644 --- a/web/src/router.tsx +++ b/web/src/router.tsx @@ -1,5 +1,6 @@ import { BrowserRouter, Route, Routes } from 'react-router-dom'; import App from './app/App'; +import ChatPage from './app/chat/page'; import { EnvironmentPage } from './app/dashboard/environment'; import EnvironmentDetail from './app/dashboard/environment/EnvironmentDetail'; import DashboardHome from './app/dashboard/Home'; @@ -20,6 +21,7 @@ export default function Router() { } /> } /> } /> + } /> {/* 所有需要侧边栏和登录保护的页面 */} }>