mirror of
https://github.com/community-scripts/ProxmoxVE
synced 2025-01-27 11:06:18 +00:00
Update page.tsx
This commit is contained in:
CanbiZ
GitHub
parent
f8c10ca80b
commit
f51762420a
@ -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,79 +42,105 @@ export default function Page() {
|
||||
color={color}
|
||||
refresh
|
||||
/>
|
||||
<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>
|
||||
<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>
|
||||
<DialogHeader>
|
||||
<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!
|
||||
</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'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>
|
||||
|
||||
{/* 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 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="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).
|
||||
<br />
|
||||
<br />
|
||||
Originally created by{" "}
|
||||
<a href="https://github.com/tteck" target="_blank">
|
||||
tteck
|
||||
</a>
|
||||
, 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're a seasoned user or a newcomer, we've got
|
||||
you covered.
|
||||
</p>
|
||||
</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>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* "Scripts by Tteck"-Button */}
|
||||
<div className="fixed top-16 right-4 sm:top-4 z-40">
|
||||
<Dialog>
|
||||
<DialogTrigger>
|
||||
<div className="flex items-center bg-purple-600 text-white px-4 py-2 rounded-lg">
|
||||
❤️ Scripts by Tteck
|
||||
</div>
|
||||
</DialogTrigger>
|
||||
<DialogContent>
|
||||
<DialogHeader>
|
||||
<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!
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
|
||||
{/* Hauptinhalt */}
|
||||
<main className="container mx-auto mt-32 px-4">
|
||||
<h1 className="text-5xl sm:text-7xl font-bold text-center">
|
||||
Make managing your Homelab a breeze
|
||||
</h1>
|
||||
<p className="text-lg sm:text-xl text-center mt-6">
|
||||
We are a community-driven initiative that simplifies the setup of
|
||||
Proxmox Virtual Environment (VE). 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.
|
||||
</p>
|
||||
<div className="flex justify-center mt-8">
|
||||
<Link href="/scripts">
|
||||
<Button
|
||||
size="lg"
|
||||
variant="expandIcon"
|
||||
Icon={CustomArrowRightIcon}
|
||||
iconPlacement="right"
|
||||
>
|
||||
View Scripts
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user