BptLandingPage

Section-based landing page builder with CMS functionality. Supports templates, drag-and-drop section reordering, rich text editing via BptRichTextEditor, animated backgrounds (BptBackground), carousel sections (BptCarousel), image animation effects (BptAnimationEffect), and HTML/.bptl export. Edit mode provides a three-panel layout with section list, live preview, and property editor.

Landing Page Parameters

Mode

Height

Read Only

Minified

Export

Template Selector

Content Theme Isolation

Save (.bptl)

Save Mode

Image Library

Page Theme

Color Palette

Untitled Page

Sections

⭐ Header

✨ Features

✏ Content

🖼 Image & Text

💬 Testimonials

💰 Pricing

✉ Contact

━ Footer

⚙ Custom

🎞 Carousel

Elements

⚡ Feature Card

💬 Testimonial Card

💰 Pricing Tier

🖼 Carousel Item

🔗 Button

T Text

🖼 Image

▦ Grid

No sections yet.

Select a template or add sections from the Components panel.

Event Log

No events yet. Interact with the component above.

Current Configuration

📋 [+]

<BptLandingPage
    Height="80vh"
    Mode="LandingPageMode.Edit"
    @bind-Value="_project"
    ImageLibraryAvailable="true"
    ImageLibraryItems="_sampleLibraryItems"
    @bind-ContentTheme="_contentTheme"
    ContentThemes="_customThemes"
    OnExport="OnExport"
    OnSaveBptl="OnSaveBptl" />

@code {
@using Bpt.Components.Tools

// Fields
private string _selectedHeight = "80vh";
private string _contentTheme = "Light";
private LandingPageProject _project = new();

// Image library items shown in the image picker
private List<ImageLibraryItem> _sampleLibraryItems = new()
{
    new() { Url = "https://picsum.photos/id/1015/800/600", Name = "River Valley", Width = 800, Height = 600 },
    // ... more items
};

// Custom content themes (selectable per-section)
private List<LandingPageContentTheme> _customThemes = new()
{
    new() { Id = "ocean", Name = "Ocean", Primary = "#0077b6", Background = "#caf0f8", TextColor = "#023e8a" },
    // ... more themes
};

// Event handlers
private void OnExport(LandingPageExportResult result) { /* result.HtmlData */ }
private void OnSaveBptl(byte[] data) { /* save .bptl bytes */ }
}