Back to projects
In production

Dalem Conecta website

Static website that introduces Dalem Conecta to travel agencies. Fast, optimized for search and in production.

Role: Front-end design and development

  • Astro
  • TypeScript
  • CSS
  • Cloudflare Pages
Home page of the Dalem Conecta website

Problem

Dalem Conecta already worked as a product, but travel agencies had to find out it existed and understand in a few seconds what it did. An agency looking for a CRM compares several options on a phone, between calls and messages, and does not read long pages. If the site is slow to load or does not explain the value right away, the visit is lost.

The site also had to be easy to find. Almost all of its visitors arrive from a search engine, so the text, the headings and the structured data matter as much as the design. And since one person maintains it, it had to be cheap to host and simple to update.

Solution and key features

The marketing website is a static page generated with Astro and published on Cloudflare Pages. It is kept apart from the application on purpose: its copy or design can change without touching the product, and it does not depend on any API. These are its main pieces:

Performance

Astro delivers pre-rendered HTML and sends almost no JavaScript. Images are served in modern formats with responsive sizes, fonts load from the same domain and animations are limited to what costs no performance. The goal is for the page to be usable immediately on a phone with a normal connection, which is how most advisors will open it.

Technical SEO

Each page has its own title, description, canonical address and image for sharing on social networks. It also includes JSON-LD structured data describing the product, the organization and the frequently asked questions, a sitemap and a robots file. The HTML is semantic, with a single main heading per page and alternative text on images. None of this is visible at a glance, but it is what lets a search engine understand what each page is about.

Deployment

The repository is connected to Cloudflare Pages: every approved change is built and published automatically, with long cache headers for fingerprinted files and security headers for the rest. It is free, fast worldwide and needs no server of its own. For a page that changes a few times a month, it is infrastructure that takes almost no work.

The result is a light site that loads fast and that anyone can visit right now, with just enough information for an agency to decide whether it wants to see a demo of the product.

Architecture

Website architectureSimplified diagram: the browser requests the page from the Cloudflare Pages network, which serves the static Astro site; the repository builds and publishes the site, and the site links to the Dalem application.BrowserVisitor on a phoneCloudflare PagesGlobal network, cacheStatic siteAstro + CSSNo JS by defaultApplicationDalem ConectaRepository and CIBuilds and publishesWebsite architectureSimplified diagram: the browser requests the page from the Cloudflare Pages network, which serves the static Astro site; the repository builds and publishes the site, and the site links to the Dalem application.BrowserVisitor on a phoneCloudflare PagesGlobal network, cacheStatic siteAstro + CSSNo JS by defaultApplicationDalem ConectaRepository and CIBuilds and publishes

Simplified diagram; internal details omitted for privacy.

Technical decisions

  1. Static Astro with no JavaScript by default, instead of a single-page application.

    Why
    The site is almost entirely content. Serving pre-rendered HTML makes it load fast even on modest phones and leaves the text ready for search engines.
    Trade-off
    Any interaction that needs client-side state requires adding a little JavaScript on purpose, instead of getting it for free with a client framework.
  2. Section data lives in separate files, not inside the components.

    Why
    Changing a text or a figure does not mean touching the design, and it lowers the risk of breaking a page with a content change.
    Trade-off
    There is one more level of indirection: seeing a full section means looking at the component and its data file.
  3. Light and dark theme with a tiny script in the head, before first paint.

    Why
    It respects the device preference and avoids the flash of the wrong theme on load.
    Trade-off
    It is a blocking script, small but mandatory, that has to stay very short so it does not cost performance.

My role

I designed and built the whole site: the page structure, the visual system with a light and dark theme, the technical SEO and the deployment. I maintain it and adjust it based on what the visits and the agencies' inquiries show.

Next project

ReleasedDriverFinanceTrackerOffline Android app for ride-hailing drivers to log income and expenses in a few taps.View case study

Have a project?

Let's talk about your project