diff --git a/src/core/components/LandingPage/PartnersSection/PartnersSection.tsx b/src/core/components/LandingPage/PartnersSection/PartnersSection.tsx index 19c47be..31f0573 100644 --- a/src/core/components/LandingPage/PartnersSection/PartnersSection.tsx +++ b/src/core/components/LandingPage/PartnersSection/PartnersSection.tsx @@ -1,14 +1,19 @@ import React from "react"; -import { css } from "@emotion/react"; import Image from "next/image"; +import { css } from "@emotion/react"; import SectionWrapper from "@/core/components/common/SectionWrapper"; import theme from "@/core/styles/theme"; import { convertPxToRem } from "@/core/utils/convertPxToRem"; +import useWindowWidth from "@/core/hooks/useWindowWidth"; import { items, text } from "./constants"; const PartnersSection = () => { + const width = useWindowWidth(); + const defaultWidth = 1279; + const isWidthGreater = width != null ? width > defaultWidth : false; + return (
@@ -16,17 +21,48 @@ const PartnersSection = () => {

Investors

- {items.map((item, id) => ( -
- trade-platform -
- ))} + {isWidthGreater ? ( + <> +
+ {items.slice(0, 2).map((item, id) => ( +
+ investor-logo +
+ ))} +
+
+ {items.slice(2).map((item, id) => ( +
+ investor-logo +
+ ))} +
+ + ) : ( + <> + {items.map((item, id) => ( +
+ trade-platform +
+ ))} + + )}
@@ -52,7 +88,7 @@ const cssStyles = { align-items: center; padding: ${convertPxToRem(15)} 0 ${convertPxToRem(70)} 0; gap: 100px; - padding-bottom: ${convertPxToRem(100)} + padding-bottom: ${convertPxToRem(100)}; `, titleWrapper: css` margin: 0 auto ${theme.spacing.small}; @@ -84,8 +120,8 @@ const cssStyles = { justify-content: center; width: ${convertPxToRem(320)}; gap: 10px; + ${theme.media.tablet} { - width: 100%; gap: 20px; } `, @@ -96,7 +132,6 @@ const cssStyles = { display: flex; justify-content: center; align-items: center; - ${theme.media.tablet} { width: ${convertPxToRem(224)}; height: ${convertPxToRem(80)}; @@ -106,10 +141,23 @@ const cssStyles = { flex-direction: column; align-items: center; ${theme.media.tablet} { - flex-direction: unset; + width: 100%; + flex-direction: row; align-items: unset; } `, + topItems: css` + ${theme.media.tablet} { + display: flex; + justify-content: center; + } + `, + bottomItems: css` + ${theme.media.tablet} { + display: flex; + justify-content: center; + } + `, }; -export default PartnersSection; \ No newline at end of file +export default PartnersSection;