Professional AI Marketing Platform Landing Page Component
npm install omnify-landing-pagebash
npm install @omnify/landing-page --registry=https://npm.pkg.github.com
`
$3
`bash
npm install @omnify/landing-page
`
🚀 Quick Start
`tsx
import { LandingPage } from '@omnify/landing-page';
function App() {
return (
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
$3
- Clean, modern design
- Blue color scheme
- Professional appearance
$3
- Dark mode variant
- High contrast
- Modern aesthetic
$3
- Professional business look
- Conservative color palette
- Corporate branding
$3
- Clean, simple design
- Subtle colors
- Focus on content
📝 Type Definitions
$3
`typescript
interface Feature {
icon: string; // Emoji or icon
title: string; // Feature title
description: string; // Feature description
link?: string; // Optional link
}
`
$3
`typescript
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
$3
`tsx
const customFeatures = [
{
icon: "🎯",
title: "Smart Targeting",
description: "AI-driven audience segmentation"
},
{
icon: "📊",
title: "Analytics Dashboard",
description: "Real-time performance insights"
}
];
`
$3
`tsx
primaryColor="#FF6B6B"
secondaryColor="#4ECDC4"
/>
`
$3
`tsx
const handleGetStarted = () => {
// Navigate to signup
window.location.href = '/signup';
// Or track analytics
analytics.track('cta_clicked', { location: 'hero' });
};
`
🎭 Theme System
The component uses a flexible theme system that allows for easy customization:
`typescript
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
$3
`tsx
import { LandingPage } from '@omnify/landing-page';
function BasicExample() {
return (
heroTitle="Innovate with AI"
heroSubtitle="Transform your business with cutting-edge AI solutions"
/>
);
}
`
$3
`tsx
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 (
heroTitle="Build the Future"
heroSubtitle="The platform for next-generation startups"
features={customFeatures}
testimonials={customTestimonials}
theme="enterprise"
onCTAClick={() => window.location.href = '/demo'}
/>
);
}
`
🛠️ Development
$3
- Node.js 18+
- npm or yarn
$3
`bash
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
`
$3
`bash
Build for production
npm run build
Build with watch mode
npm run dev
`
📦 Publishing
$3
`bash
npm run publish:github
`
$3
`bash
npm run publish:npm
``