Dromax
A drone retail landing page built as a demo piece rather than a commission — Figma design by Mohammad Israfill, front end mine: a shop carousel with live pricing, hardware specifications, a gallery, testimonials and a blog, all on one scroll.
- HTML5
- CSS3
- Bootstrap
- jQuery
- Swiper
- Product landing page · Drone retail
- Front end — design by Mohammad Israfill
- Demo piece, not client work
- Frontend Development
- html.ashekur.com/dromax
The ask
A Figma design from Mohammad Israfill, built out as a demo piece to show prospective clients.
The build
The whole page written by hand in HTML, CSS and JavaScript — shop carousel, specs, gallery and cart.
The outcome
Something to point at in a first conversation, rather than describing what a product page could do.
THE PROBLEM
Describing a build is not the same as showing one
Most first conversations with a prospective client are spent describing things: how a product page can carry specifications and a cart at the same time, how a gallery behaves on a phone, what happens when the imagery is heavy. A demo removes that conversation. This one exists so there is something to open rather than something to explain — and because it came from a designer’s Figma file rather than my own sketch, it also had to hold up as a faithful conversion, not just a nice page.
THE SOLUTION
Built to the design, like a client job
Mohammad Israfill designed it; I built the front end the same way I would for a paying client, because a demo that cuts corners proves the wrong thing. Products carry prices and a running subtotal, the hardware specifications sit where a buyer compares them, and every section was taken down to phone width deliberately rather than left to a framework’s defaults.
- Product carousel with per-unit pricing and a cart subtotal in the header
- Battery, camera and range specifications presented as the comparison points
- Gallery, video showcase, brand logos and testimonials as proof
- Currency and language switchers, a blog section and a newsletter signup
THE STACK
Built the way a client project would be
Static HTML on Bootstrap with jQuery for behaviour, and two sliders doing different jobs — one for the product rail, one for the gallery:
- HTML5
- CSS3
- Bootstrap
- jQuery
- Swiper
- Slick
- Font Awesome
THE RESULT
A page to open, not a paragraph to read
It is a demo and the page says so — there is no client, no launch and no traffic to report. What it does is let a conversation about an ecommerce product page start with someone scrolling it on their own phone, which is a better opening than any description of the same thing.
THE SERVICE BEHIND IT
Want something built this way?
This project came out of my Frontend Development work. That page covers the process in full — what I deliver, how a project runs, and the questions people usually ask before starting one.
What that service covers
- Pixel-accurate implementation, responsive from 320px upward
- Interfaces built to the data they carry, not to a template
- Accessible, conventional code the next developer can read
MORE WORK
Other case studies
Same write-up every time — the problem, the approach, the stack and what changed.
NFT marketplace · Digital art
Raritex
Figma design by Mohammad Israfill, converted to front end and approved on ThemeForest — live bidding, collection rankings and a wallet-connect flow.
- HTML5
- CSS3
- Bootstrap
Agency site · Digital marketing
Zapta
Figma design from Panze Studio, built out as a demo agency site — services, a filterable portfolio, team, testimonials and a blog.
- HTML5
- CSS3
- Bootstrap