GreatFloors-Style Site Skeleton

I already have a basic storefront skeleton and now need it reshaped so it visually and functionally mirrors GreatFloors.com while remaining clean enough to scale later (you’ll see the long-term roadmap in the file I’ve attached).

Immediate scope
• Keep only three shoppable sections for now: Flooring, Carpet, and Tile.
• Within each section, add filter controls for Color, Material, and Price. The controls must feel native to the theme and update results without a full page reload.
• Results can be reordered by Popularity, Newest, or Price, and the active sort should be clearly highlighted.

Card interaction
When a shopper hovers over any product card the image should soften/blur and an overlay with key specs appear; clicking anywhere on the card should open the full product page. Animations need to be smooth and lightweight so they will not hamper future expansion of the catalogue.

Foundation for growth
The CSS/JS structure you write today has to accept additional filters, categories, and data fields later with minimal refactor. Please follow semantic HTML, component-based SCSS (or CSS Modules), and vanilla JS or a modern framework—whichever you prefer—as long as the code stays readable and modular.

Acceptance
I’ll consider the job complete once the three sections render correctly, filtering and sorting work, hover overlays match the spec, and Lighthouse scores stay in the green for performance and accessibility. I’ll review all code in a Git repo before sign-off.

Attached are the layout and the website in its future stage