feat(marketing): add Secuird marketing pages and rebrand
Add comprehensive marketing website with landing page, features, pricing, demo, SSH certificates, and security pages. Update index.html with enhanced SEO metadata, Open Graph tags, and structured data for the Secuird brand.
This commit is contained in:
+77
-13
@@ -3,31 +3,95 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Gatehouse — Identity & Access</title>
|
||||
<meta name="description" content="Gatehouse is a self-hosted identity and access platform providing secure authentication, organization-level security policy, and OIDC-based Single Sign-On." />
|
||||
<meta name="author" content="Gatehouse" />
|
||||
|
||||
<!-- Primary Meta Tags -->
|
||||
<title>Secuird — Enterprise Identity & Access Management</title>
|
||||
<meta name="title" content="Secuird — Enterprise Identity & Access Management" />
|
||||
<meta name="description" content="Secuird unifies social logins, MFA, and SSH certificate management in one platform. Enable enterprise SSO with Microsoft 365, Google Workspace, and GitHub without complex federation. Eliminate SSH key chaos with short-lived certificates tied to verified identities." />
|
||||
<meta name="keywords" content="identity management, access management, SSO, single sign-on, SSH certificates, MFA, multi-factor authentication, OIDC, enterprise security, Microsoft 365, Google Workspace, GitHub authentication" />
|
||||
<meta name="author" content="Secuird" />
|
||||
<meta name="robots" content="index, follow" />
|
||||
|
||||
<!-- Favicon -->
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
|
||||
<link rel="apple-touch-icon" href="/gatehouse-logo.svg" />
|
||||
|
||||
<!-- Open Graph -->
|
||||
<meta property="og:title" content="Gatehouse — Identity & Access" />
|
||||
<meta property="og:description" content="Secure authentication and access management for your organization." />
|
||||
|
||||
<!-- Open Graph / Facebook -->
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:image" content="/gatehouse-logo.svg" />
|
||||
|
||||
<!-- Twitter Card -->
|
||||
<meta property="og:url" content="https://securd.com/" />
|
||||
<meta property="og:title" content="Secuird — Enterprise Identity & Access Management" />
|
||||
<meta property="og:description" content="Secuird unifies social logins, MFA, and SSH certificate management in one platform. Enable enterprise SSO without complex federation. Eliminate SSH key chaos with short-lived certificates." />
|
||||
<meta property="og:image" content="/og-image.png" />
|
||||
<meta property="og:site_name" content="Secuird" />
|
||||
<meta property="og:locale" content="en_US" />
|
||||
|
||||
<!-- Twitter -->
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:site" content="@Gatehouse" />
|
||||
<meta name="twitter:image" content="/gatehouse-logo.svg" />
|
||||
<meta name="twitter:url" content="https://securd.com/" />
|
||||
<meta name="twitter:title" content="Secuird — Enterprise Identity & Access Management" />
|
||||
<meta name="twitter:description" content="Secuird unifies social logins, MFA, and SSH certificate management in one platform. Enable enterprise SSO without complex federation. Eliminate SSH key chaos with short-lived certificates." />
|
||||
<meta name="twitter:image" content="/og-image.png" />
|
||||
<meta name="twitter:site" content="@securd" />
|
||||
|
||||
<!-- Theme color -->
|
||||
<meta name="theme-color" content="#36b9a6" />
|
||||
<meta name="msapplication-TileColor" content="#36b9a6" />
|
||||
|
||||
<!-- Canonical URL -->
|
||||
<link rel="canonical" href="https://securd.com/" />
|
||||
|
||||
<!-- Structured Data -->
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "SoftwareApplication",
|
||||
"name": "Secuird",
|
||||
"applicationCategory": "SecurityApplication",
|
||||
"operatingSystem": "Web",
|
||||
"description": "Enterprise identity and access management platform providing secure authentication, organization-level security policy, SSH certificate management, and OIDC-based Single Sign-On.",
|
||||
"offers": {
|
||||
"@type": "Offer",
|
||||
"price": "29",
|
||||
"priceCurrency": "USD",
|
||||
"priceValidUntil": "2025-12-31"
|
||||
},
|
||||
"aggregateRating": {
|
||||
"@type": "AggregateRating",
|
||||
"ratingValue": "4.8",
|
||||
"ratingCount": "150"
|
||||
},
|
||||
"featureList": [
|
||||
"Single Sign-On (SSO)",
|
||||
"Multi-Factor Authentication (MFA)",
|
||||
"SSH Certificate Authority",
|
||||
"OIDC Provider",
|
||||
"Organization Management",
|
||||
"Audit Logging"
|
||||
]
|
||||
}
|
||||
</script>
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Organization",
|
||||
"name": "Secuird",
|
||||
"url": "https://securd.com",
|
||||
"logo": "https://securd.com/gatehouse-logo.svg",
|
||||
"sameAs": [
|
||||
"https://twitter.com/securd",
|
||||
"https://github.com/securd"
|
||||
],
|
||||
"contactPoint": {
|
||||
"@type": "ContactPoint",
|
||||
"contactType": "sales",
|
||||
"email": "sales@securd.com"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
</html>
|
||||
@@ -0,0 +1,257 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import {
|
||||
Play,
|
||||
ArrowRight,
|
||||
Users,
|
||||
Lock,
|
||||
Terminal,
|
||||
Shield,
|
||||
MonitorPlay,
|
||||
} from "lucide-react";
|
||||
|
||||
const demos = [
|
||||
{
|
||||
id: "getting-started",
|
||||
title: "Getting Started with Secuird",
|
||||
description: "A comprehensive overview of Secuird's features and how to set up your organization.",
|
||||
duration: "12 min",
|
||||
category: "Overview",
|
||||
icon: Shield,
|
||||
},
|
||||
{
|
||||
id: "social-login",
|
||||
title: "Social Login Setup",
|
||||
description: "Connect Microsoft 365, Google Workspace, or GitHub for seamless single sign-on.",
|
||||
duration: "8 min",
|
||||
category: "Authentication",
|
||||
icon: Users,
|
||||
},
|
||||
{
|
||||
id: "mfa-setup",
|
||||
title: "MFA Configuration",
|
||||
description: "Configure multi-factor authentication policies for your organization.",
|
||||
duration: "6 min",
|
||||
category: "Security",
|
||||
icon: Lock,
|
||||
},
|
||||
{
|
||||
id: "ssh-certificates",
|
||||
title: "SSH Certificate Authority",
|
||||
description: "Set up SSH certificate signing for secure, auditable server access.",
|
||||
duration: "15 min",
|
||||
category: "SSH Access",
|
||||
icon: Terminal,
|
||||
},
|
||||
{
|
||||
id: "oidc-clients",
|
||||
title: "OIDC Client Setup",
|
||||
description: "Register applications as OIDC clients for seamless authentication.",
|
||||
duration: "10 min",
|
||||
category: "Integration",
|
||||
icon: MonitorPlay,
|
||||
},
|
||||
];
|
||||
|
||||
export default function DemoPage() {
|
||||
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="text-center max-w-3xl mx-auto">
|
||||
<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">
|
||||
<Play className="h-4 w-4" />
|
||||
Product Demos
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-5xl font-bold tracking-tight text-foreground mb-6">
|
||||
See Secuird in Action
|
||||
</h1>
|
||||
<p className="text-lg text-muted-foreground">
|
||||
Watch our demo videos to see how Secuird can simplify identity and access management for your organization.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Featured Demo */}
|
||||
<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-8">
|
||||
<h2 className="text-2xl font-bold text-foreground mb-2">Featured Demo</h2>
|
||||
<p className="text-muted-foreground">Start here for a complete overview of Secuird</p>
|
||||
</div>
|
||||
|
||||
<Card className="overflow-hidden max-w-4xl mx-auto">
|
||||
<CardContent className="p-0">
|
||||
<div className="aspect-video bg-muted flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<div className="h-20 w-20 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
|
||||
<Play className="h-10 w-10 text-primary" />
|
||||
</div>
|
||||
<p className="text-muted-foreground mb-2">Getting Started with Secuird</p>
|
||||
<p className="text-sm text-muted-foreground">Video placeholder — Coming soon</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-6">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="px-2 py-1 bg-primary/10 text-primary text-xs rounded-full">Overview</span>
|
||||
<span className="text-sm text-muted-foreground">12 min</span>
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-foreground mb-2">Getting Started with Secuird</h3>
|
||||
<p className="text-muted-foreground">
|
||||
A comprehensive walkthrough of Secuird's core features. Learn how to set up your organization,
|
||||
configure authentication methods, and enable SSH certificate signing.
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* All Demos */}
|
||||
<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">
|
||||
All Demo Videos
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground">
|
||||
Explore specific features with our detailed walkthroughs
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{demos.map((demo) => (
|
||||
<Card key={demo.id} className="bg-card overflow-hidden group hover:shadow-lg transition-shadow">
|
||||
<CardContent className="p-0">
|
||||
<div className="aspect-video bg-muted flex items-center justify-center">
|
||||
<div className="h-14 w-14 rounded-full bg-primary/10 flex items-center justify-center group-hover:bg-primary/20 transition-colors">
|
||||
<demo.icon className="h-7 w-7 text-primary" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="p-4">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<span className="px-2 py-0.5 bg-muted text-muted-foreground text-xs rounded-full">{demo.category}</span>
|
||||
<span className="text-xs text-muted-foreground">{demo.duration}</span>
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-foreground mb-1">{demo.title}</h3>
|
||||
<p className="text-sm text-muted-foreground">{demo.description}</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Request Custom Demo */}
|
||||
<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/5 to-accent/5 border-0">
|
||||
<CardContent className="p-8 lg:p-12">
|
||||
<div className="grid lg:grid-cols-2 gap-8 items-center">
|
||||
<div>
|
||||
<h2 className="text-2xl font-bold text-foreground mb-4">
|
||||
Need a Custom Demo?
|
||||
</h2>
|
||||
<p className="text-muted-foreground mb-6">
|
||||
Our team can provide a personalized demo tailored to your organization's specific requirements.
|
||||
We'll walk through your use cases and show you how Secuird can help.
|
||||
</p>
|
||||
<ul className="space-y-3 mb-6">
|
||||
<li className="flex items-start gap-3">
|
||||
<div className="h-5 w-5 rounded-full bg-accent/10 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<Play className="h-3 w-3 text-accent" />
|
||||
</div>
|
||||
<span className="text-foreground">30-minute live session with our team</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<div className="h-5 w-5 rounded-full bg-accent/10 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<Play className="h-3 w-3 text-accent" />
|
||||
</div>
|
||||
<span className="text-foreground">Tailored to your specific use cases</span>
|
||||
</li>
|
||||
<li className="flex items-start gap-3">
|
||||
<div className="h-5 w-5 rounded-full bg-accent/10 flex items-center justify-center flex-shrink-0 mt-0.5">
|
||||
<Play className="h-3 w-3 text-accent" />
|
||||
</div>
|
||||
<span className="text-foreground">Q&A with product experts</span>
|
||||
</li>
|
||||
</ul>
|
||||
<Button className="gap-2">
|
||||
Schedule a Demo
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="bg-card rounded-lg p-6 border">
|
||||
<h3 className="text-lg font-semibold text-foreground mb-4">Request Demo</h3>
|
||||
<form className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-1">Work Email</label>
|
||||
<input
|
||||
type="email"
|
||||
className="w-full px-3 py-2 bg-background border border-input rounded-md text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
placeholder="you@company.com"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-1">Company</label>
|
||||
<input
|
||||
type="text"
|
||||
className="w-full px-3 py-2 bg-background border border-input rounded-md text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring"
|
||||
placeholder="Your company name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-foreground mb-1">What are you looking for?</label>
|
||||
<select className="w-full px-3 py-2 bg-background border border-input rounded-md text-foreground focus:outline-none focus:ring-2 focus:ring-ring">
|
||||
<option>SSO / Social Login</option>
|
||||
<option>SSH Certificate Management</option>
|
||||
<option>MFA / Security</option>
|
||||
<option>OIDC Provider</option>
|
||||
<option>Full IAM Solution</option>
|
||||
</select>
|
||||
</div>
|
||||
<Button className="w-full">
|
||||
Request Demo
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<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 max-w-2xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-foreground mb-4">
|
||||
Ready to Try It Yourself?
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground mb-8">
|
||||
Start your free trial today. No credit card required. Full access to all features.
|
||||
</p>
|
||||
<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="/pricing">
|
||||
<Button variant="outline" size="lg">
|
||||
View Pricing
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,529 @@
|
||||
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,
|
||||
} 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: 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: 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: 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: 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: 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: 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: 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: 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: Activity,
|
||||
title: "Real-Time Monitoring",
|
||||
description: "Monitor certificate usage in real-time. Detect anomalies and suspicious access patterns.",
|
||||
},
|
||||
];
|
||||
|
||||
const organizationFeatures = [
|
||||
{
|
||||
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: 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.",
|
||||
},
|
||||
];
|
||||
|
||||
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: 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: Activity,
|
||||
title: "Activity Monitoring",
|
||||
description: "Real-time visibility into user activity. Login patterns, certificate usage, and security events.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function FeaturesPage() {
|
||||
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="text-center max-w-3xl mx-auto">
|
||||
<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">
|
||||
<Layers className="h-4 w-4" />
|
||||
Complete Feature Set
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-5xl font-bold tracking-tight text-foreground mb-6">
|
||||
Everything You Need for
|
||||
<span className="text-accent block mt-2">Enterprise Identity</span>
|
||||
</h1>
|
||||
<p className="text-lg text-muted-foreground">
|
||||
Secuird provides a complete identity and access management platform. From social login to SSH certificates, we've got you covered.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Authentication Methods */}
|
||||
<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>
|
||||
<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">
|
||||
<LogIn className="h-4 w-4" />
|
||||
Authentication
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
|
||||
Flexible Authentication Options
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground mb-6">
|
||||
Let users authenticate with their existing corporate accounts. No new passwords to remember, no onboarding friction.
|
||||
</p>
|
||||
<p className="text-muted-foreground mb-8">
|
||||
Or combine methods—require social login for some users, traditional password + MFA for others. You're in complete control.
|
||||
</p>
|
||||
<ul className="space-y-3">
|
||||
{[
|
||||
"Single sign-on with major providers",
|
||||
"Traditional email/password authentication",
|
||||
"Combine multiple methods per user",
|
||||
"Automatic account linking",
|
||||
].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 className="grid sm:grid-cols-2 gap-4">
|
||||
{authenticationFeatures.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>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Multi-Factor Authentication */}
|
||||
<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">
|
||||
<div className="grid sm:grid-cols-2 gap-4">
|
||||
{mfaFeatures.map((feature) => (
|
||||
<Card key={feature.title} className="bg-card">
|
||||
<CardContent className="pt-6">
|
||||
<div className="h-10 w-10 rounded-lg bg-accent/10 flex items-center justify-center mb-3">
|
||||
<feature.icon className="h-5 w-5 text-accent" />
|
||||
</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 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">
|
||||
<Shield className="h-4 w-4" />
|
||||
Multi-Factor Authentication
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
|
||||
Enforce MFA Across Your Organization
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground mb-6">
|
||||
Modern authentication needs modern security. Require hardware keys or authenticator apps for all users—or specific groups.
|
||||
</p>
|
||||
<p className="text-muted-foreground mb-8">
|
||||
With grace periods, users aren't immediately locked out. They get time to set up their authenticators while staying productive.
|
||||
</p>
|
||||
<ul className="space-y-3">
|
||||
{[
|
||||
"WebAuthn/Passkey support for phishing-resistant auth",
|
||||
"TOTP support for all authenticator apps",
|
||||
"Organization-wide MFA policies",
|
||||
"Per-user compliance 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>
|
||||
|
||||
{/* OIDC Provider */}
|
||||
<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>
|
||||
<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">
|
||||
<ArrowRightLeft className="h-4 w-4" />
|
||||
OIDC Provider
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
|
||||
One Identity for All Your Apps
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground mb-6">
|
||||
Secuird acts as an OpenID Connect provider. Connect any OIDC-compatible application—internal tools, dashboards, APIs—with a single identity source.
|
||||
</p>
|
||||
<p className="text-muted-foreground mb-8">
|
||||
Users authenticate once with Secuird, then seamlessly access all connected applications. No separate passwords, no repeated logins.
|
||||
</p>
|
||||
<ul className="space-y-3">
|
||||
{[
|
||||
"Standards-compliant OIDC implementation",
|
||||
"Unlimited client applications",
|
||||
"Custom scopes and claims",
|
||||
"User consent management",
|
||||
].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 className="grid sm:grid-cols-2 gap-4">
|
||||
{oidcFeatures.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>
|
||||
|
||||
{/* SSH Certificates */}
|
||||
<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">
|
||||
<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">
|
||||
<Terminal className="h-4 w-4" />
|
||||
SSH Certificate Authority
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
|
||||
Modern SSH Access Management
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
Replace static SSH keys with short-lived certificates tied to verified identities. Complete auditability with zero infrastructure changes.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{sshFeatures.map((feature) => (
|
||||
<Card key={feature.title} className="bg-card">
|
||||
<CardContent className="pt-6">
|
||||
<div className="h-10 w-10 rounded-lg bg-accent/10 flex items-center justify-center mb-3">
|
||||
<feature.icon className="h-5 w-5 text-accent" />
|
||||
</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 className="text-center mt-10">
|
||||
<Link to="/ssh-certificates">
|
||||
<Button className="gap-2">
|
||||
Learn More About SSH Certificates
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Organization Management */}
|
||||
<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 className="order-2 lg:order-1">
|
||||
<div className="grid sm:grid-cols-2 gap-4">
|
||||
{organizationFeatures.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 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">
|
||||
<Users className="h-4 w-4" />
|
||||
Organization Management
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
|
||||
Manage Users, Groups, and Policies
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground mb-6">
|
||||
Complete organization management. Invite users, organize them into departments, and apply policies at any level.
|
||||
</p>
|
||||
<p className="text-muted-foreground mb-8">
|
||||
Track where users came from with registration tracking. Marketing codes and UTM parameters are captured automatically, and you can apply policies based on origin.
|
||||
</p>
|
||||
<ul className="space-y-3">
|
||||
{[
|
||||
"Multi-tenant with complete isolation",
|
||||
"Role-based access control",
|
||||
"Department-based organization",
|
||||
"Registration source 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>
|
||||
|
||||
{/* Compliance & Audit */}
|
||||
<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>
|
||||
<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">
|
||||
<ShieldCheck className="h-4 w-4" />
|
||||
Compliance & Audit
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
|
||||
Meet Your Compliance Requirements
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground mb-6">
|
||||
Every action is logged. From user logins to SSH certificate usage, you have complete visibility for audits and compliance reports.
|
||||
</p>
|
||||
<p className="text-muted-foreground mb-8">
|
||||
Generate reports for SOC 2, HIPAA, and other frameworks. Demonstrate your security controls with comprehensive audit trails.
|
||||
</p>
|
||||
<ul className="space-y-3">
|
||||
{[
|
||||
"Complete audit logging",
|
||||
"Organization-level and system-level views",
|
||||
"Export for SIEM integration",
|
||||
"Compliance report generation",
|
||||
].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 className="grid sm:grid-cols-2 gap-4">
|
||||
{complianceFeatures.map((feature) => (
|
||||
<Card key={feature.title} className="bg-card">
|
||||
<CardContent className="pt-6">
|
||||
<div className="h-10 w-10 rounded-lg bg-accent/10 flex items-center justify-center mb-3">
|
||||
<feature.icon className="h-5 w-5 text-accent" />
|
||||
</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>
|
||||
|
||||
{/* 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 Get Started?
|
||||
</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. Experience all features with your team.
|
||||
</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">
|
||||
Start Free Trial
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Link to="/demo">
|
||||
<Button size="lg" variant="outline" className="text-primary-foreground border-primary-foreground/30 hover:bg-primary-foreground/10">
|
||||
Watch Demo
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,443 @@
|
||||
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
|
||||
} 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.",
|
||||
},
|
||||
];
|
||||
|
||||
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.",
|
||||
},
|
||||
];
|
||||
|
||||
const socialProviders = [
|
||||
{ name: "Microsoft 365", icon: Building2 },
|
||||
{ name: "Google Workspace", icon: Globe },
|
||||
{ name: "GitHub", icon: Key },
|
||||
];
|
||||
|
||||
export default function HomePage() {
|
||||
return (
|
||||
<>
|
||||
{/* Hero Section */}
|
||||
<section className="relative overflow-hidden">
|
||||
{/* Background gradient */}
|
||||
<div className="absolute inset-0 bg-gradient-to-br from-primary/5 via-background to-accent/5 pointer-events-none" />
|
||||
|
||||
<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-accent/10 text-accent text-sm font-medium mb-6">
|
||||
<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-accent 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>
|
||||
))}
|
||||
</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 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.
|
||||
</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>
|
||||
|
||||
<Link to="/ssh-certificates">
|
||||
<Button className="gap-2">
|
||||
Learn About SSH Certificates
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</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>
|
||||
|
||||
{/* 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">
|
||||
Start Free Trial
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Link to="/pricing">
|
||||
<Button size="lg" variant="outline" className="text-primary-foreground border-primary-foreground/30 hover:bg-primary-foreground/10">
|
||||
View Pricing
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,358 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
|
||||
import {
|
||||
CreditCard,
|
||||
CheckCircle2,
|
||||
ArrowRight,
|
||||
Users,
|
||||
Server,
|
||||
Shield,
|
||||
Zap,
|
||||
Building2,
|
||||
HelpCircle,
|
||||
} from "lucide-react";
|
||||
|
||||
const plans = [
|
||||
{
|
||||
name: "Starter",
|
||||
description: "Perfect for small teams getting started with modern identity management.",
|
||||
price: 29,
|
||||
priceNote: "per user/month",
|
||||
billed: "billed annually",
|
||||
features: [
|
||||
"Up to 50 users",
|
||||
"1 organization",
|
||||
"Email/password authentication",
|
||||
"Google OAuth integration",
|
||||
"Basic MFA (TOTP)",
|
||||
"Up to 3 OIDC clients",
|
||||
"Up to 2 SSH CAs",
|
||||
"7-day audit log retention",
|
||||
],
|
||||
cta: "Start Free Trial",
|
||||
highlighted: false,
|
||||
},
|
||||
{
|
||||
name: "Business",
|
||||
description: "For growing organizations that need complete identity and access management.",
|
||||
price: 59,
|
||||
priceNote: "per user/month",
|
||||
billed: "billed annually",
|
||||
features: [
|
||||
"Unlimited users",
|
||||
"Multiple organizations",
|
||||
"All OAuth providers",
|
||||
"WebAuthn/Passkey support",
|
||||
"Unlimited OIDC clients",
|
||||
"Unlimited SSH CAs",
|
||||
"Host certificate signing",
|
||||
"90-day audit log retention",
|
||||
"Department-based policies",
|
||||
"Registration tracking",
|
||||
],
|
||||
cta: "Start Free Trial",
|
||||
highlighted: true,
|
||||
badge: "Most Popular",
|
||||
},
|
||||
{
|
||||
name: "Enterprise",
|
||||
description: "For organizations with advanced security and compliance requirements.",
|
||||
price: null,
|
||||
priceNote: "custom pricing",
|
||||
billed: "contact sales",
|
||||
features: [
|
||||
"Everything in Business",
|
||||
"Self-hosted deployment",
|
||||
"Custom SLA",
|
||||
"Dedicated support",
|
||||
"Unlimited audit retention",
|
||||
"Custom branding",
|
||||
"SAML integration",
|
||||
"SCIM provisioning",
|
||||
"Priority feature requests",
|
||||
"On-premises option",
|
||||
],
|
||||
cta: "Contact Sales",
|
||||
highlighted: false,
|
||||
},
|
||||
];
|
||||
|
||||
const faqs = [
|
||||
{
|
||||
question: "How does the free trial work?",
|
||||
answer: "Start with a 14-day free trial with full access to all Business features. No credit card required. After the trial, choose the plan that fits your needs.",
|
||||
},
|
||||
{
|
||||
question: "Can I switch plans later?",
|
||||
answer: "Yes, you can upgrade or downgrade at any time. Changes take effect immediately, and we'll prorate any billing differences.",
|
||||
},
|
||||
{
|
||||
question: "What counts as a user?",
|
||||
answer: "A user is anyone with an active account in your organization. Pending invites and suspended accounts don't count toward your user limit.",
|
||||
},
|
||||
{
|
||||
question: "Do you offer discounts for startups or non-profits?",
|
||||
answer: "Yes! We offer 50% off for qualified startups and non-profit organizations. Contact our sales team to learn more.",
|
||||
},
|
||||
{
|
||||
question: "Is there a self-hosted option?",
|
||||
answer: "Yes, our Enterprise plan includes self-hosted deployment options. This is ideal for organizations with strict data residency requirements.",
|
||||
},
|
||||
{
|
||||
question: "What payment methods do you accept?",
|
||||
answer: "We accept all major credit cards, ACH transfers (US), and wire transfers for annual Enterprise contracts.",
|
||||
},
|
||||
];
|
||||
|
||||
export default function PricingPage() {
|
||||
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="text-center max-w-3xl mx-auto">
|
||||
<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">
|
||||
<CreditCard className="h-4 w-4" />
|
||||
Transparent Pricing
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-5xl font-bold tracking-tight text-foreground mb-6">
|
||||
Simple Pricing for
|
||||
<span className="text-accent block mt-2">Organizations of All Sizes</span>
|
||||
</h1>
|
||||
<p className="text-lg text-muted-foreground">
|
||||
No hidden fees. No surprise charges. Pay only for what you use, with plans that scale with your organization.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Pricing Cards */}
|
||||
<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 md:grid-cols-3 gap-8">
|
||||
{plans.map((plan) => (
|
||||
<Card
|
||||
key={plan.name}
|
||||
className={`relative ${
|
||||
plan.highlighted
|
||||
? "border-accent shadow-lg scale-105 z-10"
|
||||
: "border-border"
|
||||
}`}
|
||||
>
|
||||
{plan.badge && (
|
||||
<div className="absolute -top-3 left-1/2 -translate-x-1/2">
|
||||
<span className="px-3 py-1 rounded-full bg-accent text-accent-foreground text-sm font-medium">
|
||||
{plan.badge}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
<CardHeader className="text-center pb-2">
|
||||
<CardTitle className="text-xl font-bold text-foreground">{plan.name}</CardTitle>
|
||||
<CardDescription className="text-sm text-muted-foreground mt-1">
|
||||
{plan.description}
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="pt-4">
|
||||
<div className="text-center mb-6">
|
||||
{plan.price !== null ? (
|
||||
<div>
|
||||
<div className="flex items-baseline justify-center gap-1">
|
||||
<span className="text-4xl font-bold text-foreground">${plan.price}</span>
|
||||
<span className="text-muted-foreground">/{plan.priceNote}</span>
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mt-1">{plan.billed}</p>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<p className="text-2xl font-bold text-foreground">Custom Pricing</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">Contact us for details</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<ul className="space-y-3 mb-6">
|
||||
{plan.features.map((feature) => (
|
||||
<li key={feature} className="flex items-start gap-2">
|
||||
<CheckCircle2 className="h-5 w-5 text-accent flex-shrink-0 mt-0.5" />
|
||||
<span className="text-sm text-foreground">{feature}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
|
||||
<Link to={plan.price === null ? "#" : "/register"}>
|
||||
<Button
|
||||
className="w-full"
|
||||
variant={plan.highlighted ? "default" : "outline"}
|
||||
>
|
||||
{plan.cta}
|
||||
{plan.price !== null && <ArrowRight className="h-4 w-4 ml-2" />}
|
||||
</Button>
|
||||
</Link>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Enterprise CTA */}
|
||||
<div className="mt-16">
|
||||
<Card className="bg-muted/30">
|
||||
<CardContent className="p-8">
|
||||
<div className="grid md:grid-cols-2 gap-8 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">
|
||||
<Building2 className="h-4 w-4" />
|
||||
Enterprise Solutions
|
||||
</div>
|
||||
<h2 className="text-2xl font-bold text-foreground mb-2">
|
||||
Need a Custom Solution?
|
||||
</h2>
|
||||
<p className="text-muted-foreground mb-4">
|
||||
Our enterprise team can help with custom deployments, integrations, and volume pricing. Get a personalized quote for your organization.
|
||||
</p>
|
||||
<ul className="space-y-2">
|
||||
<li className="flex items-center gap-2 text-sm text-foreground">
|
||||
<CheckCircle2 className="h-4 w-4 text-accent" />
|
||||
Self-hosted deployment options
|
||||
</li>
|
||||
<li className="flex items-center gap-2 text-sm text-foreground">
|
||||
<CheckCircle2 className="h-4 w-4 text-accent" />
|
||||
Custom SLA and support tiers
|
||||
</li>
|
||||
<li className="flex items-center gap-2 text-sm text-foreground">
|
||||
<CheckCircle2 className="h-4 w-4 text-accent" />
|
||||
Dedicated customer success manager
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
<div className="text-center">
|
||||
<div className="h-16 w-16 rounded-full bg-primary/10 flex items-center justify-center mx-auto mb-4">
|
||||
<HelpCircle className="h-8 w-8 text-primary" />
|
||||
</div>
|
||||
<p className="text-sm text-muted-foreground mb-4">
|
||||
Talk to our team about your requirements
|
||||
</p>
|
||||
<Button variant="outline" className="gap-2">
|
||||
Contact Sales
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Feature Comparison */}
|
||||
<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">
|
||||
Compare Plans Side by Side
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground">
|
||||
See which plan is right for your organization
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Card>
|
||||
<CardContent className="p-0">
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full">
|
||||
<thead>
|
||||
<tr className="border-b">
|
||||
<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-foreground">Starter</th>
|
||||
<th className="px-6 py-4 text-center text-sm font-semibold text-foreground bg-accent/5">Business</th>
|
||||
<th className="px-6 py-4 text-center text-sm font-semibold text-foreground">Enterprise</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y">
|
||||
{[
|
||||
{ feature: "Users", starter: "Up to 50", business: "Unlimited", enterprise: "Unlimited" },
|
||||
{ feature: "Organizations", starter: "1", business: "Multiple", enterprise: "Unlimited" },
|
||||
{ feature: "OAuth Providers", starter: "Google", business: "All", enterprise: "All + SAML" },
|
||||
{ feature: "MFA Methods", starter: "TOTP", business: "TOTP + WebAuthn", enterprise: "TOTP + WebAuthn" },
|
||||
{ feature: "OIDC Clients", starter: "3", business: "Unlimited", enterprise: "Unlimited" },
|
||||
{ feature: "SSH CAs", starter: "2", business: "Unlimited", enterprise: "Unlimited" },
|
||||
{ feature: "Host Certificates", starter: "—", business: "✓", enterprise: "✓" },
|
||||
{ feature: "Audit Log Retention", starter: "7 days", business: "90 days", enterprise: "Unlimited" },
|
||||
{ feature: "Self-Hosted", starter: "—", business: "—", enterprise: "✓" },
|
||||
{ feature: "Custom Branding", starter: "—", business: "—", enterprise: "✓" },
|
||||
{ feature: "SCIM Provisioning", starter: "—", business: "—", enterprise: "✓" },
|
||||
{ feature: "SLA", starter: "—", business: "99.9%", enterprise: "Custom" },
|
||||
].map((row) => (
|
||||
<tr key={row.feature} className="hover:bg-muted/50">
|
||||
<td className="px-6 py-4 text-sm text-foreground">{row.feature}</td>
|
||||
<td className="px-6 py-4 text-sm text-center text-muted-foreground">{row.starter}</td>
|
||||
<td className="px-6 py-4 text-sm text-center text-foreground bg-accent/5 font-medium">{row.business}</td>
|
||||
<td className="px-6 py-4 text-sm text-center text-muted-foreground">{row.enterprise}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* FAQ */}
|
||||
<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">
|
||||
Frequently Asked Questions
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground">
|
||||
Everything you need to know about pricing and billing
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6 max-w-4xl mx-auto">
|
||||
{faqs.map((faq) => (
|
||||
<Card key={faq.question}>
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base font-semibold text-foreground">{faq.question}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<p className="text-sm text-muted-foreground">{faq.answer}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* CTA */}
|
||||
<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 max-w-2xl mx-auto">
|
||||
<h2 className="text-3xl font-bold text-foreground mb-4">
|
||||
Start Your Free Trial Today
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground mb-8">
|
||||
Try Secuird free for 14 days. No credit card required. Full access to all Business features.
|
||||
</p>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,455 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import {
|
||||
Terminal,
|
||||
FileKey,
|
||||
Clock,
|
||||
Users,
|
||||
Eye,
|
||||
ShieldCheck,
|
||||
ArrowRight,
|
||||
CheckCircle2,
|
||||
Server,
|
||||
Key,
|
||||
Copy,
|
||||
RefreshCw,
|
||||
Lock,
|
||||
} from "lucide-react";
|
||||
|
||||
const benefits = [
|
||||
{
|
||||
icon: Clock,
|
||||
title: "Short-Lived by Design",
|
||||
description: "Certificates expire in minutes or hours. No more managing key rotation schedules or dealing with stale keys.",
|
||||
},
|
||||
{
|
||||
icon: Eye,
|
||||
title: "Complete Audit Trail",
|
||||
description: "Every certificate issuance and SSH connection is logged. Know exactly who accessed what, when.",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Identity-Linked Access",
|
||||
description: "Certificates are tied to verified user identities. No more anonymous shared accounts.",
|
||||
},
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
title: "Instant Revocation",
|
||||
description: "Disable a user and their certificates become useless. No more hunting for keys on servers.",
|
||||
},
|
||||
];
|
||||
|
||||
const howItWorks = [
|
||||
{
|
||||
step: "01",
|
||||
title: "Register SSH Public Key",
|
||||
description: "Users register their SSH public key in Secuird. This is a one-time setup—no private keys are ever stored.",
|
||||
code: "ssh-keygen -t ed25519",
|
||||
},
|
||||
{
|
||||
step: "02",
|
||||
title: "Request a Certificate",
|
||||
description: "When users need to connect, they request a certificate. Secuird verifies their identity and issues a short-lived cert.",
|
||||
code: "ssh secuird.example.com sign",
|
||||
},
|
||||
{
|
||||
step: "03",
|
||||
title: "Connect Normally",
|
||||
description: "Use standard SSH to connect to servers. The certificate is automatically used for authentication.",
|
||||
code: "ssh user@server.example.com",
|
||||
},
|
||||
{
|
||||
step: "04",
|
||||
title: "Automatic Expiration",
|
||||
description: "The certificate expires automatically. Users request new certificates as needed—no manual key rotation.",
|
||||
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" },
|
||||
];
|
||||
|
||||
const useCases = [
|
||||
{
|
||||
title: "Engineering Teams",
|
||||
description: "Engineers get SSH access based on team membership. New team members get access automatically.",
|
||||
features: ["Department-based principals", "Self-service certificate issuance", "Full audit trail for compliance"],
|
||||
},
|
||||
{
|
||||
title: "Infrastructure Teams",
|
||||
description: "Manage SSH access to production servers with fine-grained control and complete visibility.",
|
||||
features: ["Host certificates for servers", "Bastion host support", "Production access policies"],
|
||||
},
|
||||
{
|
||||
title: "Security Teams",
|
||||
description: "Eliminate the security risks of static SSH keys while maintaining complete visibility.",
|
||||
features: ["Certificate expiration alerts", "Anomaly detection", "Compliance reporting"],
|
||||
},
|
||||
];
|
||||
|
||||
export default function SSHCertificatesPage() {
|
||||
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">
|
||||
<Terminal className="h-4 w-4" />
|
||||
SSH Certificate Authority
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-5xl font-bold tracking-tight text-foreground mb-6">
|
||||
Eliminate SSH Key Chaos
|
||||
<span className="text-accent block mt-2">With Short-Lived Certificates</span>
|
||||
</h1>
|
||||
<p className="text-lg text-muted-foreground mb-8">
|
||||
Replace permanent SSH keys with short-lived certificates tied to verified identities. Works with standard OpenSSH—no custom clients needed.
|
||||
</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">
|
||||
<div className="bg-muted/50 px-4 py-2 border-b">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-3 w-3 rounded-full bg-destructive/60"></div>
|
||||
<div className="h-3 w-3 rounded-full bg-warning/60"></div>
|
||||
<div className="h-3 w-3 rounded-full bg-success/60"></div>
|
||||
<span className="text-xs text-muted-foreground ml-2 font-mono">Terminal</span>
|
||||
</div>
|
||||
</div>
|
||||
<CardContent className="p-0">
|
||||
<pre className="p-4 text-sm font-mono text-foreground overflow-x-auto">
|
||||
<code>
|
||||
{`# Request SSH certificate
|
||||
$ ssh user@securd.example.com sign
|
||||
|
||||
✓ Identity verified
|
||||
✓ Certificate issued
|
||||
✓ Valid for 1 hour
|
||||
|
||||
# Connect to server
|
||||
$ ssh user@prod-server-01
|
||||
Welcome to prod-server-01!
|
||||
Last login: Mon 10:32 from 192.168.1.100
|
||||
|
||||
# Certificate auto-expires
|
||||
# No key rotation needed`}
|
||||
</code>
|
||||
</pre>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</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 SSH Certificates?
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
Static SSH keys create security risks and operational headaches. Certificates solve both.
|
||||
</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">
|
||||
No custom clients required. Works with standard OpenSSH on servers and user machines.
|
||||
</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 className="mt-12 text-center">
|
||||
<p className="text-muted-foreground mb-4">
|
||||
The only requirement is OpenSSH 5.6+ on both client and server. Works on Linux, macOS, and most Unix systems.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Static Keys vs Certificates */}
|
||||
<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">
|
||||
Static Keys vs. Certificates
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
See why organizations are switching from static SSH keys to certificate-based authentication.
|
||||
</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">Static SSH Keys</th>
|
||||
<th className="px-6 py-4 text-center text-sm font-semibold text-accent bg-accent/5">SSH Certificates</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.static}</td>
|
||||
<td className="px-6 py-4 text-sm text-center text-accent bg-accent/5 font-medium">{row.cert}</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">
|
||||
SSH certificates work for teams of all sizes and across different use cases.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 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>
|
||||
|
||||
{/* Server Setup */}
|
||||
<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>
|
||||
<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">
|
||||
<Server className="h-4 w-4" />
|
||||
Server Configuration
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
|
||||
Simple Server Setup
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground mb-6">
|
||||
Configure your servers to trust the Secuird CA. One configuration change, and all your servers accept certificates.
|
||||
</p>
|
||||
<ul className="space-y-3 mb-8">
|
||||
{[
|
||||
"Works with standard OpenSSH",
|
||||
"No custom server software needed",
|
||||
"One-time CA key distribution",
|
||||
"Host certificates for server verification",
|
||||
].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>
|
||||
<Card className="bg-card overflow-hidden">
|
||||
<div className="bg-muted/50 px-4 py-2 border-b">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-3 w-3 rounded-full bg-destructive/60"></div>
|
||||
<div className="h-3 w-3 rounded-full bg-warning/60"></div>
|
||||
<div className="h-3 w-3 rounded-full bg-success/60"></div>
|
||||
<span className="text-xs text-muted-foreground ml-2 font-mono">/etc/ssh/sshd_config</span>
|
||||
</div>
|
||||
</div>
|
||||
<CardContent className="p-0">
|
||||
<pre className="p-4 text-sm font-mono text-foreground overflow-x-auto">
|
||||
<code>
|
||||
{`# Trust Secuird CA for user authentication
|
||||
TrustedUserCAKeys /etc/ssh/securd_user_ca.pub
|
||||
|
||||
# (Optional) Use host certificates
|
||||
HostCertificate /etc/ssh/ssh_host_ed25519_key-cert.pub
|
||||
TrustedUserCAKeys /etc/ssh/securd_host_ca.pub
|
||||
|
||||
# Restart SSH to apply changes
|
||||
$ systemctl restart sshd`}
|
||||
</code>
|
||||
</pre>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Features Deep Dive */}
|
||||
<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">
|
||||
Powerful Features
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
Everything you need to manage SSH access at scale.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||
{[
|
||||
{
|
||||
icon: Key,
|
||||
title: "Multiple CAs",
|
||||
description: "Create separate CAs for different environments—production, staging, development.",
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: "Principal Mapping",
|
||||
description: "Map users to principals based on group membership. Automatic access based on teams.",
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
title: "Custom Validity",
|
||||
description: "Set certificate validity per CA. Hours for production, days for development.",
|
||||
},
|
||||
{
|
||||
icon: Copy,
|
||||
title: "One-Time Setup",
|
||||
description: "Users register their public key once. No private keys ever touch our servers.",
|
||||
},
|
||||
{
|
||||
icon: RefreshCw,
|
||||
title: "Self-Service",
|
||||
description: "Users request and receive certificates themselves. No admin intervention needed.",
|
||||
},
|
||||
{
|
||||
icon: Lock,
|
||||
title: "Instant Revocation",
|
||||
description: "Disable a user and all their certificates become invalid immediately.",
|
||||
},
|
||||
].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 Modernize SSH Access?
|
||||
</h2>
|
||||
<p className="text-lg text-primary-foreground/80 max-w-2xl mx-auto mb-8">
|
||||
Start your free trial today. Set up your first SSH CA in minutes and see the difference certificates make.
|
||||
</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">
|
||||
Start Free Trial
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Link to="/demo">
|
||||
<Button size="lg" variant="outline" className="text-primary-foreground border-primary-foreground/30 hover:bg-primary-foreground/10">
|
||||
Watch Demo
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,482 @@
|
||||
import { Link } from "react-router-dom";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import {
|
||||
Shield,
|
||||
Lock,
|
||||
Key,
|
||||
Eye,
|
||||
ShieldCheck,
|
||||
Fingerprint,
|
||||
Server,
|
||||
Clock,
|
||||
FileKey,
|
||||
ArrowRight,
|
||||
CheckCircle2,
|
||||
} from "lucide-react";
|
||||
|
||||
const securityPrinciples = [
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Security by Design",
|
||||
description: "Every feature is built with security as the foundation. No bolted-on security— it's integral to every component.",
|
||||
},
|
||||
{
|
||||
icon: Lock,
|
||||
title: "Defense in Depth",
|
||||
description: "Multiple layers of security controls. If one layer fails, others provide protection.",
|
||||
},
|
||||
{
|
||||
icon: Eye,
|
||||
title: "Transparency & Auditability",
|
||||
description: "Complete visibility into who did what, when. Every action is logged and auditable.",
|
||||
},
|
||||
{
|
||||
icon: Key,
|
||||
title: "Principle of Least Privilege",
|
||||
description: "Users and services only have the minimum permissions needed to perform their tasks.",
|
||||
},
|
||||
];
|
||||
|
||||
const mfaCapabilities = [
|
||||
{
|
||||
icon: Fingerprint,
|
||||
title: "WebAuthn/Passkeys",
|
||||
description: "Phishing-resistant authentication using hardware security keys or platform authenticators like Touch ID, Face ID, and Windows Hello.",
|
||||
features: ["FIDO2 compliant", "Platform authenticators", "Hardware keys (YubiKey, etc.)", "Resident credentials"],
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "TOTP Authenticator Apps",
|
||||
description: "Time-based one-time passwords work with any TOTP-compatible authenticator app.",
|
||||
features: ["Google Authenticator", "Authy", "1Password", "Any TOTP app"],
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
title: "Grace Periods",
|
||||
description: "Configurable enrollment windows let users set up MFA without blocking access immediately.",
|
||||
features: ["Custom duration", "Reminder notifications", "Admin visibility", "Hard deadline enforcement"],
|
||||
},
|
||||
{
|
||||
icon: ShieldCheck,
|
||||
title: "Policy Enforcement",
|
||||
description: "Organization-wide MFA requirements with compliance tracking per user.",
|
||||
features: ["Require TOTP", "Require WebAuthn", "Require any MFA", "Compliance dashboards"],
|
||||
},
|
||||
];
|
||||
|
||||
const auditFeatures = [
|
||||
{
|
||||
title: "User Authentication",
|
||||
description: "Login attempts, MFA challenges, session creation",
|
||||
},
|
||||
{
|
||||
title: "Administrative Actions",
|
||||
description: "User management, policy changes, role assignments",
|
||||
},
|
||||
{
|
||||
title: "SSH Certificates",
|
||||
description: "Certificate issuance, revocation, and usage",
|
||||
},
|
||||
{
|
||||
title: "OIDC Flows",
|
||||
description: "Authorization requests, token issuance, consent grants",
|
||||
},
|
||||
{
|
||||
title: "Organization Events",
|
||||
description: "Member invites, department changes, group assignments",
|
||||
},
|
||||
{
|
||||
title: "Security Events",
|
||||
description: "Failed logins, suspicious activity, policy violations",
|
||||
},
|
||||
];
|
||||
|
||||
const complianceFrameworks = [
|
||||
{
|
||||
name: "SOC 2 Type II",
|
||||
description: "Security, availability, and confidentiality controls",
|
||||
},
|
||||
{
|
||||
name: "HIPAA",
|
||||
description: "Healthcare data protection requirements",
|
||||
},
|
||||
{
|
||||
name: "GDPR",
|
||||
description: "EU data protection regulation compliance",
|
||||
},
|
||||
{
|
||||
name: "PCI DSS",
|
||||
description: "Payment card industry security standards",
|
||||
},
|
||||
];
|
||||
|
||||
export default function SecurityPage() {
|
||||
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="text-center max-w-3xl mx-auto">
|
||||
<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">
|
||||
<Shield className="h-4 w-4" />
|
||||
Security First
|
||||
</div>
|
||||
<h1 className="text-4xl sm:text-5xl font-bold tracking-tight text-foreground mb-6">
|
||||
Built for Enterprise
|
||||
<span className="text-accent block mt-2">Security Requirements</span>
|
||||
</h1>
|
||||
<p className="text-lg text-muted-foreground">
|
||||
Security isn't an afterthought—it's the foundation. Every feature is designed with security, auditability, and compliance in mind.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Security Principles */}
|
||||
<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">
|
||||
Our Security Principles
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
These principles guide every decision we make about security and architecture.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{securityPrinciples.map((principle) => (
|
||||
<Card key={principle.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">
|
||||
<principle.icon className="h-6 w-6 text-primary" />
|
||||
</div>
|
||||
<h3 className="text-lg font-semibold text-foreground mb-2">{principle.title}</h3>
|
||||
<p className="text-sm text-muted-foreground">{principle.description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* MFA Deep Dive */}
|
||||
<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">
|
||||
<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">
|
||||
<Lock className="h-4 w-4" />
|
||||
Multi-Factor Authentication
|
||||
</div>
|
||||
<h2 className="text-3xl font-bold text-foreground mb-4">
|
||||
Modern MFA That Works for Everyone
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
From phishing-resistant hardware keys to simple authenticator apps, we support the MFA methods your team needs.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
{mfaCapabilities.map((capability) => (
|
||||
<Card key={capability.title} className="bg-card">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="h-12 w-12 rounded-lg bg-accent/10 flex items-center justify-center flex-shrink-0">
|
||||
<capability.icon className="h-6 w-6 text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="text-lg font-semibold text-foreground mb-2">{capability.title}</h3>
|
||||
<p className="text-sm text-muted-foreground mb-3">{capability.description}</p>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{capability.features.map((feature) => (
|
||||
<span key={feature} className="px-2 py-1 bg-muted rounded text-xs text-muted-foreground">
|
||||
{feature}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* SSH Certificate Security */}
|
||||
<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>
|
||||
<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">
|
||||
<FileKey className="h-4 w-4" />
|
||||
SSH Certificate Security
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
|
||||
SSH Keys Are a Security Nightmare
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground mb-6">
|
||||
Static SSH keys never expire. They get shared, copied, and forgotten. When employees leave, their keys often remain on servers.
|
||||
</p>
|
||||
<p className="text-muted-foreground mb-8">
|
||||
SSH certificates solve this by being short-lived and tied to verified identities. Every certificate is traceable from issuance to usage.
|
||||
</p>
|
||||
<ul className="space-y-3">
|
||||
{[
|
||||
"Certificates expire automatically—no key rotation needed",
|
||||
"Each certificate is linked to a verified user identity",
|
||||
"Complete audit trail of every certificate used",
|
||||
"Revoke access instantly by disabling the user",
|
||||
].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="mt-8">
|
||||
<Link to="/ssh-certificates">
|
||||
<Button className="gap-2">
|
||||
Learn About SSH Certificates
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<Card className="bg-destructive/5 border-destructive/20">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="h-10 w-10 rounded-lg bg-destructive/10 flex items-center justify-center flex-shrink-0">
|
||||
<Key className="h-5 w-5 text-destructive" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-foreground mb-1">Static SSH Keys</h4>
|
||||
<ul className="text-sm text-muted-foreground space-y-1">
|
||||
<li>• Never expire</li>
|
||||
<li>• Often shared between users</li>
|
||||
<li>• No audit trail</li>
|
||||
<li>• Hard to rotate</li>
|
||||
<li>• Survive employee departure</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="bg-accent/5 border-accent/20">
|
||||
<CardContent className="pt-6">
|
||||
<div className="flex items-start gap-4">
|
||||
<div className="h-10 w-10 rounded-lg bg-accent/10 flex items-center justify-center flex-shrink-0">
|
||||
<FileKey className="h-5 w-5 text-accent" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="font-semibold text-foreground mb-1">SSH Certificates</h4>
|
||||
<ul className="text-sm text-muted-foreground space-y-1">
|
||||
<li>• Expire in minutes/hours</li>
|
||||
<li>• Linked to verified identity</li>
|
||||
<li>• Complete audit trail</li>
|
||||
<li>• Auto-expire, no rotation</li>
|
||||
<li>• Revoked when user disabled</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Audit Logging */}
|
||||
<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">
|
||||
<Card className="bg-card overflow-hidden">
|
||||
<div className="bg-muted/50 px-4 py-2 border-b">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="h-3 w-3 rounded-full bg-destructive/60"></div>
|
||||
<div className="h-3 w-3 rounded-full bg-warning/60"></div>
|
||||
<div className="h-3 w-3 rounded-full bg-success/60"></div>
|
||||
<span className="text-xs text-muted-foreground ml-2">Audit Log</span>
|
||||
</div>
|
||||
</div>
|
||||
<CardContent className="p-0">
|
||||
<div className="divide-y text-sm font-mono">
|
||||
{[
|
||||
{ time: "14:32:01", event: "user.login.success", user: "john@example.com", ip: "192.168.1.100" },
|
||||
{ time: "14:32:45", event: "mfa.totp.verify", user: "john@example.com", ip: "192.168.1.100" },
|
||||
{ time: "14:33:12", event: "ssh.cert.issue", user: "john@example.com", cert: "cert_abc123" },
|
||||
{ time: "14:35:00", event: "ssh.connect", user: "john@example.com", host: "prod-server-01" },
|
||||
{ time: "14:45:22", event: "oidc.token.issue", user: "john@example.com", client: "internal-app" },
|
||||
].map((log, i) => (
|
||||
<div key={i} className="px-4 py-2 hover:bg-muted/30">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-muted-foreground">{log.time}</span>
|
||||
<span className="text-accent">{log.event}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-xs text-muted-foreground mt-1">
|
||||
<span>user: {log.user}</span>
|
||||
<span>ip: {log.ip}</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-primary/10 text-primary text-sm font-medium mb-4">
|
||||
<Eye className="h-4 w-4" />
|
||||
Complete Audit Trail
|
||||
</div>
|
||||
<h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
|
||||
Every Action is Logged
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground mb-6">
|
||||
From user logins to SSH certificate usage, every action is recorded with full context. Know exactly who did what, when.
|
||||
</p>
|
||||
|
||||
<div className="grid sm:grid-cols-2 gap-4">
|
||||
{auditFeatures.map((feature) => (
|
||||
<div key={feature.title} className="flex items-start gap-3">
|
||||
<CheckCircle2 className="h-5 w-5 text-accent flex-shrink-0 mt-0.5" />
|
||||
<div>
|
||||
<p className="font-medium text-foreground text-sm">{feature.title}</p>
|
||||
<p className="text-xs text-muted-foreground">{feature.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Infrastructure Security */}
|
||||
<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">
|
||||
Infrastructure Security
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
Your data is protected by industry-leading security practices.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-3 gap-6">
|
||||
{[
|
||||
{
|
||||
icon: Server,
|
||||
title: "Encrypted at Rest",
|
||||
description: "All data is encrypted using AES-256 encryption. Database backups are also encrypted.",
|
||||
},
|
||||
{
|
||||
icon: Key,
|
||||
title: "Encrypted in Transit",
|
||||
description: "TLS 1.3 for all connections. Certificate pinning for internal communications.",
|
||||
},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Secure Key Storage",
|
||||
description: "SSH CA private keys are stored in hardware security modules (HSMs) or equivalent.",
|
||||
},
|
||||
{
|
||||
icon: Lock,
|
||||
title: "Access Controls",
|
||||
description: "Principle of least privilege. Staff access is logged and time-limited.",
|
||||
},
|
||||
{
|
||||
icon: Eye,
|
||||
title: "Intrusion Detection",
|
||||
description: "Continuous monitoring for suspicious activity. Automated threat response.",
|
||||
},
|
||||
{
|
||||
icon: Clock,
|
||||
title: "Regular Audits",
|
||||
description: "Third-party security assessments and penetration testing conducted annually.",
|
||||
},
|
||||
].map((item) => (
|
||||
<Card key={item.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">
|
||||
<item.icon className="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-foreground mb-1">{item.title}</h3>
|
||||
<p className="text-sm text-muted-foreground">{item.description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* Compliance */}
|
||||
<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">
|
||||
Compliance Ready
|
||||
</h2>
|
||||
<p className="text-lg text-muted-foreground max-w-2xl mx-auto">
|
||||
Secuird helps you meet your compliance requirements with comprehensive logging and security controls.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="grid md:grid-cols-4 gap-6">
|
||||
{complianceFrameworks.map((framework) => (
|
||||
<Card key={framework.name} className="bg-card text-center">
|
||||
<CardContent className="pt-6">
|
||||
<h3 className="text-lg font-semibold text-foreground mb-2">{framework.name}</h3>
|
||||
<p className="text-sm text-muted-foreground">{framework.description}</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-12 text-center">
|
||||
<p className="text-muted-foreground mb-4">
|
||||
Need compliance documentation or have specific requirements?
|
||||
</p>
|
||||
<Button variant="outline">
|
||||
Contact Compliance Team
|
||||
</Button>
|
||||
</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">
|
||||
Security Questions?
|
||||
</h2>
|
||||
<p className="text-lg text-primary-foreground/80 max-w-2xl mx-auto mb-8">
|
||||
Our security team is available to discuss your specific requirements and help you evaluate Secuird for your organization.
|
||||
</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">
|
||||
Start Free Trial
|
||||
<ArrowRight className="h-4 w-4" />
|
||||
</Button>
|
||||
</Link>
|
||||
<Button size="lg" variant="outline" className="text-primary-foreground border-primary-foreground/30 hover:bg-primary-foreground/10">
|
||||
Contact Security Team
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
</section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user