Skip to content

Commit 6593a04

Browse files
clara7227clara7227
committed
merge
2 parents 5568207 + f734d30 commit 6593a04

90 files changed

Lines changed: 12102 additions & 5273 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: 89 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@
77
}
88
html {
99
scroll-behavior: smooth;
10+
@apply font-main;
1011
}
1112

1213
/*TYPE*/
@@ -41,7 +42,7 @@ html {
4142

4243
/*PADDINGS*/
4344
.standard_padding {
44-
@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;
4546
}
4647
.standard_padding_xl {
4748
@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;
@@ -482,4 +483,91 @@ main {
482483
transition-delay: 0.3s;
483484
}
484485
}
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+
}
485573
}

‎app/page.js‎

Lines changed: 160 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,18 @@ import { useTranslation } from "react-i18next";
77
import { Button, ButtonVariants } from "@/components/ui/button";
88
import Heading from "@/components/ui/Heading";
99
import { Divider, DividerVariants } from "@/components/ui/divider";
10+
1011
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
12+
import EventIcon from "@mui/icons-material/Event";
13+
import AccessTimeIcon from "@mui/icons-material/AccessTime";
14+
import PlaceIcon from "@mui/icons-material/Place";
15+
import FileDownloadOutlinedIcon from "@mui/icons-material/FileDownloadOutlined";
16+
import { FileDownloadOutlined } from "@mui/icons-material";
17+
1118
import ResearchLineCard from "@/components/cards/ResearchLineCard";
19+
import Text from "@/components/ui/Text";
20+
import Image from "@/components/ui/image";
21+
import { Badge } from "@/components/ui/badge";
1222

1323
//Banner
1424
import {
@@ -20,7 +30,6 @@ import {
2030
BannerImg,
2131
BannerLogo,
2232
} from "@/components/core/Banner";
23-
import PruebaRectangulos from "@/components/pruebas/pruebaRectangulos";
2433

2534
// UI
2635
export default function Page() {
@@ -35,9 +44,11 @@ export default function Page() {
3544

3645
return (
3746
<main>
38-
<Banner>
39-
{/* <PruebaRectangulos></PruebaRectangulos> */}
47+
<Link href="#section2" scroll={true} className="arrowScroll arrows">
48+
{" "}
49+
</Link>
4050

51+
<Banner>
4152
<BannerImg></BannerImg>
4253

4354
<BannerContent className="absolute ">
@@ -64,14 +75,157 @@ export default function Page() {
6475
</BannerContent>
6576
</Banner>
6677

67-
<section className="padding_group_description bg-background-200">
78+
<section
79+
className="padding_group_description"
80+
style={{
81+
backgroundImage: "linear-gradient(to right, #948CFFDD, #2c2e33)",
82+
}}
83+
>
6884
<Divider size="lg" className="hidden md:flex"></Divider>
6985
<Divider size="sm"></Divider>
86+
<Heading level="h2">40 Aniversario de internet en España</Heading>
87+
88+
<div className="flex gap-4">
89+
<Badge variant="">
90+
<Heading level="subtitle" className="flex items-center gap-1 line">
91+
<AccessTimeIcon className="mt-0.5" sx={{ fontSize: 22 }} /> 12:30
92+
</Heading>
93+
</Badge>
94+
<Heading level="subtitle" className="flex items-center gap-1 line">
95+
<EventIcon className="mt-0.5" sx={{ fontSize: 22 }} /> 2 de
96+
diciembre
97+
</Heading>
98+
99+
<Heading level="subtitle" className="flex items-center gap-1 line">
100+
<PlaceIcon className="mt-0.5" sx={{ fontSize: 22 }} />
101+
Salón de actos del Edificio C de la ETSIT
102+
</Heading>
103+
</div>
104+
105+
<Text type="p" className="mb-1">
106+
La primera conexión a internet en España fue realizada en 1985 desde
107+
la Escuela Técnica Superior de Ingenieros de Telecomunicación (ETSIT)
108+
de la Universidad Politécnica de Madrid (UPM). El envío de un email de
109+
prueba por una red TCP/IP conectada al servicio de correo electrónico
110+
de internet a través de EUnet, cuya transcendencia histórica ignoraban
111+
sus propios protagonistas, marcó el comienzo de la expansión en
112+
nuestro país de la que acabaría siendo en poco tiempo la red de redes.
113+
El acto para conmemorar este hito incluirá la participación por
114+
videoconferencia de los estadounidenses Vinton Cerf y Robert Kahn,
115+
considerados los padres de internet.
116+
</Text>
117+
<div className="grid grid-cols-[3rem_1fr] gap-x-4 mt-8">
118+
<Text type="p" className="mb-1">
119+
12:30
120+
</Text>
121+
<Text type="p" className="mb-1">
122+
Apertura institucional presidida por el rector de la UPM, Óscar
123+
García.
124+
</Text>
125+
<Text type="p" className="mb-1">
126+
12:45
127+
</Text>
128+
<Text type="p" className="mb-1">
129+
Charla del profesor emérito Juan Quemada sobre los primeros pasos en
130+
el despliegue de internet en España.
131+
</Text>
132+
<Text type="p" className="mb-1">
133+
13:10
134+
</Text>
135+
<Text type="p" className="mb-1">
136+
Diálogo por videoconferencia con Vinton Cerf y Robert Kahn, padres
137+
de internet, moderado por Juan Quemada.
138+
</Text>
139+
<Text type="p" className="mb-1">
140+
13:45
141+
</Text>
142+
<Text type="p" className="mb-1">
143+
Mesa redonda con pioneros españoles de internet moderada por el
144+
profesor emérito Juan Riera.
145+
</Text>
146+
<Text type="small" className="mb-1 col-start-2 pl-4 text-sm">
147+
José Antonio Mañas, socio fundador de Goya Servicios Telemáticos.
148+
</Text>
149+
<Text type="small" className="mb-1 col-start-2 pl-4 text-sm">
150+
José Barberá, exdirector de RedIRIS.
151+
</Text>
152+
<Text type="small" className="mb-1 col-start-2 pl-4 text-sm">
153+
Víctor Castelo, exdirector de RedIRIS.
154+
</Text>
155+
<Text type="small" className="mb-1 col-start-2 pl-4 text-sm">
156+
Isidoro Padilla, director de Servicios en Infovía (Telefónica).
157+
</Text>
158+
<Text type="p" className="mb-1">
159+
14:20
160+
</Text>
161+
<Text type="p" className="mb-1">
162+
Inauguración de la sección sobre la historia de internet en España
163+
en el Museo de Telecomunicación de la ETSIT-UPM.
164+
</Text>
165+
<Text type="p" className="mb-1">
166+
14:30
167+
</Text>
168+
<Text type="p" className="mb-1">
169+
Cóctel.
170+
</Text>
171+
</div>
172+
173+
<div className="flex gap-4 mt-8">
174+
<a
175+
href="https://eventos.upm.es/143851/detail/40o-aniversario-de-internet-en-espana.html"
176+
target="_blank"
177+
>
178+
<Button
179+
variant="outline"
180+
className="mb-8 gap-1 pb-2.5 flex items-center"
181+
>
182+
Inscripciones
183+
<ArrowForwardIcon className="h-6" />
184+
</Button>
185+
</a>
186+
<a
187+
href="/assets/documents/Articulo_FHT.pdf"
188+
download="Articulo_FHT.pdf"
189+
>
190+
<Button
191+
variant="outline"
192+
className="mb-8 gap-1 pb-2.5 flex items-center"
193+
>
194+
Descargar artículo
195+
<FileDownloadOutlined className="h-6" />
196+
</Button>
197+
</a>
198+
</div>
199+
{/* <Divider size="md"></Divider> */}
200+
<Divider size="xxl" className="hidden md:flex"></Divider>
201+
</section>
202+
203+
<section className="padding_group_description bg-background-200">
204+
<Divider size="xl" className="hidden md:flex" id="section2"></Divider>
70205

71206
<Heading level="h3">{t("front.section1Title")}</Heading>
72207
<Heading level="subtitle"> {t("front.section1Description")}</Heading>
73208

74-
<Divider size="md"></Divider>
209+
<Divider size="md" className="hidden md:flex"></Divider>
210+
<Divider size="xs" className="flex md:hidden"></Divider>
211+
<div className="statisticsContainer">
212+
<div className="statisticItemContainer">
213+
<h1 className="numbersFront"> +400</h1>
214+
<p className="unitFront">{t("front.statistics.papers")}</p>
215+
</div>
216+
<div className="statisticItemContainer">
217+
<h1 className="numbersFront">+6K</h1>
218+
<p className="unitFront">{t("front.statistics.citations")}</p>
219+
</div>
220+
<div className="statisticItemContainer">
221+
<h1 className="numbersFront">+150</h1>
222+
<p className="unitFront">{t("front.statistics.projects")}</p>
223+
</div>
224+
<div className="statisticItemContainer">
225+
<h1 className="numbersFront">45</h1>
226+
<p className="unitFront">H-Index</p>
227+
</div>
228+
</div>
75229
<Divider size="xxl" className="hidden md:flex"></Divider>
76230
<div id="researchlines"></div>
77231
</section>
@@ -124,7 +278,7 @@ export default function Page() {
124278
)}
125279
/>
126280
</section>
127-
281+
128282
<Divider size="md"></Divider>
129283
</section>
130284
</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";

0 commit comments

Comments
 (0)