feat: enhance Card component with hover effect and update styles

refactor: update card component styles and links, enhance license attribution
enhanced styles with the new logo
2025-11-16 02:44:06 +01:00 · 2025-11-16 00:48:03 +01:00 · 2025-11-15 16:27:41 +01:00 · 2025-11-15 03:57:58 +01:00
17 changed files with 2502 additions and 4677 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -150,3 +150,4 @@ dist
 # Built Visual Studio Code Extensions
 *.vsix

+package-lock.json
--- a/.vite/deps/_metadata.json
+++ b/.vite/deps/_metadata.json
@@ -0,0 +1,8 @@
+{
+  "hash": "00cc7a2f",
+  "configHash": "29556463",
+  "lockfileHash": "25098e61",
+  "browserHash": "cc67abba",
+  "optimized": {},
+  "chunks": {}
+}
--- a/.vite/deps/package.json
+++ b/.vite/deps/package.json
@@ -0,0 +1,3 @@
+{
+  "type": "module"
+}
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>miarma.net HUB</title>
+    <title>er çentro</title>
    <meta name="twitter:card" content="summary_large_image">
    <meta property="og:url" content="https://miarma.net">
    <meta property="og:title" content="miarma.net HUB">
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -19,7 +19,9 @@
    "framer-motion": "^12.11.0",
    "html2canvas": "^1.4.1",
    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-bootstrap": "^2.10.10",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.9.6"
  },
  "devDependencies": {
    "@eslint/js": "^9.17.0",
--- a/public/config/settings.json
+++ b/public/config/settings.json
@@ -1,37 +1,46 @@
 [
-    {
-        "title": "Panel de administración",
-        "description": "Panel de control para los administradores de miarma.net",
-        "link": "https://panel.miarma.net/"
-    },
-    {
-        "title": "Jellyfin",
-        "description": "Servidor multimedia privado para ver videitos",
-        "link": "https://cine.miarma.net/"
-    },
-    {
-        "title": "Miarmacraft",
-        "description": "Nuestro server de MC Forge 1.20.1",
-        "link": "https://miarma.net/miarmacraft"
-    },
-    {
-        "title": "Calvaria",
-        "description": "Nuestro servidor de tModLoader 1.4.4.9",
-        "link": "https://miarma.net/calvaria"
-    },
    {
        "title": "Portafolio",
-        "description": "Mi portafolio personal (proyectos e info)",
-        "link": "http://gallardo.dev"
+        "link": "https://jose.miarma.net"
+    },
+    {
+        "title": "MiarmaGit",
+        "link": "https://git.miarma.net"
+    },
+    {
+        "title": "MiarmaPaste",
+        "link": "https://paste.miarma.net"
+    },
+    {
+        "title": "ETSIIMC",
+        "link": "https://miarma.net/etsiimc"
+    },
+    {
+        "title": "Status",
+        "link": "https://status.miarma.net"
+    },
+    {
+        "title": "Panel",
+        "link": "https://Panel.miarma.net"
+    },
+    {
+        "title": "MiarmaDrive",
+        "link": "https://drive.miarma.net"
+    },
+    {
+        "title": "Multimedia",
+        "link": "https://cine.miarma.net"
+    },
+    {
+        "title": "Docs",
+        "link": "https://docs.miarma.net"
    },
    {
        "title": "Huertos Bellavista",
-        "description": "Web de la comunidad de huertos urbanos de Bellavista",
-        "link": "https://www.huertosbellavista.es/"
+        "link": "https://www.huertosbellavista.es"
    },
    {
-        "title": "ContaminUS",
-        "description": "Proyecto a presentar en el Hack4Change ETSII 2025",
-        "link": "https://contaminus.miarma.net/groups/1/devices/6a6098"
+        "title": "Huertos de Cine",
+        "link": "https://cine.huertosbellavista.es"
    }
 ]
--- a/public/images/favicon.ico
+++ b/public/images/favicon.ico
--- a/public/images/logo-with-text.svg
+++ b/public/images/logo-with-text.svg
--- a/public/images/logo-without-text.svg
+++ b/public/images/logo-without-text.svg
--- a/src/components/Card.jsx
+++ b/src/components/Card.jsx
@@ -3,8 +3,9 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import PropTypes from "prop-types";
 import { useState, useEffect } from "react";

-export default function Card({ title, description, link }) {
+export default function Card({ title, link }) {
    const [image, setImage] = useState("");
+    const [buttonContent, setButtonContent] = useState(<>{title}</>);

    useEffect(() => {
        const getImage = async () => {
@@ -18,29 +19,37 @@ export default function Card({ title, description, link }) {

    return (
        <div className={"col-md-6 col-lg-3"}>
-            <div className={"card"}>
-                <div className={"card-body text-center"}>
-                    <img src={image} className={"card-img-top mb-3"}></img>
-                    <h5 className={"card-title"}>{title}</h5>
-                    <p className={"card-text"}>{description}</p>
-                    <a
-                        href={link}
-                        className={"btn btn-primary text-dark"}
-                    >
-                        <FontAwesomeIcon icon={faArrowUpRightFromSquare} className={"me-2"} />
-                        Ir
-                    </a>

+            <div className={"card shadow-sm"}>
+                <div className={"card-body p-0 text-center"}>
+                    <img src={image} className={"card-img-top"} alt={title}></img>
+                </div>
+
+                <div className="card-footer border-0 p-0">
+                    <div className="btn btn-primary w-100"
+                        onClick={() => window.open(link, "_blank")}
+                        onMouseEnter={() => setButtonContent(
+                            <>
+                                <FontAwesomeIcon icon={faArrowUpRightFromSquare} className={"me-2"} />
+                                Link
+                            </>
+                        )} 
+                        onMouseLeave={() => setButtonContent(
+                            <>
+                                {title}
+                            </>
+                        )}
+                    >
+                        {buttonContent}
+                    </div>
                </div>
            </div>
+
        </div>
    )
 }

 Card.propTypes = {
    title: PropTypes.string.isRequired,
-    description: PropTypes.string.isRequired,
-    link: PropTypes.string.isRequired,
-    onHoverStart: PropTypes.func,
-    onHoverEnd: PropTypes.func,
+    link: PropTypes.string.isRequired
 }
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -2,7 +2,7 @@ import License from './License';

 const Footer = () => {
  return (
-    <footer className="mt-5 text-center">
+    <footer className="text-center">
        <License work="miarma.net" workLink="https://miarma.net/" />
    </footer>
  );
--- a/src/components/Header.jsx
+++ b/src/components/Header.jsx
@@ -1,8 +1,8 @@
 const Header = () => {
    return (
-        <h1 className={"text-center my-5 fw-bold"}>
-            <a href="https://miarma.net/" className="gradient-text">miarma.net</a> hub
-        </h1>
+        <div className="d-flex justify-content-center my-3">
+            <img src="/images/logo-with-text.svg" width={192} height={192} />
+        </div>
    );
 }

--- a/src/components/License.jsx
+++ b/src/components/License.jsx
@@ -6,7 +6,7 @@ const License = ({ work, workLink }) => {
  return (
    <>
      <a href={workLink} target="_blank" rel="noopener noreferrer">{work}</a> © {currentYear} by{' '}
-      <a href="https://gallardo.dev" target="_blank" rel="noopener noreferrer">Gallardo7761 (Jose)</a> is licensed under{' '}
+      <a href="https://jose.miarma.net" target="_blank" rel="noopener noreferrer">Gallardo7761 (Jose)</a> is licensed under{' '}
      <a href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" rel="noopener noreferrer">
        CC BY-NC-ND 4.0
      </a>
--- a/src/components/ThemeButton.jsx
+++ b/src/components/ThemeButton.jsx
@@ -1,23 +0,0 @@
-import {useEffect, useState} from 'react';
-
-export default function ThemeButton() {
-    const [theme, setTheme] = useState(() => {
-        return localStorage.getItem("theme") || "light";
-    });
-
-    useEffect(() => {
-        document.body.classList.remove("light", "dark");
-        document.body.classList.add(theme);
-        localStorage.setItem("theme", theme);
-    }, [theme]);
-
-    const toggleTheme = () => {
-        setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
-    };
-
-    return (
-        <button className={"theme-toggle"} onClick={toggleTheme}>
-            {theme === "dark" ? "☀️" : "🌙"}
-        </button>
-    )
-}
--- a/src/css/Card.css
+++ b/src/css/Card.css
@@ -1,52 +1,50 @@
 .card {
-    border: none;
-    border-radius: 30px;
-    background: rgba(255, 255, 255, 0.05);
-    backdrop-filter: blur(10px);
-    -webkit-backdrop-filter: blur(10px);
-    box-shadow: 0 4px 5px rgba(0, 0, 0, 0.1);
-    color: var(--text);
-    z-index: 1;
-    transition: transform 0.3s ease, box-shadow 0.3s ease;
-}
-
-.card:hover {
-    transform: translateY(-10px);
-    box-shadow: 0 8px 10px rgba(0, 0, 0, 0.2);
+    border-radius: 0px;
+    color: var(--text-dark);
+    background: var(--light);
 }

 .card img {
-    border-radius: 15px;
+    border-radius: 0px;
 }

 .card-title {
-    font-weight: 1500 !important;
-    color: var(--text);
+    color: var(--text-dark);
 }

 .card-text {
-    color: var(--text);
+    color: var(--text-dark);
 }

 .btn-primary {
-    background: var(--accent);
-    background-size: 300% 300%; /* Para la animación */
-    border: none;
-    border-radius: 50px;
+    position: relative;
+    overflow: hidden;
+    background: var(--orange-dark) !important;
+    border-radius: 0px;
    padding: 10px 20px;
-    color: #000;
+    color: var(--text-light);
    font-weight: bold;
-    transition: background-position 0.3s ease;
-    animation: holografico 3s ease infinite;
+    font-size: large;
+    border: none;
+    z-index: 1;
+}
+
+.btn-primary::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: -100%;
+    width: 100%;
+    height: 100%;
+    background: var(--blue-dark) !important;
+    transition: left 0.5s ease; /* velocidad */
+    z-index: -1;
+}
+
+.btn-primary:hover::after {
+    left: 0;
 }

 .btn-primary:hover {
-    background: var(--accent-hover);
-    background-size: 300% 300%;
+    color: var(--text-light);
 }
-
-@keyframes holografico {
-    0% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
-    100% { background-position: 0% 50%; }
-}
--- a/src/css/index.css
+++ b/src/css/index.css
@@ -26,47 +26,23 @@
  src: url('/fonts/ProductSansBold.ttf');
 }

-* {
-  transition: background-color 0.4s, border-color 0.4s, color 0.4s;
-}
-
 :root {
-  --accent: linear-gradient(45deg,
-    #ff66ff,
-    #66ffff,
-    #ffff66,
-    #66ff66,
-    #ff6666
-  );
-  --accent-hover: linear-gradient(45deg,
-    #ff99ff,
-    #99ffff,
-    #ffff99,
-    #99ff99,
-    #ff9999
-  );
-}
-
-.light {
-    --primary: #bebebe;
-    --secondary: #ffffff;
-    --muted: #6c757d;
-    --text: #212529;
-    --bg: #ffffff;
-}
-
-.dark {
-    --primary: #343a40;
-    --secondary: #212529;
-    --muted: #adb5bd;
-    --text: #f8f9fa;
-    --bg: #212529;
+  --light: #f6f6f6;
+  --white: #ffffff;
+  --blue: #2F6CA3;
+  --blue-dark: #0A365E;
+  --orange: #e3bb9d;
+  --orange-dark: #c1763c;
+  --muted: #6c757d;
+  --text-dark: #212529;
+  --text-light: #ffffff;
+  --bg: #efefef;
 }

 html,
 body {
  font-family: "Open Sans", sans-serif;
-  color: var(--text);
+  color: var(--text-dark);
  background-color: var(--bg);
 }

@@ -79,7 +55,7 @@ span,
 a,
 button {
  font-family: "Open Sans", sans-serif;
-  color: var(--text);
+  color: var(--text-dark);
 }

 h1,
@@ -89,56 +65,25 @@ h4,
 h5,
 h6 {
  font-family: "Product Sans Bold", sans-serif;
-  color: var(--text);
+  color: var(--text-dark);
 }


 main {
-  color: var(--text);
+  color: var(--text-dark);
  background-color: var(--bg);
 }

-.theme-toggle {
-    position: fixed;
-    bottom: 20px;   
-    right: 20px;
-    z-index: 1000;
-    border: none;
-    border-radius: 50%;
-    width: 50px;
-    height: 50px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--accent);
-    color: white;
-    cursor: pointer;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-}
-
 a {
-    color: var(--accent);
+    color: var(--blue);
 }

 a:hover {
-    color: var(--accent-hover);
-}
-
-.theme-toggle:hover {
-    background-color: var(--accent-hover);
+    color: var(--blue-dark);
 }

 footer {
    margin-top: 30px;
    text-align: center;
    color: var(--muted);
-}
-
-.gradient-text {
-    background: var(--accent);
-    background-size: 300% 300%; 
-    -webkit-background-clip: text;
-    background-clip: text;
-    color: transparent;
-    animation: holografico 4s ease infinite;
-}
+}
Author	SHA1	Message	Date
Jose	bb73e1f564	feat: enhance Card component with hover effect and update styles	2025-11-16 02:44:06 +01:00
Jose	f426caeb1e	refactor: update card component styles and links, enhance license attribution	2025-11-16 00:48:03 +01:00
Jose	892bb34cf0	enhanced styles with the new logo	2025-11-15 16:27:41 +01:00
Jose	5219822ea1	changed brand logo and style	2025-11-15 03:57:58 +01:00