martin/ProxmoxVE
1
0
Fork 0
mirror of https://github.com/community-scripts/ProxmoxVE synced 2025-01-28 19:46:17 +00:00
Code Issues Actions 7 Packages Projects Releases Wiki Activity

Update page.tsx

Browse Source
This commit is contained in:
CanbiZ 2025-01-16 15:13:39 +01:00 committed by GitHub
parent f8c10ca80b
commit f51762420a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 101 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

118
frontend/src/app/page.tsx
View File

@ -1,6 +1,7 @@
"use client";
import AnimatedGradientText from "@/components/ui/animated-gradient-text";
import { Button } from "@/components/ui/button";
import { CardFooter } from "@/components/ui/card";
import {
Dialog,
DialogContent,
@ -13,18 +14,19 @@ import Particles from "@/components/ui/particles";
import { Separator } from "@/components/ui/separator";
import { basePath } from "@/config/siteConfig";
import { cn } from "@/lib/utils";
import { ArrowRightIcon } from "lucide-react";
import { ArrowRightIcon, ExternalLink } from "lucide-react";
import { useTheme } from "next-themes";
import Link from "next/link";
import { useEffect, useState } from "react";
import { FaGithub, FaDiscord } from "react-icons/fa";
import { FaGithub } from "react-icons/fa";
function CustomArrowRightIcon() {
return <ArrowRightIcon className="h-4 w-4" />;
return <ArrowRightIcon className="h-4 w-4" width={1} />;
}
export default function Page() {
const { theme } = useTheme();
const [color, setColor] = useState("#000000");
useEffect(() => {
@ -32,7 +34,7 @@ export default function Page() {
}, [theme]);
return (
<div className="relative w-full">
<div className="w-full mt-16">
<Particles
className="absolute inset-0 -z-40"
quantity={100}
@ -40,36 +42,28 @@ export default function Page() {
color={color}
refresh
/>
{/* Header */}
<header className="sticky top-0 z-50 bg-background/80 backdrop-blur-lg">
<div className="container mx-auto flex flex-col items-center gap-4 px-4 py-4 sm:flex-row sm:justify-between">
{/* Logo */}
<Link href="/" className="flex items-center gap-2 font-bold text-lg">
Proxmox VE Helper-Scripts
</Link>
{/* Suchleiste */}
<input
type="text"
placeholder="Search scripts..."
className="w-full sm:w-1/3 px-4 py-2 rounded-md bg-gray-800 text-gray-300 border border-gray-700"
/>
{/* Icons */}
<div className="flex items-center gap-4">
<FaGithub className="w-5 h-5 text-gray-300" />
<FaDiscord className="w-5 h-5 text-gray-300" />
</div>
</div>
</header>
{/* "Scripts by Tteck"-Button */}
<div className="fixed top-16 right-4 sm:top-4 z-40">
<div className="container mx-auto">
<div className="flex h-[80vh] flex-col items-center justify-center gap-4 py-20 lg:py-40">
<Dialog>
<DialogTrigger>
<div className="flex items-center bg-purple-600 text-white px-4 py-2 rounded-lg">
❤️ Scripts by Tteck
<div>
<AnimatedGradientText>
<div
className={cn(
`absolute inset-0 block size-full animate-gradient bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:var(--bg-size)_100%] [border-radius:inherit] [mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)]`,
`p-px ![mask-composite:subtract]`,
)}
/>
❤️ <Separator className="mx-2 h-4" orientation="vertical" />
<span
className={cn(
`animate-gradient bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,
`inline`,
)}
>
Scripts by Tteck
</span>
</AnimatedGradientText>
</div>
</DialogTrigger>
<DialogContent>
@ -77,42 +71,76 @@ export default function Page() {
<DialogTitle>Thank You!</DialogTitle>
<DialogDescription>
A big thank you to Tteck and the many contributors who have
made this project possible. Your hard work is truly appreciated
by the entire Proxmox community!
made this project possible. Your hard work is truly
appreciated by the entire Proxmox community!
</DialogDescription>
</DialogHeader>
<CardFooter className="flex flex-col gap-2">
<Button className="w-full" variant="outline" asChild>
<a
href="https://github.com/tteck"
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-center"
>
<FaGithub className="mr-2 h-4 w-4" /> Tteck&apos;s GitHub
</a>
</Button>
<Button className="w-full" asChild>
<a
href={`https://github.com/community-scripts/${basePath}`}
target="_blank"
rel="noopener noreferrer"
className="flex items-center justify-center"
>
<ExternalLink className="mr-2 h-4 w-4" /> Proxmox Helper
Scripts
</a>
</Button>
</CardFooter>
</DialogContent>
</Dialog>
</div>
{/* Hauptinhalt */}
<main className="container mx-auto mt-32 px-4">
<h1 className="text-5xl sm:text-7xl font-bold text-center">
<div className="flex flex-col gap-4">
<h1 className="max-w-2xl text-center text-5xl font-semibold tracking-tighter md:text-7xl">
Make managing your Homelab a breeze
</h1>
<p className="text-lg sm:text-xl text-center mt-6">
<p className="max-w-2xl text-center text-lg leading-relaxed tracking-tight text-muted-foreground md:text-xl">
We are a community-driven initiative that simplifies the setup of
Proxmox Virtual Environment (VE). Originally created by{" "}
Proxmox Virtual Environment (VE).
<br />
<br />
Originally created by{" "}
<a href="https://github.com/tteck" target="_blank">
tteck
</a>
, these scripts automate and streamline the process of creating and
configuring Linux containers (LXC) and virtual machines (VMs) on
Proxmox VE.
, these scripts automate and streamline
<br />
the process of creating and configuring Linux containers (LXC) and
virtual machines (VMs) on Proxmox VE.
<br />
<br />
With 200+ scripts to help you manage your{" "}
<b>Proxmox VE environment</b>.<br />
Whether you&#39;re a seasoned user or a newcomer, we&#39;ve got
you covered.
</p>
<div className="flex justify-center mt-8">
</div>
<div className="flex flex-row gap-3">
<Link href="/scripts">
<Button
size="lg"
variant="expandIcon"
Icon={CustomArrowRightIcon}
iconPlacement="right"
className="hover:"
>
View Scripts
</Button>
</Link>
</div>
</main>
</div>
</div>
</div>
);
}