diff --git a/web/package-lock.json b/web/package-lock.json index 0960f763b29..3febdd98d74 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -13,6 +13,7 @@ "@hookform/resolvers": "^3.9.1", "@js-preview/excel": "^1.7.8", "@monaco-editor/react": "^4.6.0", + "@radix-ui/react-aspect-ratio": "^1.1.0", "@radix-ui/react-avatar": "^1.1.1", "@radix-ui/react-checkbox": "^1.1.2", "@radix-ui/react-dropdown-menu": "^2.1.2", @@ -4085,6 +4086,28 @@ } } }, + "node_modules/@radix-ui/react-aspect-ratio": { + "version": "1.1.0", + "resolved": "https://registry.npmmirror.com/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.0.tgz", + "integrity": "sha512-dP87DM/Y7jFlPgUZTlhx6FF5CEzOiaxp2rBCKlaXlpH5Ip/9Fg5zZ9lDOQ5o/MOfUlf36eak14zoWYpgcgGoOg==", + "dependencies": { + "@radix-ui/react-primitive": "2.0.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-avatar": { "version": "1.1.1", "resolved": "https://registry.npmmirror.com/@radix-ui/react-avatar/-/react-avatar-1.1.1.tgz", diff --git a/web/package.json b/web/package.json index d6d1cdc6f62..f9173610d0e 100644 --- a/web/package.json +++ b/web/package.json @@ -24,6 +24,7 @@ "@hookform/resolvers": "^3.9.1", "@js-preview/excel": "^1.7.8", "@monaco-editor/react": "^4.6.0", + "@radix-ui/react-aspect-ratio": "^1.1.0", "@radix-ui/react-avatar": "^1.1.1", "@radix-ui/react-checkbox": "^1.1.2", "@radix-ui/react-dropdown-menu": "^2.1.2", diff --git a/web/src/assets/banner.png b/web/src/assets/banner.png new file mode 100644 index 00000000000..df6afa3c5f6 Binary files /dev/null and b/web/src/assets/banner.png differ diff --git a/web/src/components/ui/aspect-ratio.tsx b/web/src/components/ui/aspect-ratio.tsx new file mode 100644 index 00000000000..aaabffbc450 --- /dev/null +++ b/web/src/components/ui/aspect-ratio.tsx @@ -0,0 +1,7 @@ +'use client'; + +import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio'; + +const AspectRatio = AspectRatioPrimitive.Root; + +export { AspectRatio }; diff --git a/web/src/components/ui/badge.tsx b/web/src/components/ui/badge.tsx new file mode 100644 index 00000000000..d7e8ee842a5 --- /dev/null +++ b/web/src/components/ui/badge.tsx @@ -0,0 +1,36 @@ +import { cva, type VariantProps } from 'class-variance-authority'; +import * as React from 'react'; + +import { cn } from '@/lib/utils'; + +const badgeVariants = cva( + 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', + { + variants: { + variant: { + default: + 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80', + secondary: + 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80', + destructive: + 'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80', + outline: 'text-foreground', + }, + }, + defaultVariants: { + variant: 'default', + }, + }, +); + +export interface BadgeProps + extends React.HTMLAttributes, + VariantProps {} + +function Badge({ className, variant, ...props }: BadgeProps) { + return ( +
+ ); +} + +export { Badge, badgeVariants }; diff --git a/web/src/pages/home/banner.tsx b/web/src/pages/home/banner.tsx new file mode 100644 index 00000000000..d55947e6353 --- /dev/null +++ b/web/src/pages/home/banner.tsx @@ -0,0 +1,51 @@ +import { Card, CardContent } from '@/components/ui/card'; +import { ArrowRight } from 'lucide-react'; + +function BannerCard() { + return ( + + + + System + +
+ Setting up your LLM + +
+ + + ); +} + +function MyCard() { + return ( +
+
+
+
+ System +
+
+
+ Setting up your LLM +
+
+
+
+ ); +} + +export function Banner() { + return ( +
+
+ Welcome to RAGFlow +
+
+ + + +
+
+ ); +} diff --git a/web/src/pages/home/index.tsx b/web/src/pages/home/index.tsx index e9aa7cef456..ea8906c0c40 100644 --- a/web/src/pages/home/index.tsx +++ b/web/src/pages/home/index.tsx @@ -1,12 +1,14 @@ -import { CardWithForm } from './card'; +import { Banner } from './banner'; import { HomeHeader } from './header'; +import NextBanner from './next-banner'; const Home = () => { return (
- + +
); diff --git a/web/src/pages/home/next-banner.tsx b/web/src/pages/home/next-banner.tsx new file mode 100644 index 00000000000..53570d9d5ce --- /dev/null +++ b/web/src/pages/home/next-banner.tsx @@ -0,0 +1,64 @@ +import { Badge } from '@/components/ui/badge'; +import { Card, CardContent } from '@/components/ui/card'; +import { ArrowRight, X } from 'lucide-react'; + +const guideCards = [ + { + badge: 'System', + title: 'Setting up your LLM', + }, + { + badge: 'Chat app', + title: 'Configuration guides', + }, + { + badge: 'Search app', + title: 'Prompt setting guides', + }, +]; + +export default function WelcomeGuide(): JSX.Element { + return ( +
+
+ +

+ Welcome to RAGFlow +

+ +
+ {guideCards.map((card, index) => ( + + +
+ + {card.badge} + +

+ {card.title} +

+
+ + + + ))} +
+ + +
+ ); +} diff --git a/web/tailwind.config.js b/web/tailwind.config.js index 7dce4733ef9..94fd67e9a1f 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -65,6 +65,10 @@ module.exports = { DEFAULT: 'var(--background-core-standard)', foreground: 'var(--background-core-standard-foreground)', }, + backgroundCoreWeak: { + DEFAULT: 'var(--background-core-weak)', + foreground: 'var(--background-core-weak-foreground)', + }, }, borderRadius: { lg: `var(--radius)`, diff --git a/web/tailwind.css b/web/tailwind.css index d2831e91473..ed2e54ed969 100644 --- a/web/tailwind.css +++ b/web/tailwind.css @@ -84,6 +84,9 @@ --background-inverse-strong: rgba(255, 255, 255, 0.15); --background-inverse-strong-foreground: rgba(255, 255, 255, 1); + + --background-core-weak: rgb(101, 75, 248); + --background-core-weak-foreground: rgba(255, 255, 255, 1); } }