From 3ba4ecba662f75b33ab527781aa26b79584848fe Mon Sep 17 00:00:00 2001
From: aserrador <alejandro.ayala@onecluster.org>
Date: Thu, 22 Jan 2026 14:15:25 -0500
Subject: [PATCH] feat: Applied basic styles

---
 src/App.tsx                                   |  3 +--
 src/pages/catalog/Catalog.module.css          | 20 +++++++++------
 .../catalog/components/order/Order.module.css |  0
 src/pages/catalog/components/order/Order.tsx  |  2 ++
 .../product_cards/ProductCards.module.css     |  6 +++++
 .../components/product_cards/ProductCards.tsx |  6 +++--
 .../components/card/Card.module.css           | 21 ++++++++++++++++
 .../product_cards/components/card/card.tsx    | 25 ++++++++-----------
 8 files changed, 57 insertions(+), 26 deletions(-)
 create mode 100644 src/pages/catalog/components/order/Order.module.css
 create mode 100644 src/pages/catalog/components/product_cards/ProductCards.module.css
 create mode 100644 src/pages/catalog/components/product_cards/components/card/Card.module.css

diff --git a/src/App.tsx b/src/App.tsx
index 853ef7f..dcd14fa 100644
--- a/src/App.tsx
+++ b/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/>
     </>
   )
diff --git a/src/pages/catalog/Catalog.module.css b/src/pages/catalog/Catalog.module.css
index c2b14d3..8fd83f6 100644
--- a/src/pages/catalog/Catalog.module.css
+++ b/src/pages/catalog/Catalog.module.css
@@ -1,15 +1,15 @@
 
 .layout {
-  display: flex;
-  gap: 2rem;
-  padding: 2rem;
-  max-width: 1400px;
-  margin: 0 auto;
+    display: flex;
+    gap: 2rem;
+    padding: 2rem;
+    max-width: 1400px;
+    margin: 0 auto;
 }
 
 .catalog {
-  flex: 2 1 0;          /* ocupa ~2/3 del ancho disponible */
-  min-width: 0;         /* evita desbordamientos horizontales */
+    flex: 2 1 0;          /* ocupa ~2/3 del ancho disponible */
+    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 {
diff --git a/src/pages/catalog/components/order/Order.module.css b/src/pages/catalog/components/order/Order.module.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/pages/catalog/components/order/Order.tsx b/src/pages/catalog/components/order/Order.tsx
index 32d9ff8..79b2a10 100644
--- a/src/pages/catalog/components/order/Order.tsx
+++ b/src/pages/catalog/components/order/Order.tsx
@@ -1,3 +1,5 @@
+import styles from './Order.module.css'
+
 const Order = () => {
   return (
     <>
diff --git a/src/pages/catalog/components/product_cards/ProductCards.module.css b/src/pages/catalog/components/product_cards/ProductCards.module.css
new file mode 100644
index 0000000..0c6e1b8
--- /dev/null
+++ b/src/pages/catalog/components/product_cards/ProductCards.module.css
@@ -0,0 +1,6 @@
+
+.container {
+    border: 2px solid blueviolet;
+    display: flex;
+    flex-wrap: wrap;
+}
diff --git a/src/pages/catalog/components/product_cards/ProductCards.tsx b/src/pages/catalog/components/product_cards/ProductCards.tsx
index 7ccaba8..5b4cf81 100644
--- a/src/pages/catalog/components/product_cards/ProductCards.tsx
+++ b/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>
   )
 }
 
diff --git a/src/pages/catalog/components/product_cards/components/card/Card.module.css b/src/pages/catalog/components/product_cards/components/card/Card.module.css
new file mode 100644
index 0000000..da2c3f9
--- /dev/null
+++ b/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
+}
diff --git a/src/pages/catalog/components/product_cards/components/card/card.tsx b/src/pages/catalog/components/product_cards/components/card/card.tsx
index cb11777..30afe81 100644
--- a/src/pages/catalog/components/product_cards/components/card/card.tsx
+++ b/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>
-          <img src={`${image}`} alt="Imagen"/>
-        </div>
+    <div className={styles.container} key={cardId}>
+      <img src={`${image}`} alt="Imagen"/>
+      <p>{name}</p>
+      <p>{price}</p>
+      <p>{description}</p>
 
-        <div>
-          <p>{name}</p>
-          <p>{price}</p>
-          <p>{description}</p>
-        </div>
-
-        <div>
-          <button>Conocer Origen</button>
-          <button>Agregar</button>
-        </div>
+      <div className={styles.button_container}>
+        <button>Conocer Origen</button>
+        <button>Agregar</button>
       </div>
+    </div>
   )
 }