From f7c767990d2cc442a618b327332c6ddea78ab065 Mon Sep 17 00:00:00 2001
From: sleepndraw <thepikahouse@gmail.com>
Date: Fri, 31 May 2024 20:33:03 +0200
Subject: [PATCH] maquetacion contacto

---
 app/about/page.js               |  33 +++----
 app/projects/page.js            |   2 +-
 app/sass/main.scss              | 167 ++++++++++++++++----------------
 app/sass/partials/_contact.sass |  52 +++++++---
 4 files changed, 140 insertions(+), 114 deletions(-)

diff --git a/app/about/page.js b/app/about/page.js
index a37e7f4..c8d6fa9 100644
--- a/app/about/page.js
+++ b/app/about/page.js
@@ -14,8 +14,8 @@ 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">
-        <section className="about_description">
+      <main className=" sm:mx-2 md:mx-14  lg:mx-36 xl:mx-44 2xl:mx-60 xl:my-28">
+        {/* <section className="about_description">
           <p>
             We have gathered a long teaching experience at the University. Our
             main research interests are focused on the last technologies in
@@ -24,25 +24,30 @@ export default function About(props) {
             Our latest participation in research projects include ongoing
             EU-founded projects such as Global Excursions and FI-WARE
           </p>
-        </section>
+        </section> */}
         <section className="contact_info">
           <div className="contact col1">
-            <h2>¿Alguna duda? Escríbenos.</h2>
+          <h4>¿Alguna duda? Escríbenos.</h4>
+            <div className="contact_content my-8 ">
+            
             <ul>
               <li>
-                <h3>E-mail</h3>
+                <h5>E-mail</h5>
                 <p>enrique.barra@upm.es</p>
               </li>
               <li>
-                <h3>{t("contact.listTitle2")}</h3>
+                <h5>{t("contact.listTitle2")}</h5>
                 <p>91 336 73 31</p>
               </li>
             </ul>
+            </div>
           </div>
           <div className="location col2">
             <div className="location_title">
-              <FontAwesomeIcon className="location_icon" icon={faLocationDot} />{" "}
-              <h2>{t("contact.title2")}</h2>
+              <h4>              <FontAwesomeIcon className="location_icon" icon={faLocationDot} />{" "}
+{t("contact.title2")}</h4>
+            </div>
+            <div className="location_info my-8">
               <div className="location_map map-responsive">
                 <iframe
                   title="maps"
@@ -54,17 +59,9 @@ export default function About(props) {
                   allowfullscreen
                 ></iframe>
               </div>
-              <div className="location_info">
-                <h2>E.T.S. DE INGENIEROS DE TELECOMUNICACIÓN</h2>
-                <h3>Av. Complutense, 30, 28040 Madrid Edificio B</h3>
-              </div>
+             <div className="map_info my-8"> <p>E.T.S. DE INGENIEROS DE TELECOMUNICACIÓN</p>
+              <p>Av. Complutense, 30, 28040 Madrid Edificio B</p></div>
             </div>
-           
-             
-         
-            
-             
-            
           </div>
         </section>
       </main>
diff --git a/app/projects/page.js b/app/projects/page.js
index f61e080..f0154be 100644
--- a/app/projects/page.js
+++ b/app/projects/page.js
@@ -11,7 +11,7 @@ import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 import { useTranslation } from 'react-i18next';
 
 export default function Projects() {
-  const [projects, setProjects] = useState(myprojectCards);
+  // const [projects, setProjects] = useState(myprojectCards);
   const { t } = useTranslation();
   useEffect(() => {
     window.scrollTo(0, 0);
diff --git a/app/sass/main.scss b/app/sass/main.scss
index a200fa5..ad724f8 100644
--- a/app/sass/main.scss
+++ b/app/sass/main.scss
@@ -16,6 +16,7 @@
 
 * {
   @apply border-2 border-primary; // no funciona :( <-- funciona en el globals.scss though
+  border: 1px solid pink
 }
 
 // PRUEBA GRID, BORRAR
@@ -1077,103 +1078,103 @@ main {
  ABOUT
  ========================================================================== */
 
-.about {
+// .about {
   
-  main {
-    // max-width: 1000px;
-    // margin: auto;
-    // margin-top: 100px;
-
-    .about_description {
-      border-bottom: solid 1.5px lighten($color: $black, $amount: 60);
-      padding: 9rem 3rem 6rem 7rem;
-    }
-
-    .location {
-      // padding: 4rem 3rem 6rem 7rem;
-      //background-color: lighten($color: $yellow, $amount: 25);
-      display: flex;
-      flex-flow: row no-wrap;
-      justify-content: space-evenly;
-      padding-bottom: 2rem;
+//   main {
+//     // max-width: 1000px;
+//     // margin: auto;
+//     // margin-top: 100px;
 
-      .col1 {
-        flex: 1;
-        padding: 1rem 4rem;
+//     .about_description {
+//       border-bottom: solid 1.5px lighten($color: $black, $amount: 60);
+//       padding: 9rem 3rem 6rem 7rem;
+//     }
 
-        .location_map {
-          height: 500px;
-          width: 700px;
-          background-color: $ca-or-100;
-        }
+//     .location {
+//       // padding: 4rem 3rem 6rem 7rem;
+//       //background-color: lighten($color: $yellow, $amount: 25);
+//       display: flex;
+//       flex-flow: row no-wrap;
+//       justify-content: space-evenly;
+//       padding-bottom: 2rem;
+
+//       .col1 {
+//         flex: 1;
+//         padding: 1rem 4rem;
+
+//         .location_map {
+//           height: 500px;
+//           width: 700px;
+//           background-color: $ca-or-100;
+//         }
 
-        .map-responsive {
-          overflow: hidden;
-          padding: 36.25%;
-          position: relative;
-          height: 100%;
-          width: 100%;
-        }
+//         .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;
-        }
-      }
+//         .map-responsive iframe {
+//           left: 0;
+//           top: 0;
+//           height: 100%;
+//           width: 100%;
+//           position: absolute;
+//         }
+//       }
 
-      .col2 {
-        flex: 1;
+//       .col2 {
+//         flex: 1;
 
-        .location_info {
-          h2 {
-            padding: 1rem 0 0.5rem 0;
-          }
-        }
+//         .location_info {
+//           h2 {
+//             padding: 1rem 0 0.5rem 0;
+//           }
+//         }
 
-        .contact {
-          h2 {
-            padding: 1rem 0 0.5rem 0;
-          }
-        }
-      }
-    }
+//         .contact {
+//           h2 {
+//             padding: 1rem 0 0.5rem 0;
+//           }
+//         }
+//       }
+//     }
 
-    section {
-      &:last-child {
-        border-bottom: solid 1.5px lighten($color: $black, $amount: 60);
-      }
-    }
-  }
+//     section {
+//       &:last-child {
+//         border-bottom: solid 1.5px lighten($color: $black, $amount: 60);
+//       }
+//     }
+//   }
 
-  h1 {
-    // font-size: 4rem;
-    // font-weight: $regular;
-  }
+//   h1 {
+//     // font-size: 4rem;
+//     // font-weight: $regular;
+//   }
 
-  h2 {
-    color: $black;
-    font-size: 2rem;
-    width: 100%;
-    padding: 1rem 0 0.5rem 2rem;
-  }
+//   h2 {
+//     color: $black;
+//     font-size: 2rem;
+//     width: 100%;
+//     padding: 1rem 0 0.5rem 2rem;
+//   }
 
-  h3 {
-    color: $black;
-    font-size: 2rem;
-  }
+//   h3 {
+//     color: $black;
+//     font-size: 2rem;
+//   }
 
-  p {
-    font-size: 1.5rem;
-  }
+//   p {
+//     font-size: 1.5rem;
+//   }
 
-  .border_nav_bar {
-    border-bottom: solid 1.5px lighten($color: $black, $amount: 60);
-    transition: none;
-  }
-}
+//   .border_nav_bar {
+//     border-bottom: solid 1.5px lighten($color: $black, $amount: 60);
+//     transition: none;
+//   }
+// }
 
 /* =========================================================================
 LINKS
diff --git a/app/sass/partials/_contact.sass b/app/sass/partials/_contact.sass
index 328c5dc..c1c895b 100644
--- a/app/sass/partials/_contact.sass
+++ b/app/sass/partials/_contact.sass
@@ -4,20 +4,48 @@
 
 .about
     .banner
-        main
-            .about_description
-            .contact_info
+    main
+        .about_description
+        .contact_info
+            display: flex
+            flex-wrap: wrap
+            justify-content: space-between
+
+            .contact
                 display: flex
-                flex-direction: row
-                flex-wrap: wrap
-                .contact
-                    width: 50%
+                flex-direction: column
+                h2
+                    text-align: left
+                    font
                     ul
                         display: flex
+                        flex-direction: column
+
                         li
-                .location
-                    
-                    width: 50%
+                            margin-bottom: 10px // Add some spacing between list items if needed
+
+            .location
+                display: flex
+                flex-direction: column
+
+                .location_title
                     display: flex
-                    .location_title
-                        .location_icon #faLocationDot
+                    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