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

ging · Jun 18, 2024 · 906e819 · 906e819
2 parents 23f6a63 + 80274b4
commit 906e819
Show file tree

Hide file tree

Showing 20 changed files with 1,542 additions and 1,602 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/page.js b/app/page.js
@@ -31,27 +31,26 @@ export default function Home() {
         <div className="parallax__layer parallax__layer--base">
           <main>
             <section className="home">
-              <div className="head block sm:flex sm:flew-row">
-                <div className="group_description block sm:block  sm:justify-between md:gap-8 sm:items-center ">
+              <div className="head block sm:flex sm:flew-row items-center mt-4 sm:mt-6 md:mt-8 lg-mt-10 2xl:mt-14">
+                <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"
+                    className="logo_home mt-4 sm:mt-0 self-start"
                     src="/assets/img/iso_logo.svg"
                   />
-                  <h2 className="text-white mx-4 sm:mx-8 md:ml-12 lg:ml-16 xl:ml-20 2xl:ml-24">
-                    <b>{t("front.title")}, </b>
-                    {t("front.title2")}
+                  <h2 className="text-white self-start">
+                    {t("front.title")}
+
                   </h2>
-                  <button className="action_button">
+                  <button className="action_button self-start">
                     <Link rel="noopener noreferrer" target="_blank" href="#">
                       <span>{t("front.action-button")}</span>
                       <FontAwesomeIcon icon={faArrowRight} />
                     </Link>
                   </button>
                 </div>
-                <img
-                  className="mt-4 sm:mt-0 w-1/2"
-                  src="/assets/img/banner_prov.svg"
-                />
+                  <div
+                    className="banner_f4d_img sm:mt-0 sm:w-3/5"
+                  />
               </div>
 
               <div className="body lg:mx-36 md:mx-14 sm:mx-8 mx-4 lg:my-12 md:my-8 sm:my-4 my-4 xl:mx-44 2xl:mx-60">

diff --git a/app/sass/components/_buttons.sass b/app/sass/components/_buttons.sass
@@ -8,12 +8,12 @@
     border: none
     background: none
 
-@mixin icon-button-left
+@mixin icon-button-right
     svg 
         align-self: center
         margin-left: 0.6rem
 
-@mixin icon-button-right
+@mixin icon-button-left
     svg 
         align-self: center
         margin-right: 0.6rem
@@ -34,8 +34,8 @@
 @mixin border-button-white
     @include button
     border: 1px solid white
-    border-radius: 24px
-    padding: 0.3rem 1rem 0.4rem 0.8rem
+    border-radius: 4px
+    padding: 0.6rem 1rem 0.8rem 0.8rem
     color: white
     p 
         margin-bottom: 0
@@ -83,6 +83,11 @@
         transition: 200ms ease-in-out
         background-color: $ca-blue-300
 
+//CLASSES
+    
+
 .action_button 
     @include border-button-white
+    @include icon-button-right
+
 
diff --git a/app/sass/lib/_mixins.sass b/app/sass/lib/_mixins.sass
@@ -7,6 +7,13 @@
     -webkit-box-shadow: 0px 10px 13px -7px rgba(0,0,0,0.18)
     -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)
+
 @mixin drop-shadow-intermediate 
     box-shadow: 0px 4px 4px 0px rgba(29, 29, 27, 0.15)
 @mixin drop-shadow-lighter
@@ -39,7 +46,7 @@
 
 // BARRA DE NAVEGACIÓN DE TELEFONO
 @mixin nav_bar_phone
-    @include drop-shadow-intermediate
+    @include drop-shadow-blue
     width: 100vw
     display: flex
     flex-flow: wrap row
@@ -97,7 +104,7 @@
 // ajustar los breakpoints según lo
 // que ocupe la lista de items (ul)
 @mixin nav_bar_two_lines
-    @include drop-shadow-intermediate
+    @include drop-shadow-blue
     width: 100vw
     display: flex
     flex-flow: wrap row
@@ -181,12 +188,19 @@
         .isotype
 
 @mixin li_nav_bar
-  li 
-    &.li-selected 
-      a 
-        border-bottom: $border1 $ca-or-100
-        &:hover 
-          border-bottom: $border1 $ca-or-100
+    li 
+        a 
+            &:hover 
+                border-bottom: $border1 $link_header   
+                text-decoration: none
+        &.li-selected 
+            a 
+                color: $link_header
+                border-bottom: $border1 $link_header
+                &:hover 
+                    border-bottom: $border1 $link_header
+
+
 //ES
 @mixin nav_bar_es
     @media (max-width: $max-phone-width-es) 

diff --git a/app/sass/lib/_type.sass b/app/sass/lib/_type.sass
@@ -17,11 +17,11 @@ $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, 600, 140%, 1rem, 0.6rem //h5
-$md-text: 18px, 20px, 22px, 600, 140%, 1rem //h4
-$lg-text: 22px, 26px, 30px, 600,140%, 1rem  //h3
-$xl-text: 25px, 30px, 36px, bold, 140%, 1rem //h2
-$xxl-text: 28px, 36px, 42px, bold, 140%, 1rem  //h1
+$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, 300, 140%, 1rem  //h1
 
 $slim-weight: 500
 $regular:400
@@ -36,34 +36,39 @@ h1
         font-size: nth($xxl-text,1)
         line-height: nth($xxl-text,5)
         margin-bottom: nth($xxl-text,6)
+        font-weight: nth($xxl-text,4)
     @media screen and (min-width: 640px)
         font-family: $main_font, sans-serif
         font-size: nth($xxl-text,2)
         line-height: nth($xxl-text,5)
         margin-bottom: nth($xxl-text,6)
+        font-weight: nth($xxl-text,4)
     @media screen and (min-width: 1400px)
         font-family: $main_font, sans-serif
         font-size: nth($xxl-text,3)
         line-height: nth($xxl-text,5)
         margin-bottom: nth($xxl-text,6)
-
+        font-weight: nth($xxl-text,4)
 
 h2
     @media screen and (min-width: 150px)
         font-family: $main_font, sans-serif
         font-size: nth($xl-text,1)
         line-height: nth($xl-text,5)
         margin-bottom: nth($xl-text,6)
+        font-weight: nth($xl-text,4)
     @media screen and (min-width: 640px)
         font-family: $main_font, sans-serif
         font-size: nth($xl-text,2)
         line-height: nth($xl-text,5)
         margin-bottom: nth($xl-text,6)
+        font-weight: nth($xl-text,4)
     @media screen and (min-width: 1400px)
         font-family: $main_font, sans-serif
         font-size: nth($xl-text,3)
         line-height: nth($xl-text,5)
         margin-bottom: nth($xl-text,6)
+        font-weight: nth($xl-text,4)
 h3
     @media screen and (min-width: 150px)
         font-family: $main_font, sans-serif

diff --git a/app/sass/lib/_variables.sass b/app/sass/lib/_variables.sass
@@ -1,5 +1,8 @@
 //COLOR
 $background: #272932
+$background-secondary: #393D49
+$link_hover: #6c707e
+$link_header: #9ECBFF
 $blue_primary: #1C74D9
 $orange_accent: #98CE00
 $burgundry_support: #9f226d
@@ -93,8 +96,8 @@ $montserrat: "montserrat", sans-serif
 $montserrat-alternates: "Montserrat Alternates", sans-serif
 $helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif
 
-$border1: 5px solid
-$border2: 5px dashed
+$border1: 2px solid
+$border2: 2px solid
 
 $light: 300
 $regular: 400