From 077cc5bb1553b8900a62738ad36c0685bb59abdb Mon Sep 17 00:00:00 2001 From: clara7227 Date: Wed, 30 Oct 2024 14:31:38 +0100 Subject: [PATCH] margenes ajustados a pantallas grandes, cambio iconos y cards de home a placeholder --- app/about/page.js | 5 +- app/contact/page.js | 12 +- app/globals.css | 12 +- app/page.js | 88 ++-- app/team/page.js | 2 +- components/TabsCategoryFilter.jsx | 6 +- components/core/Banner.jsx | 2 +- components/core/Header.jsx | 2 +- components/ui/Heading.jsx | 10 +- components/ui/Text.jsx | 4 +- constants/langs/en.js | 22 +- constants/langs/es.js | 24 +- package-lock.json | 661 +++++++++++++++++++++++++++++- package.json | 4 + tailwind.config.js | 4 +- 15 files changed, 744 insertions(+), 114 deletions(-) diff --git a/app/about/page.js b/app/about/page.js index a962dbb..01f137c 100644 --- a/app/about/page.js +++ b/app/about/page.js @@ -19,6 +19,7 @@ import { CardTitle, CardDescription, } from "@/components/ui/customCard"; +import Text from "@/components/ui/Text"; export default function About() { // const [projects, setProjects] = useState(myprojectCards); @@ -38,7 +39,7 @@ export default function About() { {t("about.Intro.sectionTitle")}
-

{t("about.Intro.sectionBody")}

+ {t("about.Intro.sectionBody")} -
+
{t("about.Columns.sectionTitle")} diff --git a/app/contact/page.js b/app/contact/page.js index 909764b..f03209c 100644 --- a/app/contact/page.js +++ b/app/contact/page.js @@ -8,7 +8,9 @@ import Text from "@/components/ui/Text"; import { EnvelopeClosedIcon } from "@radix-ui/react-icons"; import { MobileIcon } from "@radix-ui/react-icons"; import { SewingPinIcon } from "@radix-ui/react-icons"; -import { FaceIcon } from "@radix-ui/react-icons"; +import LocationOnOutlinedIcon from '@mui/icons-material/LocationOnOutlined'; +import LocalPhoneOutlinedIcon from '@mui/icons-material/LocalPhoneOutlined'; +import MailOutlinedIcon from '@mui/icons-material/MailOutlined'; export default function Contact(props) { const { t, i18n } = useTranslation(); @@ -18,7 +20,7 @@ export default function Contact(props) { {/*
*/}
-
+
{t("contact.title")} @@ -33,7 +35,7 @@ export default function Contact(props) {
  • - +
    @@ -46,7 +48,7 @@ export default function Contact(props) {
  • - +
    @@ -59,7 +61,7 @@ export default function Contact(props) {
  • - +
    diff --git a/app/globals.css b/app/globals.css index 0c2e4dd..99eaec4 100644 --- a/app/globals.css +++ b/app/globals.css @@ -12,7 +12,7 @@ } */ /*MARGINS*/ .standard_margin { - @apply m-6 sm:my-6 sm:mx-8 md:my-8 md:mx-14 lg:my-12 lg:mx-24 xl:mx-44 2xl:mx-60; + @apply m-6 sm:my-6 sm:mx-8 md:my-8 md:mx-14 lg:my-12 lg:mx-24 xl:mx-44 2xl:mx-72; } .standard_margin-xl { @apply m-6 sm:my-6 sm:mx-12 md:my-12 md:mx-32 lg:my-24 lg:mx-40 xl:mx-72 2xl:mx-96; @@ -21,29 +21,29 @@ /* MÁRGENES PARA CONTENEDORES CON IMÁGENES DE FONDO*/ /* margen estandar pero solo en eje x (para elementos que encuentran en otros contenedores) */ .standard_margin-x { - @apply mx-6 sm:mx-8 md:mx-14 lg:mx-24 xl:mx-44 2xl:mx-60 + @apply mx-6 sm:mx-8 md:mx-14 lg:mx-24 xl:mx-44 2xl:mx-72 } .standard_margin-xl-x { @apply m-6 sm:mx-12 md:mx-32 lg:mx-40 xl:mx-72 2xl:mx-96; } /* margen estandar pero solo en eje y (para elementos contenedores con otros elementos con margen dentro) */ .standard_margin-y { - @apply my-6 sm:my-6 md:my-8 lg:my-12 + @apply my-6 sm:my-6 md:my-8 lg:my-12 xl:my-44 2xl:my-72 } /*PADDINGS*/ .standard_padding { - @apply p-6 sm:py-6 sm:px-8 md:py-8 md:px-14 lg:py-12 lg:px-24 xl:px-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; } .padding_home { - @apply py-8 sm:py-12 md:py-20 lg:py-24 2xl:py-32; + @apply px-8 sm:p-12 md:px-20 lg:px-24 xl:px-32 2xl:px-48 py-6 sm:py-6 md:py-8 lg:py-12;; } .narrow_padding { @apply p-6 sm:py-6 sm:px-8 md:py-8 md:px-14 lg:py-10; } .standard_padding-y { - @apply py-6 sm:py-6 md:py-8 lg:py-12 + @apply py-6 sm:py-6 md:py-8 lg:py-12; } .padding_card_highlight { @apply p-4 lg:p-6; diff --git a/app/page.js b/app/page.js index a3102ae..37d05fd 100644 --- a/app/page.js +++ b/app/page.js @@ -8,11 +8,14 @@ import { useTranslation } from "react-i18next"; import { Button, ButtonVariants } from "@/components/ui/button"; import Heading from "@/components/ui/Heading"; -import {Divider, DividerVariants} from "@/components/ui/divider"; +import { Divider, DividerVariants } from "@/components/ui/divider"; import Text from "@/components/ui/Text"; import { ArrowRightIcon, EnvelopeOpenIcon } from "@radix-ui/react-icons"; import Image from "@/components/ui/image"; - +import MailOutlinedIcon from '@mui/icons-material/MailOutlined'; +import RocketLaunchIcon from '@mui/icons-material/RocketLaunch'; +import CategoryIcon from '@mui/icons-material/Category'; +import HubIcon from '@mui/icons-material/Hub'; import { CustomCard, @@ -30,7 +33,6 @@ import { BannerContent, BannerImg, } from "@/components/core/Banner"; -// import BannerPum from "@/components/bannerPum"; const iconCardClasses = clsx( "!h-20 fill-primary" @@ -86,70 +88,42 @@ export default function Page() { {t("front.section1Title")} {t("front.section1Description")} - - {t("front.section1Subtitle")} + + {t("front.ResearchLines.sectionTitle")} {/* Cards con iconos */} -
    - - - - - `} - /> +
    +
    + - - {t("about.Goals.Goal1.GoalTitle")} - + + {t("front.ResearchLines.ResearchLine1.ResearchLineTitle")} + - {t("about.Goals.Goal1.GoalBody")} + {t("front.ResearchLines.ResearchLine1.ResearchLineBody")} - +
    - - - - - - `} - /> - - {t("about.Goals.Goal2.GoalTitle")} - +
    + + + {t("front.ResearchLines.ResearchLine2.ResearchLineTitle")} + - {t("about.Goals.Goal2.GoalBody")} + {t("front.ResearchLines.ResearchLine2.ResearchLineBody")} - +
    - - - - {" "} - {t("front.Goals.Goal3.GoalTitle")} - - +
    + + + {t("front.ResearchLines.ResearchLine3.ResearchLineTitle")} + + + {t("front.ResearchLines.ResearchLine3.ResearchLineBody")} + +
    • diff --git a/app/team/page.js b/app/team/page.js index 7839ac9..532532e 100644 --- a/app/team/page.js +++ b/app/team/page.js @@ -58,7 +58,7 @@ const Team = (props) => { return (
    -
    +
    {t("team.title")} diff --git a/components/TabsCategoryFilter.jsx b/components/TabsCategoryFilter.jsx index 8ea58a5..481433b 100644 --- a/components/TabsCategoryFilter.jsx +++ b/components/TabsCategoryFilter.jsx @@ -32,12 +32,12 @@ export default function TabsCategoryFilter({ cards, onFilter }) { const classes = (category) => clsx([ "font-medium inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-base text-white ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", selectedCategory === category - ? "bg-primary-500" // Estilos para la categoría seleccionada - : "bg-primary-300 hover:bg-primary-400/75", // Estilos para las categorías no seleccionadas + ? "bg-primary-700" // Estilos para la categoría seleccionada + : "bg-primary-400 hover:bg-primary-600/75", // Estilos para las categorías no seleccionadas ]); return ( -
    +
    {categories.map((category, index) => (