HeroButtons Component

Action buttons for the hero section featuring a primary ScratchButton for purchasing and a secondary button for additional actions. Designed for maximum conversion.

Overview

The HeroButtons component provides the primary call-to-action buttons in your hero section. It combines an interactive ScratchButton for the main action with a secondary button for alternative actions, creating a clear conversion funnel.

Preview

Basic Usage

<template>
  <div class="hero-section">
    <HeroText />
    <HeroButtons />
  </div>
</template>

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

Features

🎯 Primary Action Button

• ScratchButton component integration
• Gamified interaction experience
• Direct Stripe payment integration
• Configurable animation duration

🔘 Secondary Action Button

• Clean, minimal design
• Icon integration
• Hover animations
• Alternative action pathway

💳 Payment Integration

• Direct Stripe price ID integration
• GitHub username collection
• Seamless checkout flow

🌍 Internationalization

• Translatable button labels
• Multi-language support

Component Structure

<template>
  <div class="flex items-center justify-center gap-4 z-50 mt-6">
    <!-- Primary Action: Scratch Button -->
    <ScratchButton
      label="Get Clawplate"
      size="medium"
      :animation-duration="1200"
      price-id="price_1S7Kq1Ih7ZM91THJ0Y1xZBSY"
      github-username=""
    />
    
    <!-- Secondary Action Button -->
    <button class="secondary-button">
      <span class="button-content">
        <Icon name="streamline-freehand-color:website-development-browser-page-layout" />
        <span>{{ $t('heroSection.heroButton2') }}</span>
      </span>
    </button>
  </div>
</template>

Component API

Props

This component doesn't accept props. Configuration is handled through the ScratchButton component and i18n.

Events

Events are handled by child components:

• ScratchButton emits purchase-related events
• Secondary button can be configured for custom actions

Slots

No slots are available. Content is predefined.

ScratchButton Configuration

Props Used

Prop	Value	Description
label	"Get Clawplate"	Button text
size	"medium"	Button size variant
animation-duration	1200	Scratch animation duration (ms)
price-id	"price_1S7Kq1Ih7ZM91THJ0Y1xZBSY"	Stripe price ID
github-username	""	GitHub username for access

Customizing the Primary Button

<ScratchButton
  label="Your Custom Label"
  size="large"
  :animation-duration="1500"
  price-id="your-stripe-price-id"
  github-username="your-github-username"
/>

Secondary Button Styling

CSS Classes Structure

<!-- Outer container with shadow -->
<button class="space-x-2 rounded-full flex items-center justify-center shadow-2xl shadow-green-500">
  
  <!-- Inner content with hover effects -->
  <span class="flex items-center justify-center px-4 py-3 rounded-full shadow-2xl space-x-2 hover:bg-gray-50 hover:transition-all bg-gray-100 border">
    
    <!-- Icon and text -->
    <Icon name="icon-name" class="w-4 h-4 px-2" />
    <span class="text-sm group-hover:text-green-600 transition-all duration-300">
      {{ $t('heroSection.heroButton2') }}
    </span>
  </span>
</button>

Hover Effects

• Background color change (hover:bg-gray-50)
• Text color transition (group-hover:text-green-600)
• Smooth transitions (transition-all duration-300)

Internationalization

Configure button text in your i18n files:

{
  "heroSection": {
    "heroButton2": "View Demo"
  }
}

Translation Examples

English (en.json)

{
  "heroSection": {
    "heroButton2": "View Demo"
  }
}

French (fr.json)

{
  "heroSection": {
    "heroButton2": "Voir la Démo"
  }
}

Styling Details

Layout Classes

<div class="flex items-center justify-center gap-4 z-50 mt-6">

• Flexbox horizontal layout
• Centered alignment
• 4-unit gap between buttons
• High z-index for layering
• Top margin for spacing

Shadow Effects

<!-- Green shadow for visual emphasis -->
<button class="shadow-2xl shadow-green-500">

<!-- Multiple shadow layers -->
<span class="shadow-2xl">

Customization

Changing Button Colors

<!-- Blue theme -->
<button class="shadow-2xl shadow-blue-500">
  <span class="hover:bg-blue-50 bg-blue-100 group-hover:text-blue-600">

<!-- Purple theme -->
<button class="shadow-2xl shadow-purple-500">
  <span class="hover:bg-purple-50 bg-purple-100 group-hover:text-purple-600">

Adding More Buttons

<div class="flex items-center justify-center gap-4 z-50 mt-6">
  <ScratchButton />
  
  <!-- Secondary button -->
  <button class="secondary-button">...</button>
  
  <!-- Tertiary button -->
  <button class="tertiary-button">
    <Icon name="your-icon" />
    <span>{{ $t('heroSection.heroButton3') }}</span>
  </button>
</div>

Custom Secondary Action

<button @click="handleSecondaryAction" class="secondary-button">
  <span class="button-content">
    <Icon name="your-icon" />
    <span>{{ $t('heroSection.heroButton2') }}</span>
  </span>
</button>

const handleSecondaryAction = () => {
  // Your custom action
  navigateTo('/demo')
  // or
  window.open('https://your-demo-url.com', '_blank')
}

Integration Examples

With Analytics Tracking

<template>
  <div class="flex items-center justify-center gap-4 z-50 mt-6">
    <ScratchButton
      @purchase-initiated="trackPurchase"
      @purchase-completed="trackConversion"
    />
    
    <button @click="trackSecondaryAction" class="secondary-button">
      <!-- Button content -->
    </button>
  </div>
</template>

<script setup lang="ts">
const trackPurchase = () => {
  gtag('event', 'purchase_initiated', {
    event_category: 'ecommerce',
    event_label: 'hero_section'
  })
}

const trackSecondaryAction = () => {
  gtag('event', 'demo_view', {
    event_category: 'engagement',
    event_label: 'hero_section'
  })
}
</script>

Responsive Button Stack

<div class="flex flex-col sm:flex-row items-center justify-center gap-4 z-50 mt-6">
  <!-- Buttons stack vertically on mobile, horizontally on desktop -->
</div>

Accessibility

Keyboard Navigation

• Both buttons are fully keyboard accessible
• Tab order follows logical sequence
• Enter/Space key activation

Screen Reader Support

• Descriptive button text
• Icon labels where appropriate
• Proper focus management

ARIA Attributes

<button 
  aria-label="View product demo"
  role="button"
>
  <!-- Button content -->
</button>

Performance

Optimized Interactions

• CSS transitions for smooth animations
• Efficient event handling
• Minimal DOM manipulation

Loading States

Consider adding loading states for async actions:

<button :disabled="isLoading" class="secondary-button">
  <Icon v-if="isLoading" name="loading-spinner" class="animate-spin" />
  <Icon v-else name="demo-icon" />
  <span>{{ isLoading ? 'Loading...' : $t('heroSection.heroButton2') }}</span>
</button>

Related Components

• HeroText - Hero section text content
• HeroComponent - Complete hero wrapper
• Button - Alternative button component

Dependencies

• ScratchButton - Interactive scratch-off button
• Nuxt Icons - For button icons
• Nuxt i18n - For internationalization
• Stripe - For payment processing
• Tailwind CSS - For styling