Skip to content

Commit 187182e

Browse files
clara7227clara7227
committed
ajustes front: nuevas cifras, nuevos miembros, scroll en landing, click en contenedor lineas
1 parent 85880f9 commit 187182e

92 files changed

Lines changed: 438 additions & 282 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎app/globals.css‎

Lines changed: 88 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ html {
4242

4343
/*PADDINGS*/
4444
.standard_padding {
45-
@apply p-6 sm:py-6 sm:px-8 md:py-8 md:px-14 lg:py-12 lg:px-24 xl:px-44 2xl:px-72;
45+
@apply p-4 sm:py-6 sm:px-8 md:py-8 md:px-14 lg:py-12 lg:px-24 xl:px-44 2xl:px-72;
4646
}
4747
.standard_padding_xl {
4848
@apply p-6 sm:py-6 sm:px-8 md:py-8 md:px-14 lg:py-12 lg:px-24 xl:px-44 2xl:px-72;
@@ -483,4 +483,91 @@ main {
483483
transition-delay: 0.3s;
484484
}
485485
}
486+
}
487+
488+
/*FRONT PAGE STYLES */
489+
.statisticsContainer {
490+
@apply flex flex-col gap-4 sm:grid sm:grid-cols-2 md:grid-cols-3 lg:flex lg:flex-row lg:gap-24;
491+
}
492+
.statisticItemContainer {
493+
display: flex;
494+
flex-direction: column;
495+
align-items: center;
496+
}
497+
.numbersFront {
498+
font-size: 4.5rem;
499+
/* font-weight: bold; */
500+
height: 5.8rem;
501+
color:rgb(197, 208, 219)
502+
}
503+
.unitFront {
504+
text-transform: uppercase;
505+
font-size: 1.3rem;
506+
letter-spacing: 0.1rem;
507+
font-weight: 600;
508+
color:rgb(162, 167, 172)
509+
510+
}
511+
512+
513+
/*SCROLL*/
514+
:root {
515+
--size: 60px;
516+
--speed: 3s;
517+
--peakopacity: 0.7;
518+
}
519+
520+
.arrows {
521+
position: absolute;
522+
bottom: 8rem;
523+
top: 83%;
524+
left: 50%;
525+
width: var(--size);
526+
height: var(--size);
527+
transform: translate(-10%, -50%);
528+
z-index: 100;
529+
}
530+
531+
.arrows::before,
532+
.arrows::after {
533+
content: '';
534+
position: absolute;
535+
width: 100%;
536+
height: 100%;
537+
border-left: calc(var(--size) / 3) solid rgba(0, 0, 0, var(--peakopacity));
538+
border-bottom: calc(var(--size) / 3) solid rgba(0, 0, 0, var(--peakopacity));
539+
transform: rotate(-45deg);
540+
animation: arrows var(--speed) linear infinite;
541+
}
542+
543+
.arrows::before {
544+
transform: translate(calc(var(--size) / 3), calc(var(--size) * 4 / 3)) rotate(-45deg);
545+
}
546+
547+
.arrows::after {
548+
transform: translate(calc(var(--size) * 2 / 12), 0) rotate(-45deg);
549+
animation-delay: calc(var(--speed) / -2);
550+
}
551+
552+
553+
@keyframes arrows {
554+
0% {
555+
border-left: calc(var(--size) / 12) solid rgba(255, 255, 255, 0);
556+
border-bottom: calc(var(--size) / 12) solid rgba(255, 255, 255, 0);
557+
transform: translate(calc(var(--size) / -6), calc(var(--size) * 4 / -6)) rotate(-45deg);
558+
}
559+
10%, 90% {
560+
border-left: calc(var(--size) / 12) solid rgba(255, 255, 255, 0);
561+
border-bottom: calc(var(--size) / 12) solid rgba(255, 255, 255, 0);
562+
}
563+
50% {
564+
border-left: calc(var(--size) / 12) solid rgba(255, 255, 255, var(--peakopacity));
565+
border-bottom: calc(var(--size) / 12) solid rgba(255, 255, 255, var(--peakopacity));
566+
transform: translate(calc(var(--size) / -6), 0px) rotate(-45deg);
567+
}
568+
100% {
569+
border-left: calc(var(--size) / 12) solid rgba(255, 255, 255, 0);
570+
border-bottom: calc(var(--size) / 12) solid rgba(255, 255, 255, 0);
571+
transform: translate(calc(var(--size) / -6), calc(var(--size) * 4 / 6)) rotate(-45deg);
572+
}
486573
}

‎app/page.js‎

Lines changed: 31 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { useTranslation } from "react-i18next";
66

77
import { Button, ButtonVariants } from "@/components/ui/button";
88
import Heading from "@/components/ui/Heading";
9+
import Text from "@/components/ui/Text";
910
import { Divider, DividerVariants } from "@/components/ui/divider";
1011
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
1112
import ResearchLineCard from "@/components/cards/ResearchLineCard";
@@ -20,7 +21,6 @@ import {
2021
BannerImg,
2122
BannerLogo,
2223
} from "@/components/core/Banner";
23-
import PruebaRectangulos from "@/components/pruebas/pruebaRectangulos";
2424

2525
// UI
2626
export default function Page() {
@@ -35,11 +35,12 @@ export default function Page() {
3535

3636
return (
3737
<main>
38+
39+
<Link href="#section2" scroll={true} class="arrowScroll arrows" > </Link>
40+
3841
<Banner>
39-
{/* <PruebaRectangulos></PruebaRectangulos> */}
40-
4142
<BannerImg></BannerImg>
42-
43+
4344
<BannerContent className="absolute ">
4445
<BannerLogo></BannerLogo>
4546
<BannerTitle className={"text-white "}>
@@ -61,17 +62,38 @@ export default function Page() {
6162
{t("front.action-button")}{" "}
6263
<ArrowForwardIcon className="mt-0.5" sx={{ fontSize: 22 }} />
6364
</Link>
65+
6466
</BannerContent>
67+
6568
</Banner>
6669

67-
<section className="padding_group_description bg-background-200">
68-
<Divider size="lg" className="hidden md:flex"></Divider>
69-
<Divider size="sm"></Divider>
70+
<section className="padding_group_description bg-background-200" >
71+
<Divider size="xl" className="hidden md:flex" id="section2"></Divider>
7072

7173
<Heading level="h3">{t("front.section1Title")}</Heading>
7274
<Heading level="subtitle"> {t("front.section1Description")}</Heading>
7375

74-
<Divider size="md"></Divider>
76+
<Divider size="md" className="hidden md:flex" ></Divider>
77+
<Divider size="xs" className="flex md:hidden"></Divider>
78+
<div className="statisticsContainer">
79+
<div className="statisticItemContainer">
80+
<h1 className="numbersFront"> +400</h1>
81+
<p className="unitFront">{t("front.statistics.papers")}</p>
82+
</div>
83+
<div className="statisticItemContainer">
84+
<h1 className="numbersFront">+6K</h1>
85+
<p className="unitFront">{t("front.statistics.citations")}</p>
86+
</div>
87+
<div className="statisticItemContainer">
88+
<h1 className="numbersFront">+150</h1>
89+
<p className="unitFront">{t("front.statistics.projects")}</p>
90+
</div>
91+
<div className="statisticItemContainer">
92+
<h1 className="numbersFront">45</h1>
93+
<p className="unitFront">H-Index</p>
94+
</div>
95+
96+
</div>
7597
<Divider size="xxl" className="hidden md:flex"></Divider>
7698
<div id="researchlines"></div>
7799
</section>
@@ -124,7 +146,7 @@ export default function Page() {
124146
)}
125147
/>
126148
</section>
127-
149+
128150
<Divider size="md"></Divider>
129151
</section>
130152
</main>

‎components/core/Banner.jsx‎

Lines changed: 2 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -88,30 +88,16 @@ const BannerImg = React.forwardRef(({ className, ...props }, ref) => (
8888
// />
8989
// </div>
9090
<div className={
91-
//landing 1 /2
92-
// " absolute top-0 md:relative flex w-full md:w-7/12 z-0 h-20 md:h-[90vh] "
93-
// +
94-
//landing 3
91+
9592
"relative top-0 md:relative flex w-full z-0 h-[85vh]"}>
9693
<Image
9794
className="md:h-[85vh] opacity-80"
9895
src="assets/img/backgrounds/landing_4.svg"
9996
alt="background illustration"
10097
fit="cover"
10198
/>
102-
{/* <div className="hidden md:flex md:flex-col absolute h-[90vh] p-3 justify-start">
103-
<a className="flex text-24 opacity-45 font-semibold text-white items-center justify-center row-start-2 col-start-2">
104-
DATA </a>
105-
<a className="flex text-24 opacity-45 font-semibold text-white items-center justify-center row-start-1 col-start-5">
106-
VIDEOCONFERENCE </a>
107-
<a className="flex text-24 opacity-45 font-semibold text-white items-center justify-center row-start-4 col-start-3">
108-
ARTIFICIAL INTELLIGENCE </a>
109-
<a className="flex text-24 opacity-45 font-semibold text-white items-center justify-center row-start-3 col-start-6 col-span-2">
110-
E-LEARNING </a>
111-
<a className="flex text-24 opacity-45 font-semibold text-white items-center justify-center row-start-6 col-start-6">
112-
NETWORKS </a>
11399

114-
</div> */}
100+
115101
</div>
116102
));
117103
BannerImg.displayName = "BannerImg";

‎components/illustrations/ResearchlineIllust.js‎

Lines changed: 48 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -7,78 +7,82 @@ import { useTranslation } from "react-i18next";
77
import Image from "../ui/image";
88

99
const ResearchlineIllust = ({ researchLine }) => {
10-
const { t, i18n } = useTranslation();
10+
const { t, i18n } = useTranslation();
1111
const VideoConferenceIllust = (
12-
<div className={`video-conference-illust illust`}>
13-
<div className="video-conference-illust-container illust-container">
14-
<div
15-
className={`video-conference-item `}
16-
id="video-conference-item-1"
17-
></div>
18-
<div
19-
className="video-conference-item"
20-
id="video-conference-item-2"
21-
></div>
22-
<div
23-
className="video-conference-item"
24-
id="video-conference-item-3"
25-
></div>
26-
<div
27-
className="video-conference-item"
28-
id="video-conference-item-4"
29-
></div>
30-
</div>
31-
<Link className="icon_link_publication" target="_blank" href="projects?researchline=videoconference">
12+
<Link className="icon_link_publication" target="_blank" href="projects?researchline=videoconference">
13+
<div className={`video-conference-illust illust`}>
14+
<div className="video-conference-illust-container illust-container">
15+
<div
16+
className={`video-conference-item `}
17+
id="video-conference-item-1"
18+
></div>
19+
<div
20+
className="video-conference-item"
21+
id="video-conference-item-2"
22+
></div>
23+
<div
24+
className="video-conference-item"
25+
id="video-conference-item-3"
26+
></div>
27+
<div
28+
className="video-conference-item"
29+
id="video-conference-item-4"
30+
></div>
31+
</div>
3232
<ArrowOutwardIcon className=" text-white absolute right-1 hover:right-0 bottom-0.5 transition-all hover:bottom-2 font-bold opacity-75 hover:opacity-100" sx={{ fontSize: 48 }} />
3333
<Mybadge variant="secondary" size="sm" className="link_publication absolute right-2 bottom-14"> {t("front.ResearchLines.button")} </Mybadge>
34-
</Link>
35-
</div>
34+
</div>
35+
</Link>
3636
);
3737
const DataSpacesIllust = (
38-
<div className="data-spaces-illust illust">
39-
<div className="data-spaces-illust-container illust-container">
40-
<div className="data-spaces-item" id="data-spaces-item-1"></div>
41-
<div className="data-spaces-item" id="data-spaces-item-2"></div>
42-
<div className="data-spaces-item" id="data-spaces-item-3"></div>
43-
<div className="data-spaces-item" id="data-spaces-item-4"></div>
38+
<Link className="icon_link_publication" target="_blank" href="projects?researchline=data">
39+
<div className="data-spaces-illust illust">
40+
<div className="data-spaces-illust-container illust-container">
41+
<div className="data-spaces-item" id="data-spaces-item-1"></div>
42+
<div className="data-spaces-item" id="data-spaces-item-2"></div>
43+
<div className="data-spaces-item" id="data-spaces-item-3"></div>
44+
<div className="data-spaces-item" id="data-spaces-item-4"></div>
45+
</div>
46+
47+
<ArrowOutwardIcon className=" text-white absolute right-1 hover:right-0 bottom-1 transition-all hover:bottom-2 font-bold opacity-75 hover:opacity-100" sx={{ fontSize: 48 }} />
48+
<Mybadge variant="secondary" size="sm" className="link_publication absolute right-2 bottom-14"> {t("front.ResearchLines.button")} </Mybadge>
49+
4450
</div>
45-
<Link className="icon_link_publication" target="_blank" href="projects?researchline=data">
46-
<ArrowOutwardIcon className=" text-white absolute right-1 hover:right-0 bottom-1 transition-all hover:bottom-2 font-bold opacity-75 hover:opacity-100" sx={{ fontSize: 48 }} />
47-
<Mybadge variant="secondary" size="sm" className="link_publication absolute right-2 bottom-14"> {t("front.ResearchLines.button")} </Mybadge>
48-
</Link>
49-
</div>
51+
</Link>
5052
);
5153
const GenerativeAIIllust = (
54+
<Link className="icon_link_publication" target="_blank" href="projects?researchline=ai">
5255
<div className="generative-ai-illust illust">
5356
<div className="generative-ai-illust-container illust-container">
5457
<div className="generative-ai-item" id="generative-ai-item-1"></div>
5558
<div className="generative-ai-item" id="generative-ai-item-2"></div>
5659
<div className="generative-ai-item" id="generative-ai-item-3"></div>
5760
{/* <div className="generative-ai-item" id="generative-ai-item-4"></div> */}
5861
</div>
59-
<Link className="icon_link_publication" target="_blank" href="projects?researchline=ai">
6062
<ArrowOutwardIcon className=" text-background absolute right-1 hover:right-0 bottom-1 transition-all hover:bottom-2 font-bold opacity-75 hover:opacity-100" sx={{ fontSize: 48 }} />
6163
<Mybadge variant="secondary" size="sm" className="link_publication absolute right-2 bottom-14"> {t("front.ResearchLines.button")} </Mybadge>
62-
</Link>
64+
6365
</div>
66+
</Link>
6467
);
6568

6669
const ELearningIllust = (
70+
<Link className="icon_link_publication" target="_blank" href="projects?researchline=e-learning">
6771
<div className="e-learning-illust illust">
6872
<div className="e-learning-illust-container illust-container ">
6973
<div className="e-learning-item" id="e-learning-item-1"></div>
7074
<div className="e-learning-item" id="e-learning-item-2"></div>
7175
<div className="e-learning-item" id="e-learning-item-3"></div>
7276
{/* <div className="generative-ai-item" id="generative-ai-item-4"></div> */}
7377
</div>
74-
<Link className="icon_link_publication" target="_blank" href="projects?researchline=e-learning">
75-
<ArrowOutwardIcon className=" text-white absolute right-1 hover:right-0 bottom-1 transition-all hover:bottom-2 font-bold opacity-75 hover:opacity-100" sx={{ fontSize: 48 }} />
76-
<Mybadge variant="secondary" size="sm" className="link_publication absolute right-2 bottom-14"> {t("front.ResearchLines.button")} </Mybadge>
77-
</Link>
78+
<ArrowOutwardIcon className=" text-white absolute right-1 hover:right-0 bottom-1 transition-all hover:bottom-2 font-bold opacity-75 hover:opacity-100" sx={{ fontSize: 48 }} />
79+
<Mybadge variant="secondary" size="sm" className="link_publication absolute right-2 bottom-14"> {t("front.ResearchLines.button")} </Mybadge>
7880
</div>
81+
</Link>
7982
);
8083

8184
const ComputingIllust = (
85+
<Link className="icon_link_publication" target="_blank" href="projects?researchline=computing">
8286
<div className="networks-illust illust">
8387
<div className="networks-illust-container illust-container ">
8488
<Image
@@ -87,11 +91,12 @@ const ResearchlineIllust = ({ researchLine }) => {
8791
fit="contain"
8892
/>
8993
</div>
90-
<Link className="icon_link_publication" target="_blank" href="projects?researchline=computing">
91-
<ArrowOutwardIcon className=" text-white absolute right-1 hover:right-0 bottom-1 transition-all hover:bottom-2 font-bold opacity-75 hover:opacity-100" sx={{ fontSize: 48 }} />
94+
95+
<ArrowOutwardIcon className=" text-white absolute right-1 hover:right-0 bottom-1 transition-all hover:bottom-2 font-bold opacity-75 hover:opacity-100" sx={{ fontSize: 48 }} />
9296
<Mybadge variant="secondary" size="sm" className="link_publication absolute right-2 bottom-14"> {t("front.ResearchLines.button")} </Mybadge>
93-
</Link>
97+
9498
</div>
99+
</Link>
95100
);
96101

97102
switch (researchLine) {

‎constants/langs/en.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,12 +16,19 @@ export const en = {
1616
title: "Next Generation Internet Group",
1717
description:
1818
"A research group from the Telematics Engineering Department (DIT) at Universidad Politécnica de Madrid (UPM)",
19-
"action-button": "Our researchlines",
19+
"action-button": "Our researchlines",
2020
section1Title: "About us",
2121
section1Description:
2222
"Our main research interests focus on data space technologies, generative AI, e-Learning, and videoconferencing systems. We have extensive experience in protocol and specification design, as well as in the development of software components and use cases in these areas. We participate in competitive publicly funded research projects at the national and European level and in collaboration agreements with companies.",
23-
latestPublicationsTitle: "Latest publications",
24-
latestPublicationsButton: "See all publications",
23+
statistics: {
24+
papers: "papers",
25+
citations: "citations",
26+
projects: "projects",
27+
28+
29+
},
30+
// latestPublicationsTitle: "Latest publications",
31+
// latestPublicationsButton: "See all publications",
2532
ResearchLines: {
2633
sectionTitle: "Research lines",
2734
button: "See projetcs",

0 commit comments

Comments
 (0)