<div class="blur-container">
  <div class="blur-layer layer1"></div>
  <div class="blur-layer layer2"></div>
  <div class="blur-layer layer3"></div>
  <div class="blur-layer layer4"></div>
</div>

.blur-container {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 80px;
  pointer-events: none;
  z-index: 4;
  overflow: hidden;
}

.blur-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.blur-layer.layer1 {
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 100%);
}

.blur-layer.layer2 {
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  mask-image: linear-gradient(to bottom, transparent 10%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 10%, black 100%);
}

.blur-layer.layer3 {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  mask-image: linear-gradient(to bottom, transparent 20%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 20%, black 100%);
}

.blur-layer.layer4 {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  mask-image: linear-gradient(to bottom, transparent 30%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 30%, black 100%);
}

R Corporation

/ Melbourne, Australia
A seamless expansion for high-performance lead gen.
  • Modular Content
  • Custom Development
  • CMS Integration

Project overview

Working with Sheena at R Corporation, the goal was to expand their digital footprint without touching their core infrastructure. We developed a series of high-conversion landing pages as an extension of their main site.
By setting up independent environments within their server, we ensured zero downtime for their primary website.

The challenge

R Corporation needed targeted landing pages for specific campaigns, but they couldn't risk modifying or slowing down their existing corporate site. The challenge was to build these as separate entities that still looked, felt, and behaved like a seamless part of the main user journey, all while capturing deep data on user behavior.
We implemented a sub-directory server setup and integrated a complex tracking layer to ensure every click, scroll, and lead was accounted for in their master database.

What we did
(and what we avoided)

  • Independent server environment setup

  • High-fidelity design-to-code development

  • Direct database lead integration

  • Pixel-perfect brand matching

  • Main site downtime risk
  • Visual inconsistencies
  • Broken cross-domain journeys
  • Manual lead management workflows

Our focus lies in delivering tangible bottom line outcomes that make a real impact.

  • Sub-Environment Architecture
    Configured independent setups within their existing server to host the landing pages, ensuring they operate separately from the main site’s core files.
  • Seamless Brand Extension
    Developed the pages with meticulous attention to detail, matching the original site's navigation and styles so users never notice they've transitioned to a campaign page.
  • Lead Generation & Database Sync
    Built the backend connection to push campaign data directly into their internal database, ensuring real-time lead management for their sales team.

Keep exploring