Landing Package → SiteComponents

This document maps the existing @mdxui/beacon package components to the SiteComponents interface defined in mdxui.

Component Mapping

mdxui Type	Landing Component	Status	Notes
`Site`	-	❌ Missing	Needs new root wrapper component
`Header`	`Header`	✅ Exists	Props need alignment
`Footer`	`Footer`	✅ Exists	Props need alignment
`LandingPage`	`LandingLayout`	⚠️ Rename	Different name, similar purpose
`Page`	-	❌ Missing	Generic page wrapper needed
`Hero`	`Hero`, `Hero1`, `Hero2`	✅ Exists	Multiple variants, props differ
`Features`	`Features`	✅ Exists	Props structure similar
`Pricing`	`Pricing`	✅ Exists	Props need alignment
`Testimonials`	-	❌ Missing	Not implemented yet
`CTA`	-	❌ Missing	Not implemented yet
`FAQ`	`FAQs`	✅ Exists	Named differently (plural)
`Blog`	-	❌ Missing	Auto-wired component
`BlogPost`	-	❌ Missing	Auto-wired component
`Docs`	-	❌ Missing	Auto-wired component
`DocsPage`	-	❌ Missing	Auto-wired component

Additional in Landing (not in mdxui)

Component	Purpose	Action
`Directory`	Directory listings	Consider adding to mdxui

Props Alignment

mdxui HeaderProps:

{
  logo: ReactNode
  nav: NavItem[]
  cta?: CTA
  LinkComponent?: ComponentType<LinkProps>
}

Landing HeaderProps:

{
  logo: ReactNode
  links: HeaderLink[]  // Different name
  primaryCta?: string  // Different structure
  onPrimaryCta?: () => void
  secondaryCta?: string
  onSecondaryCta?: () => void
  LinkComponent?: ComponentType<HeaderLinkProps>
  maxWidth?: string
  className?: string
}

Changes needed:

Rename links → nav
Restructure CTAs to use CTA type instead of separate strings

Hero

mdxui HeroProps:

{
  title: string
  subtitle?: string
  cta: CTA
  secondaryCta?: CTA
  image?: string
  video?: string
  variant?: 'default' | 'centered' | 'split'
}

Landing HeroProps:

{
  variant?: 'default' | 'centered'
  title: string
  highlightedText: string  // Extra
  description: string      // Named differently
  primaryButtonText: string
  primaryButtonHref?: string
  onPrimaryClick?: () => void
  secondaryButtonText?: string
  // ... more granular button props
  backgroundType?: 'image' | 'hatch' | 'none'
  showCodeTabs?: boolean
  codeTabs?: CodeTabItem[]
}

Changes needed:

Merge title + highlightedText or add highlightedText to mdxui
Rename description → subtitle
Consolidate button props into CTA structure
Consider adding backgroundType and codeTabs to mdxui

FAQ

mdxui:

{
  title?: string
  items: Array<{ question: string; answer: string }>
  variant?: 'accordion' | 'grid' | 'list'
}

Landing FAQsProps:

{
  // Need to check actual implementation
}

Action Items

Create missing components:
- Site - root wrapper with theme/providers
- Page - generic page layout
- Testimonials - testimonial grid/carousel
- CTA - call-to-action section
- Blog, BlogPost - for posts collection
- Docs, DocsPage - for docs collection
Align existing components:
- Update Header props structure
- Update Hero props structure
- Rename FAQs → FAQ
- Rename LandingLayout → LandingPage
Consider additions to mdxui:
- highlightedText for Hero
- backgroundType options
- codeTabs for developer-focused heroes
- Directory component type

Landing Package Mapping