feat: redesign CategoriesExplorer component with a modern card-based grid layout and dynamic palettes
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user