Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/ashcroft08/provesa-web/llms.txt

Use this file to discover all available pages before exploring further.

​
Overview

The HeroSlider component displays a full-screen hero section with rotating slides. Each slide features a large background image with a Ken Burns zoom effect, overlay text, and customizable alignment. The slider automatically rotates every 6 seconds and includes navigation controls.

​
Import

import HeroSlider from '$lib/components/HeroSlider.svelte';

​
Props

​
slides
array
default:"[]"
Array of slide objects. If empty or not provided, displays three default slides showcasing PROVESA’s services.Slide Structure:
{
  imageUrl: string;          // Background image URL
  title: string;             // Main title text
  highlight?: string;        // Highlighted word (optional)
  highlightColor?: string;   // Tailwind color class for highlight (e.g., 'text-accent-yellow')
  description?: string;      // Subtitle/description text
  badge?: string;           // Small badge text above title (e.g., 'Solidez desde 2006')
  align: 'left' | 'right' | 'center'; // Text alignment
}

​
Usage

​
With Database Slides

<script>
  let { data } = $props();
</script>

<HeroSlider slides={data.slides} />

​
With Custom Slides

<script>
  const customSlides = [
    {
      imageUrl: 'https://example.com/slide1.jpg',
      title: 'Bienvenido a',
      highlight: 'PROVESA',
      highlightColor: 'text-primary',
      description: 'Tu socio en distribución mayorista',
      badge: 'Desde 2006',
      align: 'left'
    },
    {
      imageUrl: 'https://example.com/slide2.jpg',
      title: 'Calidad garantizada',
      description: 'Los mejores productos para tu negocio',
      align: 'center'
    }
  ];
</script>

<HeroSlider slides={customSlides} />

​
Default Behavior (No Slides Provided)

<HeroSlider />
Displays three default slides highlighting PROVESA’s distribution, infrastructure, and product quality.

​
Default Slides

When no slides are provided, the component shows three built-in slides:
  1. Slide 1 - Distribution (left-aligned)
    • Title: “El pulso de la distribución”
    • Badge: “Solidez desde 2006”
    • Highlight: Yellow accent
  2. Slide 2 - Infrastructure (right-aligned)
    • Title: “Infraestructura Clase A”
    • Highlight: Primary color
  3. Slide 3 - Quality (center-aligned)
    • Title: “Calidad en cada detalle”
    • Highlight: Red accent

​
Features

​
Automatic Rotation

Slides automatically advance every 6 seconds: 
onMount(() => {
  const interval = setInterval(nextSlide, 6000);
  return () => clearInterval(interval);
});

​
Ken Burns Effect

Each active slide has a slow zoom animation: 
@keyframes ken-burns {
  0% { transform: scale(1); }
  100% { transform: scale(1.08); }
}

.animate-ken-burns {
  animation: ken-burns 8s ease-out forwards;
}

​
Slide-In Animations

Content elements fade and slide up when the slide becomes active:
  • Badge: 0.3s delay
  • Title: 0.15s delay
  • Description: 0.45s delay
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
The slider includes multiple navigation methods:
  1. Navigation Dots (bottom center)
    • Clicking jumps to specific slide
    • Active dot is wider and has a pulse effect
    • Only visible if there’s more than one slide
  2. Arrow Buttons (left/right sides)
    • Previous/Next slide buttons
    • Only visible if there’s more than one slide
    • Uses ChevronsLeft and ChevronsRight icons
  3. Automatic Advance
    • Slides change every 6 seconds

​
Text Alignment

Slides support three alignment options via the align property:

​
Left Alignment

{ align: 'left' }
  • Text aligned to left side
  • Content positioned on left side of screen

​
Right Alignment

{ align: 'right' }
  • Text aligned to right side
  • Content positioned on right side with ml-auto

​
Center Alignment

{ align: 'center' }
  • Text centered
  • Content centered with mx-auto

​
Overlay Gradients

Each slide features layered gradients for better text readability: 
<!-- Vertical gradient: dark bottom to light top -->
<div class="bg-gradient-to-t from-black/80 via-black/40 to-black/10"></div>

<!-- Horizontal gradient: dark edges -->
<div class="bg-gradient-to-r from-black/30 via-transparent to-black/30"></div>

​
Dimensions

height: 100vh;
max-height: 900px;
min-height: 600px;
  • Full viewport height
  • Maximum 900px on large screens
  • Minimum 600px to ensure content visibility

​
Transition States

The component tracks transition state to prevent rapid slide changes: 
let isTransitioning = $state(false);

function goToSlide(index) {
  if (index === currentIndex || isTransitioning) return;
  isTransitioning = true;
  currentIndex = index;
  setTimeout(() => (isTransitioning = false), 1000);
}

​
Badge Component

Optional badge above the title: 
{#if sl.badge}
  <div class="inline-flex items-center gap-2 rounded-full 
              border border-white/10 bg-white/10 px-4 py-1.5 
              text-xs font-semibold tracking-widest text-white/90 
              uppercase backdrop-blur-md">
    <span class="h-1.5 w-1.5 animate-pulse rounded-full bg-green-400"></span>
    {sl.badge}
  </div>
{/if}
Includes a pulsing green dot indicator.

​
Accessibility

  • Arrow buttons include aria-label attributes
  • Navigation dots include aria-label with slide numbers
  • Section has semantic id="inicio" for anchor navigation
  • Images include alt text with slide information

​
Real-World Example

From routes/+page.svelte: 
<script>
  import HeroSlider from '$lib/components/HeroSlider.svelte';
  
  let { data } = $props();
</script>

<HeroSlider slides={data.slides} />
The slides are typically loaded from a database through the page’s +page.server.js load function.

​
Performance Notes

  • Only the active slide applies the Ken Burns animation
  • Inactive slides are scaled to 1.05 for smooth transitions
  • Z-index layering ensures proper stacking during transitions
  • Images are loaded upfront (all slides rendered but hidden)

​
Dependencies

  • lucide-svelte - ChevronsLeft, ChevronsRight icons
  • svelte - onMount lifecycle function
  • Navbar - Often used with transparent={true} over the slider
  • ProductSection - Typically follows the hero slider

Build docs developers (and LLMs) love

Get started for freeTalk to us