DesignLayer
Sneaker Bold Hero
Back to components
What is this?
A white product hero: centered packshot, title and thumbs on the left, size circles, reviews, price, and color dots on the right. Scroll or swipe to step through colorways. Swap the copy and photos, then drop it onto a footwear landing page.
Component
Sneaker Bold Hero
A white product hero: centered packshot, title and thumbs on the left, size circles, reviews, price, and color dots on the right. Scroll or swipe to step through colorways. Swap the copy and photos, then drop it onto a footwear landing page.
Checking access…
Live PreviewVerified Technical Spec
- Animation
- Framer Motion
- Reduced motion
- Standard motion
- Keyboard focus
- Verified
- Compatibility
- Tailwind CSS v3.4 + v4 · React 19 / Next.js 15 App Router + Vite / Remix compatible
Included
- Copy source into Cursor or Claude for agent install
- Responsive on phone, tablet, and desktop
- Finished React · TypeScript · Tailwind CSS · Motion · Lucide UI
Dependencies
- React 19.0.0
- Typescript 5.7.2
- Tailwindcss 3.4.16
- Lucide-react 1.23.0
- Motion 12.42.2
Tech Stack
- React
- TypeScript
- Tailwind CSS
- Motion
- Lucide
Version 1.0.0