# A phased promotional landing page for a confectionery brand | abuenoben

> Frontend implementation for a confectionery campaign in Spain: phased landing, responsive behavior and QA. An anonymized case with a working BRIZZI recreation.

Canonical URL: https://abuenoben.com/en/cases/promotional-campaign-landing
Language: en

[Back to case studies](/en/cases)

Confectionery and consumer goods · Agency collaboration · Brand anonymized

One frontend codebase supports three reviewable phases, their active modules and configurable campaign destinations. The delivery includes documented configuration and functional and visual checks for desktop and mobile.

By [Armando Bueno Ben](/en/about)

[Explore the BRIZZI phase recreation](#showcase)

![Fictional BRIZZI gummies, a visual recreation used to explain the case.](/images/cases/brizzi/macro-1440.webp)

BRIZZI is a visual recreation. These are not images from the client's campaign.

## Explore the three phases with BRIZZI

BRIZZI recreates the pattern with a gummy brand and AI-generated assets. Its identity, products, codes and outcomes are fictional, not artwork or data from the original campaign. The interactive demo is in Spanish.

![Yellow packaging for the fictional BRIZZI brand, with colorful gummies.](/images/cases/brizzi/hero-960.webp)

Demo with no registration, API or real prize draw.

1.  ### 1. Launch
    
    Introduces the product, its flavors and the promotional box. Teases participation before showing an entry form.
    
    [Try launch](https://showroom.abuenoben.com/campanas/brizzi/)
2.  ### 2. Participation
    
    Enables sample codes. BRZ-PLAN shows a fictional prize; BRZ-MIX shows the no-prize response. No personal data is requested.
    
    [Try participation](https://showroom.abuenoben.com/campanas/brizzi/participa/)
3.  ### 3. Closure
    
    Removes participation and the prize promotion. Shows fictional references while keeping product information and questions available.
    
    [Try closure](https://showroom.abuenoben.com/campanas/brizzi/cierre/)

## How it was delivered

01

### Starting point

A consumer confectionery brand in Spain needed a landing page for the different stages of its campaign. Product presentation, entry access and closure had to change without maintaining three separate websites.

02

### Intervention

I implemented the campaign design as a responsive frontend with phase-specific modules, navigation, animation, audiovisual content and legal pages. Phase configuration and external destinations were separated from presentation code to support review and handover.

03

### Ownership taken

Technical collaboration with the agency responsible for the campaign. My scope covered frontend implementation, responsive adjustments and functional and visual checks. Strategy, brand identity and creative direction belong to the brand and its agency.

04

### Outcome

One frontend codebase supports three reviewable phases, their active modules and configurable campaign destinations. The delivery includes documented configuration and functional and visual checks for desktop and mobile.

## Decisions and scope

### Phases change both content and actions

A central configuration defines active modules. Entry access and results follow the campaign stage; demonstration fixtures remain separate from official data.

### Motion supports the content

Navigation keeps native scrolling. Animation and audiovisual content are reviewed alongside keyboard access, focus, reduced motion and screen sizes.

### Clear frontend ownership

The scope includes configurable links to entry flows and external resources. It does not claim ownership of backend systems, prize management, direct CRM integration or commercial campaign results.

## How this applies to your agency

Landing page delivery from your design: campaign modules, phase changes, responsive behavior, animation and QA. The agency retains creative direction and the client relationship, with configurable content and destinations for handover.

## Project context

Context

A consumer confectionery campaign in Spain, delivered in collaboration with an agency.

Technical delivery

Responsive frontend, phase-specific modules, configuration and review documentation.

What you can try

BRIZZI recreates the pattern with a fictional brand and products. Its sample codes and outcomes run locally, with no registration or API.

Documented outcome

Implementation and working behavior. No traffic, participation, conversion or sales figures are published.

## Technology and decisions

Technical base

HTML, modular JavaScript, Sass and Webpack. GSAP for motion and on-demand loading of modules that need it.

Time frame

Implementation and validation of a three-phase campaign. The commercial schedule and activation dates belong to the client.

What I learned

Agree which content appears, disappears or changes destination in each phase before building the modules. This makes transitions and closure part of the review, alongside launch.

## Related services

[White-label web development](/en/agencies/white-label-web-development)[Custom web development](/en/custom-web-development)[More showroom demos](/en/demos/interactive-web-experiences)

## Do you have a delivery with a similar risk?

With the objective, timing, current state and validation owner I can tell you whether there is a real fit and what I would review first.

[Tell me about your project](/en/contact?organizationType=agency#contact-form-shell)