mirror of
https://github.com/fosrl/pangolin.git
synced 2026-09-27 00:09:04 +02:00
add hybrid splash
This commit is contained in:
miloschwartz
@@ -0,0 +1,176 @@
|
||||
"use client";
|
||||
|
||||
import {
|
||||
SettingsContainer,
|
||||
SettingsSection,
|
||||
SettingsSectionTitle as SectionTitle,
|
||||
SettingsSectionBody,
|
||||
SettingsSectionFooter
|
||||
} from "@app/components/Settings";
|
||||
import SettingsSectionTitle from "@app/components/SettingsSectionTitle";
|
||||
import { Alert } from "@app/components/ui/alert";
|
||||
import { Button } from "@app/components/ui/button";
|
||||
import {
|
||||
Shield,
|
||||
Zap,
|
||||
RefreshCw,
|
||||
Activity,
|
||||
Wrench,
|
||||
CheckCircle,
|
||||
ExternalLink
|
||||
} from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
export default async function ManagedPage() {
|
||||
return (
|
||||
<>
|
||||
<SettingsSectionTitle
|
||||
title="Managed Self-Hosted"
|
||||
description="More reliable and low-maintenance self-hosted Pangolin server with extra bells and whistles"
|
||||
/>
|
||||
|
||||
<SettingsContainer>
|
||||
<SettingsSection>
|
||||
<SettingsSectionBody>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
<strong>Managed Self-Hosted Pangolin</strong> is a
|
||||
deployment option designed for people who want
|
||||
simplicity and extra reliability while still keeping
|
||||
their data private and self-hosted.
|
||||
</p>
|
||||
<p className="text-muted-foreground mb-6">
|
||||
With this option, you still run your own Pangolin
|
||||
node — your tunnels, SSL termination, and traffic
|
||||
all stay on your server. The difference is that
|
||||
management and monitoring are handled through our
|
||||
cloud dashboard, which unlocks a number of benefits:
|
||||
</p>
|
||||
|
||||
<div className="grid gap-4 md:grid-cols-2 py-4">
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<CheckCircle className="w-5 h-5 text-green-500 mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="font-medium">
|
||||
Simpler operations
|
||||
</h4>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No need to run your own mail server
|
||||
or set up complex alerting. You'll
|
||||
get health checks and downtime
|
||||
alerts out of the box.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3">
|
||||
<RefreshCw className="w-5 h-5 text-blue-500 mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="font-medium">
|
||||
Automatic updates
|
||||
</h4>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
The cloud dashboard evolves quickly,
|
||||
so you get new features and bug
|
||||
fixes without having to manually
|
||||
pull new containers every time.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3">
|
||||
<Wrench className="w-5 h-5 text-orange-500 mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="font-medium">
|
||||
Less maintenance
|
||||
</h4>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
No database migrations, backups, or
|
||||
extra infrastructure to manage. We
|
||||
handle that in the cloud.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-start gap-3">
|
||||
<Activity className="w-5 h-5 text-purple-500 mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="font-medium">
|
||||
Cloud failover
|
||||
</h4>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
If your node goes down, your tunnels
|
||||
can temporarily fail over to our
|
||||
cloud points of presence until you
|
||||
bring it back online.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<Shield className="w-5 h-5 text-indigo-500 mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="font-medium">
|
||||
High availability (PoPs)
|
||||
</h4>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
You can also attach multiple nodes
|
||||
to your account for redundancy and
|
||||
better performance.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="flex items-start gap-3">
|
||||
<Zap className="w-5 h-5 text-yellow-500 mt-0.5 flex-shrink-0" />
|
||||
<div>
|
||||
<h4 className="font-medium">
|
||||
Future enhancements
|
||||
</h4>
|
||||
<p className="text-sm text-muted-foreground">
|
||||
We're planning to add more
|
||||
analytics, alerting, and management
|
||||
tools to make your deployment even
|
||||
more robust.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Alert
|
||||
variant="neutral"
|
||||
className="flex items-center gap-1"
|
||||
>
|
||||
Read the docs to learn more about the Managed
|
||||
Self-Hosted option in our{" "}
|
||||
<Link
|
||||
href="https://docs.digpangolin.com/self-host/advanced/convert-to-managed"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:underline text-primary flex items-center gap-1"
|
||||
>
|
||||
documentation
|
||||
<ExternalLink className="w-4 h-4" />
|
||||
</Link>
|
||||
.
|
||||
</Alert>
|
||||
</SettingsSectionBody>
|
||||
<SettingsSectionFooter>
|
||||
<Link
|
||||
href="https://docs.digpangolin.com/self-host/advanced/convert-to-managed"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="hover:underline text-primary flex items-center gap-1"
|
||||
>
|
||||
<Button>
|
||||
Convert This Node to Managed Self-Hosted
|
||||
</Button>
|
||||
</Link>
|
||||
</SettingsSectionFooter>
|
||||
</SettingsSection>
|
||||
</SettingsContainer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user