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

app/page.js

@@ -28,7 +28,7 @@ export default function Home() {
     <div className="App">
       <div className={"home_page page_" + currentLang}>
         <Header route={"/"} />
-        <div className="parallax__layer--base">
+        <div className="parallax_layer parallax__layer--base">
           <main>
             <section className="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">
@@ -56,27 +56,27 @@ export default function Home() {
                     <p>{t("front.projectDescription")} </p>
                   </div>
                 </section>
-
-                <section className="latest_publications">
+                <section className="section_home_2 standard_margin">
+                  <div className="standard_margin flex flex-col gap-4 md:gap-12">
+                    <h2 className="text-left md:text-center">
+                      {t("front.sectionHomeTitle")}
+                    </h2>
+                    <div className="flex flex-col-reverse md:flex-row gap-4 md:gap-12">
+                      <p className="basis-2/3">{t("front.sectionHomeBody")}</p>
+                      <h4 className="basis-1/3 font-semibold">
+                        {t("front.sectionHomeSubtitle")}
+                      </h4>
+                    </div>
+                  </div>
+                </section>
+                <section className="latest_publications standard_margin">
                   <h3>{t("front.latestPublicationsTitle")}</h3>
                   <div className="recent_pubs_container">
                     <RecentPublications />
                   </div>
                 </section>
-                <section className="lines_of_act">
-                  <h3>{t("front.linesOfActTitle")}</h3>
-                  <p>{t("front.linesOfActBody")}</p>
-
-                  <BulletElement></BulletElement>
-                </section>
-                <section className="our_goals">
-                  <div>
-                    <h3 className="title_text">{t("front.goalsTitle")}</h3>
-                    <p>{t("front.goalsBody")}</p>
-                  </div>
-
-                  <GridElement />
-                </section>
+
+
               </div>
             </section>
           </main>

app/project/page.js

@@ -8,7 +8,7 @@ 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 { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 
 export default function Projects() {
   // const [projects, setProjects] = useState(myprojectCards);
@@ -19,13 +19,26 @@ export default function Projects() {
   }, []);
 
   return (
-    <div className={"projects page_"+ currentLang}>
-      <Header route={"/projects"} />
+    <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">
+          <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">
+              {t("project.Intro.sectionHighlight")}
+            </h4>
+          </div>
+        </div>
+      </section>
+      <section>
+        <h2 className="text-left">{t("project.Goals.sectionTitle")}</h2>
+      </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>
+        <h1> {t("projects.title")}</h1>
       </div>
       <main>
-
         <section className="lg:mx-36 md:mx-14 sm:mx-8 my-4 sm:my-4 md:my-8 lg:my-12 xl:my-16 2xl:my-20 mx-4 xl:mx-44 2xl:mx-60">
           <ProjectCard />
         </section>

app/research/page.js

@@ -8,6 +8,7 @@ import Link from "next/link";
 import { mypublications } from "@/constants/publications";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+import { faArrowUpRightFromSquare } from "@fortawesome/free-solid-svg-icons";
 import { useTranslation } from "react-i18next";
 
 export default function Research() {
@@ -133,7 +134,7 @@ export default function Research() {
                                 href={doi}
                               >
                                 <span>{t("publications.button")}</span>
-                                <FontAwesomeIcon icon={faArrowRight} />
+                                <FontAwesomeIcon icon={faArrowUpRightFromSquare} />
                               </Link>
                             </button>
                           ) : null}

app/sass/lib/_mixins.sass

@@ -292,7 +292,7 @@
         .banner
             padding-top: 46px
             height: 7.4em
-            background-image: url("/assets/img/headers/projects-banner-phone.svg")
+            //background-image: url("/assets/img/headers/projects-banner-phone.svg")
             background-size: cover
             background-position: center
             background-repeat: no-repeat
@@ -302,17 +302,17 @@
             h1 
                 color: white
         #banner-publications
-            background-image: url("/assets/img/headers/publications-banner-phone.svg")
+            //background-image: url("/assets/img/headers/publications-banner-phone.svg")
         .parallax__layer
             padding-top: 44px
     @media (min-width:$min-tablet-width-en)     
         .banner
             padding-top: 112px
             height: 14vw
             width: 100%
-            background-image: url("/assets/img/headers/projects-banner-desktop.svg")
+            //background-image: url("/assets/img/headers/projects-banner-desktop.svg")
         #banner-publications
-            background-image: url("/assets/img/headers/publications-banner-desktop.svg")
+            //background-image: url("/assets/img/headers/publications-banner-desktop.svg")
         .parallax__layer
             padding-top: 98px
 

app/sass/partials/_home.sass

@@ -10,13 +10,11 @@
             display: flex
             justify-content: space-between
             height: 50vh
+            margin-top: 6rem
         h3
             @apply text-ca_blue-700
             margin-bottom: 2rem
 
-        p
-            margin-bottom: 2rem
-            width:80%
     .project_description
         background-image: url("/assets/img/section_description_home.png")
         background-size: cover
@@ -33,6 +31,9 @@
         h5
             text-align: center
             max-width: 70vw
+        p
+            margin-bottom: 2rem
+            width:100%
 
     .group_description 
         z-index:100
@@ -122,6 +123,10 @@
             display: flex
             justify-content: space-between
             height: 60vh
+            margin-top: 8rem
+    .project_description
+        p
+            width:80%
     .group_description 
         width: 100vw
         .logo_home
@@ -148,7 +153,10 @@
             display: flex
             justify-content: space-between
             height: 100vh
-
+    .project_description
+        p
+            width:80%
+
     .group_description 
         .logo_home
             height: 4rem

components/Footer.js

@@ -21,7 +21,7 @@ export default function Footer(props) {
     { route: "/research", key: "nav.item" },
     { route: "/courses", key: "nav.item2" },
     { route: "/tools", key: "nav.item3" },
-    { route: "/projects", key: "nav.item4" },
+    { route: "/project", key: "nav.item4" },
     { route: "/team", key: "nav.item5" },
     { route: "/about", key: "nav.item6" },
   ];

components/Header.js

@@ -75,6 +75,7 @@ export default function Header(props) {
       >
         <ul>
           {routes.map((route, index) => (
+
             <li
               key={index}
               className={route.route === props.route ? "li-selected" : ""}

constants/langs/en.js

@@ -17,26 +17,28 @@ export const en = {
         "projectDescription": "FuN4DaTe aims at designing a cost-effective energy-efficient network architecture that approaches the envisioned by the ITU FG-NET2030 network and the Hyperscale cloud providers to upgrade telco networks by boosting bandwidth, latency, security, manynets while incorporating AI/ML into the network operations, on attempts to deal with forthcoming challenging services like holographic-type communications, tactile Internet for remote operations, intelligent operations networks, network and computing convergence, digital twins, space-terrestrial integrated network and industrial IoT with cloudification.",
         "latestPublicationsTitle": "Latest publications",
         "latestPublicationsButton": "See all publications",
-        "linesOfActTitle": "Lines of action",
-        "linesOfActBody": "Cyberaula group initiatives approach towards the educational environment and its relationship with the use of new technologies, aiming to develop new ways of learning and the creation and delivery of new MOOCs, amongst other services of collaborative resources for teaching.",
-        "bulletElements": {
-            "bulletA": "Active learning methodologies",
-            "bulletD": "Addition of technologies in on-site training",
-            "bulletF": "Educational development in research, development and innovation projects",
+        "sectionHomeTitle": "A collaborative project between UC3M and UPM",
+        "sectionHomeBody": "The collaboration between the groups will help in aligning the strategies to meet the objectives, instead of producing divergent solutions. Finally, the PI1 for the UPM subproject was part of UC3M team until a few months ago, with multipleshared projects and papers published with both PIs from UC3M, many of them related to the topics of this project. This will greatly facilitate the alignment of both subprojects and effective coordination.",
+        "sectionHomeSubtitle": "“The collaboration between the groups will help in aligning the strategies to meet the objectives, instead of producing divergent solutions”.",
+         },
+    "project": {
+        "Intro": {
+            "sectionTitle": "Introduction",
+            "sectionBody": "(Estado del arte) According to Cisco’s Visual Networking Index (VNI), data traffic has been continuously growing since the introduction of the Internet. While in the past the average overall growth seen in the operators’ networks has been around 35%, this trend seems to keep increasing towards a 45% growth rate [Cisco2018]. Video streaming is still the dominating type of traffic nowadays, but other applications and services have appeared in the past years to stress networks even more, for example Machine-2-Machine (M2M) applications and Online Gaming, with 46% CAGR and 59% CAGR respectively. In parallel, mobile traffic (5G and Beyond-5G) is expected to play a key role in the use of telco infrastructure. Indeed, global mobile traffic is expected to grow twice as fast as IP traffic.",
+            "sectionHighlight": "“Frase destacada del texto de la introducción un poco más larga y tal”",
         },
-        "gridElements":{
-            "topL":"Introduction of ICTs in on-site, hybrid or online education.",
-            "topM":"Use of gamification for teaching purposes",
-            "topMsub":"Use of serious games in education",
-            "topR":"Performing of advanced tele-education experiments",
-            "bottomL":"Creation of advanced platforms for the introduction of ICTs in education",
-            "bottomM":"Research on educational standards",
-            "bottomMsub":"SCROM | LOM",
-            "bottomR":"Creation of learning objects through authoring tools ",
-
-        },
-        "goalsTitle": "Our goals",
-        "goalsBody": "The CyberAula group focuses its activities in the application of ICTs(information and communication technology) in education, encouraging e-learning."
+        "Goals": {
+            "sectionTitle": "Goals",
+            "Goal1": {
+                "GoalTitle": "A nivel de red",
+                "GoalBody": "Innovaciones en conectividad, seguridad y operaciones autónomas.",
+            },
+            "Goal2": {
+                "GoalTitle": "A nivel de sistemas",
+                "GoalBody": "Innovaciones en nodos de red programables, offloading de funcionalidades y procesamiento distribuido.",
+            }
+
+        }
     },
     "publications": {
         "title": "Publications",

constants/langs/es.js

@@ -17,26 +17,26 @@ export const es = {
         "projectDescription": "FuN4DaTe aims at designing a cost-effective energy-efficient network architecture that approaches the envisioned by the ITU FG-NET2030 network and the Hyperscale cloud providers to upgrade telco networks by boosting bandwidth, latency, security, manynets while incorporating AI/ML into the network operations, on attempts to deal with forthcoming challenging services like holographic-type communications, tactile Internet for remote operations, intelligent operations networks, network and computing convergence, digital twins, space-terrestrial integrated network and industrial IoT with cloudification.",
         "latestPublicationsTitle": "Últimas publicaciones",
         "latestPublicationsButton": "Ver todas las publicaciones",
-        "linesOfActTitle": "Líneas de actuación",
-        "linesOfActBody": "Las iniciativas del grupo cyberaula comprenden al entorno educativo en su relación con el uso de las nuevas tecnologías, con el objetivo de desarrollar nuevas formas de apredizaje. la creación e impartición de MOOCs, y otros servicios de creación colaborativa de recursos para la enseñanza.",
-        "bulletElements": {
-            "bulletA": "Metodologías activas de aprendizaje",
-            "bulletD": "Incorporación de tecnologías a la formación presencial",
-            "bulletF": "Desarrollo de la dimensión docente en los Proyectos de I+D+i",
-        },
-        "gridElements":{
-            "topL":"Introducción de las TIC en la educación presencial, online o híbrida",
-            "topM":"Gamificación con fines docentes",
-            "topMsub":"Uso de juegos serios en la educación",
-            "topR":"Realización de experimentos avanzados de teleeducación",
-            "bottomL":"Creación de plataformas avanzadas para introducción de las TIC en la enseñanza. ",
-            "bottomM":"Investigación sobre estándares en educación",
-            "bottomMsub":"SCROM | LOM",
-            "bottomR":"Creación de objetos de aprendizaje mediante herramientas de autor ",
-
+
+    },
+    "project": {
+        "Intro": {
+            "sectionTitle": "Introduction",
+            "sectionBody": "(Estado del arte) According to Cisco’s Visual Networking Index (VNI), data traffic has been continuously growing since the introduction of the Internet. While in the past the average overall growth seen in the operators’ networks has been around 35%, this trend seems to keep increasing towards a 45% growth rate [Cisco2018]. Video streaming is still the dominating type of traffic nowadays, but other applications and services have appeared in the past years to stress networks even more, for example Machine-2-Machine (M2M) applications and Online Gaming, with 46% CAGR and 59% CAGR respectively. In parallel, mobile traffic (5G and Beyond-5G) is expected to play a key role in the use of telco infrastructure. Indeed, global mobile traffic is expected to grow twice as fast as IP traffic.",
+            "sectionHighlight": "“Frase destacada del texto de la introducción un poco más larga y tal”",
         },
-        "goalsTitle": "Objetivos",
-        "goalsBody": "El grupo CyberAula centra su actividad en la aplicación de las TIC (Tecnologías de la Información y de las comunicaciones) en la educación, fomentando el aprendizaje potenciado por la tecnología."
+        "Goals": {
+            "sectionTitle": "Goals",
+            "Goal1": {
+                "GoalTitle": "A nivel de red",
+                "GoalBody": "Innovaciones en conectividad, seguridad y operaciones autónomas.",
+            },
+            "Goal2": {
+                "GoalTitle": "A nivel de sistemas",
+                "GoalBody": "Innovaciones en nodos de red programables, offloading de funcionalidades y procesamiento distribuido.",
+            }
+
+        }
     },
     "publications": {
         "title": "Publicaciones",