{Array.isArray(apps) && (
<>
diff --git a/agenta-web/src/components/AppSelector/Welcome.tsx b/agenta-web/src/components/AppSelector/Welcome.tsx
index fa25a9377..9620bc4b5 100644
--- a/agenta-web/src/components/AppSelector/Welcome.tsx
+++ b/agenta-web/src/components/AppSelector/Welcome.tsx
@@ -1,125 +1,50 @@
import React from "react"
-import {useAppTheme} from "../Layout/ThemeContextProvider"
import {createUseStyles} from "react-jss"
-import {CheckCircleFilled} from "@ant-design/icons"
-import {StyleProps} from "@/lib/Types"
+import {JSSTheme} from "@/lib/Types"
import Image from "next/image"
+import {Button, Card, Typography} from "antd"
+import {ArrowRight} from "@phosphor-icons/react"
-const useStyles = createUseStyles({
- head: {
- marginBottom: 30,
- "& h2": {
- fontSize: 18,
- margin: "20px 0",
- textAlign: "center",
- },
- },
- heading: {
+const useStyles = createUseStyles((theme: JSSTheme) => ({
+ card: {
+ width: 392,
+ height: 268,
display: "flex",
- alignItems: "center",
- justifyContent: "center",
- gap: "1rem",
- "& > h1": {
- margin: 0,
- fontSize: 36,
- },
+ cursor: "pointer",
+ flexDirection: "column",
+ justifyContent: "space-between",
+ transition: "all 0.025s ease-in",
+ boxShadow:
+ "0px 2px 4px 0px rgba(0, 0, 0, 0.02), 0px 1px 6px -1px rgba(0, 0, 0, 0.02), 0px 1px 2px 0px rgba(0, 0, 0, 0.03)",
+ "& > .ant-card-head": {
+ minHeight: 0,
+ padding: theme.paddingSM,
- "& > img": {
- animation: "$wave 1.8s ease-in-out infinite",
- height: 44,
- },
- },
- "@keyframes wave": {
- "0%": {
- transform: "rotate(0deg)",
+ "& .ant-card-head-title": {
+ fontSize: theme.fontSizeLG,
+ fontWeight: theme.fontWeightMedium,
+ },
},
- "10%": {
- transform: "rotate(-10deg)",
+ "& > .ant-card-body": {
+ padding: theme.paddingSM,
+ flex: 1,
},
- "20%": {
- transform: "rotate(12deg)",
+ "& > .ant-card-actions": {
+ padding: "0 12px",
},
- "30%": {
- transform: "rotate(-10deg)",
- },
- "40%": {
- transform: "rotate(9deg)",
- },
- "50%": {
- transform: "rotate(0deg)",
- },
- "100%": {
- transform: "rotate(0deg)",
- },
- },
- description: {
- lineHeight: 1.7,
- },
- wrapper: {
- display: "flex",
- justifyContent: "space-between",
- gap: 20,
- maxWidth: "1250px",
- margin: "0 auto",
- width: "100%",
- },
- container: ({themeMode}: StyleProps) => ({
- display: "flex",
- justifyContent: "space-between",
- cursor: "pointer",
- flexDirection: "column",
- border: `1px solid ${themeMode === "dark" ? "rgb(13, 17, 23)" : "#91caff"}`,
- padding: "15px",
- borderRadius: 10,
- flex: 1,
- backgroundColor: themeMode === "dark" ? "#000" : "#fff",
- transition: "all 0.3s ease-out",
"&:hover": {
- backgroundColor: themeMode === "dark" ? "" : "#f3faff",
- boxShadow: themeMode === "dark" ? "0 0 10px rgba(225, 225, 225, 0.3)" : "",
+ boxShadow: theme.boxShadow,
},
- }),
- title: {
- display: "flex",
- alignItems: "center",
- justifyContent: "center",
- gap: "15px",
- "& h1": {
- fontWeight: 600,
- fontSize: 24,
- },
- },
- tag: {
- padding: "2px 6px",
- fontWeight: "bold",
},
- img: ({themeMode}: StyleProps) => ({
+ button: {
width: "100%",
- height: "auto",
- filter: themeMode === "dark" ? "invert(1)" : "none",
- }),
- steps: ({themeMode}: StyleProps) => ({
- fontSize: 16,
- margin: "20px 0 0",
display: "flex",
- flexDirection: "column",
- listStyleType: "none",
- padding: 20,
- "& li": {
- marginBottom: 10,
- },
- "& svg": {
- color: themeMode === "dark" ? "#fff" : "#0958d9",
- marginRight: 10,
- },
- "& span": {
- fontWeight: 600,
+ alignItems: "center",
+ "& > .ant-btn-icon": {
+ marginTop: 4,
},
- }),
- text: {
- marginLeft: 25,
},
-})
+}))
interface Props {
onWriteOwnApp: () => void
@@ -127,100 +52,97 @@ interface Props {
}
const Welcome: React.FC
= ({onWriteOwnApp, onCreateFromTemplate}) => {
- const {appTheme} = useAppTheme()
- const classes = useStyles({themeMode: appTheme} as StyleProps)
+ const classes = useStyles()
- return (
- <>
-
-
-
-
Welcome to Agenta
-
-
- The developer-first open source LLMOps platform.
-
-
-
-
-
Quickstart From a Template
-
+ const templatePoints = [
+ "Compare prompts and models",
+ "Create testsets",
+ "Evaluate outputs",
+ "Deploy in one click",
+ ]
+ const complexLLM = [
+ "Use Langchain, Llama Index, or any framework",
+ "Use OpenAI, Cohere, or self-hosted open-source models",
+ "Continue in the UI: Everything in the left",
+ "Streamline collaboration between devs and domain experts!",
+ ]
-
+ return (
+
+
+
+
+ Start building and testing your LLM
applications with Agenta AI.{" "}
+
+
-
- -
- Start from a template
-
- -
- Compare prompts and models
-
- -
- Create testsets
-
- -
- Evaluate outputs
-
- -
- Deploy in one click
-
+
+
}
+ size="large"
+ >
+ Start with a template
+ ,
+ ]}
+ >
+
+
+ Setup an app using our preset LLM config and explore Agenta AI
+
+
+ {templatePoints.map((item) => (
+ - {item}
+ ))}
-
-
-
-
Build Complex LLM apps
-
+
-
-
-
-
- -
- Start from code
-
- -
- Use Langchain,{" "}
- Llama Index, or any framework
-
- -
- Use OpenAI, Cohere,
- or self-hosted open-source models
-
- -
- Continue in the UI: Everything in
- the left
-
- -
- Streamline collaboration between
- devs and domain experts!
-
+ }
+ size="large"
+ >
+ Setup your own app
+ ,
+ ]}
+ >
+
+
+ Create your own complex application using any framework.
+
+
+ {complexLLM.map((item) => (
+ - {item}
+ ))}
+
)
}
-
export default Welcome
diff --git a/agenta-web/src/components/Layout/Layout.tsx b/agenta-web/src/components/Layout/Layout.tsx
index 1e61ddbc1..5808fc852 100644
--- a/agenta-web/src/components/Layout/Layout.tsx
+++ b/agenta-web/src/components/Layout/Layout.tsx
@@ -166,57 +166,70 @@ const App: React.FC
= ({children}) => {
{typeof window === "undefined" ? null : (
-
-
+ {router.pathname.includes("/auth") ||
+ router.pathname.includes("/post-signup") ? (
-
-
- ),
- },
- {title: capitalizedAppName},
- ]}
- />
-
-
agenta v{packageJsonData.version}
+
+ {children}
+ {contextHolder}
+
+
+ ) : (
+
+
+
+
+
+ ),
+ },
+ {title: capitalizedAppName},
+ ]}
+ />
+
+ agenta v{packageJsonData.version}
+
-
-
- {children}
- {contextHolder}
-
-
-