Web development agency

Bilingual institutional website presenting the agency's services, portfolio and featured information, with a contact form and communication buttons integrated with an automation flow.

General details

Objective

Consolidate the agency's digital presence through a bilingual institutional website that centralizes relevant information, presents its services and projects to communicate its offering and professional experience, and makes it easy to receive inquiries through forms and direct contact channels, integrating an automated flow to streamline initial handling and reduce manual tasks.

Intervention

A bilingual institutional website that organizes the agency's information in Spanish and English, and includes a contact form connected to an automated flow for receiving inquiries and strategically placed calls to action. It also features a light/dark mode switcher and views adapted to different types of devices.

Characteristics
  • Multilingual content
  • Portfolio with specific filters
  • Contact form integrated with an automated flow
  • Calls to action to make contact easier
  • Light and dark mode switcher
  • Language selector
  • Design adaptable to different screen sizes

Technical details

Technologies
AstroBootstrapJavaScriptJSONHTML5
Architecture

Static website generated with Astro via SSG, with internationalization (i18n) based on language-prefixed routes (/es and /en). Content is centralized in per-language JSON dictionaries, reusing templates to avoid duplication. The contact form sends requests from the browser to a custom n8n webhook, which receives inquiries for automated processing.

Astro + JSON + i18nGeneración estática (SSG)VercelVisitante y navegación webFormulario de contactoWebhook de n8n
Data

No database persistence — content in Spanish and English is organized in JSON dictionaries. Cookie preferences are stored in the visitor's browser via localStorage, and contact-form inquiries are sent directly to an n8n webhook for automated processing.

Infrastructure

Static hosting with automatic deployment on Vercel - JSON dictionaries with Spanish and English content - Reusable templates to structure the site's pages - Custom n8n webhook to receive form leads

Security

HTTPS used for loading the site and sending requests to the n8n webhook - rel="noopener noreferrer" attributes used on external links that open new tabs - Self-hosted typefaces to avoid requests to external font services - Accessible form validation via aria-invalid and aria-describedby - Honeypot and CAPTCHA implementation to reduce automated spam submissions

Components
  • Page generation with Astro (SSG).
  • Internationalization (i18n) via JSON-based routes.
  • Responsive design via Bootstrap.
  • Form with field validation and inquiry submission to the n8n webhook.
  • Mode switching via JavaScript.
  • Typeface loading from local files.
  • Custom 404 error page for nonexistent routes.
Integrations
  • n8n (webhook de contacto)