Landing Page Cards

Flexible card component for landing pages with support for icons, badges, and images. All cards are fully responsive and adapt automatically to screen size.

Small Cards

Responsive cards with icon support (343px mobile → 375px desktop)

Easy to Use

Create a fully functional landing page that includes calls to action, appropriate formatting, and a well-organized layout.

Quality Content

Create a fully functional landing page that includes calls to action, appropriate formatting, and a well-organized layout.

One Click

Create a fully functional landing page that includes calls to action, appropriate formatting, and a well-organized layout.

With Badge (Center Alignment)

Step One

Create a fully functional landing page that includes calls to action, appropriate formatting, and a well-organized layout.

Step Two

Create a fully functional landing page that includes calls to action, appropriate formatting, and a well-organized layout.

Step Three

Create a fully functional landing page that includes calls to action, appropriate formatting, and a well-organized layout.

Wide Cards

Responsive cards with optional badge and image (343px mobile → 720px tablet → 800px desktop). На мобильной версии изображение всегда идет перед описанием.

Badge + Title + Description + Image (Left Alignment)

Just Enter Title

Start by entering your main keyword. With a click, generate an article title. Choose the language, article size, tone, and enable image generation.

Badge + Title + Description + Image (Center Alignment)

Generate Blog Post

Start article generation with a click of the Generate button. You'll see the status of each article as they are created quickly and automatically.

Badge + Title + Description + Image (Right Alignment)

Publish Content

Automatically publish your content to your blog or website with just one click. Set up automatic publication for immediate or scheduled posting.

Image + Title + Description (Left Alignment)

Card Title

Create a fully functional landing page that includes calls to action, appropriate formatting, and a well-organized layout.

Image + Badge + Title + Description (Left Alignment)

Another Card Title

Create a fully functional landing page that includes calls to action, appropriate formatting, and a well-organized layout.

Usage Example

Example code for implementing Landing Page Cards

import { LandingPageCard, Badge } from '@monorepo/ui';
import { LaptopMinimal } from 'lucide-react';

// Small card with icon
<LandingPageCard
  type="small"
  icon={<LaptopMinimal size={40} />}
  title="Easy to Use"
  description="Create a fully functional landing page..."
/>

// Wide card with badge and image
<LandingPageCard
  type="wide"
  alignment="left"
  badge={<Badge variant="green" type="number">1</Badge>}
  image={<img src="/image.png" alt="Preview" />}
  title="Card Title"
  description="Create a fully functional landing page..."
/>

Props

Prop	Type	Default	Description
type	'small' \| 'wide'	'small'	Card type variant
alignment	'left' \| 'center' \| 'right'	'center'	Content alignment
title	ReactNode	-	Card title (required)
description	ReactNode	-	Card description (required)
icon	ReactNode	-	Icon element (for small type)
badge	ReactNode	-	Badge element (use Badge component)
image	ReactNode	-	Image element (for wide type)
className	string	-	Additional CSS classes

Responsive Behavior

All cards automatically adapt to screen size:

Small Cards: 343px (mobile) → 375px (desktop)
Wide Cards: 343px (mobile) → 720px (tablet) → 800px (desktop)
Layout: Vertical on mobile, horizontal on desktop (for wide cards)
Typography: Smaller text on mobile, larger on desktop
Icons: 50px on mobile, 75px on desktop