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
Three Equal Columns
66-33 Split
25-50-25 Split
GridLayout Examples
Demonstrating standard grid, masonry, and horizontal scroll layouts for repeated content
Standard 3-Column Grid
4-Column Grid
Masonry Layout
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
This card includes a badge component.
Card with Media
Features an image with video aspect ratio.
Complete Cards
Premium Product
High-quality product with excellent features and durability.
Featured Article
This article demonstrates horizontal card layout with media and content side by side.
Interactive Cards
Hover Effect
This card has hover animations and is interactive.
Interactive
This card shows cursor pointer and can handle click events.
Responsive
Smooth transitions and responsive behavior.
Badge Variations
primary
Badge variant: primary
secondary
Badge variant: secondary
accent
Badge variant: accent
info
Badge variant: info
success
Badge variant: success
warning
Badge variant: warning
error
Badge variant: error
neutral
Badge variant: neutral
Media Badge Overlays
Top Right Badge
Badge positioned at top-right corner
Top Left Badge
Badge positioned at top-left corner
Bottom Right Badge
Badge positioned at bottom-right corner
Bottom Left Badge
Badge positioned at bottom-left corner
Multiple Badges on Media
Product with Multiple Badges
Demonstrates multiple badges positioned on different corners of the media.
Video with Status Badges
Shows how badges can indicate video status, quality, or other metadata.
Full Width Left-Right Cards
The Future of Web Development
By John Doe • 3 days ago
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.
Premium Wireless Headphones
Brand: AudioTech Pro
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.
Tech Conference 2024
March 15-17, 2024 • San Francisco
Join industry leaders and innovators for three days of inspiring talks, workshops, and networking opportunities. Discover the latest in AI, blockchain, and sustainable technology.
ListLayout Examples
Directory-style lists with thumbnail, title, and description
Single Column List
Two Column List (Desktop)
Array Mapping Example
SidebarLayout Examples
Sidebar and main content layouts for blogs, dashboards, and docs