jan/website/PRODUCTS_PAGE_README.MD

Jan Products Page - Retro-Tech Design System

A futuristic products showcase page that combines the nostalgic aesthetics of RadioShack's electronic components with PostHog's modern data visualization approach. This creates a unique "retro-tech" visual language that feels both familiar and cutting-edge.

Design Philosophy

RadioShack + PostHog = Retro-Tech

• RadioShack Heritage: Circuit board patterns, electronic components, terminal interfaces, amber/green CRT colors
• PostHog Influence: Clean data cards, status indicators, system metrics, dashboard layouts
• Result: A cohesive aesthetic that makes AI products feel like sophisticated electronic equipment

Color Palette

--retro-green: #00ff41    /* Matrix green, primary brand */
--retro-amber: #ffb000    /* Classic terminal amber */
--retro-blue: #00bfff     /* Processing/loading states */
--retro-red: #ff0040      /* Error/warning states */
--retro-cyan: #00ffff     /* Accent highlights */
--retro-magenta: #ff00ff  /* Special effects */

Architecture

File Structure

jan/website/src/
├── pages/
│   └── prods.astro              # Main products page
├── components/
│   ├── CircuitBackground.astro  # Animated circuit patterns
│   ├── StatusIndicator.astro    # System status components
│   ├── RetroCard.astro          # Terminal-style cards
│   └── FloatingNav.astro        # Floating navigation menu
├── layouts/
│   └── Layout.astro             # Base layout with GSAP
└── styles/
    └── retro-effects.css        # Advanced visual effects

Component Hierarchy

Layout
└── Products Page
    ├── FloatingNav (right-side navigation)
    ├── Hero Section
    │   └── CircuitBackground (animated)
    ├── Table of Contents
    ├── Models Section
    │   └── RetroCard (circuit variant)
    ├── Platforms Section
    │   └── RetroCard (data/system variants)
    ├── Tools Section
    │   └── RetroCard (terminal variant)
    └── Integration Section

Components Deep Dive

CircuitBackground.astro

Creates animated circuit board patterns with electronic components.

Props:

• variant: 'subtle' | 'prominent' | 'animated'
• color: 'green' | 'amber' | 'blue' | 'multi'
• density: 'low' | 'medium' | 'high'
• animated: boolean
• opacity: number (0-1)

Features:

• Procedural circuit patterns
• Animated electronic components (LEDs, resistors, capacitors)
• Flowing data lines
• Responsive grid scaling

StatusIndicator.astro

Terminal-style system status indicators with pulsing animations.

Props:

• status: 'active' | 'warning' | 'success' | 'error' | 'idle'
• label: string
• pulse: boolean
• size: 'small' | 'medium' | 'large'

Features:

• Animated status dots with glow effects
• Color-coded status states
• Accessibility compliant
• Reduced motion support

RetroCard.astro

Terminal-inspired cards with scanlines, CRT effects, and interactive animations.

Props:

• variant: 'terminal' | 'circuit' | 'data' | 'system'
• color: 'green' | 'amber' | 'blue' | 'red' | 'multi'
• size: 'small' | 'medium' | 'large'
• glitch: boolean
• scanlines: boolean
• glow: boolean
• interactive: boolean
• status: 'online' | 'offline' | 'error' | 'warning' | 'processing'

Features:

• CRT monitor bezels with power indicators
• Animated scanlines and glitch effects
• Terminal-style headers with traffic light controls
• Interactive hover states with 3D transforms
• Corner brackets for retro-futuristic framing

FloatingNav.astro

Floating navigation with terminal interface and system monitoring.

Props:

• sections: Array of navigation items with icons and status
• position: 'left' | 'right'
• theme: 'dark' | 'matrix' | 'circuit'
• compact: boolean

Features:

• Terminal-style command prompt
• Real-time system status indicators
• Animated progress bars
• Circuit connection lines
• Smooth scrolling with GSAP integration

Animations & Effects

GSAP Integration

The page uses GSAP (GreenSock Animation Platform) for sophisticated animations:

Timeline Animations:

• Hero section entrance with staggered reveals
• Section headers with typewriter effects
• Card appearances with 3D transforms

Scroll Triggers:

• Elements animate into view as user scrolls
• Parallax effects on background elements
• Progressive content revelation

Interactive Animations:

• Magnetic cursor effects on cards
• 3D hover transformations
• Ripple effects on clicks

CSS-Only Effects

Enhanced with pure CSS animations for performance:

Visual Effects:

• CRT scanlines and monitor bezels
• Matrix-style character rain
• Glitch text distortions
• Neon glow and pulsing lights

Component Animations:

• Electronic component blinking (LEDs)
• Data stream flowing effects
• Circuit trace pulsing
• Status indicator breathing

Performance Optimizations

Lazy Loading

• GSAP libraries loaded from CDN
• Animations initialized after DOM ready
• Circuit patterns use CSS transforms for GPU acceleration

Reduced Motion Support

@media (prefers-reduced-motion: reduce) {
  /* All animations disabled for accessibility */
}

Mobile Optimizations

• Responsive grid layouts
• Touch-friendly interactive elements
• Optimized animation performance
• Reduced visual effects on smaller screens

Accessibility Features

WCAG Compliance

• High contrast mode support
• Focus indicators for keyboard navigation
• Screen reader friendly markup
• Semantic HTML structure

Keyboard Navigation

• Tab order follows logical flow
• Escape key closes floating navigation
• Arrow keys for menu navigation
• Enter/Space for activation

Color Accessibility

• Sufficient contrast ratios maintained
• Status information not solely color-dependent
• Alternative text for decorative elements

Customization Guide

Adding New Sections

1. Add section to main page
2. Update FloatingNav sections array
3. Add corresponding GSAP animations
4. Update TOC links

Creating New Card Variants

<RetroCard
  variant="custom"
  color="blue"
  title="New Product"
  subtitle="Description"
  status="active"
>
  <!-- Content -->
</RetroCard>

Custom Circuit Patterns

<CircuitBackground
  variant="prominent"
  color="amber"
  density="high"
  animated={true}
  opacity={0.2}
/>

Color Theme Customization

Override CSS custom properties:

:root {
  --retro-green: #your-color;
  --retro-amber: #your-color;
  /* etc. */
}

Dependencies

Required

• Astro ^5.6.1
• GSAP (loaded from CDN)
• JetBrains Mono font

Optional Enhancements

• Sharp for image optimization
• Additional GSAP plugins for advanced effects

Browser Support

Fully Supported

• Chrome 88+
• Firefox 85+
• Safari 14+
• Edge 88+

Graceful Degradation

• Older browsers receive static layout
• CSS fallbacks for unsupported features
• Progressive enhancement approach

Development Commands

# Start development server
npm run dev

# Build for production
npm run build

# Preview production build
npm run preview

Future Enhancements

Planned Features

• Sound effects for interactions
• More electronic component animations
• Additional card variants
• Theme switching capability
• Advanced glitch effects

Performance Improvements

• WebGL circuit backgrounds
• Intersection Observer for animations
• Service worker for offline support
• Image lazy loading optimization

Contributing

When adding new components or effects:

1. Follow the retro-tech design language
2. Ensure accessibility compliance
3. Add reduced motion alternatives
4. Test on multiple devices
5. Document new props and features

---

Created with ❤️ and a healthy dose of 80s nostalgia