This repository has been archived by the owner on Sep 26, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 185
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Konstantinos / [FE] Add Certifications & Awards block to Home page an…
…d Who We Are page (#5803) * feat: add certificates * fix: seo for our values * auto-pull-translation * translation: 📚 sync translations from crowdin feature branch * auto-pull-translation * auto-pull-translation * translation: 📚 sync translations from crowdin feature branch * fix: add certification-who we are page too for row * fix: export messages.json * fix: export messages.json * auto-pull-translation * translation: 📚 sync translations from crowdin feature branch * fix: seo --------- Co-authored-by: “konstantinosG-deriv” <“[email protected]”> Co-authored-by: DerivFE <[email protected]>
- Loading branch information
3 people
authored
Oct 27, 2023
1 parent
7f7b97b
commit 13ef67b
Showing
33 changed files
with
6,250 additions
and
5,883 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
71 changes: 71 additions & 0 deletions
71
src/features/components/templates/banners/award-banners/award-banner-eu/index.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,71 @@ | ||
| import React from 'react' | ||
| import { StaticImage } from 'gatsby-plugin-image' | ||
| import { AwardProps } from '../awardProps' | ||
| import * as styles from '../award-banner.module.scss' | ||
| import Container from 'features/components/atoms/container' | ||
| import Flex from 'features/components/atoms/flex-box' | ||
| import Typography from 'features/components/atoms/typography' | ||
| import { Localize, localize } from 'components/localization' | ||
|
|
||
| const AwardBannerEu = ({ title, subtitle }: AwardProps) => { | ||
| return ( | ||
| <Container.Fluid margin_block="36x"> | ||
| <Typography.Heading align="center" margin="8x" weight="bold" md={{ margin: '12x' }}> | ||
| <Localize translate_text={title} /> | ||
| </Typography.Heading> | ||
| <Typography.Paragraph | ||
| size="xlarge" | ||
| align="center" | ||
| mt="8x" | ||
| mb="16x" | ||
| md={{ mb: '24x', mt: '12x' }} | ||
| > | ||
| <Localize translate_text={subtitle} /> | ||
| </Typography.Paragraph> | ||
| <Flex.Box | ||
| align="center" | ||
| direction="col" | ||
| justify="center" | ||
| gap="8x" | ||
| md={{ direction: 'row' }} | ||
| > | ||
| <Flex.Box | ||
| align="center" | ||
| justify="center" | ||
| direction="col" | ||
| className={styles.content_eu} | ||
| padding="8x" | ||
| md={{ padding: '27x' }} | ||
| > | ||
| <StaticImage | ||
| src="../../../../../../images/common/awards/gptw.png" | ||
| alt={localize('_t_GPTW award_t_')} | ||
| formats={['avif', 'webp', 'auto']} | ||
| quality={100} | ||
| placeholder="none" | ||
| width={89} | ||
| /> | ||
| </Flex.Box> | ||
| <Flex.Box | ||
| align="center" | ||
| justify="center" | ||
| direction="col" | ||
| className={styles.content_eu} | ||
| padding="8x" | ||
| md={{ padding: '27x' }} | ||
| > | ||
| <StaticImage | ||
| src="../../../../../../images/common/awards/investors.png" | ||
| alt={localize('_t_Investors in people award_t_')} | ||
| formats={['avif', 'webp', 'auto']} | ||
| quality={100} | ||
| placeholder="none" | ||
| width={157} | ||
| /> | ||
| </Flex.Box> | ||
| </Flex.Box> | ||
| </Container.Fluid> | ||
| ) | ||
| } | ||
|
|
||
| export default AwardBannerEu |
20 changes: 20 additions & 0 deletions
20
src/features/components/templates/banners/award-banners/award-banner.module.scss
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,20 @@ | ||
| @use 'features/styles/theme/theme-mixins' as *; | ||
| @import 'features/styles/theme/variables'; | ||
|
|
||
| .content{ | ||
| max-inline-size: 1232px; | ||
| background-color: var(--color-grey-45); | ||
| border-radius: 24px; | ||
| } | ||
|
|
||
| .content_eu{ | ||
| inline-size: 100%; | ||
| block-size: 332px; | ||
| background-color: var(--color-grey-45); | ||
| border-radius: 24px; | ||
|
|
||
| @include breakpoints(tablet) { | ||
| inline-size: 400px; | ||
| block-size: 294px; | ||
| } | ||
| } |
12 changes: 12 additions & 0 deletions
12
src/features/components/templates/banners/award-banners/awardProps.ts
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,12 @@ | ||
| import { ReactElement } from 'react' | ||
| import { TString } from 'types/generics' | ||
|
|
||
| export interface AwardImagesProps { | ||
| id: number | ||
| image: ReactElement | ||
| } | ||
|
|
||
| export interface AwardProps { | ||
| title: TString | ||
| subtitle?: TString | ||
| } |
47 changes: 47 additions & 0 deletions
47
src/features/components/templates/banners/award-banners/data.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,47 @@ | ||
| import React from 'react' | ||
| import { StaticImage } from 'gatsby-plugin-image' | ||
| import { AwardImagesProps } from './awardProps' | ||
| import { localize } from 'components/localization' | ||
|
|
||
| export const awardImagesRow: AwardImagesProps[] = [ | ||
| { | ||
| id: 0, | ||
| image: ( | ||
| <StaticImage | ||
| src="../../../../../images/common/awards/best-forex-spreads.png" | ||
| alt={localize('_t_Best forex spread award_t_')} | ||
| formats={['avif', 'webp', 'auto']} | ||
| quality={100} | ||
| placeholder="none" | ||
| width={282} | ||
| /> | ||
| ), | ||
| }, | ||
| { | ||
| id: 1, | ||
| image: ( | ||
| <StaticImage | ||
| src="../../../../../images/common/awards/broker-of-the-year.png" | ||
| alt={localize('_t_Broker of the year award_t_')} | ||
| formats={['avif', 'webp', 'auto']} | ||
| quality={100} | ||
| placeholder="none" | ||
| width={282} | ||
| /> | ||
| ), | ||
| }, | ||
|
|
||
| { | ||
| id: 2, | ||
| image: ( | ||
| <StaticImage | ||
| src="../../../../../images/common/awards/most-trusted.png" | ||
| alt={localize('_t_Most trusted award_t_')} | ||
| formats={['avif', 'webp', 'auto']} | ||
| quality={100} | ||
| placeholder="none" | ||
| width={282} | ||
| /> | ||
| ), | ||
| }, | ||
| ] |
35 changes: 35 additions & 0 deletions
35
src/features/components/templates/banners/award-banners/index.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,35 @@ | ||
| import React from 'react' | ||
| import { awardImagesRow, awardImagesEu } from './data' | ||
| import { AwardProps } from './awardProps' | ||
| import * as styles from './award-banner.module.scss' | ||
| import Container from 'features/components/atoms/container' | ||
| import Flex from 'features/components/atoms/flex-box' | ||
| import Typography from 'features/components/atoms/typography' | ||
| import { Localize } from 'components/localization' | ||
|
|
||
| const AwardBanner = ({ title }: AwardProps) => { | ||
| return ( | ||
| <Container.Fluid margin_block="36x"> | ||
| <Flex.Box | ||
| align="center" | ||
| justify="center" | ||
| direction="col" | ||
| className={styles.content} | ||
| padding="8x" | ||
| md={{ padding: '27x' }} | ||
| > | ||
| <Typography.Heading align="center" margin="12x" weight="bold"> | ||
| <Localize translate_text={title} /> | ||
| </Typography.Heading> | ||
|
|
||
| <Flex.Box direction="col" margin="12x" gap="8x" md={{ direction: 'row' }}> | ||
| {awardImagesRow.map((award, index) => ( | ||
| <Flex.Box key={index}>{award.image}</Flex.Box> | ||
| ))} | ||
| </Flex.Box> | ||
| </Flex.Box> | ||
| </Container.Fluid> | ||
| ) | ||
| } | ||
|
|
||
| export default AwardBanner |
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
Oops, something went wrong.
13ef67bThere was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Successfully deployed to the following URLs:
deriv-com – ./
deriv-com.binary.sx
deriv-com-git-master.binary.sx