This project was bootstrapped with Create React App. The site and images all belong to Sonos and its affiliates (please dont sue me). I have been making an effort to recreate web apps of companies and brands that in my opinion set a high standard for UI/UX design. Sonos was one of these sites and I throughly enjoyed looking at their site and figuring out ways to recreate the site without (obviously) seeing the true source code. This is a expicitly Front-end centered project but practice makes perfect, right.
Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
The page will reload when you make changes.
You may also see any lint errors in the console.
Above you can see the landing page and Hero component of the Sonos website. Due to copyright awareness, I have sourced all of the video and images directly from the Sonos website itself (Not saving any images locally to this repository). Not eveident in the image is that this section is actually a video that loops and is dynamically sized depending on the users screen. Overflow is hidden in the corresponding Hero.css file so the video does not get horribly distorted.