HappyClients Component

Client showcase component displaying satisfied customers, logos, and success metrics. Perfect for building trust and social proof.

Overview

The HappyClients component showcases your satisfied customers through logos, testimonials, and success metrics. It builds credibility and trust by displaying social proof from recognizable brands and clients.

Preview

Basic Usage

<template>
  <section class="social-proof">
    <HappyClients 
      title="Trusted by 1000+ Companies"
      subtitle="Join the companies that trust ClawPlate"
    />
  </section>
</template>

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

Features

🏢 Client Logos

• Company logo carousel
• Responsive logo sizing
• Hover animations
• Grayscale to color effects

📊 Success Metrics

• Customer satisfaction scores
• Usage statistics
• Growth numbers
• Performance metrics

💬 Quick Testimonials

• Short client quotes
• Company attribution
• Role/position display
• Star ratings

🎨 Visual Design

• Clean, professional layout
• Responsive grid system
• Smooth animations
• Brand-consistent styling

Component API

Props

Prop	Type	Default	Description
title	string	'Happy Clients'	Section title
subtitle	string	undefined	Optional subtitle
showLogos	boolean	true	Display client logos
showMetrics	boolean	true	Show success metrics
showQuotes	boolean	false	Include testimonial quotes
autoplay	boolean	true	Auto-rotate logos

Data Structure

interface Client {
  id: string
  name: string
  logo: string
  logoAlt: string
  website?: string
  testimonial?: {
    quote: string
    author: string
    role: string
    rating: number
  }
}

interface Metric {
  id: string
  value: string
  label: string
  icon?: string
}

Layout Variants

Logo Grid

<HappyClients 
  layout="grid"
  :show-metrics="false"
  :show-quotes="false"
/>

Logo Carousel

<HappyClients 
  layout="carousel"
  :autoplay="true"
  :show-metrics="true"
/>

Mixed Content

<HappyClients 
  layout="mixed"
  :show-logos="true"
  :show-metrics="true"
  :show-quotes="true"
/>

Client Data Examples

Basic Client List

const clients = [
  {
    id: 'company-1',
    name: 'TechCorp Inc.',
    logo: '/logos/techcorp.svg',
    logoAlt: 'TechCorp Inc. logo',
    website: 'https://techcorp.com'
  },
  {
    id: 'company-2',
    name: 'StartupXYZ',
    logo: '/logos/startupxyz.svg',
    logoAlt: 'StartupXYZ logo',
    testimonial: {
      quote: 'ClawPlate helped us launch 3x faster!',
      author: 'Jane Smith',
      role: 'CTO',
      rating: 5
    }
  }
]

Success Metrics

const metrics = [
  {
    id: 'satisfaction',
    value: '98%',
    label: 'Customer Satisfaction',
    icon: 'heroicons:face-smile'
  },
  {
    id: 'users',
    value: '10K+',
    label: 'Active Users',
    icon: 'heroicons:users'
  },
  {
    id: 'uptime',
    value: '99.9%',
    label: 'Uptime',
    icon: 'heroicons:check-circle'
  }
]

Styling Options

Logo Styling

<!-- Grayscale logos with color on hover -->
<div class="logo-container">
  <img 
    class="grayscale hover:grayscale-0 transition-all duration-300"
    :src="client.logo"
    :alt="client.logoAlt"
  />
</div>

Metrics Display

<div class="metric-card">
  <Icon :name="metric.icon" class="text-blue-500" />
  <span class="text-3xl font-bold">{{ metric.value }}</span>
  <span class="text-gray-600">{{ metric.label }}</span>
</div>

Animation Features

Logo Carousel

• Smooth horizontal scrolling
• Auto-play with pause on hover
• Infinite loop animation
• Responsive speed adjustment

Entrance Animations

• Staggered logo appearance
• Metric counter animations
• Fade-in effects
• Scroll-triggered animations

Integration Examples

Dynamic Client Data

<script setup lang="ts">
const { data: clients } = await $fetch('/api/clients')
const { data: metrics } = await $fetch('/api/metrics')
</script>

<template>
  <HappyClients 
    :clients="clients"
    :metrics="metrics"
    :autoplay="true"
  />
</template>

With Analytics Tracking

<script setup lang="ts">
const trackClientClick = (clientId) => {
  gtag('event', 'client_logo_click', {
    event_category: 'social_proof',
    event_label: clientId
  })
}
</script>

<template>
  <HappyClients @client-click="trackClientClick" />
</template>

A/B Testing

<script setup lang="ts">
const variant = await $fetch('/api/ab-test/happy-clients')

const config = {
  showLogos: variant !== 'minimal',
  showMetrics: variant === 'full',
  layout: variant === 'carousel' ? 'carousel' : 'grid'
}
</script>

Accessibility Features

Screen Reader Support

• Alt text for all logos
• Descriptive labels for metrics
• Proper heading hierarchy
• ARIA labels for interactive elements

Keyboard Navigation

• Tab navigation through logos
• Focus indicators
• Keyboard controls for carousel
• Skip links for long lists

Performance Optimization

Image Optimization

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

Lazy Loading

• Load logos as they enter viewport
• Progressive enhancement
• Skeleton loading states
• Optimized image formats

SEO Benefits

Structured Data

<script setup lang="ts">
const organizationSchema = {
  "@context": "https://schema.org",
  "@type": "Organization",
  "name": "ClawPlate",
  "hasCredential": clients.map(client => ({
    "@type": "EducationalOccupationalCredential",
    "credentialCategory": "Client Testimonial",
    "recognizedBy": {
      "@type": "Organization",
      "name": client.name
    }
  }))
}
</script>

Trust Signals

• Brand association benefits
• Social proof for SEO
• Credibility indicators
• Authority building

Related Components

• Testimonials - Detailed customer testimonials
• StatsCards - Performance statistics
• Features - Product features
• Pricing - Pricing information