feat: better getting started content

Author: devvaannsh

docs/01-Getting Started/index.md

@@ -3,45 +3,59 @@ title: What is Phoenix Code?
 slug: /what-is-phoenix-code
 ---
 
-Phoenix Code is **Brackets, reborn** — a lightweight, web-first code editor built by the original Adobe Brackets team. It's designed for one thing above all: helping you **build the web**, with **Live Preview** sitting right at its heart.
+import React from 'react';
+import VideoPlayer from '@site/src/components/Video/player';
 
-If you just arrived, this page tells you what Phoenix is, why you might use it, and where to go next.
+**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
 
-Phoenix focuses on the front-end workflow and bundles the tools you actually use into a fast, open editor.
+Here's what sets Phoenix Code apart.
 
-- **Live Preview** — The flagship feature. Edit your HTML and CSS and watch the browser update in real time, with reverse-highlight that jumps from the rendered preview straight back to the source.
-- **Runs everywhere** — Use the native apps for macOS, Windows, and Linux, or run the full editor in your browser at [https://phcode.dev](https://phcode.dev) with no install at all — perfect for Chromebooks and tablets.
-- **Lightweight and fast** — Phoenix stays quick and responsive so the editor never gets in your way.
-- **Built-in tools** — Git, Terminal, Emmet, Beautify, and code hints all ship in the box, so things that used to need extensions just work.
-- **AI assistance** — The AI understands your rendered page, not just the raw source, so its help is grounded in what you actually see.
-- **Visual editing** — Color pickers, number-scrubbing dials, and gradient editors let you tweak values by feel instead of by guesswork.
-- **Open source** — Phoenix Code is released under the AGPL-3.0 license.
+- **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
 
-Everything Brackets had — and quite a bit more — is **free forever**. You can build complete websites without paying anything.
+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:
 
-**Phoenix Pro** adds advanced visual editing on top, including **Live Preview Edit** and **Design Mode**. You can see plans on the [pricing page](https://phcode.io/pricing).
+- **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.
 
-One important note: **Phoenix Pro is free for students and educators**. If you're learning or teaching, you get the full Pro experience at no cost.
+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 built for:
+Phoenix Code is for anyone building for the web, and especially:
 
-- **Front-end developers** who live in HTML, CSS, and JavaScript every day.
-- **Web designers** who want to see and shape changes visually as they go.
-- **Students and educators** who need a capable, no-cost editor that runs anywhere — including in the browser.
+- **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
 
-Ready to dive in? Here's where to go:
-
 - **Install it:** [Installation](/docs/intro)
 - **Create your first project:** [Your First Project](/docs/quick-start-project)
-- **See the flagship feature:** [Live Preview](/docs/Features/Live Preview)
-- **Try the AI assistant:** [AI Chat](/docs/Pro Features/ai-chat)
+- **Our flagship feature:** [Live Preview](/docs/Features/Live%20Preview)
+- **Try the AI assistant:** [AI](/docs/Pro%20Features/ai-chat)
 
-Want to skip the install entirely? Open [https://phcode.dev](https://phcode.dev) and start coding in your browser right now. Looking to download the desktop app? Head to [https://phcode.io](https://phcode.io).
+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).