@yanujz/landme

A config-driven React + Tailwind framework for building high-conversion landing pages.

---

Installation

Install the framework:

npm install @yanujz/landme

(Note: This library requires React 18+ and Tailwind CSS to be installed in your project).

Update your root App.tsx or main.tsx to import the pre-compiled Tailwind styles:

import "@yanujz/landme/dist/style.css";

Zero-Boilerplate Quick Start (Inline Deployment)

You can build a fully functional, themed landing page in a single file by using the raw component blocks. No external configuration files required!

// App.tsx
import React from "react";
import { LandingPage, Hero, Button } from "@yanujz/landme";
import "@yanujz/landme/dist/style.css";

export default function App() {
  return (
    <LandingPage 
      theme={{ accentColor: "#f59e0b", mode: "dark", radius: "full" }}
      meta={{ title: "Landme Starter", description: "Ship your product." }}
    >
      <LandingPage.Navbar 
        config={{
          logo: { text: "Acme" },
          links: [{ label: "Features", href: "#features" }]
        }} 
      />
      
      <Hero>
        <Hero.Eyebrow>New Release</Hero.Eyebrow>
        <Hero.Heading>
          Ship your product <span className="text-primary">faster</span>
        </Hero.Heading>
        <Hero.Subheading>
          A blocks-based framework for modern developers.
        </Hero.Subheading>
        <Hero.Actions>
          <Button asChild variant="primary" size="lg">
            <a href="/start">Get Started</a>
          </Button>
        </Hero.Actions>
      </Hero>

      <LandingPage.Features 
        config={{
          heading: "Why choose us?",
          items: [
            { id: "1", title: "Fast", description: "Very fast", icon: () => <span /> }
          ]
        }}
      />
      
      <LandingPage.Pricing 
        config={{
          heading: "Pricing",
          plans: [
            {
              id: "pro", name: "Pro", description: "For pros",
              price: { monthly: 29, annual: 24, currency: "$" },
              cta: { label: "Subscribe", href: "#" },
              features: []
            }
          ]
        }}
      />

      <LandingPage.Footer 
        config={{
          linkGroups: [],
          legal: { companyName: "Acme Inc" }
        }} 
      />
    </LandingPage>
  );
}

Flexible Section Ordering

The true power of landme is that you are never locked into a rigid layout. Because you compose the page using <LandingPage.Hero>, <LandingPage.Features>, etc., you can insert your own custom React components anywhere in the page tree.

<LandingPage theme={{ mode: "dark" }}>
  <LandingPage.Hero />
  
  {/* Inject custom React nodes natively! */}
  <MyCustomVideoPlayer />

  <LandingPage.Features />
  <LandingPage.Pricing />
</LandingPage>

Example App

See the example/ directory for a complete Vite application showcasing all available sections, dark mode, and metadata configuration.

License

MIT