Service as Site

Services render on marketing sites as public-facing pages showcasing service offerings, documentation, and integration guides.

ServiceSite

A complete marketing site for a service product (API platform, integration marketplace, etc.).

Props

interface ServiceSiteProps extends SiteComponents {
  /** Service category focus */
  serviceType: ServiceType

  /** Site branding */
  branding: {
    name: string
    logo: string
    tagline: string
  }

  /** Services to showcase */
  services?: ServiceProps[]

  /** Site sections */
  sections?: ('hero' | 'features' | 'integrations' | 'pricing' | 'docs' | 'api-reference')[]

  /** Navigation */
  navigation?: NavItem[]
}

Usage

// API Platform Site
<ServiceSite
  serviceType="API"
  branding={{
    name: "Acme API Platform",
    logo: "/logo.svg",
    tagline: "Powerful APIs for modern applications"
  }}
  sections={['hero', 'features', 'api-reference', 'pricing', 'docs']}
  navigation={[
    { label: 'Features', href: '#features' },
    { label: 'API Reference', href: '/docs/api' },
    { label: 'Pricing', href: '#pricing' },
    { label: 'Docs', href: '/docs' }
  ]}
/>

// Integration Marketplace Site
<ServiceSite
  serviceType="Integration"
  branding={{
    name: "App Integrations",
    logo: "/logo.svg",
    tagline: "Connect your favorite tools"
  }}
  sections={['hero', 'integrations', 'features', 'docs']}
  services={integrations}
/>

Default Layout

ServiceSite
├── Header (nav)
├── ServiceHeroSection
│   ├── Headline + tagline
│   ├── CTA buttons
│   └── Demo/screenshot
│
├── ServiceFeaturesSection
│   ├── Feature cards
│   └── Code examples
│
├── ServiceIntegrationsSection
│   └── Integration grid
│
├── ServicePricingSection
│   └── Pricing tiers
│
├── ServiceDocsSection
│   ├── Quick start guide
│   └── Link to full docs
│
└── Footer

ServicePage

A full marketing page dedicated to a specific service or service category.

ServiceLandingPage

Landing page for a service offering.

interface ServiceLandingPageProps {
  /** Service to showcase */
  service: ServiceProps

  /** Hero content */
  hero: {
    headline: string
    description: string
    cta: { label: string; href: string }
    image?: string
  }

  /** Features to highlight */
  features?: Feature[]

  /** Show pricing */
  showPricing?: boolean

  /** Show API reference */
  showAPIReference?: boolean

  /** Testimonials */
  testimonials?: Testimonial[]
}

Usage:

<ServiceLandingPage
  service={restAPIService}
  hero={{
    headline: "RESTful API for Modern Apps",
    description: "Fast, secure, and scalable API endpoints",
    cta: { label: "Get API Key", href: "/signup" },
    image: "/api-hero.png"
  }}
  features={[
    {
      icon: "Zap",
      title: "Lightning Fast",
      description: "Sub-100ms response times globally"
    },
    {
      icon: "Shield",
      title: "Enterprise Security",
      description: "OAuth2, API keys, and JWT support"
    },
    {
      icon: "BarChart",
      title: "Real-time Analytics",
      description: "Monitor usage and performance"
    }
  ]}
  showPricing
  showAPIReference
/>

ServiceDocsPage

Documentation page for a service.

interface ServiceDocsPageProps {
  /** Service to document */
  service: ServiceProps

  /** Documentation sections */
  sections?: ('quickstart' | 'authentication' | 'endpoints' | 'webhooks' | 'errors' | 'sdks')[]

  /** Show navigation sidebar */
  showNav?: boolean

  /** Code language examples */
  languages?: ('curl' | 'javascript' | 'python' | 'ruby' | 'php')[]
}

Usage:

<ServiceDocsPage
  service={apiService}
  sections={['quickstart', 'authentication', 'endpoints', 'webhooks', 'errors']}
  languages={['curl', 'javascript', 'python']}
  showNav
/>

ServiceAPIReferencePage

API reference documentation.

interface ServiceAPIReferencePageProps {
  /** API service */
  service: APIProps

  /** Group endpoints by */
  groupBy?: 'tag' | 'method' | 'path'

  /** Show try-it console */
  showPlayground?: boolean

  /** OpenAPI spec URL */
  openApiSpec?: string
}

Usage:

<ServiceAPIReferencePage
  service={apiService}
  groupBy="tag"
  showPlayground
  openApiSpec="/openapi.json"
/>

ServiceIntegrationsPage

Showcase available integrations.

interface ServiceIntegrationsPageProps {
  /** Integrations to display */
  integrations: IntegrationProps[]

  /** Categories for filtering */
  categories?: string[]

  /** Display mode */
  display?: 'cards' | 'list'

  /** Show featured */
  featured?: string[]
}

Usage:

<ServiceIntegrationsPage
  integrations={integrations}
  categories={['payment', 'communication', 'storage', 'crm']}
  display="cards"
  featured={['stripe', 'slack', 'github']}
/>

ServiceSection

Reusable sections for marketing pages.

ServiceHeroSection

Hero section showcasing a service.

interface ServiceHeroSectionProps {
  /** Service to showcase */
  service: ServiceProps

  /** Hero content */
  headline: string
  description: string

  /** CTA buttons */
  primaryCTA?: { label: string; href: string }
  secondaryCTA?: { label: string; href: string }

  /** Visual */
  image?: string
  video?: string

  /** Show live demo */
  showDemo?: boolean
}

Usage:

<ServiceHeroSection
  service={apiService}
  headline="Build faster with our API"
  description="Production-ready REST API with 99.99% uptime SLA"
  primaryCTA={{ label: "Start Free", href: "/signup" }}
  secondaryCTA={{ label: "View Docs", href: "/docs" }}
  image="/api-dashboard.png"
/>

ServiceFeaturesSection

Features grid for a service.

interface ServiceFeaturesSectionProps {
  /** Service */
  service: ServiceProps

  /** Features to highlight */
  features: Feature[]

  /** Layout */
  columns?: number

  /** Show code examples */
  showCodeExamples?: boolean
}

Usage:

<ServiceFeaturesSection
  service={apiService}
  features={[
    {
      icon: "Lock",
      title: "Secure by Default",
      description: "Enterprise-grade security with OAuth2 and API keys",
      code: `curl -H "Authorization: Bearer YOUR_TOKEN" \\
  https://api.example.com/v1/users`
    },
    {
      icon: "Zap",
      title: "Real-time Updates",
      description: "WebSocket support for live data streaming"
    }
  ]}
  columns={3}
  showCodeExamples
/>

ServiceEndpointsSection

Showcase API endpoints.

interface ServiceEndpointsSectionProps {
  /** API service */
  service: APIProps

  /** Endpoints to highlight */
  endpoints?: string[]

  /** Show request/response examples */
  showExamples?: boolean

  /** Group by category */
  groupBy?: string
}

Usage:

<ServiceEndpointsSection
  service={apiService}
  endpoints={[
    '/api/users',
    '/api/products',
    '/api/orders'
  ]}
  showExamples
  groupBy="resource"
/>

ServiceIntegrationsSection

Grid of available integrations.

interface ServiceIntegrationsSectionProps {
  /** Integrations */
  integrations: IntegrationProps[]

  /** Section title */
  title?: string
  description?: string

  /** Display mode */
  display?: 'cards' | 'logos' | 'list'

  /** Number of columns */
  columns?: number

  /** Show all or featured */
  filter?: 'all' | 'featured'
}

Usage:

<ServiceIntegrationsSection
  title="Popular Integrations"
  description="Connect with your favorite tools"
  integrations={integrations}
  display="logos"
  columns={6}
  filter="featured"
/>

ServicePricingSection

Pricing tiers for service plans.

interface ServicePricingSectionProps {
  /** Service */
  service: ServiceProps

  /** Pricing plans */
  plans: {
    name: string
    price: number
    interval: 'month' | 'year'
    features: string[]
    limits?: {
      requests?: number
      endpoints?: number
      rateLimit?: number
    }
    cta: { label: string; href: string }
    highlighted?: boolean
  }[]

  /** Show annual pricing */
  showAnnual?: boolean
}

Usage:

<ServicePricingSection
  service={apiService}
  plans={[
    {
      name: "Starter",
      price: 0,
      interval: "month",
      features: [
        "10,000 requests/month",
        "5 API endpoints",
        "Community support"
      ],
      limits: {
        requests: 10000,
        endpoints: 5,
        rateLimit: 100
      },
      cta: { label: "Start Free", href: "/signup" }
    },
    {
      name: "Pro",
      price: 49,
      interval: "month",
      features: [
        "1M requests/month",
        "Unlimited endpoints",
        "Priority support",
        "Custom domains"
      ],
      limits: {
        requests: 1000000,
        rateLimit: 1000
      },
      cta: { label: "Start Trial", href: "/signup?plan=pro" },
      highlighted: true
    }
  ]}
  showAnnual
/>

ServiceQuickstartSection

Quick start guide.

interface ServiceQuickstartSectionProps {
  /** Service */
  service: ServiceProps

  /** Steps */
  steps: {
    title: string
    description: string
    code?: string
    language?: string
  }[]

  /** Show installation */
  showInstallation?: boolean
}

Usage:

<ServiceQuickstartSection
  service={apiService}
  steps={[
    {
      title: "Get your API key",
      description: "Sign up and create an API key from your dashboard"
    },
    {
      title: "Make your first request",
      code: `curl -H "Authorization: Bearer YOUR_API_KEY" \\
  https://api.example.com/v1/users`,
      language: "bash"
    },
    {
      title: "Handle the response",
      code: `{
  "users": [
    { "id": "1", "name": "Alice" },
    { "id": "2", "name": "Bob" }
  ]
}`,
      language: "json"
    }
  ]}
/>

ServiceTestimonialsSection

Customer testimonials about the service.

interface ServiceTestimonialsSectionProps {
  /** Service */
  service: ServiceProps

  /** Testimonials */
  testimonials: {
    quote: string
    author: string
    role: string
    company?: string
    avatar?: string
  }[]

  /** Display mode */
  display?: 'carousel' | 'grid' | 'list'

  /** Number of columns (for grid) */
  columns?: number
}

Usage:

<ServiceTestimonialsSection
  service={apiService}
  testimonials={[
    {
      quote: "This API saved us months of development time",
      author: "Jane Doe",
      role: "CTO",
      company: "Acme Corp",
      avatar: "/avatars/jane.jpg"
    }
  ]}
  display="carousel"
/>

Service-Specific Sites

API Platform Site

<ServiceSite serviceType="API">
  <ServiceHeroSection
    headline="Enterprise API Platform"
    description="Build, deploy, and scale APIs faster"
  />

  <ServiceFeaturesSection
    features={apiFeatures}
    showCodeExamples
  />

  <ServiceEndpointsSection
    endpoints={featuredEndpoints}
    showExamples
  />

  <ServicePricingSection
    plans={apiPlans}
  />

  <ServiceQuickstartSection
    steps={quickstartSteps}
  />
</ServiceSite>

Integration Marketplace

<ServiceSite serviceType="Integration">
  <ServiceHeroSection
    headline="Connect Everything"
    description="200+ pre-built integrations"
  />

  <ServiceIntegrationsSection
    integrations={allIntegrations}
    display="cards"
    filter="featured"
  />

  <ServiceFeaturesSection
    features={integrationFeatures}
  />
</ServiceSite>

Webhook Documentation

<ServiceDocsPage serviceType="Webhook">
  <Section title="Getting Started">
    <ServiceQuickstartSection
      service={webhookService}
      steps={webhookSteps}
    />
  </Section>

  <Section title="Events">
    <ServiceEndpointsSection
      service={webhookService}
      groupBy="event"
    />
  </Section>

  <Section title="Security">
    <Content>
      Webhook signature verification guide...
    </Content>
  </Section>
</ServiceDocsPage>

Summary

Services render at Site level as:

ServiceSite - Complete marketing site for service products
ServicePage - Full pages (landing, docs, API reference, integrations)
ServiceSection - Reusable sections (hero, features, endpoints, integrations, pricing, quickstart, testimonials)

Each service type has marketing-focused components for showcasing capabilities, documentation, and driving adoption.

Service as Site

On this page