solid intro page

Author: LadyBluenotes

src/routes/getting-started/installation.mdx

@@ -10,18 +10,16 @@ To see how to get started quickly, check out the [Quick Start Guide](/getting-st
 
 ## Manual Setup Guide
 
-### 1. Create Project Directory
+### 1. Create Project Directory & initialize 
 
 Create a new directory for your project and navigate into it:
 
-```sh
+```sh 
 mkdir solid-project
 cd solid-project
 ```
 
-### 2. Initialize Package Configuration
-
-Create a `package.json` file to manage dependencies and scripts:
+After creating and navigating into your project directory, you can initialize a new Git repository:
 
 ```sh title="npm" tab="package-manager"
 npm init -y
@@ -39,7 +37,7 @@ yarn init -y
 bun init
 ```
 
-### 3. Install Solid and Build Tools
+### 2. Install Solid and Build Tools
 
 Install Solid as a dependency:
 
@@ -54,7 +52,7 @@ Vite is the recommended build tool for Solid projects due to its speed and ease
 vite vite-plugin-solid
 ```
 
-### 4. Configure Vite
+### 3. Configure Vite
 
 To configure Vite for Solid, create a `vite.config.js` file in your project root:
 
@@ -73,7 +71,7 @@ export default defineConfig({
 });
 ```
 
-### 5. Create HTML Template
+### 4. Create HTML Template
 
 Create an `index.html` file in your project root:
 
@@ -94,7 +92,7 @@ Create an `index.html` file in your project root:
 </html>
 ```
 
-### 6. Create Source Directory and Files
+### 5. Create Source Directory and Files
 
 Create the source directory and core application files:
 
@@ -149,7 +147,7 @@ body {
 }
 ```
 
-### 7. Add Build Scripts
+### 6. Add Build Scripts
 
 Update your `package.json` to include the following scripts:
 - `dev` - Start the development server
@@ -170,13 +168,13 @@ Update your `package.json` to include the following scripts:
 }
 ```
 
-### 8. Start Development Server
+### 7. Start Development Server
 
 ```package-run
 dev
 ```
 
-### 9. Open in Browser
+### 8. Open in Browser
 
 The development server will start on `http://localhost:3000`. Open this URL in your browser and begin developing your Solid application!
 

src/routes/getting-started/intro.mdx

@@ -1,35 +1,62 @@
 ---
-title: Intro to Solid
+title: Introduction to Solid
 order: 3
 ---
 
-[TODO: 
-- Input on what should be included in a Solid intro
-- Answer questions such as: (maybe)
-    - What are the key features of Solid?
-    - Why use
-    - What are the benefits of using Solid?
-    - Ecosystem
-]
+Solid is a declarative JavaScript framework for building fast, reactive user interfaces. 
+With its fine-grained reactivity system and compilation-driven approach, Solid delivers exceptional performance while maintaining a developer-friendly experience similar to React.
 
-Solid is a modern JavaScript framework designed to build responsive and high-performing user interfaces.
-It prioritizes a simple, yet predictable, developer experience, making it a great choice for developers of all skill levels.
+## What Makes Solid Different?
 
-## What is Solid?
+Solid takes a unique approach to building web applications through **fine-grained reactivity**. Unlike frameworks that rely on a Virtual DOM, Solid compiles your components into optimized JavaScript that updates the real DOM directly—only changing what needs to change, when it needs to change.
 
-As a JavaScript framework, Solid embraces reactivity and fine-grained updates.
-What this means is that Solid can efficiently update the user interface by only re-rendering the parts of the UI that have changed, rather than the entire page. 
+This means your applications are faster, more memory-efficient, and more responsive out of the box.
 
-Traditionally, when a change occurs, the entire page would need to reload to display the updated information.
-With Solid's fine-grained reactive system, updates are only applied to the parts of the page that need to be updated.
-This decreases work and can result in faster load times as well as a smoother user experience overall.
+## Core Principles
 
-## The mental model
+- **Fine-Grained Reactivity**: Solid tracks dependencies at the most granular level, ensuring only affected parts of your UI update when data changes.
+- **No Virtual DOM**: Direct DOM updates eliminate diffing overhead and improve performance.
+- **Compilation-Based**: Components are compiled at build time into highly optimized JavaScript with minimal runtime overhead.
+- **Familiar Syntax**: JSX-based components make Solid approachable for developers coming from React.
+- **TypeScript First**: Built with TypeScript support from the ground up for a robust development experience.
 
-[TODO: Simple explanation of the mental model behind Solid]
+## Why Choose Solid?
 
-## Where to go next
+### Performance
 
-- [Quick Start Guide](https://solidjs.com/docs/getting-started)
-- [Reactivity Overview](/concepts/reactivity/)
-- [Component Overview](/concepts/components/)
+Solid consistently ranks at the top of JavaScript framework benchmarks. By eliminating the Virtual DOM and leveraging true reactivity, Solid achieves rendering speeds that rival vanilla JavaScript.
+
+### Developer Experience
+
+Write components using familiar JSX syntax while enjoying a simple, predictable API. Solid's reactivity primitives (`createSignal`, `createEffect`, `createMemo`) are intuitive and powerful, eliminating the need for complex state management libraries.
+
+### Small Bundle Size
+
+Solid's core is only a few kilobytes, making it ideal for performance-critical applications and mobile-first development.
+
+### Modern Features
+
+- Built-in support for Server-Side Rendering (SSR)
+- Streaming and progressive hydration
+- Strong TypeScript integration
+- Flexible routing and state management
+- Growing ecosystem of tools and libraries
+
+## Who Is Solid For?
+
+Solid is perfect for:
+- Developers seeking maximum performance without sacrificing developer experience
+- Teams building complex, interactive applications
+- Projects where bundle size and runtime efficiency matter
+- Developers familiar with React looking for a more performant alternative
+
+## Getting Started
+
+Ready to build with Solid? Here's where to go next:
+
+- [Quick Start Guide](/getting-started/quick-start) - Build your first Solid app
+- [Understanding Reactivity](/concepts/reactivity) - Learn Solid's reactive primitives
+- [Components Guide](/concepts/components) - Master Solid components
+- [Tutorial](/tutorial/introduction) - Step-by-step interactive learning
+
+Welcome to Solid—let's build something fast! 🚀