Public Website

Learn about the public-facing website features including hero sliders, product sections, and user interactions

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

Auto-rotating Slides

Slides automatically transition every 6 seconds with smooth Ken Burns animation effects:

onMount(() => {
  const interval = setInterval(nextSlide, 6000);
  return () => clearInterval(interval);
});

Customizable Text Positioning

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.

Color-Highlighted Keywords

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'
}

Optional Badge Labels

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:

Features View

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

Categories View

Ideal for showcasing product variety:

displayType: 'categories',
categories: [
  { num: '01', name: 'Aceites', desc: 'Variedad de marcas y presentaciones para todo uso.' },
  { num: '02', name: 'Azúcar', desc: 'Distribución directa de ingenios nacionales.' },
  { num: '03', name: 'Harinas', desc: 'Para panificación y uso doméstico.' },
  { num: '04', name: 'Granos', desc: 'Lentejas, frejoles y más de alta calidad.' }
]

Displays in a 2x2 grid with numbered cards.

Image Carousel

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.