Files
8f17ef5b-ab1c-462c-a3dc-df2…/src/app/docs/page.tsx
2026-03-04 19:05:43 +00:00

174 lines
8.6 KiB
TypeScript

"use client";
import Link from "next/link";
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import NavbarLayoutFloatingOverlay from "@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay";
import HeroBillboard from "@/components/sections/hero/HeroBillboard";
import SplitAbout from "@/components/sections/about/SplitAbout";
import FaqDouble from "@/components/sections/faq/FaqDouble";
import FooterLogoEmphasis from "@/components/sections/footer/FooterLogoEmphasis";
import { Code, BookOpen, Lock, Zap, Shield, Key, FileText } from "lucide-react";
export default function DocsPage() {
const navItems = [
{ name: "Features", id: "features" },
{ name: "Metrics", id: "metrics" },
{ name: "Pricing", id: "pricing" },
{ name: "About", id: "about" },
{ name: "Contact", id: "contact" },
];
return (
<ThemeProvider
defaultButtonVariant="hover-magnetic"
defaultTextAnimation="reveal-blur"
borderRadius="rounded"
contentWidth="mediumLarge"
sizing="mediumLargeSizeLargeTitles"
background="circleGradient"
cardStyle="subtle-shadow"
primaryButtonStyle="double-inset"
secondaryButtonStyle="solid"
headingFontWeight="light"
>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingOverlay
navItems={navItems}
brandName="Imperium"
button={{
text: "Back to Home", href: "/"
}}
buttonClassName="font-semibold tracking-wide"
/>
</div>
<div id="docs-hero" data-section="docs-hero">
<HeroBillboard
title="Technical Documentation"
description="Complete API reference, integration guides, security specifications, and implementation examples for Imperium Enterprise Dashboard. Everything you need to deploy and operate mission-critical AI infrastructure."
background={{ variant: "sparkles-gradient" }}
tag="Developer Resources"
tagIcon={Code}
tagAnimation="slide-up"
buttons={[
{ text: "API Reference", href: "#setup" },
{ text: "Security Guide", href: "#faq" },
]}
buttonAnimation="slide-up"
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUc5mGjhlxVkFiHx2Jcz4OwYr7/a-visual-representation-of-multitenant-a-1772650569376-b2593b0a.png?_wi=3"
imageAlt="Technical Documentation"
mediaAnimation="blur-reveal"
/>
</div>
<div id="setup" data-section="setup">
<SplitAbout
title="Getting Started with Imperium"
description="From initial setup to production deployment, we provide complete implementation support. Our technical team guides you through database configuration, API integration, and security hardening."
tag="Implementation"
tagIcon={BookOpen}
tagAnimation="slide-up"
bulletPoints={[
{
title: "REST API", description: "Full-featured REST API for managing agents, campaigns, clients, and financial data. OpenAPI/Swagger documentation with live examples.", icon: Code,
},
{
title: "PostgreSQL Integration", description: "Multitenant database architecture with row-level security. Direct query access or managed API layer. Full schema documentation included.", icon: Lock,
},
{
title: "JWT + OAuth Setup", description: "Centralized authentication with JWT bearer tokens. OAuth provider integration (Google, GitHub, custom). Role-based access control (RBAC) framework.", icon: Key,
},
{
title: "Deployment Guide", description: "Docker/Kubernetes deployment examples. AWS, GCP, Azure reference architectures. High-availability setup with redundancy and failover.", icon: Zap,
},
]}
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AUc5mGjhlxVkFiHx2Jcz4OwYr7/enterprise-security-visualization-layere-1772650569645-708f6717.png?_wi=4"
imageAlt="Technical Integration Architecture"
mediaAnimation="blur-reveal"
imagePosition="right"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="faq" data-section="faq">
<FaqDouble
title="Technical Questions"
description="Common implementation and technical questions answered by our engineering team."
tag="Support"
tagIcon={FileText}
tagAnimation="slide-up"
faqs={[
{
id: "1", title: "How do I authenticate with the API?", content: "All API requests require a JWT bearer token in the Authorization header. Obtain tokens via OAuth provider or API key exchange. Tokens expire after 24 hours; use refresh tokens for long-lived sessions."
},
{
id: "2", title: "What's the database schema?", content: "Core tables: clients (client accounts), agents (AI agent configurations), campaigns (campaign definitions), calls (call records), financials (revenue/margin data). Row-level security policies enforce data isolation by client_id."
},
{
id: "3", title: "How do I deploy Imperium in production?", content: "Use our Docker image or Kubernetes Helm charts. PostgreSQL 15+, Redis for caching, API gateway with rate limiting. AWS RDS for managed database, CloudFront for CDN. Complete terraform scripts provided."
},
{
id: "4", title: "Is there a webhook system?", content: "Yes. Event-driven webhooks for campaign state changes, agent errors, financial updates, and client activities. Configurable retry logic, signature verification, and event filtering."
},
{
id: "5", title: "How do I add custom integrations?", content: "REST API supports custom integrations with Salesforce, HubSpot, Zapier, Slack, and custom systems. Event webhooks enable real-time data synchronization. SDK libraries available for Python, Node.js, and Go."
},
{
id: "6", title: "What are the API rate limits?", content: "Free tier: 100 requests/minute. Professional: 1000/min. Enterprise: unlimited. Burst allowance: 50% above limit for 10 seconds. Contact support for custom rate limits."
},
{
id: "7", title: "How do I handle error responses?", content: "API returns standard HTTP status codes (200, 400, 401, 403, 429, 500). Error response includes code, message, and request_id for debugging. Detailed error documentation in API reference."
},
{
id: "8", title: "Is there a staging environment?", content: "Yes. Staging API available at api-staging.imperium.ai. Identical schema and features as production. Perfect for testing before deploying to prod."
},
]}
faqsAnimation="blur-reveal"
textboxLayout="default"
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoEmphasis
logoText="Imperium"
columns={[
{
items: [
{ label: "Home", href: "/" },
{ label: "Admin Dashboard", href: "/admin" },
{ label: "Client Portal", href: "/client-portal" },
{ label: "Pricing", href: "#" },
],
},
{
items: [
{ label: "Features", href: "#features" },
{ label: "API Reference", href: "#setup" },
{ label: "Security", href: "#" },
{ label: "Blog", href: "/blog" },
],
},
{
items: [
{ label: "Support", href: "/support" },
{ label: "Status Page", href: "/status" },
{ label: "Careers", href: "/careers" },
{ label: "Contact", href: "#" },
],
},
{
items: [
{ label: "Privacy Policy", href: "#" },
{ label: "Terms of Service", href: "#" },
{ label: "Security & Compliance", href: "#" },
{ label: "Cookie Policy", href: "#" },
],
},
]}
/>
</div>
</ThemeProvider>
);
}