Update main page

This commit is contained in:
MacRimi 2025-03-07 18:44:01 +01:00
parent ae5d2d589b
commit fa9d588e22

View File

@ -8,30 +8,51 @@ import Image from "next/image"
export default function Hero() { export default function Hero() {
return ( return (
<div className="bg-gradient-to-b from-gray-900 to-gray-800 text-white"> <div className="bg-gradient-to-b from-gray-900 to-gray-800 text-white">
<section className="py-20 px-4 sm:px-6 lg:px-8 flex flex-col justify-center"> {/* Mobile version (visible only on small screens) */}
<div className="flex flex-col md:flex-row items-center justify-center mb-8"> <section className="md:hidden py-20 px-4 sm:px-6 text-center">
<div className="flex flex-col md:flex-row items-center"> <h1 className="text-4xl sm:text-5xl font-extrabold mb-6">
<div className="w-32 h-32 sm:w-40 sm:h-40 md:w-48 md:h-48 lg:w-56 lg:h-56 xl:w-64 xl:h-64 relative mb-6 md:mb-0 md:mr-6"> ProxMenux{" "}
<span className="block mt-2 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500 font-bold">
An Interactive Menu for Proxmox VE Management
</span>
</h1>
<p className="text-base sm:text-lg mb-8 max-w-4xl mx-auto text-gray-300">
ProxMenux is a management tool for Proxmox VE that simplifies system administration through an interactive
menu, allowing you to execute commands and scripts with ease.
</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>
{/* Desktop version (visible only on medium and large screens) */}
<section className="hidden md:flex py-20 px-4 sm:px-6 lg:px-8 flex-col justify-center">
<div className="flex items-center justify-center mb-8">
<div className="flex items-center">
<div className="w-40 h-40 lg:w-48 lg:h-48 xl:w-56 xl:h-56 relative">
<Image <Image
src="https://raw.githubusercontent.com/MacRimi/ProxMenux/main/images/logo.png" src="https://raw.githubusercontent.com/MacRimi/ProxMenux/main/images/logo.png"
alt="ProxMenux Logo" alt="ProxMenux Logo"
fill fill
className="object-contain" className="object-contain"
sizes="(max-width: 640px) 8rem, (max-width: 768px) 10rem, (max-width: 1024px) 12rem, (max-width: 1280px) 14rem, 16rem" sizes="(max-width: 1024px) 10rem, (max-width: 1280px) 12rem, 14rem"
/> />
</div> </div>
<div className="hidden md:block w-0.5 h-40 lg:h-48 xl:h-56 bg-white mx-4 md:mx-6 self-center"></div> <div className="w-0.5 h-40 lg:h-48 xl:h-56 bg-white mx-6 self-center"></div>
<div className="text-center md:text-left mt-4 md:mt-0 max-w-full md:max-w-md lg:max-w-lg xl:max-w-xl"> <div className="text-left max-w-md lg:max-w-lg xl:max-w-xl">
<h1 className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-extrabold text-white leading-tight"> <h1 className="text-4xl md:text-5xl lg:text-6xl font-extrabold text-white leading-tight">ProxMenux</h1>
ProxMenux <p className="text-xl md:text-2xl lg:text-3xl xl:text-4xl mt-2 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500 font-bold leading-tight">
</h1>
<p className="text-lg sm:text-xl md:text-2xl lg:text-3xl xl:text-4xl mt-2 bg-clip-text text-transparent bg-gradient-to-r from-blue-400 to-purple-500 font-bold leading-tight">
An Interactive Menu for Proxmox VE Management An Interactive Menu for Proxmox VE Management
</p> </p>
</div> </div>
</div> </div>
</div> </div>
<p className="text-base sm:text-lg md:text-xl mb-8 max-w-xs sm:max-w-sm md:max-w-2xl lg:max-w-3xl xl:max-w-4xl mx-auto text-gray-300 text-center leading-relaxed"> <p className="text-base md:text-lg lg:text-xl mb-8 max-w-2xl lg:max-w-3xl xl:max-w-4xl mx-auto text-gray-300 text-center leading-relaxed">
ProxMenux is a management tool for Proxmox VE that simplifies system administration through an interactive ProxMenux is a management tool for Proxmox VE that simplifies system administration through an interactive
menu, allowing you to execute commands and scripts with ease. menu, allowing you to execute commands and scripts with ease.
</p> </p>
@ -48,5 +69,3 @@ export default function Hero() {
) )
} }