Next.js

Welcome to Our Platform

Discover the perfect blend of modern design and exceptional functionality

Experience our carefully crafted typography system featuring Montserrat for impactful headings, Lora for elegant subheadings, and Hind Madurai for comfortable reading.

Typography Showcase

Montserrat Headings

Section Heading

Subsection Heading
Card Heading

Lora Subheadings

Elegant lead paragraph with sophisticated styling

Secondary subheading with refined typography

Caption or small subheading text

Button Components

Explore our collection of beautifully designed buttons

Primary Buttons

Secondary Buttons

Ghost Buttons

Button Sizes

Content Example

See how our typography system works in real content

This is a paragraph written in Hind Madurai, our default body font. It's designed for optimal readability and comfort during extended reading sessions. The font provides excellent legibility across all screen sizes and maintains its clarity in both light and dark themes.

When you need to emphasize important information or create visual hierarchy, you can use bold text or italic text within the same font family to maintain consistency while adding emphasis.

“Typography is the art and technique of arranging type to make written language legible, readable, and appealing when displayed.”

This typography system creates a harmonious visual hierarchy that guides readers through your content naturally, from the bold Montserrat headings that grab attention, to the elegant Lora subheadings that provide context, and finally to the comfortable Hind Madurai body text that keeps readers engaged.

Background Image with Dark Overlay

This section demonstrates the SectionContainer component with a background image and a moderate 25% dark overlay for optimal text readability. The overlay ensures content remains legible while preserving the visual impact of the background image.

Background Image with Light Overlay (15% opacity)

This section shows the same background image but with a subtle 15% light overlay, creating a gentle visual effect while maintaining excellent text readability. Light overlays work well with darker text and can create a softer, more ethereal appearance.

Gradient to Transparent with Bottom Alignment

This section demonstrates a beautiful gradient that fades from primary color to transparent. The content is positioned at the bottom of the container, creating an elegant overlay effect that works perfectly for hero sections or call-to-action areas.

JuxtaposeLayout Examples

Demonstrating equal and asymmetric column layouts for juxtaposing large components

Two Equal Columns

Component A
Component B

Three Equal Columns

Component 1
Component 2
Component 3

66-33 Split

Wide Component
Narrow Component

25-50-25 Split

Left
Center
Right

GridLayout Examples

Demonstrating standard grid, masonry, and horizontal scroll layouts for repeated content

Standard 3-Column Grid

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6

4-Column Grid

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8

Masonry Layout

Card 1
Card 2
Card 3
Card 4
Card 5
Card 6
Card 7
Card 8
Card 9
Card 10
Card 11
Card 12

Card Component Examples

Master card components with flexible layouts, responsive design, and interactive states

Basic Card Types

Simple Card

A basic card with header and body content.

Card with Badge

New

This card includes a badge component.

Mountain landscape

Card with Media

Features an image with video aspect ratio.

Complete Cards

Premium Product

In Stock
Product

High-quality product with excellent features and durability.

Premium
Featured
Article

Featured Article

Featured

This article demonstrates horizontal card layout with media and content side by side.

Interactive Cards

Mountain landscape

Hover Effect

This card has hover animations and is interactive.

Interactive

Clickable

This card shows cursor pointer and can handle click events.

Forest

Responsive

Smooth transitions and responsive behavior.

Badge Variations

primary

primary

Badge variant: primary

XS
SM
MD
LG

secondary

secondary

Badge variant: secondary

XS
SM
MD
LG

accent

accent

Badge variant: accent

XS
SM
MD
LG

info

info

Badge variant: info

XS
SM
MD
LG

success

success

Badge variant: success

XS
SM
MD
LG

warning

warning

Badge variant: warning

XS
SM
MD
LG

error

error

Badge variant: error

XS
SM
MD
LG

neutral

neutral

Badge variant: neutral

XS
SM
MD
LG

Media Badge Overlays

Mountain landscape
New

Top Right Badge

Badge positioned at top-right corner

Forest
Sale

Top Left Badge

Badge positioned at top-left corner

Mountain landscape
Sold

Bottom Right Badge

Badge positioned at bottom-right corner

Forest
Featured

Bottom Left Badge

Badge positioned at bottom-left corner

Multiple Badges on Media

Product
Sale
New
Featured

Product with Multiple Badges

Demonstrates multiple badges positioned on different corners of the media.

Video thumbnail
Live
HD

Video with Status Badges

Shows how badges can indicate video status, quality, or other metadata.

Full Width Left-Right Cards

Article thumbnail
Article

The Future of Web Development

By John Doe • 3 days ago

Technology

Explore the latest trends in web development, from modern frameworks to emerging technologies that are shaping the future of the web. This comprehensive guide covers everything from performance optimization to user experience design.

📖 8 min read💬 24 comments❤️ 156 likes

Premium Wireless Headphones

Brand: AudioTech Pro

In Stock

Experience crystal-clear sound with our premium wireless headphones. Featuring active noise cancellation, 30-hour battery life, and premium comfort for extended listening sessions. Perfect for music lovers and professionals alike.

★★★★★(4.8/5)
• 2,847 reviews
$299.99$399.9925% off
Wireless headphones
Sale
Free Shipping
Conference event
Live
Virtual

Tech Conference 2024

March 15-17, 2024 • San Francisco

Featured

Join industry leaders and innovators for three days of inspiring talks, workshops, and networking opportunities. Discover the latest in AI, blockchain, and sustainable technology.

📅 3 days👥 500+ attendees🎤 50+ speakers

ListLayout Examples

Directory-style lists with thumbnail, title, and description

Single Column List

thumb
Item 1
This is a description for item 1 in the list.
thumb
Item 2
This is a description for item 2 in the list.
thumb
Item 3
This is a description for item 3 in the list.

Two Column List (Desktop)

thumb
Item 4
This is a description for item 4 in the list.
thumb
Item 5
This is a description for item 5 in the list.
thumb
Item 6
This is a description for item 6 in the list.
thumb
Item 7
This is a description for item 7 in the list.

Array Mapping Example

thumb
Alpha
First item
thumb
Beta
Second item
thumb
Gamma
Third item
thumb
Delta
Fourth item
thumb
Epsilon
Fifth item

SidebarLayout Examples

Sidebar and main content layouts for blogs, dashboards, and docs

Sidebar Left

Sidebar Right

Chart-Ed Institute for Global Data Literacy