opencode/hostingdelsur.net
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: opacity fotos + audit completo + rollback legal pages

Browse Source 
- Hero: Maldonado aerial opacity 0.12→0.30
- DifferenceCards: card photo opacity 0.06→0.15
- ProcessSteps: section photo opacity 0.05→0.15
- servicios/[slug] + en mirror: full Tailwind v3→CSS vars migration
- PricingTiers + PricingTiersFeatured: rounded-2xl→glass-card
- en/plans: hardcoded Spanish H1→i18n + reveal
- planes, servicios/index, en/servicios/index: reveal en hero
- legal pages: bg-hds-marfil+text-hds-humo→CSS vars
This commit is contained in:
Mauricio López Coria
2026-07-02 14:13:13 -03:00
parent 2af8565c7a
commit c143311e27
15 changed files with 62 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DifferenceCards.astro
+1 -1
View File
@@ -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.06;">
<div class="absolute inset-0 pointer-events-none" aria-hidden="true" style="opacity: 0.15;">
<img
src={`${item.photo}.webp`}
alt=""
src/components/Hero.astro
+1 -1
View File
@@ -29,7 +29,7 @@ const { t, whatsappUrl } = Astro.props;
alt=""
width="1920" height="800"
class="w-full h-full object-cover"
style="opacity: 0.12;"
style="opacity: 0.30;"
loading="eager"
fetchpriority="high"
decoding="async"
src/components/PricingTiers.astro
+3 -3
View File
@@ -20,10 +20,10 @@ function monthlyEquivalent(annual: number): string {
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
{plans.map((plan) => (
<div
class="relative rounded-2xl p-8 transition-all flex flex-col h-full"
class="relative glass-card p-8 transition-all flex flex-col h-full group hover:-translate-y-1"
style={plan.recommended
? `background: var(--hds-card); border: 2px solid var(--color-hds-naranja); box-shadow: 0 16px 40px rgba(238,118,35,0.15);`
: `background: var(--hds-card); border: 1px solid var(--hds-line);`}
? `border: 2px solid var(--color-hds-naranja); box-shadow: 0 16px 40px rgba(238,118,35,0.15);`
: ''}
>
{plan.recommended && (
<div class="absolute -top-3.5 left-1/2 -translate-x-1/2 text-[11px] font-bold tracking-[0.2em] uppercase px-4 py-1.5 rounded-full whitespace-nowrap" style="background: var(--color-hds-naranja); color: white; box-shadow: 0 4px 12px rgba(238,118,35,0.3);">
src/components/PricingTiersFeatured.astro
+3 -3
View File
@@ -11,10 +11,10 @@ const { plans, whatsappUrl } = Astro.props;
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
{plans.map((plan) => (
<div
class="relative rounded-2xl p-8 transition-all flex flex-col h-full group hover:-translate-y-1"
class="relative glass-card p-8 transition-all flex flex-col h-full group hover:-translate-y-1"
style={plan.recommended
? `background: var(--hds-card); border: 2px solid var(--color-hds-naranja); box-shadow: 0 16px 48px rgba(238,118,35,0.18);`
: `background: var(--hds-card); border: 1px solid var(--hds-line);`}
? `border: 2px solid var(--color-hds-naranja); box-shadow: 0 16px 48px rgba(238,118,35,0.18);`
: ''}
>
{plan.recommended && (
<div class="absolute -top-3.5 left-1/2 -translate-x-1/2 text-[11px] font-bold tracking-[0.2em] uppercase px-4 py-1.5 rounded-full whitespace-nowrap" style="background: var(--color-hds-naranja); color: white; box-shadow: 0 4px 16px rgba(238,118,35,0.4);">
src/components/ProcessSteps.astro
+1 -1
View File
@@ -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.05; backdrop-filter: blur(4px);">
<div class="absolute inset-0 pointer-events-none" aria-hidden="true" style="opacity: 0.15; backdrop-filter: blur(4px);">
<img
src="/images/photos/hands-typing-coffee-1200x800.webp"
alt=""
src/pages/en/legal/privacy.astro
+2 -2
View File
@@ -10,10 +10,10 @@ const base = lang === 'en' ? '/en' : '';
description={lang === 'en' ? 'Privacy policy of Hosting del Sur.' : 'Política de privacidad de Hosting del Sur.'}
lang={lang}
>
<article class="py-16 md:py-20 bg-hds-marfil">
<article class="py-16 md:py-20" style="background: var(--hds-bg);">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 prose prose-lg">
<h1>{lang === 'en' ? 'Privacy policy' : 'Política de privacidad'}</h1>
<p class="text-sm text-hds-humo">
<p class="text-sm" style="color: var(--hds-fg-muted);">
{lang === 'en' ? 'Last updated' : 'Última actualización'}: 2026
</p>
src/pages/en/legal/terms.astro
+3 -3
View File
@@ -9,10 +9,10 @@ const lang = getLangFromUrl(Astro.url);
description={lang === 'en' ? 'Terms of service of Hosting del Sur.' : 'Términos del servicio de Hosting del Sur.'}
lang={lang}
>
<article class="py-16 md:py-20 bg-hds-marfil">
<article class="py-16 md:py-20" style="background: var(--hds-bg);">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 prose prose-lg">
<h1>{lang === 'en' ? 'Terms of service' : 'Términos del servicio'}</h1>
<p class="text-sm text-hds-humo">
<h1>{lang === 'en' ? 'Terms and conditions' : 'Términos y condiciones'}</h1>
<p class="text-sm" style="color: var(--hds-fg-muted);">
{lang === 'en' ? 'Last updated' : 'Última actualización'}: 2026
</p>
src/pages/en/plans.astro
+4 -2
View File
@@ -19,10 +19,12 @@ const base = lang === 'en' ? '/en' : '';
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">
<div class="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);">
Elegí el plan que se<br/>adapta a tu <span style="color: var(--color-hds-naranja); font-style: italic;">proyecto</span>.
{lang === 'en'
? <>Choose the plan that<br/>fits your <span style="color: var(--color-hds-naranja); font-style: italic;">project</span>.</>
: <>Elegí el plan que se<br/>adapta a tu <span style="color: var(--color-hds-naranja); font-style: italic;">proyecto</span>.</>}
</h1>
<p class="text-lg mt-5 max-w-2xl" style="color: var(--hds-fg-soft);">
{lang === 'en'
src/pages/en/servicios/[slug].astro
+18 -18
View File
@@ -196,27 +196,27 @@ const whatsappUrl = 'https://wa.me/59899812487';
description={body}
lang={lang}
>
<section class="bg-hds-crema py-12 md:py-16">
<section class="py-12 md:py-16" style="background: var(--hds-bg-soft);">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<nav aria-label="Breadcrumb" class="text-sm text-hds-humo mb-6">
<nav aria-label="Breadcrumb" class="text-sm mb-6" style="color: var(--hds-fg-muted);">
<ol class="flex flex-wrap items-center gap-2">
<li><a href={`${base}/`} class="hover:text-hds-naranja">{lang === 'en' ? 'Home' : 'Inicio'}</a></li>
<li><a href={`${base}/`} class="transition-colors" style="color: var(--hds-fg-muted);" onmouseover="this.style.color='var(--color-hds-naranja)'" onmouseout="this.style.color='var(--hds-fg-muted)'">{lang === 'en' ? 'Home' : 'Inicio'}</a></li>
<li aria-hidden="true">/</li>
<li><a href={`${base}/servicios/`} class="hover:text-hds-naranja">{lang === 'en' ? 'Services' : 'Servicios'}</a></li>
<li><a href={`${base}/servicios/`} class="transition-colors" style="color: var(--hds-fg-muted);" onmouseover="this.style.color='var(--color-hds-naranja)'" onmouseout="this.style.color='var(--hds-fg-muted)'">{lang === 'en' ? 'Services' : 'Servicios'}</a></li>
<li aria-hidden="true">/</li>
<li class="text-hds-grafito" aria-current="page">{title}</li>
<li aria-current="page" style="color: var(--hds-fg-soft);">{title}</li>
</ol>
</nav>
<div class="flex items-start gap-5 mb-4">
<div class="flex-shrink-0 bg-white rounded-lg p-3 border border-hds-linea">
<div class="flex items-start gap-5 mb-4 reveal">
<div class="flex-shrink-0 glass-card p-3 flex items-center justify-center">
<service.icon class="w-10 h-10" />
</div>
<div>
<p class="text-xs font-semibold tracking-wider uppercase text-hds-naranja mb-1">
<p class="text-xs font-semibold tracking-[0.25em] uppercase mb-1" style="color: var(--color-hds-naranja);">
{service.category}
</p>
<h1 class="text-3xl md:text-5xl text-hds-tinta leading-tight">
<h1 class="font-display leading-tight" style="font-size: clamp(2rem, 4vw, 3rem); color: var(--hds-fg);">
{title}
</h1>
</div>
@@ -224,13 +224,13 @@ const whatsappUrl = 'https://wa.me/59899812487';
</div>
</section>
<section class="py-16 md:py-20 bg-hds-marfil">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<p class="text-lg text-hds-grafito leading-relaxed mb-10">
<section class="py-16 md:py-20" style="background: var(--hds-bg);">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 reveal">
<p class="text-lg leading-relaxed mb-10" style="color: var(--hds-fg-soft);">
{body}
</p>
<h2 class="text-2xl md:text-3xl text-hds-tinta mb-6">
<h2 class="font-display mb-6" style="font-size: clamp(1.5rem, 3vw, 2rem); color: var(--hds-fg);">
{lang === 'en' ? 'What is included' : 'Qué incluye'}
</h2>
@@ -240,16 +240,16 @@ const whatsappUrl = 'https://wa.me/59899812487';
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#EE7623" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 mt-0.5" aria-hidden="true">
<polyline points="20 6 9 17 4 12"/>
</svg>
<span class="text-hds-grafito">{feature}</span>
<span style="color: var(--hds-fg-soft);">{feature}</span>
</li>
))}
</ul>
<div class="bg-hds-crema rounded-lg p-8 border border-hds-linea">
<h3 class="text-xl text-hds-tinta mb-2">
<div class="glass-card p-8">
<h3 class="text-xl mb-2" style="color: var(--hds-fg);">
{lang === 'en' ? 'Want to know more?' : '¿Querés saber más?'}
</h3>
<p class="text-hds-grafito mb-5">
<p class="mb-5" style="color: var(--hds-fg-soft);">
{lang === 'en'
? 'Tell us about your project and we will reply with a tailor-made proposal.'
: 'Contanos sobre tu proyecto y te respondemos con una propuesta a medida.'}
@@ -258,7 +258,7 @@ const whatsappUrl = 'https://wa.me/59899812487';
href={whatsappUrl}
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center justify-center gap-2 bg-hds-naranja hover:bg-hds-naranja-hover text-white text-sm font-semibold px-5 py-2.5 rounded-md transition-colors"
class="btn-secondary text-sm"
>
{lang === 'en' ? 'Chat on WhatsApp' : 'Hablar por WhatsApp'}
</a>
src/pages/en/servicios/index.astro
+1 -1
View File
@@ -48,7 +48,7 @@ const groups = [
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">
<div class="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>.
src/pages/legal/privacidad.astro
+2 -2
View File
@@ -10,10 +10,10 @@ const base = lang === 'en' ? '/en' : '';
description={lang === 'en' ? 'Privacy policy of Hosting del Sur.' : 'Política de privacidad de Hosting del Sur.'}
lang={lang}
>
<article class="py-16 md:py-20 bg-hds-marfil">
<article class="py-16 md:py-20" style="background: var(--hds-bg);">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 prose prose-lg">
<h1>{lang === 'en' ? 'Privacy policy' : 'Política de privacidad'}</h1>
<p class="text-sm text-hds-humo">
<p class="text-sm" style="color: var(--hds-fg-muted);">
{lang === 'en' ? 'Last updated' : 'Última actualización'}: 2026
</p>
src/pages/legal/terminos.astro
+3 -3
View File
@@ -9,10 +9,10 @@ const lang = getLangFromUrl(Astro.url);
description={lang === 'en' ? 'Terms of service of Hosting del Sur.' : 'Términos del servicio de Hosting del Sur.'}
lang={lang}
>
<article class="py-16 md:py-20 bg-hds-marfil">
<article class="py-16 md:py-20" style="background: var(--hds-bg);">
<div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 prose prose-lg">
<h1>{lang === 'en' ? 'Terms of service' : 'Términos del servicio'}</h1>
<p class="text-sm text-hds-humo">
<h1>{lang === 'en' ? 'Terms and conditions' : 'Términos y condiciones'}</h1>
<p class="text-sm" style="color: var(--hds-fg-muted);">
{lang === 'en' ? 'Last updated' : 'Última actualización'}: 2026
</p>
src/pages/planes.astro
+1 -1
View File
@@ -32,7 +32,7 @@ function monthly(annual: number): string {
>
<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" 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">
<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'} />
<h1 class="font-display leading-tight mt-5" style="font-size: clamp(2.5rem, 6vw, 4.5rem); color: var(--hds-fg);">
{lang === 'en' ? 'Plans designed around your' : 'Planes pensados alrededor de tu'} <span style="color: var(--color-hds-naranja);">{lang === 'en' ? 'project' : 'proyecto'}</span>.
src/pages/servicios/[slug].astro
+18 -18
View File
@@ -196,27 +196,27 @@ const whatsappUrl = 'https://wa.me/59899812487';
description={body}
lang={lang}
>
<section class="bg-hds-crema py-12 md:py-16">
<section class="py-12 md:py-16" style="background: var(--hds-bg-soft);">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<nav aria-label="Breadcrumb" class="text-sm text-hds-humo mb-6">
<nav aria-label="Breadcrumb" class="text-sm mb-6" style="color: var(--hds-fg-muted);">
<ol class="flex flex-wrap items-center gap-2">
<li><a href={`${base}/`} class="hover:text-hds-naranja">{lang === 'en' ? 'Home' : 'Inicio'}</a></li>
<li><a href={`${base}/`} class="transition-colors" style="color: var(--hds-fg-muted);" onmouseover="this.style.color='var(--color-hds-naranja)'" onmouseout="this.style.color='var(--hds-fg-muted)'">{lang === 'en' ? 'Home' : 'Inicio'}</a></li>
<li aria-hidden="true">/</li>
<li><a href={`${base}/servicios/`} class="hover:text-hds-naranja">{lang === 'en' ? 'Services' : 'Servicios'}</a></li>
<li><a href={`${base}/servicios/`} class="transition-colors" style="color: var(--hds-fg-muted);" onmouseover="this.style.color='var(--color-hds-naranja)'" onmouseout="this.style.color='var(--hds-fg-muted)'">{lang === 'en' ? 'Services' : 'Servicios'}</a></li>
<li aria-hidden="true">/</li>
<li class="text-hds-grafito" aria-current="page">{title}</li>
<li aria-current="page" style="color: var(--hds-fg-soft);">{title}</li>
</ol>
</nav>
<div class="flex items-start gap-5 mb-4">
<div class="flex-shrink-0 bg-white rounded-lg p-3 border border-hds-linea">
<div class="flex items-start gap-5 mb-4 reveal">
<div class="flex-shrink-0 glass-card p-3 flex items-center justify-center">
<service.icon class="w-10 h-10" />
</div>
<div>
<p class="text-xs font-semibold tracking-wider uppercase text-hds-naranja mb-1">
<p class="text-xs font-semibold tracking-[0.25em] uppercase mb-1" style="color: var(--color-hds-naranja);">
{service.category}
</p>
<h1 class="text-3xl md:text-5xl text-hds-tinta leading-tight">
<h1 class="font-display leading-tight" style="font-size: clamp(2rem, 4vw, 3rem); color: var(--hds-fg);">
{title}
</h1>
</div>
@@ -224,13 +224,13 @@ const whatsappUrl = 'https://wa.me/59899812487';
</div>
</section>
<section class="py-16 md:py-20 bg-hds-marfil">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
<p class="text-lg text-hds-grafito leading-relaxed mb-10">
<section class="py-16 md:py-20" style="background: var(--hds-bg);">
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 reveal">
<p class="text-lg leading-relaxed mb-10" style="color: var(--hds-fg-soft);">
{body}
</p>
<h2 class="text-2xl md:text-3xl text-hds-tinta mb-6">
<h2 class="font-display mb-6" style="font-size: clamp(1.5rem, 3vw, 2rem); color: var(--hds-fg);">
{lang === 'en' ? 'What is included' : 'Qué incluye'}
</h2>
@@ -240,16 +240,16 @@ const whatsappUrl = 'https://wa.me/59899812487';
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="#EE7623" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="flex-shrink-0 mt-0.5" aria-hidden="true">
<polyline points="20 6 9 17 4 12"/>
</svg>
<span class="text-hds-grafito">{feature}</span>
<span style="color: var(--hds-fg-soft);">{feature}</span>
</li>
))}
</ul>
<div class="bg-hds-crema rounded-lg p-8 border border-hds-linea">
<h3 class="text-xl text-hds-tinta mb-2">
<div class="glass-card p-8">
<h3 class="text-xl mb-2" style="color: var(--hds-fg);">
{lang === 'en' ? 'Want to know more?' : '¿Querés saber más?'}
</h3>
<p class="text-hds-grafito mb-5">
<p class="mb-5" style="color: var(--hds-fg-soft);">
{lang === 'en'
? 'Tell us about your project and we will reply with a tailor-made proposal.'
: 'Contanos sobre tu proyecto y te respondemos con una propuesta a medida.'}
@@ -258,7 +258,7 @@ const whatsappUrl = 'https://wa.me/59899812487';
href={whatsappUrl}
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center justify-center gap-2 bg-hds-naranja hover:bg-hds-naranja-hover text-white text-sm font-semibold px-5 py-2.5 rounded-md transition-colors"
class="btn-secondary text-sm"
>
{lang === 'en' ? 'Chat on WhatsApp' : 'Hablar por WhatsApp'}
</a>
src/pages/servicios/index.astro
+1 -1
View File
@@ -73,7 +73,7 @@ const categoryInfo: Record<keyof typeof plansByCategory, { title: string; subtit
>
<section class="pt-20 pb-12 md:pt-28 md:pb-16 relative" style="background: var(--hds-bg-soft);">
<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">
<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>.