Nosotros Service - PROVESA Web

The Nosotros Service manages both the About Us teaser section (displayed on the homepage) and the full About Us page content.

Overview

This service handles two distinct data sets:

Teaser Config: Homepage preview of the About Us section with CTA
Page Content: Full About Us page with history, mission, vision, and gallery

Dependencies

nosotrosRepository - Database operations for About Us content

Methods

getConfig()

Retrieves the teaser configuration for the homepage.

import { nosotrosService } from '$lib/server/services/nosotros.service.js';

const config = await nosotrosService.getConfig();

config

object

Teaser configuration object:

badge: Badge text (e.g., “Acerca de”)
title: Main title text
titleHighlight: Highlighted portion of title
description: Teaser description
ctaText: Call-to-action button text
ctaLink: CTA button link URL
colors: Object with primary and accent colors
stats: Array of statistic objects

Example Response

{
  badge: 'Acerca de PROVESA',
  title: 'Nuestra',
  titleHighlight: 'Historia',
  description: 'Con más de 70 años en el mercado...',
  ctaText: 'Conocer Más',
  ctaLink: '/nosotros',
  colors: {
    primary: '#455dd9',
    accent: '#e4002b'
  },
  stats: [
    { value: '70+', label: 'Años de experiencia' },
    { value: '1000+', label: 'Clientes satisfechos' },
    { value: '5', label: 'Sucursales' }
  ]
}

Implementation Details

Source: src/lib/server/services/nosotros.service.js:5-7

updateConfig()

Updates the teaser configuration with JSON field parsing.

import { nosotrosService } from '$lib/server/services/nosotros.service.js';

await nosotrosService.updateConfig({
  badge: 'Sobre Nosotros',
  title: 'Nuestra',
  titleHighlight: 'Trayectoria',
  description: 'Líderes en distribución desde 1950',
  ctaText: 'Descubre Más',
  ctaLink: '/nosotros',
  colors: JSON.stringify({ primary: '#455dd9', accent: '#e4002b' }),
  stats: JSON.stringify([
    { value: '70+', label: 'Años' },
    { value: '1000+', label: 'Clientes' }
  ])
});

badge

string

Badge or label text

title

string

Main title text (non-highlighted portion)

titleHighlight

string

Highlighted portion of the title

description

string

Teaser description text

ctaText

string

Call-to-action button text

ctaLink

string

CTA button destination URL

colors

string | object

Theme colors object or JSON string:

primary: Primary color (hex)
accent: Accent color (hex)

stats

string | array

Statistics array or JSON string. Each stat object contains:

value: Numeric value or text (e.g., “70+”)
label: Statistic label

JSON Parsing

The service automatically parses JSON strings:

colors: typeof colors === 'string' ? JSON.parse(colors) : colors,
stats: typeof stats === 'string' ? JSON.parse(stats) : stats

Implementation Details

Source: src/lib/server/services/nosotros.service.js:10-16

getPage()

Retrieves the full About Us page content.

import { nosotrosService } from '$lib/server/services/nosotros.service.js';

const pageContent = await nosotrosService.getPage();

page

object

Full page content object:

heroBadge: Hero section badge
heroTitle: Hero section title
heroDescription: Hero section description
historyTitle: History section title
historyParagraphs: Array of history paragraphs
historyImageUrl: History section image URL
missionTitle: Mission section title
missionText: Mission text content
visionTitle: Vision section title
visionText: Vision text content
galleryImages: Array of gallery image URLs

Example Response

{
  heroBadge: 'Quienes Somos',
  heroTitle: 'PROVESA - Líder en Distribución',
  heroDescription: 'Comprometidos con la excelencia desde 1950',
  historyTitle: 'Nuestra Historia',
  historyParagraphs: [
    'Fundada en 1950, PROVESA nació con la visión...',
    'A lo largo de los años, hemos crecido...'
  ],
  historyImageUrl: 'https://example.com/history.jpg',
  missionTitle: 'Nuestra Misión',
  missionText: 'Proveer productos de calidad...',
  visionTitle: 'Nuestra Visión',
  visionText: 'Ser la empresa líder...',
  galleryImages: [
    'https://example.com/gallery1.jpg',
    'https://example.com/gallery2.jpg'
  ]
}

Implementation Details

Source: src/lib/server/services/nosotros.service.js:19-21

updatePage()

Updates the full About Us page content with JSON field parsing.

import { nosotrosService } from '$lib/server/services/nosotros.service.js';

await nosotrosService.updatePage({
  heroBadge: 'Sobre Nosotros',
  heroTitle: 'PROVESA',
  heroDescription: 'Tu proveedor de confianza',
  historyTitle: 'Nuestra Trayectoria',
  historyParagraphs: [
    'Párrafo 1 de historia...',
    'Párrafo 2 de historia...'
  ],
  historyImageUrl: 'https://example.com/history.jpg',
  missionTitle: 'Misión',
  missionText: 'Texto de misión...',
  visionTitle: 'Visión',
  visionText: 'Texto de visión...',
  galleryImages: [
    'https://example.com/img1.jpg',
    'https://example.com/img2.jpg'
  ]
});

heroBadge

string

Hero section badge text

heroTitle

string

Hero section main title

heroDescription

string

Hero section description

historyTitle

string

History section title

historyParagraphs

string | array

History paragraphs array or JSON string

historyImageUrl

string

History section image URL

missionTitle

string

Mission section title

missionText

string

Mission text content

visionTitle

string

Vision section title

visionText

string

Vision text content

galleryImages

string | array

Gallery images array or JSON string

Implementation Details

Source: src/lib/server/services/nosotros.service.js:24-40

Usage Examples

Homepage Teaser Display

// src/routes/+page.server.js
import { nosotrosService } from '$lib/server/services/nosotros.service.js';

export async function load() {
  const nosotrosTeaser = await nosotrosService.getConfig();
  return { nosotrosTeaser };
}

<!-- src/routes/+page.svelte -->
<script>
  export let data;
  const { nosotrosTeaser } = data;
</script>

<section class="nosotros-teaser">
  <span class="badge">{nosotrosTeaser.badge}</span>
  <h2>
    {nosotrosTeaser.title}
    <span style="color: {nosotrosTeaser.colors.accent}">
      {nosotrosTeaser.titleHighlight}
    </span>
  </h2>
  <p>{nosotrosTeaser.description}</p>
  
  <div class="stats">
    {#each nosotrosTeaser.stats as stat}
      <div class="stat">
        <strong>{stat.value}</strong>
        <span>{stat.label}</span>
      </div>
    {/each}
  </div>
  
  <a href="{nosotrosTeaser.ctaLink}" class="cta-button">
    {nosotrosTeaser.ctaText}
  </a>
</section>

Full About Page

// src/routes/nosotros/+page.server.js
import { nosotrosService } from '$lib/server/services/nosotros.service.js';

export async function load() {
  const pageContent = await nosotrosService.getPage();
  return { pageContent };
}

<!-- src/routes/nosotros/+page.svelte -->
<script>
  export let data;
  const { pageContent } = data;
</script>

<article class="nosotros-page">
  <!-- Hero -->
  <section class="hero">
    <span class="badge">{pageContent.heroBadge}</span>
    <h1>{pageContent.heroTitle}</h1>
    <p>{pageContent.heroDescription}</p>
  </section>
  
  <!-- History -->
  <section class="history">
    <h2>{pageContent.historyTitle}</h2>
    <div class="content">
      <div class="text">
        {#each pageContent.historyParagraphs as paragraph}
          <p>{paragraph}</p>
        {/each}
      </div>
      <img src="{pageContent.historyImageUrl}" alt="Historia" />
    </div>
  </section>
  
  <!-- Mission & Vision -->
  <section class="mission-vision">
    <div class="mission">
      <h2>{pageContent.missionTitle}</h2>
      <p>{pageContent.missionText}</p>
    </div>
    <div class="vision">
      <h2>{pageContent.visionTitle}</h2>
      <p>{pageContent.visionText}</p>
    </div>
  </section>
  
  <!-- Gallery -->
  <section class="gallery">
    {#each pageContent.galleryImages as image}
      <img src="{image}" alt="Galería" />
    {/each}
  </section>
</article>

Admin Management

// src/routes/admin/nosotros/+page.server.js
import { nosotrosService } from '$lib/server/services/nosotros.service.js';
import { fail } from '@sveltejs/kit';

export async function load() {
  const [config, page] = await Promise.all([
    nosotrosService.getConfig(),
    nosotrosService.getPage()
  ]);
  return { config, page };
}

export const actions = {
  updateTeaser: async ({ request }) => {
    const formData = await request.formData();
    
    try {
      await nosotrosService.updateConfig({
        badge: formData.get('badge'),
        title: formData.get('title'),
        titleHighlight: formData.get('titleHighlight'),
        description: formData.get('description'),
        ctaText: formData.get('ctaText'),
        ctaLink: formData.get('ctaLink'),
        colors: formData.get('colors'), // JSON string
        stats: formData.get('stats') // JSON string
      });
      
      return { success: true };
    } catch (error) {
      return fail(500, { error: error.message });
    }
  },
  
  updatePage: async ({ request }) => {
    const formData = await request.formData();
    
    try {
      await nosotrosService.updatePage({
        heroBadge: formData.get('heroBadge'),
        heroTitle: formData.get('heroTitle'),
        heroDescription: formData.get('heroDescription'),
        historyTitle: formData.get('historyTitle'),
        historyParagraphs: formData.get('historyParagraphs'),
        historyImageUrl: formData.get('historyImageUrl'),
        missionTitle: formData.get('missionTitle'),
        missionText: formData.get('missionText'),
        visionTitle: formData.get('visionTitle'),
        visionText: formData.get('visionText'),
        galleryImages: formData.get('galleryImages')
      });
      
      return { success: true };
    } catch (error) {
      return fail(500, { error: error.message });
    }
  }
};

Data Structures

Teaser Config Object

interface NosotrosConfig {
  badge: string;
  title: string;
  titleHighlight: string;
  description: string;
  ctaText: string;
  ctaLink: string;
  colors: {
    primary: string;
    accent: string;
  };
  stats: Array<{
    value: string;
    label: string;
  }>;
}

Page Content Object

interface NosotrosPage {
  heroBadge: string;
  heroTitle: string;
  heroDescription: string;
  historyTitle: string;
  historyParagraphs: string[];
  historyImageUrl: string;
  missionTitle: string;
  missionText: string;
  visionTitle: string;
  visionText: string;
  galleryImages: string[];
}

JSON Field Examples

Stats Array

const stats = [
  { value: '70+', label: 'Años de experiencia' },
  { value: '10,000+', label: 'Productos disponibles' },
  { value: '5', label: 'Sucursales' },
  { value: '1,000+', label: 'Clientes satisfechos' }
];

await nosotrosService.updateConfig({
  // ... other fields
  stats: JSON.stringify(stats)
});

Colors Object

const colors = {
  primary: '#455dd9',
  accent: '#e4002b'
};

await nosotrosService.updateConfig({
  // ... other fields
  colors: JSON.stringify(colors)
});

History Paragraphs

const historyParagraphs = [
  'PROVESA fue fundada en 1950 por un grupo visionario de empresarios que identificaron la necesidad de un proveedor confiable de materiales de construcción en la región.',
  'Con el paso de los años, la empresa ha crecido y evolucionado, manteniéndose siempre a la vanguardia en calidad y servicio al cliente.',
  'Hoy en día, contamos con 5 sucursales estratégicamente ubicadas y un catálogo de más de 10,000 productos.'
];

await nosotrosService.updatePage({
  // ... other fields
  historyParagraphs: JSON.stringify(historyParagraphs)
});

Best Practices

Keep teaser descriptions concise (50-100 words) for better engagement.

Use 3-4 stats for optimal visual balance in the teaser section.

Validate JSON strings before submission to prevent parsing errors.

Upload images separately and store only URLs in the service data.

Break history into 2-4 paragraphs for better readability.

Content Guidelines

Mission Statement

Length: 1-2 sentences or 50-100 words
Focus: What you do and who you serve
Tone: Active, present tense

Example:

“Proveer productos de construcción de la más alta calidad, brindando un servicio excepcional y soluciones innovadoras que superen las expectativas de nuestros clientes.”

Vision Statement

Length: 1-2 sentences or 50-100 words
Focus: Where you’re heading, aspirational
Tone: Future-oriented, inspirational

Example:

“Ser la empresa líder y más confiable en distribución de materiales de construcción en la región, reconocida por nuestra innovación, sostenibilidad y compromiso con el desarrollo de las comunidades que servimos.”

​Overview

​Dependencies

​Methods

​getConfig()

​Example Response

​Implementation Details

​updateConfig()

​JSON Parsing

​Implementation Details

​getPage()

​Example Response

​Implementation Details

​updatePage()

​Implementation Details

​Usage Examples

​Homepage Teaser Display

​Full About Page

​Admin Management

​Data Structures

​Teaser Config Object

​Page Content Object

​JSON Field Examples

​Stats Array

​Colors Object

​History Paragraphs

​Best Practices

​Content Guidelines

​Mission Statement

​Vision Statement

Overview

Dependencies

Methods

getConfig()

Example Response

Implementation Details

updateConfig()

JSON Parsing

Implementation Details

getPage()

Example Response

Implementation Details

updatePage()

Implementation Details

Usage Examples

Homepage Teaser Display

Full About Page

Admin Management

Data Structures

Teaser Config Object

Page Content Object

JSON Field Examples

Stats Array

Colors Object

History Paragraphs

Best Practices

Content Guidelines

Mission Statement

Vision Statement