@crtobiasdelsud/portal-ui 1.0.0

package/src/components/Cabezal/CardCabezal/CardCabezal.module.scss

@@ -0,0 +1,403 @@
+@use "../../../styles/index" as *;
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  position: relative;
+  padding: 10px 0;
+}
+
+.imgLink {
+  display: block;
+  text-decoration: none;
+}
+
+.imgLinkFill {
+  position: relative;
+  aspect-ratio: 16 / 9;
+}
+
+.imgWrap {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border-radius: 2px;
+
+  img {
+    object-fit: cover;
+    transition: transform 0.3s ease;
+  }
+
+  &:hover img {
+    transform: scale(1.03);
+  }
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  flex: 1;
+}
+
+.header {
+  display: block;
+  font-weight: 500;
+  line-height: 150%;
+  letter-spacing: -2%;
+}
+
+.volanta {
+  display: inline;
+  color: var(--primary-color, #af0437);
+  line-height: 1.2;
+  margin-right: 4px;
+  font-family: var(--font-titulo, "Frank Ruhl Libre", serif);
+  font-weight: 700;
+  font-size: 20px;
+}
+
+.titulo {
+  display: inline;
+  font-family: var(--font-titulo, "Frank Ruhl Libre", serif);
+  font-weight: 500;
+  font-size: 20px;
+  line-height: 150%;
+  letter-spacing: -0.02em;
+  color: var(--text-color, #252523);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.autor {
+  font-size: 12px;
+  color: var(--text-color, #252523);
+  font-weight: 300;
+  padding-top: 10px;
+  font-family: var(--font-inter, Inter, sans-serif);
+
+}
+
+.copete {
+  font-size: 0.78rem;
+  font-family: "Inter", "Helvetica", Arial, sans-serif;
+  color: var(--text-color, #252523);
+  opacity: 0.7;
+  line-height: 1.4;
+  margin: 0;
+}
+
+.rank {
+  font-size: 1.1rem;
+  font-weight: 700;
+  color: var(--primary-color, #af0437);
+  margin-top: 8px;
+}
+
+// ── Ranked: mobile = fila horizontal / tablet+ = columna con card ─────────────
+.ranked {
+  flex-direction: row;
+  align-items: flex-start;
+  border-bottom: 1px solid #e2e2e2;
+
+  width: 100%;
+  
+  padding: 0px;
+
+  .header {
+    letter-spacing: 0;
+
+    line-height: 0;
+  }
+
+  .imgLink {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .body {
+    flex: 1;
+    gap: 4px;
+    min-width: 0;
+    padding-top: 15px;
+    padding-bottom: 15px;
+  }
+
+  .rank {
+    order: -1;
+    margin-top: 0;
+  }
+
+  .volanta {
+    font-size: 14px;
+  }
+
+  .titulo {
+    font-size: .875em;
+    font-weight: 700;
+    line-height: 1.3em;
+    letter-spacing: 0;
+    display: inline;
+
+  }
+
+
+  @include respond(tablet) {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 0;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
+    min-height: 288px;
+    border-bottom: 0px solid #e2e2e2;
+
+
+    .imgLink {
+      flex: unset;
+      min-width: unset;
+    }
+
+    .body {
+      min-width: unset;
+      padding: 15px;
+    }
+
+    .rank {
+      font-size: 1rem;
+      position: absolute;
+      bottom: .9375rem;
+      left: .625rem;
+      font-size: 1.25em;
+      font-weight: 700;
+      line-height: 1;
+      margin-top: 0;
+      order: 0;
+      font-family: var(--font-inter, Inter, sans-serif);
+    }
+  }
+}
+
+// ── Variantes ranking 2–5 (solo visibles en Tablet/Desktop) ──────────────────
+
+.ranking2 {
+  @include respond(tablet) {
+    border: none;
+    box-shadow: none;
+    background: rgba(59, 9, 9, 0.863);
+  }
+}
+
+.ranking3 {
+  @include respond(tablet) {
+    background: var(--secondary-color, #252523);
+    border-color: transparent;
+    box-shadow: none;
+
+    .volanta {
+      color: rgba(255, 255, 255, 0.65);
+    }
+
+    .titulo {
+      color: #fff;
+
+      &:hover {
+        color: #fff;
+      }
+    }
+
+    .rank {
+      color: rgba(255, 255, 255, 0.5);
+    }
+  }
+}
+
+.ranking4 {
+  @include respond(tablet) {
+    border: none;
+    border-left: 3px solid var(--primary-color, #af0437);
+    box-shadow: none;
+
+    .rank {
+      font-size: 1.4rem;
+      font-weight: 800;
+    }
+  }
+}
+
+.ranking5 {
+  @include respond(tablet) {
+    .rank {
+      font-size: 2rem;
+      font-weight: 800;
+      line-height: 1;
+    }
+  }
+}
+
+// ── Featured ──────────────────────────────────────────────────────────────────
+.featured {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+
+  .copete {
+    display: block;
+    font-size: 0.9rem;
+    opacity: 0.75;
+    font-family: "Inter", "Helvetica", Arial, sans-serif;
+    line-height: 1.5;
+    margin: 0;
+    color: var(--text-color, #252523);
+  }
+
+  @include respond(tablet) {
+    height: 100%;
+
+    .titulo {
+      font-size: 26px;
+    }
+
+    .volanta {
+      font-size: 26px;
+    }
+
+    .imgLinkFill {
+      aspect-ratio: unset;
+      flex: 1;
+      min-height: 0;
+    }
+
+    .body {
+      flex: none;
+    }
+  }
+}
+
+.featuredLarge {
+  @include respond(tablet) {
+    .titulo {
+      font-weight: 700;
+      font-size: 2.125em;
+    }
+
+    .volanta {
+      font-weight: 700;
+      font-size: 2.125em;
+    }
+  }
+}
+
+// ── Compact ───────────────────────────────────────────────────────────────────
+.compact {
+  display: flex;
+  flex-direction: column;
+
+  .body {
+    flex: none;
+    gap: 5px;
+  }
+
+  @include respond(tablet) {
+    height: 100%;
+
+    .imgLinkFill {
+      aspect-ratio: unset;
+      flex: 1;
+      min-height: 0;
+    }
+
+    .imgWrap {
+      flex: 1;
+      min-height: 0;
+      aspect-ratio: unset;
+    }
+  }
+}
+
+
+.mediumContainer {
+  width: 100%;
+  height: 300px;
+  padding: 0;
+}
+
+// ── FeaturedDuo (ambas cards en tipo duo — imagen 16:9 fija) ─────────────────
+.featuredDuo {
+  .imgLink {
+    display: block;
+
+    // imagen fija 16:9 — misma altura en ambas cards
+    img,
+    >* {
+      aspect-ratio: 16 / 9;
+    }
+  }
+
+  .titulo {
+    font-size: 24px;
+  }
+
+  .volanta {
+    font-size: 20px;
+  }
+
+  .copete {
+    font-family: "Inter", "Helvetica", Arial, sans-serif;
+    display: block;
+    opacity: 1;
+    margin: 0;
+    color: var(--text-color, #252523);
+    font-size: .875em;
+    line-height: 1.25rem;
+
+  }
+}
+
+// ── FeaturedHorizontal (primer card en unaDetallada) ──────────────────────────
+.featuredHorizontal {
+  .titulo {
+    display: block;
+    font-size: 26px;
+  }
+
+  .volanta {
+    display: block;
+    font-size: 20px;
+    margin-right: 0;
+    margin-bottom: 2px;
+  }
+
+  .copete {
+    display: block;
+    font-size: 0.9rem;
+    opacity: 0.75;
+    line-height: 1.5;
+    margin: 0;
+  }
+
+  @include respond(tablet) {
+    flex-direction: row;
+    align-items: flex-start;
+    gap: 20px;
+    padding: 0;
+
+    .imgLinkHoriz {
+      flex: 0 0 45%;
+      min-width: 0;
+      display: block;
+      text-decoration: none;
+    }
+
+    .body {
+      flex: 1;
+      min-width: 0;
+      padding: 6px 0;
+      gap: 10px;
+    }
+  }
+}

package/src/components/Cabezal/CardCabezal/index.jsx

@@ -0,0 +1,25 @@
+import Amp                from './variants/Amp/Amp'
+import Default            from './variants/Default/Default'
+import Featured           from './variants/Featured/Featured'
+import FeaturedDuo        from './variants/FeaturedDuo/FeaturedDuo'
+import FeaturedHorizontal from './variants/FeaturedHorizontal/FeaturedHorizontal'
+import Compact            from './variants/Compact/Compact'
+import Ranked             from './variants/Ranked/Ranked'
+import Medium             from './variants/Medium/Medium'
+import CarruselCard       from './variants/Carrusel/Carrusel'
+
+const RANKING_TYPES  = ['ranking', 'ranking2', 'ranking3', 'ranking4', 'ranking5']
+const FEATURED_TYPES = ['categoria', 'categoriaDos']
+
+export default function CardCabezal({ article, rank, tipo = 'default', index = 0, isAmp = false }) {
+  if (isAmp)                                        return <Amp                article={article} rank={rank} />
+  if (tipo === 'unaDetallada' && index === 0)        return <FeaturedHorizontal article={article} />
+  if (tipo === 'unaDetallada' && index > 0)          return <Default            article={article} />
+  if (tipo === 'duo')                                return <FeaturedDuo        article={article} />
+  if (FEATURED_TYPES.includes(tipo) && index === 0) return <Featured           article={article} large />
+  if (FEATURED_TYPES.includes(tipo) && index > 0)  return <Compact            article={article} />
+  if (tipo === 'medium')                            return <Medium             article={article} />
+  if (tipo === 'carrusel')                          return <CarruselCard       article={article} />
+  if (RANKING_TYPES.includes(tipo))                 return <Ranked             article={article} rank={rank} rankVariant={tipo} />
+  return <Default article={article} />
+}

package/src/components/Cabezal/CardCabezal/variants/Amp/Amp.jsx

@@ -0,0 +1,20 @@
+export default function Amp({ article, rank }) {
+  const { titulo, volanta, copete, imagen, slug } = article
+  const href = slug ? `/${slug}` : '#'
+
+  return (
+    <article className="card-cabezal">
+      {imagen?.url && (
+        <a href={href} className="card-cabezal__img-link">
+          <img src={imagen.url} alt={imagen.alt ?? titulo ?? ''} className="card-cabezal__img" />
+        </a>
+      )}
+      <div className="card-cabezal__body">
+        {volanta && <span className="card-cabezal__volanta">{volanta}.</span>}
+        {titulo && <a href={href} className="card-cabezal__titulo">{titulo}</a>}
+        {copete && <p className="card-cabezal__copete">{copete}</p>}
+      </div>
+      {rank != null && <span className="card-cabezal__rank">{rank}</span>}
+    </article>
+  )
+}

package/src/components/Cabezal/CardCabezal/variants/Carrusel/Carrusel.jsx

@@ -0,0 +1,39 @@
+import { useAdapters } from '../../../../../adapters/AdaptersContext.jsx'
+import styles from './Carrusel.module.scss'
+import Tooltip from '../../../../UI/ToolTip/ToolTip.jsx'
+
+export default function CarruselCard({ article }) {
+
+  const { Link } = useAdapters()
+  const { titulo, imagen, slug, autor } = article
+  const href = slug ? `/${slug}` : '#'
+
+  return (
+    <Tooltip text={titulo}>
+    <article className={styles.card}>
+      {imagen?.url && (
+        <Link href={href} className={styles.imgLink}>
+          <img
+            src={imagen.url}
+            alt={imagen.alt ?? titulo ?? ''}
+            className={styles.img}
+          />
+        </Link>
+      )}
+      <div className={styles.body}>
+        {titulo && <Link href={href} className={styles.titulo}>{titulo}</Link>}
+        {autor?.nombre && <span className={styles.autor}>Por {autor.nombre}</span>}
+      </div>
+      {autor?.avatar && (
+        <div className={styles.authorAvatarWrap}>
+          <img
+            src={autor.avatar}
+            alt={autor.nombre ?? ''}
+            className={styles.authorAvatar}
+          />
+        </div>
+      )}
+    </article>
+    </Tooltip>
+  )
+}

package/src/components/Cabezal/CardCabezal/variants/Carrusel/Carrusel.module.scss

@@ -0,0 +1,87 @@
+@use "../../../../../styles/index" as *;
+
+.card {
+  background: var(--secondary-color, #252523);
+  color: #fff;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 344px;
+  overflow: hidden;
+  border-radius: 2px;
+  position: relative;
+}
+
+.authorAvatarWrap {
+  position: absolute;
+  
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 100px;
+  height: 100px;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.authorAvatar {
+  width: 100px;
+  height: 100px;
+  object-fit: cover;
+  display: block;
+  border: 0px;
+  border-radius: 3px;
+}
+
+.imgLink {
+  display: block;
+  text-decoration: none;
+  flex-shrink: 0;
+  overflow: hidden;
+}
+
+.img {
+  width: 100%;
+  height: 190px;
+  object-fit: cover;
+  display: block;
+}
+
+.body {
+  padding: 20px 20px 15px;
+  padding-top: 15%;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  flex: 1;
+}
+
+.titulo {
+  display: block;
+  color: #fff;
+  font-family: var(--font-titulo, "Frank Ruhl Libre", serif);
+  font-weight: 700;
+  text-decoration: none;
+  color: #fff;
+  font-size: 1rem;
+  line-height: 1.2rem;
+  text-align: left;
+  width: 100%;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.autor {
+
+  font-family: var(--font-inter), Inter, sans-serif;
+
+  color: #fff;
+  font-size: 12px;
+  font-weight: 900;
+  margin-right: auto;
+  margin-top: auto;
+  padding: .625rem 0;
+
+}

package/src/components/Cabezal/CardCabezal/variants/Compact/Compact.jsx

@@ -0,0 +1,36 @@
+import styles from '../../CardCabezal.module.scss'
+import { useAdapters } from '../../../../../adapters/AdaptersContext.jsx'
+import AspectImage from '../../../../UI/AspectImage/AspectImage.jsx'
+import Tooltip from '../../../../UI/ToolTip/ToolTip.jsx'
+
+export default function Compact({ article }) {
+
+  const { Link } = useAdapters()
+  const { titulo, volanta, imagen, slug, autor, focalPoint } = article
+  const href = slug ? `/${slug}` : '#'
+
+  return (
+    <Tooltip text={titulo}>
+    <article className={`${styles.card} ${styles.compact}`}>
+      {imagen?.url && (
+        <Link href={href} className={`${styles.imgLink} ${styles.imgLinkFill}`}>
+          <AspectImage
+            src={imagen.url}
+            alt={imagen.alt ?? titulo ?? ''}
+            aspect="16:9"
+            fill
+            focalPoint={focalPoint}
+          />
+        </Link>
+      )}
+      <div className={styles.body}>
+        <div className={styles.header}>
+          {volanta && <span className={styles.volanta}>{volanta}.</span>}
+          {titulo && <Link href={href} className={styles.titulo}>{titulo}</Link>}
+        </div>
+        {autor?.nombre && <span className={styles.autor}>Por {autor.nombre}</span>}
+      </div>
+    </article>
+    </Tooltip>
+  )
+}

package/src/components/Cabezal/CardCabezal/variants/Default/Default.jsx

@@ -0,0 +1,35 @@
+import styles from '../../CardCabezal.module.scss'
+import { useAdapters } from '../../../../../adapters/AdaptersContext.jsx'
+import AspectImage from '../../../../UI/AspectImage/AspectImage.jsx'
+import Tooltip from '../../../../UI/ToolTip/ToolTip.jsx'
+
+export default function Default({ article }) {
+
+  const { Link } = useAdapters()
+  const { titulo, volanta, imagen, slug, autor, focalPoint } = article
+  const href = slug ? `/${slug}` : '#'
+
+  return (
+<Tooltip text={titulo}>
+    <article className={styles.card}>
+      {imagen?.url && (
+        <Link href={href} className={styles.imgLink}>
+          <AspectImage
+            src={imagen.url}
+            alt={imagen.alt ?? titulo ?? ''}
+            aspect="16:9"
+            focalPoint={focalPoint}
+          />
+        </Link>
+      )}
+      <div className={styles.body}>
+        <div className={styles.header}>
+          {volanta && <span className={styles.volanta}>{volanta}.</span>}
+          {titulo && <Link href={href} className={styles.titulo}>{titulo}</Link>}
+        </div>
+        {autor?.nombre && <span className={styles.autor}>Por {autor.nombre}</span>}
+      </div>
+    </article>
+    </Tooltip>
+  )
+}

package/src/components/Cabezal/CardCabezal/variants/Featured/Featured.jsx

@@ -0,0 +1,36 @@
+import styles from '../../CardCabezal.module.scss'
+import { useAdapters } from '../../../../../adapters/AdaptersContext.jsx'
+import AspectImage from '../../../../UI/AspectImage/AspectImage.jsx'
+import Tooltip from '../../../../UI/ToolTip/ToolTip.jsx'
+
+export default function Featured({ article, large }) {
+
+  const { Link } = useAdapters()
+  const { titulo, volanta, copete, imagen, slug, autor, focalPoint } = article
+  const href = slug ? `/${slug}` : '#'
+
+  return (
+ <Tooltip text={titulo}>
+    <article className={`${styles.card} ${styles.featured} ${large ? styles.featuredLarge : ''}`}>
+      {imagen?.url && (
+        <Link href={href} className={`${styles.imgLink} ${styles.imgLinkFill}`}>
+          <AspectImage
+            src={imagen.url}
+            alt={imagen.alt ?? titulo ?? ''}
+            aspect="16:9"
+            fill
+            focalPoint={focalPoint}
+          />
+        </Link>
+      )}
+      <div className={styles.body}>
+        <div className={styles.header}>
+          {volanta && <span className={styles.volanta}>{volanta}.</span>}
+          {titulo && <Link href={href} className={styles.titulo}>{titulo}</Link>}
+        </div> 
+        {autor?.nombre && <span className={styles.autor}>Por {autor.nombre}</span>}
+      </div>
+    </article>
+    </Tooltip>
+  )
+}