diff --git a/__minidapp/Home/index.tsx b/__minidapp/Home/index.tsx
new file mode 100644
index 0000000..b6f2346
--- /dev/null
+++ b/__minidapp/Home/index.tsx
@@ -0,0 +1,414 @@
+import React from "react"
+import { cn } from "@/app/lib/utils"
+import { Link } from "react-router-dom"
+import { SparklesCore } from "@/__minidapp/Home/sparkles"
+import useTheme from "@/__minidapp/hooks/useTheme"
+import useTitle from "@/__minidapp/hooks/useTitle"
+import TitleBar from "./title-bar"
+
+export function Home() {
+ useTitle()
+ const { toggleTheme } = useTheme()
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Welcome to the Minima Docs
+
+
+ Learn all there is to know about Minima
+
+
+
+
+
+
+
+ )
+}
+
+const Cards = () => {
+ const features = [
+ {
+ title: "Introduction",
+ description: "Learn about Minima and how to get involved.",
+ link: "/docs/core",
+ icon: (
+
+ ),
+ },
+ {
+ title: "Run a node",
+ description:
+ "Install and run a validating and constructing Minima node on your device.",
+ link: "/docs/run-a-node",
+ icon: (
+
+ ),
+ },
+ {
+ title: "User Guides",
+ description: "Guidance for using and managing your Minima node",
+ link: "/docs/user-guides",
+ icon: (
+
+ ),
+ },
+ {
+ title: "Developer Tutorials",
+ description:
+ "Develop decentralized applications and create smart contracts on Minima",
+ link: "/docs/development",
+ icon: (
+
+ ),
+ },
+ {
+ title: "Knowledge Base",
+ description: "A deep dive into the Minima protocol and its architecture",
+ link: "/docs/learn",
+ icon: (
+
+ ),
+ },
+ {
+ title: "Tokenomics",
+ description:
+ "Understand Minima's token allocation and distribution schedule",
+ link: "/docs/core/tokenomics",
+ icon: (
+
+ ),
+ },
+ ]
+ return (
+
+ {features.map((feature, index) => (
+
+ ))}
+
+ )
+}
+
+const FeatureCards = ({
+ title,
+ description,
+ icon,
+ index,
+ link,
+}: {
+ title: string
+ description: string
+ icon: React.ReactNode
+ index: number
+ link: string
+}) => {
+ return (
+
+ {index < 4 && (
+
+ )}
+ {index >= 4 && (
+
+ )}
+
+ {icon}
+
+
+
+ {description}
+
+
+ )
+}
+
+export default Home
diff --git a/__minidapp/Home/sparkles.tsx b/__minidapp/Home/sparkles.tsx
new file mode 100644
index 0000000..503b50a
--- /dev/null
+++ b/__minidapp/Home/sparkles.tsx
@@ -0,0 +1,437 @@
+"use client"
+import React, { useId, useMemo } from "react"
+import { useEffect, useState } from "react"
+import Particles, { initParticlesEngine } from "@tsparticles/react"
+import type { Container, SingleOrMultiple } from "@tsparticles/engine"
+import { loadSlim } from "@tsparticles/slim"
+import { cn } from "@/app/lib/utils"
+import { motion, useAnimation } from "framer-motion"
+import useTheme from "../hooks/useTheme"
+
+type ParticlesProps = {
+ id?: string
+ className?: string
+ background?: string
+ particleSize?: number
+ minSize?: number
+ maxSize?: number
+ speed?: number
+ particleColor?: string
+ particleDensity?: number
+}
+export const SparklesCore = (props: ParticlesProps) => {
+ const {
+ id,
+ className,
+ background,
+ minSize,
+ maxSize,
+ speed,
+ particleColor,
+ particleDensity,
+ } = props
+ const [init, setInit] = useState(false)
+ useEffect(() => {
+ initParticlesEngine(async (engine) => {
+ await loadSlim(engine)
+ }).then(() => {
+ setInit(true)
+ })
+ }, [])
+ const controls = useAnimation()
+
+ const { getTheme } = useTheme()
+
+ const particlesLoaded = async (container?: Container) => {
+ if (container) {
+ controls.start({
+ opacity: 1,
+ transition: {
+ duration: 1,
+ },
+ })
+ }
+ }
+
+ const generatedId = useId()
+ return (
+
+ {init && (
+ | undefined,
+ },
+ groups: {},
+ move: {
+ angle: {
+ offset: 0,
+ value: 90,
+ },
+ attract: {
+ distance: 200,
+ enable: false,
+ rotate: {
+ x: 3000,
+ y: 3000,
+ },
+ },
+ center: {
+ x: 50,
+ y: 50,
+ mode: "percent",
+ radius: 0,
+ },
+ decay: 0,
+ distance: {},
+ direction: "none",
+ drift: 0,
+ enable: true,
+ gravity: {
+ acceleration: 9.81,
+ enable: false,
+ inverse: false,
+ maxSpeed: 50,
+ },
+ path: {
+ clamp: true,
+ delay: {
+ value: 0,
+ },
+ enable: false,
+ options: {},
+ },
+ outModes: {
+ default: "out",
+ },
+ random: false,
+ size: false,
+ speed: {
+ min: 0.1,
+ max: 1,
+ },
+ spin: {
+ acceleration: 0,
+ enable: false,
+ },
+ straight: false,
+ trail: {
+ enable: false,
+ length: 10,
+ fill: {},
+ },
+ vibrate: false,
+ warp: false,
+ },
+ number: {
+ density: {
+ enable: true,
+ width: 400,
+ height: 400,
+ },
+ limit: {
+ mode: "delete",
+ value: 0,
+ },
+ value: particleDensity || 120,
+ },
+ opacity: {
+ value: {
+ min: 0.1,
+ max: 1,
+ },
+ animation: {
+ count: 0,
+ enable: true,
+ speed: speed || 4,
+ decay: 0,
+ delay: 0,
+ sync: false,
+ mode: "auto",
+ startValue: "random",
+ destroy: "none",
+ },
+ },
+ reduceDuplicates: false,
+ shadow: {
+ blur: 0,
+ color: {
+ value: "#000",
+ },
+ enable: false,
+ offset: {
+ x: 0,
+ y: 0,
+ },
+ },
+ shape: {
+ close: true,
+ fill: true,
+ options: {},
+ type: "circle",
+ },
+ size: {
+ value: {
+ min: minSize || 1,
+ max: maxSize || 3,
+ },
+ animation: {
+ count: 0,
+ enable: false,
+ speed: 5,
+ decay: 0,
+ delay: 0,
+ sync: false,
+ mode: "auto",
+ startValue: "random",
+ destroy: "none",
+ },
+ },
+ stroke: {
+ width: 0,
+ },
+ zIndex: {
+ value: 0,
+ opacityRate: 1,
+ sizeRate: 1,
+ velocityRate: 1,
+ },
+ destroy: {
+ bounds: {},
+ mode: "none",
+ split: {
+ count: 1,
+ factor: {
+ value: 3,
+ },
+ rate: {
+ value: {
+ min: 4,
+ max: 9,
+ },
+ },
+ sizeOffset: true,
+ },
+ },
+ roll: {
+ darken: {
+ enable: false,
+ value: 0,
+ },
+ enable: false,
+ enlighten: {
+ enable: false,
+ value: 0,
+ },
+ mode: "vertical",
+ speed: 25,
+ },
+ tilt: {
+ value: 0,
+ animation: {
+ enable: false,
+ speed: 0,
+ decay: 0,
+ sync: false,
+ },
+ direction: "clockwise",
+ enable: false,
+ },
+ twinkle: {
+ lines: {
+ enable: false,
+ frequency: 0.05,
+ opacity: 1,
+ },
+ particles: {
+ enable: false,
+ frequency: 0.05,
+ opacity: 1,
+ },
+ },
+ wobble: {
+ distance: 5,
+ enable: false,
+ speed: {
+ angle: 50,
+ move: 10,
+ },
+ },
+ life: {
+ count: 0,
+ delay: {
+ value: 0,
+ sync: false,
+ },
+ duration: {
+ value: 0,
+ sync: false,
+ },
+ },
+ rotate: {
+ value: 0,
+ animation: {
+ enable: false,
+ speed: 0,
+ decay: 0,
+ sync: false,
+ },
+ direction: "clockwise",
+ path: false,
+ },
+ orbit: {
+ animation: {
+ count: 0,
+ enable: false,
+ speed: 1,
+ decay: 0,
+ delay: 0,
+ sync: false,
+ },
+ enable: false,
+ opacity: 1,
+ rotation: {
+ value: 45,
+ },
+ width: 1,
+ },
+ links: {
+ blink: false,
+ color: {
+ value: "#fff",
+ },
+ consent: false,
+ distance: 100,
+ enable: false,
+ frequency: 1,
+ opacity: 1,
+ shadow: {
+ blur: 5,
+ color: {
+ value: "#000",
+ },
+ enable: false,
+ },
+ triangles: {
+ enable: false,
+ frequency: 1,
+ },
+ width: 1,
+ warp: false,
+ },
+ repulse: {
+ value: 0,
+ enabled: false,
+ distance: 1,
+ duration: 1,
+ factor: 1,
+ speed: 1,
+ },
+ },
+ detectRetina: true,
+ }}
+ />
+ )}
+
+ )
+}
diff --git a/__minidapp/Home/title-bar.tsx b/__minidapp/Home/title-bar.tsx
new file mode 100644
index 0000000..cdb3629
--- /dev/null
+++ b/__minidapp/Home/title-bar.tsx
@@ -0,0 +1,60 @@
+import * as React from "react"
+import useAndroidShowTitleBar from "../hooks/use-android"
+
+const TitleBar = () => {
+ const { openTitleBar, isMinimaBrowser } = useAndroidShowTitleBar()
+
+ const goHome = (e: React.MouseEvent) => {
+ e.stopPropagation()
+ window.location.assign("/")
+ }
+
+ if (!isMinimaBrowser) {
+ return null
+ }
+
+ return (
+
+ )
+}
+
+export default TitleBar
diff --git a/__minidapp/Page/index.tsx b/__minidapp/Page/index.tsx
new file mode 100644
index 0000000..0a2ae3d
--- /dev/null
+++ b/__minidapp/Page/index.tsx
@@ -0,0 +1,61 @@
+"use client"
+import { MDXProvider } from "@mdx-js/react"
+import { useLocation } from "react-router-dom"
+import {PropsWithChildren, useEffect} from "react"
+import { useMDXComponents } from "@/mdx-components"
+import { Link } from "react-router-dom";
+
+export default function Page() {
+ const { pathname, hash } = useLocation()
+
+ useEffect(() => {
+ if (hash) {
+ const elem = document.getElementById(hash.substring(1))
+
+ setTimeout(() => {
+ if (elem) {
+ elem.scrollIntoView()
+ }
+ }, 200)
+ }
+ }, [hash])
+
+ // we remove the starting slash
+ let correctedPathname = pathname.slice(1, pathname.length)
+
+ let MDX
+
+ try {
+ MDX = require(`../../content/${correctedPathname}.mdx`)
+ } catch {
+ if (!MDX) {
+ MDX = require(`../../content/${correctedPathname}/index.mdx`)
+ }
+ }
+
+ if (!MDX) {
+ return null
+ }
+
+ const components = useMDXComponents({})
+
+ return (
+
+
+ {MDX.frontmatter.title}
+ ) => {
+ return (
+
+ {props.children}
+
+ )
+ }
+ }}
+ />
+
+
+ )
+}
diff --git a/__minidapp/Page/layout.tsx b/__minidapp/Page/layout.tsx
new file mode 100644
index 0000000..6ecf355
--- /dev/null
+++ b/__minidapp/Page/layout.tsx
@@ -0,0 +1,752 @@
+"use client"
+import { Link, useLocation } from "react-router-dom"
+import { Fragment, useEffect, useState } from "react"
+import useTheme from "@/__minidapp/hooks/useTheme"
+import useTitle from "@/__minidapp/hooks/useTitle"
+import { MENU, SECTION_MENU } from "@/__minidapp/constants"
+import TitleBar from "../Home/title-bar"
+
+const Layout: React.FC = ({ children }) => {
+ useTitle()
+ const location = useLocation()
+ const [kebabOpen, setKebabOpen] = useState(false)
+ const [sectionMenuOpen, setSectionMenuOpen] = useState(false)
+ const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false)
+ const { toggleTheme } = useTheme()
+ const ACTIVE: keyof typeof MENU = location.pathname
+ .split("/")
+ .at(2)!
+ .replaceAll("-", "_")
+ .toUpperCase()
+
+ const activeMenu = MENU[ACTIVE]
+ const activeSubMenu = SECTION_MENU.find((i) => i.key === ACTIVE)
+
+ useEffect(() => {
+ window.scrollTo({
+ top: 0,
+ behavior: "instant",
+ })
+ }, [location.pathname])
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+ {/* Mobile Search Button */}
+
+
+ {/* Nav Button */}
+
+
+
+