feat: redesign CategoriesExplorer component with a modern card-based grid layout and dynamic palettes

txclient/src/app/components/Home/CategoriesExplorer/page.tsx

@@ -1,11 +1,20 @@
 "use client";
 import { motion } from "motion/react";
+import type { CSSProperties } from "react";
 import categories from "@core/Models/Categories.type";
 import { useNavigation } from "@core/app/hooks/goto";
 
 import style from "./style.module.css";
 import { useHeaderStore } from "@core/Store/Header.Store";
 
+const categoryPalette = [
+    "var(--wine-red)",
+    "var(--wine-dark)",
+    "var(--orange)",
+    "var(--yellow)",
+    "var(--green-darkestX1)",
+];
+
 export default function CategoriesExplorer() {
     const headerState = useHeaderStore();
     const { goTo } = useNavigation();
@@ -13,22 +22,33 @@ export default function CategoriesExplorer() {
         <>
             <div className={style.categoriesExplorer}>
                 <ul>
-                    {categories.map((category) => (
+                    {categories.map((category, index) => (
                         <motion.li
                             key={category.id}
-                            whileHover={{ scale: 1.1, backgroundColor: "#fff480" }}
+                            whileHover={{ y: -6 }}
                             whileTap={{ scale: 0.95 }}
-                            onClick={() => {
-                                headerState.setPublicFindCategoryId(category.id);
-                                goTo("/landing/find");
-                            }}
-                            style={{
-                                backgroundPosition: "left top",
-                                backgroundRepeat: "no-repeat",
-                            }}
                         >
-                            <h3>{category.name}</h3>
-                            <p>{category.description}</p>
+                            <button
+                                type="button"
+                                className={style.categoryCard}
+                                onClick={() => {
+                                    headerState.setPublicFindCategoryId(category.id);
+                                    goTo("/landing/find");
+                                }}
+                                style={{
+                                    "--category-color": categoryPalette[index % categoryPalette.length],
+                                } as CSSProperties}
+                            >
+                                <span className={style.categoryAccent} aria-hidden="true" />
+                                <span className={style.categoryContent}>
+                                    <span className={style.categoryLabel}>Categoría</span>
+                                    <h3>{category.name}</h3>
+                                    <p>{category.description}</p>
+                                </span>
+                                <span className={style.categoryAction} aria-hidden="true">
+                                    Ver turnos
+                                </span>
+                            </button>
                         </motion.li>
                     ))}
                 </ul>

txclient/src/app/components/Home/CategoriesExplorer/style.module.css

@@ -1,80 +1,138 @@
 .categoriesExplorer {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    padding-left: 30px;
-    padding-right: 30px;
-    position: relative; /*esto evito que las animaciones pasen por encima*/
+    width: 100%;
+    position: relative;
     z-index: 2;
 }
 
-.categoriesExplorer li h3 {
-    font-size: 1.4rem;
-    color: var(--black);
-    text-shadow: 1px 1px 1px var(--white);
+.categoriesExplorer ul {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 18px;
+    width: 100%;
+    margin: 0;
+    padding: 0;
 }
 
-.categoriesExplorer li p {
-    margin-top: 10px;
-    font-size: 1rem;
-    font-weight: 400;
-    color: var(--black);
+.categoriesExplorer li {
+    min-width: 0;
+    list-style-type: none;
+}
+
+.categoryCard {
+    --category-color: #fee34a;
+    min-height: 212px;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 22px;
+    position: relative;
+    overflow: hidden;
+    border: 1px solid rgba(148, 163, 184, 0.22);
+    border-radius: 24px;
+    padding: 24px;
+    background:
+        linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82)),
+        radial-gradient(circle at 12% 14%, color-mix(in srgb, var(--category-color) 32%, transparent), transparent 34%);
+    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.08);
+    color: #0f172a;
+    cursor: pointer;
     text-align: left;
-    text-shadow: 1px 1px 1px rgb(255, 241, 199);
+    transition:
+        border-color 180ms ease,
+        box-shadow 180ms ease,
+        transform 180ms ease;
 }
 
-@media (max-width: 1099px) {
+.categoryCard::after {
+    content: "";
+    position: absolute;
+    inset: auto -44px -56px auto;
+    width: 150px;
+    height: 150px;
+    border-radius: 999px;
+    background: color-mix(in srgb, var(--category-color) 22%, transparent);
+    transition: transform 180ms ease;
+}
+
+.categoryCard:hover,
+.categoryCard:focus-visible {
+    border-color: color-mix(in srgb, var(--category-color) 54%, rgba(148, 163, 184, 0.4));
+    box-shadow: 0 22px 44px rgba(15, 23, 42, 0.13);
+}
+
+.categoryCard:hover::after,
+.categoryCard:focus-visible::after {
+    transform: scale(1.16);
+}
+
+.categoryCard:focus-visible {
+    outline: 3px solid color-mix(in srgb, var(--category-color) 62%, #ffffff);
+    outline-offset: 4px;
+}
+
+.categoryAccent {
+    width: 54px;
+    height: 6px;
+    border-radius: 999px;
+    background: var(--category-color);
+    box-shadow: 0 8px 20px color-mix(in srgb, var(--category-color) 38%, transparent);
+}
+
+.categoryContent {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    position: relative;
+    z-index: 1;
+}
+
+.categoryLabel {
+    color: #64748b;
+    font-size: 0.77rem;
+    font-weight: 800;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+}
+
+.categoryCard h3 {
+    margin: 0;
+    color: #111827;
+    font-size: clamp(1.25rem, 2vw, 1.55rem);
+    line-height: 1.08;
+    letter-spacing: -0.03em;
+}
+
+.categoryCard p {
+    margin: 0;
+    color: #475569;
+    font-size: 0.98rem;
+    font-weight: 500;
+    line-height: 1.55;
+}
+
+.categoryAction {
+    width: fit-content;
+    position: relative;
+    z-index: 1;
+    border-radius: 999px;
+    padding: 8px 12px;
+    background: color-mix(in srgb, var(--category-color) 17%, #ffffff);
+    color: #0f172a;
+    font-size: 0.88rem;
+    font-weight: 800;
+}
+
+@media (max-width: 760px) {
     .categoriesExplorer ul {
-        margin-left: auto;
-        margin-right: auto;
-        padding: 0px;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        gap: 20px;
-        width: 100%;
-        flex-wrap: wrap;
-        justify-content: flex-start;
+        grid-template-columns: 1fr;
+        gap: 14px;
     }
 
-    .categoriesExplorer li {
-        list-style-type: none;
-        margin-top: 20px;
-        margin-bottom: 0px;
-        border: solid 1px var(--gray-light);
-        border-radius: 8px;
+    .categoryCard {
+        min-height: 190px;
+        border-radius: 20px;
         padding: 20px;
-        width: 100%;
-        background-color: rgb(254, 227, 74);
-        cursor: pointer;
-    }
-}
-
-@media (min-width: 1100px) {
-    .categoriesExplorer ul {
-        margin-left: auto;
-        margin-right: auto;
-        padding: 0px;
-        display: flex;
-        flex-direction: row;
-        justify-content: space-between;
-        gap: 20px;
-        width: 1030px;
-        flex-wrap: wrap;
-        justify-content: flex-start;
-    }
-
-    .categoriesExplorer li {
-        list-style-type: none;
-        margin-top: 20px;
-        margin-bottom: 0px;
-        border: solid 1px var(--gray-light);
-        border-radius: 8px;
-        padding: 20px;
-        width: 500px;
-        background-color: rgb(254, 227, 74);
-        cursor: pointer;
     }
 }

txclient/src/app/landing/categories/page.tsx

@@ -2,6 +2,7 @@ import AnimatedContainer from "@components/AnimatedConainer/AnimatedContainer";
 import CategoriesExplorer from "@core/app/components/Home/CategoriesExplorer/page";
 import DefaultLoginAction from "@core/app/components/LoginAction/DefaultLoginAction";
 import { ScrollToTop } from "@core/app/components/ScrollTop";
+import style from "./style.module.css";
 
 export default function CategoriesPage() {
     return (
@@ -19,19 +20,27 @@ export default function CategoriesPage() {
         >
             <ScrollToTop />
             <DefaultLoginAction />
-            <div className="homeCentered">
-                <h1 className="homeTitleHeader">Explorar Categorías</h1>
-                <p className="homeResumeHeader">
-                    Explorá las categorías de servicios disponibles y encontrá fácilmente lo que
-                    necesitás. Cada categoría agrupa servicios para que puedas sacar turnos de forma
-                    rápida y organizada. Además, una vez que ingreses en una categoría, podrás
-                    filtrar por tu ubicación para afinar la busqueda.
-                </p>
-            </div>
-            <div className="homeCentered">
-                <CategoriesExplorer />
-                <div style={{ height: "100px" }}>&nbsp;</div>
-            </div>
+            <section className={style.categoriesLanding} aria-labelledby="categories-title">
+                <div className={style.heroPanel}>
+                    <span className={style.eyebrow}>Servicios por rubro</span>
+                    <h1 id="categories-title" className={style.title}>
+                        Explorá categorías y encontrá tu próximo turno
+                    </h1>
+                    <p className={style.resume}>
+                        Elegí el tipo de servicio que necesitás y después filtrá por ubicación para
+                        encontrar opciones cercanas, rápidas y organizadas.
+                    </p>
+                </div>
+
+                <div className={style.gridPanel}>
+                    <div className={style.gridIntro}>
+                        <span>Categorías disponibles</span>
+                        <strong>Seleccioná una para continuar</strong>
+                    </div>
+                    <CategoriesExplorer />
+                </div>
+            </section>
+            <div className={style.bottomSpacer} aria-hidden="true" />
         </AnimatedContainer>
     );
 }

txclient/src/app/landing/categories/style.module.css

@@ -0,0 +1,138 @@
+.categoriesLanding {
+    width: min(1120px, calc(100% - 32px));
+    margin: 44px auto 0;
+    display: flex;
+    flex-direction: column;
+    gap: 28px;
+    position: relative;
+    z-index: 2;
+}
+
+.heroPanel {
+    overflow: hidden;
+    position: relative;
+    border: 1px solid rgba(255, 255, 255, 0.16);
+    border-radius: 32px;
+    padding: clamp(30px, 6vw, 68px);
+    background:
+        radial-gradient(circle at 12% 10%, rgba(255, 42, 127, 0.28), transparent 32%),
+        radial-gradient(circle at 90% 85%, rgba(127, 42, 255, 0.36), transparent 30%),
+        linear-gradient(135deg, var(--wine-superdark), var(--wine-darkest) 48%, var(--wine-dark));
+    box-shadow:
+        0 34px 88px rgba(16, 0, 39, 0.28),
+        0 1px 0 rgba(255, 255, 255, 0.14) inset;
+    text-align: center;
+}
+
+.heroPanel::before {
+    content: "";
+    position: absolute;
+    inset: 10px;
+    border: 1px solid rgba(255, 255, 255, 0.12);
+    border-radius: 24px;
+    pointer-events: none;
+}
+
+.heroPanel::after {
+    content: "";
+    position: absolute;
+    inset: auto -70px -120px auto;
+    width: 260px;
+    height: 260px;
+    border-radius: 999px;
+    background: rgba(66, 165, 245, 0.16);
+}
+
+.eyebrow {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    margin-bottom: 18px;
+    padding: 9px 16px;
+    border: 1px solid rgba(253, 228, 84, 0.34);
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.08);
+    box-shadow: 0 10px 26px rgba(16, 0, 39, 0.22);
+    color: var(--yellow);
+    font-size: 0.82rem;
+    font-weight: 800;
+    letter-spacing: 0.1em;
+    text-transform: uppercase;
+    backdrop-filter: blur(12px);
+}
+
+.title {
+    max-width: 820px;
+    margin: 0 auto;
+    color: var(--yellow);
+    background: linear-gradient(90deg, var(--yellow), var(--white) 48%, var(--wine-lighter));
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    font-size: clamp(2.35rem, 7vw, 4.9rem);
+    line-height: 0.94;
+    letter-spacing: -0.07em;
+}
+
+.resume {
+    max-width: 760px;
+    margin: 22px auto 0;
+    color: rgba(255, 255, 255, 0.84);
+    font-size: clamp(1.03rem, 2vw, 1.28rem);
+    line-height: 1.7;
+}
+
+.gridPanel {
+    border: 1px solid rgba(148, 163, 184, 0.24);
+    border-radius: 28px;
+    padding: clamp(18px, 3vw, 28px);
+    background: rgba(255, 255, 255, 0.72);
+    box-shadow: 0 18px 50px rgba(15, 23, 42, 0.1);
+    backdrop-filter: blur(16px);
+}
+
+.gridIntro {
+    display: flex;
+    justify-content: space-between;
+    gap: 16px;
+    margin-bottom: 16px;
+    color: #64748b;
+    font-size: 0.94rem;
+}
+
+.gridIntro strong {
+    color: #0f172a;
+}
+
+.bottomSpacer {
+    height: 88px;
+}
+
+@media (max-width: 700px) {
+    .categoriesLanding {
+        width: min(100% - 20px, 1120px);
+        margin-top: 32px;
+        gap: 16px;
+    }
+
+    .heroPanel {
+        border-radius: 24px;
+        text-align: left;
+    }
+
+    .title,
+    .resume {
+        margin-left: 0;
+        margin-right: 0;
+    }
+
+    .gridPanel {
+        border-radius: 22px;
+        padding: 14px;
+    }
+
+    .gridIntro {
+        flex-direction: column;
+        gap: 4px;
+    }
+}