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.

The PROVESA Web public website provides a modern, dynamic interface for visitors to learn about products and services. It features responsive design, interactive components, and customizable content sections.

​
Homepage Structure

The main homepage (src/routes/+page.svelte) is composed of several key sections: 
<HeroSlider slides={data.slides} />
<ProductSection dbProducts={data.products} />
<NosotrosTeaser config={data.nosotros} />
<SugerenciasForm tipos={data.sugOptions} />
<RedesSociales footer={data.footer} />

Hero Slider

Full-screen image carousel with customizable slides and text overlays

Product Section

Dynamic product display with image carousels and feature highlights

About Teaser

Company information preview section

Suggestions Form

Customer feedback and inquiry forms

​
Hero Slider

The hero slider (src/lib/components/HeroSlider.svelte) creates an engaging first impression with full-screen image slides.

​
Features

Slides automatically transition every 6 seconds with smooth Ken Burns animation effects:
onMount(() => {
  const interval = setInterval(nextSlide, 6000);
  return () => clearInterval(interval);
});
Each slide supports three text alignment options:
  • Left: Content aligned to the left side
  • Center: Centered content for balanced layouts
  • Right: Content aligned to the right
Configured via the align property on each slide object.
Emphasize key words with custom colors:
  • text-accent-yellow: Yellow highlight
  • text-primary: Primary brand blue
  • text-accent-red: Accent red
  • text-white: White text
Example slide structure:
{
  title: 'El pulso de la',
  highlight: 'distribución',
  highlightColor: 'text-accent-yellow'
}
Display trust indicators or promotional text:
badge: 'Solidez desde 2006'
Appears as a subtle pill above the main title with a pulsing green indicator.

​
Default Slides

When no custom slides are configured, the system displays three default slides showcasing:
  1. Distribution capabilities
  2. Class A infrastructure
  3. Quality commitment
The slider includes navigation arrows and dot indicators for manual control, which appear on hover.

​
Product Showcase

The product section (src/lib/components/ProductSection.svelte) displays products with alternating layouts for visual interest.

​
Display Types

Products can be displayed in two formats:
Perfect for highlighting specific product benefits:
displayType: 'features',
features: [
  { title: 'Grano Largo y Envejecido', desc: 'Perfecto para cocción uniforme.' },
  { title: 'Ideal para el Hogar', desc: 'Presentaciones de 1kg, 2kg y 5kg.' },
  { title: 'Distribución Directa', desc: 'Llegamos a tu negocio sin intermediarios.' }
]
Each feature displays with an icon from the set:
  • BadgeCheck
  • ShoppingBasket
  • Truck
  • Award
Each product supports multiple images that auto-rotate: 
images: [
  'https://images.unsplash.com/photo-1586528116311-ad86d51b90f4',
  'https://images.unsplash.com/photo-1553413077-190dd305871c',
  'https://images.unsplash.com/photo-1542838132-92c53300491e'
]
Images transition every 4-4.5 seconds with staggered timing between products for dynamic visual effect.

​
Layout Options

Left Layout

Image on the left, content on the right. Ideal for the first product.

Right Layout

Content on the left, image on the right. Creates visual rhythm when alternated.

​
Accent Colors

Products can use different accent colors for visual hierarchy:
  • Primary (primary): Blue theme for flagship products
  • Accent (accent): Red theme for category showcases

​
User Interactions

​
Suggestions Form

The SugerenciasForm component allows visitors to submit:
  • Product suggestions
  • General inquiries
  • Customer feedback
Submissions are stored in the database and appear in the admin dashboard’s “Sugerencias” tab.

​
Social Media Integration

The RedesSociales component displays social media links configured in the footer settings, connecting visitors to:
  • Facebook
  • Instagram
  • WhatsApp
  • Email contact

​
Public Pages

Beyond the homepage, the site includes dedicated pages:

About Us

Company history, mission, and team information

Employment

Job application form and current openings

Contests

Active promotions and contest information

Legal Pages

Terms of service and privacy policy at /politicas/terminos and /politicas/privacidad

​
Responsive Design

All components are built with mobile-first responsive design:
  • Mobile: Single column layouts, touch-optimized controls
  • Tablet: Two-column grids where appropriate
  • Desktop: Full multi-column layouts with hover effects
The slider uses max-h-[900px] min-h-[600px] to ensure optimal viewing across devices while maintaining aspect ratios.

​
Performance Features

  • Lazy loading: Images load as needed
  • Optimized transitions: CSS transforms for smooth 60fps animations
  • Cleanup on unmount: All intervals are properly cleared
onMount(() => {
  const interval = setInterval(nextSlide, 6000);
  return () => clearInterval(interval); // Cleanup
});

​
Customization via Admin

All public website content can be managed through the Admin Dashboard:
  • Slider images and text via Sliders tab
  • Products via Productos tab
  • Theme colors via Personalización tab
  • Company info via Nosotros tab
  • Footer content via Footer tab
No code changes required - all content is database-driven and manageable through the admin interface.

Build docs developers (and LLMs) love

Get started for freeTalk to us