NosotrosTeaser

Overview

The NosotrosTeaser component displays a compelling call-to-action section encouraging visitors to learn more about PROVESA. It features customizable text, statistics, and branding with a decorative logo display.

Location

src/lib/components/NosotrosTeaser.svelte

Props

config

object

default:"null"

Configuration object to override default content. All properties are optional and fall back to sensible defaults.

Show config properties

badge

string

default:"Nuestra Esencia"

Badge text displayed above the heading

title

string

default:"Más que distribuidores, somos"

Main heading text before the highlighted portion

titleHighlight

string

default:"socios estratégicos"

Highlighted portion of the heading in accent color

description

string

default:"Desde 2006, Provesa SCC ha sido..."

Description paragraph below the heading

ctaText

string

default:"Conocer Más"

Call-to-action button text

ctaLink

string

default:"/nosotros"

Call-to-action button href destination

colors

object

Color customization object

Show color properties

string

default:"#455dd9"

Section background color

accent

string

default:"#ffd100"

Accent color for highlights and icons

textMain

string

default:"#ffffff"

Main text color

textMuted

string

default:"#bfdbfe"

Muted text color for description

iconColor

string

default:"#ffd100"

Icon color in stat cards

statBg

string

default:"rgba(255,255,255,0.08)"

Background color for stat cards

stats

array

Array of statistics to display (defaults to 3 stats)

Show stat object structure

number

string

Numeric value or text (e.g., “18+”, “100%”, “500+”)

label

string

Label below the number (e.g., “Años”, “Seriedad”, “Clientes”)

Features

Customizable Branding: All text, colors, and stats can be configured via database
Icon Integration: Uses Lucide Svelte icons (CalendarCheck, ShieldCheck, Truck, Users)
Responsive Layout: Stacks vertically on mobile, side-by-side on desktop
Decorative Elements: Background gradients, blurs, and logo watermark
Hover Effects: Interactive CTA button with scale and shadow transitions

Usage Example

Basic Usage (Defaults)

+page.svelte

<script>
  import NosotrosTeaser from '$lib/components/NosotrosTeaser.svelte';
</script>

<NosotrosTeaser />

With Custom Configuration

+page.svelte

<script>
  import NosotrosTeaser from '$lib/components/NosotrosTeaser.svelte';

  const nosotrosConfig = {
    badge: 'Quiénes Somos',
    title: 'Somos más que una empresa, somos',
    titleHighlight: 'tu socio de confianza',
    description: 'Con más de 18 años de experiencia, PROVESA SCC se ha consolidado como líder en distribución.',
    ctaText: 'Descubrir Más',
    ctaLink: '/nosotros',
    colors: {
      bg: '#1e40af',
      accent: '#fbbf24',
      textMain: '#ffffff',
      textMuted: '#bfdbfe'
    },
    stats: [
      { number: '20+', label: 'Años' },
      { number: '1000+', label: 'Clientes' },
      { number: '99%', label: 'Satisfacción' }
    ]
  };
</script>

<NosotrosTeaser config={nosotrosConfig} />

With Database Data

From /src/routes/+page.server.js:15:

+page.server.js

export async function load() {
  const nosotros = await nosotrosService.getConfigForDisplay();
  
  return {
    nosotros
  };
}

+page.svelte

<script>
  import NosotrosTeaser from '$lib/components/NosotrosTeaser.svelte';
  
  let { data } = $props();
</script>

<NosotrosTeaser config={data.nosotros} />

Default Configuration

{
  badge: 'Nuestra Esencia',
  title: 'Más que distribuidores, somos',
  titleHighlight: 'socios estratégicos',
  description: 'Desde 2006, Provesa SCC ha sido un pilar fundamental para el comercio en La Concordia. Descubra nuestra historia, misión y los valores que nos impulsan cada día.',
  ctaText: 'Conocer Más',
  ctaLink: '/nosotros',
  colors: {
    bg: '#455dd9',
    accent: '#ffd100',
    textMain: '#ffffff',
    textMuted: '#bfdbfe',
    iconColor: '#ffd100',
    statBg: 'rgba(255,255,255,0.08)'
  },
  stats: [
    { number: '18+', label: 'Años' },
    { number: '100%', label: 'Seriedad' },
    { number: '500+', label: 'Clientes' }
  ]
}

Visual Structure

┌─────────────────────────────────────────────────────────────┐
│  [Icon] BADGE TEXT                                          │
│                                                             │
│  Main Heading With Highlight                                │
│                                                             │
│  Description paragraph text goes here providing            │
│  context and encouraging action.                            │
│                                                             │
│  ┌─────┐  ┌─────┐  ┌─────┐                                │
│  │ 18+ │  │100% │  │500+ │  Statistics Grid               │
│  │Años │  │Seriedad│Clientes│                             │
│  └─────┘  └─────┘  └─────┘                                │
│                                                             │
│  [ Conocer Más → ]  CTA Button                             │
│                                                             │
│                         [LOGO WATERMARK]                    │
└─────────────────────────────────────────────────────────────┘

Dependencies

$lib/assets/images/provesa-logo.png - Logo image
lucide-svelte - Icon components (ArrowRight, CalendarCheck, ShieldCheck, Truck, Users)

Nosotros Service - Backend service for configuration
Public Website Features - How this component fits into the homepage

Components

Services

Database Schemas

Overview

Location

Props

Features

Usage Example

Basic Usage (Defaults)

With Custom Configuration

With Database Data

Default Configuration

Visual Structure

Dependencies

Build docs developers (and LLMs) love

Components

Services

Database Schemas

Documentation Index

​Overview

​Location

​Props

​Features

​Usage Example

​Basic Usage (Defaults)

​With Custom Configuration

​With Database Data

​Default Configuration

​Visual Structure

​Dependencies

​Related

Build docs developers (and LLMs) love

Overview

Location

Props

Features

Usage Example

Basic Usage (Defaults)

With Custom Configuration

With Database Data

Default Configuration

Visual Structure

Dependencies

Related