diff --git a/apps/web/package.json b/apps/web/package.json index 63c6182..462ea89 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -12,11 +12,11 @@ "dependencies": { "@xyflow/react": "^12.4.3", "babel-plugin-react-compiler": "^19.0.0-beta-21e868a-20250216", - "framer-motion": "^12.4.3", "fumadocs-core": "15.0.6", "fumadocs-mdx": "11.5.3", "fumadocs-ui": "15.0.6", "lucide-react": "^0.475.0", + "motion": "^12.4.3", "next": "15.1.6", "react": "^19.0.0", "react-dom": "^19.0.0" diff --git a/apps/web/src/app/(home)/_components/CustomizableSection.tsx b/apps/web/src/app/(home)/_components/CustomizableSection.tsx index 765ce44..28a225f 100644 --- a/apps/web/src/app/(home)/_components/CustomizableSection.tsx +++ b/apps/web/src/app/(home)/_components/CustomizableSection.tsx @@ -1,4 +1,4 @@ -import { motion } from "framer-motion"; +import { motion } from "motion/react"; import CustomizableStack from "./CustomizableStack"; export default function CustomizableSection() { diff --git a/apps/web/src/app/(home)/_components/CustomizableStack.tsx b/apps/web/src/app/(home)/_components/CustomizableStack.tsx index d5ac571..2ee39ef 100644 --- a/apps/web/src/app/(home)/_components/CustomizableStack.tsx +++ b/apps/web/src/app/(home)/_components/CustomizableStack.tsx @@ -44,7 +44,7 @@ const CustomizableStack = () => { const [edges, setEdges, onEdgesChange] = useEdgesState(initialEdges); const [activeNodes, setActiveNodes] = useState({ backend: "hono", - database: "libsql", + database: "sqlite", orm: "drizzle", auth: "better-auth", }); @@ -140,9 +140,9 @@ const CustomizableStack = () => { const generateCommand = useCallback(() => { const flags: string[] = ["-y"]; - if (activeNodes.database !== "libsql") { + if (activeNodes.database !== "sqlite") { flags.splice(flags.indexOf("-y"), 1); - flags.push(`--database ${activeNodes.database}`); + flags.push(`--${activeNodes.database}`); } if (activeNodes.auth !== "better-auth") { diff --git a/apps/web/src/app/(home)/_components/Icons.tsx b/apps/web/src/app/(home)/_components/Icons.tsx index 47dad25..73a2cea 100644 --- a/apps/web/src/app/(home)/_components/Icons.tsx +++ b/apps/web/src/app/(home)/_components/Icons.tsx @@ -120,6 +120,23 @@ const PackageIcon = ({ pm, className }: { pm: string; className?: string }) => { /> ); + + case "github": + return ( + + Github + + + ); default: return null; } diff --git a/apps/web/src/app/(home)/_components/Navbar.tsx b/apps/web/src/app/(home)/_components/Navbar.tsx index f7918cb..1c98ea4 100644 --- a/apps/web/src/app/(home)/_components/Navbar.tsx +++ b/apps/web/src/app/(home)/_components/Navbar.tsx @@ -1,8 +1,10 @@ "use client"; +import Link from "next/link"; import { useEffect, useRef, useState } from "react"; +import PackageIcon from "./Icons"; const Navbar = () => { - const [activeLink, setActiveLink] = useState("about"); + const [activeLink, setActiveLink] = useState("home"); const [bgStyles, setBgStyles] = useState({}); const [scrolled, setScrolled] = useState(false); const linkRefs = useRef<{ [key: string]: HTMLAnchorElement | null }>({}); @@ -56,57 +58,47 @@ const Navbar = () => {
- {/* biome-ignore lint/a11y/useValidAnchor: */} - { - linkRefs.current.about = ref; + linkRefs.current.home = ref; }} - onClick={() => setActiveLink("about")} + onMouseOver={() => setActiveLink("home")} className="text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative" > - About - - {/* biome-ignore lint/a11y/useValidAnchor: */} - + { - linkRefs.current.careers = ref; + linkRefs.current.github = ref; }} - onClick={() => setActiveLink("careers")} - className="text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative" + onMouseOver={() => setActiveLink("github")} + onMouseLeave={() => setActiveLink("home")} + className="text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative flex gap-2 items-center" > - Careers - - {/* biome-ignore lint/a11y/useValidAnchor: */} - Github + + { - linkRefs.current.blog = ref; + linkRefs.current.npm = ref; }} - onClick={() => setActiveLink("blog")} - className="text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative" + onMouseOver={() => setActiveLink("npm")} + onMouseLeave={() => setActiveLink("home")} + className="text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative flex gap-2 items-center" > - Blog - - {/* biome-ignore lint/a11y/useValidAnchor: */} - { - linkRefs.current.changelog = ref; - }} - onClick={() => setActiveLink("changelog")} - className="text-gray-300 hover:text-white transition-colors py-2 px-4 rounded-full relative" - > - Changelog - + Npm + { > | - {/* biome-ignore lint/a11y/useValidAnchor: */} - { linkRefs.current.documentation = ref; }} - onClick={() => setActiveLink("documentation")} + onMouseOver={() => setActiveLink("documentation")} + onMouseLeave={() => setActiveLink("home")} style={{ transform: scrolled ? "translateY(0)" : "translateY(-8px)", }} @@ -133,7 +125,7 @@ const Navbar = () => { }`} > Documentation - +
= { - backend: [ - { id: "hono", label: "Hono", category: "backend" }, - { id: "express", label: "Express", category: "backend" }, - ], database: [ - { id: "libsql", label: "libSQL", category: "database" }, + { id: "sqlite", label: "Sqlite", category: "database" }, { id: "postgres", label: "PostgreSQL", category: "database" }, ], orm: [ diff --git a/apps/web/src/lib/constant.ts b/apps/web/src/lib/constant.ts index f929674..ee714c6 100644 --- a/apps/web/src/lib/constant.ts +++ b/apps/web/src/lib/constant.ts @@ -170,19 +170,6 @@ export const initialNodes: TechNode[] = [ group: "backend", }, }, - { - id: "express", - type: "techNode", - position: { x: 897, y: 389 }, - data: { - label: "Express", - category: "backend", - description: "Fast, unopinionated web framework", - isDefault: false, - isActive: false, - group: "backend", - }, - }, { id: "libsql", type: "techNode", diff --git a/bun.lock b/bun.lock index 45f7615..6a64563 100644 --- a/bun.lock +++ b/bun.lock @@ -41,11 +41,11 @@ "dependencies": { "@xyflow/react": "^12.4.3", "babel-plugin-react-compiler": "^19.0.0-beta-21e868a-20250216", - "framer-motion": "^12.4.3", "fumadocs-core": "15.0.6", "fumadocs-mdx": "11.5.3", "fumadocs-ui": "15.0.6", "lucide-react": "^0.475.0", + "motion": "^12.4.3", "next": "15.1.6", "react": "^19.0.0", "react-dom": "^19.0.0", @@ -1233,6 +1233,8 @@ "minipass": ["minipass@7.1.2", "", {}, "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw=="], + "motion": ["motion@12.4.3", "", { "dependencies": { "framer-motion": "^12.4.3", "tslib": "^2.4.0" }, "peerDependencies": { "@emotion/is-prop-valid": "*", "react": "^18.0.0 || ^19.0.0", "react-dom": "^18.0.0 || ^19.0.0" }, "optionalPeers": ["@emotion/is-prop-valid", "react", "react-dom"] }, "sha512-KeoMpKFEVdofN0v/z1g3tm4cMtk1WAHQ5Pg7M1ElxeRLA8cBSrkmSCJ9q6hLo7spp/n906h2kmeDNvBkysaxcQ=="], + "motion-dom": ["motion-dom@12.0.0", "", { "dependencies": { "motion-utils": "^12.0.0" } }, "sha512-CvYd15OeIR6kHgMdonCc1ihsaUG4MYh/wrkz8gZ3hBX/uamyZCXN9S9qJoYF03GqfTt7thTV/dxnHYX4+55vDg=="], "motion-utils": ["motion-utils@12.0.0", "", {}, "sha512-MNFiBKbbqnmvOjkPyOKgHUp3Q6oiokLkI1bEwm5QA28cxMZrv0CbbBGDNmhF6DIXsi1pCQBSs0dX8xjeER1tmA=="],