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

ging · Jun 24, 2024 · f1bae67 · f1bae67
2 parents cc64b33 + ee3f25f
commit f1bae67
Show file tree

Hide file tree

Showing 20 changed files with 624 additions and 324 deletions.
diff --git a/app/page.js b/app/page.js
@@ -34,7 +34,7 @@ export default function Home() {
               <div className="head block sm:flex sm:flew-row items-center py-8 sm:py-12 md:py-20 lg:py-24 2xl:py-32">
                 <div className="group_description flex flex-col gap-4 sm:justify-center md:gap-8 sm:items-center mx-8 sm:mx-8 md:ml-12 lg:ml-16 xl:ml-20 2xl:ml-24 sm:w-2/5">
                   <img
-                    className="logo_home mt-4 sm:mt-0 self-start"
+                    className="logo_home mt-4 sm:mt-0 self-start w-full"
                     src="assets/img/iso_logo.svg"
                   />
                   <h2 className="text-white self-start">{t("front.title")}</h2>
@@ -56,8 +56,8 @@ export default function Home() {
                     <p>{t("front.projectDescription")} </p>
                   </div>
                 </section>
-                <section className="section_home_2 standard_margin">
-                  <div className="standard_margin flex flex-col gap-4 md:gap-12">
+                <section className="standard_margin">
+                  <div className="flex flex-col gap-4 md:gap-12">
                     <h2 className="text-left md:text-center">
                       {t("front.sectionHomeTitle")}
                     </h2>

diff --git a/app/project/page.js b/app/project/page.js
@@ -7,7 +7,8 @@ import Link from "next/link";
 import ProjectCard from "@/components/projectCard";
 import { myprojectCards } from "@/constants/projectsCards.js";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import { faCircleNodes } from "@fortawesome/free-solid-svg-icons";
+import { faGrip } from "@fortawesome/free-solid-svg-icons";
 import { useTranslation } from "react-i18next";
 
 export default function Projects() {
@@ -21,19 +22,43 @@ export default function Projects() {
   return (
     <div className={"projects page_" + currentLang}>
       <Header route={"/project"} />
-      <section className="parallax__layer section_home_2 standard_margin">
-        <div className="flex flex-col gap-4 md:gap-12">
+      <section className="parallax__layer standard_margin">
+        <div className="flex flex-col sm:gap-4 md:gap-4">
           <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-8 md:mt-0">
+            <h4 className="basis-1/4 font-semibold mt-4 md:mt-0 text-white">
               {t("project.Intro.sectionHighlight")}
             </h4>
           </div>
         </div>
       </section>
-      <section>
-        <h2 className="text-left">{t("project.Goals.sectionTitle")}</h2>
+      <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">
+          <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>
+              <p className=""> {t("project.Goals.Goal1.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="standard_margin">
+      <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>
+        </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">
         <h1> {t("projects.title")}</h1>

diff --git a/app/sass/components/_icons.sass b/app/sass/components/_icons.sass
@@ -0,0 +1,25 @@
+@mixin icon_circle
+
+    @apply bg-backgroundSecondary
+    border-radius: 50px
+    @apply text-slate-400
+
+    @media (min-width: $min-phone-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
+    @media (min-width: $min-desktop-width)
+        height: 2.4rem
+        width: 2.4rem
+        padding: 1.3rem
+    @media (min-width: $min-xl-desktop-width)
+        height: 2.8rem
+        width: 2.8rem
+        padding: 1.3rem
+
+.icon_circle
+    @include icon_circle
diff --git a/app/sass/lib/_mixins.sass b/app/sass/lib/_mixins.sass
@@ -8,11 +8,15 @@
     -moz-box-shadow: 0px 10px 13px -7px rgba(0,0,0,0.18)
     box-shadow: 0px 10px 13px -7px rgba(0,0,0,0.18)
 
-//CAMBIAR ESTE AZUL POR LA VARIABLE DE AZUL / TRANSPARENTE
 @mixin drop-shadow-blue 
     -webkit-box-shadow: 0px 8px 12px -11px rgba(91, 115, 255, 0.525)
-    // -moz-box-shadow: 0px 4px 4px -2px rgba(91, 115, 255, 0.525)
-    // box-shadow: 0px 4px 4px -2px rgba(91, 115, 255, 0.525)
+    -moz-box-shadow: 0px 8px 12px -11px rgba(91, 115, 255, 0.525)
+    box-shadow: 0px 8px 12px -11px rgba(91, 115, 255, 0.525)
+
+@mixin drop-shadow-blue-spread 
+    -webkit-box-shadow: 0px 4px 12px -6px rgba(91, 115, 255, 0.525)
+    -moz-box-shadow: 0px 4px 12px -6px rgba(91, 115, 255, 0.525)
+    box-shadow: 0px 4px 12px -6px rgba(91, 115, 255, 0.525)
 
 @mixin drop-shadow-intermediate 
     box-shadow: 0px 4px 4px 0px rgba(29, 29, 27, 0.15)
@@ -67,7 +71,7 @@
             //margin: 0 0 0 1.4rem   
         .logotype 
             .logoheader
-                width: 9rem
+                width: 7rem
     .menu_icon 
         padding: 0
         display: flex
@@ -131,7 +135,7 @@
         .logotype 
             display: flex
             width: auto
-            font-size: 2.7rem
+
             font-weight: $bold
             font-family: $montserrat-alternates
             color: $blue_primary
@@ -157,15 +161,14 @@
             display: flex
             flex-flow: row nowrap
             justify-content: space-between
-            font-size: 1.2rem
+            //font-size: 1.2rem
             gap: 2rem
 
 @mixin nav_bar_one_line
     .imagotype
         .logoheader
-            width: 9rem
-        .logotype
-            font-size: 1.7rem
+            width: 7rem
+
     .menu 
         width: auto
         font-weight: $semi-bold
@@ -176,15 +179,14 @@
         display: flex
         flex-flow: wrap row
         justify-content: space-between
-        font-size: 1.2rem
+
 
 @mixin nav_bar_one_line_xl
     padding: 1.5rem 2.5rem 1.5rem 2.5rem
     .imagotype
         .logotype 
-            font-size: 2.4rem
             .logoheader
-                width:11rem
+                width:9.4rem
         .isotype
 
 @mixin li_nav_bar
@@ -195,10 +197,10 @@
                 text-decoration: none
         &.li-selected 
             a 
-                color: $link_header
-                border-bottom: $border1 $link_header
+                color: $link_header   
+                border-bottom: $border1 $link_header   
                 &:hover 
-                    border-bottom: $border1 $link_header
+                    border-bottom: $border1 $link_header   
 
 
 //ES
@@ -260,7 +262,7 @@
         #banner-publications
             // background-image: url("/assets/img/headers/publications-banner-phone.svg")
         .parallax__layer
-            padding-top: 74px
+            padding-top: 60px
     @media (min-width:$min-tablet-width-es)     
         .banner
             padding-top: 112px
@@ -304,7 +306,7 @@
         #banner-publications
             //background-image: url("/assets/img/headers/publications-banner-phone.svg")
         .parallax__layer
-            padding-top: 44px
+            padding-top: 54px
     @media (min-width:$min-tablet-width-en)     
         .banner
             padding-top: 112px

diff --git a/app/sass/lib/_structure.sass b/app/sass/lib/_structure.sass
@@ -1,4 +1,10 @@
+//MARGINS
+    
 .standard_margin
-    @apply my-4 mx-4 sm:my-4 sm:mx-8 md:my-8 md:mx-14 lg:my-12 lg:mx-36 xl:mx-44 2xl:mx-60
+    @apply m-4 sm:my-4 sm:mx-8 md:my-8 md:mx-14 lg:my-12 lg:mx-36 xl:mx-44 2xl:mx-60
 .xl_margin
-    @apply my-8 mx-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
+    @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
+
+//PADDINGS
+.padding_card_highlight
+    @apply pt-8 pb-12 px-6 sm:p-8 md:pb-12 lg:pb-16 lg:pt-12
diff --git a/app/sass/lib/_type.sass b/app/sass/lib/_type.sass
@@ -13,22 +13,20 @@
 // 5to atributo: alto de linea
 // 6to atributo: margen bajo
 
-$icon: 14px,14px, 16px,400
-$xs-text: 14px, 13px, 16px, 400, 140%, 1rem, 0.6rem //small
-$body-text: 14px, 16px, 18px, 300, 140%, 1rem, 0.6rem
-$button: 14px, 16px, 18px, 300 //buttons
-$sm-text: 16px, 18px, 20px, 400, 140%, 1rem, 0.6rem //h5
-$md-text: 18px, 20px, 22px, 400, 140%, 1rem //h4
-$lg-text: 22px, 26px, 30px, 400,140%, 1rem  //h3
-$xl-text: 23px, 30px, 36px, 300, 140%, 1rem //h2
-$xxl-text: 28px, 36px, 42px, 600, 140%, 1rem  //h1
+$icon: 14px,14px, 18px,400
+$xs-text: 14px, 13px, 18px, 400, 140%, 1rem, 0.6rem //small
+$body-text: 14px, 16px, 20px, 300, 140%, 1rem, 0.6rem
+$button: 14px, 16px, 20px, 300 //buttons
+$sm-text: 16px, 18px, 22px, 400, 140%, 1rem, 0.6rem //h5
+$md-text: 18px, 20px, 24px, 400, 140%, 1rem //h4
+$lg-text: 22px, 26px, 32px, 400,140%, 1rem //h3
+$xl-text: 23px, 30px, 38px, 300, 140%, 1rem //h2
+$xxl-text: 28px, 36px, 44px, 600, 140%, 1rem //h1
 
 $slim-weight: 500
-$regular:400
-$semibold:600
-$bold:800
-
-
+$regular: 400
+$semibold: 600
+$bold: 800
 
 h1
     @media screen and (min-width: 150px)
@@ -124,30 +122,28 @@ h5
         line-height: nth($sm-text,5)
         margin-bottom: nth($sm-text,6)
 
-
-
 // parrafos, etiquetas e inputs
 p, label, input, select
     @media screen and (min-width: 150px)
-        font-family:$main_font, sans-serif
+        font-family: $main_font, sans-serif
         font-size: nth($body-text,1)
         line-height: nth($body-text,5)
         font-weight: nth($body-text,4)
-        @apply text-gray-100
+        // @apply  text-ffdBlue-400
         //margin-bottom: nth($body-text,6)
     @media screen and (min-width: 640px)
         font-family: $main_font, sans-serif
         font-size: nth($body-text,2)
         line-height: nth($body-text,5)
         font-weight: nth($body-text,4)
-        @apply text-gray-100
+        // @apply  text-ffdBlue-400
         //margin-bottom: nth($body-text,6)
     @media screen and (min-width: 1400px)
         font-family: $main_font, sans-serif
         font-size: nth($body-text,3)
         line-height: nth($body-text,5)
         font-weight: nth($body-text,4)
-        @apply text-gray-100
+        // @apply  text-ffdBlue-400
         //margin-bottom: nth($body-text,6)
 
 // texto pequeño 
@@ -221,4 +217,4 @@ button, a
     @media screen and (min-width: 640px)
         font-size: nth($icon, 2)
     @media screen and (min-width: 1400px)
-        font-size: nth($icon,3)
+        font-size: nth($icon,3)
diff --git a/app/sass/lib/_variables.sass b/app/sass/lib/_variables.sass
@@ -5,6 +5,7 @@ $link_hover: #6c707e
 $link_header: #9ECBFF
 $blue_primary: #1C74D9
 $orange_accent: #98CE00
+$primary_green-400: #D7F38A
 $burgundry_support: #9f226d
 $cyan_support: #21e2ed
 $lilac_support: #ae9ff2
@@ -57,17 +58,25 @@ $gray-100: #F8F8F8
 
 
 //MEDIA QUERIES
+//GENERIC
+//ES
+$min-phone-width: 150px
+$max-phone-width: 640px
+$min-tablet-width: 641px
+$inter-tablet-width: 750px
+$min-desktop-width: 970px
+$min-xl-desktop-width: 1400px
 //ES
 $min-phone-width-es: 150px
-$max-phone-width-es: 600px
-$min-tablet-width-es: 601px
+$max-phone-width-es: 640px
+$min-tablet-width-es: 641px
 $inter-tablet-width-es: 750px
 $min-desktop-width-es: 970px
 $min-xl-desktop-width-es: 1400px
 //EN
 $min-phone-width-en: 150px
-$max-phone-width-en: 600px
-$min-tablet-width-en: 601px
+$max-phone-width-en: 640px
+$min-tablet-width-en: 641px
 $inter-tablet-width-en: 650px
 $min-desktop-width-en: 860px
 $min-xl-desktop-width-en: 1400px

diff --git a/app/sass/main.scss b/app/sass/main.scss
@@ -13,12 +13,14 @@
 @import "components/_buttons.sass";
 @import "components/_tags.sass";
 @import "components/_inputs.sass";
+@import "components/_icons.sass";
 
 // partials
 @import "partials/_courses.sass";
 @import "partials/_headermenu.sass";
 @import "partials/_contact.sass";
 @import "partials/_projects.sass";
+@import "partials/_project.sass";
 @import "partials/_publications.sass";
 @import "partials/_team.sass";
 @import "partials/_tools.sass";
@@ -113,10 +115,7 @@ li {
 
 body,
 html {
-  color: black;
-  @apply text-gray-100;
-  font-size: 12px;
-  font-family: $montserrat;
+  @apply text-ffdBlue-300;
   // margin: 0 auto;
   scroll-behavior: smooth;
 }

diff --git a/app/sass/partials/_banner.sass b/app/sass/partials/_banner.sass
@@ -1,2 +1,3 @@
-
+.banner
+    @apply 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/partials/_footer.sass b/app/sass/partials/_footer.sass
@@ -7,7 +7,7 @@
         flex-direction: column
         //display: grid
         //grid-template-columns: 1fr 1fr
-        @apply bg-secondary
+        @apply bg-backgroundSecondary
         @apply text-white
         .container_line_1 
             display: flex