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) => ( {items.map((item, i) => (
<article class="glass-card diff-card p-8 flex flex-col relative overflow-hidden" data-diff-index={i}> <article class="glass-card diff-card p-8 flex flex-col relative overflow-hidden" data-diff-index={i}>
{item.photo && ( {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 <img
src={`${item.photo}.webp`} src={`${item.photo}.webp`}
alt="" alt=""
src/components/Hero.astro
+1 -1
View File
@@ -29,7 +29,7 @@ const { t, whatsappUrl } = Astro.props;
alt="" alt=""
width="1920" height="800" width="1920" height="800"
class="w-full h-full object-cover" class="w-full h-full object-cover"
style="opacity: 0.12;" style="opacity: 0.30;"
loading="eager" loading="eager"
fetchpriority="high" fetchpriority="high"
decoding="async" 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"> <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
{plans.map((plan) => ( {plans.map((plan) => (
<div <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 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);` ? `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);`} : ''}
> >
{plan.recommended && ( {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);"> <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"> <div class="grid grid-cols-1 md:grid-cols-3 gap-6 lg:gap-8">
{plans.map((plan) => ( {plans.map((plan) => (
<div <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 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);` ? `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);`} : ''}
> >
{plan.recommended && ( {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);"> <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> <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) --> <!-- 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 <img
src="/images/photos/hands-typing-coffee-1200x800.webp" src="/images/photos/hands-typing-coffee-1200x800.webp"
alt="" 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.'} description={lang === 'en' ? 'Privacy policy of Hosting del Sur.' : 'Política de privacidad de Hosting del Sur.'}
lang={lang} 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"> <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> <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 {lang === 'en' ? 'Last updated' : 'Última actualización'}: 2026
</p> </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.'} description={lang === 'en' ? 'Terms of service of Hosting del Sur.' : 'Términos del servicio de Hosting del Sur.'}
lang={lang} 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"> <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> <h1>{lang === 'en' ? 'Terms and conditions' : 'Términos y condiciones'}</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 {lang === 'en' ? 'Last updated' : 'Última actualización'}: 2026
</p> </p>
src/pages/en/plans.astro
+4 -2
View File
@@ -19,10 +19,12 @@ const base = lang === 'en' ? '/en' : '';
lang={lang} lang={lang}
> >
<section class="pt-20 pb-12 md:pt-28 md:pb-16" style="background: var(--hds-bg-soft);"> <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'} /> <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);"> <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> </h1>
<p class="text-lg mt-5 max-w-2xl" style="color: var(--hds-fg-soft);"> <p class="text-lg mt-5 max-w-2xl" style="color: var(--hds-fg-soft);">
{lang === 'en' {lang === 'en'
src/pages/en/servicios/[slug].astro
+18 -18
View File
@@ -196,27 +196,27 @@ const whatsappUrl = 'https://wa.me/59899812487';
description={body} description={body}
lang={lang} 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"> <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"> <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 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 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> </ol>
</nav> </nav>
<div class="flex items-start gap-5 mb-4"> <div class="flex items-start gap-5 mb-4 reveal">
<div class="flex-shrink-0 bg-white rounded-lg p-3 border border-hds-linea"> <div class="flex-shrink-0 glass-card p-3 flex items-center justify-center">
<service.icon class="w-10 h-10" /> <service.icon class="w-10 h-10" />
</div> </div>
<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} {service.category}
</p> </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} {title}
</h1> </h1>
</div> </div>
@@ -224,13 +224,13 @@ const whatsappUrl = 'https://wa.me/59899812487';
</div> </div>
</section> </section>
<section class="py-16 md:py-20 bg-hds-marfil"> <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"> <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 reveal">
<p class="text-lg text-hds-grafito leading-relaxed mb-10"> <p class="text-lg leading-relaxed mb-10" style="color: var(--hds-fg-soft);">
{body} {body}
</p> </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'} {lang === 'en' ? 'What is included' : 'Qué incluye'}
</h2> </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"> <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"/> <polyline points="20 6 9 17 4 12"/>
</svg> </svg>
<span class="text-hds-grafito">{feature}</span> <span style="color: var(--hds-fg-soft);">{feature}</span>
</li> </li>
))} ))}
</ul> </ul>
<div class="bg-hds-crema rounded-lg p-8 border border-hds-linea"> <div class="glass-card p-8">
<h3 class="text-xl text-hds-tinta mb-2"> <h3 class="text-xl mb-2" style="color: var(--hds-fg);">
{lang === 'en' ? 'Want to know more?' : '¿Querés saber más?'} {lang === 'en' ? 'Want to know more?' : '¿Querés saber más?'}
</h3> </h3>
<p class="text-hds-grafito mb-5"> <p class="mb-5" style="color: var(--hds-fg-soft);">
{lang === 'en' {lang === 'en'
? 'Tell us about your project and we will reply with a tailor-made proposal.' ? '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.'} : 'Contanos sobre tu proyecto y te respondemos con una propuesta a medida.'}
@@ -258,7 +258,7 @@ const whatsappUrl = 'https://wa.me/59899812487';
href={whatsappUrl} href={whatsappUrl}
target="_blank" target="_blank"
rel="noopener noreferrer" 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'} {lang === 'en' ? 'Chat on WhatsApp' : 'Hablar por WhatsApp'}
</a> </a>
src/pages/en/servicios/index.astro
+1 -1
View File
@@ -48,7 +48,7 @@ const groups = [
lang={lang} lang={lang}
> >
<section class="pt-20 pb-12 md:pt-28 md:pb-16" style="background: var(--hds-bg-soft);"> <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'} /> <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);"> <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>. {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.'} description={lang === 'en' ? 'Privacy policy of Hosting del Sur.' : 'Política de privacidad de Hosting del Sur.'}
lang={lang} 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"> <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> <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 {lang === 'en' ? 'Last updated' : 'Última actualización'}: 2026
</p> </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.'} description={lang === 'en' ? 'Terms of service of Hosting del Sur.' : 'Términos del servicio de Hosting del Sur.'}
lang={lang} 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"> <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> <h1>{lang === 'en' ? 'Terms and conditions' : 'Términos y condiciones'}</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 {lang === 'en' ? 'Last updated' : 'Última actualización'}: 2026
</p> </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);"> <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="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'} /> <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);"> <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>. {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} description={body}
lang={lang} 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"> <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"> <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 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 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> </ol>
</nav> </nav>
<div class="flex items-start gap-5 mb-4"> <div class="flex items-start gap-5 mb-4 reveal">
<div class="flex-shrink-0 bg-white rounded-lg p-3 border border-hds-linea"> <div class="flex-shrink-0 glass-card p-3 flex items-center justify-center">
<service.icon class="w-10 h-10" /> <service.icon class="w-10 h-10" />
</div> </div>
<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} {service.category}
</p> </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} {title}
</h1> </h1>
</div> </div>
@@ -224,13 +224,13 @@ const whatsappUrl = 'https://wa.me/59899812487';
</div> </div>
</section> </section>
<section class="py-16 md:py-20 bg-hds-marfil"> <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"> <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 reveal">
<p class="text-lg text-hds-grafito leading-relaxed mb-10"> <p class="text-lg leading-relaxed mb-10" style="color: var(--hds-fg-soft);">
{body} {body}
</p> </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'} {lang === 'en' ? 'What is included' : 'Qué incluye'}
</h2> </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"> <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"/> <polyline points="20 6 9 17 4 12"/>
</svg> </svg>
<span class="text-hds-grafito">{feature}</span> <span style="color: var(--hds-fg-soft);">{feature}</span>
</li> </li>
))} ))}
</ul> </ul>
<div class="bg-hds-crema rounded-lg p-8 border border-hds-linea"> <div class="glass-card p-8">
<h3 class="text-xl text-hds-tinta mb-2"> <h3 class="text-xl mb-2" style="color: var(--hds-fg);">
{lang === 'en' ? 'Want to know more?' : '¿Querés saber más?'} {lang === 'en' ? 'Want to know more?' : '¿Querés saber más?'}
</h3> </h3>
<p class="text-hds-grafito mb-5"> <p class="mb-5" style="color: var(--hds-fg-soft);">
{lang === 'en' {lang === 'en'
? 'Tell us about your project and we will reply with a tailor-made proposal.' ? '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.'} : 'Contanos sobre tu proyecto y te respondemos con una propuesta a medida.'}
@@ -258,7 +258,7 @@ const whatsappUrl = 'https://wa.me/59899812487';
href={whatsappUrl} href={whatsappUrl}
target="_blank" target="_blank"
rel="noopener noreferrer" 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'} {lang === 'en' ? 'Chat on WhatsApp' : 'Hablar por WhatsApp'}
</a> </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);"> <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="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'} /> <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);"> <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>. {lang === 'en' ? 'Our' : 'Nuestros'} <span style="color: var(--color-hds-naranja); font-style: italic;">{lang === 'en' ? 'services' : 'servicios'}</span>.