pagina projects

ging · Jun 24, 2024 · 445cba9 · 445cba9
1 parent 3d0f45e
commit 445cba9
Show file tree

Hide file tree

Showing 13 changed files with 875 additions and 643 deletions.
diff --git a/app/globals.css b/app/globals.css
diff --git a/app/globals.css.map b/app/globals.css.map
diff --git a/app/project/page.js b/app/project/page.js
@@ -9,6 +9,7 @@ import { myprojectCards } from "@/constants/projectsCards.js";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircleNodes } from "@fortawesome/free-solid-svg-icons";
 import { faGrip } from "@fortawesome/free-solid-svg-icons";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 import { useTranslation } from "react-i18next";
 
 export default function Projects() {
@@ -27,19 +28,21 @@ export default function Projects() {
           <h2 className="text-left">{t("project.Intro.sectionTitle")}</h2>
           <div className="flex flex-col md:flex-row gap-4 md:gap-12 items-start">
             <p className="basis-3/4">{t("project.Intro.sectionBody")}</p>
-            <h4 className="basis-1/4 font-semibold mt-4 md:mt-0 text-white">
+            <h3 className="basis-1/4 font-semibold mt-4 md:mt-0 text-white">
               {t("project.Intro.sectionHighlight")}
-            </h4>
+            </h3>
           </div>
         </div>
       </section>
       <section className="standard_margin">
-        <h2 className="text-left text-white">{t("project.Goals.sectionTitle")}</h2>
-        <div className="flex flex-col sm:grid sm:grid-cols-2 gap-8 md:gap-12">
+        <h2 className="text-left text-white">
+          {t("project.Goals.sectionTitle")}
+        </h2>
+        <div className="flex flex-col sm:grid sm:grid-cols-3 gap-4 md:gap-6">
           <div className="card_goals bg-black text-center padding_card_highlight">
             <FontAwesomeIcon icon={faCircleNodes} className="icon_circle" />
             <div>
-              <h3 > {t("project.Goals.Goal1.GoalTitle")}</h3>
+              <h3> {t("project.Goals.Goal1.GoalTitle")}</h3>
               <p className=""> {t("project.Goals.Goal1.GoalBody")}</p>
             </div>
           </div>
@@ -50,14 +53,46 @@ export default function Projects() {
               <p className=""> {t("project.Goals.Goal2.GoalBody")}</p>
             </div>
           </div>
-
+          <div className="card_goals bg-black text-center padding_card_highlight">
+            <FontAwesomeIcon icon={faGrip} className="icon_circle" />
+            <div>
+              <h3> {t("project.Goals.Goal2.GoalTitle")}</h3>
+              <p className=""> {t("project.Goals.Goal2.GoalBody")}</p>
+            </div>
+          </div>
+        </div>
+      </section>
+      <section className="subprojects standard_margin-y">
+        <h2 className="text-left standard_margin-x">{t("project.Subprojects.sectionTitle")}</h2>
+        <div className="standard_margin-x grid grid-cols-2 gap-32 subprojects_container">
+          <div className="text-ffdGreen-300">
+            <h3 className=""> {t("project.Subprojects.Subproject1.Title")}</h3>
+            <h5> {t("project.Subprojects.Subproject1.Subtitle")}</h5>
+            <p> {t("project.Subprojects.Subproject1.Body")} </p>
+            <button className="action_button margin_top_button text-ffdGreen-300 border-ffdGreen-300">
+              <Link rel="noopener noreferrer" target="_blank" href="#">
+                <span>{t("project.Subprojects.Subproject1.Button")}</span>
+                <FontAwesomeIcon icon={faArrowRight} />
+              </Link>
+            </button>
+          </div>
+          <div className="text-ffdBlue-300">
+          <h3 className=""> {t("project.Subprojects.Subproject2.Title")}</h3>
+            <h5> {t("project.Subprojects.Subproject2.Subtitle")}</h5>
+            <p> {t("project.Subprojects.Subproject2.Body")} </p>
+            <button className="action_button margin_top_button text-ffdBlue-300 border-ffdBlue-300">
+              <Link rel="noopener noreferrer" target="_blank" href="#">
+              <span>{t("project.Subprojects.Subproject2.Button")}</span>
+                <FontAwesomeIcon icon={faArrowRight} />
+              </Link>
+            </button>
+          </div>
         </div>
       </section>
-
       <section className="standard_margin">
-      <div className="flex flex-col sm:gap-4 md:gap-4">
+        <div className="flex flex-col sm:gap-4 md:gap-4">
           <h2 className="text-left">{t("project.Impact.sectionTitle")}</h2>
-            <p className="sm:basis-3/4">{t("project.Impact.sectionBody")}</p>
+          <p className="sm:basis-3/4">{t("project.Impact.sectionBody")}</p>
         </div>
       </section>
       <div className="banner px-4 sm:px-8 md:px-14 md:py-2 lg:px-24 lg:py-4 xl:px-28 xl:py-4 2xl:px-32 2xl:py-6">

diff --git a/app/sass/components/_icons.sass b/app/sass/components/_icons.sass
@@ -5,21 +5,21 @@
     @apply text-slate-400
 
     @media (min-width: $min-phone-width)
+        height: 1rem
+        width: 1rem
+        padding: 0.5rem
+    @media (min-width: $min-tablet-width)
         height: 1.5rem
         width: 1.5rem
-        padding: 0.7rem
-    @media (min-width: $min-tablet-width)
-        height: 2.2rem
-        width: 2.2rem
-        padding: 1.3rem
+        padding: 0.8rem
     @media (min-width: $min-desktop-width)
-        height: 2.4rem
-        width: 2.4rem
-        padding: 1.3rem
+        height: 1.8rem
+        width: 1.8rem
+        padding: 1rem
     @media (min-width: $min-xl-desktop-width)
-        height: 2.8rem
-        width: 2.8rem
-        padding: 1.3rem
+        height: 2.1rem
+        width: 2.1rem
+        padding: 1rem
 
 .icon_circle
     @include icon_circle
diff --git a/app/sass/lib/_mixins.sass b/app/sass/lib/_mixins.sass
@@ -254,8 +254,7 @@
             background-position: center
             background-repeat: no-repeat
             // object-fit: cover;
-            display: flex
-            flex-direction: column
+          
             align-items: flex-start
             h1, p
                 color: white
@@ -299,8 +298,7 @@
             background-position: center
             background-repeat: no-repeat
             // object-fit: cover;
-            display: flex
-            align-items: flex-end
+
             h1 
                 color: white
         #banner-publications

diff --git a/app/sass/lib/_structure.sass b/app/sass/lib/_structure.sass
@@ -5,6 +5,17 @@
 .xl_margin
     @apply m-8 sm:my-12 sm:mx-16 md:my-16 md:mx-24 lg:my-20 lg:mx-44 xl:mx-60 2xl:mx-80
 
+// MÁRGENES PARA CONTENEDORES CON IMÁGENES DE FONDO
+//margen estandar pero solo en eje x (para elementos que encuentran en otros contenedores)
+.standard_margin-x
+    @apply mx-4 sm:mx-8 md:mx-14 lg:mx-36 xl:mx-44 2xl:mx-60
+//margen estandar pero solo en eje y (para elementos contenedores con otros elementos con margen dentro)
+.standard_margin-y
+    @apply my-4 sm:my-4 md:my-8 lg:my-12 
+//MÁRGEN PARA BOTÓN
+.margin_top_button
+    @apply mt-4 sm:mt-6 md:mt-8 2xl:mt-10
+
 //PADDINGS
 .padding_card_highlight
-    @apply pt-8 pb-12 px-6 sm:p-8 md:pb-12 lg:pb-16 lg:pt-12
+    @apply pt-4 pb-4 px-6 sm:p-4 md:pb-6 lg:pb-8 lg:pt-8