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

@@ -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,18 +11,13 @@ 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"/>
-        </div>
-
-        <div>
       <p>{name}</p>
       <p>{price}</p>
       <p>{description}</p>
-        </div>
 
-        <div>
+      <div className={styles.button_container}>
         <button>Conocer Origen</button>
         <button>Agregar</button>
       </div>