diff --git a/.github/.markdownlint.json b/.github/.markdownlint.json index bfbd6e0..7bbeaf3 100644 --- a/.github/.markdownlint.json +++ b/.github/.markdownlint.json @@ -16,15 +16,7 @@ "MD031": false, "MD032": false, "MD033": { - "allowed_elements": [ - "a", - "kbd", - "dl", - "dt", - "dd", - "sub", - "sup" - ] + "allowed_elements": ["a", "kbd", "dl", "dt", "dd", "sub", "sup"] }, "MD034": false, "MD035": { diff --git a/.github/PULL_REQUEST_TEMPLATE/pr-template.md b/.github/PULL_REQUEST_TEMPLATE/pr-template.md index 2b0aa1a..c6b8f9d 100644 --- a/.github/PULL_REQUEST_TEMPLATE/pr-template.md +++ b/.github/PULL_REQUEST_TEMPLATE/pr-template.md @@ -1,4 +1,5 @@ + ## Abstract diff --git a/babel.config.js b/babel.config.js index e00595d..bfd75db 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,3 +1,3 @@ module.exports = { - presets: [require.resolve('@docusaurus/core/lib/babel/preset')], + presets: [require.resolve("@docusaurus/core/lib/babel/preset")], }; diff --git a/blog/authors.yml b/blog/authors.yml index 8b13789..e69de29 100644 --- a/blog/authors.yml +++ b/blog/authors.yml @@ -1 +0,0 @@ - diff --git a/blog/core-blockchain-web4.md b/blog/core-blockchain-web4.md index 12e6c1f..f58448f 100644 --- a/blog/core-blockchain-web4.md +++ b/blog/core-blockchain-web4.md @@ -1,6 +1,7 @@ --- title: Core Blockchain Outruns Competition, Bringing Web 4.0 and DeFi 2.0 via CoDeTech author: CCnews24 + date: 2022-08-24 lang: en-US categories: @@ -12,6 +13,7 @@ tags: - defi2 image: /img/blog/core-blockchain-web4-core-blockchain-defi.png --- + ![Core Blockchain Web 4.0](/img/blog/core-blockchain-web4-core-blockchain-defi.png "Core Blockchain Web 4.0") > The recently released Core Blockchain represents the next step in this area of tech. diff --git a/blog/core-nodes.md b/blog/core-nodes.md index 8b577ba..1483d18 100644 --- a/blog/core-nodes.md +++ b/blog/core-nodes.md @@ -13,6 +13,7 @@ tags: - guide image: /img/blog/nodes-and-their-role.png --- + ![Nodes and Their Role](/img/blog/core-nodes-nodes-and-their-role.png "Nodes and Their Role") In the dynamic realm of distributed ledger technology, nodes are the silent architects shaping the decentralized landscape of a blockchain. Understanding the intricacies of these nodes is not merely a technical nuance but a key to clarifying the very essence of blockchain's sustainability, resilience and transparency. @@ -61,7 +62,7 @@ For a better mining experience, we recommend connecting your computational facil A mining pool is a special 3rd party software similar to a supercomputer that is installed on a set of servers, a mining pool is connected to the special upstream node which creates a block that should be mined, receives the resulting nonce from the pool, and seals this block. -On the flip side, the pool welcomes connections from miners using the stratum protocol and distributes the computational workload among them. Pools handle accounting for the hashrate and individual miner efforts, ensuring proper rewards are assigned and paid out regularly, in the case of Catch That Rabbit every 4 hours. +On the flip side, the pool welcomes connections from miners using the stratum protocol and distributes the computational workload among them. Pools handle accounting for the hashrate and individual miner efforts, ensuring proper rewards are assigned and paid out regularly, in the case of Catch That Rabbit every 4 hours. > Nodes, pools, and client interactions @@ -87,11 +88,11 @@ On the flip side, the pool welcomes connections from miners using the stratum pr ### Tips, Linux Command -- You can use screen Linux command to run Go-core client in the background. +- You can use screen Linux command to run Go-core client in the background. - You can setup system service to run Go-core as a daemon on Ubuntu. - Go-core client has command line options compatible with the command line options of Geth Ethereum client. - Console commands and features are compatible with Geth software with one exception: `eth` namespace was changed to `xcb`. For example, to check the balance you could use the `xcb.getBalance` command instead of `eth.getBalance` in Geth. -Reference for using [the interactive console](https://geth.ethereum.org/docs/interacting-with-geth/javascript-console). + Reference for using [the interactive console](https://geth.ethereum.org/docs/interacting-with-geth/javascript-console). ## Collectively as a Community diff --git a/blog/denomination-units.md b/blog/denomination-units.md index 1ca4f98..fa19700 100644 --- a/blog/denomination-units.md +++ b/blog/denomination-units.md @@ -12,6 +12,7 @@ tags: - units image: /img/blog/denomination-units.png --- + ![Denomination Units](/img/blog/denomination-units.png "Denomination Units") Anyone who ever held money in their hands will know that dollars break into cents, pounds break into pennies, and yens break into sens. However, did you know, that cryptocurrencies break into smaller units, too? And usually, it is several of them. @@ -36,23 +37,23 @@ The units that follow each represent a further shift in three decimal places. Th You can find further details, such as aliases, symbols, or values in the following chart: -| Name | Alias | Unit | Symbol | SI | Value | -|---|---|---|---|---|---| -| Ore | Ore | ø | 🔷 | ["atto","a"] | 1E+00 | -| Wav | Fecore | | 〰️ | ["femto","f"] | 1E+03 | -| Grav | Picore | | ➰ | ["pico","p"] | 1E+06 | -| Nucle | Nacore | ꞥ | ✴️ | ["nano","n"] | 1E+09 | -| Atom | μcore | | ⚛️ | ["micro","μ"] | 1E+12 | -| Moli | Micore | ₥ | ❇️ | ["mili","m"] | 1E+15 | -| Core | Core | ₡ | 🟢️️ | | 1E+18 | -| Aer | Kicore | ₳ | 🌀️ | ["kilo","k"] | 1E+21 | -| Orb | Mecore | | ☄️ | ["mega","M"] | 1E+24 | -| Plano | Gicore | Ᵽ | 🪐️ | ["giga","G"] | 1E+27 | -| Tera | Tecore | | 🌐️ | ["tera","T"] | 1E+30 | -| Sola | Precore | | 💫️ | ["peta","P"] | 1E+33 | -| Galx | Excore | Ǥ | ✨️ | ["exa","E"] | 1E+36 | -| Cluster | Zecore | | 💠️ | ["zetta","Z"] | 1E+39 | -| Supermatter | Yocore | ₷ | 🔱 | ["yotta","Y"] | 1E+42 | +| Name | Alias | Unit | Symbol | SI | Value | +| ----------- | ------- | ---- | ------ | ------------- | ----- | +| Ore | Ore | ø | 🔷 | ["atto","a"] | 1E+00 | +| Wav | Fecore | | 〰️ | ["femto","f"] | 1E+03 | +| Grav | Picore | | ➰ | ["pico","p"] | 1E+06 | +| Nucle | Nacore | ꞥ | ✴️ | ["nano","n"] | 1E+09 | +| Atom | μcore | | ⚛️ | ["micro","μ"] | 1E+12 | +| Moli | Micore | ₥ | ❇️ | ["mili","m"] | 1E+15 | +| Core | Core | ₡ | 🟢️️ | | 1E+18 | +| Aer | Kicore | ₳ | 🌀️ | ["kilo","k"] | 1E+21 | +| Orb | Mecore | | ☄️ | ["mega","M"] | 1E+24 | +| Plano | Gicore | Ᵽ | 🪐️ | ["giga","G"] | 1E+27 | +| Tera | Tecore | | 🌐️ | ["tera","T"] | 1E+30 | +| Sola | Precore | | 💫️ | ["peta","P"] | 1E+33 | +| Galx | Excore | Ǥ | ✨️ | ["exa","E"] | 1E+36 | +| Cluster | Zecore | | 💠️ | ["zetta","Z"] | 1E+39 | +| Supermatter | Yocore | ₷ | 🔱 | ["yotta","Y"] | 1E+42 | ## Further Economic Description of XCB’s Subunits diff --git a/blog/genesis-allocation-dao.md b/blog/genesis-allocation-dao.md index 1b6e00c..c7152c8 100644 --- a/blog/genesis-allocation-dao.md +++ b/blog/genesis-allocation-dao.md @@ -14,6 +14,7 @@ tags: - dao image: /img/blog/charting-the-future.png --- + ![Charting the Future](/img/blog/charting-the-future.png "Charting the Future") In the spirit of transparency pivotal for any blockchain technology, it is of utmost importance to be familiar with the genesis block and where the assets sprouting from it are allocated. @@ -39,8 +40,8 @@ In summary, the genesis block is not only a technical starting point for a block The genesis allocation of Core Blockchain was minted on 6.5.2022 at 10:34 UTC. The assets originating from this allocation have been distributed to the following wallets in the following quantities: - [cb062b0d7e13b47c40350d2bb77940084737deaab755](https://blockindex.net/address/cb062b0d7e13b47c40350d2bb77940084737deaab755) - 108,000,000 XCB -- [cb9485e8523dffd750102cd03c228768e30028d8f503](https://blockindex.net/address/cb9485e8523dffd750102cd03c228768e30028d8f503) - 69,000,000 XCB -- [cb357d2b2a6c1d6f4169f3b618f953ea9e2371a9d8b2](https://blockindex.net/address/cb357d2b2a6c1d6f4169f3b618f953ea9e2371a9d8b2) - 30,000,000 XCB +- [cb9485e8523dffd750102cd03c228768e30028d8f503](https://blockindex.net/address/cb9485e8523dffd750102cd03c228768e30028d8f503) - 69,000,000 XCB +- [cb357d2b2a6c1d6f4169f3b618f953ea9e2371a9d8b2](https://blockindex.net/address/cb357d2b2a6c1d6f4169f3b618f953ea9e2371a9d8b2) - 30,000,000 XCB - [cb89e8496e3aab9b4dee805c92c5db86053780c013eb](https://blockindex.net/address/cb89e8496e3aab9b4dee805c92c5db86053780c013eb) - 30,000,000 XCB - [cb9516eb8a65b760d9d626ebdc33c222fe6b5e8b70e0](https://blockindex.net/address/cb9516eb8a65b760d9d626ebdc33c222fe6b5e8b70e0) - 30,000,000 XCB - [cb555aa34251ab3437359b0ca65fdd55f6758558aca1](https://blockindex.net/address/cb555aa34251ab3437359b0ca65fdd55f6758558aca1) - 27,000,000 XCB diff --git a/blog/mainnet-is-live.md b/blog/mainnet-is-live.md index 5293bcc..aeacdd0 100644 --- a/blog/mainnet-is-live.md +++ b/blog/mainnet-is-live.md @@ -11,10 +11,11 @@ tags: - mainnet image: /img/blog/mainnet-is-live.png --- + ![Mainnet is Live](/img/blog/mainnet-is-live.png "Mainnet is Live") > It always seems impossible until it's done. -— Nelson Mandela +> — Nelson Mandela The year is 2014, the world realizes that combating climate change is inevitable, Scotland votes to stay in the UK, the first-ever probe lands on a comet, Vitalik Buterin announces Ethereum at the Bitcoin conference in Miami, and a trio of visionaries meets for the first time to conceptualize what would ultimately become the biggest breakthrough in the field of decentralized technology. @@ -144,7 +145,7 @@ That is why we have created a reward system for those who discover a bug. The re We calculate rewards according to the OWASP risk rating model based on Impact and Likelihood. | **Impact** | **Severity** | **Severity** | **Severity** | -|--------------|-----------------|-----------------|-----------------| +| ------------ | --------------- | --------------- | --------------- | | **High** | Moderate //S3// | High //S4// | Critical //S5// | | **Moderate** | Low //S2// | Moderate //S3// | High //S4// | | **Low** | Note //S1// | Low //S2// | Moderate //S3// | diff --git a/blog/mining.md b/blog/mining.md index f04ce63..7a275e3 100644 --- a/blog/mining.md +++ b/blog/mining.md @@ -13,6 +13,7 @@ tags: - computing image: /img/blog/mining-mining-core-coin.png --- + ![Mining Tutorial](/img/blog/mining-mining-core-coin.png "Mining Tutorial") If you have decided to participate in the Core Blockchain Network by mining Core Coins (XCB), but don’t exactly know how to start, you have come to the right place. In this article, we will teach you how to download and adjust the mining software. diff --git a/blog/xcb-hodler.md b/blog/xcb-hodler.md index 9be9948..dc7597d 100644 --- a/blog/xcb-hodler.md +++ b/blog/xcb-hodler.md @@ -12,6 +12,7 @@ tags: - hodler image: /img/blog/xcb-hodler.png --- + ![XCB HODLER App](/img/blog/xcb-hodler.png "XCB HODLER App") Read through the ABCs of the XCB HODLER app and what differentiates it from other crypto wallets. @@ -21,15 +22,15 @@ When engaging with our application, designed as an interface for importing Core 1. Decentralized Operation & No Data Storage on Our Servers - What it means: Our app operates without relying on a centralized system, meaning we neither store nor track your data on any platform – be it our servers or external databases. It's as if every user has their own individual, impenetrable room. + What it means: Our app operates without relying on a centralized system, meaning we neither store nor track your data on any platform – be it our servers or external databases. It's as if every user has their own individual, impenetrable room. 1. Code Obfuscation - What it means: Any attempts to replicate or counterfeit our app would hit a wall due to our "scrambled" code. It's akin to trying to reverse-engineer a gourmet dish without knowing any of its secret ingredients. + What it means: Any attempts to replicate or counterfeit our app would hit a wall due to our "scrambled" code. It's akin to trying to reverse-engineer a gourmet dish without knowing any of its secret ingredients. 1. Download Source Checks - What it means: We make sure that the app that you are using was published by us and not by mean actors. + What it means: We make sure that the app that you are using was published by us and not by mean actors. 1. Safety Measures Against Unwanted Access - What it means: Our app is akin to a top-tier security facility. Intruders trying to infiltrate the app's inner workings or using questionable devices are promptly denied access. Imagine a bank vault that demands stringent authentication. + What it means: Our app is akin to a top-tier security facility. Intruders trying to infiltrate the app's inner workings or using questionable devices are promptly denied access. Imagine a bank vault that demands stringent authentication. 1. Data Encryption & Secure Storage - What it means: Information stored on your device undergoes encryption and is secured using the most advanced storage mechanisms. We utilize device-centric securities like KeyChain for iPhones and KeyStore for Android. It's like entrusting a prized possession to the world's most secure vault. + What it means: Information stored on your device undergoes encryption and is secured using the most advanced storage mechanisms. We utilize device-centric securities like KeyChain for iPhones and KeyStore for Android. It's like entrusting a prized possession to the world's most secure vault. ## The App’s Essential Role diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 4fa1aea..fbbe43a 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -1,6 +1,6 @@ -import {themes as prismThemes} from 'prism-react-renderer'; -import type {Config} from '@docusaurus/types'; -import type * as Preset from '@docusaurus/preset-classic'; +import { themes as prismThemes } from "prism-react-renderer"; +import type { Config } from "@docusaurus/types"; +import type * as Preset from "@docusaurus/preset-classic"; import fediverseUser from "remark-fediverse-user"; import remarkCorepass from "remark-corepass"; @@ -9,114 +9,118 @@ import math from "remark-math"; import katex from "rehype-katex"; const config: Config = { - title: process.env.title || 'Blog', - tagline: process.env.tagline || 'A New Sense of Integrity', - favicon: '/img/favicon.png', + title: process.env.title || "Blog", + tagline: process.env.tagline || "A New Sense of Integrity", + favicon: "/img/favicon.png", - url: process.env.url || 'https://blog.coreblockchain.net', - baseUrl: '/', + url: process.env.url || "https://blog.coreblockchain.net", + baseUrl: "/", customFields: { - ican: 'cb57bbbb54cdf60fa666fd741be78f794d4608d67109', + ican: "cb57bbbb54cdf60fa666fd741be78f794d4608d67109", }, - organizationName: process.env.org || 'Core Foundation', - projectName: 'corebc-blog', + organizationName: process.env.org || "Core Foundation", + projectName: "corebc-blog", - onBrokenLinks: 'throw', - onBrokenMarkdownLinks: 'warn', + onBrokenLinks: "throw", + onBrokenMarkdownLinks: "warn", i18n: { - defaultLocale: 'en-US', - locales: ['en-US', 'de-DE', 'ja-JP', 'es-ES', 'pt-BR', 'zh-CN', 'sk-SK'], + defaultLocale: "en-US", + locales: ["en-US", "de-DE", "ja-JP", "es-ES", "pt-BR", "zh-CN", "sk-SK"], localeConfigs: { - 'en-US': { - label: 'English (US)', + "en-US": { + label: "English (US)", }, - 'de-DE': { - label: 'Deutsch', + "de-DE": { + label: "Deutsch", }, - 'ja-JP': { - label: '日本語', + "ja-JP": { + label: "日本語", }, - 'es-ES': { - label: 'Español', + "es-ES": { + label: "Español", }, - 'pt-BR': { - label: 'Português (Brasil)', + "pt-BR": { + label: "Português (Brasil)", }, - 'zh-CN': { - label: '简体中文', + "zh-CN": { + label: "简体中文", }, - 'sk-SK': { - label: 'Slovenčina', + "sk-SK": { + label: "Slovenčina", }, }, }, presets: [ [ - 'classic', + "classic", { docs: false, + + blog: { showReadingTime: true, - editUrl: - 'https://github.com/core-coin/core-blog/tree/master/', - path: 'blog', - routeBasePath: '/', + editUrl: "https://github.com/core-coin/core-blog/tree/master/", + path: "blog", + routeBasePath: "/", blogSidebarCount: 0, - blogTitle: 'Blog news', + blogTitle: "Blog news", postsPerPage: 10, feedOptions: { - type: 'all', - copyright: `${process.env.org || 'Core Foundation'} ⛬ Copyright and related rights waived via CC0`, + type: "all", + copyright: `${process.env.org || "Core Foundation"} ⛬ Copyright and related rights waived via CC0`, createFeedItems: async (params) => { - const {blogPosts, defaultCreateFeedItems, ...rest} = params; + const { blogPosts, defaultCreateFeedItems, ...rest } = params; return defaultCreateFeedItems({ blogPosts: blogPosts.filter((item, index) => index < 10), ...rest, }); }, }, - remarkPlugins: [ - math, - fediverseUser, - remarkCorepass, - remarkCorebc, - ], + remarkPlugins: [math, fediverseUser, remarkCorepass, remarkCorebc], rehypePlugins: [ [ katex, { - output: 'mathml', - strict: 'newLineInDisplayMode', + output: "mathml", + strict: "newLineInDisplayMode", }, ], ], }, theme: { - customCss: './src/css/custom.css', + customCss: "./src/css/custom.css", }, } satisfies Preset.Options, ], + ], themeConfig: { - image: 'img/social-card.png', + image: "img/social-card.png", metadata: [ - { name: 'description', content: 'A New Sense of Integrity' }, - { property: 'og:title', content: 'Core Blog' }, - { property: 'og:description', content: 'A New Sense of Integrity' }, - { property: 'og:type', content: 'website' }, + { name: "description", content: "A New Sense of Integrity" }, + { property: "og:title", content: "Core Blog" }, + { property: "og:description", content: "A New Sense of Integrity" }, + { property: "og:type", content: "website" }, { name: "keywords", - content: "core, blog, corecoin, core blockchain, core coin, core foundation, core foundation", + content: + "core, blog, corecoin, core blockchain, core coin, core foundation, core foundation", + }, + { + property: "ican:xcb", + content: "cb57bbbb54cdf60fa666fd741be78f794d4608d67109", + }, + { name: "theme-color", content: "#3b9a3e" }, + { name: "apple-mobile-web-app-capable", content: "yes" }, + { + name: "apple-mobile-web-app-status-bar-style", + content: "black-translucent", }, - { property: 'ican:xcb', content: 'cb57bbbb54cdf60fa666fd741be78f794d4608d67109' }, - { name: "theme-color", content: "#3b9a3e"}, - { name: "apple-mobile-web-app-capable", content: "yes"}, - { name: "apple-mobile-web-app-status-bar-style", content: "black-translucent"}, ], headTags: [ { @@ -134,138 +138,115 @@ const config: Config = { }, }, { - tagName: 'script', + tagName: "script", attributes: { - type: 'application/ld+json', + type: "application/ld+json", }, innerHTML: JSON.stringify({ - '@context': 'https://schema.org/', - '@type': 'Organization', - name: 'CORE FOUNDATION', - url: 'https://coreblockchain.net', - logo: 'https://blog.coreblockchain.net/img/logo.svg', + "@context": "https://schema.org/", + "@type": "Organization", + name: "CORE FOUNDATION", + url: "https://coreblockchain.net", + logo: "https://blog.coreblockchain.net/img/logo.svg", }), }, ], colorMode: { - defaultMode: 'light', + defaultMode: "light", disableSwitch: false, respectPrefersColorScheme: true, }, + navbar: { - title: 'Blog', + hideOnScroll: true, logo: { - alt: 'Blog', - src: 'img/logo.svg', + alt: 'NavbarLogo', + src: '/', + href: '/', + }, items: [ { - to: '/tags', - label: 'Tags', - position: 'left' + label: "About Corepass", + href: "https://docusaurus.io/docs/configuration", + className: "nav-items", + }, + { + label: "Features", + to: "/core-nodes", + className: "nav-items", }, { - to: '/archive', - label: 'Archive', - position: 'left' + label: "Business", + to: "/", + className: "nav-items", }, { - href: 'https://github.com/core-coin', - position: 'right', - className: 'header-github-link', - 'aria-label': 'GitHub repository', + label: "Ecosystem", + to: "/", + className: "nav-items", }, { - type: 'localeDropdown', - position: 'right', + label: "Blog", + to: "/", + className: "nav-items", + }, + { + label: "Contact", + to: "/", + className: "nav-items", }, ], }, footer: { - style: 'dark', + logo: { + alt: 'FooterLogo', + src: '/', + href: '/', + + }, links: [ { - title: 'Blog', - items: [ - { - label: 'Latest articles', - to: '/', - }, - { - label: 'Tags', - to: '/tags', - }, - { - label: 'Archive', - to: '/archive', - }, - ], + label: "About CorePass", + href: "https://docusaurus.io/docs/configuration", + className: "nav-items", }, + { - title: 'Ecosystem', - items: [ - { - label: 'Core Website', - href: 'https://coreblockchain.net', - }, - { - label: 'Core Blog', - href: 'https://blog.coreblockchain.net', - }, - { - label: 'Dev Portal', - href: 'https://dev.coreblockchain.net', - }, - { - label: 'Blockindex', - href: 'https://blockindex.net', - }, - { - label: 'Payto', - href: 'https://payto.money', - }, - ], + label: "Features", + to: "/core-nodes", + className: "nav-items", }, { - title: 'Community', - items: [ - { - label: 'Core ◆ Talk', - href: 'https://coretalk.space', - }, - { - label: 'GitHub', - href: 'https://github.com/core-coin', - }, - { - label: 'Discord', - href: 'https://discord.com/invite/SCxmFr5Pwp', - }, - { - label: 'Reddit', - href: 'https://www.reddit.com/r/CoreCoinCC', - }, - { - label: '𝕏', - href: 'https://x.com/corecoincc', - }, - ], + label: "Business", + to: "/", + className: "nav-items", + }, + { + label: "Ecosystem", + to: "/", + className: "nav-items", + }, + { + label: "Contact", + to: "/archive", + className: "nav-items", }, ], - copyright: `${process.env.org || 'Core Foundation'} ⛬ Copyright and related rights waived via CC0.`, }, + prism: { theme: prismThemes.github, darkTheme: prismThemes.dracula, }, algolia: { - appId: 'M0QDB2GLJF', - apiKey: '3f55dea7b27fe168448d76b9ec202f47', - indexName: 'coreblockchain', + appId: "M0QDB2GLJF", + apiKey: "3f55dea7b27fe168448d76b9ec202f47", + indexName: "coreblockchain", contextualSearch: true, - searchPagePath: 'search', + searchPagePath: "search", searchParameters: { - facetFilters: ['language:en'], + facetFilters: ["language:en"], }, }, } satisfies Preset.ThemeConfig, diff --git a/package.json b/package.json index d465b85..1bdb74f 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,10 @@ "dependencies": { "@docusaurus/core": "3.1.1", "@docusaurus/preset-classic": "3.1.1", + "@emotion/react": "^11.11.4", + "@emotion/styled": "^11.11.0", "@mdx-js/react": "^3.0.1", + "@mui/material": "^5.15.11", "clsx": "^2.1.0", "cryptocons": "^1.3.3", "prism-react-renderer": "^2.3.1", @@ -33,6 +36,7 @@ "@docusaurus/module-type-aliases": "^3.1.1", "@docusaurus/tsconfig": "^3.1.1", "@docusaurus/types": "^3.1.1", + "@types/react-dom": "^18.2.19", "typescript": "^5.3.3" }, "browserslist": { diff --git a/sidebars.ts b/sidebars.ts index acc7685..7dfdcb5 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -1,4 +1,4 @@ -import type {SidebarsConfig} from '@docusaurus/plugin-content-docs'; +import type { SidebarsConfig } from "@docusaurus/plugin-content-docs"; /** * Creating a sidebar enables you to: @@ -12,7 +12,7 @@ import type {SidebarsConfig} from '@docusaurus/plugin-content-docs'; */ const sidebars: SidebarsConfig = { // By default, Docusaurus generates a sidebar from the docs folder structure - tutorialSidebar: [{type: 'autogenerated', dirName: '.'}], + tutorialSidebar: [{ type: "autogenerated", dirName: "." }], // But you can create a sidebar manually /* diff --git a/src/assets/icons/Logo-footer.svg b/src/assets/icons/Logo-footer.svg new file mode 100644 index 0000000..3c86a41 --- /dev/null +++ b/src/assets/icons/Logo-footer.svg @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/Logo-header.svg b/src/assets/icons/Logo-header.svg new file mode 100644 index 0000000..baec813 --- /dev/null +++ b/src/assets/icons/Logo-header.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/appstore-badge.svg b/src/assets/icons/appstore-badge.svg new file mode 100644 index 0000000..66d7ed3 --- /dev/null +++ b/src/assets/icons/appstore-badge.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/center-blue-bullet.png b/src/assets/icons/center-blue-bullet.png new file mode 100644 index 0000000..bf51424 Binary files /dev/null and b/src/assets/icons/center-blue-bullet.png differ diff --git a/src/assets/icons/close-btn.svg b/src/assets/icons/close-btn.svg new file mode 100644 index 0000000..441f88d --- /dev/null +++ b/src/assets/icons/close-btn.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/corepass-logo-with-name.svg b/src/assets/icons/corepass-logo-with-name.svg new file mode 100644 index 0000000..c518a92 --- /dev/null +++ b/src/assets/icons/corepass-logo-with-name.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/donwload-double-cell.png b/src/assets/icons/donwload-double-cell.png new file mode 100644 index 0000000..0028cfb Binary files /dev/null and b/src/assets/icons/donwload-double-cell.png differ diff --git a/src/assets/icons/facebookIcon.svg b/src/assets/icons/facebookIcon.svg new file mode 100644 index 0000000..7ad4f99 --- /dev/null +++ b/src/assets/icons/facebookIcon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/icons/google-play-badge 1 .png b/src/assets/icons/google-play-badge 1 .png new file mode 100644 index 0000000..2428022 Binary files /dev/null and b/src/assets/icons/google-play-badge 1 .png differ diff --git a/src/assets/icons/hamburger-menu.svg b/src/assets/icons/hamburger-menu.svg new file mode 100644 index 0000000..2a09eec --- /dev/null +++ b/src/assets/icons/hamburger-menu.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/iconsInstagram.svg b/src/assets/icons/iconsInstagram.svg new file mode 100644 index 0000000..39bd3b0 --- /dev/null +++ b/src/assets/icons/iconsInstagram.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/iconsLinkedin.svg b/src/assets/icons/iconsLinkedin.svg new file mode 100644 index 0000000..5605273 --- /dev/null +++ b/src/assets/icons/iconsLinkedin.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/assets/icons/x-close.svg b/src/assets/icons/x-close.svg new file mode 100644 index 0000000..1a4873e --- /dev/null +++ b/src/assets/icons/x-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/xIcon.svg b/src/assets/icons/xIcon.svg new file mode 100644 index 0000000..2c8eb27 --- /dev/null +++ b/src/assets/icons/xIcon.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/icons/youtubeIcon.svg b/src/assets/icons/youtubeIcon.svg new file mode 100644 index 0000000..45aa7c2 --- /dev/null +++ b/src/assets/icons/youtubeIcon.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/button/apple-store/index.jsx b/src/components/button/apple-store/index.jsx new file mode 100644 index 0000000..d95e4f2 --- /dev/null +++ b/src/components/button/apple-store/index.jsx @@ -0,0 +1,24 @@ +import AppStoreIcon from "../../../assets/icons/appstore-badge.svg"; + +import { App_Store_Link } from "../../../constants"; +import { CustomCursorContext } from "../../../contexts/cursor"; +import { useContext } from "react"; +import { StyledAppStore } from "./styled-apple"; + +export const AppStoreButton = ({ ...props }) => { + const { setType } = useContext(CustomCursorContext); + + return ( + + { + setType("hover"); + }} + onMouseLeave={() => { + setType(""); + }} + {...props} + > + + ); +}; diff --git a/src/components/button/apple-store/styled-apple.js b/src/components/button/apple-store/styled-apple.js new file mode 100644 index 0000000..54e8832 --- /dev/null +++ b/src/components/button/apple-store/styled-apple.js @@ -0,0 +1,3 @@ +import { styled } from "@mui/material"; + +export const StyledAppStore = styled("img")``; diff --git a/src/components/button/base/index.js b/src/components/button/base/index.js new file mode 100644 index 0000000..1706850 --- /dev/null +++ b/src/components/button/base/index.js @@ -0,0 +1,15 @@ +import { ButtonStyled } from "./styled-base"; + +export const CBaseButton = ({ children, className, ...props }) => { + return ( + + {children} + + ); +}; diff --git a/src/components/button/base/styled-base.js b/src/components/button/base/styled-base.js new file mode 100644 index 0000000..0a6c412 --- /dev/null +++ b/src/components/button/base/styled-base.js @@ -0,0 +1,8 @@ +import { Button, styled } from "@mui/material"; + +export const ButtonStyled = styled(Button)(({ theme }) => ({ + padding: "16px 32px", + borderRadius: "100px", + boxShadow: "unset", + whiteSpace: "nowrap", +})); diff --git a/src/components/button/google-play/index.jsx b/src/components/button/google-play/index.jsx new file mode 100644 index 0000000..3f280b2 --- /dev/null +++ b/src/components/button/google-play/index.jsx @@ -0,0 +1,23 @@ +import GooglePlayIcon from "../../../assets/icons/google-play-badge 1 .png"; +import { StyledGooglePlay } from "./styled-google"; +import { Google_Play_Link } from "../../../constants"; +import { CustomCursorContext } from "../../../contexts/cursor"; +import { useContext } from "react"; +export const GooglePlayButton = ({ ...props }) => { + const { setType } = useContext(CustomCursorContext); + return ( + + { + setType("hover"); + }} + onMouseLeave={() => { + setType(""); + }} + {...props} + > + + ); +}; diff --git a/src/components/button/google-play/styled-google.js b/src/components/button/google-play/styled-google.js new file mode 100644 index 0000000..714be50 --- /dev/null +++ b/src/components/button/google-play/styled-google.js @@ -0,0 +1,6 @@ +import styled from "@emotion/styled"; + +export const StyledGooglePlay = styled("img")` + width: 138px; + height: 58.05px; +`; diff --git a/src/components/button/gradient/index.js b/src/components/button/gradient/index.js new file mode 100644 index 0000000..104c749 --- /dev/null +++ b/src/components/button/gradient/index.js @@ -0,0 +1,9 @@ +import { GradientButtonStyled } from "./styled-gradient"; + +export const CGradientButton = ({ children, width, ...props }) => { + return ( + + {children} + + ); +}; diff --git a/src/components/button/gradient/styled-gradient.js b/src/components/button/gradient/styled-gradient.js new file mode 100644 index 0000000..4b73927 --- /dev/null +++ b/src/components/button/gradient/styled-gradient.js @@ -0,0 +1,18 @@ +import { styled } from "@mui/material"; +import { CBaseButton } from "../base"; + +export const GradientButtonStyled = styled(CBaseButton)` + width: ${(props) => [props.width]}; + + background-color: transparent; + &:hover { + background-color: unset; + box-shadow: none; + cursor: unset; + } + &:active { + background-color: unset; + box-shadow: none; + cursor: unset; + } +`; diff --git a/src/components/drawer/drawer-styled.js b/src/components/drawer/drawer-styled.js new file mode 100644 index 0000000..63386c7 --- /dev/null +++ b/src/components/drawer/drawer-styled.js @@ -0,0 +1,63 @@ +import styled from "@emotion/styled"; +import { + COLUMN_ALIGN_CENTER__SPACE_B, + ROW_ALIGN_CENTER__SPACE_B, +} from "../../styles/global-styles"; +import { Drawer, css } from "@mui/material"; +import { TEXT_20 } from "../../styles/globalTypography"; + +export const TitleWrapper = styled("div")` + ${ROW_ALIGN_CENTER__SPACE_B} + padding: 24px 32px; + width: 100%; + min-width: 320px; +`; +export const StyledDrawer = styled(Drawer)` + ${COLUMN_ALIGN_CENTER__SPACE_B}; + & .MuiPaper-root { + align-items: center; + } +`; +export const NavigationStyled = styled("nav")` + ${COLUMN_ALIGN_CENTER__SPACE_B}; + flex: 1; + justify-content: space-around; + p { + ${(props) => + props.hoveredItem + ? css` + transition: opacity 0.3s; + opacity: 0.2; + ` + : css` + transition: opacity 0.3s; + opacity: 1; + `} + } + & .content-nav { + height: 100%; + display: flex; + flex-direction: column; + justify-content: space-between; + padding-top: 100px; + padding-bottom: 100px; + align-items: center; + max-height: 700px; + min-height: 500px; + gap: 56px; + } + & .nav-items { + ${TEXT_20} + color: var(--River-bed); + cursor: pointer; + :hover { + opacity: 1; + cursor: pointer; + } + } +`; +export const StyledSocialSection = styled("div")` + ${ROW_ALIGN_CENTER__SPACE_B}; + padding: 42px 0; + gap: 20px; +`; diff --git a/src/components/drawer/index.js b/src/components/drawer/index.js new file mode 100644 index 0000000..d8cf348 --- /dev/null +++ b/src/components/drawer/index.js @@ -0,0 +1,209 @@ +import { useContext, useState } from "react"; +import { + NavigationStyled, + StyledDrawer, + StyledSocialSection, + TitleWrapper, +} from "./drawer-styled"; +import LogoIcon from "../../assets/icons/Logo-header.svg"; +import CloseIcon from "../../assets/icons/x-close.svg"; +import LinkedinIcon from "../../assets/icons/iconsLinkedin.svg"; +import InstagramIcon from "../../assets/icons/iconsInstagram.svg"; +import XIcon from "../../assets/icons/xIcon.svg"; +import YoutubeIcon from "../../assets/icons/youtubeIcon.svg"; +import FacebookIcon from "../../assets/icons/facebookIcon.svg"; +import CTypography from "../typography"; +import { CustomCursorContext } from "../../contexts/cursor"; +import { + Facebook_Link, + Instagram_Link, + Linkedin_Link, + ROUTENAMES, + X_Link, + YouTube_Link, +} from "../../constants"; +import { useLocation, useNavigate } from "react-router-dom"; +import { Link } from "react-router-dom"; + +export const CustomDrawer = ({ + toggleDrawer, + setToggleDrawer, + sectionRef, + navigationItems, +}) => { + const [hoveredItem, setHoveredItem] = useState(null); + const { setType } = useContext(CustomCursorContext); + const { pathname } = useLocation(); + + const onCloseHandler = () => { + setToggleDrawer(false); + }; + + const logoClickHandler = () => { + setToggleDrawer(false); + // executeScroll({ name: "Hero" }); + }; + + const navigationItemsDisplay = navigationItems?.map?.((item, index) => { + return ( + { + setToggleDrawer(false); + // executeScroll({ name: name }); + }} + onMouseEnter={(e) => { + setHoveredItem(e.target.id); + setType("hover"); + }} + onMouseLeave={(e) => { + setHoveredItem(null); + setType(""); + }} + > + + {item.label} + + + ); + }); + + return ( + + + { + setType("hover"); + }} + onMouseLeave={() => { + setType(""); + }} + /> + { + setToggleDrawer(false); + }} + style={{ cursor: "pointer" }} + onMouseEnter={() => { + setType("hover"); + }} + onMouseLeave={() => { + setType(""); + }} + /> + + +
{navigationItemsDisplay}
+ + + {/* InstagramIcon { + setType("hover"); + }} + onMouseLeave={() => { + setType(""); + }} + /> + LinkedinIcon { + setType("hover"); + }} + onMouseLeave={() => { + setType(""); + }} + /> */} + +
{ + setType("hover"); + }} + onMouseLeave={() => { + setType(""); + }} + > + + + +
+
{ + setType("hover"); + }} + onMouseLeave={() => { + setType(""); + }} + > + + + +
+
{ + setType("hover"); + }} + onMouseLeave={() => { + setType(""); + }} + > + + + +
+
{ + setType("hover"); + }} + onMouseLeave={() => { + setType(""); + }} + > + + + +
+
{ + setType("hover"); + }} + onMouseLeave={() => { + setType(""); + }} + > + + + +
+ + + ); +}; diff --git a/src/components/icon/index.js b/src/components/icon/index.js new file mode 100644 index 0000000..49f0d1e --- /dev/null +++ b/src/components/icon/index.js @@ -0,0 +1,9 @@ +import { styled } from "@mui/material"; + +const CCIcon = styled("img")``; + +const Icon = ({ src, ...props }) => { + return ; +}; + +export default Icon; diff --git a/src/components/modal/index.js b/src/components/modal/index.js new file mode 100644 index 0000000..c50fbc2 --- /dev/null +++ b/src/components/modal/index.js @@ -0,0 +1,54 @@ +import React from "react"; +import { IconButton, Fade } from "@mui/material"; +import Icon from "../icon"; +import CloseIcon from "../../assets/icons/close-btn.svg"; +import { useWindowSize } from "@site/src/contexts/screen-size"; + +import { + StyledDialog, + Wrapper, + ChildWrapper, + TopWrapper, + Title, +} from "./styled-modal"; + +export const CModal = ({ isOpen, onClose, children, title, ...props }) => { + // detect if width is less than 768px + const windowWidth = useWindowSize(); + const isMobile = windowWidth < 992; + + return ( + (onClose ? onClose() : null)} + backdrop={{ + style: { + background: "rgba(0, 0, 0, 0.1)", + backdropFilter: "blur(20px)", + }, + }} + {...props} + > + + {title && onClose && ( + + {title ? {title} :
} + {onClose ? ( + onClose()}> + + + + + ) : ( + <> + )} + + )} + {children} + + + ); +}; diff --git a/src/components/modal/styled-modal.js b/src/components/modal/styled-modal.js new file mode 100644 index 0000000..0cfa7ee --- /dev/null +++ b/src/components/modal/styled-modal.js @@ -0,0 +1,57 @@ +import { Dialog, styled } from "@mui/material"; + +import { + DESKTOP_WIDTH, + ROW_ALIGN_CENTER__SPACE_B, +} from "../../styles/global-styles"; +import { H2_REGULAR } from "../..//styles/globalTypography"; +import { breakpoints } from "../../styles/media-queries"; + +export const StyledDialog = styled(Dialog)` + backdrop-filter: blur(15px); + @media (max-width: ${breakpoints.xxs}px) { + overflow-x: scroll; + } + .MuiDialog-paper { + border-radius: 12px !important ; + width: 100%; + max-width: unset; + z-index: 3; + padding: 0; + padding-top: 54px; + background: transparent; + box-shadow: none; + max-width: 1320px; + margin: 0; + position: static; + overflow-y: visible; + + @media (min-width: ${breakpoints.md}px) and (max-width: ${breakpoints.xxl}px) { + ${DESKTOP_WIDTH} + } + @media (max-width: ${breakpoints.md}px) { + padding: 0; + } + } +`; + +export const Wrapper = styled("div")` + border-radius: 20px; + width: 100%; + cursor: auto; +`; +export const ChildWrapper = styled("div")` + width: 100%; + + margin-left: auto; + margin-right: auto; +`; +export const TopWrapper = styled("div")` + ${ROW_ALIGN_CENTER__SPACE_B} + width: 100%; + margin-bottom: 40px; +`; +export const Title = styled("h1")` + ${H2_REGULAR} + color: var(--greyscale-800); +`; diff --git a/src/components/typography/index.js b/src/components/typography/index.js new file mode 100644 index 0000000..075c76a --- /dev/null +++ b/src/components/typography/index.js @@ -0,0 +1,34 @@ +import React from "react"; +import TypographyStyled from "./typography-styled"; + +const CTypography = ({ + size, + weight, + children, + variant, + className, + color, + id, + onMouseEnter, + onMouseLeave, + onClick, +}) => { + return ( + + {children} + + ); +}; + +export default CTypography; diff --git a/src/components/typography/typography-styled.js b/src/components/typography/typography-styled.js new file mode 100644 index 0000000..20f00b6 --- /dev/null +++ b/src/components/typography/typography-styled.js @@ -0,0 +1,54 @@ +// import PropTypes from "prop-types"; +import { Typography, styled } from "@mui/material"; + +const TypographyStyled = styled(Typography)( + ({ size, weight, theme, color }) => ({ + cursor: "default", + color: color, + ...(weight === "regular" && { fontWeight: "400" }), + ...(weight === "medium" && { fontWeight: "500" }), + ...(weight === "bold" && { fontWeight: "700" }), + + ...(size === "smaller" && { + fontSize: "10px", + lineHeight: "13px", + }), + ...(size === "small" && { + fontSize: "12px", + lineHeight: "15.6px", + }), + ...(size === "medium" && { + fontSize: "14px", + lineHeight: "18px", + }), + ...(size === "large" && { + fontSize: "16px", + lineHeight: "24px", + }), + ...(size === "larger" && { + fontSize: "18px", + lineHeight: "23px", + }), + ...(size === "largest" && { + fontSize: "20px", + lineHeight: "23px", + }), + + // ...(type === "header" && { + // ...(size === "small" && { + // fontSize: "20px", + // lineHeight: "26px", + // }), + // ...(size === "medium" && { + // fontSize: "28px", + // lineHeight: "36px", + // }), + // ...(size === "large" && { + // fontSize: "36px", + // lineHeight: "47px", + // }), + // }), + }), +); + +export default TypographyStyled; diff --git a/src/constants.js b/src/constants.js new file mode 100644 index 0000000..d90dd22 --- /dev/null +++ b/src/constants.js @@ -0,0 +1,21 @@ +export const X_Link = "https://x.com/CorePassCC"; +export const Facebook_Link = "https://www.facebook.com/CorePassCC"; +export const Linkedin_Link = "https://www.linkedin.com/company/corepass"; +export const Instagram_Link = "https://www.instagram.com/corepasscc/"; +export const YouTube_Link = "https://www.youtube.com/@CorePass"; +export const Google_Play_Link = + "https://play.google.com/store/apps/details?id=net.corepass.app"; +export const App_Store_Link = + "https://apps.apple.com/app/corepass-id/id1644928641"; +export const Privacy_Policy_Link = + "https://drive.google.com/file/d/189OJkNuDRoFo8LHzwhA_vXN1CtYaMMq-/view"; +export const Terms_Conditions_Link = + "https://drive.google.com/file/d/1_VFauLUhnQECQuGKjQoepE2ut5l-G_vK/view"; +export const Contact_Us_Link = "mailto:contact@corepass.net"; +export const Get_In_Touch_Link = "mailto:contact@corepass.net"; +export const Learn_More_Link = "https://docs.corepass.net/"; +export const ROUTENAMES = { + Privacy: "/privacy-policy", + RootPage: "/", + TermsConditions: "/terms-conditions", +}; diff --git a/src/contexts/cursor/index.js b/src/contexts/cursor/index.js new file mode 100644 index 0000000..7aa54a0 --- /dev/null +++ b/src/contexts/cursor/index.js @@ -0,0 +1,19 @@ +import { createContext } from "react"; +import React, { useState } from "react"; + +export const CustomCursorContext = createContext({ + type: "default", + setType: () => {}, +}); + +const CustomCursorManager = ({ children }) => { + const [type, setType] = useState("default"); + + return ( + + {children} + + ); +}; + +export default CustomCursorManager; diff --git a/src/contexts/modal/index.js b/src/contexts/modal/index.js new file mode 100644 index 0000000..36b7dad --- /dev/null +++ b/src/contexts/modal/index.js @@ -0,0 +1,24 @@ +import React, { useState } from "react"; +import { CModal } from "@site/src/components/modal"; +import { ModalContent } from "@site/src/modal-content"; + +let ModalContext; +let { Provider } = (ModalContext = React.createContext()); + +let ModalProvider = ({ children, isOpen, setIsOpen }) => { + return ( + + { + setIsOpen((prev) => !prev); + }} + > + + + {children} + + ); +}; + +export { ModalContext, ModalProvider }; diff --git a/src/contexts/screen-size/index.js b/src/contexts/screen-size/index.js new file mode 100644 index 0000000..8083b24 --- /dev/null +++ b/src/contexts/screen-size/index.js @@ -0,0 +1,36 @@ +import React, { createContext, useContext, useEffect, useState } from "react"; + +const WindowSizeContext = createContext(); + +export const useWindowSize = () => useContext(WindowSizeContext); + +const WindowSizeProvider = ({ children }) => { + const [windowHeight, setWindowHeight] = useState(window.innerHeight); + const [windowWidth, setWindowWidth] = useState(window.innerWidth); + + useEffect(() => { + const handleResize = () => { + setWindowWidth(window.innerWidth); + setWindowHeight(window.innerHeight); + }; + + window.addEventListener("resize", handleResize); + + return () => { + window.removeEventListener("resize", handleResize); + }; + }, []); + + const value = { + windowHeight, + windowWidth, + }; + + return ( + + {children} + + ); +}; + +export default WindowSizeProvider; diff --git a/src/css/custom.css b/src/css/custom.css index d1e5a48..bcf0418 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -1,4 +1,4 @@ -@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap'); +@import url("https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap"); /* You can override the default Infima variables here. */ :root { @@ -11,11 +11,21 @@ --ifm-color-primary-lightest: #3cad6e; --ifm-code-font-size: 90%; --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); - --ifm-font-family-base: "Red Hat Display", "Open Sans", Helvetica, Arial, sans-serif; + --ifm-font-family-base: "Red Hat Display", "Open Sans", Helvetica, Arial, + sans-serif; + --White: #fff; + --White-10: rgba(16, 102, 223, 0); + --River-bed: #4b5563; + --Grey: #686e84; + --Black: #000; + --Blue: #1066df; + --Light-blue: #10badf; + --Solitude: #ebeef4; + --Alice-Blue: #f5f7fa; } /* For readability concerns, you should choose a lighter palette in dark mode. */ -[data-theme='dark'] { +[data-theme="dark"] { --ifm-color-primary: #46b549; --ifm-color-primary-dark: #3fa342; --ifm-color-primary-darker: #3b9a3e; @@ -35,12 +45,18 @@ letter-spacing: 0.1em; } + + .footer { - background-color: #18181F; + color: "var(--River-bed)"; + size: "small"; + font-weight: "bold"; + background-color: "transparent"; } + a.header-github-link { - background-image: url('/img/github.svg'); + background-image: url("/img/github.svg"); background-repeat: no-repeat; background-size: contain; background-position: center; @@ -50,10 +66,81 @@ a.header-github-link { margin: 4px; } -html[data-theme='dark'] a.header-github-link { - background-image: url('/img/github-light.svg'); +html[data-theme="dark"] a.header-github-link { + background-image: url("/img/github-light.svg"); } a.header-github-link > svg { display: none; } + +.firstBlogPost { + display: flex; + margin-bottom: 20px; +} + +.secondBlogPost { + display: flex; + flex-direction: row-reverse; + margin-bottom: 20px; +} + +.markdown { + padding: 10px; + flex: 1 0 70%; +} + +.row .docusaurus-mt-lg { + display: flex; + flex-direction: column; + align-items: flex-start; + margin-top: 0; +} + +.col .text--right .col--3 { + padding: 10px 0; +} + +.text--right > a { + width: 100px; + display: block; +} + + + + +.navbar{ + display: block; +} + +.css-6eoo8r{ + padding: 0; +} + + + + + +@media (max-width: 800px){ +.col { + --ifm-col-width: 100%; + flex-basis: var(--ifm-col-width); + +} +} + +@media (max-width: 665px){ + .markdown { + flex: 2 1 100%; + } + + } + + @media (max-width: 500px){ + + #navbar { + padding: 15px 0; + } + } + + diff --git a/src/modal-content/index.js b/src/modal-content/index.js new file mode 100644 index 0000000..61145d1 --- /dev/null +++ b/src/modal-content/index.js @@ -0,0 +1,96 @@ +import CTypography from "../components/typography"; +import { ModalContentStyled } from "./modal-content-styled"; +import DownloadIcon from "../assets/icons/donwload-double-cell.png"; +import CloseButton from "../assets/icons/close-btn.svg"; +import CloseMobileButton from "../assets/icons/x-close.svg"; +import CorepassModalLogo from "../assets/icons/corepass-logo-with-name.svg"; +import { useContext } from "react"; +import { ModalContext } from "../contexts/modal"; +import { CGradientButton } from "../components/button/gradient"; +import { CustomCursorContext } from "../contexts/cursor"; +import { GooglePlayButton } from "../components/button/google-play"; +import { AppStoreButton } from "../components/button/apple-store"; + +export const ModalContent = () => { + let { setIsOpen } = useContext(ModalContext); + const { setType } = useContext(CustomCursorContext); + return ( + +
+
+ + { + setIsOpen(false); + }} + onMouseEnter={() => { + setType("hover"); + }} + onMouseLeave={() => { + setType(""); + }} + /> +
+
+ + + GET STARTED + + +
+ + Download now
+ for free, + available + + + available worldwide + +
+ +
+ + +
+
+
+ DownloadIcon +
+
+ { + setIsOpen(false); + }} + onMouseEnter={() => { + setType("hover"); + }} + onMouseLeave={() => { + setType(""); + }} + /> + + + ); +}; diff --git a/src/modal-content/modal-content-styled.js b/src/modal-content/modal-content-styled.js new file mode 100644 index 0000000..933d35d --- /dev/null +++ b/src/modal-content/modal-content-styled.js @@ -0,0 +1,242 @@ +import { styled } from "@mui/material"; +import { + COLUMN_ALIGN_START__JUSTIFY_START, + DESKTOP_WIDTH, + GradientFontStyle, + ROW_ALIGN_CENTER__SPACE_B, + ROW_ALIGN_START__SPACE_B, + ROW_CENTER, + ROW_JUSTIFY_START__ALIGN_CENTER, +} from "../styles/global-styles"; + +import { TEXT_11, TEXT_40, TEXT_56, TEXT_64 } from "../styles/globalTypography"; +import { breakpoints } from "../styles/media-queries"; + +export const ModalContentStyled = styled("section")` + background-color: var(--White); + border-radius: 16px; + min-width: 320px; + + @media (min-width: ${breakpoints.xxs}px) and (max-width: ${breakpoints.md}px) { + min-height: 100vh; + height: 100vh; + overflow: auto; + } + + @media (max-width: ${breakpoints.xxs}px) { + min-height: 100vh; + height: 100%; + border-radius: 0px; + } + + & .content { + ${ROW_ALIGN_START__SPACE_B} + min-width: 1170px; + padding-left: 122px; + padding-right: 28px; + @media (min-width: ${breakpoints.lg}px) and (max-width: ${breakpoints.xxxl}px) { + transform: scale(0.8); + transform-origin: top; + height: 578.4px; + justify-content: center; + min-width: unset; + padding-left: unset; + padding-right: unset; + } + @media (min-width: ${breakpoints.md}px) and (max-width: ${breakpoints.lg}px) { + min-width: 1296px; + transform: scale(0.6); + transform-origin: center 0; + height: 433.8px; + justify-content: center; + min-width: unset; + padding-left: unset; + padding-right: unset; + } + + @media (max-width: ${breakpoints.md}px) { + padding: 0; + width: 100%; + flex-direction: column; + justify-content: flex-start; + height: auto; + min-height: 100vh; + min-width: unset; + } + @media (max-width: ${breakpoints.xxs}px) { + width: 100%; + height: 100vh; + min-height: 915px; + flex-direction: column; + justify-content: flex-start; + overflow-y: clip; + } + @media (max-width: ${breakpoints.xxxs}px) { + min-height: 845px; + } + @media (max-width: ${breakpoints.xxxxs}px) { + min-height: 805px; + } + } + & .download-left-column { + ${COLUMN_ALIGN_START__JUSTIFY_START} + gap:56px; + min-width: 420px; + margin-top: 156px; + @media (max-width: ${breakpoints.md}px) { + align-items: center; + ${DESKTOP_WIDTH} + margin: 0px auto; + } + @media (max-width: ${breakpoints.xxs}px) { + margin-top: 50px; + margin-bottom: 33px; + align-items: center; + min-width: 320px; + } + } + & .modal-blue-button { + width: 163px; + height: 45px; + border-radius: 40px; + padding: 16px 32px; + justify-content: flex-start; + @media (min-width: ${breakpoints.md}px) { + padding-left: 0; + } + &:hover { + background: transparent; + box-shadow: none; + cursor: unset; + } + &::before { + display: none; + } + &:hover::before { + display: none; + } + } + & .modal-button-text { + min-width: 101px; + ${TEXT_11} + text-transform: uppercase; + } + & .download-right-column-container { + ${ROW_CENTER} + width: 100%; + } + & .download-right-column { + pointer-events: none; + margin-top: -54px; + @media (min-width: ${breakpoints.xxs}px) and (max-width: ${breakpoints.md}px) { + overflow: hidden; + width: 85%; + margin: auto; + margin-top: 47px; + } + @media (max-width: ${breakpoints.xxs}px) { + width: 100%; + margin: 0px; + overflow: clip; + } + } + & .download-white-title { + ${TEXT_56} + @media (min-width: ${breakpoints.xxs}px) and (max-width: ${breakpoints.md}px) { + ${TEXT_64} + text-align: center; + } + @media (max-width: ${breakpoints.xxs}px) { + ${TEXT_40} + text-align: center; + } + } + + & .modal-button-container { + ${ROW_JUSTIFY_START__ALIGN_CENTER} + gap: 16px; + width: 337px; + @media (max-width: ${breakpoints.md}px) { + gap: 8px; + width: 271px; + display: flex; + } + @media (max-width: ${breakpoints.xxs}px) { + flex-direction: column; + } + } + + & .scale-restore { + @media (min-width: ${breakpoints.lg}px) and (max-width: ${breakpoints.xxxl}px) { + transform: scale(1.25); + margin-left: 30px; + } + @media (min-width: ${breakpoints.md}px) and (max-width: ${breakpoints.lg}px) { + transform: scale(1.66); + margin-left: 95px; + } + } + + & .gradient-font { + ${GradientFontStyle} + } + & .close-button { + position: absolute; + top: 32px; + right: 48px; + cursor: pointer; + @media (max-width: ${breakpoints.md}px) { + display: none; + } + } + & .corepass-modal-logo { + position: absolute; + top: 32px; + left: 48px; + @media (max-width: ${breakpoints.md}px) { + display: none; + } + } + & .hide-for-tablet { + display: inline; + color: var(--Black); + @media (min-width: ${breakpoints.xxs}px) and (max-width: ${breakpoints.md}px) { + display: none; + } + } + & .show-for-tablet { + display: none; + @media (min-width: ${breakpoints.xxs}px) and (max-width: ${breakpoints.md}px) { + display: inline; + } + } + & .tablet-header { + ${ROW_ALIGN_CENTER__SPACE_B}; + padding: 32px 48px; + width: 100%; + display: none; + @media (max-width: ${breakpoints.md}px) { + display: flex; + } + @media (max-width: ${breakpoints.xxs}px) { + padding: 24px 32px; + } + } + & .close-button-tablet { + display: inline; + @media (max-width: ${breakpoints.xxs}px) { + display: none; + } + } + & .close-mobile-button { + @media (max-width: ${breakpoints.xxs}px) { + // display: inline; + } + } + & .show-for-mobile { + display: none; + @media (max-width: ${breakpoints.xxs}px) { + display: inline; + } + } +`; diff --git a/src/privacy-policy/data.js b/src/privacy-policy/data.js new file mode 100644 index 0000000..866e47c --- /dev/null +++ b/src/privacy-policy/data.js @@ -0,0 +1,265 @@ +export const Introduction = { + title: "Introduction", + body: `CorePass thanks you for taking the time to review our Privacy Policy. The CorePass ID Application ("Application" or "App") is a distinct, decentralized tool, offering users a digital conversion method, enabling them to retain verified digital identification entirely under their management.`, + body2: `We define CorePass both as the App and its company owner (“CorePass” or “we” or the “Company”).`, + body3: `This document concerns data subjects (“Data Subject” or “you”) whose personal information is accessed by us when you act as a user of our App.`, + body4: `This Privacy Policy is based on the Swiss Federal Act on Data Protection (Data Protection Act, “FADP”) of 25 September 2020 (Status as of 1 September 2023) as amended `, + body4Link: `https://www.fedlex.admin.ch/eli/cc/2022/491/en`, + body5: ` + CorePass is authorized to treat and process personal data pursuant to those laws and regulations and by the Swiss Federal Data Protection and Information Commissioner `, + body5Link: `https://www.edoeb.admin.ch/edoeb/en/home/deredoeb/kontakt.html`, + body6: `Furthermore, this Privacy Policy is also based on the General Data Protection Regulation (“GDPR”) as amended, `, + body6Link: `https://eur-lex.europa.eu/eli/reg/2016/679/oj`, + body7: `In this document, we shall refer to the above mentioned FADP and GDPR.`, +}; + +export const Definitions = { + title: "Definitions", + list: [ + { + title: "Personal Data and Data Subject", + body: `Under the FADP personal data is defined as “all information relating to an identified or identifiable individual”. Under the GDPR personal data is defined as “any information relating to an identified or identifiable natural person (“Data Subject”), by reference to an identifier such as a name, an identification number, location data, an online identifier or to one or more factors specific to the physical, physiological, genetic, mental, economic, cultural or social identity of that natural person”. + `, + }, + { + title: "Sensitive Personal Data", + body: `Personal Data worthy of special protection:`, + List: [ + `data concerning religious, philosophical, political, or labor unions,`, + `data concerning health, the intimate sphere, race or ethnicity,`, + `genetic data,`, + `biometric data that uniquely identify a natural person,`, + `data concerning administrative and criminal prosecutions and sanctions, `, + `data concerning social assistance measures.`, + ], + }, + { + title: "Data Controller", + body: `Under the FADP, a data controller is the private person or federal body that decides on the purpose and content of a data file. Under the GDPR, a data controller is the individual or legal person who controls and is responsible for keeping and using personal data in paper or electronic files.`, + }, + { + title: "Digital Asset", + body: `Refers to any cryptocurrency or digital commodity, such as Core, Bitcoin, or Ether, built on a cryptographic computer network protocol.`, + }, + { + title: "Data Storage", + body: `The methods employed to save, archive, retrieve, and protect digital information.`, + }, + { + title: "Data Encryption", + body: `A security method wherein data is encoded using a specific algorithm, rendering it unreadable without the appropriate decryption key. Encryption is used to protect sensitive data from unauthorized access, ensuring that even if the data is intercepted or accessed without permission, it remains unintelligible without the corresponding decryption process.`, + }, + { + title: "P2P Network", + body: `P2P Network (Peer-to-Peer Network) - A decentralized network architecture where individual nodes, referred to as "peers," directly connect with each other without the need for centralized intermediaries or servers. In a P2P network, each peer acts both as a client and a server, sharing and consuming resources directly with other peers.`, + }, + { + title: "Fingerprinting", + body: `A process wherein a unique representation (typically a hash value) of data is created and stored on the blockchain to verify its integrity and authenticity. This "fingerprint" is generated using cryptographic hashing algorithms, and because of the immutable nature of the blockchain, once the fingerprint is recorded, it serves as a permanent and tamper-proof reference. Comparing a newly generated fingerprint of the data with the one stored on the blockchain allows for validation of the data's integrity and ensures it hasn't been altered.`, + }, + { + title: "CoreID", + body: `A unique alphanumeric string of characters that represents an account on a blockchain network. It functions similarly to an ID number, allowing for the sending and receiving data on a P2P network and the holding of digital assets or tokens. While a CoreID address can act as an identifier for transactions, it does not inherently disclose the real-world identity of the person behind it.`, + }, + { + title: "Requester", + body: `An individual, organization, or system that requests data or information from the other party identified by CoreID on the P2P network.`, + }, + { + title: "Requestee", + body: `The individual, organization, or system from which data is being requested or sought using CoreID. The data requestee is the party that holds, controls, and manages the data that the data requester is seeking. The requestee has the authority to approve, deny, or modify the data request based on predefined criteria, regulations, or policies.`, + }, + { + title: "Data Processor", + body: `An individual, organization, or system that processes personal data on behalf of a Data Controller, based on the Controller's instructions.`, + }, + { + title: "Data Processing", + body: `The collection, manipulation, and analysis of data to achieve a specific purpose or output. It involves a series of operations that are performed on data, especially by a computer, to retrieve, transform, or classify information.`, + }, + { + title: "AML/CFT", + body: `Anti-Money Laundering / Combating the Financing of Terrorism legal rules and standards as envisaged in FATF recommendations, EU regulations, and national legislation.`, + }, + { + title: "Politically Exposed Persons (PEPs)", + body: `Individuals who are or have been entrusted with prominent public functions (e.g., heads of state or government, senior politicians, senior government, judicial or military officials, senior executives of state-owned corporations, important political party officials), as well as their relatives and close associates.`, + }, + { + title: "Blockchain", + body: `A decentralized and distributed digital ledger technology that records data across multiple computers in a way that ensures the data is secure, transparent, and immutable. Once information is added to the blockchain, it is nearly impossible to alter without altering all subsequent blocks and the consensus of the network.`, + }, + { + title: "Private Key", + body: `A confidential and cryptographic alphanumeric string that allows a user to access, decrypt, and manage the digital assets or data associated with its corresponding public key in an asymmetric encryption system.`, + }, + { + title: "Mnemonic Phrase", + body: `A confidential sequence of words, usually generated from a specified wordlist, used as a more human-readable representation of a cryptographic seed or key.`, + }, + { + title: "PIN code", + body: `PIN code is a security measure designed to protect sensitive information, accounts, or devices from unauthorized access.`, + }, + ], +}; + +export const LawfulProcessing = { + title: "Collection of Data", + body: `The lawful legal basis for the processing of your personal data is contemplated in Articles 30.3 and 31 of the FADP and Articles 7 and 9 of GDPR. `, + body2: + "At least one of these must apply whenever personal data is to be processed:", + list: [ + { + title: "Consent: ", + body: `you have given CorePass or its appointed Data Processors your free, specific, informed, or unambiguous consent for your personal data to be processed for a specific purpose.`, + }, + { + title: "Contract performance: ", + body: `the processing is necessary for the performance of a contract you have with CorePass Company or since you want to use the App services.`, + }, + { + title: "Compliance with legal obligation: ", + body: `the processing is necessary for CorePass Company to comply with the law in the jurisdictions where it operates (not including contractual obligations).`, + }, + { + title: "Public interest: ", + body: `the processing is necessary to perform a task that is in the public interest or for its official functions, and the task or function has a clear basis in law.`, + }, + { + title: "Legitimate interests: ", + body: `the processing is necessary for the CorePass Company's legitimate interests, or the legitimate interests of a third party, including CorePass users, unless there is a good reason to protect the individual’s personal data that overrides those legitimate interests.`, + }, + ], +}; + +export const DataRights = { + title: "Data Rights", + body: "Your Data Subject rights are listed below:", + list: [ + "right to be informed, as set out in Articles 19 and 28 of the FADP and in Articles 13 and 14 of the GDPR;", + "right of access, as set out in Article 25 of the FADP and Article 15 of the GDPR;", + "right to rectification, as set out in Article 32 of the FADP and Article 16 of the GDPR;", + "right to erasure or right to be forgotten, as set out in Article 32 of the FADP and Article 17 of the GDPR.", + ], + body2: + "Restrictions on Data Subject's rights are provided for by Articles 26, 29, 30.3, 31, and 32 of the FADP and Article 23 of the GDPR.", +}; + +export const Collection = { + title: "Collection of Data", + body: `Information that you made public or that you provide us or our Data Processors by completing forms in writing, email, or through our App. This includes information provided at the time of registering with us or when you connect with us via our e-mail.`, + body2: "We access the following classes of information:", + list: [ + "Name(s), surname(s), address(es), email, phone number(s), and other relevant (e.g. age group, subscriptions, CorePass, work, etc.) personal details,", + "financial information, proof of identity, proof of residence, proof of funds and source of funds, where they may be relevant in relation to contracts with CorePass or for AML/CFT checks pursuant to anti-money laundering and anti-terrorism regulations if we have to verify them.", + ], + body3: "If you contact us, we may keep a record of that correspondence.", + body4: + "There are several ways in which we collect your personal data directly from you:", + list2: [ + "that you provide to us or to our Data Processors;", + "that you have made public; and", + "that we automatically collect because of sharing with other parties such as AML/CFT databases if we need to do so.", + ], + body5: + "Please note that CorePass securely stores encrypted data exclusively on your device and will not transfer or stream it elsewhere without your clear consent. External parties may try to access your data via data requests. You can choose to accept, decline, or ignore each request.", + body6: + "Should you decline or ignore, no data will be shared. Each request also comes with an adjustable expiration time. CorePass, prioritizing your privacy, allows you to block specific requesters, ensuring their future requests are automatically dismissed.", +}; + +export const PersonalData = { + title: "How we use your personal data", + body: `We will process any of your personal data, in accordance with our obligations under the FADP and GDPR, for the following reasons:`, + list: [ + "to provide you with the services you have requested;", + "to comply with the FADP and GDPR or other regulations, for instance, AML/CFT;", + "for administrative purposes;", + "to assess inquiries, and", + "to provide you with information about us and our services. If, at any time, you do not wish to receive further information about us and our services, contact us.", + ], +}; + +export const DataDisclosure = { + title: "Data disclosure or communication", + body: `We will only disclose your personal data if we are obliged to do so to comply with our contractual, legal, or regulatory obligations, for business or administrative reasons, or because you have asked us to do so. This probably also includes disclosure:`, + list: [ + "within CorePass and its Company;", + "to third parties who process personal data on our behalf (IT system providers and other service providers);", + "to any government, regulatory agency, enforcement or exchange body, or court that so requires under applicable law or regulation.", + ], +}; + +export const DataProcessors = { + title: "Data Processors", + body: "To maintain the accuracy and timeliness of the application's information, CorePass extracts and verifies data. Certain tasks employ data processors. Below is a list of processors used:", + table: { + header: ["Name", "Function"], + rows: [ + { + name: "SumSub", + function: "Identity Verification Service", + }, + { + name: "Twilio", + function: "SMS and Calls Communications Platform", + }, + { + name: "Sendgrid", + function: "Email Delivery Service", + }, + ], + }, +}; + +export const DataTransfer = { + title: "Data transfer", + body: "We do not transfer your data unless you explicitly ask us to do so. In such a case, please read the privacy policy terms of the recipient. We assume no responsibility for the transfer of the data and the recipient's treatment of the data.", +}; + +export const DataProtection = { + title: "Data Protection on your device", + body: "CorePass employs cryptography, leveraging Core Blockchain technology, ED448 cryptography, and an additional PIN for enhanced security. Treat all sensitive information cautiously, ensuring you do not inadvertently disclose it. Remember, your Private key, Mnemonic phrase, and PIN are uniquely yours. Consider periodic encrypted backups, either on external storage or the cloud, to prevent potential data loss.", +}; + +export const DataRestoration = { + title: "Data Restoration", + body: "For account recovery, utilize your backup, mnemonic phrase, and PIN. We cannot access your data.", +}; + +export const DataSharing = { + title: "Data Sharing via P2P Network", + body: "We may disclose your personal information to third parties if we are under a duty to disclose or share your personal data to comply with any legal obligation, to enforce or apply any agreements and contracts, or to protect the rights, property, or safety of the organization, or other individuals. ", + body2: + "Via P2P Network: Requesters can seek your fingerprinted data through the CoreID of the requestee. Depending on data availability, a timeframe for the request may be sought. Each request's duration is strictly timed. The requestee will be notified of the data categories sought, with options to accept, decline, or ignore—and additionally, an option to block the requester.", +}; + +export const ProtectData = { + title: "Protecting your personal data", + body: "We do not store your data. We use data processors as indicated above that CorePass has instructed and with which data processing agreements have been implemented and that ensure and guarantee compliance with applicable privacy regulations and an adequate level of data protection. Please, review their data protection policies. ", +}; + +export const InformationSecurity = { + title: "Security of your information", + body: "To help protect the privacy of data and personally identifiable information you transmit through the use of our App, we maintain physical, technical, and administrative safeguards. We update and test our security technology on an ongoing basis.", +}; + +export const ManagingData = { + title: "Managing Your Personal Data", + body: `We employ various methods, including Data Processors, to verify the information. For any discrepancies or concerns, reach out to our support team at: support@corepass.net`, +}; + +export const PrivacyQueries = { + title: "Privacy queries and complaints", + body: `For questions regarding this Privacy Policy or data usage, email our Support Center: support@corepass.net + We will answer you within a maximum of one month, although we reserve the right to extend this period for more complex requests. We also reserve the right to charge a reasonable administration fee for any manifestly unfounded or excessive requests for access to personal data and for any additional copies of personal data requested. + Pursuant to the FADP, you may also contact the + https://www.edoeb.admin.ch/edoeb/it/home/deredoeb/kontakt/anzeigeformular_betroffene.html + Swiss Federal Data Protection and Information Commissioner, Feldeggweg 1 CH - 3003 Berne. + `, +}; + +export const PrivacyPolicyUpdates = { + title: "Privacy Policy Updates", + body: "This Privacy Policy may evolve. We reserve the right to vary this Privacy Policy periodically. Updates will be posted here and such variations become effective on posting on our App. Engaging with our Services indicates your acceptance of these terms. If you disagree with any part of this Privacy Policy, please, refrain from using our Services.", +}; diff --git a/src/privacy-policy/index.jsx b/src/privacy-policy/index.jsx new file mode 100644 index 0000000..64a2de1 --- /dev/null +++ b/src/privacy-policy/index.jsx @@ -0,0 +1,329 @@ +import { useContext, useLayoutEffect } from "react"; +import { + Definitions, + Introduction, + Collection, + DataProtection, + DataProcessors, + DataRestoration, + DataSharing, + PrivacyQueries, + ManagingData, + PrivacyPolicyUpdates, + LawfulProcessing, + DataRights, + PersonalData, + DataDisclosure, + DataTransfer, +} from "./data"; +import { + Divider, + ItemBodyBlack, + ItemBodyBlue, + ItemBodyGrey, + ItemBodyListOneCol, + ItemContainer, + ItemContainerWithSubHeader, + ItemTitle, + ItemTitlePrefix, + ItemsSubSection, + ListItem, + MainTitle, + StyledTable, + TableContainer, + TermsStyled, + TitleWrapper, +} from "./privacy-styled"; +import { useLocation } from "react-router-dom"; +import { CGradientButton } from "../components/button/gradient"; +import CTypography from "@site/src/components/typography"; +import { CustomCursorContext } from "@site/src/contexts/cursor"; + +export const PrivacyPolicy = () => { + const { pathname } = useLocation(); + const { setType } = useContext(CustomCursorContext); + useLayoutEffect(() => { + window.scrollTo({ top: 0, behavior: "smooth" }); + }, [pathname]); + return ( + + + + + Legal terms + + + + Privacy Policy + + Last Updated: 20.9.2023 + + + + 1. + {Introduction.title} + + {Introduction.body} + {Introduction.body2} + {Introduction.body3} + + {Introduction.body4} + { + setType("hover"); + }} + onMouseLeave={() => { + setType(""); + }} + > + {Introduction.body4Link} + + + + {Introduction.body5} + { + setType("hover"); + }} + onMouseLeave={() => { + setType(""); + }} + > + {Introduction.body5Link} + + + + {Introduction.body6} + { + setType("hover"); + }} + onMouseLeave={() => { + setType(""); + }} + > + {Introduction.body6Link} + + + {Introduction.body7} + + + + 2. + {Definitions.title} + + {Definitions.list?.map((item, index) => ( + + {item.title} + + {item.body} + {item?.List && ( + + {item?.List?.map((listItem, index) => ( + + {{listItem}} + + ))} + + )} + + ))} + + + + 3. + {LawfulProcessing.title} + + {LawfulProcessing.body} + {LawfulProcessing.body2} + + {LawfulProcessing.list?.map((item, index) => ( + + { + <> + {item.title} + {item.body} + + } + + ))} + + + + + 4. + {DataRights.title} + + {DataRights.body} + + {DataRights.list?.map((item, index) => ( + + {{item}} + + ))} + + {DataRights.body2} + + + + 5. + {Collection.title} + + {Collection.body} + {Collection.body2} + + {Collection.list?.map((item, index) => ( + + {{item}} + + ))} + + {Collection.body3} + {Collection.body4} + + {Collection.list?.map((item, index) => ( + + {{item}} + + ))} + + {Collection.body5} + {Collection.body6} + + + + 6. + {PersonalData.title} + + {PersonalData.body} + + {PersonalData.list?.map((item, index) => ( + + {{item}} + + ))} + + + + + 7. + {DataDisclosure.title} + + {DataDisclosure.body} + + {DataDisclosure.list?.map((item, index) => ( + + {{item}} + + ))} + + + + + 8. + {DataProcessors.title} + + {DataProcessors.body} + + + + + {DataProcessors.table.header.map((item, index) => ( + {item} + ))} + + + + {DataProcessors.table.rows.map((item, index) => ( + + + {item.name} + + + {item.function} + + + ))} + + + + + + + 9. + {DataTransfer.title} + + {DataTransfer.body} + + + + 10. + {DataProtection.title} + + {DataProtection.body} + + + + 11. + {DataRestoration.title} + + {DataRestoration.body} + + + + 12. + {DataProtection.title} + + {DataProtection.body} + + + + 13. + {DataRestoration.title} + + {DataRestoration.body} + + + + 14. + {DataSharing.title} + + {DataSharing.body} + + + + 15. + {ManagingData.title} + + {ManagingData.body} + + + + 16. + {PrivacyQueries.title} + + {PrivacyQueries.body} + + + + 17. + {PrivacyPolicyUpdates.title} + + {PrivacyPolicyUpdates.body} + + + ); +}; diff --git a/src/privacy-policy/privacy-styled.js b/src/privacy-policy/privacy-styled.js new file mode 100644 index 0000000..97e6c85 --- /dev/null +++ b/src/privacy-policy/privacy-styled.js @@ -0,0 +1,268 @@ +import { styled } from "@mui/material"; +import { + BULLET_TEXT_BODY, + COLUMN_ALIGN_START__JUSTIFY_START, + DESKTOP_WIDTH, + MOBILE_WIDTH, + ROW_JUSTIFY_START__ALIGN_CENTER, + TABLET_WIDTH, +} from "@site/src/styles/global-styles"; +import CTypography from "@site/src/components/typography"; +import { breakpoints } from "@site/src/styles/media-queries.js"; +import BulletIcon from "@site/src/assets/icons/center-blue-bullet.png"; +import { + TEXT_11, + TEXT_16_500, + TEXT_24_700, + TEXT_56, +} from "@site/src/styles/globalTypography"; + +export const TermsStyled = styled("section")` + ${COLUMN_ALIGN_START__JUSTIFY_START}; + padding: 80px 0 160px; + gap: 64px; + width: 100%; + margin: auto; + max-width: 1296px; + @media (min-width: ${breakpoints.sm}px) and (max-width: ${breakpoints.xxl}px) { + ${DESKTOP_WIDTH} + } + @media (max-width: ${breakpoints.sm}px) { + ${TABLET_WIDTH} + } + @media (max-width: ${breakpoints.xxs}px) { + ${MOBILE_WIDTH} + } +`; + +export const TitleWrapper = styled("div")` + ${COLUMN_ALIGN_START__JUSTIFY_START}; + gap: 16px; + + & .privacy-badge { + width: 163px; + height: 45px; + background: transparent; + border-radius: 40px; + padding: 16px 32px; + justify-content: flex-start; + margin-bottom: 16px; + padding-left: 0; + &:hover { + background: transparent; + box-shadow: none; + cursor: unset; + } + &::before { + display: none; + } + &:hover::before { + display: none; + } + } + + & .privacy-button-text { + min-width: 101px; + ${TEXT_11} + text-transform: uppercase; + } +`; + +export const MainTitle = styled(CTypography)` + ${TEXT_56} + font-weight: 700; + letter-spacing: -2.8px; +`; + +export const ItemContainer = styled("div")` + ${COLUMN_ALIGN_START__JUSTIFY_START}; + gap: 24px; + width: 100%; +`; +export const ItemTitle = styled("div")` + color: #000; + ${TEXT_24_700} + ${ROW_JUSTIFY_START__ALIGN_CENTER}; + gap: 16px; +`; +export const ItemTitlePrefix = styled("div")``; +export const ItemBodyGrey = styled("p")` + color: var(--Grey); + span { + color: var(--Black); + } + ${TEXT_16_500} +`; + +export const ItemBodyBlack = styled(ItemBodyGrey)` + color: var(--Black); +`; + +export const BodyWrapper = styled("div")``; + +export const ItemBodyList = styled("ul")` + list-style-type: lower-alpha; + list-style-position: outside; + display: grid; + grid-template-columns: repeat(2, 1fr); + /* grid-template-rows: repeat(7, auto); */ + grid-column-gap: 50px; + grid-row-gap: 16px; + // reduce the margin left of ItemBodyList 17px and listItem 16px + width: calc(100% - 33px); + margin-left: 17px; + .item1 { + grid-area: 1 / 1 / 2 / 2; + } + .item2 { + grid-area: 2 / 1 / 3 / 2; + } + .item3 { + grid-area: 3 / 1 / 4 / 2; + } + .item4 { + grid-area: 4 / 1 / 5 / 2; + } + .item5 { + grid-area: 5 / 1 / 6 / 2; + } + .item6 { + grid-area: 6 / 1 / 7 / 2; + } + .item7 { + grid-area: 7 / 1 / 8 / 2; + } + .item8 { + grid-area: 1 / 2 / 2 / 3; + } + .item9 { + grid-area: 2 / 2 / 3 / 3; + } + .item10 { + grid-area: 3 / 2 / 4 / 3; + } + .item11 { + grid-area: 4 / 2 / 5 / 3; + } + .item12 { + grid-area: 5 / 2 / 6 / 3; + } + .item13 { + grid-area: 6 / 2 / 7 / 3; + } + .item14 { + grid-area: 7 / 2 / 8 / 3; + } +`; + +export const ListItem = styled("li")` + /* display: list-item; */ + ${TEXT_16_500} + span { + position: relative; + left: 16px; + } + .grey-item-body { + color: var(--Grey); + /* color: #000; */ + } + &::marker { + color: var(--Blue); + } +`; + +export const ItemBodyBlackWithBullet = styled(ItemBodyBlack)` + &:before { + ${BULLET_TEXT_BODY} + background-image: url(${BulletIcon}); + } +`; + +export const NestedBodyList = styled("ul")` + list-style-type: lower-roman; + list-style-position: outside; + display: grid; + grid-template-rows: repeat(2, auto); + width: 100%; + margin-left: 17px; +`; + +export const ItemBodyListOneCol = styled(ItemBodyList)` + grid-template-columns: unset; +`; + +export const ItemsSubSection = styled("div")` + ${COLUMN_ALIGN_START__JUSTIFY_START}; + gap: 8px; + width: 100%; +`; + +export const StyledTable = styled("table")` + border-collapse: collapse; + table-layout: fixed; + width: 100%; + td { + padding: 18px 16px; + } + // add dividers + tr { + &:not(:last-of-type) { + border-bottom: 1px solid var(--Solitude); + } + } + // add header background + thead { + &:first-of-type { + background-color: var(--Blue); + } + } + + // header style + th { + padding: 16px; + text-align: left; + color: var(--White); + ${TEXT_16_500} + &:first-of-type { + border-radius: 4px 0 0 4px; + } + &:last-of-type { + border-radius: 0 4px 4px 0; + } + } + + // last row bottom padding + tbody { + tr { + &:last-of-type { + td { + padding-bottom: 8px; + } + } + } + } +`; + +export const TableContainer = styled("div")` + width: 100%; + border-radius: 8px; + background: #fff; + box-shadow: 0px 32px 48px 0px rgba(16, 30, 66, 0.05); + padding: 8px; +`; + +export const Divider = styled("div")` + width: 100%; + height: 1px; + background-color: var(--Solitude); +`; + +export const ItemBodyBlue = styled(ItemBodyGrey)` + font-size: 20px; + color: var(--Blue); + letter-spacing: -0.4px; +`; + +export const ItemContainerWithSubHeader = styled(ItemContainer)` + gap: 40px; +`; diff --git a/src/styles/global-styles.js b/src/styles/global-styles.js new file mode 100644 index 0000000..71ed319 --- /dev/null +++ b/src/styles/global-styles.js @@ -0,0 +1,182 @@ +import { css } from "@mui/material"; +export const ROW = css` + display: flex; + flex-direction: row; +`; +export const COLUMN = css` + display: flex; + flex-direction: column; +`; +const CENTER = css` + align-items: center; + justify-content: center; +`; +export const COLUMN_CENTER = css` + ${CENTER} + ${COLUMN} +`; +export const ROW_CENTER = css` + ${CENTER} + ${ROW} +`; +export const COLUMN_JUSTIFY_END__ALIGN_CENTER = css` + ${COLUMN} + justify-content: flex-end; + align-items: center; +`; +export const COLUMN_JUSTIFY_START__ALIGN_CENTER = css` + ${COLUMN} + justify-content: flex-start; + align-items: center; +`; +export const COLUMN_ALIGN_END__JUSTIFY_CENTER = css` + ${COLUMN} + justify-content: center; + align-items: flex-end; +`; +export const COLUMN_ALIGN_START__JUSTIFY_CENTER = css` + ${COLUMN} + justify-content: center; + align-items: flex-start; +`; +export const COLUMN_ALIGN_START__JUSTIFY_START = css` + ${COLUMN} + justify-content: flex-start; + align-items: flex-start; +`; +export const COLUMN_ALIGN_END__JUSTIFY_END = css` + ${COLUMN} + justify-content: flex-end; + align-items: flex-end; +`; +export const COLUMN_ALIGN_START__JUSTIFY_END = css` + ${COLUMN} + justify-content: flex-end; + align-items: flex-start; +`; +export const COLUMN_ALIGN_END__JUSTIFY_START = css` + ${COLUMN} + justify-content: flex-start; + align-items: flex-end; +`; +export const COLUMN_ALIGN_END__SPACE_B = css` + ${COLUMN} + justify-content:space-between; + align-items: flex-end; +`; +export const COLUMN_ALIGN_START__SPACE_B = css` + ${COLUMN} + justify-content:space-between; + align-items: flex-start; +`; +export const COLUMN_ALIGN_CENTER__SPACE_B = css` + ${COLUMN} + justify-content:space-between; + align-items: center; +`; + +// ROWS + +export const ROW_JUSTIFY_END__ALIGN_CENTER = css` + ${ROW} + justify-content: flex-end; + align-items: center; +`; +export const ROW_JUSTIFY_START__ALIGN_CENTER = css` + ${ROW} + justify-content: flex-start; + align-items: center; +`; +export const ROW_ALIGN_END__JUSTIFY_CENTER = css` + ${ROW} + justify-content: center; + align-items: flex-end; +`; +export const ROW_ALIGN_START__JUSTIFY_CENTER = css` + ${ROW} + justify-content: center; + align-items: flex-start; +`; +export const ROW_ALIGN_START__JUSTIFY_START = css` + ${ROW} + justify-content: flex-start; + align-items: flex-start; +`; +export const ROW_ALIGN_END__JUSTIFY_END = css` + ${ROW} + justify-content: flex-end; + align-items: flex-end; +`; +export const ROW_ALIGN_START__JUSTIFY_END = css` + ${ROW} + justify-content: flex-end; + align-items: flex-end; +`; +export const ROW_ALIGN_END__JUSTIFY_START = css` + ${ROW} + justify-content: flex-end; + align-items: flex-end; +`; +export const ROW_ALIGN_END__SPACE_B = css` + ${ROW} + justify-content:space-between; + align-items: flex-end; +`; +export const ROW_ALIGN_START__SPACE_B = css` + ${ROW} + justify-content:space-between; + align-items: flex-start; +`; +export const ROW_ALIGN_CENTER__SPACE_B = css` + ${ROW} + justify-content:space-between; + align-items: center; +`; + +export const GradientFontStyle = css` + background: -webkit-linear-gradient(0deg, var(--Blue), var(--Light-blue)); + background-clip: text; + -webkit-background-clip: text; + -webkit-text-fill-color: transparent; + clip-path: inset(1px); +`; + +export const STICKY_POSITION = css` + position: sticky; + position: -webkit-sticky; + position: -moz-sticky; + position: -ms-sticky; + position: -o-sticky; +`; + +export const BULLET_STYLE = css` + content: ""; + left: -48px; + position: absolute; + width: 22px; + height: 22px; + font-size: 20px; + background-size: contain; + padding: 6px; +`; + +export const BULLET_TEXT_BODY = css` + content: ""; + background-size: contain; + background-repeat: no-repeat; + background-position-y: 55%; + padding: 9px; + margin-right: 16px; +`; + +export const MOBILE_WIDTH = css` + width: 82.92%; +`; + +export const TABLET_WIDTH = css` + width: 87%; +`; + +export const DESKTOP_WIDTH = css` + width: 90%; +`; diff --git a/src/styles/globalTypography.js b/src/styles/globalTypography.js new file mode 100644 index 0000000..f55a42f --- /dev/null +++ b/src/styles/globalTypography.js @@ -0,0 +1,131 @@ +import { css } from "@mui/material"; + +const CommonTypographyStyle = css` + text-align: center; + letter-spacing: -0.01em; + font-style: normal; +`; + +//HeadLine H2 + +export const H2 = css` + ${CommonTypographyStyle} + font-size: 30px; + line-height: 38px; +`; + +export const H2_REGULAR = css` + ${H2} + font-weight: 400; +`; + +export const TEXT_11 = css` + font-size: 11px; + line-height: 13px; + letter-spacing: 0.2em; +`; + +export const TEXT_16_500 = css` + /* Body-sm */ + font-family: Inter; + font-size: 16px; + font-style: normal; + font-weight: 500; + line-height: 32px; + letter-spacing: -0.32px; +`; + +export const TEXT_16 = css` + font-size: 16px; + line-height: 24px; + letter-spacing: -0.02em; +`; + +// font size 16 and line height 24 text align center +export const TEXT_16_H24 = css` + font-size: 16px; + line-height: 24px; + text-align: center; + letter-spacing: -0.02em; +`; + +export const TEXT_18 = css` + font-size: 18px; + line-height: 32px; + letter-spacing: -0.02em; +`; + +export const TEXT_20 = css` + font-size: 20px; + line-height: 32px; + letter-spacing: -0.02em; +`; + +export const TEXT_20_500 = css` + ${TEXT_20} + font-style: normal; + font-weight: 500; +`; + +export const TEXT_24 = css` + font-size: 24px; + line-height: 36px; + text-align: center; + letter-spacing: -0.07em; +`; + +export const TEXT_24_700 = css` + font-family: Inter; + font-size: 24px; + font-style: normal; + font-weight: 700; + line-height: normal; + letter-spacing: -1.2px; +`; + +export const TEXT_32 = css` + font-size: 32px; + letter-spacing: -0.07em; +`; + +export const TEXT_36 = css` + font-size: 36px; + line-height: 36px; + letter-spacing: -0.05em; +`; + +export const TEXT_40 = css` + font-size: 40px; + line-height: 40px; + letter-spacing: -0.05em; +`; + +export const TEXT_48_CENTER = css` + font-size: 48px; + line-height: 56px; + text-align: center; + letter-spacing: -0.05em; +`; + +export const TEXT_50 = css` + font-size: 50px; + line-height: 50px; +`; + +export const TEXT_56 = css` + font-size: 56px; + line-height: 56px; + letter-spacing: -0.05em; +`; + +export const TEXT_64 = css` + font-size: 64px; + line-height: 72px; + letter-spacing: -0.05em; +`; + +export const TEXT_96 = css` + font-size: 96px; + line-height: 96px; + letter-spacing: -0.05em; +`; diff --git a/src/styles/media-queries.js b/src/styles/media-queries.js new file mode 100644 index 0000000..b6ccfe5 --- /dev/null +++ b/src/styles/media-queries.js @@ -0,0 +1,24 @@ +export const breakpoints = { + xxxxs: 350, + xxxs: 420, + xxs: 500, + xs: 600, + sm: 800, + md: 992, + m1024: 1024, + lg: 1151, + xl: 1400, + xxl: 1440, + xxxl: 1600, +}; + +export const mediaQueries = { + greaterThan: (key) => (style) => + `@media (min-width: ${breakpoints[key]}px) { ${style} }`, + + lessThan: (key) => (style) => + `@media (max-width: ${breakpoints[key]}px) { ${style} }`, + + between: (min, max) => (style) => + `@media (min-width: ${breakpoints[min]}px) and (max-width: ${breakpoints[max]}px) { ${style} }`, +}; diff --git a/src/theme/BlogPostItem/Container/index.js b/src/theme/BlogPostItem/Container/index.js new file mode 100644 index 0000000..cafdd2c --- /dev/null +++ b/src/theme/BlogPostItem/Container/index.js @@ -0,0 +1,18 @@ +import React from "react"; +import BlogPostItemContainer from "@theme/BlogPostItem/Container"; +import BlogPostItemHeader from "@theme/BlogPostItem/Header"; +import BlogPostItemContent from "@theme/BlogPostItem/Content"; +import BlogPostItemFooter from "@theme/BlogPostItem/Footer"; + +export default function ContainerWrapper(props) { + return ( + <> + {props.children} +
+ + + +
+ + ); +} diff --git a/src/theme/BlogPostItem/Content/index.js b/src/theme/BlogPostItem/Content/index.js new file mode 100644 index 0000000..569a493 --- /dev/null +++ b/src/theme/BlogPostItem/Content/index.js @@ -0,0 +1,10 @@ +import React from "react"; +import Content from "@theme-original/BlogPostItem/Content"; + +export default function ContentWrapper(props) { + return ( + <> + + + ); +} diff --git a/src/theme/BlogPostItem/Footer/index.js b/src/theme/BlogPostItem/Footer/index.js new file mode 100644 index 0000000..997d266 --- /dev/null +++ b/src/theme/BlogPostItem/Footer/index.js @@ -0,0 +1,10 @@ +import React from "react"; +import Footer from "@theme-original/BlogPostItem/Footer"; + +export default function FooterWrapper(props) { + return ( + <> +