-
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.
base layout for resources section (#22)
* base layout for resources section * style improvement --------- Co-authored-by: anna.kuvarina <AnnaKuvarina>
- Loading branch information
1 parent
442aba1
commit 4b8cd5d
Showing
5 changed files
with
221 additions
and
1 deletion.
There are no files selected for viewing
76 changes: 76 additions & 0 deletions
76
src/core/components/LandingPage/ResourcesSection/NumberedCard.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,76 @@ | ||
| import { css } from "@emotion/react"; | ||
|
|
||
| import { CommonEntity } from "core/types"; | ||
|
|
||
| import TextHighlighter from "@/core/components/common/TextHighlighter"; | ||
| import theme from "@/core/styles/theme"; | ||
| import { convertPxToRem } from "@/core/utils/convertPxToRem"; | ||
|
|
||
| interface PropTypes extends CommonEntity { | ||
| number: number, | ||
| title: string, | ||
| paragraph: { | ||
| text: string, | ||
| highlight: string, | ||
| }, | ||
| } | ||
|
|
||
| const NumberedCard = ({ number, title, paragraph, children, styles }: PropTypes) => { | ||
| return ( | ||
| <article css={[cssStyles.card, styles]}> | ||
| <span css={cssStyles.cardNumber}>{number}</span> | ||
|
|
||
| <h4 css={cssStyles.title}>{title}</h4> | ||
|
|
||
| <TextHighlighter | ||
| text={paragraph.text} | ||
| highlight={paragraph.highlight} | ||
| color={theme.colors.gradients.text} | ||
| styles={cssStyles.paragraph} | ||
| isGradient | ||
| /> | ||
|
|
||
| {children} | ||
| </article> | ||
| ) | ||
| }; | ||
|
|
||
| const cssStyles = { | ||
| card: css` | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: center; | ||
| align-items: center; | ||
| width: 100%; | ||
| `, | ||
| cardNumber: css` | ||
| margin-bottom: ${theme.spacing.huge}; | ||
| font-size: ${theme.text.size.medium}; | ||
| color: ${theme.colors.grey.medium}; | ||
| border: ${convertPxToRem(1)} solid ${theme.colors.grey[33]}; | ||
| border-radius: 50%; | ||
| width: ${convertPxToRem(35)}; | ||
| height: ${convertPxToRem(35)}; | ||
| `, | ||
| title: css` | ||
| margin-bottom: ${theme.spacing.normal}; | ||
| color: ${theme.colors.white.default}; | ||
| font-size: ${theme.text.size.tiny}; | ||
| font-weight: ${theme.text.weight.bold}; | ||
| ${theme.media.tabletLandscape} { | ||
| margin-bottom: ${theme.spacing.medium}; | ||
| } | ||
| `, | ||
| paragraph: css` | ||
| margin-bottom: ${theme.spacing.custom[40]}; | ||
| max-width: ${convertPxToRem(500)}; | ||
| ${theme.media.tabletLandscape} { | ||
| max-width: ${convertPxToRem(732)}; | ||
| font-size: ${theme.text.size.subtitle}; | ||
| } | ||
| `, | ||
| } | ||
|
|
||
| export default NumberedCard; |
57 changes: 57 additions & 0 deletions
57
src/core/components/LandingPage/ResourcesSection/ResourceLinks.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,57 @@ | ||
| import { css } from "@emotion/react"; | ||
|
|
||
| import ExternalLinkButton from "@/core/components/common/ExternalLinkWrapper"; | ||
| import { convertPxToRem } from "@/core/utils/convertPxToRem"; | ||
| import theme from "@/core/styles/theme"; | ||
| import { resourceLinks } from "@/core/components/LandingPage/ResourcesSection/constants"; | ||
|
|
||
| const ResourceLinks = () => { | ||
| return ( | ||
| <div css={cssStyles.wrapper}> | ||
| {resourceLinks.map(({ label, href, svgIcon}) => ( | ||
| <ExternalLinkButton key={label} href={href} styles={cssStyles.link}> | ||
| <span>{label}</span> | ||
| {svgIcon} | ||
| </ExternalLinkButton> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| const cssStyles = { | ||
| wrapper: css` | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: center; | ||
| gap: ${theme.spacing.normal}; | ||
| width: 100%; | ||
| ${theme.media.tabletBreakPoint} { | ||
| flex-direction: row; | ||
| justify-content: center; | ||
| } | ||
| `, | ||
| link: css` | ||
| display: flex; | ||
| justify-content: space-between; | ||
| align-items: center; | ||
| padding: ${theme.spacing.normal}; | ||
| background: ${theme.colors.black.default}; | ||
| box-shadow: ${theme.shadow.inset}; | ||
| color: ${theme.colors.white.default}; | ||
| font-size: ${theme.text.size.body}; | ||
| border-radius: ${theme.borderRadius.default}; | ||
| max-width: ${convertPxToRem(320)}; | ||
| width: 100%; | ||
| & > img { | ||
| padding: ${theme.spacing.small}; | ||
| } | ||
| ${theme.media.tabletBreakPoint} { | ||
| max-width: ${convertPxToRem(230)}; | ||
| } | ||
| ` | ||
| }; | ||
|
|
||
| export default ResourceLinks; |
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
38 changes: 38 additions & 0 deletions
38
src/core/components/LandingPage/ResourcesSection/constants.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,38 @@ | ||
| import Image from "next/image"; | ||
|
|
||
| import ResourceLinks from "@/core/components/LandingPage/ResourcesSection/ResourceLinks"; | ||
| import SVGIcon from "@/core/components/common/SVGIcon"; | ||
| import { externalLinks } from "@/core/constants/externalLinks"; | ||
|
|
||
| export const resourceCards = [ | ||
| { | ||
| title: "Resource Library:", | ||
| paragraph: { | ||
| text: "Explore a rich repository of resources, tailored for those who seek to deepen their understanding", | ||
| highlight: "Explore a rich repository of resources,", | ||
| }, | ||
| renderContent: () => <ResourceLinks /> | ||
| }, | ||
| { | ||
| title: "Expert-Led Learning:", | ||
| paragraph: { | ||
| text: "Gain exclusive insights from industry leaders tailored for those who seek to deepen their understanding", | ||
| highlight: "Gain exclusive insights from industry leaders", | ||
| }, | ||
| // TODO: replace with slider | ||
| renderContent: () => <div>Slider</div>, | ||
| }, | ||
| ]; | ||
|
|
||
| export const resourceLinks = [ | ||
| { | ||
| label: "Github", | ||
| svgIcon: <SVGIcon iconName="Github" size={[32, 32]} />, | ||
| href: externalLinks.github, | ||
| }, | ||
| { | ||
| label: "Documentation", | ||
| svgIcon: <Image src="./images/svg/docs.svg" alt="doc" width={32} height={32} />, | ||
| href: externalLinks.docsDevelopers, | ||
| }, | ||
| ]; |
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