feat: add arc 200 support as a new features item (#24)

* refactor: change header title and tagline

* feat: add new arc200 asset feature

* fix: centered image max width applies to inner container not image

* refactor: re-use send assets screen in introducing blog post

* refactor: re-order sidebar overview items to be inline with the webpage flow

blog/2023-12-21-introducing-kibisis/index.mdx

@@ -13,8 +13,8 @@ import BlogScreenshotImage from '@site/src/components/BlogScreenshotImage';
 import { CHROME_STORE_LINK } from '@site/src/constants';
 
 <!-- images -->
-import sendAssetsDarkImage from './send_assets-dark.png';
-import sendAssetsLightImage from './send_assets-light.png';
+import sendAssetsDarkImage from '@site/static/images/send_assets_screen-dark.png';
+import sendAssetsLightImage from '@site/static/images/send_assets_screen-light.png';
 import switchNetworksDarkImage from './switch_networks-dark.png';
 import switchNetworksLightImage from './switch_networks-light.png';
 import viewAssetsDarkImage from './view_assets-dark.png';

blog/2023-12-27-1-8-0-new-release/index.mdx

@@ -13,8 +13,8 @@ import BlogScreenshotImage from '@site/src/components/BlogScreenshotImage';
 import { AGORA_LABS_LINK, REPORT_A_BUG_LINK, SUGGEST_A_FEATURE_LINK } from '@site/src/constants';
 
 <!-- images -->
-import addArc200AssetDarkImage from './add_arc200_asset-dark.png';
-import addArc200AssetLightImage from './add_arc200_asset-light.png';
+import addArc200AssetDarkImage from '@site/static/images/add_arc200_asset_screen-dark.png';
+import addArc200AssetLightImage from '@site/static/images/add_arc200_asset_screen-light.png';
 import arc200SupportDarkImage from './arc200_support-dark.png';
 import arc200SupportLightImage from './arc200_support-light.png';
 

docusaurus.config.js

@@ -115,14 +115,14 @@ const config = {
           // right
           {
             items: [
-              {
-                label: 'Features',
-                href: '/#features',
-              },
               {
                 label: 'Concepts',
                 href: '/#concepts',
               },
+              {
+                label: 'Features',
+                href: '/#features',
+              },
               {
                 label: 'Download',
                 href: '/#download',

src/components/CenteredImage/CenteredImage.tsx

@@ -2,24 +2,29 @@ import React, { FC } from 'react';
 
 // styles
 import styles from './styles.module.scss';
+import clsx from 'clsx';
 
 interface IProps {
   label: string;
   maxWidth?: string;
   src: string;
 }
 
-const CenteredImage: FC<IProps> = ({ label, maxWidth, src }: IProps) => {
+const CenteredImage: FC<IProps> = ({
+  label,
+  maxWidth = '400px',
+  src,
+}: IProps) => {
   return (
-    <div className={styles.container}>
-      <img
-        alt={label}
-        aria-label={label}
-        src={src}
+    <div className={clsx(styles.container, styles.container__outer)}>
+      <div
+        className={styles.container}
         style={{
           maxWidth,
         }}
-      />
+      >
+        <img alt={label} aria-label={label} src={src} />
+      </div>
     </div>
   );
 };

src/components/CenteredImage/styles.module.scss

@@ -1,6 +1,16 @@
+@import "../../styles/variables";
+
 .container {
   display: flex;
-  justify-content: center;
-  padding: 1rem 0;
+
+  &__outer {
+    padding: 2rem 1rem;
+    justify-content: center;
+    width: 100%;
+  }
+}
+
+.image {
+  box-shadow: $screen-box-shadow;
   width: 100%;
 }

src/components/FeaturesSection/FeaturesSection.tsx

@@ -30,11 +30,21 @@ const FeaturesSection: FC<IProps> = ({ variant }: IProps) => {
       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',
+        dark: '/images/send_assets_screen-dark.png',
+        light: '/images/send_assets_screen-light.png',
       },
       title: 'Asset Transfer',
     },
+    {
+      alt: 'Add ARC-200 screen',
+      description:
+        'Kibisis not only supports AVM standard assets, it also supports ARC-200. From Kibisis, you can check your balance, transfer and add any ARC-200 asset.',
+      imageSources: {
+        dark: '/images/add_arc200_asset_screen-dark.png',
+        light: '/images/add_arc200_asset_screen-light.png',
+      },
+      title: 'ARC-200 Support',
+    },
     {
       alt: 'Atomic transaction screen',
       description:

src/components/Header/Header.tsx

@@ -14,11 +14,11 @@ const Header: FC = () => {
         {/*title*/}
         <div className={clsx(styles.container, styles.container__text)}>
           <h1 className={clsx(styles.text, styles['text--title'])}>
-            The AVM utility wallet
+            Your Ultimate AVM Utility Wallet
           </h1>
 
           <p className={clsx(styles.text, styles['text--subtitle'])}>
-            A wallet that is not just for DeFi, but also focuses on utility.
+            An AVM wallet in your browser that goes beyond just DeFi.
           </p>
         </div>