NosotrosTeaser

Call-to-action section component for the About Us page with customizable branding and statistics

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

bg · 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)

Related

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