-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #15 from compolabs/feat/trading-platform-layout
trading platform layout
- Loading branch information
Showing
14 changed files
with
405 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 0 additions & 10 deletions
10
src/core/components/LandingPage/TradingPlatformSection.tsx
This file was deleted.
Oops, something went wrong.
91 changes: 91 additions & 0 deletions
91
src/core/components/LandingPage/TradingPlatformSection/TradingFeatures.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| import { css } from "@emotion/react"; | ||
|
|
||
| import TextHighlighter from "@/core/components/common/TextHighlighter"; | ||
| import theme from "@/core/styles/theme"; | ||
|
|
||
| import { tradingFeatures } from "./constants"; | ||
|
|
||
| const TradingFeatures = () => { | ||
| return ( | ||
| <div css={cssStyles.container}> | ||
| {tradingFeatures.map(({ title, paragraph, highlight}) => ( | ||
| <article key={title} css={cssStyles.article}> | ||
| <h4 css={cssStyles.title}>{title}</h4> | ||
| <p> | ||
| <TextHighlighter | ||
| text={paragraph} | ||
| highlight={highlight} | ||
| color={theme.colors.pink} | ||
| styles={cssStyles.content} | ||
| /> | ||
| </p> | ||
| </article> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const cssStyles = { | ||
| container: css` | ||
| display: flex; | ||
| justify-content: center; | ||
| flex-wrap: wrap; | ||
| margin: 0 auto; | ||
| ${theme.media.tablet} { | ||
| max-width: 39rem; | ||
| width: 100%; | ||
| justify-content: space-between; | ||
| } | ||
| ${theme.media.desktop} { | ||
| max-width: 55.5rem; | ||
| } | ||
| `, | ||
| article: css` | ||
| margin-bottom: ${theme.spacing.extraHuge}; | ||
| max-width: 20rem; | ||
| text-align: center; | ||
| &:first-of-type { | ||
| margin-bottom: ${theme.spacing.extra}; | ||
| } | ||
| ${theme.media.tablet} { | ||
| max-width: 16.25rem; | ||
| &:first-of-type { | ||
| max-width: 17.5rem; | ||
| } | ||
| } | ||
| ${theme.media.desktop} { | ||
| max-width: 25.5rem; | ||
| &:first-of-type { | ||
| max-width: 25.5rem; | ||
| } | ||
| } | ||
| `, | ||
| title: css` | ||
| margin-bottom: ${theme.spacing.normal}; | ||
| font-size: ${theme.text.size.small}; | ||
| color: ${theme.colors.white.default}; | ||
| font-weight: ${theme.text.weight.regular}; | ||
| ${theme.media.tablet} { | ||
| margin: 0 auto ${theme.spacing.large}; | ||
| font-weight: ${theme.text.weight.medium}; | ||
| font-size: ${theme.text.size.medium}; | ||
| max-width: 12.5rem; | ||
| } | ||
| `, | ||
| content: css` | ||
| font-size: ${theme.text.size.extraTiny}; | ||
| ${theme.media.tablet} { | ||
| font-size: ${theme.text.size.small}; | ||
| } | ||
| `, | ||
| }; | ||
|
|
||
| export default TradingFeatures; |
90 changes: 90 additions & 0 deletions
90
src/core/components/LandingPage/TradingPlatformSection/TradingKeyAttributes.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,90 @@ | ||
| import { css, SerializedStyles } from "@emotion/react"; | ||
|
|
||
| import { | ||
| activeIndex, bottomLeftActiveIndex, bottomRightActiveIndex, postActiveIndex, | ||
| preActiveIndex, | ||
| tradingKeyAttributes | ||
| } from "@/core/components/LandingPage/TradingPlatformSection/constants"; | ||
| import Badge from "@/core/components/common/Badge"; | ||
| import theme from "@/core/styles/theme"; | ||
|
|
||
| const getBadgeStyles = (index: number): SerializedStyles | string => { | ||
| switch (index) { | ||
| case preActiveIndex: | ||
| return cssStyles.preActive | ||
| case postActiveIndex: | ||
| return cssStyles.postActive; | ||
| case bottomLeftActiveIndex: | ||
| return cssStyles.bottomLeftActive; | ||
| case bottomRightActiveIndex: | ||
| return cssStyles.bottomRightActive; | ||
| default: | ||
| return "" | ||
| } | ||
| }; | ||
|
|
||
| const TradingKeyAttributes = () => { | ||
| return ( | ||
| <div css={cssStyles.container}> | ||
| {tradingKeyAttributes.map((attribute, index) => ( | ||
| <Badge | ||
| key={attribute} | ||
| content={attribute} | ||
| borderStyles={getBadgeStyles(index)} | ||
| styles={index === activeIndex ? cssStyles.active : '' } | ||
| bgColor={theme.colors.grey.dark} | ||
| /> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const cssStyles = { | ||
| container: css` | ||
| margin: 0 auto ${theme.spacing.extraHuge}; | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| justify-content: center; | ||
| max-width: 23.25rem; | ||
| gap: ${theme.spacing.normal} ${theme.spacing.default}; | ||
| ${theme.media.tablet} { | ||
| max-width: 36rem; | ||
| } | ||
| ${theme.media.desktop} { | ||
| max-width: 50.5rem; | ||
| } | ||
| `, | ||
| active: css` | ||
| background: ${theme.colors.gradients.buttonTrading}; | ||
| box-shadow: ${theme.shadow.inset}; | ||
| ${theme.media.tablet} { | ||
| background: ${theme.colors.green[100]}; | ||
| box-shadow: ${theme.shadow.green}; | ||
| } | ||
| `, | ||
| preActive: css` | ||
| ${theme.media.tablet} { | ||
| background: linear-gradient(84.21deg, #2a2a2a 88.38%, rgba(105, 255, 195, 0.3825) 97.67%); | ||
| } | ||
| `, | ||
| postActive: css` | ||
| ${theme.media.tablet} { | ||
| background: linear-gradient(275.51deg, #2a2a2a 72.5%, rgba(105, 255, 195, 0.3825) 95.75%); | ||
| } | ||
| `, | ||
| bottomRightActive: css` | ||
| ${theme.media.tablet} { | ||
| background: linear-gradient(333.6deg, rgba(134, 101, 255, 0) 69.92%, rgba(105, 255, 195, 0.3825) 103.32%); | ||
| } | ||
| `, | ||
| bottomLeftActive: css` | ||
| ${theme.media.tablet} { | ||
| background: linear-gradient(4.11deg, rgba(134, 101, 255, 0) 59.35%, rgba(105, 255, 195, 0.3825) 107.33%); | ||
| } | ||
| `, | ||
| }; | ||
|
|
||
| export default TradingKeyAttributes; |
108 changes: 108 additions & 0 deletions
108
src/core/components/LandingPage/TradingPlatformSection/TradingPlatformSection.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,108 @@ | ||
| import { css } from "@emotion/react"; | ||
| import Image from "next/image"; | ||
|
|
||
| import { SourceNames } from "@/core/utils/pageSources"; | ||
| import { getIdAnchor } from "@/core/utils/getidAnchor"; | ||
| import SectionWrapper from "@/core/components/common/SectionWrapper"; | ||
| import { useMobileWindowWidth } from "@/core/hooks/useMobileWindowWidth"; | ||
| import theme from "@/core/styles/theme"; | ||
| import TextHighlighter from "@/core/components/common/TextHighlighter"; | ||
| import RegularTradeButton from "@/core/components/LandingPage/components/RegularTradeButton"; | ||
|
|
||
| import { | ||
| tradingDescriptionHighlight, | ||
| tradingToolkitDescription | ||
| } from "./constants"; | ||
| import TradingKeyAttributes from "./TradingKeyAttributes"; | ||
| import TradingFeatures from "./TradingFeatures"; | ||
|
|
||
| const TradingPlatformSection = () => { | ||
| const isMobile = useMobileWindowWidth(); | ||
|
|
||
| return ( | ||
| <SectionWrapper> | ||
| <div | ||
| id={getIdAnchor(SourceNames.TradeSmart)} | ||
| css={cssStyles.section(isMobile)} | ||
| > | ||
| <div css={cssStyles.titleWrapper}> | ||
| <h2 css={cssStyles.title}>Trading Toolkit: </h2> | ||
| <TextHighlighter | ||
| text={tradingToolkitDescription} | ||
| highlight={tradingDescriptionHighlight} | ||
| color={theme.colors.gradients.text} | ||
| styles={cssStyles.subtitle} | ||
| isGradient | ||
| /> | ||
| </div> | ||
|
|
||
| <TradingKeyAttributes /> | ||
|
|
||
| <div css={cssStyles.imageContainer}> | ||
| <Image | ||
| src="./images/trade-platform.png" | ||
| alt="trade-platform" | ||
| fill | ||
| /> | ||
| </div> | ||
|
|
||
| <TradingFeatures /> | ||
|
|
||
| <RegularTradeButton label= "Try it" styles={cssStyles.tryBtn} /> | ||
| </div> | ||
| </SectionWrapper> | ||
| ); | ||
| }; | ||
|
|
||
| const cssStyles = { | ||
| section: (isMobile: boolean) => css` | ||
| padding: ${isMobile ? `${theme.spacing.custom[40]} 0 ${theme.spacing.custom[20]}` : `${theme.spacing.section} 0`}; | ||
| width: 100%; | ||
| `, | ||
| titleWrapper: css` | ||
| margin: 0 auto ${theme.spacing.huge}; | ||
| max-width: 30rem; | ||
| text-align: center; | ||
| ${theme.media.tablet} { | ||
| max-width: 43rem; | ||
| } | ||
| `, | ||
| title: css` | ||
| margin-bottom: ${theme.spacing.normal}; | ||
| font-size: ${theme.text.size.small}; | ||
| color: ${theme.colors.white.default}; | ||
| ${theme.media.tablet} { | ||
| margin-bottom: ${theme.spacing.medium}; | ||
| } | ||
| `, | ||
| subtitle: css` | ||
| font-size: ${theme.text.size.small}; | ||
| ${theme.media.tablet} { | ||
| font-size: ${theme.text.size.subtitle}; | ||
| } | ||
| `, | ||
| imageContainer: css` | ||
| margin: ${theme.spacing.extraHuge} auto; | ||
| position: relative; | ||
| width: 20rem; | ||
| height: 12.5rem; | ||
| ${theme.media.tablet} { | ||
| width: 31.5rem; | ||
| height: 21.5rem; | ||
| } | ||
| `, | ||
| tryBtn: css` | ||
| max-width: 20.5rem; | ||
| margin: 0 auto; | ||
| ${theme.media.tabletBreakPoint} { | ||
| max-width: 14.5rem; | ||
| } | ||
| `, | ||
| } | ||
|
|
||
| export default TradingPlatformSection; |
Oops, something went wrong.