Landing Page

Landing page showcasing Layer accounting and bookkeeping services.

The LandingPage component provides a page-level component that surfaces the Layer accounting and bookkeeping services. It acts as a landing page allowing platforms to showcase the core value proposition and offers/pricing for the platform’s end users. It supports Calendly integration for booking calls.

import { LandingPage } from '@layerfi/components'

<LandingPage
  platform={{
    platformName: 'Acme',
    industry: 'e-commerce',
  }}
  availableOffers={['accounting', 'bookkeeping']}
  heroOverrides={{
    stringOverrides: {
      title: 'Acme Accounting',
      subtitle: 'Manage your books with ease',
    },
    cta: {
      primary: { label: 'Get Started', url: 'https://calendly.com/your-link' },
      secondary: { label: 'Learn More', url: 'https://example.com/learn' },
    },
  }}
  offeringOverrides={{
    accounting: {
      stringOverrides: {
        title: 'Self-Service Accounting',
        priceAmount: '$29',
        priceUnit: '/month',
      },
    },
    bookkeeping: {
      stringOverrides: {
        title: 'Full-Service Bookkeeping',
        priceAmount: '$299',
        priceUnit: '/month',
      },
    },
  }}
/>

Properties

platform · LandingPagePlatformConfig · required

Platform configuration with branding details.

Show LandingPagePlatformConfig properties

platformName · string · required

The platform/brand name displayed throughout the component (e.g., “Acme, Inc.”). Used in titles, descriptions, and feature text.

industry · string · required

The target industry for customization (e.g., “e-commerce”, “SaaS”, “retail”). Used to tailor feature descriptions and messaging. If industry name substitution does not work well, overwrite the value propositions directly.

availableOffers · ('accounting' | 'bookkeeping')[] · required

Array specifying which service offerings to display. Can include 'accounting', 'bookkeeping', or both.

heroOverrides · DeepPartial<HeroContentConfig> · required

Partial overrides for the hero/main content section. All fields are optional and will fall back to defaults.

Show HeroContentConfig properties

stringOverrides · HeroStringOverrides

Text overrides for the hero section.

Show HeroStringOverrides properties

title · string

Main hero title. Supports {{platformName}} and {{industry}} template variables.

subtitle · string

Subtitle text below the title. Supports template variables.

heading1 · string

First feature heading. Supports template variables.

heading1Desc · string

Description for the first feature heading.

heading2 · string

Second feature heading. Supports template variables.

heading2Desc · string

Description for the second feature heading.

mediaUrls · HeroMediaUrls

Show HeroMediaUrls properties

topOfFoldImage · string

URL of the hero image displayed next to the main content.

cta · HeroCtaConfig

Call-to-action button configuration.

Show HeroCtaConfig properties

primary · LandingPageLink

Primary CTA button. If the URL is a Calendly link, opens a Calendly modal. Otherwise, opens a new tab.

Show LandingPageLink properties

label · string

Button text label.

url · string

Destination URL.

secondary · LandingPageLink

Secondary “Learn More” button. If not provided, the learn more button is not rendered.

offeringOverrides · OfferingOverrides · required

Partial overrides for the service offering cards.

Show OfferingOverrides properties

stringOverrides · OfferingSectionStringOverrides

Show OfferingSectionStringOverrides properties

sectionTitle · string

Title text for the offerings section.

accounting · DeepPartial<LandingPageCardConfig>

Overrides for the accounting service card.

Show LandingPageCardConfig properties

stringOverrides · LandingPageCardStringOverrides

Show LandingPageCardStringOverrides properties

badge · string

Small label/tag on the card (e.g., “Most Popular”).

title · string

Card heading (e.g., “Self-Service Accounting”).

subtitle · string

Card description text.

priceAmount · string

Price display (e.g., “$29”).

priceUnit · string

Billing frequency (e.g., “/month”).

mediaUrls · LandingPageCardMediaUrls

Show LandingPageCardMediaUrls properties

offerImage · string

URL of the card image.

cta · LandingPageCardCtaConfig

Show LandingPageCardCtaConfig properties

primary · LandingPageLink

CTA button with label and URL. Calendly URLs open a modal.

showStartingAtLabel · boolean

Whether to show “Starting at” label above the price.

bookkeeping · DeepPartial<LandingPageCardConfig>

Overrides for the bookkeeping service card. Same shape as accounting.