From f233fb8288cdd1cfacd56b2086f1ac7181816f7e Mon Sep 17 00:00:00 2001
From: lauralog <laura.rdsz97@gmail.com>
Date: Mon, 7 Oct 2024 13:06:20 +0200
Subject: [PATCH] customCards update

---
 app/about/page.js            | 96 ++++++++++++++++++++++--------------
 app/globals.css              |  9 +++-
 app/page.js                  |  7 ++-
 components/core/Cards.jsx    | 14 ++++--
 components/ui/Heading.jsx    |  2 +-
 components/ui/button.jsx     |  9 ++--
 components/ui/customCard.jsx | 14 +++---
 components/ui/image-old.jsx  | 57 ---------------------
 tailwind.config.js           |  4 +-
 9 files changed, 94 insertions(+), 118 deletions(-)
 delete mode 100644 components/ui/image-old.jsx

diff --git a/app/about/page.js b/app/about/page.js
index 5b2647b..8a532fd 100644
--- a/app/about/page.js
+++ b/app/about/page.js
@@ -4,10 +4,21 @@ import { useEffect, useState } from "react";
 import Link from "next/link";
 import { projects } from "@/constants/projects.js";
 import { useTranslation } from "react-i18next";
-import { FaceIcon, FigmaLogoIcon, HeartIcon, Pencil2Icon, ScissorsIcon } from "@radix-ui/react-icons";
+import {
+  FaceIcon,
+  FigmaLogoIcon,
+  HeartIcon,
+  Pencil2Icon,
+  ScissorsIcon,
+} from "@radix-ui/react-icons";
 import Heading from "@/components/ui/Heading";
 import { Button, ButtonVariants } from "@/components/ui/button";
-
+import {
+  CustomCard,
+  CardContent,
+  CardTitle,
+  CardDescription,
+} from "@/components/ui/customCard";
 
 export default function About() {
   // const [projects, setProjects] = useState(myprojectCards);
@@ -20,54 +31,67 @@ export default function About() {
 
   return (
     <div className={"projects page_" + currentLang}>
+      {/* INTRO */}
       <section className="parallax__layer standard_margin">
         <div className="flex flex-col">
-          <Heading level="h3" className="text-left">{t("about.Intro.sectionTitle")}</Heading>
+          <Heading level="h3" className="text-left">
+            {t("about.Intro.sectionTitle")}
+          </Heading>
           <div className="flex flex-col md:flex-row gap-4 lg:gap-12 items-start">
             <p className="basis-3/4">{t("about.Intro.sectionBody")}</p>
-            <Heading level="highlight" className="basis-1/4 font-semibold mt-4 md:mt-0 text-primary">
+            <Heading
+              level="highlight"
+              className="basis-1/4 font-semibold mt-4 md:mt-0 text-primary"
+            >
               {t("about.Intro.sectionHighlight")}
             </Heading>
           </div>
         </div>
       </section>
 
-  
+      {/* CARDS */}
       <section className="standard_margin">
         <Heading level="h3" className="text-left ">
           {t("about.Goals.sectionTitle")}
         </Heading>
+
         <div className=" flex items-center sm:items-strech sm:justify-stretch flex-col sm:grid sm:grid-cols-3 gap-4 md:gap-6 mb-20">
-          <div className="h-full  w-full xs:w-3/4 sm:w-full bg-primary-200 shadow-md shadow-primary/15 rounded text-center padding_card_highlight">
-      
+
+          <CustomCard className="h-full w-full flex flex-col justify-start gap-4 xs:w-3/4 sm:w-full  shadow-md shadow-primary/15 rounded text-center padding_card_highlight">
             <span className="mx-auto w-12 bg-primary-300 rounded-full content-center flex justify-center items-center mb-3">
-            <FigmaLogoIcon className="text-center p-3 justify-center h-12 w-12  text-primary" />
+              <FigmaLogoIcon className="text-center p-3 justify-center h-12 w-12  text-primary" />
             </span>
-            <div>
-              <Heading level="h4"> {t("about.Goals.Goal1.GoalTitle")}</Heading>
-              <p className=""> {t("about.Goals.Goal1.GoalBody")}</p>
-            </div>
-          </div>
-          <div className="h-full w-full xs:w-3/4 sm:w-full bg-primary-200  shadow-md shadow-primary/15 rounded text-center padding_card_highlight">
-          
+            <CardTitle level="h4">{t("about.Goals.Goal1.GoalTitle")}</CardTitle>
+            <CardDescription>{t("about.Goals.Goal1.GoalBody")}</CardDescription>
+          </CustomCard>
+
+          <CustomCard className="h-full w-full flex flex-col justify-start gap-4 xs:w-3/4 sm:w-full  shadow-md shadow-primary/15 rounded text-center padding_card_highlight">
             <span className=" mx-auto w-12 bg-primary-300  rounded-full content-center flex justify-center items-center mb-3">
-            <ScissorsIcon className="text-center p-3 justify-center h-12 w-12 text-primary" />
+              <ScissorsIcon className="text-center p-3 justify-center h-12 w-12 text-primary" />
             </span>
-            <div>
-              <Heading level="h4"> {t("about.Goals.Goal2.GoalTitle")}</Heading>
-              <p className=""> {t("about.Goals.Goal2.GoalBody")}</p>
-            </div>
-          </div>
-          <div className="h-full w-full xs:w-3/4 sm:w-full bg-primary-200 shadow-md shadow-primary/15 rounded text-center padding_card_highlight">
-           
+            <CardTitle level="h4">{t("about.Goals.Goal2.GoalTitle")}</CardTitle>
+            <CardDescription>{t("about.Goals.Goal2.GoalBody")}</CardDescription>
+          </CustomCard>
+
+          <CustomCard className="h-full w-full flex flex-col justify-start gap-4 xs:w-3/4 sm:w-full  shadow-md shadow-primary/15 rounded text-center padding_card_highlight">
             <span className="mx-auto w-12 bg-primary-300  rounded-full content-center flex justify-center items-center mb-3">
-            <HeartIcon className="text-center p-3 justify-center h-12 w-12 text-primary" />
+              <HeartIcon className="text-center p-3 justify-center h-12 w-12 text-primary" />
             </span>
-            <div>
-              <Heading level="h4"> {t("about.Goals.Goal3.GoalTitle")}</Heading>
-              <p className=""> {t("about.Goals.Goal3.GoalBody")}</p>
-            </div>
-          </div>
+            <CardTitle level="h4">{t("about.Goals.Goal3.GoalTitle")}</CardTitle>
+            <CardDescription>{t("about.Goals.Goal3.GoalBody")}</CardDescription>
+          </CustomCard>
+
+          <CustomCard className="h-full w-full flex flex-col justify-start gap-4 xs:w-3/4 sm:w-full  shadow-md shadow-primary/15 rounded text-center padding_card_highlight">
+            <span className="mx-auto w-16 aspect-square bg-primary-300 rounded-full content-center flex justify-center items-center">
+              <FigmaLogoIcon className="text-center p-3 justify-center h-12 w-12  text-primary" />
+            </span>
+            {/* <span className="divider_auto" /> */}
+            <CardTitle level="h4">Título de la card</CardTitle>
+            <CardDescription>
+              Lorem Ipsum es simplemente el texto de relleno de las imprentas y
+              archivos de texto.
+            </CardDescription>
+          </CustomCard>
         </div>
       </section>
 
@@ -77,7 +101,7 @@ export default function About() {
         </Heading>
         <div className="flex flex-col sm:flex-row subprojects_container gap-0 sm:gap-16">
           <div className="standard_margin-l pb-6 sm:pb-0 subproject text-ffdGreen-300 basis-6/12  border-2 sm:border-4 border-solid border-transparent border-t-ffdGreen-400">
-          <Heading level="h5" className="mb-1">
+            <Heading level="h5" className="mb-1">
               {t("about.Columns.Column1.Title")}
             </Heading>
             <h5> {t("about.Columns.Column1.Subtitle")}</h5>
@@ -91,34 +115,34 @@ export default function About() {
             >
               <Link rel="noopener noreferrer" target="_blank" href="#">
                 <span>{t("about.Columns.Column1.Button")}</span>
-              
               </Link>
             </Button>
           </div>
-          
+
           <div className="standard_margin-r subproject text-ffdBlue-300 basis-6/12  border-2 sm:border-4 border-solid border-transparent border-t-ffdBlue-300">
             <Heading level="h5" className="mb-1">
               {t("about.Columns.Column2.Title")}
             </Heading>
             <h5> {t("about.Columns.Column2.Subtitle")}</h5>
             <p> {t("about.Columns.Column2.Body")} </p>
-              <Button
+            <Button
               variant="outline"
               className="action_button margin_top_button mt-5 "
             >
               <Link rel="noopener noreferrer" target="_blank" href="#">
                 <span>{t("about.Columns.Column2.Button")}</span>
-              
               </Link>
             </Button>
           </div>
         </div>
       </section>
-      
+
       <section className="highlight-section">
         <div className="standard_padding">
           <div className="flex flex-col sm:gap-4 md:gap-4">
-            <Heading level="h3" className="text-left">{t("about.Impact.sectionTitle")}</Heading>
+            <Heading level="h3" className="text-left">
+              {t("about.Impact.sectionTitle")}
+            </Heading>
             <p className="sm:w-5/6">{t("about.Impact.sectionBody")}</p>
           </div>
         </div>
diff --git a/app/globals.css b/app/globals.css
index a6c7c9a..cb5bfc4 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 * {
-  /*border: 1px solid salmon*/
+  /* border: 1px solid salmon */
 }
 
 /*TYPE*/
@@ -75,6 +75,13 @@ del filter cambia de bloque a inline*/
 .gap_grid-r {
     @apply gap-x-4 sm:gap-x-6 lg:gap-x-8 xl:gap-x-10
 }
+
+/* DIVIDERS */
+.divider_auto {
+  @apply h-full;
+}
+
+
 main {
   min-height: 85dvh;
 }
diff --git a/app/page.js b/app/page.js
index 8d3a053..4cccfd5 100644
--- a/app/page.js
+++ b/app/page.js
@@ -10,8 +10,7 @@ import Heading from "@/components/ui/Heading";
 import Divider from "@/components/ui/divider";
 import Text from "@/components/ui/Text";
 import { ArrowRightIcon, EnvelopeOpenIcon } from "@radix-ui/react-icons";
-import Image from "@/components/ui/image-old";
-import Img from "@/components/ui/image";
+import Image from "@/components/ui/image";
 
 //Card
 import {
@@ -65,7 +64,7 @@ export default function Projects() {
             {t("front.action-button")} <ArrowRightIcon className=" h-4 w-4" />
           </Button>
         </BannerContent>
-        <Img
+        <Image
           src="placeholder.jpg"
           alt="Descripción de la imagen"
           fit="contain"
@@ -108,7 +107,7 @@ export default function Projects() {
             cardType="normal"
             className="text-center content-center border border-indigo-500 p-6 flex flex-col h-full justify-between"
           >
-            <Img
+            <Image
               isSvg={true}
               svgCode={`              
                 <svg
diff --git a/components/core/Cards.jsx b/components/core/Cards.jsx
index 6403542..e81b506 100644
--- a/components/core/Cards.jsx
+++ b/components/core/Cards.jsx
@@ -44,6 +44,12 @@ const tagContainerClasses = cn(
 );
 const classesImg = cn("bg-gray-200 min-h-16 min-w-16 object-cover");
 
+
+/**
+ * Se puede integrar si cambiamos el modelo de datos del json por array
+ * @param {String} tags
+ * @returns string array
+ */
 const renderTags = (tags) => {
   if (!tags) return null;
   const tagsArray = tags.split(",").map((tag) => tag.trim()); // Convierte el string en array y elimina espacios
@@ -122,7 +128,7 @@ const Card = React.forwardRef(
         {/* card header */}
         {(date || category) && (
           <header className="w-full flex gap-2 justify-start">
-            {date && (<Badge variant="outline" size="lg">
+            {date && (<Badge variant="outline" size="lg" className={"capitalize"}>
               {date}
             </Badge>)}
             {category && (<Badge variant="outline" size="lg">
@@ -181,7 +187,7 @@ const Card = React.forwardRef(
     // PROJECT
     const projectCard = (
       <article className={cn(CardVariants({ direction, className }))}>
-        <header className="w-full flex gap-4 justify-start">
+        <header className="w-full flex gap-2 justify-start">
           <Badge variant="outline" size="lg">
             {date}
           </Badge>
@@ -205,7 +211,7 @@ const Card = React.forwardRef(
     // COURSE
     const courseCard = (
       <article className={cn(CardVariants({ direction, className }))}>
-        <header className="flex w-full gap-4 items-center">
+        <header className="flex w-full gap-2 items-center">
           <Badge variant="outline" size="lg">
             {date}
           </Badge>
@@ -229,7 +235,7 @@ const Card = React.forwardRef(
     // PUBLICATIONS - ok
     const publicationCard = (
       <article className={cn(CardVariants({ direction, className })+ " bg-background")}>
-        <header className="w-full flex gap-3 justify-start">
+        <header className="w-full flex gap-2 justify-start">
           <Badge variant="outline" size="lg">
             {date}
           </Badge>
diff --git a/components/ui/Heading.jsx b/components/ui/Heading.jsx
index 384a39c..5adf44a 100644
--- a/components/ui/Heading.jsx
+++ b/components/ui/Heading.jsx
@@ -49,7 +49,7 @@ const Heading = ({ level = "h1", children, className }) => {
       "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-h5 2xl:text-lg mb-2 text-primary": level === "highlight"
+      "text-h4 2xl:text-lg mb-2 text-primary max-w-[45ch]": level === "highlight"
     },
     className
   ])
diff --git a/components/ui/button.jsx b/components/ui/button.jsx
index b2d49d3..79bb675 100644
--- a/components/ui/button.jsx
+++ b/components/ui/button.jsx
@@ -19,19 +19,16 @@ const ButtonVariants = cva(
         outlineForeground: //for outline buttons over dark backgrounds
           "border border-input border-secondary text-secondary-100 shadow-sm hover:bg-primary/30 hover:text-accent-foreground",
         secondary:
-          "bg-secondary-300 text-secondary-foreground shadow-sm hover:bg-secondary-200",
+          "bg-secondary-300 text-secondary-foreground shadow-sm hover:bg-secondary-400",
           ghost:
-          "bg-transparent text-primary hover:underline-offset-4 hover:bg-secondary-100/60 shadow-none",
+          "bg-transparent text-primary hover:underline-offset-4 hover:bg-secondary-200 shadow-none",
         link: 
           "!px-0.5 text-secondary-foreground bg-transparent hover:bg-transparent hover:underline shadow-none",
-        ghostForeground: 
-          "text-primary-foreground bg-transparent hover:bg-accent/10 hover:text-accent-foreground shadow-none",
-
         linkForeground:
           "bg-transparent text-primary-foreground underline-offset-4 underline hover:bg-secondary-100/60 shadow-none", 
         },
       size: {
-        default: " px-5 py-2.5 text-base",
+        default: "px-5 py-2.5 text-base",
         sm: "px-4 py-2 text-sm font-semibold",
         lg: "px-5 py-2.5 text-lg",
         icon: "px-5 w-8 py-2.5",
diff --git a/components/ui/customCard.jsx b/components/ui/customCard.jsx
index 7808acf..aed1f3a 100644
--- a/components/ui/customCard.jsx
+++ b/components/ui/customCard.jsx
@@ -10,13 +10,13 @@ import { cva } from "class-variance-authority";
 import { cn } from "@/lib/utils"
 import Heading from "@/components/ui/Heading"
 
-const customCard = React.forwardRef(({ className, ...props }, ref) => (
-  <div
+const CustomCard = React.forwardRef(({ className, ...props }, ref) => (
+  <article
     ref={ref}
-    className={cn("rounded-xl border bg-card text-card-foreground shadow", className)}
+    className={cn("rounded-xl border flex flex-col justify-center shadow bg-primary-200 text-primary-800", className)}
     {...props} />
 ))
-customCard.displayName = "customCard"
+CustomCard.displayName = "CustomCard"
 
 const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
   <div
@@ -49,13 +49,13 @@ CardSubtitle.displayName = "CardSubtitle"
 const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
   <p
     ref={ref}
-    className={cn("text-sm text-muted-foreground", className)}
+    className={cn("text-muted-foreground", className)}
     {...props} />
 ))
 CardDescription.displayName = "CardDescription"
 
 const CardContent = React.forwardRef(({ className, ...props }, ref) => (
-  <div ref={ref} className={cn("p-2 pt-2 h-full bg-secondary text-black", className)} {...props} />
+  <div ref={ref} className={cn("m-2 h-full ", className)} {...props} />
 ))
 CardContent.displayName = "CardContent"
 
@@ -67,4 +67,4 @@ const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
 ))
 CardFooter.displayName = "CardFooter"
 
-export { customCard, CardHeader, CardFooter, CardTitle, CardSubtitle, CardDescription, CardContent }
+export { CustomCard, CardHeader, CardFooter, CardTitle, CardSubtitle, CardDescription, CardContent }
diff --git a/components/ui/image-old.jsx b/components/ui/image-old.jsx
deleted file mode 100644
index 7cc93ab..0000000
--- a/components/ui/image-old.jsx
+++ /dev/null
@@ -1,57 +0,0 @@
-"use client";
-
-import React from "react";
-import clsx from "clsx";
-import { Badge } from "./badge"; // Importamos el Badge y sus variantes
-
-const Image = ({
-  fit = "cover",
-  src,
-  alt = "",
-  className,
-  layout = "top-right",
-  hasBadge = false,
-  badgeVariant = "",
-  badgeSize = "",      
-}) => {
-  const imageContainerClasses = clsx(
-    "relative flex w-full h-full",
-    className 
-  );
-  const imageClasses = clsx(
-    "w-full h-full", // La imagen ocupará todo el contenedor
-    {
-      "object-cover": fit === "cover", // Uso de object-cover para cubrir el contenedor
-      "object-contain": fit === "contain", // Uso de object-contain para mantener la relación de aspecto
-    }
-  );
-
-  const badgeLayout = clsx(
-    "absolute", 
-    {
-      "top-2 left-2": layout === "top-left",
-      "top-2 right-2": layout === "top-right",
-      "bottom-2 left-2": layout === "bottom-left",
-      "bottom-2 right-2": layout === "bottom-right",
-      "top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2": layout === "center",
-    }
-  );
-
-  return (
-    <div className={imageContainerClasses}>
-      <img
-        src={src}
-        alt={alt}
-        className={imageClasses} // Limitar el tamaño
-      />
-      {hasBadge && (
-        <Badge className={badgeLayout} variant={badgeVariant} size={badgeSize}>
-          Hola
-        </Badge>
-      )}
-    </div>
-  );
-};
-
-
-export default Image;
diff --git a/tailwind.config.js b/tailwind.config.js
index ed621d0..aabaa80 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -44,8 +44,8 @@ module.exports = {
           400: "#97A7FF",
           300: "#b2bef7",
           200: "#DBE2FF",
-          // 100: "#EBF0FF",
-          // 50: "#F5F8FF",
+          100: "#e0effe",
+          50: "#f0f7ff",
           foreground: "#FFFFFF",
          
         },