@mounaji_npm/landing-page

Modular landing page builder — dynamic sections, preset themes, token-driven styling.
Works with @mounaji_npm/navbar for full-page composition.

Install

npm install @mounaji_npm/landing-page @mounaji_npm/navbar @mounaji_npm/tokens

Quick start

import { LandingPage } from '@mounaji_npm/landing-page';
import { Navbar } from '@mounaji_npm/navbar';

<LandingPage
  theme="dark-mesh"
  sections={[
    { id: 'hero',     props: { headline: 'Build something great.' } },
    { id: 'features', props: { features: [...] } },
    { id: 'pricing',  props: { plans: [...] } },
    { id: 'cta',      props: { title: 'Ready?' } },
  ]}
  navbar={<Navbar logo={{ text: 'Acme' }} links={[...]} />}
/>

Themes

| Theme | Description | |----------------|--------------------------------------------------| | dark-mesh | Deep navy + mesh gradients + glow effects | | light-clean | Warm off-white, subtle shadows | | gradient | Vibrant purple-blue, high contrast | | minimal | Pure white, typography-first |

// Custom theme
<LandingPage theme={{ isDark: true, css: { pageBackground: '#0a0a0a', ... } }} />

Section types

| id | Component | Key props | |-----------------|-----------------------|-------------------------------------------------| | hero | HeroSection | headline, subheadline, primaryCTA, badge, media | | logos | LogosSection | title, logos | | features | FeaturesSection | title, features, columns, layout | | stats | StatsSection | stats | | testimonials | TestimonialsSection | title, testimonials | | pricing | PricingSection | title, plans | | faq | FaqSection | title, faqs | | cta | CTASection | title, subtitle, primary, secondary |

Extend with custom sections

import { LandingPage, SECTION_REGISTRY } from '@mounaji_npm/landing-page';

// Register your own section type
SECTION_REGISTRY['my-section'] = MySection;

<LandingPage
  sections={[
    { id: 'hero', props: { headline: 'Hello' } },
    { id: 'my-section', props: { data: [...] } },
  ]}
/>

Or use render for one-off sections:

{ id: 'custom', render: ({ theme }) => <MyCustomSection theme={theme} /> }

Individual section exports

import {
  HeroSection, FeaturesSection, StatsSection,
  TestimonialsSection, PricingSection, CTASection,
  LogosSection, FaqSection,
} from '@mounaji_npm/landing-page';

Demo data

import {
  DEMO_HERO, DEMO_FEATURES, DEMO_STATS,
  DEMO_TESTIMONIALS, DEMO_PLANS, DEMO_LOGOS, DEMO_FAQS,
} from '@mounaji_npm/landing-page';

Props

| Prop | Type | Default | Description | |---------------|----------------------------|---------------|--------------------------------------| | theme | string \| ThemeObject | 'dark-mesh' | Preset theme id or custom object | | sections | SectionConfig[] | – | Dynamic section list (see above) | | hero | HeroProps | – | Shorthand for sections hero entry | | features | FeaturesProps | – | Shorthand | | pricing | PricingProps | – | Shorthand | | cta | CTAProps | – | Shorthand | | navbar | ReactNode | – | Navbar slot (top of page) | | footer | ReactNode | – | Footer slot (bottom of page) | | style | CSSProperties | – | Page container override |