StyleArem
Men's fashion e-commerce landing page. Full storefront layout with collections, a working bag, and social proof built in.
The problem
Men's fashion online is spread across marketplaces where every listing looks the same. StyleArem takes the opposite approach: one curated point of view, with collections by lifestyle, full product detail, and reviews in a single storefront.
What I built
Designed and built end to end: layout, catalog, quick view, bag drawer, FAQ, and footer.
React single-page storefront built with Vite and styled with Tailwind. Catalog, quick-view modal, bag drawer, FAQ, and newsletter sections share one client-side product model: items with sizes, colors, prices, ratings, and reviews.
- Present collections by lifestyle: streetwear, formal, essentials, and active
- Let shoppers inspect a product without leaving the grid
- Keep the bag visible at all times with running totals
- Answer common questions on the page with an FAQ
Key decisions
Category pills over separate pages
One collections section with category pills keeps every product two clicks away. Separate pages would add routes without adding value at this scale.
Quick-view modal over product pages
Size, color, quantity, materials, and reviews open over the grid, so comparing items never loses scroll position.
Bag as a slide-over drawer
Running subtotal, quantities, a promo field, and a free-shipping progress bar stay visible while shopping continues underneath.
Social proof in the hero
Avatar stack and member count sit next to the headline, where a first-time visitor decides whether to keep scrolling.
Challenges
Challenge
Scope stops at the front end
Solution
Bag math, promos, and the order confirmation all run in browser state. No backend or payment is wired, so the page never charges anything: the confirmation is local state, not a receipt.
Outcome
Shipped. Men's fashion storefront, live.
- Lighthouse 98/100 Performance, 100 Accessibility, 100 Best Practices, 100 SEO
- 6 lifestyle categories, 40+ products with quick-view modal and reviews
- Bag drawer with promo codes, free-shipping progress, and quantity controls — all client-side
- Component-based design system ready for backend integration