diff --git a/.nvmrc b/.nvmrc new file mode 100644 index 000000000..25bf17fc5 --- /dev/null +++ b/.nvmrc @@ -0,0 +1 @@ +18 \ No newline at end of file diff --git a/package.json b/package.json index 237117e0c..e335e0ba9 100644 --- a/package.json +++ b/package.json @@ -25,18 +25,31 @@ "@docusaurus/core": "^2.4.3", "@docusaurus/preset-classic": "^2.4.3", "@docusaurus/theme-mermaid": "^2.4.3", + "@floating-ui/react": "^0.26.28", "@giscus/react": "^2.2.4", + "@headlessui/react": "^1.7.19", "@mdx-js/react": "^1.6.21", "@popperjs/core": "^2.11.8", + "@radix-ui/react-icons": "^1.3.2", + "@types/react": "^17.0.90", + "@types/react-dom": "^17.0.26", + "autoprefixer": "^10.4.22", "axios": "^0.27.2", "clsx": "^1.1.1", "docusaurus-plugin-hotjar": "^0.0.2", "docusaurus-plugin-sass": "^0.2.1", + "framer-motion": "^6.5.1", + "postcss": "^8.5.6", "prism-react-renderer": "^1.2.1", "react": "^17.0.1", "react-dom": "^17.0.1", + "react-icons": "^4.12.0", "react-popper": "^2.3.0", - "sass": "^1.37.5" + "sass": "^1.37.5", + "tailwind-merge": "^2.6.0", + "tailwindcss": "^3.4.18", + "tailwindcss-animate": "^1.0.7", + "typescript": "^4.9.5" }, "devDependencies": { "@babel/core": "^7.18.13", @@ -67,5 +80,8 @@ "last 1 firefox version", "last 1 safari version" ] + }, + "engines": { + "node": ">=18.0.0" } } diff --git a/postcss.config.js b/postcss.config.js new file mode 100644 index 000000000..12a703d90 --- /dev/null +++ b/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/src/css/custom.css b/src/css/custom.css index 82420fcbf..be03d537c 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -8,6 +8,11 @@ * work well for content-centric websites. */ +/* Tailwind CSS directives */ +@tailwind base; +@tailwind components; +@tailwind utilities; + /* You can override the default Infima variables here. */ /* Fonts */ diff --git a/src/pages/index.js b/src/pages/index.js index a1e29d0c1..405d2f6be 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -2,286 +2,514 @@ import React, {useState} from "react"; import clsx from "clsx"; import Layout from "@theme/Layout"; import Link from "@docusaurus/Link"; -import styles from "./index.module.scss"; -import HomepageFeatures from "../components/HomepageFeatures"; -// eslint-disable-next-line unused-imports/no-unused-imports import Translate, {translate} from "@docusaurus/Translate"; -import CasdoorCard from "../components/CasdoorCard"; -import TabList from "../components/TabList"; -import TabItem from "@theme/TabItem"; -import CodeCard from "../components/CodeCard"; -import {UserList} from "@site/src/components/UserList"; -import {useWindowSize} from "@docusaurus/theme-common"; +import { useWindowSize } from "@docusaurus/theme-common"; +import { motion } from "framer-motion"; -function FrameMask(props) { - const [mouseState, setMouseState] = useState({state: false}); +// Constants +const DOCKER_INSTALL_COMMAND = "docker run -p 8000:8000 casbin/casdoor:latest"; + +// Modern Hero Section inspired by Refine +function ModernHeroSection() { const windowSize = useWindowSize(); const isMobile = windowSize === "mobile"; + const [copySuccess, setCopySuccess] = useState(false); - const maskStyle = { - position: "absolute", - top: "0px", - left: "0px", - zIndex: 10, - height: "100%", - width: "100%", - background: "rgba(0,0,0,0.4)", - cursor: "pointer", - borderRadius: "20px", - }; - const handleMouseEnter = () => { - setMouseState({ - ...mouseState, - state: true, - }); - - }; - const handleMouseLeave = () => { - setMouseState({ - ...mouseState, - state: false, - }); + const handleCopyCommand = async () => { + try { + await navigator.clipboard.writeText(DOCKER_INSTALL_COMMAND); + setCopySuccess(true); + setTimeout(() => setCopySuccess(false), 2000); + } catch (err) { + console.error('Failed to copy:', err); + } }; return ( -
- -