diff --git a/docusaurus.config.js b/docusaurus.config.js index 6d9367e..1734efb 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -8,6 +8,7 @@ const darkCodeTheme = require('prism-react-renderer/themes/dracula'); /* eslint-enable @typescript-eslint/no-var-requires */ // directories +const NODE_MODULES_DIR = path.resolve(__dirname, 'node_modules'); const SOURCE_DIR = path.resolve(__dirname, 'src'); const STATIC_DIR = path.resolve(__dirname, 'static'); const STYLES_DIR = path.resolve(SOURCE_DIR, 'styles'); @@ -48,6 +49,16 @@ const config = { require.resolve(path.resolve(STYLES_DIR, 'global.scss')), require.resolve(path.resolve(STYLES_DIR, 'mixins.scss')), require.resolve(path.resolve(STYLES_DIR, 'navbar.scss')), + // vendor + require.resolve( + path.resolve( + NODE_MODULES_DIR, + 'react-responsive-carousel', + 'lib', + 'styles', + 'carousel.min.css' + ) + ), ], }, sitemap: { @@ -82,20 +93,29 @@ const config = { items: [ // right { - label: 'Features', + items: [ + { + label: 'Features', + to: '#features', + }, + { + label: 'Concepts', + to: '#concepts', + }, + ], + label: 'Overview', position: 'right', - to: '#features', }, { - label: 'Learn', + label: 'Blog', position: 'right', - sidebarId: 'tutorialSidebar', - type: 'docSidebar', + to: '/blog', }, { - label: 'Blog', + label: 'Docs', position: 'right', - to: '/blog', + sidebarId: 'tutorialSidebar', + type: 'docSidebar', }, ], title: TITLE, @@ -107,7 +127,7 @@ const config = { title: 'Learn More', items: [ { - label: 'Learn', + label: 'Docs', to: '/docs/intro', }, { diff --git a/package.json b/package.json index 2d69218..07bb67e 100644 --- a/package.json +++ b/package.json @@ -59,6 +59,7 @@ "husky": "^8.0.3", "lint-staged": "^13.1.2", "prettier": "^3.0.3", + "sass": "^1.69.4", "typescript": "^5.2.2" }, "dependencies": { @@ -70,6 +71,7 @@ "prism-react-renderer": "^1.3.5", "react": "^17.0.2", "react-dom": "^17.0.2", - "sass": "^1.69.4" + "react-icons": "^4.12.0", + "react-responsive-carousel": "^3.2.23" } } diff --git a/src/components/Carousel/Carousel.tsx b/src/components/Carousel/Carousel.tsx new file mode 100644 index 0000000..d6d51b0 --- /dev/null +++ b/src/components/Carousel/Carousel.tsx @@ -0,0 +1,95 @@ +import clsx from 'clsx'; +import React, { FC } from 'react'; +import { PiCaretLeftBold, PiCaretRightBold } from 'react-icons/pi'; +import { Carousel as ReactResponsiveCarousel } from 'react-responsive-carousel'; + +// components +import CarouselButton from './CarouselButton'; + +// styles +import styles from './index.module.scss'; + +// types +import { ICarouselItemProps } from './types'; + +interface IProps { + items: ICarouselItemProps[]; +} + +const Carousel: FC = ({ items }: IProps) => { + return ( + void, + hasNext: boolean, + label: string + ) => { + if (hasNext) { + return ( + + ); + } + + return null; + }} + renderArrowPrev={( + onClickHandler: () => void, + hasPrev: boolean, + label: string + ) => { + if (hasPrev) { + return ( + + ); + } + + return null; + }} + renderIndicator={(onClickHandler, isSelected, index) => { + const key: string = `carousel-indicator-item-${index}`; + + if (isSelected) { + return ( +
  • + ); + } + + return ( +
  • + ); + }} + showStatus={false} + useKeyboardArrows={true} + > + {items.map(({ children }) => children)} + + ); +}; + +export default Carousel; diff --git a/src/components/Carousel/CarouselButton.tsx b/src/components/Carousel/CarouselButton.tsx new file mode 100644 index 0000000..eaa8daf --- /dev/null +++ b/src/components/Carousel/CarouselButton.tsx @@ -0,0 +1,30 @@ +import clsx from 'clsx'; +import React, { FC } from 'react'; +import { IconType } from 'react-icons'; + +// styles +import styles from './index.module.scss'; + +interface IProps { + Icon: IconType; + isPrev: boolean; + label: string; + onClick: () => void; +} + +const CarouselButton: FC = ({ Icon, isPrev, onClick }: IProps) => { + return ( +
    + +
    + ); +}; + +export default CarouselButton; diff --git a/src/components/Carousel/index.module.scss b/src/components/Carousel/index.module.scss new file mode 100644 index 0000000..59c61e9 --- /dev/null +++ b/src/components/Carousel/index.module.scss @@ -0,0 +1,56 @@ +.button { + background: none; + border: none; + border-radius: 5px; + cursor: pointer; + margin: 0; + padding: 0; +} + +.container { + align-items: center; + bottom: 0; + display: flex; + position: absolute; + top: 0; + z-index: 1; + + &--next { + right: 0; + } + + &--previous { + left: 0; + } +} + +.icon { + fill: var(--kb-text-color); + height: 3rem; + transition: color var(--ifm-transition-fast) var(--ifm-transition-timing-default); + width: 3rem; + + &:hover { + fill: var(--ifm-color-primary) + } +} + +.indicator { + background: var(--ifm-color-primary); + display: inline-block; + filter: alpha(opacity=30); + opacity: 0.3; + //box-shadow: 1px 1px 2px rgba(255, 255, 255, 0.9); + border-radius: 50%; + width: 8px; + height: 8px; + cursor: pointer; + margin: 0 8px; + transition: opacity .25s ease-in; + + &--selected, + &:hover { + filter: alpha(opacity=100); + opacity: 1; + } +} diff --git a/src/components/Carousel/index.ts b/src/components/Carousel/index.ts new file mode 100644 index 0000000..76a7d01 --- /dev/null +++ b/src/components/Carousel/index.ts @@ -0,0 +1 @@ +export { default } from './Carousel'; diff --git a/src/components/Carousel/types/ICarouselItemProps.ts b/src/components/Carousel/types/ICarouselItemProps.ts new file mode 100644 index 0000000..02061c0 --- /dev/null +++ b/src/components/Carousel/types/ICarouselItemProps.ts @@ -0,0 +1,8 @@ +import { ReactElement } from 'react'; + +interface ICarouselItemProps { + children: ReactElement; + label?: string; +} + +export default ICarouselItemProps; diff --git a/src/components/Carousel/types/index.ts b/src/components/Carousel/types/index.ts new file mode 100644 index 0000000..205b6c1 --- /dev/null +++ b/src/components/Carousel/types/index.ts @@ -0,0 +1 @@ +export { default as ICarouselItemProps } from './ICarouselItemProps'; diff --git a/src/components/FeatureSection/Feature.tsx b/src/components/ConceptsSection/ConceptItem.tsx similarity index 75% rename from src/components/FeatureSection/Feature.tsx rename to src/components/ConceptsSection/ConceptItem.tsx index 410a603..a48dfb6 100644 --- a/src/components/FeatureSection/Feature.tsx +++ b/src/components/ConceptsSection/ConceptItem.tsx @@ -8,11 +8,15 @@ import Text from '@site/src/components/Text'; import styles from './styles.module.scss'; // types -import { IFeatureItem } from './types'; +import { IVisionItemProps } from './types'; -type IProps = IFeatureItem; +type IProps = IVisionItemProps; -const Feature: FC = ({ title, SvgComponent, description }: IProps) => { +const ConceptItem: FC = ({ + title, + SvgComponent, + description, +}: IProps) => { return (
    @@ -27,4 +31,4 @@ const Feature: FC = ({ title, SvgComponent, description }: IProps) => { ); }; -export default Feature; +export default ConceptItem; diff --git a/src/components/FeatureSection/FeatureSection.tsx b/src/components/ConceptsSection/ConceptsSection.tsx similarity index 54% rename from src/components/FeatureSection/FeatureSection.tsx rename to src/components/ConceptsSection/ConceptsSection.tsx index 2f90092..10fa214 100644 --- a/src/components/FeatureSection/FeatureSection.tsx +++ b/src/components/ConceptsSection/ConceptsSection.tsx @@ -1,25 +1,28 @@ import React, { FC } from 'react'; // components -import SectionTitle from '../SectionTitle'; -import Feature from './Feature'; +import Section from '@site/src/components/Section'; +import ConceptItem from './ConceptItem'; // images -import feature001Svg from '@site/static/images/feature_001.svg'; -import feature002Svg from '@site/static/images/feature_002.svg'; -import feature003Svg from '@site/static/images/feature_003.svg'; +import concept001Svg from '@site/static/images/concept_001.svg'; +import concept002Svg from '@site/static/images/concept_002.svg'; +import concept003Svg from '@site/static/images/concept_003.svg'; // styles import styles from './styles.module.scss'; // types -import { IFeatureItem } from './types'; +import { IDefaultSectionProps } from '@site/src/types'; +import { IVisionItemProps } from './types'; -const FeatureSection: FC = () => { - const features: IFeatureItem[] = [ +type IProps = IDefaultSectionProps; + +const ConceptsSection: FC = ({ variant }: IProps) => { + const items: IVisionItemProps[] = [ { title: 'Not Just For DeFi', - SvgComponent: feature001Svg, + SvgComponent: concept001Svg, description: ( <> Kibisis differs from most wallets by focusing on tokens as a utility, @@ -29,7 +32,7 @@ const FeatureSection: FC = () => { }, { title: 'AVM Compatible', - SvgComponent: feature002Svg, + SvgComponent: concept002Svg, description: ( <> Kibisis not only works with Algorand, but endeavours to encompass all @@ -39,7 +42,7 @@ const FeatureSection: FC = () => { }, { title: 'Browser Extension', - SvgComponent: feature003Svg, + SvgComponent: concept003Svg, description: ( <> Leveraging the security and convenience of browser extensions, Kibisis @@ -50,21 +53,19 @@ const FeatureSection: FC = () => { ]; return ( -
    - Features - +
    - {features.map(({ description, SvgComponent, title }, index) => ( - ( + ))}
    -
    +
    ); }; -export default FeatureSection; +export default ConceptsSection; diff --git a/src/components/ConceptsSection/index.ts b/src/components/ConceptsSection/index.ts new file mode 100644 index 0000000..89be340 --- /dev/null +++ b/src/components/ConceptsSection/index.ts @@ -0,0 +1,3 @@ +export { default } from './ConceptsSection'; +export { default as ConceptItem } from './ConceptItem'; +export * from './types'; diff --git a/src/components/FeatureSection/styles.module.scss b/src/components/ConceptsSection/styles.module.scss similarity index 76% rename from src/components/FeatureSection/styles.module.scss rename to src/components/ConceptsSection/styles.module.scss index 4f09f39..fe63002 100644 --- a/src/components/FeatureSection/styles.module.scss +++ b/src/components/ConceptsSection/styles.module.scss @@ -2,23 +2,14 @@ $max-width: 300px; -.container { - display: flex; - flex-direction: column; - padding: 5rem 1rem; - width: 100%; - @include tablet-and-up { - padding: 5rem; - } -} - .items-container { - align-items: flex-start; + align-items: center; display: flex; flex-direction: column; padding: 3rem 0; width: 100%; @include tablet-and-up { + align-items: flex-start; flex-direction: row; justify-content: center; } diff --git a/src/components/FeatureSection/types/IFeatureItem.ts b/src/components/ConceptsSection/types/IConceptItemProps.ts similarity index 72% rename from src/components/FeatureSection/types/IFeatureItem.ts rename to src/components/ConceptsSection/types/IConceptItemProps.ts index f2e5e40..9fa3f91 100644 --- a/src/components/FeatureSection/types/IFeatureItem.ts +++ b/src/components/ConceptsSection/types/IConceptItemProps.ts @@ -1,9 +1,9 @@ import { ComponentProps, ComponentType, ReactElement } from 'react'; -interface IFeatureItem { +interface IConceptItemProps { SvgComponent: ComponentType>; description: ReactElement; title: string; } -export default IFeatureItem; +export default IConceptItemProps; diff --git a/src/components/ConceptsSection/types/index.ts b/src/components/ConceptsSection/types/index.ts new file mode 100644 index 0000000..f4a2b15 --- /dev/null +++ b/src/components/ConceptsSection/types/index.ts @@ -0,0 +1 @@ +export { default as IVisionItemProps } from './IConceptItemProps'; diff --git a/src/components/FeatureSection/index.ts b/src/components/FeatureSection/index.ts deleted file mode 100644 index ef68bf2..0000000 --- a/src/components/FeatureSection/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { default } from './FeatureSection'; -export { default as Feature } from './Feature'; -export * from './types'; diff --git a/src/components/FeatureSection/types/index.ts b/src/components/FeatureSection/types/index.ts deleted file mode 100644 index 4ceebf4..0000000 --- a/src/components/FeatureSection/types/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as IFeatureItem } from './IFeatureItem'; diff --git a/src/components/FeaturesSection/FeatureItem.tsx b/src/components/FeaturesSection/FeatureItem.tsx new file mode 100644 index 0000000..57778d4 --- /dev/null +++ b/src/components/FeaturesSection/FeatureItem.tsx @@ -0,0 +1,44 @@ +import clsx from 'clsx'; +import React, { FC } from 'react'; + +// components +import Heading from '@site/src/components/Heading'; +import Text from '@site/src/components/Text'; +import ThemedImage from '@theme/ThemedImage'; + +// styles +import styles from './index.module.scss'; + +// types +import { IFeatureItemProps } from './types'; + +type IProps = IFeatureItemProps; + +const FeatureItem: FC = ({ + alt, + description, + imageSources, + title, +}: IProps) => { + return ( +
    + {/*title/description*/} +
    + {title} + + {description} +
    + + {/*image*/} +
    + +
    +
    + ); +}; + +export default FeatureItem; diff --git a/src/components/FeaturesSection/FeaturesSection.tsx b/src/components/FeaturesSection/FeaturesSection.tsx new file mode 100644 index 0000000..e3b2be1 --- /dev/null +++ b/src/components/FeaturesSection/FeaturesSection.tsx @@ -0,0 +1,73 @@ +import React, { FC } from 'react'; + +// components +import Carousel from '@site/src/components/Carousel'; +import Section from '@site/src/components/Section'; +import FeatureItem from './FeatureItem'; + +// styles +import styles from './index.module.scss'; + +// types +import { IDefaultSectionProps } from '@site/src/types'; +import { IFeatureItemProps } from './types'; + +type IProps = IDefaultSectionProps; + +const FeaturesSection: FC = ({ variant }: IProps) => { + const items: IFeatureItemProps[] = [ + { + alt: 'Home screen', + description: + 'Kibisis treats assets more as a utility rather than just a fungible currency.', + imageSources: { + dark: '/images/home_screen-dark.png', + light: '/images/home_screen-light.png', + }, + title: 'Assets Are Not Just Fungible Currency', + }, + { + alt: 'Asset transfer screen', + description: 'Seamlessly transfer any asset to another address.', + imageSources: { + dark: '/images/asset_transfer_screen-dark.png', + light: '/images/asset_transfer_screen-light.png', + }, + title: 'Asset Transfer', + }, + { + alt: 'Atomic transaction screen', + description: + 'With AVM chains allowing up to 16 transactions to be grouped as an atomic transfer, Kibisis can sign all or multiple transactions within the atomic group.', + imageSources: { + dark: '/images/atomic_transaction_screen-dark.png', + light: '/images/atomic_transaction_screen-light.png', + }, + title: 'Atomic Transactions', + }, + { + alt: 'Sign JWT screen', + description: `Kibisis allows you to sign arbitrary data, using your account's private key, but Kibisis can also recognise standardized formats, such as JWTs, which is presented into a more intuitive interface.`, + imageSources: { + dark: '/images/jwt_support_screen-dark.png', + light: '/images/jwt_support_screen-light.png', + }, + title: 'JWT (JSON Web Token) Support', + }, + ]; + + return ( +
    +
    + ({ + children: , + label: props.title, + }))} + /> +
    +
    + ); +}; + +export default FeaturesSection; diff --git a/src/components/FeaturesSection/index.module.scss b/src/components/FeaturesSection/index.module.scss new file mode 100644 index 0000000..b2276eb --- /dev/null +++ b/src/components/FeaturesSection/index.module.scss @@ -0,0 +1,53 @@ +@import "../../styles/mixins"; +@import "../../styles/variables"; + +$section-y-padding: 3rem; + +.carousel-container { + padding-top: $section-y-padding; + width: 100%; +} + +.image { + box-shadow: $screen-box-shadow; + max-width: 400px; +} + +.image-container { + display: flex; + justify-content: center; +} + +.item { + flex: 1; + padding-bottom: $section-y-padding * 2; + + @include tablet-and-up { + padding-bottom: 0; + } +} + +.item-container { + display: flex; + flex-direction: column; + padding: 0 1rem; + + @include tablet-and-up { + flex-direction: row; + padding: 0 3rem $section-y-padding * 2; + } + } + +.text-container { + align-items: center; + display: flex; + flex-direction: column; + text-align: center; + + @include tablet-and-up { + align-items: flex-start; + justify-content: center; + padding-right: 1rem; + text-align: left; + } +} diff --git a/src/components/FeaturesSection/index.ts b/src/components/FeaturesSection/index.ts new file mode 100644 index 0000000..9ff94aa --- /dev/null +++ b/src/components/FeaturesSection/index.ts @@ -0,0 +1 @@ +export { default } from './FeaturesSection'; diff --git a/src/components/FeaturesSection/types/IFeatureItemProps.ts b/src/components/FeaturesSection/types/IFeatureItemProps.ts new file mode 100644 index 0000000..07907f9 --- /dev/null +++ b/src/components/FeaturesSection/types/IFeatureItemProps.ts @@ -0,0 +1,11 @@ +// types +import { IThemedImageSources } from '@site/src/types'; + +interface IFeatureItemProps { + alt: string; + description: string; + imageSources: IThemedImageSources; + title: string; +} + +export default IFeatureItemProps; diff --git a/src/components/FeaturesSection/types/index.ts b/src/components/FeaturesSection/types/index.ts new file mode 100644 index 0000000..7ec814e --- /dev/null +++ b/src/components/FeaturesSection/types/index.ts @@ -0,0 +1 @@ +export { default as IFeatureItemProps } from './IFeatureItemProps'; diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx index 6e85ecc..587ce57 100644 --- a/src/components/Header/Header.tsx +++ b/src/components/Header/Header.tsx @@ -1,7 +1,9 @@ -import ThemedImage from '@theme/ThemedImage'; import clsx from 'clsx'; import React, { FC } from 'react'; +// components +import ThemedImage from '@theme/ThemedImage'; + // styles import styles from './index.module.scss'; @@ -25,8 +27,8 @@ const Header: FC = () => { alt="Wallet home screen" className={styles.image} sources={{ - dark: '/images/wallet_home_screen-dark.png', - light: '/images/wallet_home_screen-light.png', + dark: '/images/home_screen-dark.png', + light: '/images/home_screen-light.png', }} />
    diff --git a/src/components/Header/index.module.scss b/src/components/Header/index.module.scss index eec415f..fb4f4a1 100644 --- a/src/components/Header/index.module.scss +++ b/src/components/Header/index.module.scss @@ -1,5 +1,6 @@ @import "../../styles/functions"; @import "../../styles/mixins"; +@import "../../styles/variables"; .container { display: flex; @@ -8,7 +9,7 @@ } .image { - box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px; + box-shadow: $screen-box-shadow; @include tablet-and-up { max-height: 600px; } @@ -57,60 +58,3 @@ flex-direction: row; } } - -.header { - align-items: center; - background-color: #f4f4f4; - display: flex; - flex-direction: column; - height: calc(100vh - var(--ifm-navbar-height)); - padding: 0 2rem; - @include tablet-and-up { - background-image: url("/static/images/header_background.jpeg"); - background-size: cover; - flex-direction: row; - } - - &__container { - display: flex; - flex: 1; - padding: 2rem 0; - } - - &__image { - box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px; - @include tablet-and-up { - max-height: 600px; - } - } - - &__image-container { - align-items: center; - justify-content: center; - } - - &__text { - color: text-color("light"); - - &--title { - font-size: 2rem; - font-weight: 600; - @include tablet-and-up { - font-size: 4.5rem; - } - } - - &--subtitle { - font-size: 1rem; - @include tablet-and-up { - font-size: 1.5rem; - } - } - } - - &__text-container { - align-items: flex-start; - flex-direction: column; - justify-content: center; - } -} diff --git a/src/components/Main/index.module.scss b/src/components/Main/index.module.scss index deb5e5e..71ac3a1 100644 --- a/src/components/Main/index.module.scss +++ b/src/components/Main/index.module.scss @@ -1,3 +1,3 @@ .main { - background-color: var(--kb-background-color); + background-color: var(--kb-background-primary-color); } diff --git a/src/components/Section/Section.tsx b/src/components/Section/Section.tsx new file mode 100644 index 0000000..1bf25cd --- /dev/null +++ b/src/components/Section/Section.tsx @@ -0,0 +1,38 @@ +import clsx from 'clsx'; +import React, { FC, ReactElement } from 'react'; + +// components +import SectionTitle from '@site/src/components/SectionTitle'; + +// styles +import styles from './index.module.scss'; + +interface IProps { + children: ReactElement; + id: string; + title: string; + variant?: 'accent' | 'primary'; +} + +const Section: FC = ({ + children, + id, + title, + variant = 'primary', +}: IProps) => { + let containerClass: string = styles.container; + + if (variant === 'accent') { + containerClass = clsx(styles.container, styles['container--accent']); + } + + return ( +
    + {title} + + {children} +
    + ); +}; + +export default Section; diff --git a/src/components/Section/index.module.scss b/src/components/Section/index.module.scss new file mode 100644 index 0000000..f4db7b7 --- /dev/null +++ b/src/components/Section/index.module.scss @@ -0,0 +1,17 @@ +@import "../../styles/mixins"; + +.container { + background-color: var(--kb-background-primary-color); + display: flex; + flex-direction: column; + padding: 5rem 1rem; + width: 100%; + + @include tablet-and-up { + padding: 5rem; + } + + &--accent { + background-color: var(--kb-background-accent-color); + } +} diff --git a/src/components/Section/index.ts b/src/components/Section/index.ts new file mode 100644 index 0000000..9bd61c3 --- /dev/null +++ b/src/components/Section/index.ts @@ -0,0 +1 @@ +export { default } from './Section'; diff --git a/src/components/SectionTitle/SectionTitle.tsx b/src/components/SectionTitle/SectionTitle.tsx index 4b7108f..a92053a 100644 --- a/src/components/SectionTitle/SectionTitle.tsx +++ b/src/components/SectionTitle/SectionTitle.tsx @@ -5,13 +5,12 @@ import styles from './index.module.scss'; interface IProps { children: ReactElement | string; - id?: string; } -const SectionTitle: FC = ({ children, id }: IProps) => { +const SectionTitle: FC = ({ children }: IProps) => { return (
    -
    +

    {children}

    diff --git a/src/pages/index.tsx b/src/pages/index.tsx index df440d0..4118896 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -4,7 +4,8 @@ import React, { FC } from 'react'; import Layout from '@theme/Layout'; // components -import FeatureSection from '@site/src/components/FeatureSection'; +import ConceptsSection from '@site/src/components/ConceptsSection'; +import FeaturesSection from '@site/src/components/FeaturesSection'; import Header from '@site/src/components/Header'; import Main from '@site/src/components/Main'; @@ -19,7 +20,9 @@ const IndexPage: FC = () => {
    - + + +
    ); diff --git a/src/styles/global.scss b/src/styles/global.scss index 8afd138..fd74b9f 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -22,8 +22,6 @@ :root { // overrides - --ifm-navbar-background-color: var(--kb-background-color); - --ifm-navbar-link-color: var(--kb-text-color); --ifm-color-content: var(--kb-text-color); --ifm-color-primary: #8D029B; --ifm-color-primary-dark: #7B0285; @@ -35,13 +33,18 @@ --ifm-code-font-size: 95%; --ifm-font-family-base: 'AnonymousPro'; --ifm-heading-font-family: 'AnonymousPro'; - --kb-background-color: var(--ifm-color-white); + --ifm-navbar-background-color: var(--kb-background-primary-color); + --ifm-navbar-link-color: var(--kb-text-color); + + // custom + --kb-background-primary-color: #fff; + --kb-background-accent-color: #f4f4f4; --kb-sub-text-color: rgba(255, 255, 255, 0.64); --kb-text-color: #4A5568; } [data-theme='dark'] { - --ifm--navbar-background-color: var(--kb-background-color); + // overrides --ifm-color-primary: #E0B0FF; --ifm-color-primary-dark: #C875FF; --ifm-color-primary-darker: #AF37FF; @@ -49,7 +52,11 @@ --ifm-color-primary-light: #E5BDFF; --ifm-color-primary-lighter: #E9C8FF; --ifm-color-primary-lightest: #EED3FF; - --kb-background-color: #1A202C; + --ifm--navbar-background-color: var(--kb-background-primary-color); + + // custom + --kb-background-primary-color: #1A202C; + --kb-background-accent-color: #303846; --kb-sub-text-color: #718096; --kb-text-color: rgba(255, 255, 255, 0.92); } diff --git a/src/styles/variables.scss b/src/styles/variables.scss new file mode 100644 index 0000000..dbdb797 --- /dev/null +++ b/src/styles/variables.scss @@ -0,0 +1 @@ +$screen-box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px; diff --git a/src/types/IDefaultSectionProps.ts b/src/types/IDefaultSectionProps.ts new file mode 100644 index 0000000..67f448b --- /dev/null +++ b/src/types/IDefaultSectionProps.ts @@ -0,0 +1,8 @@ +// types +import IVariantType from './IVariantType'; + +interface IDefaultSectionProps { + variant: IVariantType; +} + +export default IDefaultSectionProps; diff --git a/src/types/IThemedImageSources.ts b/src/types/IThemedImageSources.ts new file mode 100644 index 0000000..234c901 --- /dev/null +++ b/src/types/IThemedImageSources.ts @@ -0,0 +1,6 @@ +interface IThemedImageSources { + dark: string; + light: string; +} + +export default IThemedImageSources; diff --git a/src/types/IVariantType.ts b/src/types/IVariantType.ts new file mode 100644 index 0000000..bd672aa --- /dev/null +++ b/src/types/IVariantType.ts @@ -0,0 +1,3 @@ +type IVariantType = 'accent' | 'primary'; + +export default IVariantType; diff --git a/src/types/index.ts b/src/types/index.ts new file mode 100644 index 0000000..fbb98d7 --- /dev/null +++ b/src/types/index.ts @@ -0,0 +1,3 @@ +export { default as IDefaultSectionProps } from './IDefaultSectionProps'; +export { default as IThemedImageSources } from './IThemedImageSources'; +export { default as IVariantType } from './IVariantType'; diff --git a/static/images/asset_transfer_screen-dark.png b/static/images/asset_transfer_screen-dark.png new file mode 100644 index 0000000..8ccbb3c Binary files /dev/null and b/static/images/asset_transfer_screen-dark.png differ diff --git a/static/images/asset_transfer_screen-light.png b/static/images/asset_transfer_screen-light.png new file mode 100644 index 0000000..2014c16 Binary files /dev/null and b/static/images/asset_transfer_screen-light.png differ diff --git a/static/images/atomic_transaction_screen-dark.png b/static/images/atomic_transaction_screen-dark.png new file mode 100644 index 0000000..31057c4 Binary files /dev/null and b/static/images/atomic_transaction_screen-dark.png differ diff --git a/static/images/atomic_transaction_screen-light.png b/static/images/atomic_transaction_screen-light.png new file mode 100644 index 0000000..8a6272a Binary files /dev/null and b/static/images/atomic_transaction_screen-light.png differ diff --git a/static/images/feature_001.svg b/static/images/concept_001.svg similarity index 100% rename from static/images/feature_001.svg rename to static/images/concept_001.svg diff --git a/static/images/feature_002.svg b/static/images/concept_002.svg similarity index 100% rename from static/images/feature_002.svg rename to static/images/concept_002.svg diff --git a/static/images/feature_003.svg b/static/images/concept_003.svg similarity index 100% rename from static/images/feature_003.svg rename to static/images/concept_003.svg diff --git a/static/images/wallet_home_screen-dark.png b/static/images/home_screen-dark.png similarity index 97% rename from static/images/wallet_home_screen-dark.png rename to static/images/home_screen-dark.png index 71a16f5..bcce4a5 100644 Binary files a/static/images/wallet_home_screen-dark.png and b/static/images/home_screen-dark.png differ diff --git a/static/images/wallet_home_screen-light.png b/static/images/home_screen-light.png similarity index 98% rename from static/images/wallet_home_screen-light.png rename to static/images/home_screen-light.png index 6584f20..e2f8361 100644 Binary files a/static/images/wallet_home_screen-light.png and b/static/images/home_screen-light.png differ diff --git a/static/images/jwt_support_screen-dark.png b/static/images/jwt_support_screen-dark.png new file mode 100644 index 0000000..9b19c84 Binary files /dev/null and b/static/images/jwt_support_screen-dark.png differ diff --git a/static/images/jwt_support_screen-light.png b/static/images/jwt_support_screen-light.png new file mode 100644 index 0000000..9558839 Binary files /dev/null and b/static/images/jwt_support_screen-light.png differ diff --git a/yarn.lock b/yarn.lock index de4b508..342e86a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1650,7 +1650,7 @@ "@docusaurus/utils-validation" "2.4.3" tslib "^2.4.0" -"@docusaurus/plugin-sitemap@2.4.3", "@docusaurus/plugin-sitemap@^2.4.3": +"@docusaurus/plugin-sitemap@2.4.3": version "2.4.3" resolved "https://registry.yarnpkg.com/@docusaurus/plugin-sitemap/-/plugin-sitemap-2.4.3.tgz#1b3930900a8f89670ce7e8f83fb4730cd3298c32" integrity sha512-LRQYrK1oH1rNfr4YvWBmRzTL0LN9UAPxBbghgeFRBm5yloF6P+zv1tm2pe2hQTX/QP5bSKdnajCvfnScgKXMZQ== @@ -3329,6 +3329,11 @@ ci-info@^3.2.0: resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.9.0.tgz#4279a62028a7b1f262f3473fc9605f5e218c59b4" integrity sha512-NIxF55hv4nSqQswkAeiOi1r83xy8JldOFDTWiug55KBu9Jnblncd2U6ViHmYgHf01TPZS77NJBhBMKdWj9HQMQ== +classnames@^2.2.5: + version "2.3.2" + resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924" + integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw== + clean-css@^5.2.2, clean-css@^5.3.0: version "5.3.2" resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.2.tgz#70ecc7d4d4114921f5d298349ff86a31a9975224" @@ -6982,7 +6987,7 @@ prompts@^2.4.2: kleur "^3.0.3" sisteransi "^1.0.5" -prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.5.8, prop-types@^15.6.2, prop-types@^15.7.2: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -7146,6 +7151,13 @@ react-dom@^17.0.2: object-assign "^4.1.1" scheduler "^0.20.2" +react-easy-swipe@^0.0.21: + version "0.0.21" + resolved "https://registry.yarnpkg.com/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz#ce9384d576f7a8529dc2ca377c1bf03920bac8eb" + integrity sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg== + dependencies: + prop-types "^15.5.8" + react-error-overlay@^6.0.11: version "6.0.11" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb" @@ -7167,6 +7179,11 @@ react-helmet-async@*, react-helmet-async@^1.3.0: react-fast-compare "^3.2.0" shallowequal "^1.1.0" +react-icons@^4.12.0: + version "4.12.0" + resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.12.0.tgz#54806159a966961bfd5cdb26e492f4dafd6a8d78" + integrity sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw== + react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -7194,6 +7211,15 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1: dependencies: "@babel/runtime" "^7.10.3" +react-responsive-carousel@^3.2.23: + version "3.2.23" + resolved "https://registry.yarnpkg.com/react-responsive-carousel/-/react-responsive-carousel-3.2.23.tgz#4c0016ff54603e604bb5c1f9e7ef2d1eda133f1d" + integrity sha512-pqJLsBaKHWJhw/ItODgbVoziR2z4lpcJg+YwmRlSk4rKH32VE633mAtZZ9kDXjy4wFO+pgUZmDKPsPe1fPmHCg== + dependencies: + classnames "^2.2.5" + prop-types "^15.5.8" + react-easy-swipe "^0.0.21" + react-router-config@^5.1.1: version "5.1.1" resolved "https://registry.yarnpkg.com/react-router-config/-/react-router-config-5.1.1.tgz#0f4263d1a80c6b2dc7b9c1902c9526478194a988"