A curated collection of 6 pixel-perfect, front-end-only brand website clones.
Every project is built independently from scratch — same core stack, unique design system.
+ 6 real brand websites faithfully recreated as React applications
+ 17+ individual routes across all projects combined
+ Shared stack: React 19 + Vite 7 + Tailwind CSS + React Router DOM v7
+ Each clone has its own component architecture, routing structure, and visual identity
+ Covers diverse industries — PC hardware, gaming, audio, consumer electronics
+ Fully responsive across all screen sizes with mobile hamburger menus
+ Built for learning modern React patterns, component reuse, and UI precision
+ No backend, no database — pure front-end engineering practice
Home — Products — Support Hero carousel, product grid, driver downloads, FAQ 
|
Home — Speaker — Earbuds Image gallery, color variants, add-to-cart UI, Lucide icons 
|
Home — BuildNow Clean architecture, build interface, page routing 
|
Home — Connect — View ChatButton, hero layout, product showcase 
|
Home — Products — Wireless Dark hero, gaming catalog, wireless peripherals 
|
Home — Microphones — Wireless Audio catalog, mic specs, wireless systems 
|
Pages — Home . Products . Support
Components — Navbar only ( page-level architecture )
Highlights — Auto-sliding hero carousel featuring Aspire AI / Swift Edge / SpatialLabs 3D,
full product category grid with spec tables, driver download center,
warranty info, FAQ accordion, and contact section
Pages — Home . SpeakerPage . EarbudsPage
Components — Navbar . Footer . ImageGallery . ProductCard
Highlights — Full-width hero banner, recommended product grid with hover-zoom effects,
multi-image carousel, 6 color variants for SoundLink Flex 2nd Gen,
5 color variants for QC Ultra Earbuds, Nexxbase benefits panel,
Lucide React icons, professional footer with customer care links
Pages — Home . BuildNow
Components — Page-level separation — no shared component layer
Highlights — Clean minimal structure, responsive landing page with structured content,
dedicated build interface page, dual HTML entry points (index.html +
Buildnow.html), lean routing with BrowserRouter
Pages — Home . Connect . View
Components — ChatButton . Footer . Navbar
Highlights — NZXT's dark hero layout with flagship product highlights, ecosystem
connect page for community and peripheral pairing, immersive product
view page, floating chat support button, 3 standalone HTML entry points
(index.html + connect.html + view.html), premium dark brand aesthetic
Pages — Home . Products . WirelessSystems
Components — Navbar . Footer
Highlights — ROG's signature red-on-black dark hero, full gaming hardware catalog
covering laptops / desktops / monitors / peripherals / components,
dedicated wireless ecosystem page, PostCSS autoprefixer pipeline,
tailwind.config.js with custom theme extensions
Pages — Home . Microphones . WirelessSystems
Components — Navbar . Footer
Highlights — Premium audio brand hero layout, full microphone catalog covering
dynamic / condenser / wireless / broadcast types, dedicated wireless
systems page for bodypack transmitters and receiver solutions,
PostCSS pipeline, SURE's professional brand identity preserved
| Technology | Version | Used In |
|---|---|---|
| React |  |
All 6 projects — component UI, hooks, state management |
| Vite |  |
All 6 projects — dev server, HMR, production builds |
| Tailwind CSS v4 |  |
via @tailwindcss/vite plugin
|
| Tailwind CSS v3 |  |
via tailwind.config.js + PostCSS pipeline
|
| React Router DOM |  |
All 6 projects — BrowserRouter, declarative client-side routing |
| PostCSS |  |
autoprefixer and CSS transformation pipeline
|
| Lucide React |  |
lightweight icon set for navbar and UI elements
|
Web-Clone-Collection/
|
+-- Acer/
| +-- src/pages/ --- Home.jsx . Products.jsx . Support.jsx
| +-- src/App.jsx . main.jsx . index.css
| +-- index.html . vite.config.js . package.json
|
+-- Bose/
| +-- src/components/ --- Footer.jsx . ImageGallery.jsx . Navbar.jsx . ProductCard.jsx
| +-- src/pages/ --- Home.jsx . SpeakerPage.jsx . EarbudsPage.jsx
| +-- src/App.jsx . main.jsx . index.css
| +-- index.html . vite.config.js . package.json
|
+-- GOLEM/
| +-- src/pages/ --- Home.jsx . BuildNow.jsx
| +-- src/App.jsx . main.jsx . index.css
| +-- index.html . Buildnow.html . vite.config.js . package.json
|
+-- NZXT/
| +-- src/components/ --- ChatButton.jsx . Footer.jsx . Navbar.jsx
| +-- src/pages/ --- Home.jsx . Connect.jsx . View.jsx
| +-- src/App.jsx . main.jsx . index.css
| +-- index.html . connect.html . view.html . vite.config.js . package.json
|
+-- ROG/
| +-- src/components/ --- Footer.jsx . Navbar.jsx
| +-- src/pages/ --- Home.jsx . Products.jsx . WirelessSystems.jsx
| +-- src/App.jsx . main.jsx . index.css
| +-- index.html . tailwind.config.js . postcss.config.js . vite.config.js
|
+-- SURE/
| +-- src/components/ --- Footer.jsx . Navbar.jsx
| +-- src/pages/ --- Home.jsx . Microphones.jsx . WirelessSystems.jsx
| +-- src/App.jsx . main.jsx . index.css
| +-- index.html . tailwind.config.js . postcss.config.js . vite.config.js
|
+-- README.md --- This file
|
git clone <your-repo-url>
cd web-clone-collectioncd Acer # or Bose / GOLEM / NZXT / ROG / SUREnpm install
npm run dev # -> http://localhost:5173npm run build
npm run preview| Project | Route | Page | Description |
|---|---|---|---|
|
/ |
Home | Hero carousel, product spotlights, brand sections |
|
/products |
Products | Full catalog — categories, cards, spec tables |
|
/support |
Support | Driver downloads, FAQ, warranty, contact |
|
/ |
Home | Hero banner, product grid, promo banners, sound gallery |
|
/speaker |
Speaker | SoundLink Flex 2nd Gen — gallery, 6 colors, cart UI |
|
/earbuds |
Earbuds | QC Ultra Earbuds — carousel, 5 colors, cart UI |
|
/ |
Home | Landing layout, brand content, navigation entry points |
|
/buildnow |
BuildNow | Build interface and workflow initiation page |
|
/ |
Home | Hero layout, product highlights, brand storytelling |
|
/connect |
Connect | Ecosystem connectivity and community engagement page |
|
/view |
View | Immersive product visual showcase and detail presentation |
|
/ |
Home | Dark hero, flagship product spotlights, ROG branding |
|
/products |
Products | Gaming hardware catalog — categories, specs, and cards |
|
/wireless-systems |
Wireless | ROG wireless peripheral ecosystem and connectivity showcase |
|
/ |
Home | Hero layout, featured audio products, brand storytelling |
|
/microphones |
Microphones | Full mic catalog — product cards, categories, spec details |
|
/wireless-systems |
Wireless | Professional wireless audio systems and ecosystem showcase |
| Command | Description |
|---|---|
npm run dev |
Start the Vite development server with live HMR |
npm run build |
Generate a production-optimized build in /dist |
npm run preview |
Serve and preview the production build locally |
npm run lint |
Run ESLint across the source to catch issues early |
| Priority | Feature | Applies To |
|---|---|---|
 |
Cart Functionality — add-to-cart, wishlist, and checkout flow |
|
|
Product Detail Pages — per-product spec sheets, galleries, configurators |
|
 |
Search and Filter — category, price, and spec-based filtering on listing pages |
|
|
New Brand Clones — expand with Corsair, Razer, Sony, Apple |
|
|
Dark Mode Toggles — persistent theme switching via Tailwind dark variant |
|
 |
Framer Motion — scroll reveals, page transitions, hover effects |
|
|
Portfolio Landing Page — shared index linking all 6 clones with live previews |
|
This repository is open-source under the MIT License. All individual projects are UI clones built for educational purposes only. All product images, logos, trademarks, and brand assets remain the property of their respective owners —
No affiliation with or endorsement by any of these brands is claimed or implied.