RedesSociales

Social media links section with animated icon buttons and hover effects

Overview

The RedesSociales component displays an engaging, interactive section with links to PROVESA’s social media profiles. Features animated entrances, hover effects, and branded icon buttons for Facebook, Instagram, TikTok, and WhatsApp.

Location

src/lib/components/RedesSociales.svelte

Props

footer · object · required

Footer data object containing social media URLs

Show footer properties

facebookUrl · string

Facebook page URL (falls back to https://facebook.com if not provided)

instagramUrl · string

Instagram profile URL (falls back to https://instagram.com if not provided)

tiktokUrl · string

TikTok profile URL (falls back to https://tiktok.com if not provided)

whatsappUrl · string

WhatsApp number or URL. Can be:

• A phone number (e.g., “593 99 123 4567”) - automatically formatted to wa.me link
• A full WhatsApp URL (e.g., “https://wa.me/593991234567”)

Falls back to “593” if not provided

Features

• Intersection Observer: Animates in when section enters viewport
• Staggered Animations: Each social icon animates in sequentially
• Hover Effects: Individual icon hover states with shadows and scale
• Brand Colors: Each platform has its authentic brand color/gradient
• Responsive Layout: 2-column grid on mobile, horizontal row on larger screens
• WhatsApp Smart Formatting: Automatically converts phone numbers to wa.me links
• Accessibility: Proper ARIA labels and semantic HTML

Social Platforms

Facebook

Color: #1877F2 (Facebook Blue)

Icon: Facebook logo from Lucide

Instagram

Gradient: Multi-color Instagram gradient (yellow → red → purple → blue)

Icon: Instagram logo from Lucide

TikTok

Color: #000000 (Black)

Icon: Music2 from Lucide (represents TikTok)

WhatsApp

Color: #25D366 (WhatsApp Green)

Icon: Phone from Lucide

Smart Link: Converts phone numbers to wa.me format

Usage Example

Basic Usage

+page.svelte

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

  const footer = {
    facebookUrl: 'https://facebook.com/provesascc',
    instagramUrl: 'https://instagram.com/provesascc',
    tiktokUrl: 'https://tiktok.com/@provesascc',
    whatsappUrl: '593 99 123 4567'
  };
</script>

<RedesSociales {footer} />

With Database Data

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

+page.server.js

export async function load() {
  const footer = await footerService.get();
  
  return {
    footer
  };
}

+page.svelte

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

<RedesSociales footer={data.footer} />

WhatsApp Number Formatting

The component intelligently formats WhatsApp numbers:

// Input: "593 99 123 4567" or "593991234567"
// Output: "https://wa.me/593991234567"

// Input: "https://wa.me/593991234567" 
// Output: "https://wa.me/593991234567" (unchanged)

Spaces are automatically removed from phone numbers.

Animation Behavior

The component uses an Intersection Observer to detect when it enters the viewport:

1. Before Visible: Opacity 0, translated down 10px
2. When Visible (20% threshold):
   • Main card fades in over 800ms
   • Each social icon flies in with 150ms stagger
   • Decorative blobs fade in over 1000ms

Visual Structure

┌────────────────────────────────────────────────────────────┐
│                    COMUNIDAD PROVESA                        │
│                                                             │
│           Conéctate con Provesa                             │
│                                                             │
│  Siga nuestro día a día y entérese de novedades...         │
│                                                             │
│      ┌────┐  ┌────┐  ┌────┐  ┌────┐                       │
│      │ f  │  │ ig │  │ tk │  │ wa │  Social Icons          │
│      └────┘  └────┘  └────┘  └────┘                       │
│    Facebook Instagram TikTok WhatsApp                       │
│                                                             │
│                                   [Síguenos hoy →]          │
└────────────────────────────────────────────────────────────┘

Hover States

Each social icon button has multi-layered hover effects:

• Background: Transitions from white to platform brand color
• Icon: Scales 110% and changes to white
• Shadow: Expands with platform-specific color
• Label: Fades in and slides up below the icon
• Shine Effect: Radial white glow expands from center

Styling

The component uses:

• Glass-morphism: Frosted glass effect on main card (backdrop-blur-2xl)
• Soft Shadows: Layered shadows for depth
• Rounded Corners: 40px/60px border radius for main card, 24px/32px for icons
• Background Decorations: Subtle gradient blobs with blur effects

Dependencies

• lucide-svelte - Icons (Facebook, Instagram, Music2, Phone/WhatsApp, ArrowRight)
• svelte/transition - Fade and fly animations

Accessibility

• target="_blank" for external links
• rel="noopener noreferrer" for security
• aria-label with descriptive text for each platform

Related

• Footer Service - Backend service for footer data
• Public Website Features - Homepage integration