2023 · Landing · Responsive · Motion · Pixel-Perfect
Bose Landing
Product landing page — a responsive rebuild of the given design, with a product-hero composition and motion.
The problem
A landing page for an audio brand has one job: make the product feel premium in the first viewport. Every spacing decision, easing curve, and breakpoint either supports that or dilutes it.
The approach
A pixel-perfect responsive build — the design translated 1:1 at every breakpoint, with a product-hero composition that keeps the hardware as the focal point and motion used sparingly to draw the eye to it. Fully static, fully responsive, and deployed on GitHub Pages.
The discipline under the pixels
The markup follows BEM — enforced, not aspirational: .bemlintrc
checks class naming, .stylelintrc guards the SCSS, .linthtmlrc audits
the HTML itself, and a CI workflow fails the build on any of them.
HTML/SCSS/NPM, nothing else — the point was proving that craft doesn't
need a framework, and that a build pipeline can hold a hand-written page
to a machine-checked standard.
The outcome
A landing that loads instantly, looks intentional at every width, and demonstrates the discipline the fancy projects require: at small scale, craft is the only differentiator.