docs: adjust homepage

homepage/pages/_captain-core/client/_meta.json

@@ -0,0 +1,9 @@
+{
+  "README": {
+    "display": "hidden"
+  },
+  "ions": "Ions",
+  "atoms": "Atoms",
+  "molecules": "Molecules",
+  "organisms": "Organisms"
+}

homepage/pages/_captain-core/electron/_meta.json

@@ -1,4 +1,7 @@
 {
+  "README": {
+    "display": "hidden"
+  },
   "classes": "Classes",
   "interfaces": "Interfaces"
 }

homepage/pages/_captain-core/shared/_meta.json

@@ -1,3 +1,6 @@
 {
+  "README": {
+    "display": "hidden"
+  },
   "enums": "Enums"
 }

homepage/pages/_captain-sdk/create-captain-app/_meta.json

@@ -1,3 +1,5 @@
 {
-  "README": "Overview"
+  "README": {
+    "display": "hidden"
+  }
 }

homepage/pages/_captain-sdk/joy/_meta.json

@@ -1,3 +1,5 @@
 {
-  "README": "Overview"
+  "README": {
+    "display": "hidden"
+  }
 }

homepage/pages/_captain-sdk/react/_meta.json

@@ -1,3 +1,5 @@
 {
-  "README": "Overview"
+  "README": {
+    "display": "hidden"
+  }
 }

homepage/pages/_captain-sdk/theme/_meta.json

@@ -1,3 +1,5 @@
 {
-  "README": "Overview"
+  "README": {
+    "display": "hidden"
+  }
 }

homepage/pages/_captain-sdk/utils/_meta.json

@@ -1,3 +1,5 @@
 {
-  "README": "Overview"
+  "README": {
+    "display": "hidden"
+  }
 }

homepage/pages/captain-core/client.mdx

@@ -1,9 +1,20 @@
+import { Callout } from "nextra/components";
+
 # Client Folder
 
 ## Overview
 The `client` folder contains the Next.js application that powers the front end of our application, generating a static site that delivers the core functionalities such as the dashboard, settings, downloads, and marketplace. This folder follows an extended version of Atomic Design, accommodating our unique components and state management needs.
 
+<Callout type="info">
+We proudly adopt [Brad Frost's Atomic Design](https://atomicdesign.bradfrost.com/) methodology to structure our UI components. This approach allows us to maintain a highly modular and scalable interface. Atomic Design helps us systematically arrange components into ions, atoms, molecules, and organisms, making our application robust and maintainable. We highly recommend exploring this methodology to appreciate how it benefits our design processes and enhances the developer experience.
+</Callout>
+
 ## Atomic Design Extended
+
+<Callout type="info">
+We extend the traditional Atomic Design framework by incorporating **Ions**, inspired by Brad Frost's ideas on [Extending Atomic Design](https://bradfrost.com/blog/post/extending-atomic-design/). Ions include non-renderable components like state managers and internationalization configurations, enhancing our application's architecture.
+</Callout>
+
 Our implementation of atomic design incorporates:
 - [**Ions**](/captain-core/client/ions): Non-renderable parts such as Jotai atoms, Day.js configurations for internationalization, and internal React hooks. These components form the underlying functionalities that support state management and theming across the app.
 - [**Atoms**](/captain-core/client/atoms): UI components that are the foundational building blocks of our user interface, such as buttons and input fields.

homepage/pages/captain-core/client/_meta.json

@@ -1,4 +1,7 @@
 {
+  "README": {
+    "display": "hidden"
+  },
   "ions": "Ions",
   "atoms": "Atoms",
   "molecules": "Molecules",

homepage/pages/captain-sdk/create-captain-app.mdx

@@ -0,0 +1,81 @@
+import { Tabs } from 'nextra/components'
+
+# Create Captain App
+
+`create-captain-app` is a command-line utility designed to streamline the process of creating applications using Captain, an Electron app framework. It enables users to generate projects from a variety of customizable templates that can be exported as static websites, supporting a wide range of web technologies.
+
+## Features
+
+- **Versatility**: Supports multiple front-end frameworks, including Next.js, Svelte, Vue.js, and basic HTML + CSS.
+- **Simplicity**: Allows easy project generation with a single command, akin to `create-react-app` or `create-next-app`.
+- **Template-based**: Offers a selection of templates to kick-start your project, each customizable to meet specific needs.
+
+## Prerequisites
+
+- **Node.js**: Version 20 or later must be installed on your system.
+- **Git**: Required for version control.
+
+## Usage
+
+To create a new Captain application, specify the name of your app and optionally, a template URL:
+
+<Tabs items={["npm", "yarn", "pnpm"]}>
+	<Tabs.Tab>
+		```shell
+		npx create-captain-app@latest [app-name] [--template 'template-url']
+		```
+	</Tabs.Tab>
+	<Tabs.Tab>
+		```shell
+		yarn create captain-app [app-name] [--template 'template-url']
+		```
+	</Tabs.Tab>
+	<Tabs.Tab>
+		```shell
+		pnpm create captain-app [app-name] [--template 'template-url']
+		```
+	</Tabs.Tab>
+</Tabs>
+
+### Default Settings
+
+- **App Name**: If not specified, `create-captain-app` defaults to using "my-captain-app" as the project name.
+- **Template**: If no template URL is provided, the default Next.js template for Captain will be used.
+
+### Template Selection
+
+Specify any GitHub repository URL hosting a Captain-compatible template to use:
+
+<Tabs items={["npm", "yarn", "pnpm"]}>
+	<Tabs.Tab>
+		```shell
+		npx create-captain-app@latest my-vue-app --template https://github.com/some-user/some-captain-vue-template
+		```
+	</Tabs.Tab>
+	<Tabs.Tab>
+		```shell
+		yarn create captain-app my-vue-app --template https://github.com/some-user/some-captain-vue-template
+		```
+	</Tabs.Tab>
+	<Tabs.Tab>
+		```shell
+		pnpm create captain-app my-vue-app --template https://github.com/some-user/some-captain-vue-template
+		```
+	</Tabs.Tab>
+</Tabs>
+
+
+## Creating Custom Templates
+
+To develop a custom template, ensure your project aligns with Captain requirements and can be exported as a static site. Consult the [default starter app](https://github.com/blib-la/captain-starter-app) for setup guidance.
+
+## Configuring Your Project
+
+After project setup, adjust the metadata in the `captain.md` file to match your project specifics. This file uses YAML frontmatter for configuration:
+
+- **Preserve the Default ID**: The initial `id` matches the `packageJson.name` and is uniquely set by our CLI. We recommend keeping the default settings to avoid conflicts.
+
+## Building Your App
+
+Depending on your chosen template, begin by modifying the source files. For example, our Next.js starter app features a simple random cat generator powered by Stable Diffusion XL (SDXL).
+

homepage/pages/captain-sdk/joy.mdx

@@ -0,0 +1,108 @@
+import { Tabs } from 'nextra/components'
+
+# @captn/joy
+
+The `@captn/joy` package provides a suite of UI components and utilities that facilitate building attractive and consistent interfaces for applications within the Captain framework. Built on top of the MUI Joy library, it extends and customizes its components to fit the specific needs of Captain applications, ensuring seamless integration and enhanced user experiences.
+
+## Features
+
+- **Theme Customization**: Extends MUI Joy's theme capabilities to include custom colors and styles specific to the Captain ecosystem.
+- **App Frame**: Provides a structured container for application interfaces, integrating essential UI components such as title bars.
+- **Title Bar**: Customizable title bar component with window control actions (minimize, maximize, close).
+- **Custom Scrollbars**: Enhances the default scrollbar appearance for a more consistent and appealing look across platforms.
+
+## Installation
+
+To add the `@captn/joy` package to your project, run the following command:
+
+<Tabs items={["npm", "yarn", "pnpm"]}>
+	<Tabs.Tab>
+		```shell
+		npm install @captn/joy
+		```
+	</Tabs.Tab>
+	<Tabs.Tab>
+		```shell
+		yarn add @captn/joy
+		```
+	</Tabs.Tab>
+	<Tabs.Tab>
+		```shell
+		pnpm add @captn/joy
+		```
+	</Tabs.Tab>
+</Tabs>
+
+## Usage
+
+### Theme Customization
+
+`@captn/joy` extends MUI Joy's theme with additional colors and utility functions for more dynamic theming capabilities.
+
+```javascript
+import { ThemeProvider } from '@captn/joy';
+
+function MyApp() {
+  return (
+    <ThemeProvider>
+      {/* Your component tree */}
+    </ThemeProvider>
+  );
+}
+```
+
+### App Frame and Title Bar
+
+Embed your application within an `AppFrame` and include a `TitleBar` to handle window controls seamlessly and display your app title.
+
+```tsx
+import { AppFrame, TitleBar } from '@captn/joy';
+
+function MyApplication() {
+  return (
+      <AppFrame titleBar={<TitleBar>My Custom App</TitleBar>}>
+      {/* Content of your application */}
+    </AppFrame>
+  );
+}
+```
+
+### Custom Scrollbars
+
+Use the `CustomScrollbars` component to apply consistent scrollbars throughout your application.
+
+```tsx
+import { CustomScrollbars } from '@captn/joy';
+
+function MyScrollableComponent() {
+  return (
+    <CustomScrollbars>
+      {/* Scrollable content here */}
+    </CustomScrollbars>
+  );
+}
+```
+
+### Required Downloads
+
+Use the `RequiredDownloads` to show a note about required resources that need to be downloaded.
+
+
+```tsx
+import { RequiredDownloads } from "@captn/joy/required-downloads";
+
+import models from "./models.json";
+
+export default function App() {
+  return (
+    <div>
+      <RequiredDownloads allRequiredDownloads={models} />
+      {/* Rest of the application */}
+    </div>
+  );
+}
+```
+
+## Versioning
+
+We use [SemVer](http://semver.org/) for versioning. For the versions available, see the tags on this repository.