Complete docs reorganization

blog/2026-03-04-phoenix-code-vs-brackets/index.md

@@ -70,19 +70,19 @@ These are the features the Brackets community asked for — and we finally built
 
 Brackets' live preview was view-only. You could see changes reflected in real time, but you always had to make edits in the code. With [Phoenix Pro](/docs/Pro%20Features/live-preview-edit), you can click on any element in the live preview and edit it right there — change text, swap images by dragging, rearrange elements visually. The source code updates automatically.
 
-![Phoenix Code live preview modes for editing HTML and CSS visually](../../docs/13-Features/images/livePreview/lp-mode.png)
+![Phoenix Code live preview modes for editing HTML and CSS visually](../../docs/images/livePreview/lp-mode.png)
 
 ### Visual CSS Editing
 
 Brackets had inline color pickers — Phoenix Code keeps those and adds number dials you can scrub to adjust CSS values like margins, padding, font sizes, and more. Hover over a number, drag to adjust, and see the result update in live preview instantly.
 
-![Phoenix Code CSS number dial for adjusting margins and padding](../../docs/13-Features/images/number-dial.gif)
+![Phoenix Code CSS number dial for adjusting margins and padding](../../docs/images/number-dial.gif)
 
 ### Built-in Git
 
 Phoenix Code ships with native Git support based on the familiar Brackets Git extension, addressing many of its earlier limitations with a simpler UX and improved reliability. Commit, push, pull, diff, and branch management, all built in.
 
-![Built-in Git integration in Phoenix Code — commit and push](../../docs/13-Features/images/git-images/git-commit.png)
+![Built-in Git integration in Phoenix Code — commit and push](../../docs/images/git-images/git-commit.png)
 
 ### Runs in Your Browser
 
@@ -92,7 +92,7 @@ Open [phcode.dev](https://phcode.dev) and start editing — no install or admin
 
 Inspect spacing between elements, measure distances, and check alignment directly in the live preview. If you work from design mockups, this replaces the constant back-and-forth between your editor and a separate design tool.
 
-![Phoenix Code measurement and inspection tools in live preview](../../docs/12-Pro%20Features/images/measurements.png)
+![Phoenix Code measurement and inspection tools in live preview](../../docs/images/pro/measurements.png)
 
 ---
 

docs/01-Getting Started/01-installation.md

@@ -0,0 +1,184 @@
+---
+title: Installation Guide
+slug: "/intro"
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+# Phoenix Code Installation Guide
+
+Phoenix Code is a text editor designed to make coding as intuitive and fun as playing a video game — specially crafted for web developers, designers, and students. This guide walks you through downloading and installing Phoenix Code on Windows, macOS, and Linux, or running it straight from your browser with no install at all.
+
+## Download
+
+Visit the official website — [phcode.io](https://phcode.io) — and click the **Download** button to grab the installer for your operating system.
+
+![Download Phoenix Code from the website](../images/Website/download.png)
+
+> **Linux users:** see [Installing on Linux](#linux) below for the one-line terminal installer.
+
+### Choosing a different installer
+
+If you need a build for another operating system, or have specific requirements:
+
+1. Click the **Download** drop-down on the website.
+2. Select the installer you need from the list.
+
+![Download options drop-down](../images/Website/downloadOptions.png)
+
+Phoenix Code supports a wide range of operating systems:
+
+- **macOS** — Apple Silicon (M1+) and Intel chipsets
+- **Windows** — x64 architectures
+- **Linux** — Ubuntu, Debian, Pop!_OS, Fedora, Arch, and more
+
+## Install
+
+### Windows & macOS
+
+Run the downloaded installer and follow the on-screen instructions. Once it finishes, launch Phoenix Code and you're ready to start building.
+
+### Linux {#linux}
+
+Open a terminal and run the official installer script — copy it from the website or use the command below:
+
+```bash
+wget -qO- https://updates.phcode.io/linux/installer.sh | bash
+```
+
+![Linux install command](../images/Website/linuxCmd.png)
+
+This installs Phoenix Code along with all required dependencies, and sets up app-drawer shortcuts and file associations automatically. It works on all major distributions, including Ubuntu, Debian, Fedora, and Arch-based systems.
+
+Need to install by hand, check dependencies, or uninstall? See [Advanced Linux installation](#linux-advanced) below.
+
+## Use it in the browser
+
+Prefer not to install anything? Run the full editor right in your browser at [phcode.dev](https://phcode.dev) — perfect for Chromebooks, tablets, or just trying things out. Everything runs locally in the browser, with nothing to download.
+
+---
+
+## Advanced Linux installation {#linux-advanced}
+
+The one-line installer above is all most users need. The sections below cover manual installation, runtime dependencies, and common questions.
+
+### Uninstalling
+
+To remove an automatic installation, run:
+
+```bash
+wget -qO- https://updates.phcode.io/linux/installer.sh | bash -s -- --uninstall
+```
+
+For a manual installation, delete the folder where you placed the Phoenix Code app, along with any related files.
+
+### Manual installation
+
+If automatic installation fails, or you prefer to install by hand:
+
+1. **Check your GLIBC version:**
+   ```bash
+   ldd --version | awk '/ldd/{print $NF}'
+   ```
+
+2. **Download the package:** visit the [Phoenix Code releases page](https://github.com/phcode-dev/phoenix-desktop/releases) and download a build compatible with your GLIBC version.
+
+3. **Extract it:**
+   ```bash
+   tar -xvf phoenix_code_version.tar.gz
+   ```
+
+4. **Read the bundled instructions:**
+   ```bash
+   cat extracted_folder/ReadMe.txt
+   ```
+
+5. **Follow the steps** in `ReadMe.txt` to complete the installation.
+
+### Desktop environment compatibility
+
+Phoenix Code is tested on both **GNOME** and **KDE**. Other desktop environments may work via [manual installation](#manual-installation).
+
+### Dependencies
+
+If Phoenix doesn't start after installing, restart your system and confirm the required dependencies for your distribution are installed:
+
+<Tabs
+  defaultValue="ubuntu"
+  values={[
+    { label: 'Ubuntu/Debian', value: 'ubuntu' },
+    { label: 'Fedora/Red Hat', value: 'fedora' },
+    { label: 'Arch Linux', value: 'arch' },
+  ]}>
+
+<TabItem value="ubuntu">
+
+Update your package list:
+```bash
+sudo apt update
+```
+
+Install WebKitGTK and GTK:
+```bash
+sudo apt install libgtk-3-0 libwebkit2gtk-4.0-37
+```
+*Note: In Ubuntu 22+ versions, WebKitGTK may be pre-installed.*
+
+Install optional GStreamer plugins for media playback:
+```bash
+sudo apt install gstreamer1.0-plugins-base gstreamer1.0-plugins-good gstreamer1.0-plugins-bad gstreamer1.0-plugins-ugly gstreamer1.0-tools gstreamer1.0-libav
+```
+
+</TabItem>
+<TabItem value="fedora">
+
+Update your package list:
+```bash
+sudo dnf update
+```
+
+Install WebKitGTK and GTK:
+```bash
+sudo dnf install webkit2gtk3 gtk3
+```
+
+Install optional GStreamer plugins for media playback:
+```bash
+sudo dnf install gstreamer1-plugins-base gstreamer1-plugins-good gstreamer1-plugins-bad-free gstreamer1-plugins-bad-freeworld gstreamer1-plugins-ugly gstreamer1-libav
+```
+
+</TabItem>
+<TabItem value="arch">
+
+Ensure your system is up to date:
+```bash
+sudo pacman -Syu
+```
+
+Install WebKitGTK and GTK:
+```bash
+sudo pacman -S webkit2gtk gtk3
+```
+
+Install optional GStreamer plugins for media playback:
+```bash
+sudo pacman -S gst-plugins-base gst-plugins-good gst-plugins-bad gst-plugins-ugly gst-libav
+```
+
+</TabItem>
+</Tabs>
+
+### FAQ
+
+**How can I verify my distribution is supported?**
+
+Run the [one-line installer](#linux). If it completes successfully, your distribution is supported.
+
+**How do I upgrade Phoenix Code?**
+
+For automatic installations, you'll get an update notification in the app itself. For manual installations, repeat the [manual installation](#manual-installation) steps.
+
+**Phoenix won't start after installing — what can I do?**
+
+Restart your system, then confirm the [dependencies](#dependencies) for your distribution are installed.

docs/10-quick-start-project.md → docs/01-Getting Started/02-quick-start-project.md

@@ -1,5 +1,6 @@
 ---
 title: Quick Start Project
+slug: "/quick-start-project"
 ---
 
 import React from 'react';
@@ -11,12 +12,12 @@ This section provides an overview of how to create and manage projects using the
 ## Start Project Dialog
 When you open the Phoenix Code desktop app or browser app, you are greeted with the `Start Project Dialog` box. This serves as a quick access hub, allowing you to create new projects, resume recent ones, import from GitHub and many more.
 
-![Start Project Dialog Image](images/quickStartProject/start-project-dialog.png "Start Project Dialog")
+![Start Project Dialog Image](../images/quickStartProject/start-project-dialog.png "Start Project Dialog")
 
 
 > You can reopen the Start Project Dialog box anytime by clicking here.
 
-![Reopen Start Project Dialog Image](images/quickStartProject/reopen-start-project-dialog.png "Reopen Start Project Dialog image by clicking on the folder icon")
+![Reopen Start Project Dialog Image](../images/quickStartProject/reopen-start-project-dialog.png "Reopen Start Project Dialog image by clicking on the folder icon")
 
 Additionally, if you prefer that the Start Project Dialog doesn't appear every time you open Phoenix Code, follow these steps:
 1. Click the `folder icon`  in the top left corner to open the Start Project Dialog, or alternatively you can restart Phoenix Code to have it appear automatically.
@@ -48,7 +49,7 @@ You can open a folder from your desktop in Phoenix Code by following these steps
 
 > The **Open Folder** feature is not supported in Firefox browser due to local folder access restrictions. Please use Chrome, Edge, or Opera for working with local folders.
 
-![Open Folder Image](images/quickStartProject/open-folder.png "Click on Open Folder to work with local folders")
+![Open Folder Image](../images/quickStartProject/open-folder.png "Click on Open Folder to work with local folders")
 
 
 
@@ -94,11 +95,11 @@ In the Start Project Dialog, the **`Recent Projects`** section displays a list o
 
 > To remove a project from the Recent Projects list, click the **cross** button next to the project name.
 
-![Recent Projects Image](images/quickStartProject/recent-projects.png "Recent Projects displays the list of projects you've recently worked on")
+![Recent Projects Image](../images/quickStartProject/recent-projects.png "Recent Projects displays the list of projects you've recently worked on")
 
 If no recent projects are available, a YouTube video explaining the Start Project dialog options will be displayed instead.
 
-![No Recent Projects Image](images/quickStartProject/start-project-dialog.png "If no Recent Projects are available, link to a youtube vide will be displayed")
+![No Recent Projects Image](../images/quickStartProject/start-project-dialog.png "If no Recent Projects are available, link to a youtube vide will be displayed")
 
 
 

docs/01-Getting Started/_category_.json

@@ -0,0 +1,5 @@
+{
+    "label": "Getting Started",
+    "collapsible": true,
+    "collapsed": true
+}

docs/01-Getting Started/index.md

@@ -0,0 +1,61 @@
+---
+title: What is Phoenix Code?
+slug: /what-is-phoenix-code
+---
+
+import React from 'react';
+import VideoPlayer from '@site/src/components/Video/player';
+
+**Phoenix Code** is a lightweight, web-first code editor built by the same team behind [Brackets](https://brackets.io). It's a front-end editor centered on **Live Preview**: edit your HTML and CSS and watch the page render as you type, or edit the rendered page directly and let Phoenix Code update your source code automatically.
+
+<VideoPlayer
+  src="https://docs-images.phcode.dev/videos/phcode.io-site/landing-page-final.mp4"
+/>
+
+This page covers what Phoenix Code is, why you might use it, and where to go next.
+
+## Why Phoenix Code
+
+Here's what sets Phoenix Code apart.
+
+- **Live Preview** — Edit your HTML and CSS and watch the page update in real time. Phoenix Code goes a step further: edit the preview directly to change text, add and rearrange elements, or swap images, and your source code updates automatically.
+- **AI assistant** — A built-in AI agent (powered by Claude Code) works alongside you. It reads and edits your files, runs terminal commands, and because it's wired into Live Preview, it can see your running page, take screenshots, and verify its own work. Plan, Edit, and Full Auto modes keep you in control, and every change it makes is reversible.
+- **Runs everywhere** — Native desktop apps for macOS, Windows, and Linux from [phcode.io](https://phcode.io), or the full editor in your browser at [phcode.dev](https://phcode.dev) with nothing to install.
+- **Built-in tools** — Git, Terminal, Emmet, Beautify, and code hints all ship in the editor, so you can start working right away.
+- **Visual editing** — Color pickers, gradient editors, and draggable number scrubbing let you adjust CSS values directly and see the result immediately.
+- **Extensions** — Add features, themes, and language support from the built-in Extension Manager, with a marketplace of community extensions and themes.
+- **Open source** — Phoenix Code is open source, released under the AGPL-3.0 license.
+
+## Free vs Pro
+
+You can build complete websites for free. The core editor, Live Preview, Design Mode, Git, Terminal, and code tools are all included at no cost.
+
+**Phoenix Pro** adds:
+
+- **Live Preview Edit** — edit the rendered page directly and sync changes back to your source automatically.
+- **AI** — unlimited AI use (free users get a daily and monthly chat limit).
+- **Device Preview** — check how your page looks at phone, tablet, and desktop sizes.
+- **Measurements** — ruler lines from a selected element to the edges of the page, labeled with exact pixel positions, for precise alignment.
+- **Image Gallery** — browse stock images from providers like Unsplash and Pexels and embed or download them into your project without leaving Phoenix Code.
+- **Markdown Editor** — edit Markdown directly in the preview with a full rich-text editor that keeps your source in sync.
+
+See plans on the [pricing page](https://phcode.io/pricing).
+
+**Phoenix Pro is free for students and educators.** If you have a `.edu` or `.ac.*` email, or your school requests an educational volume license, you get the full Pro feature set at no cost. See [Phoenix Pro for Education](/docs/phoenix-pro-school).
+
+## Who it's for
+
+Phoenix Code is for anyone building for the web, and especially:
+
+- **Front-end developers** who work in HTML, CSS, and JavaScript.
+- **Web designers** who want to edit a page visually and see changes immediately.
+- **Students and educators** who need a capable, no-cost editor that also runs in the browser.
+
+## Next steps
+
+- **Install it:** [Installation](/docs/intro)
+- **Create your first project:** [Your First Project](/docs/quick-start-project)
+- **Our flagship feature:** [Live Preview](/docs/Features/Live%20Preview)
+- **Try the AI assistant:** [AI](/docs/Pro%20Features/ai-chat)
+
+Want to skip installing? Open [phcode.dev](https://phcode.dev) and start coding in your browser. Prefer the desktop app? Download it from [phcode.io](https://phcode.io).