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
The platform/brand name displayed throughout the component (e.g., “Acme, Inc.”). Used in titles, descriptions, and feature text.
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
Text overrides for the hero section. Show HeroStringOverrides properties
Main hero title. Supports {{platformName}} and {{industry}} template variables.
Subtitle text below the title. Supports template variables.
First feature heading. Supports template variables.
Description for the first feature heading.
Second feature heading. Supports template variables.
Description for the second feature heading.
Show HeroMediaUrls properties
URL of the hero image displayed next to the main content.
Call-to-action button configuration. Show HeroCtaConfig properties
Primary CTA button. If the URL is a Calendly link, opens a Calendly modal. Otherwise, opens a new tab. Show LandingPageLink properties
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
Title text for the offerings section.
accounting
DeepPartial<LandingPageCardConfig>
Overrides for the accounting service card. Show LandingPageCardConfig properties
stringOverrides
LandingPageCardStringOverrides
Show LandingPageCardStringOverrides properties
Small label/tag on the card (e.g., “Most Popular”).
Card heading (e.g., “Self-Service Accounting”).
Price display (e.g., “$29”).
Billing frequency (e.g., “/month”).
Show LandingPageCardMediaUrls properties
Show LandingPageCardCtaConfig properties
CTA button with label and URL. Calendly URLs open a modal.
Whether to show “Starting at” label above the price.
bookkeeping
DeepPartial<LandingPageCardConfig>
Overrides for the bookkeeping service card. Same shape as accounting.
