HeroComponent Component

Complete hero section component that combines all hero elements into a cohesive, conversion-optimized landing section. The centerpiece of your landing page.

Overview

The HeroComponent serves as the main hero section that combines HeroText, HeroButtons, and background elements into a complete, conversion-focused landing section. It's designed to make a strong first impression and drive user actions.

Preview

Basic Usage

<template>
  <main>
    <HeroComponent />
    <Features />
    <Pricing />
  </main>
</template>

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

Features

🎯 Complete Hero Section

• Integrated text and action elements
• Background effects and animations
• Responsive layout design
• Conversion-optimized structure

✨ Visual Effects

• Gradient backgrounds
• Particle animations (optional)
• Scroll-triggered animations
• Interactive elements

📱 Responsive Design

• Mobile-first approach
• Tablet optimization
• Desktop enhancements
• Cross-device compatibility

🔄 Component Integration

• HeroText component
• HeroButtons component
• Background elements
• Animation systems

Component Structure

The HeroComponent combines multiple sub-components:

<template>
  <section class="hero-section">
    <!-- Background Elements -->
    <div class="hero-background">
      <div class="gradient-overlay"></div>
      <div class="particle-system"></div>
    </div>
    
    <!-- Content -->
    <div class="hero-content">
      <HeroText />
      <HeroButtons />
    </div>
    
    <!-- Additional Elements -->
    <div class="hero-extras">
      <ScrollIndicator />
      <SocialProof />
    </div>
  </section>
</template>

Customization Options

Background Variants

<!-- Gradient Background -->
<HeroComponent background="gradient" />

<!-- Video Background -->
<HeroComponent background="video" video-src="/hero-bg.mp4" />

<!-- Image Background -->
<HeroComponent background="image" image-src="/hero-bg.jpg" />

<!-- Particle Effects -->
<HeroComponent :particles="true" />

Layout Variants

<!-- Centered Layout -->
<HeroComponent layout="centered" />

<!-- Split Layout -->
<HeroComponent layout="split" />

<!-- Full Height -->
<HeroComponent :full-height="true" />

Animation Integration

Scroll Animations

<script setup lang="ts">
const heroRef = ref(null)

onMounted(() => {
  // Initialize scroll animations
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('animate-in')
      }
    })
  })
  
  if (heroRef.value) {
    observer.observe(heroRef.value)
  }
})
</script>

Staggered Entrance

Elements appear in sequence for maximum impact:

1. Background elements fade in
2. Hero text slides up
3. Buttons appear with delay
4. Additional elements follow

Performance Optimization

Lazy Loading

<template>
  <HeroComponent>
    <!-- Critical content loads immediately -->
    <template #above-fold>
      <HeroText />
      <HeroButtons />
    </template>
    
    <!-- Non-critical content loads after -->
    <template #below-fold>
      <ParticleSystem v-if="shouldLoadParticles" />
      <BackgroundVideo v-if="shouldLoadVideo" />
    </template>
  </HeroComponent>
</template>

Image Optimization

• WebP format support
• Responsive image loading
• Preload critical images
• Lazy load background elements

SEO Optimization

Structured Data

<script setup lang="ts">
useHead({
  script: [{
    type: 'application/ld+json',
    children: JSON.stringify({
      "@context": "https://schema.org",
      "@type": "WebPage",
      "name": "ClawPlate - SaaS Boilerplate",
      "description": "Modern SaaS boilerplate with Nuxt 4, Vue 3, Supabase & Stripe"
    })
  }]
})
</script>

Meta Tags

• Open Graph tags
• Twitter Card data
• Canonical URLs
• Schema markup

Analytics Integration

Conversion Tracking

<script setup lang="ts">
const trackHeroInteraction = (action) => {
  gtag('event', 'hero_interaction', {
    event_category: 'engagement',
    event_label: action,
    value: 1
  })
}

// Track button clicks, scroll depth, time on page
</script>

A/B Testing

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

const heroConfig = {
  variant: heroVariant,
  showParticles: heroVariant === 'premium',
  layout: heroVariant === 'minimal' ? 'simple' : 'full'
}
</script>

Accessibility Features

Screen Reader Support

• Proper heading hierarchy
• Alt text for images
• ARIA labels for interactive elements
• Skip navigation links

Keyboard Navigation

• Tab order optimization
• Focus management
• Keyboard shortcuts
• Skip to content links

Integration Examples

With CMS Content

<script setup lang="ts">
const { data: heroContent } = await $fetch('/api/cms/hero-content')
</script>

<template>
  <HeroComponent 
    :title="heroContent.title"
    :subtitle="heroContent.subtitle"
    :cta-text="heroContent.ctaText"
    :background-image="heroContent.backgroundImage"
  />
</template>

With User Personalization

<script setup lang="ts">
const user = useSupabaseUser()
const isReturningUser = computed(() => !!user.value)

const heroConfig = computed(() => ({
  title: isReturningUser.value 
    ? `Welcome back, ${user.value.name}!` 
    : 'Build Your SaaS Faster',
  showOnboarding: !isReturningUser.value
}))
</script>

Related Components

• HeroText - Hero text content
• HeroButtons - Hero action buttons
• PromoBadge - Promotional elements
• Features - Features section below hero