From 9eed05fff87cd2901363c783b2c60181b3258cca Mon Sep 17 00:00:00 2001 From: Anna Date: Fri, 21 Jul 2023 18:51:58 -0500 Subject: [PATCH] refactor: services section --- public/locales/en/home.json | 10 +- public/locales/es/home.json | 10 +- src/assets/images/index.ts | 2 +- src/components/future/illustrations/Alpha.tsx | 14 +-- src/components/future/illustrations/Betha.tsx | 27 +++++ src/components/future/illustrations/Delta.tsx | 27 +++++ src/components/future/illustrations/Gamma.tsx | 27 +++++ .../future/illustrations/Lambda.tsx | 28 +++++ src/components/future/illustrations/Pi.tsx | 27 +++++ src/components/future/illustrations/index.ts | 16 ++- src/components/ui/Clients/index.tsx | 3 +- src/components/ui/Faq/index.tsx | 4 +- src/components/ui/Schedule/index.tsx | 3 +- src/components/ui/Services/index.tsx | 100 ++++++++---------- src/modules/home/HomePageContent.tsx | 22 ++-- src/pages/_app.tsx | 2 +- 16 files changed, 227 insertions(+), 95 deletions(-) create mode 100644 src/components/future/illustrations/Betha.tsx create mode 100644 src/components/future/illustrations/Delta.tsx create mode 100644 src/components/future/illustrations/Gamma.tsx create mode 100644 src/components/future/illustrations/Lambda.tsx create mode 100644 src/components/future/illustrations/Pi.tsx diff --git a/public/locales/en/home.json b/public/locales/en/home.json index bfcddc1..07bf608 100644 --- a/public/locales/en/home.json +++ b/public/locales/en/home.json @@ -60,7 +60,7 @@ "items": ["UX/UI Design", "Microbranding"] }, { - "icon": "alfa", + "icon": "beta", "title": "Software Development", "description": "We use modern software development paradigms.", "items": [ @@ -71,7 +71,7 @@ ] }, { - "icon": "alfa", + "icon": "delta", "title": "Consultancies and/or Advising", "description": "We help you develop your product from scratch.", "items": [ @@ -80,7 +80,7 @@ ] }, { - "icon": "alfa", + "icon": "gamma", "title": "DevOps, Infrastructure and Cloud", "description": "We are specialized in end-to-end services.", "items": [ @@ -91,7 +91,7 @@ ] }, { - "icon": "alfa", + "icon": "lambda", "title": "Data Science and AI", "description": "We extract, clean, process, structure data and give value to its use through AI.", "items": [ @@ -101,7 +101,7 @@ ] }, { - "icon": "alfa", + "icon": "pi", "title": "Other Services", "description": "We are in constant technological change, we know about tools and technologies in general that can help you grow your business or research.", "items": ["IoT", "Hosting and domains"] diff --git a/public/locales/es/home.json b/public/locales/es/home.json index 41db7fa..87e0eb5 100644 --- a/public/locales/es/home.json +++ b/public/locales/es/home.json @@ -60,7 +60,7 @@ "items": ["UX/UI Design", "Micromarca"] }, { - "icon": "alfa", + "icon": "beta", "title": "Desarrollo de Software", "description": "Usamos modernos paradigmas de desarrollo de Sotfware.", "items": [ @@ -71,7 +71,7 @@ ] }, { - "icon": "alfa", + "icon": "delta", "title": "Consultorías y/o Asesorías", "description": "Te ayudamos a desarrollar tu producto desde cero.", "items": [ @@ -80,7 +80,7 @@ ] }, { - "icon": "alfa", + "icon": "gamma", "title": "DevOps, Infraestructura y Cloud", "description": "Nos especializamos en servicios end-to-end.", "items": [ @@ -91,7 +91,7 @@ ] }, { - "icon": "alfa", + "icon": "lambda", "title": "Data Science y AI", "description": "Extraemos, limpiamos, procesamos, estructuramos los datos y le damos valor a su uso a través de IA.", "items": [ @@ -101,7 +101,7 @@ ] }, { - "icon": "alfa", + "icon": "pi", "title": "Otros servicios", "description": "Estamos en constante cambio tecnológico, conocemos sobre herramientas y tecnologías en general que pueden ayudarte a crecer en tu negocio o investigación.", "items": ["IoT", "Hosting y dominios"] diff --git a/src/assets/images/index.ts b/src/assets/images/index.ts index 65084d8..3b504f4 100644 --- a/src/assets/images/index.ts +++ b/src/assets/images/index.ts @@ -38,7 +38,7 @@ export const clientsImages = [ id: "totemiq", iconLightmode: totemiqLightmode, iconDarkmode: totemiqDarkmode, - height: 60, + height: 50, }, { id: "clv", diff --git a/src/components/future/illustrations/Alpha.tsx b/src/components/future/illustrations/Alpha.tsx index f265c2c..0793515 100644 --- a/src/components/future/illustrations/Alpha.tsx +++ b/src/components/future/illustrations/Alpha.tsx @@ -2,24 +2,24 @@ type AlphaIllustrationProps = { scale?: number; }; -export const AlphaIllustration = ({ scale = 0.8 }: AlphaIllustrationProps) => { +export const AlphaIllustration = ({ scale = 1 }: AlphaIllustrationProps) => { return ( diff --git a/src/components/future/illustrations/Betha.tsx b/src/components/future/illustrations/Betha.tsx new file mode 100644 index 0000000..39b788e --- /dev/null +++ b/src/components/future/illustrations/Betha.tsx @@ -0,0 +1,27 @@ +type BethaIllustrationProps = { + scale?: number; +}; + +export const BethaIllustration = ({ scale = 1 }: BethaIllustrationProps) => { + return ( + + + + + ); +}; diff --git a/src/components/future/illustrations/Delta.tsx b/src/components/future/illustrations/Delta.tsx new file mode 100644 index 0000000..6b3842d --- /dev/null +++ b/src/components/future/illustrations/Delta.tsx @@ -0,0 +1,27 @@ +type DeltaIllustrationProps = { + scale?: number; +}; + +export const DeltaIllustration = ({ scale = 1 }: DeltaIllustrationProps) => { + return ( + + + + + ); +}; diff --git a/src/components/future/illustrations/Gamma.tsx b/src/components/future/illustrations/Gamma.tsx new file mode 100644 index 0000000..bc67836 --- /dev/null +++ b/src/components/future/illustrations/Gamma.tsx @@ -0,0 +1,27 @@ +type GammaIllustrationProps = { + scale?: number; +}; + +export const GammaIllustration = ({ scale = 1 }: GammaIllustrationProps) => { + return ( + + + + + ); +}; diff --git a/src/components/future/illustrations/Lambda.tsx b/src/components/future/illustrations/Lambda.tsx new file mode 100644 index 0000000..804c795 --- /dev/null +++ b/src/components/future/illustrations/Lambda.tsx @@ -0,0 +1,28 @@ +type LambdaIllustrationProps = { + scale?: number; +}; + +export const LambdaIllustration = ({ scale = 1 }: LambdaIllustrationProps) => { + return ( + + + + + ); +}; diff --git a/src/components/future/illustrations/Pi.tsx b/src/components/future/illustrations/Pi.tsx new file mode 100644 index 0000000..5851b12 --- /dev/null +++ b/src/components/future/illustrations/Pi.tsx @@ -0,0 +1,27 @@ +type PiIllustrationProps = { + scale?: number; +}; + +export const PiIllustration = ({ scale = 1 }: PiIllustrationProps) => { + return ( + + + + + ); +}; diff --git a/src/components/future/illustrations/index.ts b/src/components/future/illustrations/index.ts index 8174f3f..97271ee 100644 --- a/src/components/future/illustrations/index.ts +++ b/src/components/future/illustrations/index.ts @@ -1,5 +1,19 @@ import { SymbolsIllustration } from "./Symbols"; import { SystemIllustration } from "./System"; import { AlphaIllustration } from "./Alpha"; +import { BethaIllustration } from "./Betha"; +import { DeltaIllustration } from "./Delta"; +import { GammaIllustration } from "./Gamma"; +import { LambdaIllustration } from "./Lambda"; +import { PiIllustration } from "./Pi"; -export { SymbolsIllustration, SystemIllustration, AlphaIllustration }; +export { + SymbolsIllustration, + SystemIllustration, + AlphaIllustration, + BethaIllustration, + DeltaIllustration, + GammaIllustration, + LambdaIllustration, + PiIllustration, +}; diff --git a/src/components/ui/Clients/index.tsx b/src/components/ui/Clients/index.tsx index 8460759..3da14be 100644 --- a/src/components/ui/Clients/index.tsx +++ b/src/components/ui/Clients/index.tsx @@ -12,8 +12,7 @@ const useStyles = createStyles((theme, _params, getRef) => { title: { fontWeight: 900, fontFamily: "Open Sans", - paddingTop: `calc(${theme.spacing.xl} * 6)`, - marginBottom: `calc(${theme.spacing.xl} * 1.5)`, + marginBottom: `calc(${theme.spacing.xl} * 4)`, }, }; }); diff --git a/src/components/ui/Faq/index.tsx b/src/components/ui/Faq/index.tsx index db8ee72..03b0dbd 100644 --- a/src/components/ui/Faq/index.tsx +++ b/src/components/ui/Faq/index.tsx @@ -6,15 +6,13 @@ import { useTranslation } from "next-i18next"; const useStyles = createStyles((theme, _params, getRef) => { return { wrapper: { - paddingTop: `calc(${theme.spacing.xl} * 6)`, - paddingBottom: `calc(${theme.spacing.xl} * 4)`, minHeight: 650, }, title: { fontWeight: 900, fontFamily: "Open Sans", - marginBottom: `calc(${theme.spacing.xl} * 1.5)`, + marginBottom: `calc(${theme.spacing.xl} * 2)`, }, control: { diff --git a/src/components/ui/Schedule/index.tsx b/src/components/ui/Schedule/index.tsx index e162df9..a02ee2f 100644 --- a/src/components/ui/Schedule/index.tsx +++ b/src/components/ui/Schedule/index.tsx @@ -10,8 +10,7 @@ const useStyles = createStyles(theme => { title: { fontWeight: 900, fontFamily: "Open Sans", - paddingTop: `calc(${theme.spacing.xl} * 6)`, - marginBottom: `calc(${theme.spacing.xl} * 1.5)`, + marginBottom: `calc(${theme.spacing.xl} * 4)`, }, }; }); diff --git a/src/components/ui/Services/index.tsx b/src/components/ui/Services/index.tsx index 0a23fed..40b338c 100644 --- a/src/components/ui/Services/index.tsx +++ b/src/components/ui/Services/index.tsx @@ -1,34 +1,30 @@ -import { Text, Title, Container, SimpleGrid, createStyles, List } from "@mantine/core"; +import { + Text, + Title, + Container, + SimpleGrid, + createStyles, + List, + Group, + Stack, + Box, +} from "@mantine/core"; import { useTranslation } from "next-i18next"; -import { AlphaIllustration } from "components/future/illustrations"; +import { + AlphaIllustration, + BethaIllustration, + DeltaIllustration, + GammaIllustration, + LambdaIllustration, + PiIllustration, +} from "components/future/illustrations"; import { MinskyServices } from "lib/landing/structure"; const useStyles = createStyles(theme => ({ - wrapper: { - paddingTop: `calc(${theme.spacing.xl} * 6)`, - }, - title: { fontWeight: 900, textAlign: "center", - marginBottom: `calc(${theme.spacing.xl} * 1.5)`, - - /* [theme.fn.smallerThan("sm")]: { - fontSize: 28, - textAlign: "left", - }, */ - }, - - title_service: { - fontWeight: 900, - fontSize: 22, - }, - - description_service: { - fontSize: 14, - }, - service_list_item: { - fontSize: 14, + marginBottom: `calc(${theme.spacing.xl} * 4)`, }, })); @@ -39,37 +35,40 @@ type ServiceProps = { items: string[]; }; -const ServiceIcon = (icon?: string) => { +const ServiceIcon = ({ icon }: { icon: string }) => { switch (icon) { case "alfa": return ; + case "beta": + return ; + case "delta": + return ; + case "gamma": + return ; + case "lambda": + return ; + case "pi": + return ; default: return <>; } }; const Service = ({ icon, title, description, items }: ServiceProps) => { - const { classes } = useStyles(); - return ( -
- - - - {title} - + + - - {description} - - - {items.map((item, index) => ( - - {item} - - ))} - -
+ + {title} + {description} + + {items.map((item, index) => ( + {item} + ))} + + + ); }; @@ -80,21 +79,14 @@ export function ServicesGrid() { const services: MinskyServices[] = t("servicesInformation.services", { returnObjects: true }); return ( - + {t("servicesInformation.title")} - + {services.map(({ icon, title, description, items }) => ( ))} - + ); } diff --git a/src/modules/home/HomePageContent.tsx b/src/modules/home/HomePageContent.tsx index a262152..1bba59e 100644 --- a/src/modules/home/HomePageContent.tsx +++ b/src/modules/home/HomePageContent.tsx @@ -1,4 +1,4 @@ -import { Box, Center, Container, Loader, Space } from "@mantine/core"; +import { Box, Center, Container, Loader, Space, useMantineTheme } from "@mantine/core"; import { MinskyHeroTitle } from "components/ui/Hero"; import dynamic from "next/dynamic"; import { Check } from "tabler-icons-react"; @@ -37,6 +37,7 @@ const MinskyExpositor = dynamic(() => import("components/ui/Expositor"), { }); const HomePageContent: NextPage = () => { + const theme = useMantineTheme(); const [loading, setLoading] = useState(false); const { t } = useTranslation("home"); @@ -96,28 +97,21 @@ const HomePageContent: NextPage = () => { ({ - [theme.fn.smallerThan("sm")]: { - paddingLeft: 16, - paddingRight: 16, - }, [theme.fn.smallerThan("md")]: { - paddingLeft: 42, - paddingRight: 42, + paddingLeft: theme.spacing.xl, + paddingRight: theme.spacing.xl, }, })} > + - - + + - - + - - - { diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index bfd227f..aab8dc6 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -45,7 +45,7 @@ const MinskyLandingApp = ({