@omnify/landing-page

Professional AI Marketing Platform Landing Page Component

A highly customizable, responsive landing page component built with React and TypeScript. Perfect for AI marketing platforms, SaaS applications, and enterprise solutions.

✨ Features

• 🎨 Multiple Themes: Default, Dark, Enterprise, and Minimal themes
• 📱 Fully Responsive: Mobile-first design with Tailwind CSS
• ⚙️ Highly Customizable: Configurable content, colors, and branding
• 🚀 Performance Optimized: Built with modern React patterns
• 🔧 TypeScript Support: Full type safety and IntelliSense
• 🎯 SEO Friendly: Semantic HTML structure
• ♿ Accessibility: WCAG compliant components

📦 Installation

GitHub Packages (Private)

npm install @omnify/landing-page --registry=https://npm.pkg.github.com

Public NPM

npm install @omnify/landing-page

🚀 Quick Start

import { LandingPage } from '@omnify/landing-page';

function App() {
  return (
    <LandingPage
      companyName="Your Company"
      heroTitle="Transform Your Business"
      features={[
        {
          icon: "🤖",
          title: "AI-Powered",
          description: "Advanced machine learning algorithms"
        },
        {
          icon: "⚡",
          title: "Lightning Fast",
          description: "Optimized for performance"
        }
      ]}
      theme="enterprise"
      onCTAClick={() => console.log('CTA clicked!')}
    />
  );
}

📋 Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | companyName | string | "Omnify Marketing Cloud" | Company name to display | | tagline | string | "AI-Powered Marketing Automation" | Company tagline | | heroTitle | string | "Transform Your Marketing with AI" | Main hero title | | heroSubtitle | string | "Automate campaigns, generate content, and optimize performance with cutting-edge AI technology" | Hero subtitle | | features | Feature[] | defaultFeatures | Array of features to display | | testimonials | Testimonial[] | defaultTestimonials | Customer testimonials | | ctaText | string | "Get Started Free" | Call-to-action button text | | onCTAClick | function | undefined | CTA button click handler | | theme | 'default' \| 'dark' \| 'enterprise' \| 'minimal' | 'default' | Visual theme | | className | string | "" | Additional CSS classes | | logo | string | undefined | Company logo URL | | primaryColor | string | undefined | Custom primary color | | secondaryColor | string | undefined | Custom secondary color |

🎨 Themes

Default Theme

• Clean, modern design
• Blue color scheme
• Professional appearance

Dark Theme

• Dark mode variant
• High contrast
• Modern aesthetic

Enterprise Theme

• Professional business look
• Conservative color palette
• Corporate branding

Minimal Theme

• Clean, simple design
• Subtle colors
• Focus on content

📝 Type Definitions

Feature Interface

interface Feature {
  icon: string;        // Emoji or icon
  title: string;       // Feature title
  description: string; // Feature description
  link?: string;       // Optional link
}

Testimonial Interface

interface Testimonial {
  name: string;        // Customer name
  role: string;        // Job title
  company: string;     // Company name
  content: string;     // Testimonial text
  avatar?: string;     // Profile picture URL
  rating?: number;     // Star rating (1-5)
}

🔧 Customization Examples

Custom Features

const customFeatures = [
  {
    icon: "🎯",
    title: "Smart Targeting",
    description: "AI-driven audience segmentation"
  },
  {
    icon: "📊",
    title: "Analytics Dashboard",
    description: "Real-time performance insights"
  }
];

<LandingPage features={customFeatures} />

Custom Theme Colors

<LandingPage
  theme="custom"
  primaryColor="#FF6B6B"
  secondaryColor="#4ECDC4"
/>

Custom CTA Handler

const handleGetStarted = () => {
  // Navigate to signup
  window.location.href = '/signup';
  
  // Or track analytics
  analytics.track('cta_clicked', { location: 'hero' });
};

<LandingPage onCTAClick={handleGetStarted} />

🎭 Theme System

The component uses a flexible theme system that allows for easy customization:

import { themes } from '@omnify/landing-page';

// Access theme configuration
const enterpriseTheme = themes.enterprise;

// Custom theme
const customTheme = {
  colors: {
    primary: "#FF6B6B",
    secondary: "#4ECDC4",
    accent: "#45B7D1",
    background: "#FFFFFF",
    text: "#2C3E50"
  },
  fonts: {
    heading: "Poppins, sans-serif",
    body: "Inter, sans-serif"
  },
  spacing: {
    section: "py-20",
    component: "mb-10"
  }
};

📱 Responsive Design

The component is built with a mobile-first approach:

• Mobile: Stacked layout, optimized touch targets
• Tablet: Adaptive grid layouts
• Desktop: Full-width layouts with optimal spacing

♿ Accessibility Features

• Semantic HTML structure
• ARIA labels and roles
• Keyboard navigation support
• High contrast themes
• Screen reader compatibility

🚀 Performance

• Lazy loading of images
• Optimized bundle size
• Tree-shaking support
• Minimal re-renders

🔒 Security

• No external dependencies
• XSS protection
• Secure by default

📚 Examples

Basic Usage

import { LandingPage } from '@omnify/landing-page';

function BasicExample() {
  return (
    <LandingPage
      companyName="TechCorp"
      heroTitle="Innovate with AI"
      heroSubtitle="Transform your business with cutting-edge AI solutions"
    />
  );
}

Advanced Customization

import { LandingPage, themes } from '@omnify/landing-page';

function AdvancedExample() {
  const customFeatures = [
    {
      icon: "🚀",
      title: "Launch Fast",
      description: "Get to market in days, not months"
    },
    {
      icon: "📈",
      title: "Scale Smart",
      description: "Grow without growing pains"
    }
  ];

  const customTestimonials = [
    {
      name: "John Doe",
      role: "CTO",
      company: "StartupXYZ",
      content: "This platform changed everything for us!",
      rating: 5
    }
  ];

  return (
    <LandingPage
      companyName="StartupXYZ"
      heroTitle="Build the Future"
      heroSubtitle="The platform for next-generation startups"
      features={customFeatures}
      testimonials={customTestimonials}
      theme="enterprise"
      onCTAClick={() => window.location.href = '/demo'}
    />
  );
}

🛠️ Development

Prerequisites

• Node.js 18+
• npm or yarn

Setup

# Clone the repository
git clone https://github.com/ssvgopal/cronos-omnify-boost.git
cd cronos-omnify-boost/omnify-landing-page

# Install dependencies
npm install

# Start development server
npm run dev

# Build package
npm run build

# Type checking
npm run type-check

# Linting
npm run lint

Building

# Build for production
npm run build

# Build with watch mode
npm run dev

📦 Publishing

GitHub Packages (Private)

npm run publish:github

Public NPM

npm run publish:npm

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📄 License

MIT License - see LICENSE file for details.

🆘 Support

• Documentation: GitHub Wiki
• Issues: GitHub Issues
• Discussions: GitHub Discussions

🔄 Changelog

v1.0.0

• Initial release
• Multiple theme support
• Responsive design
• TypeScript support
• Customizable components

📊 Bundle Size

• Gzipped: ~15KB
• Minified: ~45KB
• Dependencies: 0 (peer dependencies only)

🌟 Star History

Made with ❤️ by the Omnify Team