From d15312625bd65c7ade0fe2805b0df36d396d2928 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mauricio=20L=C3=B3pez=20Coria?=
 <mlopez@mini.hostingdelsur.net>
Date: Thu, 2 Jul 2026 15:01:51 -0300
Subject: [PATCH] feat: increase photo opacity + add hero photo backgrounds to
 all pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Hero opacity 0.30→0.55, gradient overlay softened (15%/75% vs 30%/60%)
- DifferenceCards photo opacity 0.15→0.40
- ProcessSteps photo opacity 0.15→0.35, removed backdrop-blur
- Added photo backgrounds to 11 hero sections across all pages:
  - planes/en/plans: datacenter-racks
  - servicios/en/servicios: monitor-grafana
  - nosotros/en/about: team-desk-mate
  - contacto/en/contact: hands-typing-coffee
  - preguntas: maldonado-aerial
  - instructivos/en/tutorials: monitor-grafana
- All hero photos at opacity 0.25 with gradient overlay for text readability
---
 src/components/DifferenceCards.astro | 2 +-
 src/components/Hero.astro            | 4 ++--
 src/components/ProcessSteps.astro    | 2 +-
 src/pages/contacto.astro             | 8 ++++++--
 src/pages/en/about.astro             | 8 ++++++--
 src/pages/en/contact.astro           | 8 ++++++--
 src/pages/en/plans.astro             | 8 ++++++--
 src/pages/en/servicios/index.astro   | 8 ++++++--
 src/pages/en/tutorials/index.astro   | 8 ++++++--
 src/pages/instructivos/index.astro   | 8 ++++++--
 src/pages/nosotros.astro             | 8 ++++++--
 src/pages/planes.astro               | 4 ++++
 src/pages/preguntas.astro            | 8 ++++++--
 src/pages/servicios/index.astro      | 6 +++++-
 14 files changed, 67 insertions(+), 23 deletions(-)

diff --git a/src/components/DifferenceCards.astro b/src/components/DifferenceCards.astro
index 49bc67b..c1486ab 100644
--- a/src/components/DifferenceCards.astro
+++ b/src/components/DifferenceCards.astro
@@ -33,7 +33,7 @@ const items = [
       {items.map((item, i) => (
         <article class="glass-card diff-card p-8 flex flex-col relative overflow-hidden" data-diff-index={i}>
           {item.photo && (
-            <div class="absolute inset-0 pointer-events-none" aria-hidden="true" style="opacity: 0.15;">
+            <div class="absolute inset-0 pointer-events-none" aria-hidden="true" style="opacity: 0.40;">
               <img
                 src={`${item.photo}.webp`}
                 alt=""
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
index d00d402..363a160 100644
--- a/src/components/Hero.astro
+++ b/src/components/Hero.astro
@@ -29,14 +29,14 @@ const { t, whatsappUrl } = Astro.props;
         alt=""
         width="1920" height="800"
         class="w-full h-full object-cover"
-        style="opacity: 0.30;"
+        style="opacity: 0.55;"
         loading="eager"
         fetchpriority="high"
         decoding="async"
       />
     </picture>
     <!-- Gradient overlay for text readability -->
-    <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg) 0%, transparent 30%, transparent 60%, var(--hds-bg) 100%);"></div>
+    <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg) 0%, transparent 15%, transparent 75%, var(--hds-bg) 100%);"></div>
   </div>
 
   <!-- Floating decorative shapes (parallax) -->
diff --git a/src/components/ProcessSteps.astro b/src/components/ProcessSteps.astro
index ffe0fa8..e99cc22 100644
--- a/src/components/ProcessSteps.astro
+++ b/src/components/ProcessSteps.astro
@@ -19,7 +19,7 @@ const steps = [
   <div class="absolute inset-0 pointer-events-none" style="background: var(--hds-gradient-section);" aria-hidden="true"></div>
 
   <!-- Background photo: team working (very subtle, blurred) -->
-  <div class="absolute inset-0 pointer-events-none" aria-hidden="true" style="opacity: 0.15; backdrop-filter: blur(4px);">
+  <div class="absolute inset-0 pointer-events-none" aria-hidden="true" style="opacity: 0.35;">
     <img
       src="/images/photos/hands-typing-coffee-1200x800.webp"
       alt=""
diff --git a/src/pages/contacto.astro b/src/pages/contacto.astro
index 8cef14c..516ebf6 100644
--- a/src/pages/contacto.astro
+++ b/src/pages/contacto.astro
@@ -15,8 +15,12 @@ const reCAPTCHA_site_key = '6LeOxaEaAAAAAPD8rQQLqw4woxn1dMjvF_Ooy0BG';
     : 'Hablá con una persona real en Hosting del Sur. WhatsApp, mail o formulario.'}
   lang={lang}
 >
-  <section class="pt-20 pb-12 md:pt-28 md:pb-16" style="background: var(--hds-bg-soft);">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+  <section class="pt-20 pb-12 md:pt-28 md:pb-16 relative overflow-hidden" style="background: var(--hds-bg-soft);">
+    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
+      <img src="/images/photos/hands-typing-coffee-1200x800.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.25;" loading="eager" decoding="async" />
+      <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg-soft) 0%, transparent 40%, transparent 70%, var(--hds-bg-soft) 100%);"></div>
+    </div>
+    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <SectionEyebrow text={lang === 'en' ? 'Contact' : 'Contacto'} />
       <h1 class="font-display leading-tight mt-5" style="font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--hds-fg);">
         {lang === 'en'
diff --git a/src/pages/en/about.astro b/src/pages/en/about.astro
index 75c1c48..f484986 100644
--- a/src/pages/en/about.astro
+++ b/src/pages/en/about.astro
@@ -16,8 +16,12 @@ const whatsappUrl = 'https://wa.me/59899812487';
     : 'Desde 2000, Hosting del Sur brinda servicios de tecnología con atención humana desde Maldonado, Uruguay, con alcance en cuatro países.'}
   lang={lang}
 >
-  <section class="pt-20 pb-12 md:pt-28 md:pb-16" style="background: var(--hds-bg-soft);">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+  <section class="pt-20 pb-12 md:pt-28 md:pb-16 relative overflow-hidden" style="background: var(--hds-bg-soft);">
+    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
+      <img src="/images/photos/team-desk-mate-1920x1080.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.25;" loading="eager" decoding="async" />
+      <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg-soft) 0%, transparent 40%, transparent 70%, var(--hds-bg-soft) 100%);"></div>
+    </div>
+    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <SectionEyebrow text={lang === 'en' ? 'About us' : 'Nosotros'} />
       <h1 class="font-display leading-tight mt-5 max-w-4xl" style="font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--hds-fg);">
         {lang === 'en'
diff --git a/src/pages/en/contact.astro b/src/pages/en/contact.astro
index 8cef14c..516ebf6 100644
--- a/src/pages/en/contact.astro
+++ b/src/pages/en/contact.astro
@@ -15,8 +15,12 @@ const reCAPTCHA_site_key = '6LeOxaEaAAAAAPD8rQQLqw4woxn1dMjvF_Ooy0BG';
     : 'Hablá con una persona real en Hosting del Sur. WhatsApp, mail o formulario.'}
   lang={lang}
 >
-  <section class="pt-20 pb-12 md:pt-28 md:pb-16" style="background: var(--hds-bg-soft);">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+  <section class="pt-20 pb-12 md:pt-28 md:pb-16 relative overflow-hidden" style="background: var(--hds-bg-soft);">
+    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
+      <img src="/images/photos/hands-typing-coffee-1200x800.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.25;" loading="eager" decoding="async" />
+      <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg-soft) 0%, transparent 40%, transparent 70%, var(--hds-bg-soft) 100%);"></div>
+    </div>
+    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <SectionEyebrow text={lang === 'en' ? 'Contact' : 'Contacto'} />
       <h1 class="font-display leading-tight mt-5" style="font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--hds-fg);">
         {lang === 'en'
diff --git a/src/pages/en/plans.astro b/src/pages/en/plans.astro
index 8d5c8d6..1a00ad4 100644
--- a/src/pages/en/plans.astro
+++ b/src/pages/en/plans.astro
@@ -18,8 +18,12 @@ const base = lang === 'en' ? '/en' : '';
     : 'Planes de hosting en USD, con cobro anual. Básico, Institucional y E-commerce, más planes opcionales WordPress, Avanzado y Corporativo.'}
   lang={lang}
 >
-  <section class="pt-20 pb-12 md:pt-28 md:pb-16" style="background: var(--hds-bg-soft);">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 reveal">
+  <section class="pt-20 pb-12 md:pt-28 md:pb-16 relative overflow-hidden" style="background: var(--hds-bg-soft);">
+    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
+      <img src="/images/photos/datacenter-racks-1920x960.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.25;" loading="eager" decoding="async" />
+      <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg-soft) 0%, transparent 40%, transparent 70%, var(--hds-bg-soft) 100%);"></div>
+    </div>
+    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 reveal">
       <SectionEyebrow text={lang === 'en' ? 'Hosting plans' : 'Planes de hosting'} />
       <h1 class="font-display leading-tight mt-5" style="font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--hds-fg);">
         {lang === 'en'
diff --git a/src/pages/en/servicios/index.astro b/src/pages/en/servicios/index.astro
index 50108d9..cb1c458 100644
--- a/src/pages/en/servicios/index.astro
+++ b/src/pages/en/servicios/index.astro
@@ -47,8 +47,12 @@ const groups = [
     : 'Servicios de hosting, desarrollo web, e-commerce, gestión de contenido e infraestructura.'}
   lang={lang}
 >
-  <section class="pt-20 pb-12 md:pt-28 md:pb-16" style="background: var(--hds-bg-soft);">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 reveal">
+  <section class="pt-20 pb-12 md:pt-28 md:pb-16 relative overflow-hidden" style="background: var(--hds-bg-soft);">
+    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
+      <img src="/images/photos/monitor-grafana-1920x1280.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.25;" loading="eager" decoding="async" />
+      <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg-soft) 0%, transparent 40%, transparent 70%, var(--hds-bg-soft) 100%);"></div>
+    </div>
+    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 reveal">
       <SectionEyebrow text={lang === 'en' ? 'What we do' : 'Lo que hacemos'} />
       <h1 class="font-display leading-tight mt-5" style="font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--hds-fg);">
         {lang === 'en' ? 'Our' : 'Nuestros'} <span style="color: var(--color-hds-naranja); font-style: italic;">{lang === 'en' ? 'services' : 'servicios'}</span>.
diff --git a/src/pages/en/tutorials/index.astro b/src/pages/en/tutorials/index.astro
index 6465c68..a22e40d 100644
--- a/src/pages/en/tutorials/index.astro
+++ b/src/pages/en/tutorials/index.astro
@@ -24,8 +24,12 @@ const categories = [
     : 'Guías paso a paso para las consultas más frecuentes de los clientes de Hosting del Sur.'}
   lang={lang}
 >
-  <section class="pt-20 pb-12 md:pt-28 md:pb-16" style="background: var(--hds-bg-soft);">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+  <section class="pt-20 pb-12 md:pt-28 md:pb-16 relative overflow-hidden" style="background: var(--hds-bg-soft);">
+    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
+      <img src="/images/photos/monitor-grafana-1920x1280.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.25;" loading="eager" decoding="async" />
+      <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg-soft) 0%, transparent 40%, transparent 70%, var(--hds-bg-soft) 100%);"></div>
+    </div>
+    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <SectionEyebrow text={lang === 'en' ? 'Knowledge base' : 'Base de conocimiento'} />
       <h1 class="font-display leading-tight mt-5" style="font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--hds-fg);">
         {lang === 'en' ? 'Tutorials' : 'Instructivos'}.
diff --git a/src/pages/instructivos/index.astro b/src/pages/instructivos/index.astro
index 6465c68..a22e40d 100644
--- a/src/pages/instructivos/index.astro
+++ b/src/pages/instructivos/index.astro
@@ -24,8 +24,12 @@ const categories = [
     : 'Guías paso a paso para las consultas más frecuentes de los clientes de Hosting del Sur.'}
   lang={lang}
 >
-  <section class="pt-20 pb-12 md:pt-28 md:pb-16" style="background: var(--hds-bg-soft);">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+  <section class="pt-20 pb-12 md:pt-28 md:pb-16 relative overflow-hidden" style="background: var(--hds-bg-soft);">
+    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
+      <img src="/images/photos/monitor-grafana-1920x1280.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.25;" loading="eager" decoding="async" />
+      <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg-soft) 0%, transparent 40%, transparent 70%, var(--hds-bg-soft) 100%);"></div>
+    </div>
+    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <SectionEyebrow text={lang === 'en' ? 'Knowledge base' : 'Base de conocimiento'} />
       <h1 class="font-display leading-tight mt-5" style="font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--hds-fg);">
         {lang === 'en' ? 'Tutorials' : 'Instructivos'}.
diff --git a/src/pages/nosotros.astro b/src/pages/nosotros.astro
index cf2dbc5..05cae2a 100644
--- a/src/pages/nosotros.astro
+++ b/src/pages/nosotros.astro
@@ -16,8 +16,12 @@ const whatsappUrl = 'https://wa.me/59899812487';
     : 'Desde 2000, Hosting del Sur brinda servicios de tecnología con atención humana desde Maldonado, Uruguay, con alcance en cuatro países.'}
   lang={lang}
 >
-  <section class="pt-20 pb-12 md:pt-28 md:pb-16" style="background: var(--hds-bg-soft);">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+  <section class="pt-20 pb-12 md:pt-28 md:pb-16 relative overflow-hidden" style="background: var(--hds-bg-soft);">
+    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
+      <img src="/images/photos/team-desk-mate-1920x1080.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.25;" loading="eager" decoding="async" />
+      <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg-soft) 0%, transparent 40%, transparent 70%, var(--hds-bg-soft) 100%);"></div>
+    </div>
+    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <SectionEyebrow text={lang === 'en' ? 'About us' : 'Nosotros'} />
       <h1 class="font-display leading-tight mt-5 max-w-4xl" style="font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--hds-fg);">
         {lang === 'en'
diff --git a/src/pages/planes.astro b/src/pages/planes.astro
index bde44d9..0965cd6 100644
--- a/src/pages/planes.astro
+++ b/src/pages/planes.astro
@@ -31,6 +31,10 @@ function monthly(annual: number): string {
   lang={lang}
 >
   <section class="pt-24 pb-16 md:pt-32 md:pb-20 relative overflow-hidden" style="background: var(--hds-bg-soft);">
+    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
+      <img src="/images/photos/datacenter-racks-1920x960.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.25;" loading="eager" decoding="async" />
+      <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg-soft) 0%, transparent 40%, transparent 70%, var(--hds-bg-soft) 100%);"></div>
+    </div>
     <div class="absolute inset-0" style="background: var(--hds-gradient-hero);" aria-hidden="true"></div>
     <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center reveal">
       <SectionEyebrow text={lang === 'en' ? 'Hosting plans' : 'Planes de hosting'} />
diff --git a/src/pages/preguntas.astro b/src/pages/preguntas.astro
index 156cedf..810e1bf 100644
--- a/src/pages/preguntas.astro
+++ b/src/pages/preguntas.astro
@@ -34,8 +34,12 @@ const faqs = lang === 'en' ? [
     : 'Preguntas frecuentes sobre Hosting del Sur, nuestros planes, infraestructura y soporte.'}
   lang={lang}
 >
-  <section class="pt-20 pb-12 md:pt-28 md:pb-16" style="background: var(--hds-bg-soft);">
-    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+  <section class="pt-20 pb-12 md:pt-28 md:pb-16 relative overflow-hidden" style="background: var(--hds-bg-soft);">
+    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
+      <img src="/images/photos/maldonado-aerial-1920x800.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.25;" loading="eager" decoding="async" />
+      <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg-soft) 0%, transparent 40%, transparent 70%, var(--hds-bg-soft) 100%);"></div>
+    </div>
+    <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
       <div class="reveal">
       <SectionEyebrow text={lang === 'en' ? 'FAQ' : 'Preguntas frecuentes'} />
       <h1 class="font-display leading-tight mt-5" style="font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--hds-fg);">
diff --git a/src/pages/servicios/index.astro b/src/pages/servicios/index.astro
index bd16b40..e4eae17 100644
--- a/src/pages/servicios/index.astro
+++ b/src/pages/servicios/index.astro
@@ -71,7 +71,11 @@ const categoryInfo: Record<keyof typeof plansByCategory, { title: string; subtit
     : 'Servicios de hosting, desarrollo web, e-commerce, gestión de contenido e infraestructura.'}
   lang={lang}
 >
-  <section class="pt-20 pb-12 md:pt-28 md:pb-16 relative" style="background: var(--hds-bg-soft);">
+  <section class="pt-20 pb-12 md:pt-28 md:pb-16 relative overflow-hidden" style="background: var(--hds-bg-soft);">
+    <div class="absolute inset-0 pointer-events-none" aria-hidden="true">
+      <img src="/images/photos/monitor-grafana-1920x1280.webp" alt="" class="w-full h-full object-cover" style="opacity: 0.25;" loading="eager" decoding="async" />
+      <div class="absolute inset-0" style="background: linear-gradient(180deg, var(--hds-bg-soft) 0%, transparent 40%, transparent 70%, var(--hds-bg-soft) 100%);"></div>
+    </div>
     <div class="absolute inset-0 particle-grid opacity-60" aria-hidden="true"></div>
     <div class="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 reveal">
       <SectionEyebrow text={lang === 'en' ? 'What we do' : 'Lo que hacemos'} />