Component Specifications - LeadFive Website

Core Component Library

1. Hero Section with 3D Brain Network

Component: HeroSection

Purpose: Create an impactful first impression with interactive 3D visualization

Technical Specifications:

interface HeroSectionProps {
  title: string
  subtitle: string
  ctaPrimary: CTAButton
  ctaSecondary: CTAButton
  backgroundAnimation: '3d-brain' | 'particles' | 'gradient'
}

interface CTAButton {
  text: string
  href: string
  variant: 'primary' | 'secondary'
  onClick?: () => void
}

3D Implementation Details:

Performance Considerations:

2. Interactive Desire Octagon

Component: DesireOctagon

Purpose: Visualize 8 fundamental human desires with interactive exploration

Technical Specifications:

interface DesireOctagonProps {
  desires: Desire[]
  onDesireSelect: (desire: Desire) => void
  animationDelay?: number
  size?: 'small' | 'medium' | 'large'
}

interface Desire {
  id: number
  name: string
  namejp: string
  icon: string
  color: string
  description: string
  marketingApplication: string
  examples: string[]
}

Interaction Design:

Animation Specifications:

3. AI Chat Interface

Component: AIChat

Purpose: Real-time AI-powered consultation interface

Technical Specifications:

interface AIChatProps {
  apiEndpoint: string
  welcomeMessage: string
  placeholder: string
  maxMessages?: number
  enableVoice?: boolean
  theme?: ChatTheme
}

interface ChatTheme {
  primaryColor: string
  backgroundColor: string
  textColor: string
  borderRadius: number
}

interface Message {
  id: string
  role: 'user' | 'assistant' | 'system'
  content: string
  timestamp: Date
  metadata?: {
    tokens?: number
    model?: string
    error?: boolean
  }
}

Features:

AI Integration:

4. Blog Post Card

Component: BlogPostCard

Purpose: Display blog posts with AI-generated summaries

Technical Specifications:

interface BlogPostCardProps {
  post: BlogPost
  variant: 'compact' | 'featured' | 'list'
  showSummary?: boolean
  onReadMore?: () => void
}

interface BlogPost {
  id: string
  title: string
  excerpt: string
  content: string
  featuredImage: {
    url: string
    alt: string
    width: number
    height: number
  }
  author: Author
  publishedAt: Date
  categories: Category[]
  tags: string[]
  readingTime: number
  aiSummary?: string
}

Responsive Behavior:

5. Performance Monitor

Component: PerformanceMonitor

Purpose: Track and optimize real-time performance

Technical Specifications:

interface PerformanceMetrics {
  fps: number
  memory: number
  loadTime: number
  interactionDelay: number
  renderTime: number
}

class PerformanceMonitor {
  private metrics: PerformanceMetrics
  private observers: PerformanceObserver[]
  
  startMonitoring(): void
  stopMonitoring(): void
  getMetrics(): PerformanceMetrics
  optimizeForDevice(): void
}

Optimization Triggers:

Shared UI Components

Button Component

interface ButtonProps {
  variant: 'primary' | 'secondary' | 'ghost' | 'danger'
  size: 'small' | 'medium' | 'large'
  fullWidth?: boolean
  loading?: boolean
  disabled?: boolean
  icon?: React.ReactNode
  children: React.ReactNode
  onClick?: () => void
}

Card Component

interface CardProps {
  variant: 'elevated' | 'outlined' | 'filled'
  padding: 'none' | 'small' | 'medium' | 'large'
  interactive?: boolean
  className?: string
  children: React.ReactNode
}

interface ModalProps {
  isOpen: boolean
  onClose: () => void
  title?: string
  size: 'small' | 'medium' | 'large' | 'fullscreen'
  closeOnOverlayClick?: boolean
  showCloseButton?: boolean
  children: React.ReactNode
}

Animation Specifications

Global Animation Settings

const animations = {
  // Timing functions
  easing: {
    default: 'cubic-bezier(0.4, 0, 0.2, 1)',
    bounce: 'cubic-bezier(0.68, -0.55, 0.265, 1.55)',
    smooth: 'cubic-bezier(0.4, 0, 0.2, 1)'
  },
  
  // Duration presets
  duration: {
    instant: 150,
    fast: 250,
    normal: 400,
    slow: 600
  },
  
  // Spring presets
  spring: {
    default: { stiffness: 300, damping: 30 },
    wobbly: { stiffness: 180, damping: 12 },
    stiff: { stiffness: 400, damping: 40 }
  }
}

Page Transition Specifications

const pageTransitions = {
  initial: { opacity: 0, y: 20 },
  animate: { opacity: 1, y: 0 },
  exit: { opacity: 0, y: -20 },
  transition: { duration: 0.4, ease: 'easeInOut' }
}

Accessibility Requirements

WCAG 2.1 AA Compliance

Keyboard Navigation Map

Tab: Navigate forward
Shift+Tab: Navigate backward
Enter/Space: Activate buttons
Arrow keys: Navigate within components
Escape: Close modals/dropdowns

Responsive Design Breakpoints

$breakpoints: (
  'mobile': 320px,
  'mobile-lg': 480px,
  'tablet': 768px,
  'tablet-lg': 1024px,
  'desktop': 1280px,
  'desktop-lg': 1440px,
  'desktop-xl': 1920px
);

Component Testing Strategy

Unit Tests

Integration Tests

Visual Regression Tests

Performance Budgets

Component-Level Budgets

| Component | JS Size | CSS Size | Initial Render | |———–|———|———-|—————-| | HeroSection | < 50KB | < 10KB | < 100ms | | DesireOctagon | < 30KB | < 8KB | < 80ms | | AIChat | < 40KB | < 12KB | < 150ms | | BlogPostCard | < 20KB | < 5KB | < 50ms |

Page-Level Budgets

Document Version: 1.0
Date: 2025-08-05
Status: Component Specifications