Product Detail 35 block design & features
An editorial product page built with shadcn/ui. A square hero photo sits beside the brand, name, sale price, a size grid, add to cart and buy now buttons, and two service notes. Below the hero, wide photos run down the page with the Design & Comfort, Materials & Build and Colorway sections placed between them.
Each photo reveals as it scrolls into view with a scroll-linked clip-path inset that opens from the center and settles into a rounded frame. When the hero buttons scroll away, a compact rail slides up from the bottom with a thumbnail that crossfades to the photo in view, the price, a size select tied to the same form as the hero grid, and an add to cart button.
Photos, story sections and sizes come from the data object, and each story section follows the photo in the same position. With reduced motion enabled the photos appear without the reveal and the rail fades in. On mobile the photos switch to a portrait crop and the rail keeps only the thumbnail, size select and button.