Skip to main content

​
Overview

Hero components are designed to create impactful first impressions on landing pages and promotional pages. They combine imagery, headlines, pricing, and call-to-action elements.

​
HeroOfertas

The primary hero component for promotional offer pages. It displays a promotional offer with an image, title, subtitle, pricing, and feature list.

​
Props

​
idPromo
string
required
The unique identifier for the promotion. Must match an entry in @/data/promociones.json.

​
Data Structure

The component fetches data from promociones.json based on the idPromo prop. The expected data structure: 
{
  "id": "web-onepage",
  "titulo": "WEB ECONÓMICA",
  "subtitulo": "Perfecta para empezar",
  "precio": "299",
  "destacado": "Oferta especial",
  "backgroundImage": "/img/promos/singlepage-04.webp",
  "detalles": [
    "Diseño profesional",
    "Responsive design",
    "Optimización SEO",
    "Formulario de contacto"
  ]
}

​
Usage

---
import HeroOfertas from '@/components/Promociones/HeroOfertas.astro';
---

<HeroOfertas idPromo="web-onepage" />

​
Component Structure

The component is organized into two main sections:
  1. Left Section (60% width): Product/service image
  2. Right Section (40% width): Promotional content
    • Main title (h1)
    • Subtitle (h2)
    • Price display
    • Additional details text
    • Feature list

​
Layout

┌─────────────────────────────────────┐
│  ┌──────────┐  ┌───────────────┐   │
│  │          │  │ TITLE         │   │
│  │  Image   │  │ Subtitle      │   │
│  │  (60%)   │  │ €299          │   │
│  │          │  │ • Feature 1   │   │
│  └──────────┘  │ • Feature 2   │   │
│                └───────────────┘   │
└─────────────────────────────────────┘

​
Responsive Behavior

  • Side-by-side layout (image left, content right)
  • Image: 60% width
  • Content: 40% width
  • Font sizes: h1=2.5rem, h2=1.5rem

​
Styling Features

The component uses custom CSS variables for theming:
  • --bg-ofertas: Background color for the hero section
  • --color-ofertas: Text color for titles and content
  • --precio-destacado: Color for the highlighted price
:root {
  --bg-ofertas: #f8f9fa;
  --color-ofertas: #212529;
  --precio-destacado: #28a745;
}
  • H1: Uppercase transformation, 2.5rem (1.8rem mobile)
  • H2: Light weight (300), 1.5rem (1.3rem mobile)
  • Price: 2.5rem (2rem mobile), colored with --precio-destacado
  • List items: 1rem, line-height: 1
  • Section padding: 1rem
  • Content gap: 2rem
  • Max width: 1200px (centered)
  • List margins: 2rem horizontal on desktop

​
Customization Examples

/* In your global CSS or component style */
:root {
  --bg-ofertas: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --color-ofertas: #ffffff;
  --precio-destacado: #ffd700;
}

​
Welcome Component

The Welcome.astro component is a default Astro starter hero component, primarily used for development and testing.

​
Features

  • Astro logo and branding
  • Links to documentation and Discord
  • Background effects
  • “What’s New” callout box
The Welcome component is typically replaced with HeroOfertas or custom hero components in production builds.

​
Best Practices

Image Optimization

Use WebP format for hero images and set appropriate width/height attributes for better performance.

Content Length

Keep feature lists to 4-6 items for optimal readability and visual balance.

Price Display

Use the destacado field for additional pricing context like “per month” or “limited time”.

Mobile Testing

Always test hero components on mobile devices to ensure text readability and proper image scaling.

​
Accessibility

The component uses an empty alt attribute (alt="") for decorative images. For meaningful images, update the template:
<img src={promo.backgroundImage} alt={promo.titulo} />
  • Uses semantic HTML with proper h1 and h2 tags
  • Maintains logical heading structure for screen readers
  • Consider page context when using h1 tags
  • UrgencyBanner - Add countdown timers to create urgency
  • BotonPrecios - Call-to-action buttons for pricing
  • PromoMain - Alternative promotional layout

​
Source Code Reference

Component location: src/components/Promociones/HeroOfertas.astro:1-148 Data source: src/data/promociones.json

Build docs developers (and LLMs) love

Get started for freeTalk to us