chore: Styling catalog

src/App.tsx

@@ -1,11 +1,12 @@
 import './App.css'
 import Catalog from './pages/catalog/Catalog'
-// import NavBar from './components/nav_bar/NavBar'
+import NavBar from './components/nav_bar/NavBar'
 import Login from './pages/login/Login'
 
 function App() {
   return (
     <>
+      <NavBar/>
       <Login/>
       <Catalog/>
     </>

src/pages/catalog/Catalog.module.css

@@ -1,26 +1,32 @@
 
 .layout {
     display: flex;
+    flex-direction: row;
     gap: 2rem;
     padding: 2rem;
-    max-width: 1400px;
     margin: 0 auto;
 }
 
 .catalog {
+    display: flex;
+    flex-direction: column;
     flex: 2 1 0;          /* ocupa ~2/3 del ancho disponible */
     min-width: 0;         /* evita desbordamientos horizontales */
+    background: rgba(255, 255, 255, 0.9);
+    border-radius: 24px;
+    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.1);
 }
 
 .order {
-  flex: 1 1 0;          /* ocupa ~1/3 del ancho disponible */
+    flex: 1 1 0;          /* ocupa ~1/3 del ancho disponible */
-  position: sticky;
+    position: sticky;
-  top: 2rem;            /* se queda pegada al hacer scroll */
+    top: 2rem;            /* se queda pegada al hacer scroll */
-  height: fit-content;  /* sólo el alto que necesite su contenido */
+    height: fit-content;  /* sólo el alto que necesite su contenido */
-  background: #fff;
+    background: rgba(255, 255, 255, 0.9);
-  border: 1px solid violet;
+    border: 1px solid violet;
-  border-radius: 8px;
+    border-radius: 24px;
-  padding: 1.5rem;
+    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.1);
+    padding: 1.5rem;
 }
 
 .order:hover {

src/pages/catalog/components/product_cards/ProductCards.module.css

@@ -1,6 +1,10 @@
 
 .container {
+    display: flex;
+    justify-content: center;
     border: 2px solid blueviolet;
     display: flex;
     flex-wrap: wrap;
+    border-radius: 32px;
+    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.1);
 }