Merge branch 'main' of https://github.com/ging/boiler

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>

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;
 }

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 Page() {
             {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 Page() {
             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

components/core/Cards.jsx

@@ -46,6 +46,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
@@ -128,7 +134,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">
@@ -187,7 +193,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>
@@ -211,7 +217,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>
@@ -235,7 +241,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>

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
   ])

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",

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 }