Skip to content

Commit

Permalink
team page
Browse files Browse the repository at this point in the history
  • Loading branch information
@lauralog
lauralog committed Jun 22, 2024
2 parents 85c1ee5 + e4c6ccf commit ee3f25f
Show file tree
Hide file tree
Showing 21 changed files with 332 additions and 172 deletions.
38 changes: 19 additions & 19 deletions app/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,14 @@ 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">
<div className="group_description flex flex-col gap-4 sm:justify-center md:gap-8 sm:items-center mx-8 sm:mx-8 md:ml-12 lg:ml-16 xl:ml-20 2xl:ml-24 sm:w-2/5">
<img
className="logo_home mt-4 sm:mt-0 self-start"
src="/assets/img/iso_logo.svg"
className="logo_home mt-4 sm:mt-0 self-start w-full"
src="assets/img/iso_logo.svg"
/>
<h2 className="text-white self-start">{t("front.title")}</h2>
<button className="action_button self-start">
Expand All @@ -56,27 +56,27 @@ export default function Home() {
<p>{t("front.projectDescription")} </p>
</div>
</section>

<section className="latest_publications">
<section className="standard_margin">
<div className="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>
Expand Down
50 changes: 44 additions & 6 deletions app/project/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,9 @@ import Link from "next/link";
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 { faCircleNodes } from "@fortawesome/free-solid-svg-icons";
import { faGrip } from "@fortawesome/free-solid-svg-icons";
import { useTranslation } from "react-i18next";

export default function Projects() {
// const [projects, setProjects] = useState(myprojectCards);
Expand All @@ -19,13 +20,50 @@ 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 standard_margin">
<div className="flex flex-col sm:gap-4 md:gap-4">
<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-4 md:mt-0 text-white">
{t("project.Intro.sectionHighlight")}
</h4>
</div>
</div>
</section>
<section className="standard_margin">
<h2 className="text-left text-white">{t("project.Goals.sectionTitle")}</h2>
<div className="flex flex-col sm:grid sm:grid-cols-2 gap-8 md:gap-12">
<div className="card_goals bg-black text-center padding_card_highlight">
<FontAwesomeIcon icon={faCircleNodes} className="icon_circle" />
<div>
<h3 > {t("project.Goals.Goal1.GoalTitle")}</h3>
<p className=""> {t("project.Goals.Goal1.GoalBody")}</p>
</div>
</div>
<div className="card_goals bg-black text-center padding_card_highlight">
<FontAwesomeIcon icon={faGrip} className="icon_circle" />
<div>
<h3> {t("project.Goals.Goal2.GoalTitle")}</h3>
<p className=""> {t("project.Goals.Goal2.GoalBody")}</p>
</div>
</div>

</div>
</section>

<section className="standard_margin">
<div className="flex flex-col sm:gap-4 md:gap-4">
<h2 className="text-left">{t("project.Impact.sectionTitle")}</h2>
<p className="sm:basis-3/4">{t("project.Impact.sectionBody")}</p>
</div>
</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>
Expand Down
3 changes: 2 additions & 1 deletion app/research/page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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() {
Expand Down Expand Up @@ -133,7 +134,7 @@ export default function Research() {
href={doi}
>
<span>{t("publications.button")}</span>
<FontAwesomeIcon icon={faArrowRight} />
<FontAwesomeIcon icon={faArrowUpRightFromSquare} />
</Link>
</button>
) : null}
Expand Down
25 changes: 25 additions & 0 deletions app/sass/components/_icons.sass
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
@mixin icon_circle

@apply bg-backgroundSecondary
border-radius: 50px
@apply text-slate-400

@media (min-width: $min-phone-width)
height: 1.5rem
width: 1.5rem
padding: 0.7rem
@media (min-width: $min-tablet-width)
height: 2.2rem
width: 2.2rem
padding: 1.3rem
@media (min-width: $min-desktop-width)
height: 2.4rem
width: 2.4rem
padding: 1.3rem
@media (min-width: $min-xl-desktop-width)
height: 2.8rem
width: 2.8rem
padding: 1.3rem

.icon_circle
@include icon_circle
44 changes: 23 additions & 21 deletions app/sass/lib/_mixins.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,15 @@
-moz-box-shadow: 0px 10px 13px -7px rgba(0,0,0,0.18)
box-shadow: 0px 10px 13px -7px rgba(0,0,0,0.18)

//CAMBIAR ESTE AZUL POR LA VARIABLE DE AZUL / TRANSPARENTE
@mixin drop-shadow-blue
-webkit-box-shadow: 0px 8px 12px -11px rgba(91, 115, 255, 0.525)
// -moz-box-shadow: 0px 4px 4px -2px rgba(91, 115, 255, 0.525)
// box-shadow: 0px 4px 4px -2px rgba(91, 115, 255, 0.525)
-moz-box-shadow: 0px 8px 12px -11px rgba(91, 115, 255, 0.525)
box-shadow: 0px 8px 12px -11px rgba(91, 115, 255, 0.525)

@mixin drop-shadow-blue-spread
-webkit-box-shadow: 0px 4px 12px -6px rgba(91, 115, 255, 0.525)
-moz-box-shadow: 0px 4px 12px -6px rgba(91, 115, 255, 0.525)
box-shadow: 0px 4px 12px -6px rgba(91, 115, 255, 0.525)

@mixin drop-shadow-intermediate
box-shadow: 0px 4px 4px 0px rgba(29, 29, 27, 0.15)
Expand Down Expand Up @@ -67,7 +71,7 @@
//margin: 0 0 0 1.4rem
.logotype
.logoheader
width: 9rem
width: 7rem
.menu_icon
padding: 0
display: flex
Expand Down Expand Up @@ -131,7 +135,7 @@
.logotype
display: flex
width: auto
font-size: 2.7rem

font-weight: $bold
font-family: $montserrat-alternates
color: $blue_primary
Expand All @@ -157,15 +161,14 @@
display: flex
flex-flow: row nowrap
justify-content: space-between
font-size: 1.2rem
//font-size: 1.2rem
gap: 2rem

@mixin nav_bar_one_line
.imagotype
.logoheader
width: 9rem
.logotype
font-size: 1.7rem
width: 7rem

.menu
width: auto
font-weight: $semi-bold
Expand All @@ -176,15 +179,14 @@
display: flex
flex-flow: wrap row
justify-content: space-between
font-size: 1.2rem


@mixin nav_bar_one_line_xl
padding: 1.5rem 2.5rem 1.5rem 2.5rem
.imagotype
.logotype
font-size: 2.4rem
.logoheader
width:11rem
width:9.4rem
.isotype

@mixin li_nav_bar
Expand All @@ -195,10 +197,10 @@
text-decoration: none
&.li-selected
a
color: $link_header
border-bottom: $border1 $link_header
color: $link_header
border-bottom: $border1 $link_header
&:hover
border-bottom: $border1 $link_header
border-bottom: $border1 $link_header


//ES
Expand Down Expand Up @@ -260,7 +262,7 @@
#banner-publications
// background-image: url("/assets/img/headers/publications-banner-phone.svg")
.parallax__layer
padding-top: 74px
padding-top: 60px
@media (min-width:$min-tablet-width-es)
.banner
padding-top: 112px
Expand Down Expand Up @@ -292,7 +294,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
Expand All @@ -302,17 +304,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
padding-top: 54px
@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

Expand Down
10 changes: 8 additions & 2 deletions app/sass/lib/_structure.sass
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,10 @@
//MARGINS
.standard_margin
@apply my-4 mx-4 sm:my-4 sm:mx-8 md:my-8 md:mx-14 lg:my-12 lg:mx-36 xl:mx-44 2xl:mx-60
@apply m-4 sm:my-4 sm:mx-8 md:my-8 md:mx-14 lg:my-12 lg:mx-36 xl:mx-44 2xl:mx-60
.xl_margin
@apply my-8 mx-8 sm:my-12 sm:mx-16 md:my-16 md:mx-24 lg:my-20 lg:mx-44 xl:mx-60 2xl:mx-80
@apply m-8 sm:my-12 sm:mx-16 md:my-16 md:mx-24 lg:my-20 lg:mx-44 xl:mx-60 2xl:mx-80

//PADDINGS
.padding_card_highlight
@apply pt-8 pb-12 px-6 sm:p-8 md:pb-12 lg:pb-16 lg:pt-12
35 changes: 17 additions & 18 deletions app/sass/lib/_type.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,22 +13,20 @@
// 5to atributo: alto de linea
// 6to atributo: margen bajo
$icon: 14px,14px, 16px,400
$xs-text: 14px, 13px, 16px, 400, 140%, 1rem, 0.6rem //small
$body-text: 14px, 16px, 18px, 300, 140%, 1rem, 0.6rem
$button: 14px, 16px, 18px, 300 //buttons
$sm-text: 16px, 18px, 20px, 400, 140%, 1rem, 0.6rem //h5
$md-text: 18px, 20px, 22px, 400, 140%, 1rem //h4
$lg-text: 22px, 26px, 30px, 400,140%, 1rem //h3
$xl-text: 23px, 30px, 36px, 300, 140%, 1rem //h2
$xxl-text: 28px, 36px, 42px, 300, 140%, 1rem //h1
$icon: 14px,14px, 18px,400
$xs-text: 14px, 13px, 18px, 400, 140%, 1rem, 0.6rem //small
$body-text: 14px, 16px, 20px, 300, 140%, 1rem, 0.6rem
$button: 14px, 16px, 20px, 300 //buttons
$sm-text: 16px, 18px, 22px, 400, 140%, 1rem, 0.6rem //h5
$md-text: 18px, 20px, 24px, 400, 140%, 1rem //h4
$lg-text: 22px, 26px, 32px, 400,140%, 1rem //h3
$xl-text: 23px, 30px, 38px, 300, 140%, 1rem //h2
$xxl-text: 28px, 36px, 44px, 600, 140%, 1rem //h1

$slim-weight: 500
$regular:400
$semibold:600
$bold:800


$regular: 400
$semibold: 600
$bold: 800

h1
@media screen and (min-width: 150px)
Expand Down Expand Up @@ -124,27 +122,28 @@ h5
line-height: nth($sm-text,5)
margin-bottom: nth($sm-text,6)



// parrafos, etiquetas e inputs
p, label, input, select
@media screen and (min-width: 150px)
font-family:$main_font, sans-serif
font-family: $main_font, sans-serif
font-size: nth($body-text,1)
line-height: nth($body-text,5)
font-weight: nth($body-text,4)
// @apply text-ffdBlue-400
//margin-bottom: nth($body-text,6)
@media screen and (min-width: 640px)
font-family: $main_font, sans-serif
font-size: nth($body-text,2)
line-height: nth($body-text,5)
font-weight: nth($body-text,4)
// @apply text-ffdBlue-400
//margin-bottom: nth($body-text,6)
@media screen and (min-width: 1400px)
font-family: $main_font, sans-serif
font-size: nth($body-text,3)
line-height: nth($body-text,5)
font-weight: nth($body-text,4)
// @apply text-ffdBlue-400
//margin-bottom: nth($body-text,6)
// texto pequeño
Expand Down Expand Up @@ -218,4 +217,4 @@ button, a
@media screen and (min-width: 640px)
font-size: nth($icon, 2)
@media screen and (min-width: 1400px)
font-size: nth($icon,3)
font-size: nth($icon,3)
Loading

0 comments on commit ee3f25f

Please sign in to comment.