From 2623131185dee86414820d95a3088a6d679b25bf Mon Sep 17 00:00:00 2001
From: lauralog <laura.rdsz97@gmail.com>
Date: Mon, 14 Oct 2024 14:50:24 +0200
Subject: [PATCH] ajustes y correcciones

---
 app/layout.js                |  2 +-
 app/team/page.js             |  4 ++--
 components/core/Cards.jsx    | 18 +++++++++---------
 components/ui/Heading.jsx    | 16 +++++++---------
 components/ui/badge.jsx      |  9 ++++-----
 components/ui/customCard.jsx |  6 +++---
 tailwind.config.js           | 17 +++++++++--------
 7 files changed, 35 insertions(+), 37 deletions(-)

diff --git a/app/layout.js b/app/layout.js
index 4478257..e2252eb 100644
--- a/app/layout.js
+++ b/app/layout.js
@@ -25,7 +25,7 @@ const sourceSans = Source_Sans_3({
 });
 const inter = Inter({
   subsets: ["latin"],
-  weight: ["400", "700"],
+  weight: ["400", "500", "600", "700", "800"],
   variable: "--font-inter",
 });
 
diff --git a/app/team/page.js b/app/team/page.js
index cc84f59..4cbcb74 100644
--- a/app/team/page.js
+++ b/app/team/page.js
@@ -59,8 +59,8 @@ export default function Team(props) {
     <main className={"team page_" + currentLang }>
       {/* <Header route={"/team"} />   */}
       <main className="standard_margin">
-        <Heading level="h2">{t("team.title")}</Heading>
-         <section className="mx-auto grid xs:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8 md:gap-4 ">
+        <Heading level="h2" className="mx-auto mb-8 sm:mx-0 text-center">{t("team.title")}</Heading>
+         <section className="flex flex-wrap justify-center xs:gap-x-6 md:gap-x-8 gap-y-8 md:gap-y-12 ">
         {/* <section className="mx-auto flex flex-wrap gap-8 justify-center"> */}
           {team["UPM Team"]?.members ? renderMembers(team["UPM Team"].members) : <p>No members found.</p>}
         </section>
diff --git a/components/core/Cards.jsx b/components/core/Cards.jsx
index de50ecc..1757b8e 100644
--- a/components/core/Cards.jsx
+++ b/components/core/Cards.jsx
@@ -32,7 +32,7 @@ import {
 import Link from "next/link";
 
 const CardVariants = cva(
-  "border  min-w-20 p-4 inline-flex flex-col gap-4 items-center justify-between whitespace-nowrap rounded-md font-body text-sm text-text drop-shadow-md hover:scale-[101%] transition-all overflow-hidden",
+  "border border-primary min-w-20 p-4 inline-flex flex-col gap-4 items-center whitespace-nowrap rounded-md font-body text-sm text-text drop-shadow-md hover:scale-[101%] transition-all overflow-hidden",
   {
     variants: {
       direction: {
@@ -146,14 +146,14 @@ const Card = React.forwardRef(
         </CardHeader>
         <CardContent className="h-full">
           <CardTitle level="h3">{title}</CardTitle>
-          <CardSubtitle level="h5">{subtitle}</CardSubtitle>
+          <CardSubtitle level="h6">{subtitle}</CardSubtitle>
           {description && <CardDescription>{description}</CardDescription>}
           <div className={tagContainerClasses}>{renderTags(tags)}</div>
         </CardContent>
-        <footer>
+        <CardFooter className="justify-center">
           <Button href={route}>Ver proyecto</Button>{" "}
           {/**revisar el href que no funciona el link */}
-        </footer>
+        </CardFooter>
       </CustomCard>
     );
 
@@ -191,12 +191,12 @@ const Card = React.forwardRef(
           {translateCategory(category, currentLang)}
         </CardHeader>
         <CardContent className="gap-1">
-          <CardTitle level="h5">
+          <CardTitle level="h3">
             <i>{title}</i>
           </CardTitle>
           <Text level="p">{author}</Text>
         </CardContent>
-        <CardFooter className={"justify-end"}>
+        <CardFooter>
           {doi ? (
             <Button asChild variant="" radius="rounded_md">
               <Link rel="noopener noreferrer" target="_blank" href={doi}>
@@ -238,9 +238,9 @@ const Card = React.forwardRef(
           </CardContent>
         )}
         {/* {( email &&    
-        <footer>
+        <CardFooter>
           <a href={email}>{email}</a>
-        </footer>)} */}
+        </CardFooter>)} */}
       </CustomCard>
     );
 
@@ -259,7 +259,7 @@ const Card = React.forwardRef(
           <CardTitle>{title}</CardTitle>
           <CardDescription>{description}</CardDescription>
         </CardContent>
-        <CardFooter  className={"justify-end"}>
+        <CardFooter>
         {( github && <Button asChild variant="link">
             <Link rel="noopener noreferrer" target="_blank" href={github}>
               GitHub
diff --git a/components/ui/Heading.jsx b/components/ui/Heading.jsx
index 5adf44a..2609d4b 100644
--- a/components/ui/Heading.jsx
+++ b/components/ui/Heading.jsx
@@ -41,19 +41,17 @@ const Heading = ({ level = "h1", children, className }) => {
 
   // clsx, aplica clases según el valor del atributo level de manera dinámica
   const classes = clsx([
-    "font-primary font-semibold text-pretty",
+    "text-primary-900 font-title font-bold text-pretty",
     {
-      "text-h1 2xl:text-5xl !font-bold mb-6 text-title": level === "h1", // Aplicar "adasd" si el nivel es h1
-      "text-h2 2xl:text-3xl mb-4 text-title": level === "h2",
-      "text-h3 2xl:text-2xl mb-4 text-title": level === "h3",
-      "text-h4 2xl:text-xl mb-2 text-title": level === "h4",
-      "text-h5 2xl:text-lg mb-2 text-title": level === "h5",
-      "text-h6 uppercase mb-2 text-title": level === "h6",
-      "text-h4 2xl:text-lg mb-2 text-primary max-w-[45ch]": level === "highlight"
+      "text-h1 2xl:text-5xl mb-6": level === "h1", // Aplicar "adasd" si el nivel es h1
+      "text-h2 2xl:text-3xl mb-4": level === "h2",
+      "text-h3 2xl:text-2xl mb-4": level === "h3",
+      "text-h4 2xl:text-xl mb-2": level === "h4",
+      "text-h5 2xl:text-lg mb-2": level === "h5",
+      "text-h6 font-medium uppercase mb-2": level === "h6",
     },
     className
   ])
-
   return <Component className={classes}>{children}</Component>;
 };
 
diff --git a/components/ui/badge.jsx b/components/ui/badge.jsx
index b99078e..55b9cb8 100644
--- a/components/ui/badge.jsx
+++ b/components/ui/badge.jsx
@@ -4,7 +4,7 @@ import { cva } from "class-variance-authority";
 import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-  "inline-flex px-3 py-1 items-center h-fit w-fit rounded-md border text-[14px] transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex px-3 py-1 items-center h-fit w-fit rounded-md  border font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
@@ -17,12 +17,11 @@ const badgeVariants = cva(
       },
       size: {
         default:
-          "px-3 text-[0.875rem] font-normal" ,
+          "px-3 py-1 text-xs",
         lg:
-          "px-4 border-2 text-base font-semibold",
+          "px-3 py-1 border-2 text-base font-semibold uppercase",
         sm:
-          "px-1.5 py-.5 text-sm font-normal rounded-sm",
-   
+          "py-0.5 px-1.5 text-2xs xl:text-xs rounded-sm",
         },
       type: {
         success:
diff --git a/components/ui/customCard.jsx b/components/ui/customCard.jsx
index aed9993..83b9bb0 100644
--- a/components/ui/customCard.jsx
+++ b/components/ui/customCard.jsx
@@ -13,7 +13,7 @@ import Text from "@/components/ui/Text"
 const CustomCard = React.forwardRef(({ className, ...props }, ref) => (
   <article
     ref={ref}
-    className={cn("p-2 h-full xs:w-3/4 md:w-full rounded-xl border flex flex-col justify-start gap-4 shadow bg-primary-200/70 text-primary-800", className)}
+    className={cn("p-2 h-full w-full rounded-xl border flex flex-col justify-start gap-4 overflow-hidden shadow bg-primary-200/70 text-primary-800", className)}
     {...props} />
 ))
 CustomCard.displayName = "CustomCard"
@@ -31,7 +31,7 @@ const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
   <Heading
     ref={ref}
     level="h3" 
-    className={cn("font-semibold leading-6 tracking-tight", className)}
+    className={cn("font-semibold tracking-tight", className)}
     {...props} 
   />
 ))
@@ -62,7 +62,7 @@ CardContent.displayName = "CardContent"
 const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
   <footer
     ref={ref}
-    className={cn("pt-2 w-full flex gap-3 items-center", className)}
+    className={cn("pt-2 w-full flex gap-3 justify-end items-center", className)}
     {...props} />
 ))
 CardFooter.displayName = "CardFooter"
diff --git a/tailwind.config.js b/tailwind.config.js
index 1ec644c..86e9e56 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -13,8 +13,8 @@ module.exports = {
   theme: {
     extend: {
       fontFamily: {
-        "inter": ['var(--font-inter)', 'sans-serif'],
-        "sourceSans": ['var(--font-sourceSans)', 'sans-serif'],
+        "title": ['var(--font-inter)', 'sans-serif'],
+        "main": ['var(--font-sourceSans)', 'sans-serif'],
       },
       fontSize: {
         'xs': ['0.5rem', { lineHeight: '1.4' }],
@@ -22,12 +22,13 @@ module.exports = {
         'base': ['1rem', { lineHeight: '1.4' }], // body
 
         // con Hs creo que es mejor la verdad y así reservamos los tamañosde tw por si acaso
-        'h1': ['3rem', { lineHeight: '1.15' }],
-        'h2': ['2.5rem', { lineHeight: '1.4' }],
-        'h3': ['1.75rem', { lineHeight: '1.4' }],
-        'h4': ['1.5rem', { lineHeight: '1.4' }],
-        'h5': ['1.25rem', { lineHeight: '1.4'}],
-        'h6': ['0.9rem', { lineHeight: '1.4' }],
+        'h1': ['3rem', { lineHeight: '1.2' }],
+        'h2': ['2.5rem', { lineHeight: '1.2' }],
+        'h3': ['1.75rem', { lineHeight: '1.2' }],
+        'h4': ['1.5rem', { lineHeight: '1.2' }],
+        'h5': ['1.25rem', { lineHeight: '1.2'}],
+        'h6': ['1rem', { lineHeight: '1.2' }],
+
       },
       colors: {
         // whiteFull: "#ffffff",