Featured · Brand platformSAGA: brand site for a Dubai power-track maker
As founding engineer, I built 61saga.com, the brand site for SAGA, a modular power-track brand from The Sixty One in Dubai. It is a 13-route Next.js 16 site on Vercel, 11 routes prerendered, with a film hero, a scroll-triggered before/after reveal and a GSAP parallax. Its renders, product videos and PDFs come from a Bunny CDN, every page carries structured data, and it hands buyers off to the store I launched.
- 11 of 13routes served from the edge cache
- 62renders, videos and PDFs on the CDN
- 97community reels on the CDN, shuffled in six at a time
01 · The brief
A product you have to hold, launched on a screen
SAGA is a modular power-track brand from The Sixty One (61 FZCO) in Dubai. Aluminium rails take round adaptors that snap in, twist to lock and power on anywhere along the rail. It sells to homes, offices and studios, and takes bulk B2B orders, in the UAE and India.
I'm the founding engineer for SAGA and its sister brands, and 61saga.com is SAGA's front door. It had to feel like a product launch, with a film, motion and big renders. It also had to rank in search and send each visitor to the right next step: the store, a WhatsApp chat or the catalogue.
The site was live as a single page by July 2025. The current multi-page site had replaced it by January 2026.
- Role
- Founding engineer
- Company
- The Sixty One (61 FZCO), Dubai
- Timeline
- 2025 — Present (multi-page relaunch live by Jan 2026)
- Team
- Built by me (footer credit); film and renders by SAGA
- Stack
- Next.js 16 · React 19 · Tailwind v4 · GSAP
- Platform
- Vercel · Bunny CDN
- Scope
- 13 routes · motion · media delivery · SEO · hand-offs
The constraints
- Heavy media: a hero film, seven looping reels, about 60 high-resolution renders and lifestyle images, three product videos, a wall of community reels and two catalogue PDFs.
- Phones in India: the same pages had to hold up on a phone, not just on a studio monitor.
- No CMS team: nobody edits content in a back office, so the content lives in the codebase and ships with each deploy.
- Commerce lives elsewhere: orders happen on powertrack.online, a separate store, so the brand site has to hand buyers off cleanly.
- A family of brands: SAGA shares a market with Eubiq and the other 61 brands, so their sites should point to each other, not compete.
Motion with a job to do
The product is simple to use and hard to describe. The How It Works page doesn't explain it in a paragraph. It shows the three steps (snap it in, twist, power) in one render.
I held the motion to the same rule. GSAP's ScrollTrigger scrubs a single parallax effect; everything else is CSS transitions. The "Life Before & After SAGA" section is a small component of its own. When a card is 40% in view, an IntersectionObserver fires and a clip-path: inset() transition wipes it from the tangled "before" to the clean "after": 700 ms on a cubic-bezier(0.16, 1, 0.3, 1) ease, with the second card starting 400 ms after the first. Moving the pointer off a card reverts it, and moving back on replays it. Nothing runs until the card is on screen.
Renders first, specs where they matter
SAGA sells two track designs, the surface-mounted S Series and the recessed R Series. The range comes in five colour finishes and takes a line of adaptors for different regional socket standards and for USB charging. Buyers want to see it first and read the numbers second.
So /powertracks reads as one continuous story:
- a full-bleed hero
- the two series side by side
- the Surface track, with its spec table set over the render
- exploded views of the rail
- a "Designed For Every Space" carousel
- the Recess track
- a finishes grid with a "Reach Us" call to action
/adaptors follows the same pattern, with a labelled line-up and its own spec table.
At 390 px the film plays inline, the before/after cards wipe in as they scroll into view, and the drawer menu keeps "Buy Now" one tap away
02 · Under the hood
Mostly static pages, media from a CDN
- Prerendered on Vercel. 11 of the 13 routes are prerendered and served from the edge cache (
x-nextjs-prerender: 1,x-vercel-cache: HIT). The two blog posts still render on every request;generateStaticParamsis the next fix. - Media from a Bunny CDN. About 60 renders go through next/image as responsive srcsets. The exploded-view and how-it-works videos, both PDFs and a pool of 97 community reels come from the same zone. The reels wall shows six at random and plays each one only while half of it is on screen. The home film and seven reels are served from Vercel.
- Structured data. Every page carries Organization (with
sameAslinks to Eubiq, PowerTrack, GLER and 61dxb), Brand, Product and BreadcrumbList JSON-LD, plus Open Graph cards. - Hand-offs instead of forms. "Shop" goes to powertrack.online, WhatsApp opens with the enquiry already written, and SAGA's leads land in Enquires CRM.
