Merge pull request #1 from mist-go/landing-page-and-intro-docs

Landing page and intro docs

content/docs/get-started.mdx

@@ -0,0 +1,66 @@
+---
+title: Get Started
+description: This guide will help you install the Mist CLI, understand its basic commands, and compile your first program.
+icon: Download
+---
+
+## Installation
+
+Mist is distributed through Cargo.
+
+Install the Mist compiler using:
+
+```bash title="Terminal"
+cargo install [email protected]
+```
+
+Verify using
+
+```bash title="Terminal"
+mist version
+```
+
+---
+
+## Usage
+
+```bash title="Compiles the project in the current directory"
+mist build
+```
+
+```bash title="Prints the compiler version"
+mist version
+```
+
+```bash title="Shows the help message and available commands"
+mist help
+```
+
+---
+
+## Hello World
+
+On your existing cargo project project (`cargo init` or `cargo new <name>`).
+
+```json title="mist.json"
+{
+  "src": "src",
+  "output": "build"
+}
+```
+
+```toml title="Cargo.toml"
+[[bin]]
+name = "main"
+path = "build/main.rs"
+```
+
+```bash title=".gitignore"
+/build
+```
+
+```cpp title="src/main.mist"
+void main() {
+    println!("Hello World!");
+}
+```

content/docs/index.mdx

@@ -1,13 +1,41 @@
 ---
-title: Hello World
+title: Introduction
-description: Your first document
+description: What Mist is and the thinking behind it.
+icon: Rocket
 ---
 
-Welcome to the docs! You can start writing documents in `/content/docs`.
+Mist is a systems programming language that compiles directly into Rust.
 
-## What is Next?
+It exists to make Rust-based development feel more direct and less mentally heavy, while preserving Rust’s performance model and ecosystem.
 
-<Cards>
+Mist does not replace Rust. It is another way of writing Rust-compatible systems code with a more ergonomic surface layer.
-  <Card title="Learn more about Next.js" href="https://nextjs.org/docs" />
+
-  <Card title="Learn more about Fumadocs" href="https://fumadocs.dev" />
+---
-</Cards>
+
+## Philosophy
+
+Mist is built around making systems programming feel calm, predictable, and easy to reason about.
+
+When working close to the system, developers constantly manage performance, correctness, and structure at the same time. As projects grow, this can create mental friction — not because the system is unclear, but because expressing it can feel heavy.
+
+Mist focuses on reducing that friction in how code is written and read, so attention stays on the problem being solved rather than the mechanics of expression.
+
+The language is shaped around clarity and flow: code should feel direct to write, and easy to understand when revisited.
+
+---
+
+## What Mist Is
+
+Mist is a Rust-compatible systems language with a compiled-to-Rust design.
+
+This means:
+
+- It integrates directly with the Rust ecosystem
+- It compiles into idiomatic Rust code
+- It preserves Rust’s performance characteristics
+- It has no runtime or garbage collector
+- It is designed to stay predictable and close to the metal
+
+Mist provides a more ergonomic way of authoring systems code while remaining fully grounded in Rust’s type system and execution model.
+
+It is especially designed for readability and structure in larger codebases, where Rust’s guarantees remain important but expression overhead becomes noticeable.

content/docs/test.mdx

@@ -1,17 +0,0 @@
----
-title: Components
-description: Components
----
-
-## Code Block
-
-```js
-console.log('Hello World');
-```
-
-## Cards
-
-<Cards>
-  <Card title="Learn more about Next.js" href="https://nextjs.org/docs" />
-  <Card title="Learn more about Fumadocs" href="https://fumadocs.dev" />
-</Cards>

public/logo.svg

@@ -0,0 +1,13 @@
+<svg width="344" height="344" viewBox="0 0 344 344" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_3_2)">
+<path d="M321.107 258.262C323.508 254.103 325 249.417 325 245.209V99.14C325 94.932 323.51 90.247 321.108 86.088L172 172.175L321.107 258.262Z" fill="#C44116"/>
+<path d="M185.25 341.193L311.75 268.159C315.394 266.055 318.706 262.422 321.107 258.262L172 172.175L22.8931 258.263C25.2941 262.422 28.6071 266.056 32.2501 268.159L158.75 341.193C166.037 345.401 177.963 345.401 185.25 341.193Z" fill="#8C2F0D"/>
+<path d="M321.108 86.087C318.706 81.927 315.393 78.294 311.75 76.19L185.25 3.156C177.963 -1.052 166.037 -1.052 158.75 3.156L32.25 76.19C24.962 80.397 19 90.725 19 99.14V245.209C19 249.417 20.491 254.103 22.893 258.262L172 172.175L321.108 86.087Z" fill="#D25228"/>
+<path d="M100 238V106H107.5L175 186.5L237 106H244.5V238" stroke="white" stroke-width="43"/>
+</g>
+<defs>
+<clipPath id="clip0_3_2">
+<rect width="344" height="344" fill="white"/>
+</clipPath>
+</defs>
+</svg>

src/app/(home)/page.tsx

@@ -1,16 +1,151 @@
-import Link from 'next/link';
+"use client";
+
+import MorphCode from "@/components/Morph";
+import { NewspaperIcon, RocketIcon } from "lucide-react";
+import Link from "next/link";
+import { useEffect, useRef, useState } from "react";
+
+export const mistShowcase = [
+  {
+    title: "Rust.. With ergonomics?",
+    description:
+      "C/C++ style syntax for comfort. Mist is designed for fast, readable systems code with minimal friction compared to raw Rust.",
+    code: `void main() {
+    println!("Hello, World!");
+
+    greet("Developer");
+}
+
+public void greet(str* name) {
+  // Familiar pointer ergonomics with Rust safety
+  String greeting = name.to_string();
+  println!("Hello, {}!", greeting);
+}`,
+    cta: true,
+  },
+
+  {
+    title: "Fast and works with Rust",
+    description:
+      "All of your favorite Rust libraries work with Mist. It compiles directly into efficient Rust code with zero-cost abstractions and no runtime overhead.",
+    code: `use <std::vec::Vec>;
+use <external_lib>;
+
+void process_data() {
+    var list = new Vec(); // Zero-cost abstraction
+    external_lib::perform_task(list);
+}`,
+  },
+
+  {
+    title: "Class and Type System",
+    description:
+      "Classes are syntactic sugar for Rust structs. Using 'extends' provides inheritance-style syntax over struct composition, compiling into the underlying Rust type system.",
+    code: `public class Entity {
+    u32 id;
+}
+
+// Compiles to struct composition in Rust
+public struct Player extends Entity {
+    String username;
+
+    public constructor(u32 id, str* name) {
+        self.id = id;
+        self.username = name.to_string();
+    }
+}`,
+  },
+
+  {
+    title: "Explicit Mutability",
+    description:
+      "Mist maintains memory intent through explicit self pointers and mutability modifiers.",
+    code: `public void update_id(self mut*, u32 new_id) {
+    self.id = new_id;
+}`,
+  },
+];
+
+// Sub-component to handle individual section observation
+function ShowSection({
+  show,
+  setActiveCode,
+}: {
+  show: { title: string; description: string; code: string; cta?: boolean };
+  setActiveCode: (v: string) => void;
+}) {
+  const ref = useRef(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setActiveCode(show.code);
+        }
+      },
+      { threshold: 0.5 },
+    );
+
+    if (ref.current) observer.observe(ref.current);
+    return () => observer.disconnect();
+  }, [show.code, setActiveCode]);
+
+  return (
+    <section
+      ref={ref}
+      className="h-svh p-10 md:p-20 flex flex-col gap-2 items-center justify-center"
+    >
+      <h1 className="text-5xl bg-linear-to-r from-fd-primary to-fd-muted-foreground bg-clip-text text-transparent h-13">
+        {show.title}
+      </h1>
+      <p className="text-xl text-zinc-400 text-center">{show.description}</p>
+      {show.cta && (
+        <div className="mt-3 lg:mt-1 flex gap-6">
+          <Link
+            className="bg-fd-primary/15 text-fd-primary/90 p-3 px-4.5 rounded-xl cursor-pointer hover:bg-fd-primary/20 hover:text-fd-primary flex gap-2 items-center"
+            href="/docs/get-started"
+          >
+            <RocketIcon className="w-5 h-5" />
+            Get Started
+          </Link>
+
+          <Link
+            className="bg-fd-card-foreground/13 text-fd-card-foreground/80 p-3 px-4.5 rounded-xl cursor-pointer hover:bg-fd-card-foreground/16 hover:text-fd-card-foreground/83 flex gap-2 items-center"
+            href="/blog"
+          >
+            <NewspaperIcon className="w-5 h-5" />
+            View Blog
+          </Link>
+        </div>
+      )}
+    </section>
+  );
+}
 
 export default function HomePage() {
+  const [currentText, setCurrentText] = useState(mistShowcase[0]?.code || "");
+
   return (
-    <div className="flex flex-col justify-center text-center flex-1">
+    <div className="flex w-full flex-col md:flex-row">
-      <h1 className="text-2xl font-bold mb-4">Hello World</h1>
+      <div className="order-1 md:order-2 w-full md:w-[40vw] md:h-svh sticky top-20 md:top-0 flex items-center justify-center z-10 bg-background pb-4 md:pb-0">
-      <p>
+        <div className="md:w-full md:pl-14 overflow-hidden">
-        You can open{' '}
+          <div className="w-max h-auto border border-fd-border p-5 rounded-xl min-h-24 backdrop-blur bg-black/20">
-        <Link href="/docs" className="font-medium underline">
+            <MorphCode code={currentText} />
-          /docs
+          </div>
-        </Link>{' '}
+        </div>
-        and see the documentation.
+      </div>
-      </p>
+
+      <div className="flex-1 order-2 md:order-1">
+        <div className="-mt-30 md:mt-0">
+          {mistShowcase.map((show) => (
+            <ShowSection
+              key={show.title}
+              show={show}
+              setActiveCode={setCurrentText}
+            />
+          ))}
+        </div>
+      </div>
     </div>
   );
 }

src/app/global.css

@@ -1,7 +1,46 @@
 @import 'tailwindcss';
-@import 'fumadocs-ui/css/ruby.css';
+@import 'fumadocs-ui/css/lib/default-colors.css';
 @import 'fumadocs-ui/css/preset.css';
 
+@theme {
+  --color-fd-background: hsl(75, 45%, 96%);
+  --color-fd-foreground: hsl(75, 35%, 18%);
+  --color-fd-primary: hsl(80, 60%, 40%);
+  --color-fd-primary-foreground: hsl(80, 100%, 16%);
+  --color-fd-border: hsla(80, 35%, 70%, 0.5);
+  --color-fd-ring: hsl(80, 60%, 40%);
+  --color-fd-accent: hsl(75, 50%, 90%);
+  --color-fd-accent-foreground: hsl(80, 60%, 22%);
+  --color-fd-muted: hsl(75, 40%, 92%);
+  --color-fd-muted-foreground: hsl(75, 25%, 45%);
+  --color-fd-secondary: hsl(80, 45%, 88%);
+  --color-fd-secondary-foreground: hsl(80, 50%, 18%);
+  --color-fd-card: hsl(75, 45%, 94%);
+  --color-fd-card-foreground: hsl(75, 35%, 18%);
+  --color-fd-popover: hsl(75, 45%, 97%);
+  --color-fd-popover-foreground: hsl(75, 35%, 18%);
+}
+
+.dark {
+  --color-fd-background: hsl(0, 0%, 2%);
+  --color-fd-foreground: hsl(75, 35%, 88%);
+  --color-fd-primary: hsl(80, 60%, 55%);
+  --color-fd-primary-foreground: hsl(0, 0%, 9%);
+  --color-fd-border: hsl(0, 0%, 50%, 0.2);
+  --color-fd-ring: hsl(80, 60%, 55%);
+  --color-fd-accent: hsl(0, 0%, 15%);
+  --color-fd-accent-foreground: hsl(80, 60%, 75%);
+  --color-fd-muted: hsl(0, 0%, 8%);
+  --color-fd-muted-foreground: hsl(0, 0%, 60%);
+  --color-fd-secondary: hsl(0, 0%, 12.9%);
+  --color-fd-secondary-foreground: hsl(0, 0%, 98%);
+  --color-fd-card: hsl(0, 0%, 4%);
+  --color-fd-card-foreground: hsl(0, 0%, 98%);
+  --color-fd-popover: hsl(0, 0%, 4%);
+  --color-fd-popover-foreground: hsl(0, 0%, 98%);
+}
+
+
 html {
   scrollbar-gutter: stable;
 }

src/components/Morph.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import { BundledLanguage, codeToTokens } from "shiki";
+import { motion, AnimatePresence } from "framer-motion";
+import { useEffect, useState } from "react";
+
+interface Props {
+  code: string;
+  lang?: BundledLanguage;
+}
+
+export default function MorphCode({ code, lang = "rust" }: Props) {
+  const [lines, setLines] = useState<any[][]>([]);
+
+  useEffect(() => {
+    async function run() {
+      const result = await codeToTokens(code, {
+        lang,
+        theme: "github-dark",
+      });
+
+      const rawLines = code.split("\n");
+
+      const fixed = rawLines.map((_, i) => {
+        return (
+          result.tokens[i] ?? [
+            {
+              content: "\n",
+              color: undefined,
+            },
+          ]
+        );
+      });
+
+      setLines(fixed);
+    }
+
+    run();
+  }, [code, lang]);
+
+  return (
+    <pre className="text-sm">
+      <code>
+        <AnimatePresence mode="popLayout">
+          {lines.map((line, lineIndex) => (
+            <div key={lineIndex} className="flex min-h-[1em]">
+              {line.map((token, tokenIndex) => (
+                <motion.span
+                  key={`${lineIndex}-${tokenIndex}`}
+                  layoutId={`${lineIndex}-${tokenIndex}`}
+                  layout
+                  initial={{ opacity: 0, y: 6 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -6 }}
+                  transition={{ duration: 0.35 }}
+                  style={{
+                    color: token.color,
+                    whiteSpace: "pre",
+                  }}
+                >
+                  {token.content}
+                </motion.span>
+              ))}
+            </div>
+          ))}
+        </AnimatePresence>
+      </code>
+    </pre>
+  );
+}

src/lib/layout.shared.tsx

@@ -1,11 +1,16 @@
-import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
+import type { BaseLayoutProps } from "fumadocs-ui/layouts/shared";
-import { appName, gitConfig } from './shared';
+import { appName, gitConfig } from "./shared";
 
 export function baseOptions(): BaseLayoutProps {
   return {
     nav: {
       // JSX supported
-      title: appName,
+      title: (
+        <div className="flex gap-2 items-center">
+          <img src="/logo.svg" alt="Logo" className="w-7 h-7" />
+          {appName}
+        </div>
+      ),
     },
     githubUrl: `https://github.com/${gitConfig.user}/${gitConfig.repo}`,
   };

src/lib/shared.ts

@@ -1,11 +1,10 @@
-export const appName = 'My App';
+export const appName = 'Mist';
 export const docsRoute = '/docs';
 export const docsImageRoute = '/og/docs';
 export const docsContentRoute = '/llms.mdx/docs';
 
-// fill this with your actual GitHub info, for example:
 export const gitConfig = {
-  user: 'fuma-nama',
+  user: 'mist-go',
-  repo: 'fumadocs',
+  repo: 'mist',
-  branch: 'main',
+  branch: 'master',
 };