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

fix: design system rollout a todas las páginas

Browse Source 
- planes.astro: CloudDivider fillClass→fill (2 instancias)
- en/about.astro: WorldMap card→glass-card + reveal
- en/contact.astro: 3 aside cards→glass-card, form→glass-card, reveal en aside+form
- en/tutorials/index.astro: banner→glass-card+reveal, category cards service-card→glass-card
- Limpieza de patrones legacy (fillClass, service-card, rounded-2xl+inline bg)
This commit is contained in:
Mauricio López Coria
2026-07-02 02:30:46 -03:00
parent 07165ee94e
commit 99d9713a40
10 changed files with 34 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/contacto.astro
+6 -7
View File
@@ -34,8 +34,8 @@ const reCAPTCHA_site_key = '6LeOxaEaAAAAAPD8rQQLqw4woxn1dMjvF_Ooy0BG';
<section class="py-20 md:py-24" style="background: var(--hds-bg);">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<aside class="lg:col-span-1 space-y-4">
<div class="rounded-2xl p-6" style="background: var(--hds-card); border: 1px solid var(--hds-line);">
<aside class="lg:col-span-1 space-y-4 reveal">
<div class="glass-card p-6">
<h2 class="text-xs font-semibold tracking-[0.25em] uppercase mb-3" style="color: var(--color-hds-naranja);">WhatsApp</h2>
<a href={whatsappUrl} target="_blank" rel="noopener noreferrer" class="text-lg font-semibold hover:underline break-all" style="color: var(--color-hds-naranja);">+598 99 812 487</a>
<p class="text-sm mt-2" style="color: var(--hds-fg-soft);">
@@ -43,23 +43,22 @@ const reCAPTCHA_site_key = '6LeOxaEaAAAAAPD8rQQLqw4woxn1dMjvF_Ooy0BG';
</p>
</div>
<div class="rounded-2xl p-6" style="background: var(--hds-card); border: 1px solid var(--hds-line);">
<div class="glass-card p-6">
<h2 class="text-xs font-semibold tracking-[0.25em] uppercase mb-3" style="color: var(--color-hds-naranja);">Email</h2>
<a href="mailto:contacto@hostingdelsur.net" class="text-lg font-semibold hover:underline break-all" style="color: var(--color-hds-naranja);">contacto@hostingdelsur.net</a>
</div>
<div class="rounded-2xl p-6" style="background: var(--hds-card); border: 1px solid var(--hds-line);">
<div class="glass-card p-6">
<h2 class="text-xs font-semibold tracking-[0.25em] uppercase mb-3" style="color: var(--color-hds-naranja);">{lang === 'en' ? 'Location' : 'Ubicación'}</h2>
<p style="color: var(--hds-fg-soft);">Maldonado, Uruguay</p>
</div>
</aside>
<div class="lg:col-span-2">
<div class="lg:col-span-2 reveal">
<form
action="/api/contact.php"
method="POST"
class="rounded-2xl p-8 md:p-10 space-y-5"
style="background: var(--hds-card); border: 1px solid var(--hds-line);"
class="glass-card p-8 md:p-10 space-y-5"
id="contact-form"
novalidate
>
src/pages/en/about.astro
+1 -1
View File
@@ -86,7 +86,7 @@ const whatsappUrl = 'https://wa.me/59899812487';
</ul>
</div>
<div class="rounded-2xl p-6 lg:p-8" style="background: var(--hds-card); border: 1px solid var(--hds-line);">
<div class="glass-card p-6 lg:p-8 reveal">
<WorldMap class="w-full h-auto" />
</div>
</div>
src/pages/en/contact.astro
+6 -7
View File
@@ -34,8 +34,8 @@ const reCAPTCHA_site_key = '6LeOxaEaAAAAAPD8rQQLqw4woxn1dMjvF_Ooy0BG';
<section class="py-20 md:py-24" style="background: var(--hds-bg);">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
<aside class="lg:col-span-1 space-y-4">
<div class="rounded-2xl p-6" style="background: var(--hds-card); border: 1px solid var(--hds-line);">
<aside class="lg:col-span-1 space-y-4 reveal">
<div class="glass-card p-6">
<h2 class="text-xs font-semibold tracking-[0.25em] uppercase mb-3" style="color: var(--color-hds-naranja);">WhatsApp</h2>
<a href={whatsappUrl} target="_blank" rel="noopener noreferrer" class="text-lg font-semibold hover:underline break-all" style="color: var(--color-hds-naranja);">+598 99 812 487</a>
<p class="text-sm mt-2" style="color: var(--hds-fg-soft);">
@@ -43,23 +43,22 @@ const reCAPTCHA_site_key = '6LeOxaEaAAAAAPD8rQQLqw4woxn1dMjvF_Ooy0BG';
</p>
</div>
<div class="rounded-2xl p-6" style="background: var(--hds-card); border: 1px solid var(--hds-line);">
<div class="glass-card p-6">
<h2 class="text-xs font-semibold tracking-[0.25em] uppercase mb-3" style="color: var(--color-hds-naranja);">Email</h2>
<a href="mailto:contacto@hostingdelsur.net" class="text-lg font-semibold hover:underline break-all" style="color: var(--color-hds-naranja);">contacto@hostingdelsur.net</a>
</div>
<div class="rounded-2xl p-6" style="background: var(--hds-card); border: 1px solid var(--hds-line);">
<div class="glass-card p-6">
<h2 class="text-xs font-semibold tracking-[0.25em] uppercase mb-3" style="color: var(--color-hds-naranja);">{lang === 'en' ? 'Location' : 'Ubicación'}</h2>
<p style="color: var(--hds-fg-soft);">Maldonado, Uruguay</p>
</div>
</aside>
<div class="lg:col-span-2">
<div class="lg:col-span-2 reveal">
<form
action="/api/contact.php"
method="POST"
class="rounded-2xl p-8 md:p-10 space-y-5"
style="background: var(--hds-card); border: 1px solid var(--hds-line);"
class="glass-card p-8 md:p-10 space-y-5"
id="contact-form"
novalidate
>
src/pages/en/index.astro
+5 -5
View File
@@ -6,7 +6,7 @@ import DifferenceCards from '@/components/DifferenceCards.astro';
import CloudDivider from '@/components/CloudDivider.astro';
import ServicesSection from '@/components/ServicesSection.astro';
import ProcessSteps from '@/components/ProcessSteps.astro';
import GalleryMosaic from '@/components/GalleryMosaic.astro';
import Testimonials from '@/components/Testimonials.astro';
import FAQAccordion from '@/components/FaqSection.astro';
import CtaFinal from '@/components/CtaFinal.astro';
import { getLangFromUrl, useTranslations } from '@/i18n/utils';
@@ -24,20 +24,20 @@ const description = 'Cloud hosting, websites, e-commerce and infrastructure with
>
<Hero t={t} whatsappUrl={whatsappUrl} />
<CloudDivider fillClass="fill-hds-bg-soft" />
<CloudDivider fill="var(--hds-bg-soft)" />
<StatsSection t={t} lang={lang} />
<DifferenceCards t={t} />
<CloudDivider fillClass="fill-hds-bg" flip={true} />
<CloudDivider fill="var(--hds-bg)" flip={true} />
<ServicesSection t={t} lang={lang} />
<CloudDivider fillClass="fill-hds-bg-soft" />
<CloudDivider fill="var(--hds-bg-soft)" />
<ProcessSteps t={t} />
<GalleryMosaic lang={lang} />
<Testimonials lang={lang} />
<FAQAccordion lang={lang} />
src/pages/en/tutorials/index.astro
+2 -2
View File
@@ -40,7 +40,7 @@ const categories = [
<section class="py-20 md:py-24" style="background: var(--hds-bg);">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="rounded-2xl p-6 md:p-8 mb-12 flex flex-col md:flex-row md:items-center md:justify-between gap-6" style="background: linear-gradient(135deg, rgba(238,118,35,0.08) 0%, rgba(250,159,92,0.12) 100%); border: 1px solid rgba(238,118,35,0.25);">
<div class="glass-card p-6 md:p-8 mb-12 flex flex-col md:flex-row md:items-center md:justify-between gap-6 reveal">
<div>
<h2 class="text-xl font-semibold mb-2" style="color: var(--hds-fg);">
{lang === 'en' ? 'Coming soon' : 'Próximamente'}
@@ -67,7 +67,7 @@ const categories = [
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{categories.map((cat) => (
<div class="service-card">
<div class="glass-card p-6">
<h3 class="text-base font-semibold mb-1" style="color: var(--hds-fg);">{cat.title}</h3>
<p class="text-sm mb-3" style="color: var(--hds-fg-soft);">{cat.desc}</p>
<p class="text-xs italic" style="color: var(--hds-fg-muted);">
src/pages/instructivos/index.astro
+2 -2
View File
@@ -40,7 +40,7 @@ const categories = [
<section class="py-20 md:py-24" style="background: var(--hds-bg);">
<div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="rounded-2xl p-6 md:p-8 mb-12 flex flex-col md:flex-row md:items-center md:justify-between gap-6" style="background: linear-gradient(135deg, rgba(238,118,35,0.08) 0%, rgba(250,159,92,0.12) 100%); border: 1px solid rgba(238,118,35,0.25);">
<div class="glass-card p-6 md:p-8 mb-12 flex flex-col md:flex-row md:items-center md:justify-between gap-6 reveal">
<div>
<h2 class="text-xl font-semibold mb-2" style="color: var(--hds-fg);">
{lang === 'en' ? 'Coming soon' : 'Próximamente'}
@@ -67,7 +67,7 @@ const categories = [
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
{categories.map((cat) => (
<div class="service-card">
<div class="glass-card p-6">
<h3 class="text-base font-semibold mb-1" style="color: var(--hds-fg);">{cat.title}</h3>
<p class="text-sm mb-3" style="color: var(--hds-fg-soft);">{cat.desc}</p>
<p class="text-xs italic" style="color: var(--hds-fg-muted);">
src/pages/nosotros.astro
+3 -3
View File
@@ -29,7 +29,7 @@ const whatsappUrl = 'https://wa.me/59899812487';
<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="prose prose-lg max-w-none" style="color: var(--hds-fg-soft);">
<div class="prose prose-lg max-w-none reveal" style="color: var(--hds-fg-soft);">
<p class="text-lg leading-relaxed" style="color: var(--hds-fg-soft);">
{lang === 'en'
? 'We are a small team of senior SysAdmins and SREs based in Maldonado, Uruguay. We work with clients across Latin America and the world.'
@@ -61,7 +61,7 @@ const whatsappUrl = 'https://wa.me/59899812487';
<section class="py-20 md:py-24" style="background: var(--hds-bg-soft);">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
<div>
<div class="reveal">
<SectionEyebrow text={lang === 'en' ? 'Where we work' : 'Dónde trabajamos'} />
<h2 class="font-display leading-tight mt-5" style="font-size: clamp(2rem, 4.5vw, 3rem); color: var(--hds-fg);">
{lang === 'en'
@@ -86,7 +86,7 @@ const whatsappUrl = 'https://wa.me/59899812487';
</ul>
</div>
<div class="rounded-2xl p-6 lg:p-8" style="background: var(--hds-card); border: 1px solid var(--hds-line);">
<div class="glass-card p-6 lg:p-8 reveal">
<WorldMap class="w-full h-auto" />
</div>
</div>
src/pages/planes.astro
+2 -2
View File
@@ -45,7 +45,7 @@ function monthly(annual: number): string {
</div>
</section>
<CloudDivider fillClass="fill-hds-bg" />
<CloudDivider fill="var(--hds-bg)" />
<!-- Hero plan: Empresarial (glass-card-hero) -->
{empresarial && (
@@ -192,7 +192,7 @@ function monthly(annual: number): string {
</div>
</section>
<CloudDivider fillClass="fill-hds-bg-soft" />
<CloudDivider fill="var(--hds-bg-soft)" />
<!-- CTA -->
<section class="py-16 md:py-24" style="background: var(--hds-bg-soft);">
src/pages/preguntas.astro
+2
View File
@@ -36,12 +36,14 @@ const faqs = lang === 'en' ? [
>
<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="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);">
{lang === 'en'
? <>Common <span style="color: var(--color-hds-naranja); font-style: italic;">questions</span>.</>
: <>Preguntas <span style="color: var(--color-hds-naranja); font-style: italic;">frecuentes</span>.</>}
</h1>
</div>
</div>
</section>
src/pages/servicios/index.astro
+5 -5
View File
@@ -86,7 +86,7 @@ const categoryInfo: Record<keyof typeof plansByCategory, { title: string; subtit
</div>
</section>
<CloudDivider fillClass="fill-hds-bg" />
<CloudDivider fill="var(--hds-bg)" />
<section class="py-20 md:py-24" style="background: var(--hds-bg);">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-16">
@@ -105,8 +105,8 @@ const categoryInfo: Record<keyof typeof plansByCategory, { title: string; subtit
{customServices.map((service) => (
<a
href={`${base}/servicios/${service.slug}/`}
class="service-card group flex flex-col h-full"
style="border-top: 4px solid var(--color-hds-coral); padding-top: 1.5rem;"
class="glass-card group flex flex-col h-full p-6 md:p-7"
style="border-top: 3px solid var(--color-hds-coral);"
>
<div class="icon-circle mb-5" style="width: 48px; height: 48px;">
<service.Icon class="w-6 h-6" />
@@ -149,8 +149,8 @@ const categoryInfo: Record<keyof typeof plansByCategory, { title: string; subtit
return (
<a
href={`${base}/planes/#${plan.slug}`}
class="service-card group flex flex-col h-full relative"
style={`border-top: 4px solid ${plan.recommended ? 'var(--color-hds-naranja)' : 'var(--hds-line)'}; padding-top: 1.5rem;`}
class="glass-card group flex flex-col h-full p-6 md:p-7 relative"
style={`border-top: 3px solid ${plan.recommended ? 'var(--color-hds-naranja)' : 'var(--hds-line)'};`}
>
{plan.recommended && (
<div class="absolute -top-3 right-4 text-[10px] font-bold tracking-[0.15em] uppercase px-2.5 py-0.5 rounded-full" style="background: var(--color-hds-naranja); color: white;">