changed brand logo and style

src/components/Card.jsx

@@ -3,7 +3,7 @@ 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("");
 
     useEffect(() => {
@@ -22,10 +22,9 @@ export default function Card({ title, description, link }) {
                 <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"}
+                        className={"btn btn-primary"}
                     >
                         <FontAwesomeIcon icon={faArrowUpRightFromSquare} className={"me-2"} />
                         Ir

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>
   );

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>
     );
 }
 

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>
-    )
-}

src/css/Card.css

@@ -1,52 +1,32 @@
 .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;
+    box-shadow: black ;
 }
 
 .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;
+    background: var(--orange-dark);
+    border-radius: 0px;
     padding: 10px 20px;
-    color: #000;
+    color: var(--text-dark);
     font-weight: bold;
-    transition: background-position 0.3s ease;
-    animation: holografico 3s ease infinite;
+    border: none;
 }
 
 .btn-primary:hover {
-    background: var(--accent-hover);
-    background-size: 300% 300%;
-}
-
-@keyframes holografico {
-    0% { background-position: 0% 50%; }
-    50% { background-position: 100% 50%; }
-    100% { background-position: 0% 50%; }
+    background: var(--blue);
+    color: var(--text-light)
 }

src/css/index.css

@@ -26,48 +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;
 }
 
 html,
 body {
   font-family: "Open Sans", sans-serif;
-  color: var(--text);
-  background-color: var(--bg);
+  color: var(--text-dark);
+  background-color: var(--white);
 }
 
 /* Tipografía global */
@@ -79,7 +54,7 @@ span,
 a,
 button {
   font-family: "Open Sans", sans-serif;
-  color: var(--text);
+  color: var(--text-dark);
 }
 
 h1,
@@ -89,56 +64,25 @@ h4,
 h5,
 h6 {
   font-family: "Product Sans Bold", sans-serif;
-  color: var(--text);
+  color: var(--text-dark);
 }
 
 
 main {
-  color: var(--text);
-  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);
+  color: var(--text-dark);
+  background-color: var(--white);
 }
 
 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;
-}
+}