style

.vitepress/config.mts

@@ -159,6 +159,10 @@ function sidebarHome() {
       text: "Wallet",
       collapsed: true,
       items: [
+        {
+          text: "Introduction",
+          link: "/wallet/introduction"
+        },
         {
           text: "Desktop",
           collapsed: true,

.vitepress/theme/index.ts

@@ -0,0 +1,16 @@
+// https://vitepress.dev/guide/custom-theme
+import { h } from "vue";
+import Theme from "vitepress/theme";
+import "./style.css";
+
+export default {
+  extends: Theme,
+  Layout: () => {
+    return h(Theme.Layout, null, {
+      // https://vitepress.dev/guide/extending-default-theme#layout-slots
+    });
+  },
+  enhanceApp({ app, router, siteData }) {
+    // ...
+  },
+};

.vitepress/theme/style.css

@@ -0,0 +1,148 @@
+/**
+ * Customize default theme styling by overriding CSS variables:
+ * https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/styles/vars.css
+ */
+
+/**
+ * Colors
+ * -------------------------------------------------------------------------- */
+
+ :root {
+    --vp-c-brand: #7b2bf9;
+    --vp-c-brand-light: #9350fa;
+    --vp-c-brand-lighter: #a970fb;
+    --vp-c-brand-lightest: #bf90fc;
+    --vp-c-brand-dark: #6902e0;
+    --vp-c-brand-darker: #5801c9;
+    --vp-c-brand-dimm: rgba(123, 43, 249, 0.08);
+  }
+
+  /**
+   * Component: Button
+   * -------------------------------------------------------------------------- */
+
+  :root {
+    --vp-button-brand-border: var(--vp-c-brand-light);
+    --vp-button-brand-text: var(--vp-c-white);
+    --vp-button-brand-bg: var(--vp-c-brand);
+    --vp-button-brand-hover-border: var(--vp-c-brand-light);
+    --vp-button-brand-hover-text: var(--vp-c-white);
+    --vp-button-brand-hover-bg: var(--vp-c-brand-light);
+    --vp-button-brand-active-border: var(--vp-c-brand-light);
+    --vp-button-brand-active-text: var(--vp-c-white);
+    --vp-button-brand-active-bg: var(--vp-button-brand-bg);
+  }
+
+  /**
+   * Component: Home
+   * -------------------------------------------------------------------------- */
+
+  :root {
+    --vp-home-hero-name-color: transparent;
+    --vp-home-hero-name-background: -webkit-linear-gradient(
+      120deg,
+      #7b2bf9 30%,
+      #fd63d9
+    );
+
+    --vp-home-hero-image-background-image: linear-gradient(
+      -45deg,
+      #7b2bf9 50%,
+      #fd63d9 50%
+    );
+    --vp-home-hero-image-filter: blur(40px);
+  }
+
+  @media (min-width: 640px) {
+    :root {
+      --vp-home-hero-image-filter: blur(56px);
+    }
+  }
+
+  @media (min-width: 960px) {
+    :root {
+      --vp-home-hero-image-filter: blur(72px);
+    }
+  }
+
+  /**
+   * Component: Custom Block
+   * -------------------------------------------------------------------------- */
+
+  :root {
+    --vp-custom-block-tip-border: var(--vp-c-brand);
+    --vp-custom-block-tip-text: var(--vp-c-brand-darker);
+    --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+    --tab-text-color: #000;
+  }
+
+  .dark {
+    --vp-custom-block-tip-border: var(--vp-c-brand);
+    --vp-custom-block-tip-text: var(--vp-c-brand-lightest);
+    --vp-custom-block-tip-bg: var(--vp-c-brand-dimm);
+    --tab-text-color: #fff;
+  }
+
+  /**
+   * Component: Algolia
+   * -------------------------------------------------------------------------- */
+
+  .DocSearch {
+    --docsearch-primary-color: var(--vp-c-brand) !important;
+  }
+
+  @font-face {
+    font-family: "RuberoidBold";
+    src: url("/fonts/Ruberoid/Ruberoid-Bold.otf") format("opentype");
+  }
+
+  :root {
+    --font-primary: "RuberoidBold", sans-serif;
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-primary);
+  }
+
+  .youtube-wrapper {
+    position: relative;
+    overflow: hidden;
+    width: 100%;
+    padding-top: 56.25%;
+  }
+
+  .youtube-video {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+  }
+
+
+  .hero-video {
+    position: relative;
+    width: 100%;
+    height: 100vh;
+    overflow: hidden;
+  }
+
+  .hero-video video {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transform: translate(-50%, -50%);
+    z-index: -1; /* Ensure the video is behind other content */
+  }
+

index.md

@@ -3,23 +3,33 @@
 layout: home
 
 hero:
-  name: "MWC Documentations"
-  text: "A VitePress Site"
-  tagline: My great project tagline
+  name: "MimbleWimbleCoin"
+  text: "The most scalable privacy coin"
+  tagline: "The ultimate guide to Mimblewimblecoin — explore wallet & node guides, protocol insights and educational resources in one place."
   actions:
     - theme: brand
-      text: Markdown Examples
-      link: /markdown-examples
+      text: Get start with Wallet
+      link: /wallet/introduction
     - theme: alt
-      text: API Examples
-      link: /api-examples
+      text: Introduction
+      link: /learn/how-mwc-works/overview
 
 features:
-  - title: Feature A
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature B
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
-  - title: Feature C
-    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
----
+  - title: Learn
+    details: Explore how Mimblewimblecoin ensures privacy while offering greater scalability compared to any others legacy blockchain.
+    link: /learn/how-mwc-works/overview
+    icon: 📖
+  - title: Wallet
+    details: Explore MWC-compatible wallets for secure and efficient management of your Mimblewimblecoin, and connect with the community for the latest updates and support.
+    link: /wallet/introduction
+    icon: 👛
+  - title: Run a Node
+    details: Set up and operate MWC nodes to contribute to our decentralized network, leveraging the privacy and scalability of Mimblewimblecoin.
+    link: /nodes/overview
+    icon: 💻
+  - title: Developers
+    details: Dive deep into the Mimblewimblecoin protocol, learn about our API, and understand the node structure to build and integrate applications effectively.
+    link: /developers/build-whatever
+    icon: 🧑‍💻
 
+---

wallet/introduction.md

@@ -0,0 +1,46 @@
+# MWC Wallet Introduction
+
+Mimblewimblecoin (MWC) offers a range of wallet types to meet different needs, whether you are using a computer, mobile device, web browser, console, or hardware wallet. Below is an overview of each wallet type, their primary use cases, and links to get started.
+
+## Overview
+
+MWC wallets are designed to securely manage your Mimblewimblecoin. Each type of wallet provides distinct features and is suited for different scenarios.
+
+## Types of MWC Wallets
+
+### Desktop Wallet
+
+The **Desktop Wallet** is a feature-rich solution for managing MWC on your computer. It allows you to create and manage your wallet, perform transactions, and access advanced features.
+
+- **Use Case:** Ideal for users who prefer a comprehensive wallet experience on their desktop or laptop.
+- **[Getting Started](../wallet/desktop/get-started)**
+
+### Mobile Wallet
+
+The **Mobile Wallet** provides convenient access to MWC from your smartphone. It includes essential features for wallet management, transactions, and secure access while on the move.
+
+- **Use Case:** Perfect for users who need to manage their MWC on the go with their mobile device.
+- **[Getting Started](../wallet/mobile/get-started)**
+
+### Web Wallet
+
+The **Web Wallet** offers the flexibility of managing MWC through a web browser. It supports all essential wallet functions and advanced features accessible from any device with internet access.
+
+- **Use Case:** Best for users who prefer to access their wallet from various devices via a web interface.
+- **[Getting Started](../wallet/web/get-started)**
+
+### Console Wallet
+
+The **Console Wallet** is a command-line tool for advanced users who prefer using terminal commands for wallet management. It provides detailed control over wallet operations and advanced functionalities.
+
+- **Use Case:** Designed for technically inclined users who are comfortable with command-line interfaces.
+- **[Getting Started](../wallet/console/get-started)**
+
+### Ledger Wallet
+
+The **Ledger Wallet** is a hardware wallet providing high security for storing MWC offline. It is ideal for users who need robust protection against online threats.
+
+- **Use Case:** Best for users who prioritize security and want to store their MWC offline using a physical hardware device.
+- **[Getting Started](../wallet/ledger/get-started)**
+
+Each wallet type offers unique features tailored to different preferences and requirements, ensuring you can manage your MWC efficiently and securely according to your needs.