feat: Applied basic styles

src/App.tsx

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

src/pages/catalog/Catalog.module.css

@@ -1,15 +1,15 @@
 
 .layout {
-  display: flex;
+    display: flex;
-  gap: 2rem;
+    gap: 2rem;
-  padding: 2rem;
+    padding: 2rem;
-  max-width: 1400px;
+    max-width: 1400px;
-  margin: 0 auto;
+    margin: 0 auto;
 }
 
 .catalog {
-  flex: 2 1 0;          /* ocupa ~2/3 del ancho disponible */
+    flex: 2 1 0;          /* ocupa ~2/3 del ancho disponible */
-  min-width: 0;         /* evita desbordamientos horizontales */
+    min-width: 0;         /* evita desbordamientos horizontales */
 }
 
 .order {
@@ -18,11 +18,15 @@
   top: 2rem;            /* se queda pegada al hacer scroll */
   height: fit-content;  /* sólo el alto que necesite su contenido */
   background: #fff;
-  border: 1px solid #e5e5e5;
+  border: 1px solid violet;
   border-radius: 8px;
   padding: 1.5rem;
 }
 
+.order:hover {
+    border: 3px dotted darkviolet;
+}
+
 /* Responsive: en pantallas estrechas se apilan */
 @media (max-width: 768px) {
   .layout {

src/pages/catalog/components/order/Order.tsx

@@ -1,3 +1,5 @@
+import styles from './Order.module.css'
+
 const Order = () => {
   return (
     <>

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

@@ -0,0 +1,6 @@
+
+.container {
+    border: 2px solid blueviolet;
+    display: flex;
+    flex-wrap: wrap;
+}

src/pages/catalog/components/product_cards/ProductCards.tsx

@@ -1,5 +1,7 @@
 import Card from './components/card/card.tsx';
 import type { Product } from '../../../../types.ts'
+import styles from "./ProductCards.module.css"
+
 
 type ProductCardProps = {
   products: Product[];
@@ -8,7 +10,7 @@ type ProductCardProps = {
 const ProductCards = ({ products } : ProductCardProps) => {
 
   return (
-    <>
+    <div className={styles.container}>
       { products.map((product) => {
         return (
           <div key={product.id}>
@@ -22,7 +24,7 @@ const ProductCards = ({ products } : ProductCardProps) => {
           </div>
         )
       }) }
-    </>
+    </div>
   )
 }
 

src/pages/catalog/components/product_cards/components/card/Card.module.css

@@ -0,0 +1,21 @@
+
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    border: 2px solid snow;
+    width: 325px;
+    height: 500px;
+    padding: 10px;
+    margin: 8px;
+}
+
+.container:hover {
+    border: 3px dotted pink;
+}
+
+.button_container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px
+}

src/pages/catalog/components/product_cards/components/card/card.tsx

@@ -1,3 +1,5 @@
+import styles from './Card.module.css'
+
 type CardProps = {
   image: string;
   name: string;
@@ -9,22 +11,17 @@ type CardProps = {
 
 const Card = ({ image, name, price, description, cardId } : CardProps) => {
   return (
-    <div key={cardId}>
+    <div className={styles.container} key={cardId}>
-        <div>
+      <img src={`${image}`} alt="Imagen"/>
-          <img src={`${image}`} alt="Imagen"/>
+      <p>{name}</p>
-        </div>
+      <p>{price}</p>
+      <p>{description}</p>
 
-        <div>
+      <div className={styles.button_container}>
-          <p>{name}</p>
+        <button>Conocer Origen</button>
-          <p>{price}</p>
+        <button>Agregar</button>
-          <p>{description}</p>
-        </div>
-
-        <div>
-          <button>Conocer Origen</button>
-          <button>Agregar</button>
-        </div>
       </div>
+    </div>
   )
 }