+kokioTheme

docusaurus.config.ts

@@ -36,10 +36,8 @@ const config: Config = {
       {
         docs: {
           sidebarPath: "./sidebars.ts",
-          // Please change this to your repo.
-          // Remove this to remove the "edit this page" links.
           editUrl:
-            "https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/",
+            "https://github.com/Blockchain-Powered-eSIM/Kokio-docs/tree/main/",
         },
         //blog: {
         //  showReadingTime: true,
@@ -56,8 +54,7 @@ const config: Config = {
   ],
 
   themeConfig: {
-    // Replace with your project's social card
-    image: "img/docusaurus-social-card.jpg",
+    image: "images/kokio-social-card.png",
     navbar: {
       logo: {
         alt: "Kokio Logo",
@@ -105,7 +102,11 @@ const config: Config = {
             },
             {
               label: "Twitter",
-              href: "https://twitter.com/docusaurus",
+              href: "https://x.com/kokiodotapp",
+            },
+            {
+              label: "Telegram",
+              href: "https://t.me/+b44BXiy8d5k4M2Q1",
             },
           ],
         },
@@ -119,7 +120,7 @@ const config: Config = {
           ],
         },
       ],
-      copyright: `Copyright © ${new Date().getFullYear()} Kokio Ltd., Built with Docusaurus.`,
+      copyright: `Copyright © ${new Date().getFullYear()} Kokio SG Pte. Ltd.`,
     },
     prism: {
       theme: prismThemes.github,

package.json

@@ -15,18 +15,18 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "3.4.0",
-    "@docusaurus/preset-classic": "3.4.0",
+    "@docusaurus/core": "^3.10.2",
+    "@docusaurus/preset-classic": "^3.10.2",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
     "prism-react-renderer": "^2.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "3.4.0",
-    "@docusaurus/tsconfig": "3.4.0",
-    "@docusaurus/types": "3.4.0",
+    "@docusaurus/module-type-aliases": "^3.10.2",
+    "@docusaurus/tsconfig": "^3.10.2",
+    "@docusaurus/types": "^3.10.2",
     "typescript": "~5.2.2"
   },
   "browserslist": {

src/components/HomepageFeatures/index.tsx

@@ -4,14 +4,14 @@ import styles from './styles.module.css';
 
 type FeatureItem = {
   title: string;
-  Svg: React.ComponentType<React.ComponentProps<'svg'>>;
+  image: string;
   description: JSX.Element;
 };
 
 const FeatureList: FeatureItem[] = [
   {
     title: 'Easy to Use',
-    Svg: require('@site/static/img/undraw_docusaurus_mountain.svg').default,
+    image: '/images/feature-easy-to-use.png',
     description: (
       <>
         Set up your mobile plan quickly and easily with our new technology. Speed up the process even more by provisioning your new secure eSIM device wallet..
@@ -20,7 +20,7 @@ const FeatureList: FeatureItem[] = [
   },
   {
     title: 'eSIM Wallet',
-    Svg: require('@site/static/img/undraw_docusaurus_tree.svg').default,
+    image: '/images/feature-esim-wallet.png',
     description: (
       <>
         When you purchase your first Kokio travel data bundle, a secure eSIM crypto wallet is created. Not ready for crypto? No worries—the eSIM wallet is optional and can be activated whenever you choose..
@@ -29,7 +29,7 @@ const FeatureList: FeatureItem[] = [
   },
   {
     title: 'Quick Pay',
-    Svg: require('@site/static/img/undraw_docusaurus_react.svg').default,
+    image: '/images/feature-quick-pay.png',
     description: (
       <>
         Enjoy flexible payment options including credit cards, Apple Pay, Google Pay, and PayPal. You can fund your eSIM wallet and check out even faster!.
@@ -38,11 +38,11 @@ const FeatureList: FeatureItem[] = [
   },
 ];
 
-function Feature({title, Svg, description}: FeatureItem) {
+function Feature({title, image, description}: FeatureItem) {
   return (
     <div className={clsx('col col--4')}>
       <div className="text--center">
-        <Svg className={styles.featureSvg} role="img" />
+        <img src={image} className={styles.featureImg} alt={title} />
       </div>
       <div className="text--center padding-horiz--md">
         <Heading as="h3">{title}</Heading>

src/components/HomepageFeatures/styles.module.css

@@ -5,7 +5,9 @@
   width: 100%;
 }
 
-.featureSvg {
-  height: 200px;
-  width: 200px;
+.featureImg {
+  width: 100%;
+  max-width: 320px;
+  height: auto;
+  object-fit: contain;
 }

src/pages/index.module.css

@@ -8,6 +8,12 @@
   text-align: center;
   position: relative;
   overflow: hidden;
+  background-image: linear-gradient(
+      rgba(0, 0, 0, 0.15),
+      rgba(0, 0, 0, 0.15)
+    ), url("/images/kokio-hero-bg.png");
+  background-size: cover;
+  background-position: center;
 }
 
 @media screen and (max-width: 996px) {