WorkWith Component

Partnership and integration showcase component displaying the tools, services, and platforms your product works with. Perfect for highlighting ecosystem compatibility.

Overview

The WorkWith component showcases the integrations, partnerships, and tools that your product supports. It builds confidence by showing compatibility with popular services and demonstrates the extensibility of your platform.

Preview

Basic Usage

<template>
  <section class="integrations-section">
    <WorkWith 
      title="Works with your favorite tools"
      subtitle="Seamlessly integrate with 100+ popular services"
    />
  </section>
</template>

<script setup lang="ts">
import WorkWith from '@/components/WorkWith.vue'
</script>

Features

🔗 Integration Display

• Service logos and icons
• Category-based organization
• Interactive hover effects
• Link to documentation

📊 Service Categories

• Development tools
• Communication platforms
• Analytics services
• Payment processors
• Cloud providers

🎨 Visual Design

• Clean grid layout
• Consistent logo sizing
• Smooth animations
• Category filtering

📱 Responsive Layout

• Mobile-optimized grid
• Tablet-friendly display
• Desktop enhancements
• Flexible breakpoints

Component API

Props

Prop	Type	Default	Description
title	string	'Works With'	Section title
subtitle	string	undefined	Optional subtitle
showCategories	boolean	true	Display category filters
showCount	boolean	false	Show integration count
layout	'grid' | 'carousel' | 'masonry'	'grid'	Layout style

Data Structure

interface Integration {
  id: string
  name: string
  logo: string
  category: IntegrationCategory
  description?: string
  documentationUrl?: string
  isPopular?: boolean
  isPremium?: boolean
}

type IntegrationCategory = 
  | 'development'
  | 'communication' 
  | 'analytics'
  | 'payments'
  | 'cloud'
  | 'productivity'

Integration Categories

Development Tools

• GitHub, GitLab, Bitbucket
• VS Code, IntelliJ, Sublime
• Docker, Kubernetes
• CI/CD platforms

Communication

• Slack, Discord, Teams
• Email providers
• SMS services
• Video conferencing

Analytics

• Google Analytics
• Mixpanel, Amplitude
• Custom analytics
• A/B testing tools

Payments

• Stripe, PayPal
• Cryptocurrency
• Regional processors
• Billing platforms

Cloud Services

• AWS, Google Cloud, Azure
• CDN providers
• Database services
• Storage solutions

Layout Variants

Grid Layout

<WorkWith layout="grid" :columns="6" />

Organized grid with consistent spacing.

Carousel Layout

<WorkWith layout="carousel" :autoplay="true" />

Scrolling carousel with auto-rotation.

Masonry Layout

<WorkWith layout="masonry" />

Pinterest-style masonry grid.

Customization Examples

Filtered by Category

<script setup lang="ts">
const selectedCategory = ref('all')

const filteredIntegrations = computed(() => {
  if (selectedCategory.value === 'all') {
    return integrations.value
  }
  return integrations.value.filter(
    integration => integration.category === selectedCategory.value
  )
})
</script>

<template>
  <WorkWith 
    :integrations="filteredIntegrations"
    @category-change="selectedCategory = $event"
  />
</template>

Popular Integrations Only

<WorkWith 
  :integrations="integrations.filter(i => i.isPopular)"
  title="Most Popular Integrations"
/>

Premium Features

<WorkWith 
  :show-premium="true"
  :integrations="allIntegrations"
  @premium-click="handlePremiumClick"
/>

Interactive Features

Category Filtering

<div class="category-filters">
  <button 
    v-for="category in categories"
    :key="category"
    @click="filterByCategory(category)"
    :class="{ active: selectedCategory === category }"
  >
    {{ category }}
  </button>
</div>

Search Functionality

<div class="search-box">
  <input 
    v-model="searchQuery"
    type="text"
    placeholder="Search integrations..."
    class="integration-search"
  />
</div>

Integration Details

<div class="integration-card" @click="showDetails(integration)">
  <img :src="integration.logo" :alt="integration.name" />
  <h3>{{ integration.name }}</h3>
  <p>{{ integration.description }}</p>
  
  <div class="integration-actions">
    <a :href="integration.documentationUrl" target="_blank">
      View Docs
    </a>
  </div>
</div>

Animation Effects

Hover Animations

• Logo scale effects
• Color transitions
• Shadow enhancements
• Tooltip appearances

Entrance Animations

• Staggered grid appearance
• Category-based delays
• Scroll-triggered effects
• Loading skeletons

Integration Examples

Dynamic Integration Data

<script setup lang="ts">
const { data: integrations } = await $fetch('/api/integrations')
const { data: categories } = await $fetch('/api/integration-categories')
</script>

<template>
  <WorkWith 
    :integrations="integrations"
    :categories="categories"
  />
</template>

With Usage Analytics

<script setup lang="ts">
const trackIntegrationClick = (integrationId) => {
  gtag('event', 'integration_click', {
    event_category: 'partnerships',
    event_label: integrationId
  })
}
</script>

Real-time Status

<script setup lang="ts">
const { data: integrationStatus } = await $fetch('/api/integration-status')

const integrationsWithStatus = computed(() => 
  integrations.value.map(integration => ({
    ...integration,
    status: integrationStatus.value[integration.id] || 'unknown'
  }))
)
</script>

SEO Benefits

Structured Data

<script setup lang="ts">
const integrationsSchema = {
  "@context": "https://schema.org",
  "@type": "SoftwareApplication",
  "name": "ClawPlate",
  "applicationCategory": "BusinessApplication",
  "operatingSystem": "Web",
  "offers": {
    "@type": "Offer",
    "description": "Integrates with 100+ popular services"
  }
}
</script>

Partnership SEO

• Integration-specific landing pages
• Partner backlink opportunities
• Ecosystem keyword targeting
• Authority building

Accessibility

Screen Reader Support

• Alt text for all logos
• Descriptive integration names
• Category labels
• Status indicators

Keyboard Navigation

• Tab navigation through integrations
• Enter key activation
• Category filter navigation
• Skip links for large lists

Performance Optimization

Image Loading

<template>
  <NuxtImg
    :src="integration.logo"
    :alt="integration.name"
    format="webp"
    loading="lazy"
    class="integration-logo"
  />
</template>

Virtual Scrolling

For large integration lists:

<template>
  <VirtualList 
    :items="integrations"
    :item-height="120"
    class="integrations-grid"
  >
    <template #default="{ item }">
      <IntegrationCard :integration="item" />
    </template>
  </VirtualList>
</template>

Related Components

• HappyClients - Client showcase
• Features - Product features
• Testimonials - Customer feedback
• Pricing - Pricing tiers with integrations