coryHawkvelt/gatehouse-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(marketing): add ZeroTier Network Governance page and content

Browse Source 
Add comprehensive marketing content for ZeroTier Network Governance feature
including a dedicated landing page, navigation updates, and feature highlights
across the homepage and features page.

- Add new ZeroTierPage with feature documentation and use cases
- Add ZeroTier to navigation in MarketingLayout header and footer
- Update HomePage hero headline and add ZeroTier feature section
- Add ZeroTier features section to FeaturesPage
- Add ScrollToTop component for better navigation UX
- Move ApiDevTools to AuthenticatedLayout (dev mode only)
- Add SSR tests for marketing pages
- Update SSHCertificatesPage comparison table for clarity
- Add documentation link to MarketingLayout footer
This commit is contained in:
Cory Hawkvelt
2026-04-06 20:57:30 +09:30
parent 3e0a7f9de4
commit 11f56c187f
8 changed files with 1215 additions and 522 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+14 -4
View File
@@ -2,7 +2,8 @@ import { Toaster } from "@/components/ui/toaster";
import { Toaster as Sonner } from "@/components/ui/sonner";
import { TooltipProvider } from "@/components/ui/tooltip";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
import { useEffect } from "react";
// Layouts
import PublicLayout from "@/components/layouts/PublicLayout";
@@ -15,6 +16,7 @@ import FeaturesPage from "@/pages/marketing/FeaturesPage";
import PricingPage from "@/pages/marketing/PricingPage";
import SecurityPage from "@/pages/marketing/SecurityPage";
import SSHCertificatesPage from "@/pages/marketing/SSHCertificatesPage";
import ZeroTierPage from "@/pages/marketing/ZeroTierPage";
import DemoPage from "@/pages/marketing/DemoPage";
// Public pages
@@ -59,7 +61,6 @@ import OAuthProvidersPage from "@/pages/admin/OAuthProvidersPage";
import OrgSetupPage from "@/pages/auth/OrgSetupPage";
import NotFound from "@/pages/NotFound";
import ApiDevTools from "@/components/dev/ApiDevTools";
const queryClient = new QueryClient({
defaultOptions: {
@@ -82,12 +83,22 @@ const App = () => (
<Toaster />
<Sonner />
<BrowserRouter>
<ScrollToTop />
<AppRoutes />
</BrowserRouter>
</TooltipProvider>
</QueryClientProvider>
);
// Scroll to top on navigation
function ScrollToTop() {
const location = useLocation();
useEffect(() => {
window.scrollTo({ top: 0, left: 0, behavior: 'instant' });
}, [location.pathname]);
return null;
}
// Separate component so AuthProvider can use useNavigate
import { AuthProvider, useAuth } from "@/contexts/AuthContext";
import { OrgProvider } from "@/contexts/OrgContext";
@@ -148,6 +159,7 @@ function AppRoutes() {
<Route path="/pricing" element={<PricingPage />} />
<Route path="/security" element={<SecurityPage />} />
<Route path="/ssh-certificates" element={<SSHCertificatesPage />} />
<Route path="/zerotier" element={<ZeroTierPage />} />
<Route path="/demo" element={<DemoPage />} />
</Route>
@@ -208,8 +220,6 @@ function AppRoutes() {
<Route path="*" element={<NotFound />} />
</Routes>
{/* Dev tools - only shown in development */}
<ApiDevTools />
</OrgProvider>
</AuthProvider>
);
src/components/layouts/AuthenticatedLayout.tsx
+2
View File
@@ -2,6 +2,7 @@ import { Outlet } from "react-router-dom";
import { SidebarProvider } from "@/components/ui/sidebar";
import { AppSidebar } from "@/components/navigation/AppSidebar";
import { TopBar } from "@/components/navigation/TopBar";
import ApiDevTools from "@/components/dev/ApiDevTools";
export default function AuthenticatedLayout() {
return (
@@ -15,6 +16,7 @@ export default function AuthenticatedLayout() {
</main>
</div>
</div>
{import.meta.env.DEV && <ApiDevTools />}
</SidebarProvider>
);
}
src/components/layouts/MarketingLayout.tsx
+8 -6
View File
@@ -14,11 +14,12 @@ X
import { useState } from "react";
const navigation = [
{ name: "Features", href: "/features" },
{ name: "Security", href: "/security" },
{ name: "SSH Certificates", href: "/ssh-certificates" },
{ name: "Pricing", href: "/pricing" },
{ name: "Demo", href: "/demo" },
{ name: "Features", href: "/features" },
{ name: "Security", href: "/security" },
{ name: "SSH Certificates", href: "/ssh-certificates" },
{ name: "ZeroTier", href: "/zerotier" },
{ name: "Pricing", href: "/pricing" },
{ name: "Demo", href: "/demo" },
];
export default function MarketingLayout() {
@@ -143,6 +144,7 @@ return (
<li><Link to="/features" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Features</Link></li>
<li><Link to="/security" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Security</Link></li>
<li><Link to="/ssh-certificates" className="text-sm text-muted-foreground hover:text-foreground transition-colors">SSH Certificates</Link></li>
<li><Link to="/zerotier" className="text-sm text-muted-foreground hover:text-foreground transition-colors">ZeroTier</Link></li>
<li><Link to="/pricing" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Pricing</Link></li>
</ul>
</div>
@@ -152,7 +154,7 @@ return (
<h3 className="text-sm font-semibold text-foreground mb-3">Resources</h3>
<ul className="space-y-2">
<li><Link to="/demo" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Demo</Link></li>
<li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Documentation</a></li>
<li><a href="https://docs.secuird.tech/" target="_blank" rel="noopener noreferrer" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Documentation</a></li>
<li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">API Reference</a></li>
<li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Status</a></li>
</ul>
src/pages/marketing/FeaturesPage.tsx
+218 -107
View File
@@ -2,179 +2,214 @@ import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
Shield,
Key,
Users,
Lock,
Terminal,
Building2,
Globe,
ShieldCheck,
ArrowRight,
CheckCircle2,
Fingerprint,
ArrowRightLeft,
Eye,
Settings,
UserCheck,
Clock,
Server,
UserPlus,
FileKey,
Activity,
Layers,
ShieldAlert,
Network,
ScanLine,
LogIn,
AppWindow,
Shield,
Key,
Users,
Lock,
Terminal,
Building2,
Globe,
ShieldCheck,
ArrowRight,
CheckCircle2,
Fingerprint,
ArrowRightLeft,
Eye,
Settings,
UserCheck,
Clock,
Server,
UserPlus,
FileKey,
Activity,
Layers,
ShieldAlert,
Network,
ScanLine,
LogIn,
AppWindow,
Monitor,
Zap,
} from "lucide-react";
const authenticationFeatures = [
{
icon: Building2,
title: "Microsoft 365 SSO",
description: "Connect your Microsoft Entra ID (Azure AD) directory. Users authenticate with their corporate credentials instantly.",
icon: Building2,
title: "Microsoft 365 SSO",
description: "Connect your Microsoft Entra ID (Azure AD) directory. Users authenticate with their corporate credentials instantly.",
},
{
icon: Globe,
title: "Google Workspace SSO",
description: "Seamless integration with Google Workspace. Enable single sign-on for all your internal applications.",
icon: Globe,
title: "Google Workspace SSO",
description: "Seamless integration with Google Workspace. Enable single sign-on for all your internal applications.",
},
{
icon: Key,
title: "GitHub Authentication",
description: "Allow developers to authenticate using their GitHub accounts. Perfect for engineering teams.",
icon: Key,
title: "GitHub Authentication",
description: "Allow developers to authenticate using their GitHub accounts. Perfect for engineering teams.",
},
{
icon: Lock,
title: "Traditional Username/Password",
description: "Full support for traditional authentication with email verification and secure password policies.",
icon: Lock,
title: "Traditional Username/Password",
description: "Full support for traditional authentication with email verification and secure password policies.",
},
];
const mfaFeatures = [
{
icon: Fingerprint,
title: "WebAuthn/Passkeys",
description: "Hardware security keys and platform authenticators (Face ID, Touch ID, Windows Hello). Phishing-resistant authentication.",
icon: Fingerprint,
title: "WebAuthn/Passkeys",
description: "Hardware security keys and platform authenticators (Face ID, Touch ID, Windows Hello). Phishing-resistant authentication.",
},
{
icon: Shield,
title: "TOTP Authenticator Apps",
description: "Support for Google Authenticator, Authy, 1Password, and any TOTP-compatible authenticator app.",
icon: Shield,
title: "TOTP Authenticator Apps",
description: "Support for Google Authenticator, Authy, 1Password, and any TOTP-compatible authenticator app.",
},
{
icon: Clock,
title: "Grace Periods",
description: "Configure grace periods for MFA enrollment. Give users time to set up their authenticators without blocking access.",
icon: Clock,
title: "Grace Periods",
description: "Configure grace periods for MFA enrollment. Give users time to set up their authenticators without blocking access.",
},
{
icon: ShieldAlert,
title: "Policy Enforcement",
description: "Organization-wide MFA requirements. Require specific methods (TOTP only, Passkey only, or both).",
icon: ShieldAlert,
title: "Policy Enforcement",
description: "Organization-wide MFA requirements. Require specific methods (TOTP only, Passkey only, or both).",
},
];
const oidcFeatures = [
{
icon: ArrowRightLeft,
title: "OIDC Provider",
description: "Secuird acts as a standards-compliant OpenID Connect provider. Connect any OIDC-compatible application.",
icon: ArrowRightLeft,
title: "OIDC Provider",
description: "Secuird acts as a standards-compliant OpenID Connect provider. Connect any OIDC-compatible application.",
},
{
icon: AppWindow,
title: "Multiple Applications",
description: "Register unlimited client applications. Each gets unique credentials and configurable redirect URIs.",
icon: AppWindow,
title: "Multiple Applications",
description: "Register unlimited client applications. Each gets unique credentials and configurable redirect URIs.",
},
{
icon: UserCheck,
title: "Consent Management",
description: "Users see and approve what information is shared. Transparent data access with user control.",
icon: UserCheck,
title: "Consent Management",
description: "Users see and approve what information is shared. Transparent data access with user control.",
},
{
icon: Network,
title: "Scopes & Claims",
description: "Configure custom scopes and claims. Pass user roles, groups, and custom attributes to your applications.",
icon: Network,
title: "Scopes & Claims",
description: "Configure custom scopes and claims. Pass user roles, groups, and custom attributes to your applications.",
},
];
const sshFeatures = [
{
icon: Terminal,
title: "Native SSH Support",
description: "Use standard OpenSSH client. No custom agents or modified binaries required. Works everywhere SSH works.",
icon: Terminal,
title: "Native SSH Support",
description: "Use standard OpenSSH client. No custom agents or modified binaries required. Works everywhere SSH works.",
},
{
icon: FileKey,
title: "Short-Lived Certificates",
description: "Certificates expire in minutes or hours. Eliminate long-lived SSH keys that persist after employees leave.",
icon: FileKey,
title: "Short-Lived Certificates",
description: "Certificates expire in minutes or hours. Eliminate long-lived SSH keys that persist after employees leave.",
},
{
icon: Eye,
title: "Complete Audit Trail",
description: "Every certificate issuance and SSH connection is logged. Full chain of custody from creation to usage.",
icon: Eye,
title: "Complete Audit Trail",
description: "Every certificate issuance and SSH connection is logged. Full chain of custody from creation to usage.",
},
{
icon: Users,
title: "Group-Based Access",
description: "Configure principals and policies per department or team. Automatic group membership from identity provider.",
icon: Users,
title: "Group-Based Access",
description: "Configure principals and policies per department or team. Automatic group membership from identity provider.",
},
{
icon: Server,
title: "Host Certificates",
description: "Issue certificates for servers too. Verify host identity without TOFU warnings or known_hosts management.",
icon: Server,
title: "Host Certificates",
description: "Issue certificates for servers too. Verify host identity without TOFU warnings or known_hosts management.",
},
{
icon: Activity,
title: "Real-Time Monitoring",
description: "Monitor certificate usage in real-time. Detect anomalies and suspicious access patterns.",
icon: Activity,
title: "Real-Time Monitoring",
description: "Monitor certificate usage in real-time. Detect anomalies and suspicious access patterns.",
},
];
const zerotierFeatures = [
{
icon: Monitor,
title: "Device Registration",
description: "Register ZeroTier nodes by Node ID. No shared secrets — users own their devices.",
},
{
icon: Users,
title: "Approval Workflows",
description: "Manager approval required before network access. Durable approvals survive across days.",
},
{
icon: Clock,
title: "Activation Sessions",
description: "Time-bounded access sessions. Re-authenticate to activate for a fixed period like an 8-hour workday.",
},
{
icon: Zap,
title: "Kill Switch",
description: "Instantly revoke all active memberships for a user across all networks. Lost laptop? Immediate response.",
},
{
icon: ShieldCheck,
title: "Complete Audit Trail",
description: "Every network access event logged. Know who accessed what, when, and from which device.",
},
{
icon: Network,
title: "Multi-Network Support",
description: "Manage production, staging, and lab networks separately with environment-based policies.",
},
];
const organizationFeatures = [
{
icon: Users,
title: "Multi-Tenant Architecture",
description: "Separate organizations with complete isolation. Each org has its own members, policies, and resources.",
icon: Users,
title: "Multi-Tenant Architecture",
description: "Separate organizations with complete isolation. Each org has its own members, policies, and resources.",
},
{
icon: UserPlus,
title: "Invite System",
description: "Invite users by email with role assignments. Automatic onboarding with pre-configured group memberships.",
icon: UserPlus,
title: "Invite System",
description: "Invite users by email with role assignments. Automatic onboarding with pre-configured group memberships.",
},
{
icon: Layers,
title: "Department Management",
description: "Organize users into departments. Apply policies and SSH certificate settings per department.",
icon: Layers,
title: "Department Management",
description: "Organize users into departments. Apply policies and SSH certificate settings per department.",
},
{
icon: ScanLine,
title: "Registration Tracking",
description: "Track user registration sources. UTM codes, referral links, and marketing campaigns are captured automatically.",
icon: ScanLine,
title: "Registration Tracking",
description: "Track user registration sources. UTM codes, referral links, and marketing campaigns are captured automatically.",
},
];
const complianceFeatures = [
{
icon: Eye,
title: "Audit Logging",
description: "Every action is logged with user, timestamp, IP address, and details. Export logs for SIEM integration.",
icon: Eye,
title: "Audit Logging",
description: "Every action is logged with user, timestamp, IP address, and details. Export logs for SIEM integration.",
},
{
icon: Settings,
title: "Security Policies",
description: "Define organization-wide security policies. MFA requirements, password rules, and session settings.",
icon: Settings,
title: "Security Policies",
description: "Define organization-wide security policies. MFA requirements, password rules, and session settings.",
},
{
icon: ShieldCheck,
title: "Compliance Reports",
description: "Generate compliance reports for SOC 2, HIPAA, and other frameworks. Demonstrate security controls.",
icon: ShieldCheck,
title: "Compliance Reports",
description: "Generate compliance reports for SOC 2, HIPAA, and other frameworks. Demonstrate security controls.",
},
{
icon: Activity,
title: "Activity Monitoring",
description: "Real-time visibility into user activity. Login patterns, certificate usage, and security events.",
icon: Activity,
title: "Activity Monitoring",
description: "Real-time visibility into user activity. Login patterns, certificate usage, and security events.",
},
];
@@ -393,8 +428,84 @@ return (
</div>
</section>
{/* ZeroTier Network Governance */}
<section id="zerotier" className="py-16 lg:py-24">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="grid lg:grid-cols-2 gap-12 items-center">
<div className="order-2 lg:order-1">
{/* Screenshot placeholder - replace with actual screenshot */}
<Card className="bg-card shadow-xl border-2 border-dashed border-muted-foreground/20">
<CardContent className="p-8 text-center">
<div className="flex flex-col items-center justify-center py-12 space-y-4">
<Network className="h-16 w-16 text-muted-foreground/40" />
<div className="space-y-2">
<p className="text-sm font-medium text-muted-foreground">ZeroTier Network Management</p>
<p className="text-xs text-muted-foreground/60">Screenshot placeholder — replace with:</p>
<ul className="text-xs text-muted-foreground/60 list-disc list-inside text-left">
<li>Networks list with environment tags</li>
<li>Member status and activation state</li>
<li>Pending requests and approvals</li>
</ul>
</div>
</div>
</CardContent>
</Card>
</div>
<div className="order-1 lg:order-2">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-4">
<Network className="h-4 w-4" />
ZeroTier Network Governance
</div>
<h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
Govern ZeroTier Access<br />
<span className="text-accent block mt-2">With Your Identity Platform</span>
</h2>
<p className="text-lg text-muted-foreground mb-6">
Add approval workflows, time-bounded activation sessions, and complete audit trails to your
ZeroTier networks. Stop using raw ZeroTier administration and give managers the controls they need.
</p>
<ul className="space-y-3 mb-8">
{[
"Devices registered by ZeroTier Node ID — no shared secrets",
"Manager approval separates authorization from activation",
"Activation sessions last hours, not days — automatic expiration",
"Kill switch for lost devices or immediate offboarding",
"Immutable audit trail for every network access event",
].map((item, index) => (
<li key={index} className="flex items-start gap-3">
<CheckCircle2 className="h-5 w-5 text-accent flex-shrink-0 mt-0.5" />
<span className="text-foreground">{item}</span>
</li>
))}
</ul>
<Link to="/zerotier">
<Button className="gap-2">
Learn About Network Governance
<ArrowRight className="h-4 w-4" />
</Button>
</Link>
</div>
</div>
<div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-12">
{zerotierFeatures.map((feature) => (
<Card key={feature.title} className="bg-card">
<CardContent className="pt-6">
<div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center mb-3">
<feature.icon className="h-5 w-5 text-primary" />
</div>
<h3 className="text-base font-semibold text-foreground mb-1">{feature.title}</h3>
<p className="text-sm text-muted-foreground">{feature.description}</p>
</CardContent>
</Card>
))}
</div>
</div>
</section>
{/* Organization Management */}
<section className="py-16 lg:py-24">
<section className="py-16 lg:py-24 bg-muted/30">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="grid lg:grid-cols-2 gap-12 items-center">
<div className="order-2 lg:order-1">
@@ -446,7 +557,7 @@ return (
</section>
{/* Compliance & Audit */}
<section className="py-16 lg:py-24 bg-muted/30">
<section className="py-16 lg:py-24">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="grid lg:grid-cols-2 gap-12 items-center">
<div>
@@ -526,4 +637,4 @@ return (
</section>
</>
);
}
}
src/pages/marketing/HomePage.tsx
+470 -397
View File
@@ -2,439 +2,512 @@ import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
Shield,
Key,
Users,
Lock,
Terminal,
Building2,
ShieldCheck,
ArrowRight,
CheckCircle2,
Globe,
Fingerprint,
Clock,
ArrowRightLeft,
Eye,
Settings,
UserCheck
Shield,
Key,
Users,
Lock,
Terminal,
Building2,
ShieldCheck,
ArrowRight,
CheckCircle2,
Globe,
Fingerprint,
Clock,
ArrowRightLeft,
Eye,
Settings,
UserCheck,
Network
} from "lucide-react";
const features = [
{
icon: Shield,
title: "Enterprise SSO Without Complexity",
description:
"Enable single sign-on with Microsoft 365, Google Workspace, and GitHub. No complex federation setups—just connect and go.",
},
{
icon: Key,
title: "SSH Certificate Authority",
description:
"Issue short-lived SSH certificates tied to user identities. Eliminate shared SSH keys and achieve complete auditability.",
},
{
icon: Lock,
title: "Multi-Factor Authentication",
description:
"Enforce MFA policies across your organization with TOTP and WebAuthn/Passkey support. Compliance made simple.",
},
{
icon: ArrowRightLeft,
title: "OIDC Provider Built-In",
description:
"Secuird acts as an OIDC identity provider for your internal applications. One identity, seamless access everywhere.",
},
{
icon: Shield,
title: "Enterprise SSO Without Complexity",
description:
"Enable single sign-on with Microsoft 365, Google Workspace, and GitHub. No complex federation setups—just connect and go.",
},
{
icon: Key,
title: "SSH Certificate Authority",
description:
"Issue short-lived SSH certificates tied to user identities. Eliminate shared SSH keys and achieve complete auditability.",
},
{
icon: Lock,
title: "Multi-Factor Authentication",
description:
"Enforce MFA policies across your organization with TOTP and WebAuthn/Passkey support. Compliance made simple.",
},
{
icon: ArrowRightLeft,
title: "OIDC Provider Built-In",
description:
"Secuird acts as an OIDC identity provider for your internal applications. One identity, seamless access everywhere.",
},
{
icon: Network,
title: "ZeroTier Network Governance",
description:
"Control access to private ZeroTier networks with approval workflows, time-bounded activation sessions, and instant kill switches.",
},
];
const sshFeatures = [
{
icon: Terminal,
title: "Native SSH Integration",
description: "Use standard SSH clients—no custom agents or modified binaries required. Works with OpenSSH out of the box.",
},
{
icon: Clock,
title: "Short-Lived Certificates",
description: "Certificates expire automatically. Reduce blast radius and eliminate the headache of key rotation.",
},
{
icon: Eye,
title: "Complete Audit Trail",
description: "Every certificate issuance and SSH connection is logged. Know exactly who accessed what, when.",
},
{
icon: UserCheck,
title: "Identity-Linked Access",
description: "SSH access is tied to verified corporate identities. No more anonymous shared accounts.",
},
{
icon: Terminal,
title: "Native SSH Integration",
description: "Use standard SSH clients—no custom agents or modified binaries required. Works with OpenSSH out of the box.",
},
{
icon: Clock,
title: "Short-Lived Certificates",
description: "Certificates expire automatically. Reduce blast radius and eliminate the headache of key rotation.",
},
{
icon: Eye,
title: "Complete Audit Trail",
description: "Every certificate issuance and SSH connection is logged. Know exactly who accessed what, when.",
},
{
icon: UserCheck,
title: "Identity-Linked Access",
description: "SSH access is tied to verified corporate identities. No more anonymous shared accounts.",
},
];
const socialProviders = [
{ name: "Microsoft 365", icon: Building2 },
{ name: "Google Workspace", icon: Globe },
{ name: "GitHub", icon: Key },
{ name: "Microsoft 365", icon: Building2 },
{ name: "Google Workspace", icon: Globe },
{ name: "GitHub", icon: Key },
{ name: "ZeroTier", icon: Network },
];
export default function HomePage() {
return (
<>
{/* Hero Section */}
<section className="relative overflow-hidden bg-card">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 lg:py-32">
<div className="text-center max-w-4xl mx-auto">
{/* Badge */}
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-6 border border-primary/20">
<ShieldCheck className="h-4 w-4" />
Security-first identity platform
</div>
{/* Headline */}
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-foreground mb-6">
Enterprise Authentication,
<span className="text-primary block mt-2">Without the Enterprise Complexity</span>
</h1>
{/* Subheadline */}
<p className="text-lg sm:text-xl text-muted-foreground max-w-2xl mx-auto mb-8">
Secuird unifies social logins, MFA, and SSH certificate management in one platform.
Your team gets seamless access. You get complete control and auditability.
</p>
{/* CTA Buttons */}
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<Link to="/register">
<Button size="lg" className="gap-2">
Start Free Trial
<ArrowRight className="h-4 w-4" />
</Button>
</Link>
<Link to="/demo">
<Button variant="outline" size="lg">
Watch Demo
</Button>
</Link>
</div>
{/* Trust indicators */}
<div className="mt-12 flex flex-col items-center">
<p className="text-sm text-muted-foreground mb-4">Trusted authentication providers</p>
<div className="flex items-center gap-6 sm:gap-8">
{socialProviders.map((provider) => (
<div key={provider.name} className="flex items-center gap-2 text-muted-foreground">
<provider.icon className="h-5 w-5" />
<span className="text-sm font-medium hidden sm:inline">{provider.name}</span>
</div>
))}
return (
<>
{/* Hero Section */}
<section className="relative overflow-hidden bg-card">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-24 lg:py-32">
<div className="text-center max-w-4xl mx-auto">
{/* Badge */}
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-6 border border-primary/20">
<ShieldCheck className="h-4 w-4" />
Security-first identity platform
</div>
</div>
</div>
</div>
</section>
{/* Features Grid */}
<section className="py-24 bg-muted/30">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16">
<h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
Everything You Need for Identity & Access
</h2>
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
From user authentication to SSH certificate management, Secuird provides a complete identity platform.
</p>
</div>
{/* Headline */}
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-foreground mb-6">
Every Identity. One Platform.
<span className="text-primary block mt-2">Complete Access Control.</span>
</h1>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
{features.map((feature) => (
<Card key={feature.title} className="bg-card hover:shadow-lg transition-shadow">
<CardContent className="pt-6">
<div className="h-12 w-12 rounded-lg bg-accent/10 flex items-center justify-center mb-4">
<feature.icon className="h-6 w-6 text-accent" />
</div>
<h3 className="text-lg font-semibold text-foreground mb-2">{feature.title}</h3>
<p className="text-sm text-muted-foreground">{feature.description}</p>
</CardContent>
</Card>
))}
</div>
<div className="text-center mt-10">
<Link to="/features">
<Button variant="outline" className="gap-2">
View All Features
<ArrowRight className="h-4 w-4" />
</Button>
</Link>
</div>
</div>
</section>
{/* SSH Certificates Feature Highlight */}
<section className="py-24">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-4">
<Terminal className="h-4 w-4" />
SSH Certificate Authority
</div>
<h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
Eliminate SSH Key Chaos
</h2>
<p className="text-lg text-muted-foreground mb-6">
Replace static SSH keys with short-lived certificates tied to verified identities.
Every access is logged, every certificate is traceable.
{/* Subheadline */}
<p className="text-lg sm:text-xl text-muted-foreground max-w-2xl mx-auto mb-8">
Secuird unifies Google, Microsoft, GitHub, and traditional authentication with MFA enforcement,
SSH certificates, and ZeroTier network governance — all in one platform.
</p>
<ul className="space-y-3 mb-8">
{[
"Works with standard OpenSSH—no custom clients needed",
"Certificates expire automatically—no more key rotation",
"Full audit trail from issuance to usage",
"Group-based access policies",
].map((item) => (
<li key={item} className="flex items-start gap-3">
<CheckCircle2 className="h-5 w-5 text-accent flex-shrink-0 mt-0.5" />
<span className="text-foreground">{item}</span>
</li>
))}
</ul>
{/* CTA Buttons */}
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<Link to="/register">
<Button size="lg" className="gap-2">
Start Free Trial
<ArrowRight className="h-4 w-4" />
</Button>
</Link>
<Link to="/demo">
<Button variant="outline" size="lg">
Watch Demo
</Button>
</Link>
</div>
<Link to="/ssh-certificates">
<Button className="gap-2">
Learn About SSH Certificates
<ArrowRight className="h-4 w-4" />
</Button>
</Link>
{/* Trust indicators */}
<div className="mt-12 flex flex-col items-center">
<p className="text-sm text-muted-foreground mb-4">Trusted authentication providers</p>
<div className="flex items-center gap-6 sm:gap-8">
{socialProviders.map((provider) => (
<div key={provider.name} className="flex items-center gap-2 text-muted-foreground">
<provider.icon className="h-5 w-5" />
<span className="text-sm font-medium hidden sm:inline">{provider.name}</span>
</div>
))}
</div>
</div>
</div>
</div>
</section>
{/* Features Grid */}
<section className="py-24 bg-muted/30">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16">
<h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
Everything You Need for Identity & Access
</h2>
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
From user authentication to SSH certificate management, Secuird provides a complete identity platform.
</p>
</div>
<div className="grid sm:grid-cols-2 gap-4">
{sshFeatures.map((feature) => (
<Card key={feature.title} className="bg-muted/50">
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
{features.map((feature) => (
<Card key={feature.title} className="bg-card hover:shadow-lg transition-shadow">
<CardContent className="pt-6">
<div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center mb-3">
<feature.icon className="h-5 w-5 text-primary" />
<div className="h-12 w-12 rounded-lg bg-accent/10 flex items-center justify-center mb-4">
<feature.icon className="h-6 w-6 text-accent" />
</div>
<h3 className="text-base font-semibold text-foreground mb-1">{feature.title}</h3>
<h3 className="text-lg font-semibold text-foreground mb-2">{feature.title}</h3>
<p className="text-sm text-muted-foreground">{feature.description}</p>
</CardContent>
</Card>
))}
</div>
</div>
</div>
</section>
{/* How It Works */}
<section className="py-24 bg-muted/30">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16">
<h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
How It Works
</h2>
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
Get started in minutes, not months. No complex federation required.
</p>
<div className="text-center mt-10">
<Link to="/features">
<Button variant="outline" className="gap-2">
View All Features
<ArrowRight className="h-4 w-4" />
</Button>
</Link>
</div>
</div>
</section>
<div className="grid md:grid-cols-3 gap-8">
{[
{
step: "01",
title: "Connect Your Providers",
description: "Link Microsoft 365, Google Workspace, or GitHub. Users authenticate with credentials they already have.",
icon: Users,
},
{
step: "02",
title: "Configure Policies",
description: "Set MFA requirements, access policies, and SSH certificate parameters. One policy, organization-wide.",
icon: Settings,
},
{
step: "03",
title: "Connect Your Apps",
description: "Register internal applications as OIDC clients. Users get seamless SSO access to everything.",
icon: Fingerprint,
},
].map((step) => (
<div key={step.step} className="relative">
<div className="text-6xl font-bold text-primary/10 mb-4">{step.step}</div>
<div className="h-12 w-12 rounded-lg bg-accent/10 flex items-center justify-center mb-4">
<step.icon className="h-6 w-6 text-accent" />
{/* SSH Certificates Feature Highlight */}
<section className="py-24">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-4">
<Terminal className="h-4 w-4" />
SSH Certificate Authority
</div>
<h3 className="text-xl font-semibold text-foreground mb-2">{step.title}</h3>
<p className="text-muted-foreground">{step.description}</p>
</div>
))}
</div>
</div>
</section>
<h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
Eliminate SSH Key Chaos
</h2>
<p className="text-lg text-muted-foreground mb-6">
Replace static SSH keys with short-lived certificates tied to verified identities.
Every access is logged, every certificate is traceable.
</p>
{/* Marketing & Registration Tracking */}
<section className="py-24">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="grid lg:grid-cols-2 gap-12 items-center">
<div className="order-2 lg:order-1">
<Card className="bg-gradient-to-br from-primary/5 to-accent/5 border-0">
<CardContent className="p-8">
<div className="space-y-4">
<div className="flex items-center gap-3">
<div className="h-10 w-10 rounded-full bg-accent/10 flex items-center justify-center">
<Users className="h-5 w-5 text-accent" />
</div>
<div>
<p className="text-sm font-medium text-foreground">Marketing Campaign A</p>
<p className="text-xs text-muted-foreground">utm_source=newsletter</p>
</div>
</div>
<div className="flex items-center gap-3">
<div className="h-10 w-10 rounded-full bg-accent/10 flex items-center justify-center">
<Users className="h-5 w-5 text-accent" />
</div>
<div>
<p className="text-sm font-medium text-foreground">Partner Integration</p>
<p className="text-xs text-muted-foreground">referral_code=partner123</p>
</div>
</div>
<div className="flex items-center gap-3">
<div className="h-10 w-10 rounded-full bg-accent/10 flex items-center justify-center">
<Users className="h-5 w-5 text-accent" />
</div>
<div>
<p className="text-sm font-medium text-foreground">Direct Signup</p>
<p className="text-xs text-muted-foreground">organic registration</p>
</div>
</div>
<div className="pt-4 border-t">
<p className="text-sm text-muted-foreground mb-2">Auto-applied policies:</p>
<div className="flex flex-wrap gap-2">
<span className="px-2 py-1 bg-primary/10 text-primary text-xs rounded-full">Trial Extended</span>
<span className="px-2 py-1 bg-accent/10 text-accent text-xs rounded-full">Partner Group</span>
</div>
</div>
</div>
</CardContent>
</Card>
</div>
<ul className="space-y-3 mb-8">
{[
"Works with standard OpenSSH—no custom clients needed",
"Certificates expire automatically—no more key rotation",
"Full audit trail from issuance to usage",
"Group-based access policies",
].map((item) => (
<li key={item} className="flex items-start gap-3">
<CheckCircle2 className="h-5 w-5 text-accent flex-shrink-0 mt-0.5" />
<span className="text-foreground">{item}</span>
</li>
))}
</ul>
<div className="order-1 lg:order-2">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 text-accent text-sm font-medium mb-4">
<Users className="h-4 w-4" />
Registration Tracking
</div>
<h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
Know Where Your Users Come From
</h2>
<p className="text-lg text-muted-foreground mb-6">
Track user registration sources through marketing codes, UTM parameters, or referral links.
Apply policies and group memberships automatically based on origin.
</p>
<ul className="space-y-3">
{[
"Automatic group assignment based on registration source",
"UTM parameter tracking for marketing attribution",
"Custom invite codes with policy presets",
"Partner and affiliate tracking",
].map((item) => (
<li key={item} className="flex items-start gap-3">
<CheckCircle2 className="h-5 w-5 text-accent flex-shrink-0 mt-0.5" />
<span className="text-foreground">{item}</span>
</li>
))}
</ul>
</div>
</div>
</div>
</section>
{/* Security & Compliance */}
<section className="py-24 bg-muted/30">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-4">
<Shield className="h-4 w-4" />
Security First
</div>
<h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
Built for Enterprise Security Requirements
</h2>
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
Every feature is designed with security and compliance in mind. From MFA enforcement to complete audit trails.
</p>
</div>
<div className="grid md:grid-cols-3 gap-8">
{[
{
icon: Lock,
title: "MFA Enforcement",
description: "Organization-wide MFA policies. Require TOTP or WebAuthn for all users, with grace periods for enrollment.",
},
{
icon: Eye,
title: "Complete Audit Trail",
description: "Every action is logged. From logins to SSH certificate usage, you have full visibility into who did what.",
},
{
icon: ShieldCheck,
title: "Compliance Ready",
description: "Meet SOC 2, HIPAA, and other compliance requirements with documented security controls and audit logs.",
},
].map((item) => (
<Card key={item.title} className="bg-card">
<CardContent className="pt-6">
<div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
<item.icon className="h-6 w-6 text-primary" />
</div>
<h3 className="text-lg font-semibold text-foreground mb-2">{item.title}</h3>
<p className="text-sm text-muted-foreground">{item.description}</p>
</CardContent>
</Card>
))}
</div>
<div className="text-center mt-10">
<Link to="/security">
<Button variant="outline" className="gap-2">
Learn About Security
<ArrowRight className="h-4 w-4" />
</Button>
</Link>
</div>
</div>
</section>
{/* CTA Section */}
<section className="py-24">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<Card className="bg-gradient-to-br from-primary to-primary/80 border-0 overflow-hidden relative">
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDM0djItSDI0djJoMTJ6Ii8+PC9nPjwvZz48L3N2Zz4=')] opacity-50" />
<CardContent className="p-12 text-center relative">
<h2 className="text-3xl sm:text-4xl font-bold text-primary-foreground mb-4">
Ready to Simplify Your Identity Stack?
</h2>
<p className="text-lg text-primary-foreground/80 max-w-2xl mx-auto mb-8">
Start your free trial today. No credit card required. Set up SSO and SSH certificates in under an hour.
</p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<Link to="/register">
<Button size="lg" variant="secondary" className="gap-2 bg-white text-primary hover:bg-white/90 font-semibold">
Start Free Trial
<Link to="/ssh-certificates">
<Button className="gap-2">
Learn About SSH Certificates
<ArrowRight className="h-4 w-4" />
</Button>
</Link>
<Link to="/pricing">
<Button size="lg" className="bg-transparent border-2 border-white text-white hover:bg-white/15 font-semibold">
View Pricing
</div>
<div className="grid sm:grid-cols-2 gap-4">
{sshFeatures.map((feature) => (
<Card key={feature.title} className="bg-muted/50">
<CardContent className="pt-6">
<div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center mb-3">
<feature.icon className="h-5 w-5 text-primary" />
</div>
<h3 className="text-base font-semibold text-foreground mb-1">{feature.title}</h3>
<p className="text-sm text-muted-foreground">{feature.description}</p>
</CardContent>
</Card>
))}
</div>
</div>
</div>
</section>
{/* ZeroTier Network Access Section */}
<section className="py-24">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-4">
<Network className="h-4 w-4" />
ZeroTier Network Governance
</div>
<h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
Govern Your ZeroTier Networks<br />
<span className="text-primary">With Your Identity Platform</span>
</h2>
<p className="text-lg text-muted-foreground mb-6">
Stop managing ZeroTier access through raw administration interfaces. Secuird adds
approval workflows, time-bounded activation sessions, and complete audit trails
to your ZeroTier networks.
</p>
<ul className="space-y-3 mb-8">
{[
"Register devices by ZeroTier Node ID — no shared secrets",
"Manager approval before any network access is granted",
"Time-bounded activation sessions (e.g., 8-hour workday)",
"Instant kill switch to revoke all active memberships",
"Full audit trail of who accessed what network when",
].map((item) => (
<li key={item} className="flex items-start gap-3">
<CheckCircle2 className="h-5 w-5 text-accent flex-shrink-0 mt-0.5" />
<span className="text-foreground">{item}</span>
</li>
))}
</ul>
<Link to="/zerotier">
<Button className="gap-2">
Learn About Network Governance
<ArrowRight className="h-4 w-4" />
</Button>
</Link>
</div>
</CardContent>
</Card>
</div>
</section>
</>
);
}
<div className="relative">
{/* Screenshot placeholder - replace with actual screenshot */}
<Card className="bg-card shadow-xl border-2 border-dashed border-muted-foreground/20">
<CardContent className="p-8 text-center">
<div className="flex flex-col items-center justify-center py-12 space-y-4">
<Network className="h-16 w-16 text-muted-foreground/40" />
<div className="space-y-2">
<p className="text-sm font-medium text-muted-foreground">ZeroTier Networks Dashboard</p>
<p className="text-xs text-muted-foreground/60">Screenshot placeholder — replace with:</p>
<ul className="text-xs text-muted-foreground/60 list-disc list-inside">
<li>Networks list view</li>
<li>Device activation status</li>
<li>Member management panel</li>
</ul>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
</div>
</section>
{/* How It Works */}
<section className="py-24 bg-muted/30">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16">
<h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
How It Works
</h2>
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
Get started in minutes, not months. No complex federation required.
</p>
</div>
<div className="grid md:grid-cols-3 gap-8">
{[
{
step: "01",
title: "Connect Your Providers",
description: "Link Microsoft 365, Google Workspace, or GitHub. Users authenticate with credentials they already have.",
icon: Users,
},
{
step: "02",
title: "Configure Policies",
description: "Set MFA requirements, access policies, and SSH certificate parameters. One policy, organization-wide.",
icon: Settings,
},
{
step: "03",
title: "Connect Your Apps",
description: "Register internal applications as OIDC clients. Users get seamless SSO access to everything.",
icon: Fingerprint,
},
].map((step) => (
<div key={step.step} className="relative">
<div className="text-6xl font-bold text-primary/10 mb-4">{step.step}</div>
<div className="h-12 w-12 rounded-lg bg-accent/10 flex items-center justify-center mb-4">
<step.icon className="h-6 w-6 text-accent" />
</div>
<h3 className="text-xl font-semibold text-foreground mb-2">{step.title}</h3>
<p className="text-muted-foreground">{step.description}</p>
</div>
))}
</div>
</div>
</section>
{/* Marketing & Registration Tracking */}
<section className="py-24">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="grid lg:grid-cols-2 gap-12 items-center">
<div className="order-2 lg:order-1">
<Card className="bg-gradient-to-br from-primary/5 to-accent/5 border-0">
<CardContent className="p-8">
<div className="space-y-4">
<div className="flex items-center gap-3">
<div className="h-10 w-10 rounded-full bg-accent/10 flex items-center justify-center">
<Users className="h-5 w-5 text-accent" />
</div>
<div>
<p className="text-sm font-medium text-foreground">Marketing Campaign A</p>
<p className="text-xs text-muted-foreground">utm_source=newsletter</p>
</div>
</div>
<div className="flex items-center gap-3">
<div className="h-10 w-10 rounded-full bg-accent/10 flex items-center justify-center">
<Users className="h-5 w-5 text-accent" />
</div>
<div>
<p className="text-sm font-medium text-foreground">Partner Integration</p>
<p className="text-xs text-muted-foreground">referral_code=partner123</p>
</div>
</div>
<div className="flex items-center gap-3">
<div className="h-10 w-10 rounded-full bg-accent/10 flex items-center justify-center">
<Users className="h-5 w-5 text-accent" />
</div>
<div>
<p className="text-sm font-medium text-foreground">Direct Signup</p>
<p className="text-xs text-muted-foreground">organic registration</p>
</div>
</div>
<div className="pt-4 border-t">
<p className="text-sm text-muted-foreground mb-2">Auto-applied policies:</p>
<div className="flex flex-wrap gap-2">
<span className="px-2 py-1 bg-primary/10 text-primary text-xs rounded-full">Trial Extended</span>
<span className="px-2 py-1 bg-accent/10 text-accent text-xs rounded-full">Partner Group</span>
</div>
</div>
</div>
</CardContent>
</Card>
</div>
<div className="order-1 lg:order-2">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 text-accent text-sm font-medium mb-4">
<Users className="h-4 w-4" />
Registration Tracking
</div>
<h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
Know Where Your Users Come From
</h2>
<p className="text-lg text-muted-foreground mb-6">
Track user registration sources through marketing codes, UTM parameters, or referral links.
Apply policies and group memberships automatically based on origin.
</p>
<ul className="space-y-3">
{[
"Automatic group assignment based on registration source",
"UTM parameter tracking for marketing attribution",
"Custom invite codes with policy presets",
"Partner and affiliate tracking",
].map((item) => (
<li key={item} className="flex items-start gap-3">
<CheckCircle2 className="h-5 w-5 text-accent flex-shrink-0 mt-0.5" />
<span className="text-foreground">{item}</span>
</li>
))}
</ul>
</div>
</div>
</div>
</section>
{/* Security & Compliance */}
<section className="py-24 bg-muted/30">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="text-center mb-16">
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-4">
<Shield className="h-4 w-4" />
Security First
</div>
<h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
Built for Enterprise Security Requirements
</h2>
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
Every feature is designed with security and compliance in mind. From MFA enforcement to complete audit trails.
</p>
</div>
<div className="grid md:grid-cols-3 gap-8">
{[
{
icon: Lock,
title: "MFA Enforcement",
description: "Organization-wide MFA policies. Require TOTP or WebAuthn for all users, with grace periods for enrollment.",
},
{
icon: Eye,
title: "Complete Audit Trail",
description: "Every action is logged. From logins to SSH certificate usage, you have full visibility into who did what.",
},
{
icon: ShieldCheck,
title: "Compliance Ready",
description: "Meet SOC 2, HIPAA, and other compliance requirements with documented security controls and audit logs.",
},
].map((item) => (
<Card key={item.title} className="bg-card">
<CardContent className="pt-6">
<div className="h-12 w-12 rounded-lg bg-primary/10 flex items-center justify-center mb-4">
<item.icon className="h-6 w-6 text-primary" />
</div>
<h3 className="text-lg font-semibold text-foreground mb-2">{item.title}</h3>
<p className="text-sm text-muted-foreground">{item.description}</p>
</CardContent>
</Card>
))}
</div>
<div className="text-center mt-10">
<Link to="/security">
<Button variant="outline" className="gap-2">
Learn About Security
<ArrowRight className="h-4 w-4" />
</Button>
</Link>
</div>
</div>
</section>
{/* CTA Section */}
<section className="py-24">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<Card className="bg-gradient-to-br from-primary to-primary/80 border-0 overflow-hidden relative">
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDM0djItSDI0djJoMTJ6Ii8+PC9nPjwvZz48L3N2Zz4=')] opacity-50" />
<CardContent className="p-12 text-center relative">
<h2 className="text-3xl sm:text-4xl font-bold text-primary-foreground mb-4">
Ready to Simplify Your Identity Stack?
</h2>
<p className="text-lg text-primary-foreground/80 max-w-2xl mx-auto mb-8">
Start your free trial today. No credit card required. Set up SSO and SSH certificates in under an hour.
</p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<Link to="/register">
<Button size="lg" variant="secondary" className="gap-2 bg-white text-primary hover:bg-white/90 font-semibold">
Start Free Trial
<ArrowRight className="h-4 w-4" />
</Button>
</Link>
<Link to="/pricing">
<Button size="lg" className="bg-transparent border-2 border-white text-white hover:bg-white/15 font-semibold">
View Pricing
</Button>
</Link>
</div>
</CardContent>
</Card>
</div>
</section>
</>
);
}
src/pages/marketing/SSHCertificatesPage.tsx
+8 -8
View File
@@ -68,14 +68,14 @@ code: "# Certificate auto-expires",
];
const comparisonFeatures = [
{ feature: "Lifetime", static: "Permanent", cert: "Minutes to hours" },
{ feature: "Rotation", static: "Manual, error-prone", cert: "Automatic" },
{ feature: "Auditability", static: "None", cert: "Full chain of custody" },
{ feature: "Revocation", static: "Distribute to all servers", cert: "Disable user" },
{ feature: "Access Control", static: "Manual key distribution", cert: "Group-based policies" },
{ feature: "Identity Link", static: "Anonymous", cert: "Verified identity" },
{ feature: "Onboarding", static: "Copy keys manually", cert: "Self-service" },
{ feature: "Offboarding", static: "Hunt and remove keys", cert: "Instant revocation" },
{ feature: "Key Lifetime", static: "Permanent — keys never expire", cert: "Minutes to hours — auto-expiration" },
{ feature: "Key Rotation", static: "Manual process, error-prone", cert: "Automatic with each certificate" },
{ feature: "Audit Trail", static: "No visibility into usage", cert: "Full chain of custody logged" },
{ feature: "Revocation", static: "Must reach all servers manually", cert: "Disable user — instant globally" },
{ feature: "Access Control", static: "Manual key distribution to servers", cert: "Group-based policies, self-service" },
{ feature: "Identity Link", static: "Anonymous — no user verification", cert: "Tied to verified corporate identity" },
{ feature: "Onboarding", static: "Admin copies keys to every server", cert: "User registers key once, self-service" },
{ feature: "Offboarding", static: "Hunt and remove keys from servers", cert: "Disable user — all certs invalidated" },
];
const useCases = [
src/pages/marketing/ZeroTierPage.tsx
+466
View File
@@ -0,0 +1,466 @@
import { Link } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import {
Network,
Monitor,
Users,
Clock,
Zap,
ShieldCheck,
ArrowRight,
CheckCircle2,
ShieldAlert,
Globe,
Lock,
Key,
} from "lucide-react";
const benefits = [
{
icon: Monitor,
title: "Node ID Registration",
description: "Register ZeroTier nodes by their unique Node ID. No shared secrets — users own their devices, not the network.",
},
{
icon: Users,
title: "Approval Workflows",
description: "Manager approval required before network access. Durable approvals survive across days while maintaining security.",
},
{
icon: Clock,
title: "Time-Bounded Sessions",
description: "Activation sessions last hours, not days. Re-authenticate to activate for a fixed period like an 8-hour workday.",
},
{
icon: Zap,
title: "Instant Kill Switch",
description: "Revoke all active memberships for a user across all networks. Lost laptop? Immediate response.",
},
];
const howItWorks = [
{
step: "01",
title: "Register ZeroTier Node",
description: "Users register their ZeroTier Node ID in Secuird. This is a one-time setup — no shared secrets required.",
code: "zerotier-cli info",
},
{
step: "02",
title: "Request Network Access",
description: "When users need access to a ZeroTier network, they request access through Secuird.",
code: "Request via Secuird dashboard",
},
{
step: "03",
title: "Manager Approval",
description: "A manager reviews and approves the request. Approval is durable — it persists until explicitly revoked.",
code: "Approved in Secuird portal",
},
{
step: "04",
title: "Activate for a Session",
description: "User activates their access for a time-bounded session. When the session expires, they re-authenticate.",
code: "Session expires automatically",
},
];
const comparisonFeatures = [
{
feature: "Access Control",
traditional: "Shared secrets or public lists",
secuird: "Identity-based, approval workflows",
},
{
feature: "Session Duration",
traditional: "Permanent until manually removed",
secuird: "Hours — automatic expiration",
},
{
feature: "Revocation",
traditional: "Remove from every network manually",
secuird: "Disable user — instant global revoke",
},
{
feature: "Audit Trail",
traditional: "None",
secuird: "Complete log of all access events",
},
{
feature: "Manager Control",
traditional: "No approval workflow",
secuird: "Explicit approval before access granted",
},
{
feature: "Contractor Access",
traditional: "Share credentials, revoke later",
secuird: "Time-limited, self-service, audited",
},
];
const useCases = [
{
title: "Managed Service Providers (MSPs)",
description: "Manage access for multiple client networks without sharing credentials. Contractors come and go — maintain control with time-bounded sessions.",
features: [
"Isolate each client's network access",
"Time-limited access for contractors",
"Complete audit trail for compliance",
"Instant revocation when contracts end",
],
},
{
title: "Cloud Service Providers (CSPs)",
description: "Offer ZeroTier-based private networking to your customers with enterprise-grade access controls.",
features: [
"Multi-tenant network isolation",
"Approval workflows for sensitive networks",
"Usage auditing for billing",
"White-label options",
],
},
{
title: "Hyperscalers",
description: "Provide secure ZeroTier connectivity across distributed infrastructure with identity-based access control.",
features: [
"Scale to thousands of nodes",
"Identity-linked access everywhere",
"Automated compliance reporting",
"API-driven provisioning",
],
},
{
title: "Short-Term Contractors",
description: "Give contractors access to specific networks for specific periods. When the contract ends, access ends — automatically.",
features: [
"Hours-long activation sessions",
"No shared credentials",
"Full audit of what they accessed",
"One-click revocation",
],
},
];
const features = [
{
icon: Monitor,
title: "Node ID Registration",
description: "Register ZeroTier nodes by their unique Node ID. No shared secrets — users own their devices.",
},
{
icon: Users,
title: "Approval Workflows",
description: "Manager approval required before network access. Durable approvals survive across days.",
},
{
icon: Clock,
title: "Activation Sessions",
description: "Time-bounded access sessions. Re-authenticate to activate for a fixed period like an 8-hour workday.",
},
{
icon: Zap,
title: "Kill Switch",
description: "Instantly revoke all active memberships for a user across all networks. Lost laptop? Immediate response.",
},
{
icon: ShieldCheck,
title: "Complete Audit Trail",
description: "Every network access event logged. Know who accessed what, when, and from which device.",
},
{
icon: Network,
title: "Multi-Network Support",
description: "Manage production, staging, and lab networks separately with environment-based policies.",
},
];
export default function ZeroTierPage() {
return (
<>
{/* Hero */}
<section className="py-16 lg:py-24 bg-gradient-to-b from-background to-muted/30">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="grid lg:grid-cols-2 gap-12 items-center">
<div>
<div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 text-accent text-sm font-medium mb-6">
<Network className="h-4 w-4" />
ZeroTier Network Governance
</div>
<h1 className="text-4xl sm:text-5xl font-bold tracking-tight text-foreground mb-6">
Identity-Based Access Control
<span className="text-accent block mt-2">For ZeroTier Networks</span>
</h1>
<p className="text-lg text-muted-foreground mb-8">
Stop managing ZeroTier access through raw administration interfaces. Secuird adds
approval workflows, time-bounded activation sessions, and complete audit trails
to your ZeroTier networks — without requiring SSH certificates.
</p>
<div className="flex flex-col sm:flex-row gap-4">
<Link to="/register">
<Button size="lg" className="gap-2">
Start Free Trial
<ArrowRight className="h-4 w-4" />
</Button>
</Link>
<Link to="/demo">
<Button variant="outline" size="lg">
Watch Demo
</Button>
</Link>
</div>
</div>
<div className="relative">
<Card className="bg-card shadow-xl">
<CardContent className="p-8">
<div className="space-y-4">
<div className="flex items-center gap-3">
<div className="h-10 w-10 rounded-lg bg-accent/10 flex items-center justify-center">
<Network className="h-5 w-5 text-accent" />
</div>
<div>
<p className="text-sm font-medium text-foreground">Production Network</p>
<p className="text-xs text-muted-foreground">zt1abc...def</p>
</div>
<span className="ml-auto px-2 py-1 bg-success/10 text-success text-xs rounded-full">Active</span>
</div>
<div className="border-t pt-4">
<p className="text-sm text-muted-foreground mb-2">Pending Requests</p>
<div className="space-y-2">
<div className="flex items-center justify-between text-sm">
<span>jane@contractor.io</span>
<span className="text-xs text-muted-foreground">2 hours ago</span>
</div>
<div className="flex items-center justify-between text-sm">
<span>build-server-03</span>
<span className="text-xs text-muted-foreground">5 hours ago</span>
</div>
</div>
</div>
<div className="border-t pt-4">
<p className="text-sm text-muted-foreground mb-2">Active Sessions</p>
<div className="space-y-2">
<div className="flex items-center justify-between text-sm">
<span>john@company.com</span>
<span className="text-xs text-accent">Expires in 4h 23m</span>
</div>
</div>
</div>
</div>
</CardContent>
</Card>
</div>
</div>
</div>
</section>
{/* Not Tied to SSH */}
<section className="py-12 bg-muted/30">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="bg-accent/5 border border-accent/20 rounded-lg p-6">
<div className="flex items-start gap-4">
<ShieldAlert className="h-6 w-6 text-accent flex-shrink-0 mt-1" />
<div>
<h3 className="font-semibold text-foreground mb-1">Independent of SSH Certificates</h3>
<p className="text-sm text-muted-foreground">
ZeroTier Network Governance works completely independently of SSH Certificate Authority.
Use it on its own to control ZeroTier network access, or combine it with SSH certificates
for comprehensive infrastructure access control. Two powerful features, one unified platform.
</p>
</div>
</div>
</div>
</div>
</section>
{/* Benefits */}
<section className="py-16 lg:py-24">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12">
<h2 className="text-3xl font-bold text-foreground mb-4">
Why ZeroTier Governance?
</h2>
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
Traditional ZeroTier management relies on shared secrets and manual administration.
Secuird brings identity-based access control to ZeroTier.
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
{benefits.map((benefit) => (
<Card key={benefit.title} className="bg-card">
<CardContent className="pt-6">
<div className="h-12 w-12 rounded-lg bg-accent/10 flex items-center justify-center mb-4">
<benefit.icon className="h-6 w-6 text-accent" />
</div>
<h3 className="text-lg font-semibold text-foreground mb-2">{benefit.title}</h3>
<p className="text-sm text-muted-foreground">{benefit.description}</p>
</CardContent>
</Card>
))}
</div>
</div>
</section>
{/* How It Works */}
<section className="py-16 lg:py-24 bg-muted/30">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12">
<h2 className="text-3xl font-bold text-foreground mb-4">
How It Works
</h2>
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
Simple four-step process from registration to time-bounded access.
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
{howItWorks.map((step) => (
<Card key={step.step} className="bg-card">
<CardContent className="pt-6">
<div className="text-5xl font-bold text-primary/10 mb-2">{step.step}</div>
<h3 className="text-lg font-semibold text-foreground mb-2">{step.title}</h3>
<p className="text-sm text-muted-foreground mb-4">{step.description}</p>
<pre className="p-2 bg-muted rounded text-xs font-mono text-muted-foreground overflow-x-auto">
<code>{step.code}</code>
</pre>
</CardContent>
</Card>
))}
</div>
</div>
</section>
{/* Traditional vs Secuird */}
<section className="py-16 lg:py-24">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12">
<h2 className="text-3xl font-bold text-foreground mb-4">
Traditional vs. Secuird-Governed ZeroTier
</h2>
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
See the difference identity-based access control makes.
</p>
</div>
<Card className="overflow-hidden">
<CardContent className="p-0">
<div className="overflow-x-auto">
<table className="w-full">
<thead>
<tr className="border-b bg-muted/50">
<th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Feature</th>
<th className="px-6 py-4 text-center text-sm font-semibold text-destructive">Traditional ZeroTier</th>
<th className="px-6 py-4 text-center text-sm font-semibold text-accent bg-accent/5">Secuird-Governed</th>
</tr>
</thead>
<tbody className="divide-y">
{comparisonFeatures.map((row) => (
<tr key={row.feature} className="hover:bg-muted/30">
<td className="px-6 py-4 text-sm font-medium text-foreground">{row.feature}</td>
<td className="px-6 py-4 text-sm text-center text-destructive/80">{row.traditional}</td>
<td className="px-6 py-4 text-sm text-center text-accent bg-accent/5 font-medium">{row.secuird}</td>
</tr>
))}
</tbody>
</table>
</div>
</CardContent>
</Card>
</div>
</section>
{/* Use Cases */}
<section className="py-16 lg:py-24 bg-muted/30">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12">
<h2 className="text-3xl font-bold text-foreground mb-4">
Use Cases
</h2>
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
Perfect for organizations managing access to ZeroTier networks at scale.
</p>
</div>
<div className="grid md:grid-cols-2 gap-6">
{useCases.map((useCase) => (
<Card key={useCase.title} className="bg-card">
<CardContent className="pt-6">
<h3 className="text-lg font-semibold text-foreground mb-2">{useCase.title}</h3>
<p className="text-sm text-muted-foreground mb-4">{useCase.description}</p>
<ul className="space-y-2">
{useCase.features.map((feature) => (
<li key={feature} className="flex items-center gap-2 text-sm text-foreground">
<CheckCircle2 className="h-4 w-4 text-accent" />
{feature}
</li>
))}
</ul>
</CardContent>
</Card>
))}
</div>
</div>
</section>
{/* Features Deep Dive */}
<section className="py-16 lg:py-24">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="text-center mb-12">
<h2 className="text-3xl font-bold text-foreground mb-4">
Powerful Features
</h2>
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
Everything you need to manage ZeroTier network access at scale.
</p>
</div>
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
{features.map((feature) => (
<Card key={feature.title} className="bg-card">
<CardContent className="pt-6">
<div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center mb-3">
<feature.icon className="h-5 w-5 text-primary" />
</div>
<h3 className="text-base font-semibold text-foreground mb-1">{feature.title}</h3>
<p className="text-sm text-muted-foreground">{feature.description}</p>
</CardContent>
</Card>
))}
</div>
</div>
</section>
{/* CTA */}
<section className="py-16 lg:py-24">
<div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<Card className="bg-gradient-to-br from-primary to-primary/80 border-0 overflow-hidden relative">
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDM0djItSDI0djJoMTJ6Ii8+PC9nPjwvZz48L3N2Zz4=')] opacity-50" />
<CardContent className="p-12 text-center relative">
<h2 className="text-3xl sm:text-4xl font-bold text-primary-foreground mb-4">
Ready to Govern Your ZeroTier Networks?
</h2>
<p className="text-lg text-primary-foreground/80 max-w-2xl mx-auto mb-8">
Start your free trial today. No credit card required. Set up your first network governance policy in minutes.
</p>
<div className="flex flex-col sm:flex-row items-center justify-center gap-4">
<Link to="/register">
<Button size="lg" variant="secondary" className="gap-2 bg-white text-primary hover:bg-white/90 font-semibold">
Start Free Trial
<ArrowRight className="h-4 w-4" />
</Button>
</Link>
<Link to="/demo">
<Button size="lg" className="bg-transparent border-2 border-white text-white hover:bg-white/15 font-semibold">
Watch Demo
</Button>
</Link>
</div>
</CardContent>
</Card>
</div>
</section>
</>
);
}
src/pages/marketing/__tests__/MarketingPages.test.tsx
+29
View File
@@ -0,0 +1,29 @@
import React from "react";
import { renderToString } from "react-dom/server";
import { MemoryRouter } from "react-router-dom";
import HomePage from "../HomePage";
import FeaturesPage from "../FeaturesPage";
// Basic SSR tests to verify marketing page content renders as expected.
// We SSR the components to a string and assert presence of key headlines/texts.
describe("Marketing Pages SSR", () => {
test("HomePage renders main hero headline", () => {
const html = renderToString(
React.createElement(MemoryRouter, null, React.createElement(HomePage))
);
expect(html).toContain("Every Identity. One Platform.");
// Ensure subheading is also present
expect(html).toContain("Secuird unifies Google, Microsoft, GitHub");
});
test("FeaturesPage renders hero section title", () => {
const html = renderToString(
React.createElement(MemoryRouter, null, React.createElement(FeaturesPage))
);
// The hero section uses a combined heading with a span; test for the main line.
expect(html).toContain("Everything You Need for Enterprise Identity");
// Also verify the badge text is present
expect(html).toContain("Complete Feature Set");
});
});