refactor: rename vision to concepts

docusaurus.config.js

@@ -94,14 +94,14 @@ const config = {
           // right
           {
             items: [
-              {
-                label: 'Vision',
-                to: '#vision',
-              },
               {
                 label: 'Features',
                 to: '#features',
               },
+              {
+                label: 'Concepts',
+                to: '#concepts',
+              },
             ],
             label: 'Overview',
             position: 'right',
@@ -127,7 +127,7 @@ const config = {
             title: 'Learn More',
             items: [
               {
-                label: 'Learn',
+                label: 'Docs',
                 to: '/docs/intro',
               },
               {

src/components/VisionSection/VisionItem.tsx → src/components/ConceptsSection/ConceptItem.tsx

@@ -12,7 +12,7 @@ import { IVisionItemProps } from './types';
 
 type IProps = IVisionItemProps;
 
-const VisionItem: FC<IProps> = ({
+const ConceptItem: FC<IProps> = ({
   title,
   SvgComponent,
   description,
@@ -31,4 +31,4 @@ const VisionItem: FC<IProps> = ({
   );
 };
 
-export default VisionItem;
+export default ConceptItem;

src/components/VisionSection/VisionSection.tsx → src/components/ConceptsSection/ConceptsSection.tsx

@@ -2,12 +2,12 @@ import React, { FC } from 'react';
 
 // components
 import Section from '@site/src/components/Section';
-import VisionItem from './VisionItem';
+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';
@@ -18,11 +18,11 @@ import { IVisionItemProps } from './types';
 
 type IProps = IDefaultSectionProps;
 
-const VisionSection: FC<IProps> = ({ variant }: IProps) => {
+const ConceptsSection: FC<IProps> = ({ 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,
@@ -32,7 +32,7 @@ const VisionSection: FC<IProps> = ({ variant }: IProps) => {
     },
     {
       title: 'AVM Compatible',
-      SvgComponent: feature002Svg,
+      SvgComponent: concept002Svg,
       description: (
         <>
           Kibisis not only works with Algorand, but endeavours to encompass all
@@ -42,7 +42,7 @@ const VisionSection: FC<IProps> = ({ variant }: IProps) => {
     },
     {
       title: 'Browser Extension',
-      SvgComponent: feature003Svg,
+      SvgComponent: concept003Svg,
       description: (
         <>
           Leveraging the security and convenience of browser extensions, Kibisis
@@ -53,10 +53,10 @@ const VisionSection: FC<IProps> = ({ variant }: IProps) => {
   ];
 
   return (
-    <Section id="vision" title="Vision" variant={variant}>
+    <Section id="concepts" title="Concepts" variant={variant}>
       <div className={styles['items-container']}>
         {items.map(({ description, SvgComponent, title }, index) => (
-          <VisionItem
+          <ConceptItem
             description={description}
             key={`vision-item-${index}`}
             SvgComponent={SvgComponent}
@@ -68,4 +68,4 @@ const VisionSection: FC<IProps> = ({ variant }: IProps) => {
   );
 };
 
-export default VisionSection;
+export default ConceptsSection;

src/components/ConceptsSection/index.ts

@@ -0,0 +1,3 @@
+export { default } from './ConceptsSection';
+export { default as ConceptItem } from './ConceptItem';
+export * from './types';

src/components/VisionSection/types/IVisionItemProps.ts → src/components/ConceptsSection/types/IConceptItemProps.ts

@@ -1,9 +1,9 @@
 import { ComponentProps, ComponentType, ReactElement } from 'react';
 
-interface IVisionItemProps {
+interface IConceptItemProps {
   SvgComponent: ComponentType<ComponentProps<'svg'>>;
   description: ReactElement;
   title: string;
 }
 
-export default IVisionItemProps;
+export default IConceptItemProps;

src/components/ConceptsSection/types/index.ts

@@ -0,0 +1 @@
+export { default as IVisionItemProps } from './IConceptItemProps';

src/pages/index.tsx

@@ -4,10 +4,10 @@ import React, { FC } from 'react';
 import Layout from '@theme/Layout';
 
 // components
+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';
-import VisionSection from '@site/src/components/VisionSection';
 
 const IndexPage: FC = () => {
   const { siteConfig } = useDocusaurusContext();
@@ -20,9 +20,9 @@ const IndexPage: FC = () => {
       <Header />
 
       <Main>
-        <VisionSection variant="accent" />
+        <FeaturesSection variant="accent" />
 
-        <FeaturesSection variant="primary" />
+        <ConceptsSection variant="primary" />
       </Main>
     </Layout>
   );