Examples & Use Cases 🚀

Discover what you can build with Qmatic Canvas through these real-world examples and step-by-step tutorials.

📱 Landing Page Builder

Create stunning landing pages in minutes with our drag-and-drop interface.

Example: SaaS Product Landing Page

// Generated React code from Qmatic Canvas
export function SaaSLanding() {
  return (
    <div className="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100">
      <header className="px-6 py-4 flex justify-between items-center">
        <div className="flex items-center gap-2">
          <div className="w-8 h-8 bg-blue-600 rounded-lg"></div>
          <span className="font-bold text-xl">ProductName</span>
        </div>
        <nav className="hidden md:flex gap-6">
          <a href="#features" className="text-gray-600 hover:text-gray-900">Features</a>
          <a href="#pricing" className="text-gray-600 hover:text-gray-900">Pricing</a>
          <a href="#contact" className="text-gray-600 hover:text-gray-900">Contact</a>
        </nav>
        <button className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700">
          Get Started
        </button>
      </header>
      
      <main className="px-6 py-20 text-center">
        <h1 className="text-5xl font-bold mb-6 text-gray-900">
          Build Better Products
          <span className="text-blue-600 block">10x Faster</span>
        </h1>
        <p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
          Our platform helps teams ship products faster with AI-powered design tools 
          and collaborative workflows that scale with your business.
        </p>
        <div className="flex gap-4 justify-center">
          <button className="bg-blue-600 text-white px-8 py-3 rounded-lg text-lg hover:bg-blue-700">
            Start Free Trial
          </button>
          <button className="bg-white text-gray-900 px-8 py-3 rounded-lg text-lg border border-gray-300 hover:bg-gray-50">
            Watch Demo
          </button>
        </div>
      </main>
    </div>
  )
}

Key Features Used:

Gradient backgrounds
Responsive navigation
Typography hierarchy
Call-to-action buttons
Flex layouts

🏪 E-commerce Product Cards

Design beautiful product showcases for online stores.

Example: Fashion Store Product Grid

Components Used:

Image placeholders with aspect ratios
Card containers with hover effects
Price display with emphasis
Action buttons with states

📊 Dashboard Interfaces

Build comprehensive admin dashboards and analytics views.

Example: Analytics Dashboard

// Stats Grid Example
const statsData = [
  { label: "Total Users", value: "12,543", change: "+12%", trend: "up" },
  { label: "Revenue", value: "$45,231", change: "+8%", trend: "up" },
  { label: "Conversion Rate", value: "3.24%", change: "-2%", trend: "down" },
  { label: "Active Sessions", value: "1,234", change: "+15%", trend: "up" },
]

export function DashboardStats() {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
      {statsData.map((stat, index) => (
        <div key={index} className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
          <div className="flex justify-between items-start">
            <div>
              <p className="text-sm text-gray-600 mb-1">{stat.label}</p>
              <p className="text-2xl font-bold text-gray-900">{stat.value}</p>
            </div>
            <span className={`text-sm px-2 py-1 rounded ${
              stat.trend === 'up' 
                ? 'bg-green-100 text-green-800' 
                : 'bg-red-100 text-red-800'
            }`}>
              {stat.change}
            </span>
          </div>
        </div>
      ))}
    </div>
  )
}

Dashboard Features:

✅ Metric cards with trend indicators
✅ Responsive grid layouts
✅ Chart components (coming soon)
✅ Data tables with sorting
✅ Filter controls

📝 Form Builders

Create complex forms with validation and smart layouts.

Example: Contact Form with Validation

Form Features:

Input validation states
Focus management
Responsive layouts
Accessibility support
Custom styling options

🎯 Step-by-Step Tutorials

Tutorial 1: Building a Blog Card Component

Start with Container
- Drag a Card component onto the canvas
- Set width to 400px, add shadow and border radius
Add Image Header
- Drag Image component to top of card
- Set aspect ratio to 16:9
- Add placeholder or demo image URL
Create Content Area
- Add Container for padding
- Insert Heading component for title
- Add Text component for excerpt
Style the Elements
- Set typography (font size, weight, color)
- Adjust spacing between elements
- Add hover effects
Add Interactions
- Link the entire card to blog post
- Add button for "Read More"
- Configure hover animations

Tutorial 2: Responsive Navigation Menu

Desktop Layout
- Create horizontal flex container
- Add logo on the left
- Navigation links in center
- CTA button on right
Mobile Adaptation
- Hide desktop nav on mobile
- Add hamburger menu button
- Create overlay/drawer for mobile menu
- Stack navigation vertically
Interactive States
- Active link highlighting
- Hover effects on menu items
- Smooth transitions
- Keyboard navigation support

🎨 Design System Examples

Color Palettes

Typography Scale

🛠️ Integration Examples

Next.js Integration

// pages/design/[id].tsx
import { CanvasRenderer } from '@/components/canvas-renderer'
import { getDesign } from '@/lib/designs'

export default function DesignPage({ design }) {
  return (
    <div className="min-h-screen">
      <CanvasRenderer 
        components={design.components}
        responsive={true}
        interactive={true}
      />
    </div>
  )
}

export async function getServerSideProps({ params }) {
  const design = await getDesign(params.id)
  return { props: { design } }
}

API Usage

// Export design as JSON
const exportDesign = async (designId) => {
  const response = await fetch(`/api/designs/${designId}/export`, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ format: 'react' })
  })
  
  const { code, components } = await response.json()
  return { code, components }
}

// Import existing design
const importDesign = async (designData) => {
  const response = await fetch('/api/designs/import', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(designData)
  })
  
  return response.json()
}

💡 Pro Tips

Performance Optimization

Use image optimization for better loading times
Implement lazy loading for component-heavy designs
Minimize CSS bundle size with Tailwind purging
Use React.memo for expensive component renders

Design Best Practices

Maintain consistent spacing using a 8px grid system
Limit color palette to 3-5 main colors
Use typography hierarchy effectively
Ensure sufficient color contrast for accessibility

Workflow Tips

Save frequently used components as templates
Use component variants for different states
Leverage the history system for experimental changes
Test responsive breakpoints regularly

Ready to build your own examples? Head over to the Canvas Editor and start creating!