BeepFeatureCard

Overview

BeepFeatureCard provides a visually compelling card component designed for showcasing application features, services, capabilities, or promotional content. It combines attractive design with informative content presentation, making it ideal for landing pages, feature galleries, and marketing interfaces.

Built on the BeepControl foundation, BeepFeatureCard features rich image support, flexible content layouts, interactive elements, animation capabilities, comprehensive theming, and accessibility features. Perfect for product showcases, service catalogs, feature announcements, and any application requiring attractive content presentation.

Key Features

Visual Preview

Feature Showcase Gallery

Basic Usage

// Create and configure a BeepFeatureCard
var featureCard = new BeepFeatureCard();
featureCard.Size = new Size(300, 400);
featureCard.Title = "Data Analytics";
featureCard.Description = "Powerful analytics tools to visualize and analyze your data.";
featureCard.Category = "Analytics";
featureCard.FeatureImage = Properties.Resources.AnalyticsImage;

// Add action buttons
var learnMoreButton = new BeepButton 
{ 
    Text = "Learn More",
    Size = new Size(120, 35)
};
learnMoreButton.Click += (s, e) => OpenFeatureDetails("analytics");

var demoButton = new BeepButton 
{ 
    Text = "Try Demo",
    Size = new Size(100, 35)
};
demoButton.Click += (s, e) => StartDemo("analytics");

featureCard.Actions.Add(learnMoreButton);
featureCard.Actions.Add(demoButton);

// Add to panel or form
this.Controls.Add(featureCard);

// Create feature card with detailed content
var featureCard = new BeepFeatureCard
{
    Title = "Enterprise Security",
    Description = "Comprehensive security features for enterprise applications",
    Category = "Security",
    Badge = "New Feature",
    FeatureImage = Properties.Resources.SecurityIcon,
    Size = new Size(350, 450)
};

// Add feature highlights
featureCard.Features.AddRange(new[]
{
    "Multi-factor authentication",
    "Role-based access control", 
    "Audit logging and monitoring",
    "Data encryption at rest and in transit"
});

// Configure pricing information
featureCard.PricingInfo = new FeaturePricing
{
    PlanName = "Enterprise",
    Price = "$99/month",
    BillingCycle = "per user"
};

// Add custom metadata
featureCard.Metadata.Add("version", "2.0");
featureCard.Metadata.Add("availability", "Available now");
featureCard.Metadata.Add("support", "24/7 Enterprise support");

// Handle feature interactions
featureCard.FeatureClicked += (s, e) =>
{
    ShowFeatureDetailDialog(e.FeatureId);
};

featureCard.ActionRequested += (s, e) =>
{
    HandleFeatureAction(e.ActionType, e.FeatureId);
};

Properties

Core Properties

Content Properties

Visual Properties

Events

Examples

public partial class ProductShowcase : UserControl
{
    private FlowLayoutPanel featuresPanel;
    private List productFeatures;
    private IFeatureService featureService;

    public ProductShowcase(IFeatureService featureService)
    {
        this.featureService = featureService;
        InitializeComponents();
        LoadProductFeatures();
    }

    private void InitializeComponents()
    {
        featuresPanel = new FlowLayoutPanel
        {
            Dock = DockStyle.Fill,
            FlowDirection = FlowDirection.LeftToRight,
            WrapContents = true,
            AutoScroll = true,
            Padding = new Padding(20)
        };

        this.Controls.Add(featuresPanel);
    }

    private async void LoadProductFeatures()
    {
        try
        {
            productFeatures = await featureService.GetFeaturesAsync();
            CreateFeatureCards();
        }
        catch (Exception ex)
        {
            MessageBox.Show($"Error loading features: {ex.Message}");
        }
    }

    private void CreateFeatureCards()
    {
        featuresPanel.Controls.Clear();

        foreach (var feature in productFeatures)
        {
            var featureCard = CreateFeatureCard(feature);
            featuresPanel.Controls.Add(featureCard);
        }
    }

    private BeepFeatureCard CreateFeatureCard(ProductFeature feature)
    {
        var card = new BeepFeatureCard
        {
            Size = new Size(350, 500),
            Margin = new Padding(15),
            Title = feature.Name,
            Description = feature.Description,
            Category = feature.Category,
            Badge = GetFeatureBadge(feature),
            FeatureImage = LoadFeatureImage(feature.ImagePath),
            CardLayout = feature.IsPremium ? FeatureCardLayout.Hero : FeatureCardLayout.Standard
        };

        // Add feature highlights
        if (feature.Highlights?.Any() == true)
        {
            card.Features.AddRange(feature.Highlights);
        }

        // Add pricing information
        if (feature.PricingTier != null)
        {
            card.PricingInfo = new FeaturePricing
            {
                PlanName = feature.PricingTier.Name,
                Price = feature.PricingTier.Price,
                BillingCycle = feature.PricingTier.BillingCycle
            };
        }

        // Add metadata
        card.Metadata.Add("version", feature.Version);
        card.Metadata.Add("availability", feature.AvailabilityStatus);
        card.Metadata.Add("support", feature.SupportLevel);

        // Add event handlers
        card.FeatureClicked += OnFeatureClicked;
        card.ActionRequested += OnActionRequested;

        // Add context-specific actions
        AddFeatureActions(card, feature);

        return card;
    }

    private void AddFeatureActions(BeepFeatureCard card, ProductFeature feature)
    {
        // Primary action based on feature status
        switch (feature.Status)
        {
            case FeatureStatus.Available:
                var getStartedButton = new BeepButton
                {
                    Text = "Get Started",
                    Size = new Size(120, 40),
                    Theme = card.Theme
                };
                getStartedButton.Click += (s, e) => StartFeatureTour(feature.Id);
                card.Actions.Add(getStartedButton);
                break;

            case FeatureStatus.Preview:
                var previewButton = new BeepButton
                {
                    Text = "Preview",
                    Size = new Size(120, 40),
                    Theme = card.Theme
                };
                previewButton.Click += (s, e) => ShowFeaturePreview(feature.Id);
                card.Actions.Add(previewButton);
                break;

            case FeatureStatus.ComingSoon:
                var notifyButton = new BeepButton
                {
                    Text = "Notify Me",
                    Size = new Size(120, 40),
                    Theme = card.Theme
                };
                notifyButton.Click += (s, e) => SubscribeToFeatureUpdates(feature.Id);
                card.Actions.Add(notifyButton);
                break;
        }

        // Secondary actions
        var learnMoreButton = new BeepButton
        {
            Text = "Learn More",
            Size = new Size(100, 40),
            Theme = card.Theme
        };
        learnMoreButton.Click += (s, e) => ShowFeatureDetails(feature.Id);
        card.Actions.Add(learnMoreButton);

        // Demo action (if available)
        if (feature.HasDemo)
        {
            var demoButton = new BeepButton
            {
                Text = "Try Demo",
                Size = new Size(100, 40),
                Theme = card.Theme
            };
            demoButton.Click += (s, e) => LaunchFeatureDemo(feature.Id);
            card.Actions.Add(demoButton);
        }
    }

    private string GetFeatureBadge(ProductFeature feature)
    {
        if (feature.IsNew) return "New";
        if (feature.IsPremium) return "Premium";
        if (feature.IsPopular) return "Popular";
        if (feature.Status == FeatureStatus.Preview) return "Preview";
        return string.Empty;
    }

    private async void OnFeatureClicked(object sender, FeatureEventArgs e)
    {
        var feature = productFeatures.FirstOrDefault(f => f.Id.ToString() == e.FeatureId);
        if (feature != null)
        {
            // Track feature click for analytics
            await featureService.TrackFeatureInteractionAsync(feature.Id, "card_click");
            
            // Show detailed feature information
            ShowFeatureDetailDialog(feature);
        }
    }

    private async void OnActionRequested(object sender, ActionEventArgs e)
    {
        try
        {
            await featureService.TrackFeatureInteractionAsync(e.FeatureId, e.ActionType);
            
            switch (e.ActionType.ToLower())
            {
                case "get_started":
                    StartFeatureTour(e.FeatureId);
                    break;
                case "preview":
                    ShowFeaturePreview(e.FeatureId);
                    break;
                case "demo":
                    LaunchFeatureDemo(e.FeatureId);
                    break;
                case "learn_more":
                    ShowFeatureDetails(e.FeatureId);
                    break;
            }
        }
        catch (Exception ex)
        {
            MessageBox.Show($"Error handling action: {ex.Message}");
        }
    }

    // Helper methods
    private Image LoadFeatureImage(string imagePath) 
    { 
        // Load image from resources or file system
        return !string.IsNullOrEmpty(imagePath) ? 
            Image.FromFile(imagePath) : Properties.Resources.DefaultFeatureIcon;
    }

    private void StartFeatureTour(string featureId) { /* Implementation */ }
    private void ShowFeaturePreview(string featureId) { /* Implementation */ }
    private void LaunchFeatureDemo(string featureId) { /* Implementation */ }
    private void ShowFeatureDetails(string featureId) { /* Implementation */ }
    private void SubscribeToFeatureUpdates(string featureId) { /* Implementation */ }
    private void ShowFeatureDetailDialog(ProductFeature feature) { /* Implementation */ }
}

Theming

BeepFeatureCard provides comprehensive theming support with automatic adaptation to brand colors and visual styles:

var featureCard = new BeepFeatureCard
{
    Theme = "CorporateBrand",
    UseThemeColors = true
};

// Theme automatically applies:
// - CardBackColor: Main card background
// - BorderColor: Card border styling
// - TextColors: Title, description, and content colors
// - BadgeColors: Feature badge styling
// - ActionColors: Button and interaction styling
// - HoverColors: Hover state animations

Feature-Specific Theming

• Hero layouts - Enhanced styling for premium features
• Category colors - Different color schemes per category
• Badge theming - Custom badge colors and styles
• Image overlays - Theme-aware image effects and overlays

Best Practices

🎯 Content Strategy

• Clear value proposition: Highlight key benefits and unique selling points
• Consistent messaging: Use consistent tone and terminology across features
• Scannable content: Use bullet points and short descriptions for easy reading
• Quality visuals: Use high-quality images and icons that represent features

🔧 Implementation

• Performance: Optimize images and use lazy loading for large feature galleries
• Accessibility: Provide alt text for images and keyboard navigation
• Responsive design: Ensure cards work well at different sizes
• Analytics: Track feature interactions for product insights

🎨 Visual Design

• Consistent spacing: Use consistent padding and margins across cards
• Visual hierarchy: Establish clear hierarchy with typography and color
• Brand alignment: Ensure cards align with overall brand aesthetics
• Action clarity: Make calls-to-action prominent and clear