@vyuh/react-feature-marketing

import { ContentItem, Action, ImageReference, ObjectReference, FeatureDescriptor } from '@vyuh/react-core'; import { IconName } from 'lucide-react/dynamic'; import { ContentDescriptor } from '@vyuh/react-extension-content'; /** * Banner content item for displaying banner elements * * Banners can include: * - Text message * - Optional icon * - Optional action button * - Dismissible functionality */ interface Banner extends ContentItem { /** * The main text to display in the banner */ readonly text: string; /** * Optional icon name from your icon library */ readonly icon?: IconName; /** * Call-to-action button for the banner */ readonly action?: Action; /** * Whether the banner can be dismissed by the user */ readonly dismissible?: boolean; /** * Text for the dismiss button */ readonly dismissText?: string; /** * Unique identifier for storing dismiss state in cookies */ readonly cookieId?: string; } /** * Content type descriptor for Banner content items */ declare class BannerDescriptor extends ContentDescriptor<Banner> { constructor(props?: Partial<BannerDescriptor>); } /** * Bento grid content item for displaying content in a grid layout * * Bento grids can include: * - Title and subtitle * - Grid items with various sizes and content */ interface Bento extends ContentItem { /** * The main title for the bento grid section */ readonly title: string; /** * A supporting text that appears below the title */ readonly subtitle?: string; /** * Grid items to display in the bento grid */ readonly items: { /** * The title of the grid item */ readonly title: string; /** * The description of the grid item */ readonly description: string; /** * Optional icon name from your icon library */ readonly icon?: string; /** * Optional image for the grid item */ readonly image?: ImageReference; /** * Optional action for the grid item */ readonly action?: Action; /** * How much space this item should take in the grid */ readonly span?: 'normal' | 'wide' | 'tall' | 'large'; }[]; } /** * Content type descriptor for Bento grid content items */ declare class BentoDescriptor extends ContentDescriptor<Bento> { constructor(props?: Partial<BentoDescriptor>); } /** * CTA (Call to Action) content item for displaying CTA sections * * CTAs can include: * - Title and subtitle * - Primary and secondary action buttons * - Optional image * - Additional information text */ interface CTA extends ContentItem { /** * The main title for the CTA section */ readonly title: string; /** * A supporting text that appears below the title */ readonly subtitle?: string; /** * The main image or screenshot for split variants */ readonly image?: ImageReference; /** * Primary call-to-action button */ readonly primaryAction: Action; /** * Secondary call-to-action button */ readonly secondaryAction?: Action; /** * Optional text that appears below the buttons */ readonly additionalInfo?: string; } /** * Content type descriptor for CTA content items */ declare class CTADescriptor extends ContentDescriptor<CTA> { constructor(props?: Partial<CTADescriptor>); } /** * FAQ content item for displaying FAQ sections * * FAQs can include: * - Title and subtitle * - List of questions and answers * - Optional categories for grouping questions * - Contact information for additional support */ interface FAQ extends ContentItem { /** * The main title for the FAQ section */ readonly title: string; /** * A supporting text that appears below the title */ readonly subtitle?: string; /** * List of questions and answers */ readonly questions: Array<{ question: string; answer: any; category?: string; }>; /** * Categories for grouping questions */ readonly categories?: string[]; /** * Contact information for variants that include contact details */ readonly contactInfo?: { title?: string; description?: string; email?: string; phone?: string; action?: Action; }; } /** * Content type descriptor for FAQ content items */ declare class FAQDescriptor extends ContentDescriptor<FAQ> { constructor(props?: Partial<FAQDescriptor>); } /** * Feature content item for displaying feature sections * * Features can include: * - Title and description * - List of features with icons * - Media content (images, videos, code examples) * - Call-to-action buttons */ interface Feature extends ContentItem { /** * The main title for the feature section */ readonly title: string; /** * A supporting description that explains the features */ readonly description?: string; /** * List of individual features to highlight */ readonly features?: Array<{ title: string; description?: string; icon?: string; }>; /** * Media content for the feature section */ readonly media?: { type: 'none' | 'image' | 'video' | 'code-example'; image?: ImageReference; video?: ObjectReference; codeExample?: { code: string; language: string; }; }; /** * Call-to-action buttons for the feature section */ readonly actions?: Array<{ variant: 'primary' | 'secondary' | 'tertiary' | 'link'; action: Action; }>; } /** * Content type descriptor for Feature content items */ declare class FeatureSectionDescriptor extends ContentDescriptor<Feature> { constructor(props?: Partial<FeatureSectionDescriptor>); } /** * Footer section content item for displaying page footers * * Footers can include: * - Logo and logo text * - Navigation groups * - Legal links * - Copyright text */ interface Footer extends ContentItem { /** * The logo to display in the footer */ readonly logo?: ImageReference; /** * Text to display alongside or instead of the logo */ readonly logoText?: string; /** * Navigation groups to display in the footer */ readonly navigationGroups?: { /** * Group title */ readonly title: string; /** * Links in this navigation group */ readonly links?: { /** * The navigation link */ readonly action?: Action; }[]; }[]; /** * Links to legal pages like Privacy Policy, Terms of Service, etc. */ readonly legalLinks?: { /** * The legal link */ readonly action: Action; }[]; /** * Copyright notice text */ readonly copyright?: string; /** * Social media links */ readonly socialLinks?: { /** * The social media link */ readonly action: Action; /** * Icon name for the social media platform */ readonly icon: string; }[]; /** * Company description or mission statement */ readonly description?: string; } /** * Content type descriptor for Footer content items */ declare class FooterDescriptor extends ContentDescriptor<Footer> { constructor(props?: Partial<FooterDescriptor>); } /** * Header content item for displaying navigation headers * * Headers can include: * - Logo and logo text * - Navigation items * - Action buttons */ interface Header extends ContentItem { /** * The logo to display in the header */ readonly logo?: ImageReference; /** * Text to display alongside or instead of the logo */ readonly logoText?: string; /** * Navigation items to display in the header */ readonly navigationItems?: { /** * The navigation link */ readonly action: Action; /** * Whether this item should be highlighted as active */ readonly isActive?: boolean; /** * Submenu items for flyout/dropdown menus */ readonly children?: { /** * The dropdown link */ readonly action?: Action; /** * Optional description for flyout menu items */ readonly description?: string; /** * Optional icon name from your icon library */ readonly icon?: string; }[]; }[]; /** * Action buttons to display in the header */ readonly actions?: { /** * The action to execute when the button is clicked */ readonly action?: Action; /** * Optional icon name from your icon library */ readonly icon?: string; }[]; } /** * Content type descriptor for Header content items */ declare class HeaderDescriptor extends ContentDescriptor<Header> { constructor(props?: Partial<HeaderDescriptor>); } /** * Hero content item for displaying hero sections * * Heroes can include: * - Title and subtitle * - Media content (images, videos) * - Call-to-action buttons */ interface Hero extends ContentItem { /** * The main title for the hero section */ readonly title: string; /** * A supporting text that appears below the title */ readonly subtitle?: string; /** * Media content for the hero section */ readonly media?: { type: 'none' | 'image' | 'video'; image?: ImageReference; video?: ObjectReference; }; /** * Call-to-action buttons for the hero section */ readonly actions?: Array<{ variant: 'primary' | 'secondary' | 'tertiary' | 'link'; action: Action; }>; } /** * Content type descriptor for Hero content items */ declare class HeroDescriptor extends ContentDescriptor<Hero> { constructor(props?: Partial<HeroDescriptor>); } /** * Logo section content item for displaying logo clouds, partner logos, etc. * * Logo sections can include: * - Title * - Logo items with images and optional links */ interface Logo extends ContentItem { /** * The title for the logo section (e.g., "Trusted by" or "Our partners") */ readonly title?: string; /** * Logo items to display in the section */ readonly items: { /** * The logo image */ readonly image: ImageReference; /** * Alt text for the logo image */ readonly alt: string; /** * Optional link for the logo */ readonly action?: Action; }[]; } /** * Content type descriptor for Logo section content items */ declare class LogoDescriptor extends ContentDescriptor<Logo> { constructor(props?: Partial<LogoDescriptor>); } /** * Newsletter content item for displaying newsletter signup sections * * Newsletter sections can include: * - Title and subtitle * - Form for email signup * - Optional image * - Privacy text and features list */ interface Newsletter extends ContentItem { /** * The main title for the newsletter section */ readonly title: string; /** * A supporting text that appears below the title */ readonly subtitle?: string; /** * Image for variants that include an image */ readonly image?: ImageReference; /** * The URL where the newsletter form will submit data */ readonly formAction: string; /** * Text for the submit button */ readonly buttonText: string; /** * Placeholder text for the email input */ readonly placeholderText?: string; /** * Optional text about privacy policy */ readonly privacyText?: string; /** * Optional list of features or benefits to display */ readonly features?: string[]; } /** * Content type descriptor for Newsletter content items */ declare class NewsletterDescriptor extends ContentDescriptor<Newsletter> { constructor(props?: Partial<NewsletterDescriptor>); } /** * Pricing content item for displaying pricing plans * * Pricing sections can include: * - Title and subtitle * - Multiple pricing plans with features * - Optional disclaimer text */ interface Pricing extends ContentItem { /** * The main title for the pricing section */ readonly title: string; /** * A supporting text that appears below the title */ readonly subtitle?: string; /** * Pricing plans to display */ readonly plans: Array<{ /** * Plan name */ readonly name: string; /** * Plan description */ readonly description?: string; /** * Monthly price in dollars */ readonly priceMonthly: number; /** * Annual price in dollars (per month) */ readonly priceAnnually?: number; /** * Currency code */ readonly currency: string; /** * Whether this plan should be highlighted */ readonly featured?: boolean; /** * List of features included in the plan */ readonly features: string[]; /** * Call-to-action button for the plan */ readonly action: Action; }>; /** * Optional disclaimer text to display below the pricing plans */ readonly disclaimer?: string; } /** * Content type descriptor for Pricing content items */ declare class PricingDescriptor extends ContentDescriptor<Pricing> { constructor(props?: Partial<PricingDescriptor>); } /** * Stats content item for displaying statistics * * Stats sections can include: * - Title and subtitle * - Multiple statistics with values and descriptions * - Optional description and image * - Call-to-action button */ interface Stats extends ContentItem { /** * The main title for the stats section */ readonly title?: string; /** * A supporting text that appears with the title */ readonly subtitle?: string; /** * Detailed description for variants that include descriptions */ readonly description?: string; /** * Image for variants that include an image */ readonly image?: ImageReference; /** * Statistics to display */ readonly stats: Array<{ /** * The statistic value (e.g., "35K" or "99.9%") */ readonly value: string; /** * Label describing the statistic */ readonly label: string; /** * Optional longer description of the statistic */ readonly description?: string; /** * Optional icon name from your icon library */ readonly icon?: IconName; }>; /** * Optional call-to-action button */ readonly action?: Action; } /** * Content type descriptor for Stats content items */ declare class StatsDescriptor extends ContentDescriptor<Stats> { constructor(props?: Partial<StatsDescriptor>); } /** * Team content item for displaying team members * * Team sections can include: * - Title and subtitle * - Team members with photos, roles, and bios * - Social links for team members * - Call-to-action button */ interface Team extends ContentItem { /** * The main title for the team section */ readonly title: string; /** * A supporting text that appears below the title */ readonly subtitle?: string; /** * Team members to display */ readonly members: Array<{ /** * Team member's name */ readonly name: string; /** * Team member's role or position */ readonly role: string; /** * Team member's photo */ readonly image: ImageReference; /** * Short biography of the team member */ readonly bio?: string; /** * Whether this member should be highlighted */ readonly featured?: boolean; /** * Social media links for the team member */ readonly socialLinks?: Array<{ /** * Platform name (e.g., "twitter", "linkedin", "github") */ readonly platform: string; /** * URL to the team member's profile */ readonly url: string; }>; }>; /** * Optional call-to-action button */ readonly action?: Action; } /** * Content type descriptor for Team content items */ declare class TeamDescriptor extends ContentDescriptor<Team> { constructor(props?: Partial<TeamDescriptor>); } /** * Testimonials content item for displaying customer testimonials * * Testimonials sections can include: * - Title and subtitle * - Multiple testimonials with quotes and author information * - Optional company logos * - Call-to-action button */ interface Testimonials extends ContentItem { /** * The main title for the testimonials section */ readonly title?: string; /** * A supporting text that appears with the title */ readonly subtitle?: string; /** * Testimonials to display */ readonly testimonials: Array<{ /** * The testimonial quote text */ readonly quote: string; /** * Information about the testimonial author */ readonly author: { /** * Author's name */ readonly name: string; /** * Author's role or position */ readonly role?: string; /** * Author's company */ readonly company?: string; /** * Author's avatar image */ readonly avatar?: ImageReference; }; /** * Whether this testimonial should be highlighted */ readonly featured?: boolean; }>; /** * Optional call-to-action button */ readonly action?: Action; } /** * Content type descriptor for Testimonials content items */ declare class TestimonialsDescriptor extends ContentDescriptor<Testimonials> { constructor(props?: Partial<TestimonialsDescriptor>); } /** * Marketing feature descriptor * * Provides components for building marketing pages: * - Banner sections * - Bento grid layouts * - CTA sections * - FAQ sections * - Feature sections * - Footer components * - Header components * - Hero sections * - Logo sections * - Newsletter sections * - Pricing sections * - Stats sections * - Team sections * - Testimonials sections */ declare const marketing: FeatureDescriptor; export { type Banner, BannerDescriptor, type Bento, BentoDescriptor, type CTA, CTADescriptor, type FAQ, FAQDescriptor, type Feature, FeatureSectionDescriptor, type Footer, FooterDescriptor, type Header, HeaderDescriptor, type Hero, HeroDescriptor, type Logo, LogoDescriptor, type Newsletter, NewsletterDescriptor, type Pricing, PricingDescriptor, type Stats, StatsDescriptor, type Team, TeamDescriptor, type Testimonials, TestimonialsDescriptor, marketing };