update

web2/app/components/CTA.tsx

@@ -0,0 +1,18 @@
+import { Button } from "@/components/ui/button"
+
+export default function CTA() {
+  return (
+    <section className="py-20 bg-primary text-white">
+      <div className="container mx-auto text-center">
+        <h2 className="text-3xl font-bold mb-6">Ready to Streamline Your Workflow?</h2>
+        <p className="text-xl mb-8 max-w-2xl mx-auto">
+          Join thousands of teams already using StreamLine to boost their productivity.
+        </p>
+        <Button size="lg" variant="secondary">
+          Start Your Free Trial
+        </Button>
+      </div>
+    </section>
+  )
+}
+

web2/app/components/ClientLayout.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import Navbar from "@/components/navbar"
+import MouseMoveEffect from "@/components/mouse-move-effect"
+
+export default function ClientLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <Navbar />
+      <MouseMoveEffect />
+      <div className="pt-16 md:pt-16">{children}</div>
+    </>
+  )
+}

web2/app/components/DocSidebar.tsx

@@ -0,0 +1,50 @@
+"use client"
+
+import Link from "next/link"
+import { usePathname } from "next/navigation"
+import { useState } from "react"
+import { Menu } from "lucide-react"
+
+const sidebarItems = [
+  { title: "Introduction", href: "/docs/introduction" },
+  { title: "Installation", href: "/docs/installation" },
+  { title: "Getting Started", href: "/docs/getting-started" },
+  { title: "Features", href: "/docs/features" },
+  { title: "API", href: "/docs/api" },
+  { title: "Guides", href: "/guides" },
+  { title: "FAQ", href: "/docs/faq" },
+]
+
+export default function DocSidebar() {
+  const pathname = usePathname()
+  const [isOpen, setIsOpen] = useState(false)
+
+  return (
+    <nav className="w-full md:w-64 bg-gray-100 p-4 md:p-6">
+      <div className="flex justify-between items-center md:block">
+        <h2 className="text-lg font-semibold mb-4 text-gray-900">Documentation</h2>
+        <button className="md:hidden" onClick={() => setIsOpen(!isOpen)}>
+          <Menu className="h-6 w-6" />
+        </button>
+      </div>
+      <ul className={`space-y-2 ${isOpen ? "block" : "hidden"} md:block`}>
+        {sidebarItems.map((item) => (
+          <li key={item.href}>
+            <Link
+              href={item.href}
+              className={`block p-2 rounded ${
+                pathname === item.href
+                  ? "bg-blue-500 text-white"
+                  : "text-gray-700 hover:bg-gray-200 hover:text-gray-900"
+              }`}
+              onClick={() => setIsOpen(false)}
+            >
+              {item.title}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </nav>
+  )
+}
+

web2/app/components/MouseMoveEffect.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+export default function MouseMoveEffect() {
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
+
+  useEffect(() => {
+    const handleMouseMove = (event: MouseEvent) => {
+      setMousePosition({ x: event.clientX, y: event.clientY })
+    }
+
+    window.addEventListener("mousemove", handleMouseMove)
+
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove)
+    }
+  }, [])
+
+  return (
+    <div
+      className="pointer-events-none fixed inset-0 z-30 transition-opacity duration-300"
+      style={{
+        background: `radial-gradient(600px at ${mousePosition.x}px ${mousePosition.y}px, rgba(29, 78, 216, 0.15), transparent 80%)`,
+      }}
+    />
+  )
+}

web2/app/components/features.tsx

@@ -0,0 +1,44 @@
+import { CheckCircle, Zap, Users, TrendingUp } from "lucide-react"
+
+const features = [
+  {
+    icon: <CheckCircle className="h-8 w-8 text-primary" />,
+    title: "Task Management",
+    description: "Organize and prioritize tasks with ease.",
+  },
+  {
+    icon: <Zap className="h-8 w-8 text-primary" />,
+    title: "Real-time Collaboration",
+    description: "Work together seamlessly in real-time.",
+  },
+  {
+    icon: <Users className="h-8 w-8 text-primary" />,
+    title: "Team Communication",
+    description: "Stay connected with built-in messaging.",
+  },
+  {
+    icon: <TrendingUp className="h-8 w-8 text-primary" />,
+    title: "Analytics Dashboard",
+    description: "Track progress and gain insights with powerful analytics.",
+  },
+]
+
+export default function Features() {
+  return (
+    <section id="features" className="py-20 bg-gray-50">
+      <div className="container mx-auto">
+        <h2 className="text-3xl font-bold text-center mb-12">Key Features</h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {features.map((feature, index) => (
+            <div key={index} className="bg-white p-6 rounded-lg shadow-md">
+              <div className="mb-4">{feature.icon}</div>
+              <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
+              <p className="text-gray-600">{feature.description}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+

web2/app/components/footer.tsx

@@ -0,0 +1,58 @@
+import Link from "next/link"
+import { MessageCircle } from "lucide-react"
+import Image from "next/image"
+
+export default function Footer() {
+  return (
+    <footer className="bg-gray-900 text-white py-12">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex flex-col md:flex-row justify-between">
+          {/* Support Section - Left Side */}
+          <div className="flex flex-col items-start mb-8 md:mb-0">
+            <h4 className="text-lg font-semibold mb-4">Sponsor</h4>
+            <p className="text-gray-400 mb-4 max-w-md">
+              If you would like to support the project, you can buy me a coffee on Ko-fi! Thank you! 😊
+            </p>
+            <a
+              href="https://ko-fi.com/G2G313ECAN"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="hover:opacity-90 transition-opacity flex items-center"
+            >
+              <Image
+                src="https://raw.githubusercontent.com/MacRimi/HWEncoderX/main/images/kofi.png"
+                alt="Support me on Ko-fi"
+                width={175}
+                height={50}
+                className="w-[175px] mr-[65px]"
+              />
+            </a>
+          </div>
+
+          {/* Connect Section - Right Side */}
+          <div className="flex flex-col items-start md:items-end">
+            <h4 className="text-lg font-semibold mb-4">Connect</h4>
+            <p className="text-gray-400 mb-4 max-w-md md:text-right">
+              Join our community discussions on GitHub to get help, share ideas, and contribute to the project.
+            </p>
+            <Link
+              href="https://github.com/MacRimi/ProxMenux/discussions"
+              className="flex items-center text-blue-400 hover:text-blue-300 transition-colors duration-200"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              <MessageCircle className="mr-2 h-5 w-5" />
+              Join the Discussion
+            </Link>
+          </div>
+        </div>
+
+        {/* Copyright - Center */}
+        <div className="mt-8 pt-8 border-t border-gray-800 text-center text-gray-400">
+          <p>&copy; {new Date().getFullYear()} ProxMenux. All rights reserved.</p>
+        </div>
+      </div>
+    </footer>
+  )
+}
+

web2/app/components/header.tsx

@@ -0,0 +1,27 @@
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+
+export default function Header() {
+  return (
+    <header className="py-4 px-6 bg-white shadow-sm">
+      <div className="container mx-auto flex justify-between items-center">
+        <Link href="/" className="text-2xl font-bold text-primary">
+          StreamLine
+        </Link>
+        <nav className="hidden md:flex space-x-6">
+          <Link href="#features" className="text-gray-600 hover:text-primary">
+            Features
+          </Link>
+          <Link href="#testimonials" className="text-gray-600 hover:text-primary">
+            Testimonials
+          </Link>
+          <Link href="#pricing" className="text-gray-600 hover:text-primary">
+            Pricing
+          </Link>
+        </nav>
+        <Button>Get Started</Button>
+      </div>
+    </header>
+  )
+}
+

web2/app/components/hero.tsx

@@ -0,0 +1,30 @@
+import { Button } from "@/components/ui/button"
+import { ArrowRight } from "lucide-react"
+import Link from "next/link"
+
+export default function Hero() {
+  return (
+    <section className="py-20 px-4 sm:px-6 lg:px-8 text-center">
+      <h1 className="text-4xl sm:text-5xl md:text-6xl font-extrabold mb-6">
+        ProxMenux{" "}
+        <span className="bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500">
+          A menu-driven script for Proxmox VE management
+        </span>
+      </h1>
+      <p className="text-base sm:text-lg md:text-xl mb-8 max-w-4xl mx-auto text-gray-300">
+        ProxMenu is a tool designed to execute shell scripts in an organized manner, using a menu system with categories
+        to facilitate access and execution of various scripts hosted on GitHub. ProxMenu simplifies script usage, aiming
+        to improve productivity and streamline automated tasks.
+      </p>
+      <div className="flex justify-center">
+        <Button size="lg" className="bg-blue-500 hover:bg-blue-600" asChild>
+          <Link href="/docs/installation">
+            Install Now
+            <ArrowRight className="ml-2 h-4 w-4" />
+          </Link>
+        </Button>
+      </div>
+    </section>
+  )
+}
+

web2/app/components/mouse-move-effect.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import { useEffect, useState } from "react"
+
+export default function MouseMoveEffect() {
+  const [mousePosition, setMousePosition] = useState({ x: 0, y: 0 })
+
+  useEffect(() => {
+    const handleMouseMove = (event: MouseEvent) => {
+      setMousePosition({ x: event.clientX, y: event.clientY })
+    }
+
+    window.addEventListener("mousemove", handleMouseMove)
+
+    return () => {
+      window.removeEventListener("mousemove", handleMouseMove)
+    }
+  }, [])
+
+  return (
+    <div
+      className="pointer-events-none fixed inset-0 z-30 transition-opacity duration-300"
+      style={{
+        background: `radial-gradient(600px at ${mousePosition.x}px ${mousePosition.y}px, rgba(29, 78, 216, 0.15), transparent 80%)`,
+      }}
+    />
+  )
+}
+

web2/app/components/navbar.tsx

@@ -0,0 +1,73 @@
+"use client"
+
+import Link from "next/link"
+import Image from "next/image"
+import { Book, GitBranch, FileText, Github, Menu } from "lucide-react"
+import { useState } from "react"
+
+export default function Navbar() {
+  const [isMenuOpen, setIsMenuOpen] = useState(false)
+
+  const navItems = [
+    { href: "/docs/introduction", icon: <Book className="h-4 w-4" />, label: "Documentation" },
+    { href: "/changelog", icon: <FileText className="h-4 w-4" />, label: "Changelog" },
+    { href: "/guides", icon: <GitBranch className="h-4 w-4" />, label: "Guides" },
+    { href: "https://github.com/MacRimi/ProxMenux", icon: <Github className="h-4 w-4" />, label: "GitHub" },
+  ]
+
+  return (
+    <header className="fixed top-0 left-0 right-0 z-50 bg-background/95 backdrop-blur border-b border-border/40">
+      <div className="container mx-auto px-4">
+        <div className="flex items-center justify-between h-16">
+          <Link href="/" className="flex items-center space-x-2">
+            <Image
+              src="https://raw.githubusercontent.com/MacRimi/ProxMenux/main/images/logo2.png"
+              alt="ProxMenux Logo"
+              width={32}
+              height={32}
+              className="w-8 h-8"
+            />
+            <span className="text-xl font-bold">ProxMenux</span>
+          </Link>
+
+          {/* Desktop menu */}
+          <nav className="hidden md:flex items-center space-x-6 text-sm font-medium">
+            {navItems.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                className="flex items-center space-x-2 transition-colors hover:text-primary"
+              >
+                {item.icon}
+                <span>{item.label}</span>
+              </Link>
+            ))}
+          </nav>
+
+          {/* Mobile menu button */}
+          <button className="md:hidden p-2" onClick={() => setIsMenuOpen(!isMenuOpen)}>
+            <Menu className="h-6 w-6" />
+          </button>
+        </div>
+
+        {/* Mobile menu */}
+        {isMenuOpen && (
+          <nav className="md:hidden py-4">
+            {navItems.map((item) => (
+              <Link
+                key={item.href}
+                href={item.href}
+                className="flex items-center space-x-2 py-2 transition-colors hover:text-primary"
+                onClick={() => setIsMenuOpen(false)}
+              >
+                {item.icon}
+                <span>{item.label}</span>
+              </Link>
+            ))}
+          </nav>
+        )}
+      </div>
+    </header>
+  )
+}
+

web2/app/components/pricing.tsx

@@ -0,0 +1,53 @@
+import { Check } from "lucide-react"
+import { Button } from "@/components/ui/button"
+
+const plans = [
+  {
+    name: "Basic",
+    price: "$9",
+    features: ["5 team members", "10 projects", "Basic analytics", "Email support"],
+  },
+  {
+    name: "Pro",
+    price: "$29",
+    features: ["Unlimited team members", "Unlimited projects", "Advanced analytics", "Priority support"],
+  },
+  {
+    name: "Enterprise",
+    price: "Custom",
+    features: ["Custom features", "Dedicated account manager", "On-premise deployment", "24/7 phone support"],
+  },
+]
+
+export default function Pricing() {
+  return (
+    <section id="pricing" className="py-20 bg-gray-50">
+      <div className="container mx-auto">
+        <h2 className="text-3xl font-bold text-center mb-12">Choose Your Plan</h2>
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+          {plans.map((plan, index) => (
+            <div key={index} className="bg-white p-8 rounded-lg shadow-md">
+              <h3 className="text-2xl font-bold mb-4">{plan.name}</h3>
+              <p className="text-4xl font-bold mb-6">
+                {plan.price}
+                <span className="text-lg font-normal text-gray-600">/month</span>
+              </p>
+              <ul className="mb-8">
+                {plan.features.map((feature, featureIndex) => (
+                  <li key={featureIndex} className="flex items-center mb-2">
+                    <Check className="h-5 w-5 text-primary mr-2" />
+                    <span>{feature}</span>
+                  </li>
+                ))}
+              </ul>
+              <Button className="w-full" variant={index === 1 ? "default" : "outline"}>
+                {index === 2 ? "Contact Sales" : "Get Started"}
+              </Button>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+

web2/app/components/productPreview.tsx

@@ -0,0 +1,21 @@
+import Image from "next/image"
+
+export default function ProductPreview() {
+  return (
+    <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 mt-20">
+      <div className="relative rounded-lg overflow-hidden border border-white/10 shadow-2xl">
+        <div className="absolute inset-0 bg-gradient-to-tr from-primary/10 via-accent/10 to-transparent" />
+        <Image
+          src="https://sjc.microlink.io/dACoBD81V0jhbU_TaUYiRrOVrhAXOh8TCYVdXmvVaYFIpbvF9B17bU0pnQF3gHfzVAOFzC-nwZVACScUpFYQsg.jpeg"
+          alt="Huly App Interface"
+          width={1200}
+          height={800}
+          className="w-full h-auto"
+        />
+      </div>
+      {/* Glow effect */}
+      <div className="absolute -inset-x-20 top-0 h-[500px] bg-gradient-conic opacity-30 blur-3xl" />
+    </div>
+  )
+}
+

web2/app/components/resources.tsx

@@ -0,0 +1,52 @@
+import { Book, GitBranch, FileText, Github } from "lucide-react"
+import Link from "next/link"
+
+const resources = [
+  {
+    icon: <Book className="h-6 w-6" />,
+    title: "Documentation",
+    description: "Comprehensive guides to get you started",
+    link: "/docs/introduction",
+  },
+  {
+    icon: <FileText className="h-6 w-6" />,
+    title: "Changelog",
+    description: "Stay up to date with the latest changes",
+    link: "/changelog",
+  },
+  {
+    icon: <GitBranch className="h-6 w-6" />,
+    title: "Guides",
+    description: "Step-by-step tutorials for common tasks",
+    link: "/guides",
+  },
+  {
+    icon: <Github className="h-6 w-6" />,
+    title: "GitHub Repository",
+    description: "Explore the source code and contribute",
+    link: "https://github.com/MacRimi/ProxMenux",
+  },
+]
+
+export default function Resources() {
+  return (
+    <section className="py-20 bg-gray-900">
+      <div className="container mx-auto px-4">
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
+          {resources.map((resource, index) => (
+            <Link key={index} href={resource.link} className="block">
+              <div className="bg-gray-800 p-6 rounded-lg shadow-lg hover:bg-gray-700 transition-colors duration-200">
+                <div className="flex items-center mb-4">
+                  {resource.icon}
+                  <h3 className="text-xl font-semibold ml-2">{resource.title}</h3>
+                </div>
+                <p className="text-gray-400">{resource.description}</p>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+

web2/app/components/support-project.tsx

@@ -0,0 +1,26 @@
+import { Button } from "@/components/ui/button"
+import { Star } from "lucide-react"
+
+export default function SupportProject() {
+  return (
+    <section className="py-16 bg-gray-900">
+      <div className="container mx-auto px-4 text-center">
+        <h2 className="text-3xl font-bold mb-6">Support the Project!</h2>
+        <p className="text-xl mb-8">
+          If you find <span className="font-bold">ProxMenux</span> useful, consider giving it a ⭐ on GitHub to help
+          others discover it!
+        </p>
+        <div className="flex justify-center items-center">
+          <Button
+            className="bg-yellow-400 text-gray-900 hover:bg-yellow-500"
+            onClick={() => window.open("https://github.com/MacRimi/ProxMenux", "_blank")}
+          >
+            <Star className="mr-2" />
+            Star on GitHub
+          </Button>
+        </div>
+      </div>
+    </section>
+  )
+}
+

web2/app/components/testimonials.tsx

@@ -0,0 +1,35 @@
+const testimonials = [
+  {
+    quote: "StreamLine has revolutionized our team's workflow. It's a game-changer!",
+    author: "Jane Doe",
+    company: "Tech Innovators Inc.",
+  },
+  {
+    quote: "The best project management tool we've ever used. Highly recommended!",
+    author: "John Smith",
+    company: "Creative Solutions LLC",
+  },
+  {
+    quote: "StreamLine helped us increase productivity by 40%. It's incredible!",
+    author: "Emily Johnson",
+    company: "Startup Ventures",
+  },
+]
+
+export default function Testimonials() {
+  return (
+    <section className="py-20 px-4 sm:px-6 lg:px-8 bg-gray-900">
+      <h2 className="text-3xl font-bold text-center mb-12">What Our Customers Say</h2>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
+        {testimonials.map((testimonial, index) => (
+          <div key={index} className="bg-gray-800 p-6 rounded-lg shadow-lg">
+            <p className="text-lg mb-4">"{testimonial.quote}"</p>
+            <p className="font-semibold">{testimonial.author}</p>
+            <p className="text-sm text-gray-400">{testimonial.company}</p>
+          </div>
+        ))}
+      </div>
+    </section>
+  )
+}
+

web2/app/components/theme-provider.tsx

@@ -0,0 +1,7 @@
+'use client'
+
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  return <NextThemesProvider>{children}</NextThemesProvider>;
+}

web2/app/components/ui/button.tsx

@@ -0,0 +1,56 @@
+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 gap-2 whitespace-nowrap 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    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 }

web2/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 }
+

web2/app/components/ui/toast.tsx

@@ -0,0 +1,129 @@
+"use client"
+
+import * as React from "react"
+import * as ToastPrimitives from "@radix-ui/react-toast"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ToastProvider = ToastPrimitives.Provider
+
+const ToastViewport = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Viewport>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Viewport
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+))
+ToastViewport.displayName = ToastPrimitives.Viewport.displayName
+
+const toastVariants = cva(
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
+  {
+    variants: {
+      variant: {
+        default: "border bg-background text-foreground",
+        destructive:
+          "destructive group border-destructive bg-destructive text-destructive-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+    VariantProps<typeof toastVariants>
+>(({ className, variant, ...props }, ref) => {
+  return (
+    <ToastPrimitives.Root
+      ref={ref}
+      className={cn(toastVariants({ variant }), className)}
+      {...props}
+    />
+  )
+})
+Toast.displayName = ToastPrimitives.Root.displayName
+
+const ToastAction = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Action>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Action
+    ref={ref}
+    className={cn(
+      "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
+      className
+    )}
+    {...props}
+  />
+))
+ToastAction.displayName = ToastPrimitives.Action.displayName
+
+const ToastClose = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Close>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Close
+    ref={ref}
+    className={cn(
+      "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
+      className
+    )}
+    toast-close=""
+    {...props}
+  >
+    <X className="h-4 w-4" />
+  </ToastPrimitives.Close>
+))
+ToastClose.displayName = ToastPrimitives.Close.displayName
+
+const ToastTitle = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Title>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Title
+    ref={ref}
+    className={cn("text-sm font-semibold", className)}
+    {...props}
+  />
+))
+ToastTitle.displayName = ToastPrimitives.Title.displayName
+
+const ToastDescription = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitives.Description>,
+  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+>(({ className, ...props }, ref) => (
+  <ToastPrimitives.Description
+    ref={ref}
+    className={cn("text-sm opacity-90", className)}
+    {...props}
+  />
+))
+ToastDescription.displayName = ToastPrimitives.Description.displayName
+
+type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+
+type ToastActionElement = React.ReactElement<typeof ToastAction>
+
+export {
+  type ToastProps,
+  type ToastActionElement,
+  ToastProvider,
+  ToastViewport,
+  Toast,
+  ToastTitle,
+  ToastDescription,
+  ToastClose,
+  ToastAction,
+}