fix(deploy): resolve production routing and asset paths for GitHub Pages

## 🐞 Bug Fix

This MR addresses critical issues preventing the application from rendering correcty on GitHub Pages (subdirectory deployment).

## 📝 Changes

### 1. 🛣️ Routing (Subdirectory Support)
- **Vite:** Updated `base` configuration to `/test-abb/` to serve assets from the correct subdirectory.
- **React Router:** Added `basename="/test-abb"` to ensure client-side routing works within the hosted folder.
- **Cypress:** Updated `baseUrl` and navigation assertions in E2E tests to match the new subdirectory structure.

### 2. 🖼️ Asset Management
- **Broken Images:** Moved `public` images ([banner.jpg](cci:7://file:///home/lupy/Documentos/CV/tech_test_ABB/test-abb/public/banner.jpg:0:0-0:0), [hero.png](cci:7://file:///home/lupy/Documentos/CV/tech_test_ABB/test-abb/public/hero.png:0:0-0:0), etc.) to `src/assets`.
- **Import Strategy:** Refactored components to import images directly. This forces Vite to hash and bundle them correctly, resolving 404 errors in production.

## ✅ Verification
- **Local:** Verified via `yarn build` + `yarn preview`.
- **CI/CD:** Pipeline passing (all E2E tests updated and green).

Author: LuisMLGDev

cypress.config.ts

@@ -2,7 +2,7 @@ import { defineConfig } from "cypress";
 
 export default defineConfig({
   e2e: {
-    baseUrl: "http://localhost:5173",
+    baseUrl: "http://localhost:5173/test-abb",
     // SOLUCIÓN: Resolución Full HD para que el banner no tape nada
     viewportWidth: 1920,
     viewportHeight: 1080,

cypress/e2e/navbar.cy.ts

@@ -5,17 +5,18 @@ describe("testing navbar functions", () => {
 
   it("clicking on products works properly", () => {
     cy.get('[data-test="main-products"]').click({ force: true });
-    cy.location("pathname").should("equal", "/products");
+    cy.location("pathname").should("contain", "/products");
   });
 
   it("clicking on products works properly", () => {
     cy.get('[data-test="main-logo"]').click({ force: true });
-    cy.location("pathname").should("equal", "/");
+    // Verify it goes back to root (which is /test-abb/)
+    cy.location("pathname").should("match", /\/test-abb\/?$/);
   });
 
   it.skip("clicking on a product works properly", () => {
     cy.get('[data-test="product-card"]').first().click({ force: true });
-    cy.location("pathname").should("equal", "/product/1");
+    cy.location("pathname").should("contain", "/product/1");
   });
 
   it("login & logout works properly", () => {

public/banner.jpg src/assets/banner.jpgpublic/banner.jpg renamed to src/assets/banner.jpg

@@ -1,9 +1,11 @@
 import { FC } from "react";
 import { Link } from "react-router-dom";
 
+import banner from "../assets/banner.jpg";
+
 const Banner: FC = () => (
   <div className="container mt-8 mx-auto px-4 md:flex font-lora">
-    <img src="/banner.jpg" alt="banner" className="md:w-1/2" />
+    <img src={banner} alt="banner" className="md:w-1/2" />
     <div className="bg-[#e3edf6] dark:bg-slate-600 dark:text-white md:w-1/2 flex flex-col items-center text-center justify-center p-4">
       <h1 className="text-4xl font-bold mb-1">Don't miss the offer</h1>
       <h2 className="text-3xl font-semibold mb-4">Grab it now</h2>

public/emptyCart.jpg src/assets/emptyCart.jpgpublic/emptyCart.jpg renamed to src/assets/emptyCart.jpg

@@ -1,6 +1,7 @@
 import { FC } from "react";
 import { useAppDispatch, useAppSelector } from "../redux/hooks";
 import { updateBanner } from "../redux/features/homeSlice";
+import banner from "../assets/banner.jpg";
 
 const BannerPopup: FC = () => {
   const show = useAppSelector((state) => state.homeReducer.isBannerVisible);
@@ -10,13 +11,12 @@ const BannerPopup: FC = () => {
 
   return (
     <div
-      className={`fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50 transition-opacity duration-300 ${
-        show ? "opacity-100" : "opacity-0 pointer-events-none"
-      }`}
+      className={`fixed inset-0 flex items-center justify-center z-50 bg-black bg-opacity-50 transition-opacity duration-300 ${show ? "opacity-100" : "opacity-0 pointer-events-none"
+        }`}
     >
       <div className="relative">
         <img
-          src="/banner.jpg"
+          src={banner}
           alt="banner"
           className="w-[50vw] min-w-[300px] m-auto"
         />

public/hero.png src/assets/hero.pngpublic/hero.png renamed to src/assets/hero.png

@@ -4,6 +4,7 @@ import { useAppDispatch, useAppSelector } from "../redux/hooks";
 import { emptyCart, setCartState } from "../redux/features/cartSlice";
 import CartRow from "./CartRow";
 import toast from "react-hot-toast";
+import emptyCartImg from "../assets/emptyCart.jpg";
 
 const Cart: FC = () => {
   const dispatch = useAppDispatch();
@@ -78,7 +79,7 @@ const Cart: FC = () => {
                 items.map((item) => <CartRow key={item.id} {...item} />)
               ) : (
                 <div className="flex flex-col justify-center items-center p-4">
-                  <img src="/emptyCart.jpg" alt="empty" className="w-40" />
+                  <img src={emptyCartImg} alt="empty" className="w-40" />
                   <p className="text-center text-xl my-2">Your cart is empty</p>
                 </div>
               )}

src/components/Banner.tsx

@@ -1,5 +1,6 @@
 import { FC } from "react";
 import { Link } from "react-router-dom";
+import hero from "../assets/hero.png";
 
 const HeroSection: FC = () => {
   return (
@@ -27,7 +28,7 @@ const HeroSection: FC = () => {
           </div>
         </div>
         <div>
-          <img src="/hero.png" alt="hero" className="ml-auto" />
+          <img src={hero} alt="hero" className="ml-auto" />
         </div>
       </div>
     </div>

src/components/BannerPopup.tsx

@@ -6,7 +6,7 @@ import { BrowserRouter } from "react-router-dom";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <BrowserRouter>
+    <BrowserRouter basename="/test-abb">
       <App />
     </BrowserRouter>
   </React.StrictMode>