Merge contacts y home

CyberAula · Jun 3, 2024 · 4d900a8 · 4d900a8
2 parents 928aa07 + 42e0df0
commit 4d900a8
Show file tree

Hide file tree

Showing 8 changed files with 114 additions and 51 deletions.
diff --git a/app/about/page.js b/app/about/page.js
@@ -5,6 +5,8 @@ import Footer from "@/components/Footer";
 import { useTranslation } from "react-i18next";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faLocationDot } from "@fortawesome/free-solid-svg-icons";
+import { faPhone } from "@fortawesome/free-solid-svg-icons";
+import { faAt } from "@fortawesome/free-solid-svg-icons";
 
 export default function About(props) {
   const { t } = useTranslation();
@@ -14,7 +16,7 @@ export default function About(props) {
       <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("contact.title")}</h1>
       </div>
-      <main className=" sm:mx-2 md:mx-14  lg:mx-36 xl:mx-44 2xl:mx-60 xl:my-28">
+      <main className=" xs:my-4 sm:mx-8 md:mx-14  lg:mx-36 xl:mx-44 2xl:mx-60 2xl:my-20 xl:my-16 lg:my-12 md:my-8 sm:my-4 xs:my-2">
         {/* <section className="about_description">
           <p>
             We have gathered a long teaching experience at the University. Our
@@ -25,29 +27,29 @@ export default function About(props) {
             EU-founded projects such as Global Excursions and FI-WARE
           </p>
         </section> */}
-        <section className="contact_info">
+        <section className="contact_info ">
           <div className="contact col1">
-          <h4>¿Alguna duda? Escríbenos.</h4>
-            <div className="contact_content my-8 ">
+          <div className="contact_title"><h4>{t("contact.title2")}</h4></div>
+            <div className="contact_content ">
 
             <ul>
               <li>
-                <h5>E-mail</h5>
+                <h5><FontAwesomeIcon className="icon" icon={faAt} />E-mail</h5>
                 <p>[email protected]</p>
               </li>
               <li>
-                <h5>{t("contact.listTitle2")}</h5>
+                <h5> <FontAwesomeIcon className="icon" icon={faPhone} />{t("contact.listTitle2")}</h5>
                 <p>91 336 73 31</p>
               </li>
             </ul>
             </div>
           </div>
           <div className="location col2">
             <div className="location_title">
-              <h4>              <FontAwesomeIcon className="location_icon" icon={faLocationDot} />{" "}
-{t("contact.title2")}</h4>
+              <h4>              <FontAwesomeIcon className="icon" icon={faLocationDot} />{" "}
+{t("contact.title3")}</h4>
             </div>
-            <div className="location_info my-8">
+            <div className="location_info ">
               <div className="location_map map-responsive">
                 <iframe
                   title="maps"
@@ -59,7 +61,7 @@ export default function About(props) {
                   allowfullscreen
                 ></iframe>
               </div>
-             <div className="map_info my-8"> <p>E.T.S. DE INGENIEROS DE TELECOMUNICACIÓN</p>
+             <div className="map_info 2xl:my-20 xl:my-16 lg:my-12 md:my-8 sm:my-4 xs:my-2"> <p>E.T.S. DE INGENIEROS DE TELECOMUNICACIÓN</p>
               <p>Av. Complutense, 30, 28040 Madrid Edificio B</p></div>
             </div>
           </div>

diff --git a/app/page.js b/app/page.js
@@ -44,6 +44,7 @@ export default function Home() {
 
               <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">
                 <section className="award_section">
+
                     <FontAwesomeIcon className="award_icon" icon={faAward} />
                   <div className="award_card">
                     <div className="award_card_text">

diff --git a/app/sass/partials/_contact.sass b/app/sass/partials/_contact.sass
@@ -1,51 +1,107 @@
-@import "../lib/_type.sass"
-@import "../lib/_variables.sass"
-@import "../lib/_responsive.sass"
-
 .about
-    .banner
+.banner
+
     main
+        padding-bottom: $spacing-lg
         .about_description
         .contact_info
             display: flex
             flex-wrap: wrap
-            justify-content: space-between
+            justify-content: space-around
+            .contact,
+            .location
+                flex-grow: 1
+                flex-basis: 0
 
-            .contact
+        .contact
+            display: flex
+            flex-direction: column
+            .contact_content
                 display: flex
-                flex-direction: column
-                h2
+
+                h5
+
                     text-align: left
-                    font
-                    ul
-                        display: flex
-                        flex-direction: column
+                    // padding-bottom: $spacing-sm
+                ul
+                    display: flex
+                    flex-direction: column
+                    flex-grow: 1
+                    // gap: $spacing-sm
+                    li
+                        gap: $spacing-md
+                        padding-bottom: $spacing-sm
+                        // margin-bottom: 10px 
 
-                        li
-                            margin-bottom: 10px // Add some spacing between list items if needed
+        .location
+            display: flex
+            flex-direction: column
 
-            .location
+            .location_title
+                display: flex
+                align-items: center
+
+            .location_icon
+                width: 2rem
+                height: auto
+                padding-right: $spacing-xsm
+
+            .location_info
+            .location_map
+                &.map-responsive
+                    position: relative
+                    padding-bottom: 85%
+                    height: 0
+                    overflow: hidden
+
+                iframe
+                    position: absolute
+                    top: 0
+                    left: 0
+                    width: 100%
+                    height: 100%
+    .icon
+            width: 2rem
+            height: auto
+            padding-right: $spacing-xsm
+    h5
+
+    h4, h5
+        display: flex
+        align-items: center
+
+@media (max-width: 640px)
+    .about 
+        main
+            padding-top: $spacing-lg
+            padding-left: $spacing-md
+            padding-right: $spacing-md
+            .about_description
+            .contact_info
                 display: flex
-                flex-direction: column
+                .contact
+                    display: flex
+                    flex-direction: column
+                    .contact_title
+
+
+            .contact_content
+                display: flex
+
+                h4
 
-                .location_title
+                    text-align: center
+                    padding-bottom: $spacing-md
+                ul
                     display: flex
-                    align-items: center
-
-                    .location_icon
-                        width: 20px
-                        height: auto
-                    .location_info
-                        .location_map
-                            .map-responsive
-                                overflow: hidden
-                                padding: 36.25%
-                                position: relative
-                                height: 100%
-                                width: 100%
-                            .map_responsive iframe
-                                left: 0
-                                top: 0
-                                height: 100%
-                                width: 100%
-                                position: absolute
+                    flex-direction: column
+                    flex-grow: 1
+                    // gap: $spacing-sm
+                    li
+                        gap: $spacing-sm
+                        // margin-bottom: 10px 
+
+            .location_title
+                display: flex
+                // justify-content: center
+                h4
diff --git a/app/sass/partials/_home.sass b/app/sass/partials/_home.sass
@@ -20,6 +20,7 @@
     .award_section 
       display: flex
       flex-direction: row
+      //background-color: $ca-
       .award_card 
         display: flex
         flex-direction: row

diff --git a/app/sass/partials/_projects.sass b/app/sass/partials/_projects.sass
@@ -21,6 +21,7 @@ $windowWidth: 100vw
             // border-top: 4px solid #EBF0FF
             // border-bottom: 4px solid  #EBF0FF
             border-radius: 24px
+
             &:active
                 @apply bg-ca_blue-300
                 @apply text-blue-950

diff --git a/app/sass/partials/_publications.sass b/app/sass/partials/_publications.sass
@@ -3,8 +3,7 @@
 // Correcciones: código duplicado para select e input. 
 // Recomendado hacer mixins
 
-@media (min-width: 150px) 
-
+@media (min-width: 150px)  
     .research 
         .filters
             justify-content: space-between

diff --git a/constants/langs/en.js b/constants/langs/en.js
@@ -84,7 +84,8 @@ export const en = {
     },
     "contact": {
         "title": "Contact",
-        "title2": "Where are we?",
+        "title2": "Any questions? Ask us. ",
+        "title3": "Where are we?",
         "listTitle2":"Phone",
         "body": "",
     },

diff --git a/constants/langs/es.js b/constants/langs/es.js
@@ -85,7 +85,9 @@ export const es = {
     },
     "contact": {
         "title": "Contacto",
-        "title2": "¿Dónde estamos?",
+        "title2": "¿Alguna duda? Pregúntanos.",
+        "title3": "¿Dónde estamos?",
+
         "listTitle":"E-mail",
         "listTitle2":"Teléfono",