update

web/web/app/changelog/page.tsx

@@ -0,0 +1,24 @@
+import fs from "fs"
+import path from "path"
+import { remark } from "remark"
+import html from "remark-html"
+
+async function getChangelog() {
+  const changelogPath = path.join(process.cwd(), "..", "CHANGELOG.md")
+  const fileContents = fs.readFileSync(changelogPath, "utf8")
+
+  const result = await remark().use(html).process(fileContents)
+  return result.toString()
+}
+
+export default async function ChangelogPage() {
+  const changelogContent = await getChangelog()
+
+  return (
+    <div className="container mx-auto px-4 py-16 max-w-4xl">
+      <h1 className="text-4xl font-bold mb-8">Changelog</h1>
+      <div className="prose prose-lg dark:prose-invert" dangerouslySetInnerHTML={{ __html: changelogContent }} />
+    </div>
+  )
+}
+

web/web/app/components/ui/button.tsx

@@ -0,0 +1,48 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-10 px-4 py-2",
+        sm: "h-9 rounded-md px-3",
+        lg: "h-11 rounded-md px-8",
+        icon: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
+  },
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }
+

web/web/app/components/ui/steps.tsx

@@ -0,0 +1,35 @@
+import React from "react"
+
+interface StepProps {
+  title: string
+  children: React.ReactNode
+}
+
+const Step: React.FC<StepProps> = ({ title, children }) => (
+  <div className="mb-8">
+    <h3 className="text-xl font-semibold mb-2 text-gray-900">{title}</h3>
+    {children}
+  </div>
+)
+
+interface StepsProps {
+  children: React.ReactNode
+}
+
+const Steps: React.FC<StepsProps> & { Step: typeof Step } = ({ children }) => (
+  <div className="space-y-4">
+    {React.Children.map(children, (child, index) => (
+      <div className="flex items-start">
+        <div className="flex-shrink-0 w-8 h-8 bg-blue-500 text-white rounded-full flex items-center justify-center mr-4 mt-1">
+          {index + 1}
+        </div>
+        <div className="flex-grow">{child}</div>
+      </div>
+    ))}
+  </div>
+)
+
+Steps.Step = Step
+
+export { Steps }
+

web/web/app/globals.css

@@ -0,0 +1,60 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 240 10% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+    --primary: 240 5.9% 10%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 5.9% 90%;
+    --input: 240 5.9% 90%;
+    --ring: 240 5.9% 10%;
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+

web/web/app/guides/[slug]/page.tsx

@@ -0,0 +1,30 @@
+import fs from "fs"
+import path from "path"
+import { remark } from "remark"
+import html from "remark-html"
+
+async function getGuideContent(slug: string) {
+  const guidePath = path.join(process.cwd(), "..", "guides", `${slug}.md`)
+  const fileContents = fs.readFileSync(guidePath, "utf8")
+
+  const result = await remark().use(html).process(fileContents)
+  return result.toString()
+}
+
+export async function generateStaticParams() {
+  const guideFiles = fs.readdirSync(path.join(process.cwd(), "..", "guides"))
+  return guideFiles.map((file) => ({
+    slug: file.replace(/\.md$/, ""),
+  }))
+}
+
+export default async function GuidePage({ params }: { params: { slug: string } }) {
+  const guideContent = await getGuideContent(params.slug)
+
+  return (
+    <div className="container mx-auto px-4 py-16 max-w-3xl">
+      <div className="prose prose-lg dark:prose-invert" dangerouslySetInnerHTML={{ __html: guideContent }} />
+    </div>
+  )
+}
+

web/web/app/layout.tsx

@@ -0,0 +1,31 @@
+import "./globals.css"
+import { Inter } from "next/font/google"
+import type React from "react"
+import type { Metadata } from "next"
+import Navbar from "@/components/navbar"
+import MouseMoveEffect from "@/components/mouse-move-effect"
+
+const inter = Inter({ subsets: ["latin"] })
+
+export const metadata: Metadata = {
+  title: "ProxMenux - A menu-driven script for Proxmox VE management",
+  description:
+    "ProxMenux is a tool designed to execute shell scripts in an organized manner for Proxmox VE management.",
+}
+
+export default function RootLayout({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  return (
+    <html lang="en" className="dark">
+      <body className={`${inter.className} bg-background text-foreground antialiased`}>
+        <Navbar />
+        <MouseMoveEffect />
+        <div className="pt-16 md:pt-16">{children}</div>
+      </body>
+    </html>
+  )
+}
+

web/web/app/page.tsx

@@ -0,0 +1,16 @@
+import Hero from "@/components/hero"
+import Resources from "@/components/resources"
+import SupportProject from "@/components/support-project"
+import Footer from "@/components/footer"
+
+export default function Home() {
+  return (
+    <div className="min-h-screen bg-gradient-to-b from-gray-900 to-gray-800 text-white pt-16">
+      <Hero />
+      <Resources />
+      <SupportProject />
+      <Footer />
+    </div>
+  )
+}
+