diff --git a/web/e.cash/pages/ecash-brand.js b/web/e.cash/pages/ecash-brand.js --- a/web/e.cash/pages/ecash-brand.js +++ b/web/e.cash/pages/ecash-brand.js @@ -1,4 +1,5 @@ import Image from 'next/image'; +import Link from 'next/link'; import Layout from '/components/layout'; import SubPageHero from '/components/sub-page-hero'; import H3 from '/components/h3'; @@ -7,9 +8,114 @@ import logodiagram from '/public/images/logo-diagram.svg'; import logodiagram2 from '/public/images/logo-diagram-2.svg'; import logodiagram3 from '/public/images/logo-diagram-3.svg'; -import { TextBlock } from '/styles/pages/ecash-brand.js'; +import { + TextBlock, + LogoRow, + RowName, + LogoTileCtn, + LogoTile, + LinkCtn, + ImageCtn, + ColorRow, + ColorTileCtn, + ColorTile, + Swatch, + ColorValues, + FontLink, +} from '/styles/pages/ecash-brand.js'; export default function EcashBrand() { + const logos = [ + { + type: 'logo-primary-horizontal', + variations: ['dark-text', 'black', 'white-text', 'white'], + row_name: 'Primary Horizontal', + }, + { + type: 'logo-primary-vertical', + variations: ['dark-text', 'black', 'white-text', 'white'], + row_name: 'Primary Vertical', + }, + { + type: 'logo-secondary-horizontal', + variations: ['dark-text', 'black', 'white-text', 'white'], + row_name: 'Secondary Horizontal', + }, + { + type: 'logo-secondary-vertical', + variations: ['dark-text', 'black', 'white-text', 'white'], + row_name: 'Secondary Vertical', + }, + { + type: 'square-icon', + variations: [ + 'blue-gradient', + 'blue', + 'white-blue-gradient', + 'white-blue', + ], + row_name: 'Square Icon', + }, + { + type: 'icon', + variations: ['blue-gradient', 'blue', 'black', 'white'], + row_name: 'Icon', + }, + { + type: 'circle-icon', + variations: ['blue-gradient', 'blue', 'black', 'white'], + row_name: 'Round Icon', + }, + ]; + + const lightbackgrounds = ['dark-text', 'black']; + + const primaryColors = [ + { + hex: '#001137', + rgb: 'R:0 G:17 B:55', + cmyk: 'C:100 M:68 Y:67 K:90', + }, + { + hex: '#273498', + rgb: 'R:39 G:52 B:152', + cmyk: 'C:100 M:94 Y:1 K:0', + }, + { + hex: '#0074C2', + rgb: 'R:0 G:116 B:194', + cmyk: 'C:86 M:51 Y:0 K:0', + }, + { + hex: '#00ABE7', + rgb: 'R:0 G:171 B:231', + cmyk: 'C:71 M:14 Y:0 K:0', + }, + ]; + + const secondaryColors = [ + { + hex: '#CD0BC3', + rgb: 'R:205 G:11 B:195', + cmyk: 'C:33 M:89 Y:0 K:0', + }, + { + hex: '#FF21D0', + rgb: 'R:255 G:33 B:208', + cmyk: 'C:14 M:84 Y:0 K:0', + }, + { + hex: '#231F20', + rgb: 'R:35 G:31 B:32', + cmyk: 'C:70 M:67 Y:64 K:74', + }, + { + hex: '#FFFFFF', + rgb: 'R:255 G:255 B:255', + cmyk: 'C:0 M:0 Y:0 K:0', + }, + ]; + return ( + + +

+

+ There are several variations of the logo: primary, + secondary, and icon. +

+ {logos.map(logo => ( + <> + {logo.row_name} + + {logo.variations.map(variation => ( + + + + eCash logo + + + + [PNG] + + + [SVG] + + + + + ))} + + + ))} + + + +

+

PRIMARY COLORS

+

+ The primary colors are the major identity color which + will be most use in different situation. They are to be + used across all communications and applications, + including as background colors and body copy. +

+ + {primaryColors.map(color => ( + + + + + {color.hex} + {color.rgb} + {color.cmyk} + + + + ))} + + +

SECONDARY COLORS

+

+ The secondary colors are used to support the primary + color, usually as either a subtle backdrop or to + immediately attract the eye. +

+ + {secondaryColors.map(color => ( + + + + + {color.hex} + {color.rgb} + {color.cmyk} + + + + ))} + + + + +

+

+ For logotype, subtitle and heading materials, the + primary font Montserrat should be used. For the logotype + please set the tracking to 50. +

+ + Montserrat + +

+ For paragraph and other text elements, the secondary + font Poppins should be used. +

+ + Poppins + +

+ For more information, please download the{' '} + + VISUAL IDENTITY GUIDELINE + + . Alternatively, you can reach out to{' '} + contact@e.cash{' '} + if you have any questions. +

+ ); diff --git a/web/e.cash/public/images/eCash-visual-identity-kit.pdf b/web/e.cash/public/images/eCash-visual-identity-kit.pdf new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ \ No newline at end of file diff --git a/web/e.cash/public/images/logos/ecash-circle-icon-blue-gradient.png b/web/e.cash/public/images/logos/ecash-circle-icon-blue-gradient.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ \ No newline at end of file diff --git a/web/e.cash/public/images/logos/ecash-circle-icon-blue.png b/web/e.cash/public/images/logos/ecash-circle-icon-blue.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ \ No newline at end of file diff --git a/web/e.cash/public/images/logos/ecash-circle-icon-white.png b/web/e.cash/public/images/logos/ecash-circle-icon-white.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ \ No newline at end of file diff --git a/web/e.cash/public/images/logos/ecash-icon-black.png b/web/e.cash/public/images/logos/ecash-icon-black.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ \ No newline at end of file diff --git a/web/e.cash/public/images/logos/ecash-icon-blue-gradient.png b/web/e.cash/public/images/logos/ecash-icon-blue-gradient.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ \ No newline at end of file diff --git a/web/e.cash/public/images/logos/ecash-icon-blue.png b/web/e.cash/public/images/logos/ecash-icon-blue.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ \ No newline at end of file diff --git a/web/e.cash/public/images/logos/ecash-icon-white.png b/web/e.cash/public/images/logos/ecash-icon-white.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ \ No newline at end of file diff --git a/web/e.cash/public/images/logos/ecash-logo-primary-horizontal-black.png b/web/e.cash/public/images/logos/ecash-logo-primary-horizontal-black.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ + + + + + + + + + + diff --git a/web/e.cash/public/images/logos/ecash-logo-primary-horizontal-dark-text.png b/web/e.cash/public/images/logos/ecash-logo-primary-horizontal-dark-text.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ + + + + + + + + + + + + + + + diff --git a/web/e.cash/public/images/logos/ecash-logo-primary-horizontal-white-text.png b/web/e.cash/public/images/logos/ecash-logo-primary-horizontal-white-text.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ + + + + + + + + + + + + + + + diff --git a/web/e.cash/public/images/logos/ecash-logo-primary-horizontal-white.png b/web/e.cash/public/images/logos/ecash-logo-primary-horizontal-white.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ + + + + + + + + + + diff --git a/web/e.cash/public/images/logos/ecash-logo-primary-vertical-black.png b/web/e.cash/public/images/logos/ecash-logo-primary-vertical-black.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ + + + + + + + + + + diff --git a/web/e.cash/public/images/logos/ecash-logo-primary-vertical-dark-text.png b/web/e.cash/public/images/logos/ecash-logo-primary-vertical-dark-text.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ + + + + + + + + + + + + + + + diff --git a/web/e.cash/public/images/logos/ecash-logo-primary-vertical-white-text.png b/web/e.cash/public/images/logos/ecash-logo-primary-vertical-white-text.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ + + + + + + + + + + + + + + + diff --git a/web/e.cash/public/images/logos/ecash-logo-primary-vertical-white.png b/web/e.cash/public/images/logos/ecash-logo-primary-vertical-white.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ + + + + + + + + + + diff --git a/web/e.cash/public/images/logos/ecash-logo-secondary-horizontal-black.png b/web/e.cash/public/images/logos/ecash-logo-secondary-horizontal-black.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ + + + + + + + + + + diff --git a/web/e.cash/public/images/logos/ecash-logo-secondary-horizontal-dark-text.png b/web/e.cash/public/images/logos/ecash-logo-secondary-horizontal-dark-text.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ + + + + + + + + + + + + + + + diff --git a/web/e.cash/public/images/logos/ecash-logo-secondary-horizontal-white-text.png b/web/e.cash/public/images/logos/ecash-logo-secondary-horizontal-white-text.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ + + + + + + + + + + + + + + + diff --git a/web/e.cash/public/images/logos/ecash-logo-secondary-horizontal-white.png b/web/e.cash/public/images/logos/ecash-logo-secondary-horizontal-white.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ + + + + + + + + + + diff --git a/web/e.cash/public/images/logos/ecash-logo-secondary-vertical-black.png b/web/e.cash/public/images/logos/ecash-logo-secondary-vertical-black.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ + + + + + + + + + + diff --git a/web/e.cash/public/images/logos/ecash-logo-secondary-vertical-dark-text.png b/web/e.cash/public/images/logos/ecash-logo-secondary-vertical-dark-text.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ + + + + + + + + + + + + + + + diff --git a/web/e.cash/public/images/logos/ecash-logo-secondary-vertical-white-text.png b/web/e.cash/public/images/logos/ecash-logo-secondary-vertical-white-text.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ \ No newline at end of file diff --git a/web/e.cash/public/images/logos/ecash-logo-secondary-vertical-white.png b/web/e.cash/public/images/logos/ecash-logo-secondary-vertical-white.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ + + + + + + + + + + diff --git a/web/e.cash/public/images/logos/ecash-square-icon-blue-gradient.png b/web/e.cash/public/images/logos/ecash-square-icon-blue-gradient.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ \ No newline at end of file diff --git a/web/e.cash/public/images/logos/ecash-square-icon-blue.png b/web/e.cash/public/images/logos/ecash-square-icon-blue.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ \ No newline at end of file diff --git a/web/e.cash/public/images/logos/ecash-square-icon-white-blue-gradient.png b/web/e.cash/public/images/logos/ecash-square-icon-white-blue-gradient.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ \ No newline at end of file diff --git a/web/e.cash/public/images/logos/ecash-square-icon-white-blue.png b/web/e.cash/public/images/logos/ecash-square-icon-white-blue.png new file mode 100755 index 0000000000000000000000000000000000000000..0000000000000000000000000000000000000000 GIT binary patch literal 0 Hc$@ \ No newline at end of file diff --git a/web/e.cash/styles/pages/ecash-brand.js b/web/e.cash/styles/pages/ecash-brand.js --- a/web/e.cash/styles/pages/ecash-brand.js +++ b/web/e.cash/styles/pages/ecash-brand.js @@ -1,4 +1,5 @@ import styled from 'styled-components'; +import Link from 'next/link'; export const TextBlock = styled.div` width: 100%; @@ -9,3 +10,136 @@ margin-bottom: 90px; } `; + +export const LogoRow = styled.div` + width: 100%; + display: flex; + box-sizing: border-box; + flex-wrap: wrap; +`; + +export const RowName = styled.div` + font-size: 18px; + padding-left: 5px; + margin-top: 10px; + opacity: 0.8; +`; + +export const LogoTileCtn = styled.div` + padding: 5px; + width: 25%; + position: relative; + ${props => props.theme.breakpoint.medium} { + width: 50%; + } +`; + +export const LogoTile = styled.div` + background-color: ${props => + props.lightbackground + ? props.theme.colors.contrast + : props.theme.colors.black}; + padding: 30px 10px; + width: 100%; + position: relative; + cursor: pointer; +`; + +export const ImageCtn = styled.div` + position: relative; + height: 110px; + + img { + object-fit: contain; + } +`; + +export const LinkCtn = styled.div` + position: absolute; + top: 0; + left: 0; + width: 100%; + background-color: rgba(0, 0, 0, 0.9); + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: all ease-in-out 200ms; + a { + font-size: 16px; + font-weight: 600; + } + a:last-child { + color: ${props => props.theme.colors.accentDark}; + } + a:last-child:hover { + color: ${props => props.theme.colors.accent}; + } + :hover { + opacity: 1; + } +`; + +export const ColorRow = styled.div` + width: 100%; + display: flex; + flex-wrap: wrap; + margin-bottom: 50px; +`; + +export const ColorTileCtn = styled.div` + padding: 5px; + width: 25%; + position: relative; + ${props => props.theme.breakpoint.medium} { + width: 50%; + } +`; + +export const ColorTile = styled.div` + width: 100%; + position: relative; + border: 1px solid ${props => props.theme.colors.contrast}; +`; + +export const Swatch = styled.div` + background-color: ${props => props.color}; + width: 100%; + height: 120px; +`; + +export const ColorValues = styled.div` + background-color: ${props => props.theme.colors.colorSwatchBackground}; + width: 100%; + padding: 15px; + display: flex; + flex-direction: column; + ${props => props.theme.breakpoint.medium} { + padding: 10px; + } + + span { + font-size: 14px; + + ${props => props.theme.breakpoint.medium} { + font-size: 12px; + } + } +`; + +export const FontLink = styled(Link)` + font-size: 60px; + font-family: ${props => (props.montserrat ? 'Montserrat' : 'Poppins')}; + color: ${props => + props.montserrat + ? props.theme.colors.primary + : props.theme.colors.accent}; + font-weight: 600; + margin-bottom: 30px; + display: block; + + ${props => props.theme.breakpoint.medium} { + font-size: 45px; + } +`; diff --git a/web/e.cash/styles/theme.js b/web/e.cash/styles/theme.js --- a/web/e.cash/styles/theme.js +++ b/web/e.cash/styles/theme.js @@ -3,6 +3,7 @@ primary: '#0074c2', primaryLight: '#00abe7', accent: '#ff21d0', + accentDark: '#CD0BC3', darkBackground: '#050d27', contrast: '#ffffff', black: '#000', @@ -13,6 +14,7 @@ coretechBackground: 'rgba(0, 17, 55, 0.2)', coretechShadow1: 'rgba(0, 0, 0, 0.63)', coretechShadow2: 'rgba(0, 171, 231, 0.86)', + colorSwatchBackground: 'rgba(255,255,255, 0.2)', }, roadmap: { sectionHeader: '#00abe7', @@ -41,6 +43,7 @@ primary: '#7f7f7f', primaryLight: '#a0a0a0', accent: '#8a8a8a', + accentDark: '#797878', darkBackground: '#232324', contrast: '#ffffff', black: '#000', @@ -51,6 +54,7 @@ coretechBackground: 'rgba(0, 0, 0, 0.5)', coretechShadow1: 'rgba(0, 0, 0, 0.63)', coretechShadow2: 'rgba(255, 255, 255, 0.86)', + colorSwatchBackground: 'rgba(255,255,255, 0.2)', }, roadmap: { sectionHeader: '#ffffff',