side menu to the left and icons in cards as props

frontend/src/components/Card.jsx

@@ -28,7 +28,7 @@ import { useTheme } from "../contexts/ThemeContext";
  * 
  */
 
-const Card = ({ title, status, children, styleMode, className }) => {
+const Card = ({ title, status, children, styleMode, className, titleIcon }) => {
     const cardRef = useRef(null);
     const [shortTitle, setShortTitle] = useState(title);
     const { theme } = useTheme();
@@ -57,7 +57,10 @@ const Card = ({ title, status, children, styleMode, className }) => {
             `col-xl-3 col-sm-6 d-flex flex-column align-items-center p-3 card-container ${className}`}
         >
             <div className={`card p-3 w-100 ${theme}`}>
-                <h3 className="text-center">{shortTitle}</h3>
+                <h3 className="text-center">
+                    {titleIcon}
+                    {shortTitle}
+                </h3>
                 <div className="card-content">{children}</div>
                 {status ? <span className="status text-center mt-2">{status}</span> : null}
             </div>
@@ -69,8 +72,9 @@ Card.propTypes = {
     title: PropTypes.string.isRequired,
     status: PropTypes.string.isRequired,
     children: PropTypes.node.isRequired,
-    styleMode: PropTypes.oneOf(["override", ""]), // Nueva prop opcional
-    className: PropTypes.string, // Nueva prop opcional
+    styleMode: PropTypes.oneOf(["override", ""]), 
+    className: PropTypes.string, 
+    titleIcon: PropTypes.node,
 };
 
 Card.defaultProps = {

frontend/src/components/CardContainer.jsx

@@ -24,7 +24,7 @@ const CardContainer = ({ cards, className }) => {
     return (
         <div className={`row justify-content-center g-0 ${className}`}>
             {cards.map((card, index) => (
-                <Card key={index} title={card.title} status={card.status} styleMode={card.styleMode} className={card.className}>
+                <Card key={index} title={card.title} status={card.status} styleMode={card.styleMode} className={card.className} titleIcon={card.titleIcon}>
                     <p className="card-text text-center">{card.content}</p>
                 </Card>
             ))}

frontend/src/components/SideMenu.jsx

@@ -30,9 +30,9 @@ const SideMenu = ({ isOpen, onClose }) => {
                 <FontAwesomeIcon icon={faTimes} />
             </button>
             <ul>
-                <li><a href="#inicio">Inicio</a></li>
-                <li><a href="#mapa">Mapa</a></li>
-                <li><a href="#historico">Histórico</a></li>
+                <li><a href="#inicio">ɪɴɪᴄɪᴏ</a></li>
+                <li><a href="#mapa">ᴍᴀᴘᴀ</a></li>
+                <li><a href="#historico">ʜɪsᴛᴏʀɪᴄᴏ</a></li>
             </ul>
         </div>
     );

frontend/src/components/SummaryCards.jsx

@@ -5,6 +5,8 @@ import { DataProvider } from '../contexts/DataContext';
 import { useData } from '../contexts/DataContext';
 
 import { useConfig } from '../contexts/ConfigContext';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCloud, faGauge, faTemperature0, faWater } from '@fortawesome/free-solid-svg-icons';
 
 /**
  * SummaryCards.jsx
@@ -58,10 +60,10 @@ const SummaryCardsContent = () => {
     const { data } = useData();
 
     const CardsData = [
-        { id: 1, title: "🌡️ Temperatura", content: "N/A", status: "Esperando datos..." },
-        { id: 2, title: "💧 Humedad", content: "N/A", status: "Esperando datos..." },
-        { id: 3, title: "☁️ Contaminación", content: "N/A", status: "Esperando datos..." },
-        { id: 4, title: "🛤️ Carretera", content: "N/A", status: "Esperando datos..." }
+        { id: 1, title: "Temperatura", content: "N/A", status: "Esperando datos...", titleIcon: <FontAwesomeIcon icon={faTemperature0} /> },
+        { id: 2, title: "Humedad", content: "N/A", status: "Esperando datos...", titleIcon: <FontAwesomeIcon icon={faWater} /> },
+        { id: 3, title: "Contaminación", content: "N/A", status: "Esperando datos...", titleIcon: <FontAwesomeIcon icon={faCloud} /> },
+        { id: 4, title: "Presión", content: "N/A", status: "Esperando datos...", titleIcon: <FontAwesomeIcon icon={faGauge} />  }
     ];
 
     if (data) {

frontend/src/css/Card.css

@@ -42,6 +42,10 @@
     font-weight: 600;
 }
 
+.card > h3 > .svg-inline--fa {
+    margin-right: 10px;
+}
+
 p.card-text {
     font-size: 2.2em;
     font-weight: 600;

frontend/src/css/SideMenu.css

@@ -59,5 +59,5 @@
     text-decoration: none;
     font-size: 30px;
     font-weight: 600;
-    text-transform: uppercase;
+    /*text-transform: uppercase;*/
 }

package-lock.json

@@ -0,0 +1,6 @@
+{
+  "name": "ContaminUS",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {}
+}