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

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

- Add new ZeroTierPage with feature documentation and use cases
- Add ZeroTier to navigation in MarketingLayout header and footer
- Update HomePage hero headline and add ZeroTier feature section
- Add ZeroTier features section to FeaturesPage
- Add ScrollToTop component for better navigation UX
- Move ApiDevTools to AuthenticatedLayout (dev mode only)
- Add SSR tests for marketing pages
- Update SSHCertificatesPage comparison table for clarity
- Add documentation link to MarketingLayout footer

src/App.tsx

@@ -2,7 +2,8 @@ import { Toaster } from "@/components/ui/toaster";
 import { Toaster as Sonner } from "@/components/ui/sonner";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { BrowserRouter, Routes, Route, useLocation } from "react-router-dom";
+import { useEffect } from "react";
 
 // Layouts
 import PublicLayout from "@/components/layouts/PublicLayout";
@@ -15,6 +16,7 @@ import FeaturesPage from "@/pages/marketing/FeaturesPage";
 import PricingPage from "@/pages/marketing/PricingPage";
 import SecurityPage from "@/pages/marketing/SecurityPage";
 import SSHCertificatesPage from "@/pages/marketing/SSHCertificatesPage";
+import ZeroTierPage from "@/pages/marketing/ZeroTierPage";
 import DemoPage from "@/pages/marketing/DemoPage";
 
 // Public pages
@@ -59,7 +61,6 @@ import OAuthProvidersPage from "@/pages/admin/OAuthProvidersPage";
 import OrgSetupPage from "@/pages/auth/OrgSetupPage";
 
 import NotFound from "@/pages/NotFound";
-import ApiDevTools from "@/components/dev/ApiDevTools";
 
 const queryClient = new QueryClient({
   defaultOptions: {
@@ -82,12 +83,22 @@ const App = () => (
       <Toaster />
       <Sonner />
       <BrowserRouter>
+        <ScrollToTop />
         <AppRoutes />
       </BrowserRouter>
     </TooltipProvider>
   </QueryClientProvider>
 );
 
+// Scroll to top on navigation
+function ScrollToTop() {
+  const location = useLocation();
+  useEffect(() => {
+    window.scrollTo({ top: 0, left: 0, behavior: 'instant' });
+  }, [location.pathname]);
+  return null;
+}
+
 // Separate component so AuthProvider can use useNavigate
 import { AuthProvider, useAuth } from "@/contexts/AuthContext";
 import { OrgProvider } from "@/contexts/OrgContext";
@@ -148,6 +159,7 @@ function AppRoutes() {
           <Route path="/pricing" element={<PricingPage />} />
           <Route path="/security" element={<SecurityPage />} />
           <Route path="/ssh-certificates" element={<SSHCertificatesPage />} />
+          <Route path="/zerotier" element={<ZeroTierPage />} />
           <Route path="/demo" element={<DemoPage />} />
         </Route>
 
@@ -208,8 +220,6 @@ function AppRoutes() {
         <Route path="*" element={<NotFound />} />
       </Routes>
 
-      {/* Dev tools - only shown in development */}
-      <ApiDevTools />
       </OrgProvider>
     </AuthProvider>
   );

src/components/layouts/AuthenticatedLayout.tsx

@@ -2,6 +2,7 @@ import { Outlet } from "react-router-dom";
 import { SidebarProvider } from "@/components/ui/sidebar";
 import { AppSidebar } from "@/components/navigation/AppSidebar";
 import { TopBar } from "@/components/navigation/TopBar";
+import ApiDevTools from "@/components/dev/ApiDevTools";
 
 export default function AuthenticatedLayout() {
   return (
@@ -15,6 +16,7 @@ export default function AuthenticatedLayout() {
           </main>
         </div>
       </div>
+      {import.meta.env.DEV && <ApiDevTools />}
     </SidebarProvider>
   );
 }

src/components/layouts/MarketingLayout.tsx

@@ -14,11 +14,12 @@ X
 import { useState } from "react";
 
 const navigation = [
-{ name: "Features", href: "/features" },
+  { name: "Features", href: "/features" },
-{ name: "Security", href: "/security" },
+  { name: "Security", href: "/security" },
-{ name: "SSH Certificates", href: "/ssh-certificates" },
+  { name: "SSH Certificates", href: "/ssh-certificates" },
-{ name: "Pricing", href: "/pricing" },
+  { name: "ZeroTier", href: "/zerotier" },
-{ name: "Demo", href: "/demo" },
+  { name: "Pricing", href: "/pricing" },
+  { name: "Demo", href: "/demo" },
 ];
 
 export default function MarketingLayout() {
@@ -143,6 +144,7 @@ return (
             <li><Link to="/features" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Features</Link></li>
             <li><Link to="/security" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Security</Link></li>
             <li><Link to="/ssh-certificates" className="text-sm text-muted-foreground hover:text-foreground transition-colors">SSH Certificates</Link></li>
+            <li><Link to="/zerotier" className="text-sm text-muted-foreground hover:text-foreground transition-colors">ZeroTier</Link></li>
             <li><Link to="/pricing" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Pricing</Link></li>
           </ul>
         </div>
@@ -152,7 +154,7 @@ return (
           <h3 className="text-sm font-semibold text-foreground mb-3">Resources</h3>
           <ul className="space-y-2">
             <li><Link to="/demo" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Demo</Link></li>
-            <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Documentation</a></li>
+            <li><a href="https://docs.secuird.tech/" target="_blank" rel="noopener noreferrer" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Documentation</a></li>
             <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">API Reference</a></li>
             <li><a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Status</a></li>
           </ul>

src/pages/marketing/FeaturesPage.tsx

@@ -2,179 +2,214 @@ import { Link } from "react-router-dom";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import {
-Shield,
+  Shield,
-Key,
+  Key,
-Users,
+  Users,
-Lock,
+  Lock,
-Terminal,
+  Terminal,
-Building2,
+  Building2,
-Globe,
+  Globe,
-ShieldCheck,
+  ShieldCheck,
-ArrowRight,
+  ArrowRight,
-CheckCircle2,
+  CheckCircle2,
-Fingerprint,
+  Fingerprint,
-ArrowRightLeft,
+  ArrowRightLeft,
-Eye,
+  Eye,
-Settings,
+  Settings,
-UserCheck,
+  UserCheck,
-Clock,
+  Clock,
-Server,
+  Server,
-UserPlus,
+  UserPlus,
-FileKey,
+  FileKey,
-Activity,
+  Activity,
-Layers,
+  Layers,
-ShieldAlert,
+  ShieldAlert,
-Network,
+  Network,
-ScanLine,
+  ScanLine,
-LogIn,
+  LogIn,
-AppWindow,
+  AppWindow,
+  Monitor,
+  Zap,
 } from "lucide-react";
 
 const authenticationFeatures = [
 {
-icon: Building2,
+  icon: Building2,
-title: "Microsoft 365 SSO",
+  title: "Microsoft 365 SSO",
-description: "Connect your Microsoft Entra ID (Azure AD) directory. Users authenticate with their corporate credentials instantly.",
+  description: "Connect your Microsoft Entra ID (Azure AD) directory. Users authenticate with their corporate credentials instantly.",
 },
 {
-icon: Globe,
+  icon: Globe,
-title: "Google Workspace SSO",
+  title: "Google Workspace SSO",
-description: "Seamless integration with Google Workspace. Enable single sign-on for all your internal applications.",
+  description: "Seamless integration with Google Workspace. Enable single sign-on for all your internal applications.",
 },
 {
-icon: Key,
+  icon: Key,
-title: "GitHub Authentication",
+  title: "GitHub Authentication",
-description: "Allow developers to authenticate using their GitHub accounts. Perfect for engineering teams.",
+  description: "Allow developers to authenticate using their GitHub accounts. Perfect for engineering teams.",
 },
 {
-icon: Lock,
+  icon: Lock,
-title: "Traditional Username/Password",
+  title: "Traditional Username/Password",
-description: "Full support for traditional authentication with email verification and secure password policies.",
+  description: "Full support for traditional authentication with email verification and secure password policies.",
 },
 ];
 
 const mfaFeatures = [
 {
-icon: Fingerprint,
+  icon: Fingerprint,
-title: "WebAuthn/Passkeys",
+  title: "WebAuthn/Passkeys",
-description: "Hardware security keys and platform authenticators (Face ID, Touch ID, Windows Hello). Phishing-resistant authentication.",
+  description: "Hardware security keys and platform authenticators (Face ID, Touch ID, Windows Hello). Phishing-resistant authentication.",
 },
 {
-icon: Shield,
+  icon: Shield,
-title: "TOTP Authenticator Apps",
+  title: "TOTP Authenticator Apps",
-description: "Support for Google Authenticator, Authy, 1Password, and any TOTP-compatible authenticator app.",
+  description: "Support for Google Authenticator, Authy, 1Password, and any TOTP-compatible authenticator app.",
 },
 {
-icon: Clock,
+  icon: Clock,
-title: "Grace Periods",
+  title: "Grace Periods",
-description: "Configure grace periods for MFA enrollment. Give users time to set up their authenticators without blocking access.",
+  description: "Configure grace periods for MFA enrollment. Give users time to set up their authenticators without blocking access.",
 },
 {
-icon: ShieldAlert,
+  icon: ShieldAlert,
-title: "Policy Enforcement",
+  title: "Policy Enforcement",
-description: "Organization-wide MFA requirements. Require specific methods (TOTP only, Passkey only, or both).",
+  description: "Organization-wide MFA requirements. Require specific methods (TOTP only, Passkey only, or both).",
 },
 ];
 
 const oidcFeatures = [
 {
-icon: ArrowRightLeft,
+  icon: ArrowRightLeft,
-title: "OIDC Provider",
+  title: "OIDC Provider",
-description: "Secuird acts as a standards-compliant OpenID Connect provider. Connect any OIDC-compatible application.",
+  description: "Secuird acts as a standards-compliant OpenID Connect provider. Connect any OIDC-compatible application.",
 },
 {
-icon: AppWindow,
+  icon: AppWindow,
-title: "Multiple Applications",
+  title: "Multiple Applications",
-description: "Register unlimited client applications. Each gets unique credentials and configurable redirect URIs.",
+  description: "Register unlimited client applications. Each gets unique credentials and configurable redirect URIs.",
 },
 {
-icon: UserCheck,
+  icon: UserCheck,
-title: "Consent Management",
+  title: "Consent Management",
-description: "Users see and approve what information is shared. Transparent data access with user control.",
+  description: "Users see and approve what information is shared. Transparent data access with user control.",
 },
 {
-icon: Network,
+  icon: Network,
-title: "Scopes & Claims",
+  title: "Scopes & Claims",
-description: "Configure custom scopes and claims. Pass user roles, groups, and custom attributes to your applications.",
+  description: "Configure custom scopes and claims. Pass user roles, groups, and custom attributes to your applications.",
 },
 ];
 
 const sshFeatures = [
 {
-icon: Terminal,
+  icon: Terminal,
-title: "Native SSH Support",
+  title: "Native SSH Support",
-description: "Use standard OpenSSH client. No custom agents or modified binaries required. Works everywhere SSH works.",
+  description: "Use standard OpenSSH client. No custom agents or modified binaries required. Works everywhere SSH works.",
 },
 {
-icon: FileKey,
+  icon: FileKey,
-title: "Short-Lived Certificates",
+  title: "Short-Lived Certificates",
-description: "Certificates expire in minutes or hours. Eliminate long-lived SSH keys that persist after employees leave.",
+  description: "Certificates expire in minutes or hours. Eliminate long-lived SSH keys that persist after employees leave.",
 },
 {
-icon: Eye,
+  icon: Eye,
-title: "Complete Audit Trail",
+  title: "Complete Audit Trail",
-description: "Every certificate issuance and SSH connection is logged. Full chain of custody from creation to usage.",
+  description: "Every certificate issuance and SSH connection is logged. Full chain of custody from creation to usage.",
 },
 {
-icon: Users,
+  icon: Users,
-title: "Group-Based Access",
+  title: "Group-Based Access",
-description: "Configure principals and policies per department or team. Automatic group membership from identity provider.",
+  description: "Configure principals and policies per department or team. Automatic group membership from identity provider.",
 },
 {
-icon: Server,
+  icon: Server,
-title: "Host Certificates",
+  title: "Host Certificates",
-description: "Issue certificates for servers too. Verify host identity without TOFU warnings or known_hosts management.",
+  description: "Issue certificates for servers too. Verify host identity without TOFU warnings or known_hosts management.",
 },
 {
-icon: Activity,
+  icon: Activity,
-title: "Real-Time Monitoring",
+  title: "Real-Time Monitoring",
-description: "Monitor certificate usage in real-time. Detect anomalies and suspicious access patterns.",
+  description: "Monitor certificate usage in real-time. Detect anomalies and suspicious access patterns.",
 },
 ];
 
+const zerotierFeatures = [
+  {
+    icon: Monitor,
+    title: "Device Registration",
+    description: "Register ZeroTier nodes by Node ID. No shared secrets — users own their devices.",
+  },
+  {
+    icon: Users,
+    title: "Approval Workflows",
+    description: "Manager approval required before network access. Durable approvals survive across days.",
+  },
+  {
+    icon: Clock,
+    title: "Activation Sessions",
+    description: "Time-bounded access sessions. Re-authenticate to activate for a fixed period like an 8-hour workday.",
+  },
+  {
+    icon: Zap,
+    title: "Kill Switch",
+    description: "Instantly revoke all active memberships for a user across all networks. Lost laptop? Immediate response.",
+  },
+  {
+    icon: ShieldCheck,
+    title: "Complete Audit Trail",
+    description: "Every network access event logged. Know who accessed what, when, and from which device.",
+  },
+  {
+    icon: Network,
+    title: "Multi-Network Support",
+    description: "Manage production, staging, and lab networks separately with environment-based policies.",
+  },
+];
+
 const organizationFeatures = [
 {
-icon: Users,
+  icon: Users,
-title: "Multi-Tenant Architecture",
+  title: "Multi-Tenant Architecture",
-description: "Separate organizations with complete isolation. Each org has its own members, policies, and resources.",
+  description: "Separate organizations with complete isolation. Each org has its own members, policies, and resources.",
 },
 {
-icon: UserPlus,
+  icon: UserPlus,
-title: "Invite System",
+  title: "Invite System",
-description: "Invite users by email with role assignments. Automatic onboarding with pre-configured group memberships.",
+  description: "Invite users by email with role assignments. Automatic onboarding with pre-configured group memberships.",
 },
 {
-icon: Layers,
+  icon: Layers,
-title: "Department Management",
+  title: "Department Management",
-description: "Organize users into departments. Apply policies and SSH certificate settings per department.",
+  description: "Organize users into departments. Apply policies and SSH certificate settings per department.",
 },
 {
-icon: ScanLine,
+  icon: ScanLine,
-title: "Registration Tracking",
+  title: "Registration Tracking",
-description: "Track user registration sources. UTM codes, referral links, and marketing campaigns are captured automatically.",
+  description: "Track user registration sources. UTM codes, referral links, and marketing campaigns are captured automatically.",
 },
 ];
 
 const complianceFeatures = [
 {
-icon: Eye,
+  icon: Eye,
-title: "Audit Logging",
+  title: "Audit Logging",
-description: "Every action is logged with user, timestamp, IP address, and details. Export logs for SIEM integration.",
+  description: "Every action is logged with user, timestamp, IP address, and details. Export logs for SIEM integration.",
 },
 {
-icon: Settings,
+  icon: Settings,
-title: "Security Policies",
+  title: "Security Policies",
-description: "Define organization-wide security policies. MFA requirements, password rules, and session settings.",
+  description: "Define organization-wide security policies. MFA requirements, password rules, and session settings.",
 },
 {
-icon: ShieldCheck,
+  icon: ShieldCheck,
-title: "Compliance Reports",
+  title: "Compliance Reports",
-description: "Generate compliance reports for SOC 2, HIPAA, and other frameworks. Demonstrate security controls.",
+  description: "Generate compliance reports for SOC 2, HIPAA, and other frameworks. Demonstrate security controls.",
 },
 {
-icon: Activity,
+  icon: Activity,
-title: "Activity Monitoring",
+  title: "Activity Monitoring",
-description: "Real-time visibility into user activity. Login patterns, certificate usage, and security events.",
+  description: "Real-time visibility into user activity. Login patterns, certificate usage, and security events.",
 },
 ];
 
@@ -393,8 +428,84 @@ return (
       </div>
     </section>
 
+    {/* ZeroTier Network Governance */}
+    <section id="zerotier" className="py-16 lg:py-24">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <div className="grid lg:grid-cols-2 gap-12 items-center">
+          <div className="order-2 lg:order-1">
+            {/* Screenshot placeholder - replace with actual screenshot */}
+            <Card className="bg-card shadow-xl border-2 border-dashed border-muted-foreground/20">
+              <CardContent className="p-8 text-center">
+                <div className="flex flex-col items-center justify-center py-12 space-y-4">
+                  <Network className="h-16 w-16 text-muted-foreground/40" />
+                  <div className="space-y-2">
+                    <p className="text-sm font-medium text-muted-foreground">ZeroTier Network Management</p>
+                    <p className="text-xs text-muted-foreground/60">Screenshot placeholder — replace with:</p>
+                    <ul className="text-xs text-muted-foreground/60 list-disc list-inside text-left">
+                      <li>Networks list with environment tags</li>
+                      <li>Member status and activation state</li>
+                      <li>Pending requests and approvals</li>
+                    </ul>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          <div className="order-1 lg:order-2">
+            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-4">
+              <Network className="h-4 w-4" />
+              ZeroTier Network Governance
+            </div>
+            <h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
+              Govern ZeroTier Access<br />
+              <span className="text-accent block mt-2">With Your Identity Platform</span>
+            </h2>
+            <p className="text-lg text-muted-foreground mb-6">
+              Add approval workflows, time-bounded activation sessions, and complete audit trails to your
+              ZeroTier networks. Stop using raw ZeroTier administration and give managers the controls they need.
+            </p>
+            <ul className="space-y-3 mb-8">
+              {[
+                "Devices registered by ZeroTier Node ID — no shared secrets",
+                "Manager approval separates authorization from activation",
+                "Activation sessions last hours, not days — automatic expiration",
+                "Kill switch for lost devices or immediate offboarding",
+                "Immutable audit trail for every network access event",
+              ].map((item, index) => (
+                <li key={index} className="flex items-start gap-3">
+                  <CheckCircle2 className="h-5 w-5 text-accent flex-shrink-0 mt-0.5" />
+                  <span className="text-foreground">{item}</span>
+                </li>
+              ))}
+            </ul>
+            <Link to="/zerotier">
+              <Button className="gap-2">
+                Learn About Network Governance
+                <ArrowRight className="h-4 w-4" />
+              </Button>
+            </Link>
+          </div>
+        </div>
+
+        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-12">
+          {zerotierFeatures.map((feature) => (
+            <Card key={feature.title} className="bg-card">
+              <CardContent className="pt-6">
+                <div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center mb-3">
+                  <feature.icon className="h-5 w-5 text-primary" />
+                </div>
+                <h3 className="text-base font-semibold text-foreground mb-1">{feature.title}</h3>
+                <p className="text-sm text-muted-foreground">{feature.description}</p>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </section>
+
     {/* Organization Management */}
-    <section className="py-16 lg:py-24">
+    <section className="py-16 lg:py-24 bg-muted/30">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div className="grid lg:grid-cols-2 gap-12 items-center">
           <div className="order-2 lg:order-1">
@@ -446,7 +557,7 @@ return (
     </section>
 
     {/* Compliance & Audit */}
-    <section className="py-16 lg:py-24 bg-muted/30">
+    <section className="py-16 lg:py-24">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div className="grid lg:grid-cols-2 gap-12 items-center">
           <div>

src/pages/marketing/HomePage.tsx

@@ -2,82 +2,90 @@ import { Link } from "react-router-dom";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import {
-Shield,
+  Shield,
-Key,
+  Key,
-Users,
+  Users,
-Lock,
+  Lock,
-Terminal,
+  Terminal,
-Building2,
+  Building2,
-ShieldCheck,
+  ShieldCheck,
-ArrowRight,
+  ArrowRight,
-CheckCircle2,
+  CheckCircle2,
-Globe,
+  Globe,
-Fingerprint,
+  Fingerprint,
-Clock,
+  Clock,
-ArrowRightLeft,
+  ArrowRightLeft,
-Eye,
+  Eye,
-Settings,
+  Settings,
-UserCheck
+  UserCheck,
+  Network
 } from "lucide-react";
 
 const features = [
-{
+  {
-icon: Shield,
+    icon: Shield,
-title: "Enterprise SSO Without Complexity",
+    title: "Enterprise SSO Without Complexity",
-description:
+    description:
       "Enable single sign-on with Microsoft 365, Google Workspace, and GitHub. No complex federation setups—just connect and go.",
-},
+  },
-{
+  {
-icon: Key,
+    icon: Key,
-title: "SSH Certificate Authority",
+    title: "SSH Certificate Authority",
-description:
+    description:
       "Issue short-lived SSH certificates tied to user identities. Eliminate shared SSH keys and achieve complete auditability.",
-},
+  },
-{
+  {
-icon: Lock,
+    icon: Lock,
-title: "Multi-Factor Authentication",
+    title: "Multi-Factor Authentication",
-description:
+    description:
       "Enforce MFA policies across your organization with TOTP and WebAuthn/Passkey support. Compliance made simple.",
-},
+  },
-{
+  {
-icon: ArrowRightLeft,
+    icon: ArrowRightLeft,
-title: "OIDC Provider Built-In",
+    title: "OIDC Provider Built-In",
-description:
+    description:
       "Secuird acts as an OIDC identity provider for your internal applications. One identity, seamless access everywhere.",
-},
+  },
+  {
+    icon: Network,
+    title: "ZeroTier Network Governance",
+    description:
+      "Control access to private ZeroTier networks with approval workflows, time-bounded activation sessions, and instant kill switches.",
+  },
 ];
 
 const sshFeatures = [
-{
+  {
-icon: Terminal,
+    icon: Terminal,
-title: "Native SSH Integration",
+    title: "Native SSH Integration",
-description: "Use standard SSH clients—no custom agents or modified binaries required. Works with OpenSSH out of the box.",
+    description: "Use standard SSH clients—no custom agents or modified binaries required. Works with OpenSSH out of the box.",
-},
+  },
-{
+  {
-icon: Clock,
+    icon: Clock,
-title: "Short-Lived Certificates",
+    title: "Short-Lived Certificates",
-description: "Certificates expire automatically. Reduce blast radius and eliminate the headache of key rotation.",
+    description: "Certificates expire automatically. Reduce blast radius and eliminate the headache of key rotation.",
-},
+  },
-{
+  {
-icon: Eye,
+    icon: Eye,
-title: "Complete Audit Trail",
+    title: "Complete Audit Trail",
-description: "Every certificate issuance and SSH connection is logged. Know exactly who accessed what, when.",
+    description: "Every certificate issuance and SSH connection is logged. Know exactly who accessed what, when.",
-},
+  },
-{
+  {
-icon: UserCheck,
+    icon: UserCheck,
-title: "Identity-Linked Access",
+    title: "Identity-Linked Access",
-description: "SSH access is tied to verified corporate identities. No more anonymous shared accounts.",
+    description: "SSH access is tied to verified corporate identities. No more anonymous shared accounts.",
-},
+  },
 ];
 
 const socialProviders = [
-{ name: "Microsoft 365", icon: Building2 },
+  { name: "Microsoft 365", icon: Building2 },
-{ name: "Google Workspace", icon: Globe },
+  { name: "Google Workspace", icon: Globe },
-{ name: "GitHub", icon: Key },
+  { name: "GitHub", icon: Key },
+  { name: "ZeroTier", icon: Network },
 ];
 
 export default function HomePage() {
-return (
+  return (
     <>
       {/* Hero Section */}
       <section className="relative overflow-hidden bg-card">
@@ -91,14 +99,14 @@ return (
 
             {/* Headline */}
             <h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight text-foreground mb-6">
-            Enterprise Authentication,
+              Every Identity. One Platform.
-            <span className="text-primary block mt-2">Without the Enterprise Complexity</span>
+              <span className="text-primary block mt-2">Complete Access Control.</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.
+              Secuird unifies Google, Microsoft, GitHub, and traditional authentication with MFA enforcement,
-            Your team gets seamless access. You get complete control and auditability.
+              SSH certificates, and ZeroTier network governance — all in one platform.
             </p>
 
             {/* CTA Buttons */}
@@ -225,6 +233,71 @@ return (
         </div>
       </section>
 
+      {/* ZeroTier Network Access Section */}
+      <section className="py-24">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <div>
+              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-primary/10 text-primary text-sm font-medium mb-4">
+                <Network className="h-4 w-4" />
+                ZeroTier Network Governance
+              </div>
+              <h2 className="text-3xl sm:text-4xl font-bold text-foreground mb-4">
+                Govern Your ZeroTier Networks<br />
+                <span className="text-primary">With Your Identity Platform</span>
+              </h2>
+              <p className="text-lg text-muted-foreground mb-6">
+                Stop managing ZeroTier access through raw administration interfaces. Secuird adds
+                approval workflows, time-bounded activation sessions, and complete audit trails
+                to your ZeroTier networks.
+              </p>
+
+              <ul className="space-y-3 mb-8">
+                {[
+                  "Register devices by ZeroTier Node ID — no shared secrets",
+                  "Manager approval before any network access is granted",
+                  "Time-bounded activation sessions (e.g., 8-hour workday)",
+                  "Instant kill switch to revoke all active memberships",
+                  "Full audit trail of who accessed what network when",
+                ].map((item) => (
+                  <li key={item} className="flex items-start gap-3">
+                    <CheckCircle2 className="h-5 w-5 text-accent flex-shrink-0 mt-0.5" />
+                    <span className="text-foreground">{item}</span>
+                  </li>
+                ))}
+              </ul>
+
+              <Link to="/zerotier">
+                <Button className="gap-2">
+                  Learn About Network Governance
+                  <ArrowRight className="h-4 w-4" />
+                </Button>
+              </Link>
+            </div>
+
+            <div className="relative">
+              {/* Screenshot placeholder - replace with actual screenshot */}
+              <Card className="bg-card shadow-xl border-2 border-dashed border-muted-foreground/20">
+                <CardContent className="p-8 text-center">
+                  <div className="flex flex-col items-center justify-center py-12 space-y-4">
+                    <Network className="h-16 w-16 text-muted-foreground/40" />
+                    <div className="space-y-2">
+                      <p className="text-sm font-medium text-muted-foreground">ZeroTier Networks Dashboard</p>
+                      <p className="text-xs text-muted-foreground/60">Screenshot placeholder — replace with:</p>
+                      <ul className="text-xs text-muted-foreground/60 list-disc list-inside">
+                        <li>Networks list view</li>
+                        <li>Device activation status</li>
+                        <li>Member management panel</li>
+                      </ul>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </section>
+
       {/* How It Works */}
       <section className="py-24 bg-muted/30">
         <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
@@ -436,5 +509,5 @@ return (
         </div>
       </section>
     </>
-);
+  );
 }

src/pages/marketing/SSHCertificatesPage.tsx

@@ -68,14 +68,14 @@ code: "# Certificate auto-expires",
 ];
 
 const comparisonFeatures = [
-{ feature: "Lifetime", static: "Permanent", cert: "Minutes to hours" },
+  { feature: "Key Lifetime", static: "Permanent — keys never expire", cert: "Minutes to hours — auto-expiration" },
-{ feature: "Rotation", static: "Manual, error-prone", cert: "Automatic" },
+  { feature: "Key Rotation", static: "Manual process, error-prone", cert: "Automatic with each certificate" },
-{ feature: "Auditability", static: "None", cert: "Full chain of custody" },
+  { feature: "Audit Trail", static: "No visibility into usage", cert: "Full chain of custody logged" },
-{ feature: "Revocation", static: "Distribute to all servers", cert: "Disable user" },
+  { feature: "Revocation", static: "Must reach all servers manually", cert: "Disable user — instant globally" },
-{ feature: "Access Control", static: "Manual key distribution", cert: "Group-based policies" },
+  { feature: "Access Control", static: "Manual key distribution to servers", cert: "Group-based policies, self-service" },
-{ feature: "Identity Link", static: "Anonymous", cert: "Verified identity" },
+  { feature: "Identity Link", static: "Anonymous — no user verification", cert: "Tied to verified corporate identity" },
-{ feature: "Onboarding", static: "Copy keys manually", cert: "Self-service" },
+  { feature: "Onboarding", static: "Admin copies keys to every server", cert: "User registers key once, self-service" },
-{ feature: "Offboarding", static: "Hunt and remove keys", cert: "Instant revocation" },
+  { feature: "Offboarding", static: "Hunt and remove keys from servers", cert: "Disable user — all certs invalidated" },
 ];
 
 const useCases = [

src/pages/marketing/ZeroTierPage.tsx

@@ -0,0 +1,466 @@
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent } from "@/components/ui/card";
+import {
+  Network,
+  Monitor,
+  Users,
+  Clock,
+  Zap,
+  ShieldCheck,
+  ArrowRight,
+  CheckCircle2,
+  ShieldAlert,
+  Globe,
+  Lock,
+  Key,
+} from "lucide-react";
+
+const benefits = [
+  {
+    icon: Monitor,
+    title: "Node ID Registration",
+    description: "Register ZeroTier nodes by their unique Node ID. No shared secrets — users own their devices, not the network.",
+  },
+  {
+    icon: Users,
+    title: "Approval Workflows",
+    description: "Manager approval required before network access. Durable approvals survive across days while maintaining security.",
+  },
+  {
+    icon: Clock,
+    title: "Time-Bounded Sessions",
+    description: "Activation sessions last hours, not days. Re-authenticate to activate for a fixed period like an 8-hour workday.",
+  },
+  {
+    icon: Zap,
+    title: "Instant Kill Switch",
+    description: "Revoke all active memberships for a user across all networks. Lost laptop? Immediate response.",
+  },
+];
+
+const howItWorks = [
+  {
+    step: "01",
+    title: "Register ZeroTier Node",
+    description: "Users register their ZeroTier Node ID in Secuird. This is a one-time setup — no shared secrets required.",
+    code: "zerotier-cli info",
+  },
+  {
+    step: "02",
+    title: "Request Network Access",
+    description: "When users need access to a ZeroTier network, they request access through Secuird.",
+    code: "Request via Secuird dashboard",
+  },
+  {
+    step: "03",
+    title: "Manager Approval",
+    description: "A manager reviews and approves the request. Approval is durable — it persists until explicitly revoked.",
+    code: "Approved in Secuird portal",
+  },
+  {
+    step: "04",
+    title: "Activate for a Session",
+    description: "User activates their access for a time-bounded session. When the session expires, they re-authenticate.",
+    code: "Session expires automatically",
+  },
+];
+
+const comparisonFeatures = [
+  {
+    feature: "Access Control",
+    traditional: "Shared secrets or public lists",
+    secuird: "Identity-based, approval workflows",
+  },
+  {
+    feature: "Session Duration",
+    traditional: "Permanent until manually removed",
+    secuird: "Hours — automatic expiration",
+  },
+  {
+    feature: "Revocation",
+    traditional: "Remove from every network manually",
+    secuird: "Disable user — instant global revoke",
+  },
+  {
+    feature: "Audit Trail",
+    traditional: "None",
+    secuird: "Complete log of all access events",
+  },
+  {
+    feature: "Manager Control",
+    traditional: "No approval workflow",
+    secuird: "Explicit approval before access granted",
+  },
+  {
+    feature: "Contractor Access",
+    traditional: "Share credentials, revoke later",
+    secuird: "Time-limited, self-service, audited",
+  },
+];
+
+const useCases = [
+  {
+    title: "Managed Service Providers (MSPs)",
+    description: "Manage access for multiple client networks without sharing credentials. Contractors come and go — maintain control with time-bounded sessions.",
+    features: [
+      "Isolate each client's network access",
+      "Time-limited access for contractors",
+      "Complete audit trail for compliance",
+      "Instant revocation when contracts end",
+    ],
+  },
+  {
+    title: "Cloud Service Providers (CSPs)",
+    description: "Offer ZeroTier-based private networking to your customers with enterprise-grade access controls.",
+    features: [
+      "Multi-tenant network isolation",
+      "Approval workflows for sensitive networks",
+      "Usage auditing for billing",
+      "White-label options",
+    ],
+  },
+  {
+    title: "Hyperscalers",
+    description: "Provide secure ZeroTier connectivity across distributed infrastructure with identity-based access control.",
+    features: [
+      "Scale to thousands of nodes",
+      "Identity-linked access everywhere",
+      "Automated compliance reporting",
+      "API-driven provisioning",
+    ],
+  },
+  {
+    title: "Short-Term Contractors",
+    description: "Give contractors access to specific networks for specific periods. When the contract ends, access ends — automatically.",
+    features: [
+      "Hours-long activation sessions",
+      "No shared credentials",
+      "Full audit of what they accessed",
+      "One-click revocation",
+    ],
+  },
+];
+
+const features = [
+  {
+    icon: Monitor,
+    title: "Node ID Registration",
+    description: "Register ZeroTier nodes by their unique Node ID. No shared secrets — users own their devices.",
+  },
+  {
+    icon: Users,
+    title: "Approval Workflows",
+    description: "Manager approval required before network access. Durable approvals survive across days.",
+  },
+  {
+    icon: Clock,
+    title: "Activation Sessions",
+    description: "Time-bounded access sessions. Re-authenticate to activate for a fixed period like an 8-hour workday.",
+  },
+  {
+    icon: Zap,
+    title: "Kill Switch",
+    description: "Instantly revoke all active memberships for a user across all networks. Lost laptop? Immediate response.",
+  },
+  {
+    icon: ShieldCheck,
+    title: "Complete Audit Trail",
+    description: "Every network access event logged. Know who accessed what, when, and from which device.",
+  },
+  {
+    icon: Network,
+    title: "Multi-Network Support",
+    description: "Manage production, staging, and lab networks separately with environment-based policies.",
+  },
+];
+
+export default function ZeroTierPage() {
+  return (
+    <>
+      {/* Hero */}
+      <section className="py-16 lg:py-24 bg-gradient-to-b from-background to-muted/30">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="grid lg:grid-cols-2 gap-12 items-center">
+            <div>
+              <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-accent/10 text-accent text-sm font-medium mb-6">
+                <Network className="h-4 w-4" />
+                ZeroTier Network Governance
+              </div>
+              <h1 className="text-4xl sm:text-5xl font-bold tracking-tight text-foreground mb-6">
+                Identity-Based Access Control
+                <span className="text-accent block mt-2">For ZeroTier Networks</span>
+              </h1>
+              <p className="text-lg text-muted-foreground mb-8">
+                Stop managing ZeroTier access through raw administration interfaces. Secuird adds
+                approval workflows, time-bounded activation sessions, and complete audit trails
+                to your ZeroTier networks — without requiring SSH certificates.
+              </p>
+              <div className="flex flex-col sm:flex-row gap-4">
+                <Link to="/register">
+                  <Button size="lg" className="gap-2">
+                    Start Free Trial
+                    <ArrowRight className="h-4 w-4" />
+                  </Button>
+                </Link>
+                <Link to="/demo">
+                  <Button variant="outline" size="lg">
+                    Watch Demo
+                  </Button>
+                </Link>
+              </div>
+            </div>
+
+            <div className="relative">
+              <Card className="bg-card shadow-xl">
+                <CardContent className="p-8">
+                  <div className="space-y-4">
+                    <div className="flex items-center gap-3">
+                      <div className="h-10 w-10 rounded-lg bg-accent/10 flex items-center justify-center">
+                        <Network className="h-5 w-5 text-accent" />
+                      </div>
+                      <div>
+                        <p className="text-sm font-medium text-foreground">Production Network</p>
+                        <p className="text-xs text-muted-foreground">zt1abc...def</p>
+                      </div>
+                      <span className="ml-auto px-2 py-1 bg-success/10 text-success text-xs rounded-full">Active</span>
+                    </div>
+                    <div className="border-t pt-4">
+                      <p className="text-sm text-muted-foreground mb-2">Pending Requests</p>
+                      <div className="space-y-2">
+                        <div className="flex items-center justify-between text-sm">
+                          <span>jane@contractor.io</span>
+                          <span className="text-xs text-muted-foreground">2 hours ago</span>
+                        </div>
+                        <div className="flex items-center justify-between text-sm">
+                          <span>build-server-03</span>
+                          <span className="text-xs text-muted-foreground">5 hours ago</span>
+                        </div>
+                      </div>
+                    </div>
+                    <div className="border-t pt-4">
+                      <p className="text-sm text-muted-foreground mb-2">Active Sessions</p>
+                      <div className="space-y-2">
+                        <div className="flex items-center justify-between text-sm">
+                          <span>john@company.com</span>
+                          <span className="text-xs text-accent">Expires in 4h 23m</span>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Not Tied to SSH */}
+      <section className="py-12 bg-muted/30">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="bg-accent/5 border border-accent/20 rounded-lg p-6">
+            <div className="flex items-start gap-4">
+              <ShieldAlert className="h-6 w-6 text-accent flex-shrink-0 mt-1" />
+              <div>
+                <h3 className="font-semibold text-foreground mb-1">Independent of SSH Certificates</h3>
+                <p className="text-sm text-muted-foreground">
+                  ZeroTier Network Governance works completely independently of SSH Certificate Authority.
+                  Use it on its own to control ZeroTier network access, or combine it with SSH certificates
+                  for comprehensive infrastructure access control. Two powerful features, one unified platform.
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      {/* Benefits */}
+      <section className="py-16 lg:py-24">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl font-bold text-foreground mb-4">
+              Why ZeroTier Governance?
+            </h2>
+            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+              Traditional ZeroTier management relies on shared secrets and manual administration.
+              Secuird brings identity-based access control to ZeroTier.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {benefits.map((benefit) => (
+              <Card key={benefit.title} className="bg-card">
+                <CardContent className="pt-6">
+                  <div className="h-12 w-12 rounded-lg bg-accent/10 flex items-center justify-center mb-4">
+                    <benefit.icon className="h-6 w-6 text-accent" />
+                  </div>
+                  <h3 className="text-lg font-semibold text-foreground mb-2">{benefit.title}</h3>
+                  <p className="text-sm text-muted-foreground">{benefit.description}</p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* How It Works */}
+      <section className="py-16 lg:py-24 bg-muted/30">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl font-bold text-foreground mb-4">
+              How It Works
+            </h2>
+            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+              Simple four-step process from registration to time-bounded access.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
+            {howItWorks.map((step) => (
+              <Card key={step.step} className="bg-card">
+                <CardContent className="pt-6">
+                  <div className="text-5xl font-bold text-primary/10 mb-2">{step.step}</div>
+                  <h3 className="text-lg font-semibold text-foreground mb-2">{step.title}</h3>
+                  <p className="text-sm text-muted-foreground mb-4">{step.description}</p>
+                  <pre className="p-2 bg-muted rounded text-xs font-mono text-muted-foreground overflow-x-auto">
+                    <code>{step.code}</code>
+                  </pre>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Traditional vs Secuird */}
+      <section className="py-16 lg:py-24">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl font-bold text-foreground mb-4">
+              Traditional vs. Secuird-Governed ZeroTier
+            </h2>
+            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+              See the difference identity-based access control makes.
+            </p>
+          </div>
+
+          <Card className="overflow-hidden">
+            <CardContent className="p-0">
+              <div className="overflow-x-auto">
+                <table className="w-full">
+                  <thead>
+                    <tr className="border-b bg-muted/50">
+                      <th className="px-6 py-4 text-left text-sm font-semibold text-foreground">Feature</th>
+                      <th className="px-6 py-4 text-center text-sm font-semibold text-destructive">Traditional ZeroTier</th>
+                      <th className="px-6 py-4 text-center text-sm font-semibold text-accent bg-accent/5">Secuird-Governed</th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y">
+                    {comparisonFeatures.map((row) => (
+                      <tr key={row.feature} className="hover:bg-muted/30">
+                        <td className="px-6 py-4 text-sm font-medium text-foreground">{row.feature}</td>
+                        <td className="px-6 py-4 text-sm text-center text-destructive/80">{row.traditional}</td>
+                        <td className="px-6 py-4 text-sm text-center text-accent bg-accent/5 font-medium">{row.secuird}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </section>
+
+      {/* Use Cases */}
+      <section className="py-16 lg:py-24 bg-muted/30">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl font-bold text-foreground mb-4">
+              Use Cases
+            </h2>
+            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+              Perfect for organizations managing access to ZeroTier networks at scale.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 gap-6">
+            {useCases.map((useCase) => (
+              <Card key={useCase.title} className="bg-card">
+                <CardContent className="pt-6">
+                  <h3 className="text-lg font-semibold text-foreground mb-2">{useCase.title}</h3>
+                  <p className="text-sm text-muted-foreground mb-4">{useCase.description}</p>
+                  <ul className="space-y-2">
+                    {useCase.features.map((feature) => (
+                      <li key={feature} className="flex items-center gap-2 text-sm text-foreground">
+                        <CheckCircle2 className="h-4 w-4 text-accent" />
+                        {feature}
+                      </li>
+                    ))}
+                  </ul>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* Features Deep Dive */}
+      <section className="py-16 lg:py-24">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <div className="text-center mb-12">
+            <h2 className="text-3xl font-bold text-foreground mb-4">
+              Powerful Features
+            </h2>
+            <p className="text-lg text-muted-foreground max-w-2xl mx-auto">
+              Everything you need to manage ZeroTier network access at scale.
+            </p>
+          </div>
+
+          <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+            {features.map((feature) => (
+              <Card key={feature.title} className="bg-card">
+                <CardContent className="pt-6">
+                  <div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center mb-3">
+                    <feature.icon className="h-5 w-5 text-primary" />
+                  </div>
+                  <h3 className="text-base font-semibold text-foreground mb-1">{feature.title}</h3>
+                  <p className="text-sm text-muted-foreground">{feature.description}</p>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        </div>
+      </section>
+
+      {/* CTA */}
+      <section className="py-16 lg:py-24">
+        <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+          <Card className="bg-gradient-to-br from-primary to-primary/80 border-0 overflow-hidden relative">
+            <div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjAiIGhlaWdodD0iNjAiIHZpZXdCb3g9IjAgMCA2MCA2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxnIGZpbGw9IiNmZmYiIGZpbGwtb3BhY2l0eT0iMC4wNSI+PHBhdGggZD0iTTM2IDM0djItSDI0djJoMTJ6Ii8+PC9nPjwvZz48L3N2Zz4=')] opacity-50" />
+            <CardContent className="p-12 text-center relative">
+              <h2 className="text-3xl sm:text-4xl font-bold text-primary-foreground mb-4">
+                Ready to Govern Your ZeroTier Networks?
+              </h2>
+              <p className="text-lg text-primary-foreground/80 max-w-2xl mx-auto mb-8">
+                Start your free trial today. No credit card required. Set up your first network governance policy in minutes.
+              </p>
+              <div className="flex flex-col sm:flex-row items-center justify-center gap-4">
+                <Link to="/register">
+                  <Button size="lg" variant="secondary" className="gap-2 bg-white text-primary hover:bg-white/90 font-semibold">
+                    Start Free Trial
+                    <ArrowRight className="h-4 w-4" />
+                  </Button>
+                </Link>
+                <Link to="/demo">
+                  <Button size="lg" className="bg-transparent border-2 border-white text-white hover:bg-white/15 font-semibold">
+                    Watch Demo
+                  </Button>
+                </Link>
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      </section>
+    </>
+  );
+}

src/pages/marketing/__tests__/MarketingPages.test.tsx

@@ -0,0 +1,29 @@
+import React from "react";
+import { renderToString } from "react-dom/server";
+import { MemoryRouter } from "react-router-dom";
+import HomePage from "../HomePage";
+import FeaturesPage from "../FeaturesPage";
+
+// Basic SSR tests to verify marketing page content renders as expected.
+// We SSR the components to a string and assert presence of key headlines/texts.
+
+describe("Marketing Pages SSR", () => {
+  test("HomePage renders main hero headline", () => {
+    const html = renderToString(
+      React.createElement(MemoryRouter, null, React.createElement(HomePage))
+    );
+    expect(html).toContain("Every Identity. One Platform.");
+    // Ensure subheading is also present
+    expect(html).toContain("Secuird unifies Google, Microsoft, GitHub");
+  });
+
+  test("FeaturesPage renders hero section title", () => {
+    const html = renderToString(
+      React.createElement(MemoryRouter, null, React.createElement(FeaturesPage))
+    );
+    // The hero section uses a combined heading with a span; test for the main line.
+    expect(html).toContain("Everything You Need for Enterprise Identity");
+    // Also verify the badge text is present
+    expect(html).toContain("Complete Feature Set");
+  });
+});