### Install Dependencies

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-example.mdx

Installs the required front-end libraries for the header slider component. This includes Bootstrap for styling, Swiper for carousel functionality, Bootstrap Icons for icons, and AOS for animations.

```bash
npm install bootstrap swiper bootstrap-icons aos
```

--------------------------------

### Development setup and commands for Juniper UI in Bash

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/README.mdx

Provides essential commands for setting up the development environment, including cloning the repository, installing dependencies, running the development server, executing tests, and building for production.

```bash
# Fork and clone
git clone https://github.com/your-username/juniper-ui.git
cd juniper-ui

# Install dependencies
npm install

# Start development server
npm run dev

# Run tests
npm test

# Build for production
npm run build
```

--------------------------------

### Choosing Juniper UI Documentation

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/README.mdx

A guide to selecting the appropriate Juniper UI documentation based on user needs, such as learning, quick implementation, or production projects. It maps specific needs to the Developer Guide, Quick Reference, and Complete Example documentation types.

```markdown
| Need | Start With | Then Reference |
|------|------------|----------------|
| **Learning** | Developer Guide | Quick Reference for patterns |
| **Quick Implementation** | Quick Reference | Example for complete code |
| **Production Project** | Example | Developer Guide for customization |
| **AI-Assisted Development** | Quick Reference | Developer Guide for context |
| **Troubleshooting** | Developer Guide | Quick Reference for solutions |
```

--------------------------------

### Juniper UI Documentation Comparison

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/README.mdx

A comparative analysis of the Juniper UI documentation types (Developer Guide, Quick Reference, Example) across key aspects like length, focus, learning curve, implementation speed, and code completeness. This helps users understand the trade-offs and benefits of each documentation style.

```markdown
| Aspect | Developer Guide | Quick Reference | Example |
|--------|----------------|-----------------|---------|
| **Length** | 972 lines | 473 lines | 594 lines |
| **Focus** | Theory + Practice | Practical patterns | Working implementation |
| **Learning Curve** | Steep | Shallow | Moderate |
| **Implementation Speed** | Slow | Fast | Medium |
| **Code Completeness** | Partial examples | Essential snippets | Complete working code |
```

--------------------------------

### Documentation Setup and Contribution Workflow (Bash)

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/README.mdx

Outlines the steps for setting up the documentation repository, including forking, cloning, creating a new branch, making changes, and pushing them. This is a standard Git workflow for contributing to projects.

```bash
# Fork and clone the documentation repository
git clone https://github.com/your-username/juniper-docs.git
cd juniper-docs

# Create a new branch for your changes
git checkout -b feature/update-documentation

# Make your changes to the MDX files
# Add new component documentation
# Update existing examples

# Commit and push your changes
git add .
git commit -m "Add documentation for new component"
git push origin feature/update-documentation
```

--------------------------------

### JavaScript Dependency Imports

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-developer-guide.mdx

Demonstrates how to import necessary JavaScript modules for Bootstrap, Swiper (with specific modules), and AOS in your main application file.

```javascript
import 'bootstrap';
import Swiper from 'swiper';
import { Navigation, Pagination, Autoplay, EffectFade } from 'swiper/modules';
import AOS from 'aos';
import 'aos/dist/aos.css';
```

--------------------------------

### JavaScript Module Import

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-example.mdx

This snippet shows how to import a JavaScript module for interactive features. It's typically used to load client-side scripts that enhance the user experience.

```JavaScript
import './script.js';
```

--------------------------------

### Header Slider Widget Documentation Options

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/README.mdx

Details the different documentation types available for the Header Slider widget: Developer Guide for in-depth understanding, Quick Reference for rapid implementation, and Complete Example for production-ready code. It guides users on choosing the appropriate documentation based on their needs.

```markdown
### 📚 **Developer Guide** (`widgets/header-slider-widget/header-slider-developer-guide.mdx`)
**Complete reference manual** for deep understanding and implementation.

**Use when:**
- Learning the component architecture and best practices
- Implementing complex customizations
- Troubleshooting issues
- Training team members
- Need comprehensive theoretical coverage

**Features:**
- Complete component architecture breakdown
- Detailed JavaScript implementation patterns
- SCSS styling guide with variables
- Animation implementation with AOS
- Responsive design strategies
- Performance optimization techniques
- Accessibility features
- Common issues and solutions
- AI integration patterns

### 🚀 **Quick Reference** (`widgets/header-slider-widget/header-slider-quick-reference.mdx`)
**Fast lookup guide** for rapid implementation and development.

**Use when:**
- Need to implement the component quickly
- Working with AI assistants for code generation
- Doing rapid prototyping
- Already familiar with the concepts
- Need essential code patterns

**Features:**
- Essential HTML, CSS, and JavaScript patterns
- Common customization snippets
- Responsive breakpoint strategies
- AOS animation integration
- Performance optimization tips
- AI prompt templates
- Dependencies checklist

### 💡 **Complete Example** (`widgets/header-slider-widget/header-slider-example.mdx`)
**Production-ready implementation** to use as a starting point.

**Use when:**
- Starting a new project with the header slider
- Need a complete working implementation
- Want to see how everything fits together
- Need production-ready code to copy
- Implementing the component for the first time

**Features:**
- Full working HTML structure with real content
- Complete SCSS styles with all dependencies
- ApostropheCMS widget player implementation
- Real-world usage examples
- Setup instructions for immediate use
- Feature checklist of included functionality
```

--------------------------------

### AI Prompt Template: Basic Header Slider

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-developer-guide.mdx

A basic prompt template for AI assistants to generate a header slider component with essential features like multiple slides, navigation, and transitions.

```apidoc
Create a header slider component with the following specifications:
- 3 slides with different background images
- Main heading and subheading for each slide
- 2 call-to-action buttons per slide
- Navigation arrows and pagination dots
- Autoplay with 5-second intervals
- Fade transition effect
- Mobile responsive design
```

--------------------------------

### Required Project Dependencies

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-developer-guide.mdx

Lists the essential npm package dependencies required for the header slider widget, including Bootstrap, Swiper, Bootstrap Icons, and AOS.

```json
{
  "dependencies": {
    "bootstrap": "^5.3.2",
    "swiper": "^11.0.0",
    "bootstrap-icons": "^1.11.2",
    "aos": "^2.3.1"
  }
}
```

--------------------------------

### Optimize CSS, JavaScript, and images using npm scripts in Bash

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/README.mdx

Executes build scripts for asset optimization, including minification for CSS and JavaScript, and image optimization. Requires a project setup with npm.

```bash
# Optimize CSS
npm run build:css -- --minify

# Optimize JavaScript
npm run build:js -- --minify

# Optimize images
npm run optimize:images
```

--------------------------------

### JavaScript: Performance Monitoring for Header Slider

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-developer-guide.mdx

Demonstrates JavaScript code for performance monitoring using the Performance Observer API. It includes marking and measuring slide transition times to identify potential performance bottlenecks.

```javascript
// Performance monitoring
const performanceObserver = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.name.includes('header-slider')) {
      console.log('Header Slider Performance:', entry);
    }
  });
});

performanceObserver.observe({ entryTypes: ['measure'] });

// Measure slide transitions
performance.mark('slide-transition-start');
// ... transition code ...
performance.mark('slide-transition-end');
performance.measure('header-slider-transition', 'slide-transition-start', 'slide-transition-end');
```

--------------------------------

### Performance Monitoring Setup (JavaScript)

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/README.mdx

Configures Juniper UI's performance monitoring capabilities to track key metrics like load time and interaction time. The collected data can be sent to an analytics service for analysis and reporting.

```javascript
// Performance monitoring
JuniperUI.monitor({
    metrics: ['loadTime', 'renderTime', 'interactionTime'],
    report: function(data) {
        // Send to analytics
        analytics.track('juniper_performance', data);
    }
});
```

--------------------------------

### HTML Lists with Bootstrap Styling

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/elements/lists.mdx

Demonstrates the structure for unordered, ordered, and description lists using semantic HTML elements and Bootstrap utility classes. Includes examples for `list-unstyled`, `list-inline`, and Bootstrap's grid system for description lists.

```html
<!-- Unordered Lists -->
<ul class="list-unstyled">
  <li>First item</li>
  <li>Second item</li>
  <li>Third item</li>
</ul>

<ul class="list-inline">
  <li class="list-inline-item">Item 1</li>
  <li class="list-inline-item">Item 2</li>
  <li class="list-inline-item">Item 3</li>
</ul>

<!-- Ordered Lists -->
<ol class="list-decimal">
  <li>First ordered item</li>
  <li>Second ordered item</li>
  <li>Third ordered item</li>
</ol>

<!-- Description Lists -->
<dl class="row">
  <dt class="col-sm-3">Term</dt>
  <dd class="col-sm-9">Description for the term</dd>
  <dt class="col-sm-3">Another term</dt>
  <dd class="col-sm-9">Description for another term</dd>
</dl>
```

--------------------------------

### Initialize Basic Swiper Slider

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-developer-guide.mdx

Demonstrates the basic initialization of a Swiper slider using JavaScript. It includes essential configurations such as looping, fade effect, autoplay, navigation, and pagination. This snippet requires the Swiper library and a corresponding HTML structure.

```javascript
document.addEventListener('DOMContentLoaded', function() {
  const headerSlider = document.querySelector('[data-header-slider-widget] .header-swiper');
  
  if (headerSlider) {
    const swiper = new Swiper(headerSlider, {
      // Basic Configuration
      loop: true,
      effect: 'fade',
      speed: 1000,
      autoplay: {
        delay: 5000,
        disableOnInteraction: false,
      },
      
      // Navigation
      navigation: {
        nextEl: '.header-swiper-button-next',
        prevEl: '.header-swiper-button-prev',
      },
      
      // Pagination
      pagination: {
        el: '.header-swiper-pagination',
        clickable: true,
        dynamicBullets: true,
      },
      
      // Responsive Breakpoints
      breakpoints: {
        320: { slidesPerView: 1, spaceBetween: 0 },
        768: { slidesPerView: 1, spaceBetween: 0 },
        1024: { slidesPerView: 1, spaceBetween: 0 }
      }
    });
  }
});
```

--------------------------------

### ApostropheCMS Widget Player Pattern

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-developer-guide.mdx

Illustrates the standard pattern for registering custom widgets in ApostropheCMS using the `apos.util.widgetPlayers` system, defining a selector and an initialization function.

```javascript
export default () => {
  apos.util.widgetPlayers['widget-name'] = {
    selector: '[data-widget-name]',
    player: async function (el) {
      // Widget initialization code here
      // el is the widget element
    }
  };
};
```

--------------------------------

### AI Prompt Template: Advanced Header Slider Features

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-developer-guide.mdx

A prompt template for AI assistants to implement advanced functionalities in the header slider, such as lazy loading, animations, accessibility, and performance optimization.

```apidoc
Add advanced features to the header slider:
- Lazy loading for images
- AOS animations for slide content
- Accessibility features (ARIA labels)
- Performance optimization
- Custom event handlers
- Error handling and fallbacks
```

--------------------------------

### Header Slider Widget JavaScript Implementation

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-example.mdx

Implements the header slider widget using Swiper for carousel functionality and AOS for animations. It initializes AOS and Swiper with modules, autoplay, navigation, and pagination, and sets up event listeners for user interaction, autoplay control on hover, and window resizing.

```javascript
// Import dependencies
import Swiper from 'swiper';
import { Navigation, Pagination, Autoplay, EffectFade } from 'swiper/modules';
import AOS from 'aos';
import 'aos/dist/aos.css';

// Header Slider Widget Implementation
export default () => {
  apos.util.widgetPlayers['header-slider'] = {
    selector: '[data-header-slider-widget]',
    player: async function (el) {
      // Initialize AOS
      AOS.init({
        duration: 800,
        easing: 'ease-out',
        once: true,
        offset: 100,
        disable: 'mobile'
      });

      // Initialize Swiper
      const swiper = new Swiper(el.querySelector('.header-swiper'), {
        modules: [Navigation, Pagination, Autoplay, EffectFade],
        loop: true,
        effect: 'fade',
        speed: 1000,
        autoplay: {
          delay: 5000,
          disableOnInteraction: false,
          pauseOnMouseEnter: true,
          waitForTransition: true
        },
        navigation: {
          nextEl: '.header-swiper-button-next',
          prevEl: '.header-swiper-button-prev',
        },
        pagination: {
          el: '.header-swiper-pagination',
          clickable: true,
          dynamicBullets: true,
        },
        breakpoints: {
          320: { slidesPerView: 1, spaceBetween: 0 },
          768: { slidesPerView: 1, spaceBetween: 0 },
          1024: { slidesPerView: 1, spaceBetween: 0 }
        }
      });

      // Setup event listeners
      setupEventListeners(el, swiper);
      
      // Setup accessibility
      setupAccessibility(el);
    }
  };
};

// Setup event listeners
function setupEventListeners(element, swiper) {
  // Scroll indicator functionality
  const scrollIndicator = element.querySelector('.header-scroll-indicator');
  if (scrollIndicator) {
    scrollIndicator.addEventListener('click', () => {
      scrollToNextSection(element);
    });
  }

  // Pause autoplay on hover
  element.addEventListener('mouseenter', () => {
    swiper.autoplay.stop();
  });

  element.addEventListener('mouseleave', () => {
    swiper.autoplay.start();
  });

  // Window resize handling
  window.addEventListener('resize', () => {
    swiper.update();
  });
}

// Setup accessibility
function setupAccessibility(element) {
  // Add ARIA labels
  element.setAttribute('role', 'region');
  element.setAttribute('aria-label', 'Hero slider');
  
  const swiperContainer = element.querySelector('.header-swiper');
  if (swiperContainer) {
    swiperContainer.setAttribute('role', 'application');
    swiperContainer.setAttribute('aria-label', 'Image carousel');
  }
}

// Scroll to next section
function scrollToNextSection(element) {
  const nextSection = element.nextElementSibling;
  
  if (nextSection) {
    nextSection.scrollIntoView({
      behavior: 'smooth',
      block: 'start'
    });
  }
}

```

--------------------------------

### Best Practice: Avoid Inline Styles

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-developer-guide.mdx

Demonstrates the incorrect use of inline styles in HTML for background images and styling, contrasting it with the recommended approach using data attributes and CSS classes for better maintainability and separation of concerns.

```html
<!-- Avoid this -->
<div class="header-slide-background" style="background-image: url('/image.jpg')">
<div class="widget" style="background-color: #007bff; padding: 2rem;">

<!-- Use this approach -->
<div class="header-slide-background" data-background-image="/image.jpg">
<div class="widget widget--primary widget--padding-large">
```

--------------------------------

### SCSS Mobile-First Responsive Design

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-developer-guide.mdx

Implements a mobile-first responsive design strategy for the header slider widget. It sets base mobile styles and then progressively enhances styles for larger screen sizes using `media-breakpoint-up` mixins.

```scss
// Mobile-first responsive design
.header-slider-widget {
  // Base mobile styles
  height: 60vh;
  min-height: 350px;
  
  // Tablet and up
  @include media-breakpoint-up(md) {
    height: 70vh;
    min-height: 400px;
  }
  
  // Desktop and up
  @include media-breakpoint-up(lg) {
    height: 80vh;
    min-height: 500px;
  }
  
  // Large desktop
  @include media-breakpoint-up(xl) {
    height: 100vh;
    min-height: 600px;
  }
}
```

--------------------------------

### Header Slider Widget CSS Styling

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-example.mdx

Provides styling for the header slider widget, including scroll indicators, arrows, responsive adjustments for different screen sizes, and dark theme support. It defines styles for text, arrows, and layout changes based on screen width.

```css
.header-slider-widget .header-scroll-indicator .scroll-indicator-text {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.header-slider-widget .header-scroll-indicator .scroll-indicator-arrow {
    color: rgba(255, 255, 255, 0.6);
    font-size: 1.5rem;
    transition: transform 0.3s ease;
}

.header-slider-widget .header-scroll-indicator:hover .scroll-indicator-arrow {
    transform: translateY(-5px);
}

/* AOS Animation Integration */
// AOS animations are handled via data attributes in HTML
// and initialized in JavaScript

/* Responsive Design */
@media (max-width: 991.98px) {
    .header-slider-widget {
        height: 80vh;
        min-height: 500px;
    }
}

@media (max-width: 767.98px) {
    .header-slider-widget {
        height: 70vh;
        min-height: 400px;
    }
    
    .header-slider-widget .header-slide-content {
        padding: 1rem 0;
    }
    
    .header-slider-widget .header-slide-heading {
        font-size: 2.5rem;
    }
    
    .header-slider-widget .header-slide-buttons {
        flex-direction: column;
    }
    
    .header-slider-widget .header-slide-buttons .btn {
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

@media (max-width: 575.98px) {
    .header-slider-widget {
        height: 60vh;
        min-height: 350px;
    }
    
    .header-slider-widget .header-slide-heading {
        font-size: 2rem;
    }
    
    .header-slider-widget .header-scroll-indicator {
        bottom: 2rem;
    }
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    .header-slider-widget .header-swiper-button-next,
    .header-slider-widget .header-swiper-button-prev {
        background-color: rgba(0, 0, 0, 0.3);
    }
    
    .header-slider-widget .header-swiper-button-next:hover,
    .header-slider-widget .header-swiper-button-prev:hover {
        background-color: rgba(0, 0, 0, 0.5);
    }
}
```

--------------------------------

### HTML: Responsive Images with Srcset for Header Slider

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-developer-guide.mdx

Provides an HTML structure for implementing responsive images within the header slider using the `<picture>` element and `srcset` attribute. This ensures optimal image loading based on viewport size and supports lazy loading.

```html
<!-- Responsive images with srcset -->
<div class="header-slide-background">
  <picture>
    <source media="(min-width: 1200px)" srcset="/images/hero-large.jpg">
    <source media="(min-width: 768px)" srcset="/images/hero-medium.jpg">
    <img src="/images/hero-small.jpg" alt="Hero image" loading="lazy">
  </picture>
</div>
```

--------------------------------

### SCSS Typography and Content Styling

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-developer-guide.mdx

Defines SCSS styles for content containers, headings, subheadings, and buttons within a header slide component. Includes responsive adjustments for font sizes and layout using media query mixins.

```scss
// Content container
.header-slide-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  padding: $header-slide-content-padding 0;
  
  .container {
    width: 100%;
  }
}

// Heading styles
.header-slide-heading {
  color: $header-slide-heading-color;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  
  @include media-breakpoint-down(md) {
    font-size: 2.5rem;
  }
  
  @include media-breakpoint-down(sm) {
    font-size: 2rem;
  }
}

// Subheading styles
.header-slide-subheading {
  color: $header-slide-subheading-color;
  font-size: 1.25rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  
  @include media-breakpoint-down(md) {
    font-size: 1.125rem;
  }
}

// Button container
.header-slide-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  
  .btn {
    min-width: 140px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 50px;
    transition: all 0.3s ease;
    
    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    }
  }
  
  @include media-breakpoint-down(sm) {
    flex-direction: column;
    
    .btn {
      width: 100%;
      margin-bottom: 0.5rem;
    }
  }
}
```

--------------------------------

### SCSS Header Slider Styles and Variables

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-example.mdx

Defines SCSS variables for header slider customization and provides styles for the slider's structure, background, overlay, content, typography, buttons, navigation, pagination, and scroll indicator. It imports necessary libraries like Bootstrap, Swiper, Bootstrap Icons, and AOS.

```scss
// Import dependencies
@import 'bootstrap/scss/bootstrap';
@import 'swiper/css';
@import 'swiper/css/navigation';
@import 'swiper/css/pagination';
@import 'swiper/css/effect-fade';
@import 'bootstrap-icons/font/bootstrap-icons.css';
@import 'aos/dist/aos.css';

// Header Slider Variables
$header-slider-height: 100vh !default;
$header-slider-min-height: 600px !default;
$header-slide-overlay-opacity: 0.4 !default;
$header-slide-overlay-color: #000 !default;
$header-slide-content-padding: 2rem !default;
$header-slide-heading-color: #fff !default;
$header-slide-subheading-color: rgba(255, 255, 255, 0.8) !default;
$header-slider-navigation-size: 3rem !default;
$header-slider-pagination-size: 0.75rem !default;
$header-scroll-indicator-size: 2rem !default;

/* Header Slider Styles */
.header-slider-widget {
    position: relative;
    width: 100%;
    height: $header-slider-height;
    min-height: $header-slider-min-height;
    overflow: hidden;
}

.header-slider-widget .header-swiper {
    width: 100%;
    height: 100%;
}

.header-slider-widget .header-swiper .swiper-wrapper {
    height: 100%;
}

.header-slider-widget .header-swiper .swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* Slide Background */
.header-slider-widget .header-slide-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: scale(1.1);
    transition: transform 8s ease-out;
}

.header-slider-widget .swiper-slide-active .header-slide-background {
    transform: scale(1);
}

/* Slide Overlay */
.header-slider-widget .header-slide-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        rgba($header-slide-overlay-color, $header-slide-overlay-opacity) 0%,
        rgba($header-slide-overlay-color, $header-slide-overlay-opacity * 0.7) 50%,
        rgba($header-slide-overlay-color, $header-slide-overlay-opacity * 0.3) 100%
    );
}

/* Slide Content */
.header-slider-widget .header-slide-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    align-items: center;
    padding: $header-slide-content-padding 0;
}

.header-slider-widget .header-slide-content .container {
    width: 100%;
}

/* Typography */
.header-slider-widget .header-slide-heading {
    color: $header-slide-heading-color;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.header-slider-widget .header-slide-subheading {
    color: $header-slide-subheading-color;
    font-size: 1.25rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Buttons */
.header-slider-widget .header-slide-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.header-slider-widget .header-slide-buttons .btn {
    min-width: 140px;
    padding: 0.75rem 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 50px;
    transition: all 0.3s ease;
}

.header-slider-widget .header-slide-buttons .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Navigation */
.header-slider-widget .header-swiper-button-next,
.header-slider-widget .header-swiper-button-prev {
    width: $header-slider-navigation-size;
    height: $header-slider-navigation-size;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.header-slider-widget .header-swiper-button-next::after,
.header-slider-widget .header-swiper-button-prev::after {
    font-size: 1.25rem;
    font-weight: bold;
    color: #fff;
}

.header-slider-widget .header-swiper-button-next:hover,
.header-slider-widget .header-swiper-button-prev:hover {
    background-color: rgba(255, 255, 255, 0.3);
    transform: scale(1.1);
}

/* Pagination */
.header-slider-widget .header-swiper-pagination {
    bottom: 2rem;
}

.header-slider-widget .header-swiper-pagination .swiper-pagination-bullet {
    width: $header-slider-pagination-size;
    height: $header-slider-pagination-size;
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 1;
    transition: all 0.3s ease;
}

.header-slider-widget .header-swiper-pagination .swiper-pagination-bullet-active {
    background-color: #fff;
    transform: scale(1.2);
}

/* Scroll Indicator */
.header-slider-widget .header-scroll-indicator {
    position: absolute;
    bottom: 4rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.header-slider-widget .header-scroll-indicator:hover {
    transform: translateX(-50%) translateY(-5px);
}

```

--------------------------------

### Swiper Initialization Troubleshooting

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-developer-guide.mdx

Addresses issues where slides are not transitioning by checking Swiper initialization status. It includes logic to reinitialize the Swiper instance if it has been destroyed.

```javascript
// Solution: Check Swiper initialization
if (!swiper || !swiper.initialized) {
  console.error('Swiper not properly initialized');
  return;
}

// Reinitialize if needed
if (swiper.destroyed) {
  swiper.init();
}
```

--------------------------------

### CDN Optimization with Fallback (HTML)

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/README.mdx

Illustrates how to use Content Delivery Networks (CDNs) for libraries like Bootstrap, including a fallback mechanism to load local assets if the CDN fails. This enhances availability and performance.

```html
<!-- Use CDN with fallback -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
<script>
    if (typeof Bootstrap === 'undefined') {
        document.write('<script src="/local/bootstrap.min.js"><\/script>');
    }
</script>
```

--------------------------------

### Nunjucks AOS Animation Implementation for Headings

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/elements/headings.mdx

Demonstrates how to use Nunjucks templates to apply AOS (Animate On Scroll) effects to headings. Includes examples for applying specific animations and configurations.

```nunjucks
{% import "@juniper/ui/animations.html" as animations %}

<!-- Animated heading with AOS -->
<div {{ animations.el({
  aos: "fade-up",
  duration: 800,
  delay: 200
}) }}>
  <h1 class="display-2 heading-gradient">Animated Heading</h1>
</div>

<!-- Staggered heading animation -->
<div {{ animations.el({
  aos: "fade-right",
  duration: 600,
  delay: 100
}) }}>
  <h2 class="heading-underline">Secondary Heading</h2>
</div>
```

--------------------------------

### Dynamic Background Image - HTML Data Attribute

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-developer-guide.mdx

Shows the recommended approach for specifying background images using a `data-background-image` attribute, avoiding inline styles for better maintainability.

```html
<!-- ✅ Use data attributes -->
<div class="header-slide-background" data-background-image="/image.jpg">
```

--------------------------------

### Dynamic Background Image - JavaScript Implementation

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-developer-guide.mdx

Provides the JavaScript logic to read `data-background-image` attributes and apply them as CSS background images, intended for use within an ApostropheCMS widget player.

```javascript
// Initialize background images from data attributes
function initializeBackgroundImages(element) {
  const backgroundElements = element.querySelectorAll('.header-slide-background[data-background-image]');
  
  backgroundElements.forEach(el => {
    const imageUrl = el.getAttribute('data-background-image');
    if (imageUrl) {
      el.style.backgroundImage = `url('${imageUrl}')`;
    }
  });
}

// Use in widget playerapos.util.widgetPlayers['widget-name'] = {
  selector: '[data-widget-name]',
  player: async function (el) {
    initializeBackgroundImages(el);
  }
};
```

--------------------------------

### Optimize bundles with tree shaking by importing specific components in JavaScript

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/README.mdx

Demonstrates bundle optimization through tree shaking by importing only necessary components from the Juniper UI library. Reduces final bundle size.

```javascript
// Tree shaking for unused components
import { Button, Accordion, Slider } from 'juniper-ui';

// Only import what you need
const components = [Button, Accordion];
JuniperUI.init({ components });
```

--------------------------------

### Basic Header Slider HTML Structure

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-developer-guide.mdx

Provides the fundamental HTML markup for a header slider component, including slide structure, navigation, and pagination elements, designed for use with Swiper.js.

```html
<section class="header-slider-widget" data-header-slider-widget>
  <div class="swiper header-swiper">
    <div class="swiper-wrapper">
      <!-- Slide 1 -->
      <div class="swiper-slide header-slide">
        <div class="header-slide-background" data-background-image="/path/to/image.jpg">
          <div class="header-slide-overlay"></div>
        </div>
        <div class="header-slide-content">
          <div class="container">
            <div class="row align-items-center min-vh-75">
              <div class="col-lg-6">
                <h1 class="header-slide-heading display-4 fw-bold text-white mb-4">
                  Your Main Heading
                </h1>
                <p class="header-slide-subheading lead text-white-50 mb-4">
                  Your compelling subheading text goes here
                </p>
                <div class="header-slide-buttons">
                  <a href="#" class="btn btn-primary btn-lg">Primary Action</a>
                  <a href="#" class="btn btn-outline-light btn-lg">Secondary Action</a>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Navigation -->
    <div class="swiper-button-next header-swiper-button-next"></div>
    <div class="swiper-button-prev header-swiper-button-prev"></div>
    
    <!-- Pagination -->
    <div class="swiper-pagination header-swiper-pagination"></div>
  </div>
</section>
```

--------------------------------

### Custom Theme Configuration (SCSS)

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/README.mdx

Illustrates how to customize the Juniper UI theme by defining primary color variables and then importing the main Juniper UI stylesheet. This allows for easy theming across the project.

```scss
// _custom-theme.scss
$juniper-primary: #007bff;
$juniper-secondary: #6c757d;
$juniper-success: #28a745;
$juniper-danger: #dc3545;
$juniper-warning: #ffc107;
$juniper-info: #17a2b8;

// Import Juniper UI with custom variables
@import "juniper-ui";
```

--------------------------------

### Fallback Styles for Image Loading

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-developer-guide.mdx

Provides fallback styles for the header slider background, ensuring a base color is displayed if the background image fails to load. It uses SCSS for nested rules and inheritance.

```scss
// Solution: Add fallback styles
.header-slide-background {
  background-color: #f8f9fa; // Fallback color
  background-image: url('/path/to/image.jpg');
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
  }
}
```

--------------------------------

### Memory Management and Cleanup (JavaScript)

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/README.mdx

Demonstrates memory management best practices in Juniper UI, including cleaning up resources on page unload using `beforeunload` event and explicitly destroying specific components when no longer needed.

```javascript
// Cleanup on page unload
window.addEventListener('beforeunload', function() {
    JuniperUI.destroy();
});

// Cleanup specific components
JuniperUI.destroyComponent('slider');
```

--------------------------------

### JavaScript Slide Content Animation

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-developer-guide.mdx

Provides a JavaScript function to animate slide content elements (heading, subheading, buttons) sequentially. It resets element styles and applies transitions for a fade-in and slide-up effect.

```javascript
// Custom slide content animation function
function animateSlideContent(slideIndex) {
  const slides = document.querySelectorAll('.swiper-slide');
  const currentSlide = slides[slideIndex];
  
  if (currentSlide) {
    const heading = currentSlide.querySelector('.header-slide-heading');
    const subheading = currentSlide.querySelector('.header-slide-subheading');
    const buttons = currentSlide.querySelector('.header-slide-buttons');
    
    // Reset animations
    [heading, subheading, buttons].forEach(el => {
      if (el) {
        el.style.opacity = '0';
        el.style.transform = 'translateY(30px)';
      }
    });
    
    // Animate in sequence
    setTimeout(() => {
      if (heading) {
        heading.style.transition = 'all 0.8s ease-out';
        heading.style.opacity = '1';
        heading.style.transform = 'translateY(0)';
      }
    }, 300);
    
    setTimeout(() => {
      if (subheading) {
        subheading.style.transition = 'all 0.8s ease-out';
        subheading.style.opacity = '1';
        subheading.style.transform = 'translateY(0)';
      }
    }, 600);
    
    setTimeout(() => {
      if (buttons) {
        buttons.style.transition = 'all 0.8s ease-out';
        buttons.style.opacity = '1';
        buttons.style.transform = 'translateY(0)';
      }
    }, 900);
  }
}
```

--------------------------------

### Responsive and Styled Headings

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/elements/headings.mdx

Demonstrates responsive heading structures using Bootstrap's font-size utility classes and applies styling with text color, weight, and transformation utilities.

```html
<!-- Responsive headings with utility classes -->
<h1 class="fs-1 fs-md-2 fs-lg-1">Responsive Heading</h1>
<h2 class="fw-bold text-primary">Styled Heading</h2>
<h3 class="text-uppercase ls-2">Uppercase Heading</h3>
```

--------------------------------

### Header Slider Widget Configuration Options

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider.mdx

Provides a comprehensive list of configuration options for the header slider widget, covering basic settings, navigation controls, responsive behavior, and animation parameters.

```APIDOC
Widget Configuration Options:
  Basic Settings:
    - autoplay: Enable/disable automatic sliding (boolean)
    - autoplayDelay: Delay between slides in milliseconds (number)
    - loop: Enable/disable infinite loop (boolean)
    - speed: Transition speed in milliseconds (number)
    - effect: Transition effect type (string, e.g., 'slide', 'fade')
  Navigation Options:
    - showNavigation: Show/hide navigation arrows (boolean)
    - showPagination: Show/hide pagination dots (boolean)
    - showScrollIndicator: Show/hide scroll indicator (boolean)
  Responsive Settings:
    - slidesPerView: Number of slides per view (number or 'auto')
    - spaceBetween: Space between slides in pixels (number)
    - breakpoints: Responsive breakpoint configurations (object)
  Animation Settings:
    - animationEffects: AOS animation effect to apply (string, e.g., 'fade-up')
    - animationDuration: Duration of the animation in milliseconds (number)
    - animationDelay: Delay before the animation starts in milliseconds (number)
    - animationEasing: Animation easing function (string, e.g., 'ease-in-out')
```

--------------------------------

### Juniper UI Project Structure

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/README.mdx

Overview of the Juniper UI documentation project structure, detailing the organization of component, widget, and element documentation files. This structure helps developers navigate and locate specific documentation for UI elements.

```markdown
juniper-docs/
├── README.mdx                    # Main documentation overview
├── components/                   # Component documentation
│   ├── accordion/                # Accordion widget docs
│   ├── button/                   # Button component docs
│   ├── headings/                 # Headings component docs
│   ├── lists/                    # Lists component docs
│   └── header-slider/            # Header slider widget docs
├── widgets/                      # Widget documentation
│   ├── accordion/                # Accordion widget docs
│   ├── button/                   # Button widget docs
│   └── header-slider/            # Header slider widget docs
└── elements/                     # Element documentation
    ├── headings/                 # Headings element docs
    └── lists/                    # Lists element docs
```

--------------------------------

### AI Prompt Template: Custom Header Slider Styling

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-developer-guide.mdx

An advanced prompt template for AI assistants to customize the header slider's appearance, including color schemes, typography, button styles, and animations.

```apidoc
Customize the header slider with:
- Custom color scheme: primary #007bff, secondary #6c757d
- Typography: heading font-size 3.5rem, subheading 1.5rem
- Button styles: rounded corners, hover effects
- Overlay opacity: 0.5
- Navigation button size: 4rem
- Custom animations: slide content fade-in from bottom
```

--------------------------------

### Bundle Optimization with Imports (JavaScript)

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/README.mdx

Demonstrates bundle optimization techniques like tree shaking by selectively importing only the necessary components from the Juniper UI library. This reduces the final bundle size.

```javascript
// Tree shaking for unused components
import { Button, Accordion, Slider } from 'juniper-ui';

// Only import what you need
const components = [Button, Accordion];
JuniperUI.init({ components });
```

--------------------------------

### AOS Animation Integration and Usage

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-developer-guide.mdx

Demonstrates how to initialize the AOS (Animate On Scroll) library and apply AOS attributes to HTML elements for declarative animations. The initialization sets global animation parameters like duration and easing.

```javascript
// Initialize AOS for slide content animations
document.addEventListener('DOMContentLoaded', function() {
  AOS.init({
    duration: 800,
    easing: 'ease-out',
    once: true,
    offset: 100
  });
});
```

```html
<!-- Use AOS attributes for slide content animations -->
<h1 class="header-slide-heading display-4 fw-bold text-white mb-4" 
    data-aos="fade-up" 
    data-aos-delay="300">
  Your Main Heading
</h1>
<p class="header-slide-subheading lead text-white-50 mb-4" 
   data-aos="fade-up" 
   data-aos-delay="600">
  Your compelling subheading text goes here
</p>
<div class="header-slide-buttons" 
     data-aos="fade-up" 
     data-aos-delay="900">
  <a href="#" class="btn btn-primary btn-lg">Primary Action</a>
  <a href="#" class="btn btn-outline-light btn-lg">Secondary Action</a>
</div>
```

--------------------------------

### Check Swiper Initialization (JavaScript)

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-quick-reference.mdx

Includes a JavaScript snippet to verify if the Swiper instance has been properly initialized before attempting to use its methods. This helps prevent errors when slides are not transitioning as expected.

```javascript
// Check initialization
if (!swiper || !swiper.initialized) {
  console.error('Swiper not properly initialized');
  return;
}
```

--------------------------------

### JavaScript: Console Logging for Header Slider Debugging

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-developer-guide.mdx

Provides a JavaScript utility for console logging within the header slider component, controlled by a debug mode flag. This helps in tracking events and data during development and debugging.

```javascript
// Debug logging for development
const debugMode = true;

function logSliderEvent(event, data) {
  if (debugMode) {
    console.log(`Header Slider - ${event}:`, data);
  }
}

// Add to Swiper configuration
on: {
  init: function() {
    logSliderEvent('Initialized', { slides: this.slides.length });
  },
  slideChange: function() {
    logSliderEvent('Slide Changed', { 
      activeIndex: this.activeIndex,
      realIndex: this.realIndex 
    });
  }
}
```

--------------------------------

### Implement Lazy Loading for Images (HTML)

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-quick-reference.mdx

Utilizes the `loading="lazy"` attribute on `<img>` tags and responsive `<picture>` element to defer loading of offscreen images. This improves initial page load performance by only loading visible images.

```html
<div class="header-slide-background">
  <picture>
    <source media="(min-width: 1200px)" srcset="/images/hero-large.jpg">
    <source media="(min-width: 768px)" srcset="/images/hero-medium.jpg">
    <img src="/images/hero-small.jpg" alt="Hero image" loading="lazy">
  </picture>
</div>
```

--------------------------------

### SCSS Responsive Design Breakpoints

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-developer-guide.mdx

Applies responsive adjustments to the header slider widget based on different screen size breakpoints using SCSS mixins. It modifies height, min-height, and padding for various device categories.

```scss
// Responsive adjustments
@include media-breakpoint-down(lg) {
  .header-slider-widget {
    height: 80vh;
    min-height: 500px;
  }
}

@include media-breakpoint-down(md) {
  .header-slider-widget {
    height: 70vh;
    min-height: 400px;
    
    .header-slide-content {
      padding: 1rem 0;
    }
    
    .header-slide-heading {
      font-size: 2.5rem;
    }
  }
}

@include media-breakpoint-down(sm) {
  .header-slider-widget {
    height: 60vh;
    min-height: 350px;
    
    .header-slide-heading {
      font-size: 2rem;
    }
    
    .header-slide-buttons {
      flex-direction: column;
      
      .btn {
        width: 100%;
      }
    }
  }
}
```

--------------------------------

### Project Dependencies

Source: https://github.com/hellocomputer-za/juniper-docs/blob/main/widgets/header-slider-widget/header-slider-quick-reference.mdx

This JSON object lists the required npm dependencies for the project, including Bootstrap, Swiper, Bootstrap Icons, and AOS. These packages provide UI components, carousel functionality, icon assets, and animation effects respectively.

```json
{
  "dependencies": {
    "bootstrap": "^5.3.2",
    "swiper": "^11.0.0",
    "bootstrap-icons": "^1.11.2",
    "aos": "^2.3.1"
  }
}
```