@nitronjs/framework 0.2.0 → 0.2.2

package/README.md

@@ -1,102 +1,138 @@
 # NitronJS
 
-A modern and extensible Node.js MVC framework built on Fastify. NitronJS focuses on clean architecture, modular structure, and developer productivity, offering built-in routing, middleware, configuration management, CLI tooling, and native React integration for scalable full-stack applications.
+A modern full-stack Node.js framework with React Server Components, Islands Architecture, and built-in tooling. Built on React and Fastify for high performance and developer productivity.
 
-## Features
+## Why NitronJS?
 
-- **MVC Architecture** - Clean separation of concerns with Models, Views, and Controllers
-- **React SSR** - Built-in React server-side rendering with TypeScript support
-- **Fast & Lightweight** - Built on Fastify for high performance
-- **CLI Tools** - Powerful command-line interface for scaffolding and development
-- **Database ORM** - Intuitive query builder and model system for MySQL
-- **Hot Reload** - Development mode with automatic reloading
-- **Middleware System** - Flexible middleware pipeline with route-specific middleware
-- **Session Management** - Built-in session support with multiple drivers
-- **Security** - CSRF protection, authentication, and input validation
-- **Modern Build System** - esbuild + PostCSS + Tailwind CSS integration
+- **Zero Config** - Start building immediately. No webpack, no babel config, no boilerplate
+- **Server Components by Default** - All components render on the server. Add `"use client"` only where needed
+- **Islands Architecture** - Client components hydrate independently, keeping your pages fast
+- **Instant HMR** - Changes reflect immediately without losing state
+- **Full-Stack** - Database ORM, authentication, sessions, validation all built-in
 
 ## Installation
 
-Create a new NitronJS project:
-
 ```bash
 npx @nitronjs/framework my-app
 cd my-app
+npm run dev
 ```
 
-Dependencies are installed automatically during project creation.
+Your app will be running at `http://localhost:3000`
 
-## Quick Start
+## Core Concepts
 
-1. **Configure your database** in `config/database.js`
+### Server Components (Default)
 
-2. **Run migrations**:
-```bash
-npx njs migrate --seed
-```
+Every `.tsx` file in `resources/views/` is a Server Component by default. They run on the server, have full access to your database, file system, and never ship JavaScript to the browser.
 
-3. **Start development server**:
-```bash
-npm run dev
+```tsx
+// resources/views/Site/Home.tsx
+import User from '@/app/Models/User.js';
+
+export default async function Home() {
+    const users = await User.get(); // Direct database access
+
+    return (
+        <div>
+            <h1>Users</h1>
+            <ul>
+                {users.map(user => (
+                    <li key={user.id}>{user.name}</li>
+                ))}
+            </ul>
+        </div>
+    );
+}
 ```
 
-Your application will be running at `http://localhost:3000`
+### Client Components
 
-## CLI Commands
+Add `"use client"` at the top of a file to make it interactive. These components hydrate on the browser and can use React hooks.
 
-NitronJS comes with a powerful CLI tool (`njs`):
+```tsx
+// resources/views/Components/Counter.tsx
+"use client";
+import { useState } from 'react';
 
-### Development & Build
-```bash
-njs dev           # Start development server with hot reload
-njs build         # Build views for production
-njs start         # Start production server
-```
+export default function Counter() {
+    const [count, setCount] = useState(0);
 
-### Database
-```bash
-njs migrate              # Run pending migrations
-njs migrate:fresh        # Drop all tables and re-run migrations
-njs migrate:fresh --seed # Drop, migrate, and seed
-njs seed                 # Run database seeders
+    return (
+        <button onClick={() => setCount(count + 1)}>
+            Count: {count}
+        </button>
+    );
+}
 ```
 
-### Code Generation
-```bash
-njs make:controller <name>    # Generate a new controller
-njs make:model <name>          # Generate a new model
-njs make:middleware <name>     # Generate a new middleware
-njs make:migration <name>      # Generate a new migration
-njs make:seeder <name>         # Generate a new seeder
+Use client components inside server components:
+
+```tsx
+// resources/views/Site/Home.tsx (Server Component)
+import Counter from '../Components/Counter';
+
+export default function Home() {
+    return (
+        <div>
+            <h1>Welcome</h1>
+            <Counter /> {/* Hydrates as an island */}
+        </div>
+    );
+}
 ```
 
-### Utilities
-```bash
-njs storage:link    # Create symbolic link for storage
+### Layouts
+
+Create `Layout.tsx` files to wrap pages. Layouts are discovered automatically by walking up the directory tree.
+
+```
+resources/views/
+├── Layout.tsx             # Root layout (wraps everything)
+├── Site/
+│   └── Home.tsx           # Uses root Layout
+└── Admin/
+    ├── Layout.tsx         # Admin layout (nested inside root)
+    └── Dashboard.tsx      # Uses both layouts
 ```
 
-## Project Structure
+```tsx
+// resources/views/Layout.tsx
+export default function RootLayout({ children }) {
+    return (
+        <html lang="en">
+            <head>
+                <meta charSet="UTF-8" />
+                <title>My App</title>
+            </head>
+            <body>
+                {children}
+            </body>
+        </html>
+    );
+}
+```
 
+```tsx
+// resources/views/Admin/Layout.tsx
+export default function AdminLayout({ children }) {
+    return (
+        <div className="admin-wrapper">
+            <nav>Admin Navigation</nav>
+            <main>{children}</main>
+        </div>
+    );
+}
 ```
-my-app/
-├── app/
-│   ├── Controllers/       # Request handlers
-│   ├── Middlewares/       # Custom middleware
-│   └── Models/           # Database models
-├── config/               # Configuration files
-│   ├── app.js
-│   ├── database.js
-│   └── server.js
-├── database/
-│   ├── migrations/       # Database migrations
-│   └── seeders/         # Database seeders
-├── public/              # Static assets
-├── resources/
-│   ├── css/            # Stylesheets
-│   └── views/          # React components (TSX)
-├── routes/
-│   └── web.js          # Route definitions
-└── storage/            # File storage
+
+Disable layout for a specific page:
+
+```tsx
+export const layout = false;
+
+export default function FullscreenPage() {
+    return <div>No layout wrapper</div>;
+}
 ```
 
 ## Routing
@@ -106,88 +142,86 @@ Define routes in `routes/web.js`:
 ```javascript
 import { Route } from '@nitronjs/framework';
 import HomeController from '#app/Controllers/HomeController.js';
+import UserController from '#app/Controllers/UserController.js';
 
+// Basic routes
 Route.get('/', HomeController.index).name('home');
-Route.get('/about', HomeController.about);
-Route.post('/contact', HomeController.contact);
-```
+Route.get('/about', HomeController.about).name('about');
 
-### Route Groups & Middleware
+// Route parameters
+Route.get('/users/:id', UserController.show).name('user.show');
 
-```javascript
+// Route groups with middleware
 Route.prefix('/admin').middleware('auth').group(() => {
-    Route.get('/dashboard', AdminController.dashboard);
-    Route.get('/users', AdminController.users);
+    Route.get('/dashboard', AdminController.dashboard).name('admin.dashboard');
+    Route.get('/users', AdminController.users).name('admin.users');
 });
+
+// RESTful routes
+Route.post('/users', UserController.store);
+Route.put('/users/:id', UserController.update);
+Route.delete('/users/:id', UserController.destroy);
 ```
 
-## Controllers
+Generate URLs using route names:
 
-Create controllers with `njs make:controller`:
+```tsx
+<a href={route('user.show', { id: 1 })}>View User</a>
+```
+
+## Controllers
 
 ```javascript
-class HomeController {
-    static async index(request, reply) {
-        return reply.view('Site/Home', { 
-            title: 'Welcome' 
-        });
-    }
-    
-    static async contact(request, reply) {
-        const { name, email } = request.body;
-        // Handle contact form
-        return reply.redirect('/thank-you');
+// app/Controllers/UserController.js
+class UserController {
+    static async index(req, res) {
+        const users = await User.get();
+
+        return res.view('User/Index', { users });
     }
-}
 
-export default HomeController;
-```
+    static async show(req, res) {
+        const user = await User.find(req.params.id);
 
-## Views (React SSR)
+        if (!user) {
+            return res.status(404).view('Errors/NotFound');
+        }
 
-Create React views in `resources/views/`:
+        return res.view('User/Show', { user });
+    }
 
-```tsx
-// resources/views/Site/Home.tsx
-export default function Home({ title, items }) {
-    return (
-        <html>
-            <head>
-                <title>{title}</title>
-                <link rel="stylesheet" href="/css/site_style.css" />
-            </head>
-            <body>
-                <h1>{title}</h1>
-                <ul>
-                    {items.map(item => (
-                        <li key={item.id}>{item.name}</li>
-                    ))}
-                </ul>
-            </body>
-        </html>
-    );
+    static async store(req, res) {
+        const { name, email } = req.body;
+
+        const user = new User();
+        user.name = name;
+        user.email = email;
+        await user.save();
+
+        return res.redirect(route('user.show', { id: user.id }));
+    }
 }
-```
 
-Views are automatically compiled and bundled with your application.
+export default UserController;
+```
 
-## Models
+## Database
 
-Create models with `njs make:model`:
+### Models
 
 ```javascript
+// app/Models/User.js
 import { Model } from '@nitronjs/framework';
 
 export default class User extends Model {
     static table = 'users';
-    static primaryKey = 'id';
 }
 ```
 
-### Query Examples
+### Queries
 
 ```javascript
-// Find all users
+// Find all
 const users = await User.get();
 
 // Find by ID
@@ -195,63 +229,40 @@ const user = await User.find(1);
 
 // Where clauses
 const admins = await User.where('role', '=', 'admin').get();
+const active = await User.where('active', true).get();
 
-// Create new record
+// Chaining
+const results = await User
+    .where('role', '=', 'admin')
+    .where('active', true)
+    .orderBy('created_at', 'desc')
+    .limit(10)
+    .get();
+
+// First result
+const user = await User.where('email', '=', 'john@example.com').first();
+
+// Create
 const user = new User();
 user.name = 'John';
 user.email = 'john@example.com';
 await user.save();
 
 // Update
-await User.where('id', '=', 1).update({ 
-    name: 'Jane' 
-});
+await User.where('id', '=', 1).update({ name: 'Jane' });
 
 // Delete
 await User.where('id', '=', 1).delete();
 ```
 
-## Middleware
-
-Create middleware with `njs make:middleware`:
-
-```javascript
-class CheckAge {
-    static async handler(req, res) {
-        const age = req.query.age;
-        
-        if (age < 18) {
-            return res.status(403).send('Access denied');
-        }
-        
-        // If no return, continues to next middleware/handler
-    }
-}
-
-export default CheckAge;
-```
-
-Register middleware in `app/Kernel.js`:
-
-```javascript
-export default {
-    routeMiddlewares: {
-        "check-age": CheckAge,
-    }
-};
-```
-
-Apply to routes:
+### Migrations
 
-```javascript
-Route.middleware('check-age').get('/restricted', Controller.method);
+```bash
+npm run make:migration create_users_table
 ```
 
-## Database Migrations
-
-Create migrations with `njs make:migration`:
-
 ```javascript
+// database/migrations/2024_01_01_000000_create_users_table.js
 import { Schema } from '@nitronjs/framework';
 
 class CreateUsersTable {
@@ -265,7 +276,7 @@ class CreateUsersTable {
             table.timestamp('updated_at').nullable();
         });
     }
-    
+
     static async down() {
         await Schema.dropIfExists('users');
     }
@@ -274,84 +285,67 @@ class CreateUsersTable {
 export default CreateUsersTable;
 ```
 
-## Configuration
-
-All configuration files are in the `config/` directory:
-
-- **app.js** - Application settings (name, env, debug mode)
-- **database.js** - Database connections
-- **server.js** - Server configuration (port, host, CORS)
-- **session.js** - Session management
-- **auth.js** - Authentication settings
-- **hash.js** - Hashing algorithm configuration
+Run migrations:
 
-Access config values:
-
-```javascript
-import { Config } from '@nitronjs/framework';
-
-const appName = Config.get('app.name');
-const dbHost = Config.get('database.host');
+```bash
+npm run migrate              # Run pending migrations
+npm run migrate:fresh        # Drop all tables and re-run
+npm run migrate:fresh --seed # Drop, migrate, and seed
 ```
 
-## Session Management
+## Authentication
 
 ```javascript
-// Set session data
-req.session.set('user', { id: 1, name: 'John' });
+// In a controller or middleware
+class AuthController {
+    static async login(req, res) {
+        const { email, password } = req.body;
 
-// Get session data
-const user = req.session.get('user');
+        const success = await req.auth.attempt({ email, password });
 
-// Check if session has value
-if (req.session.get('user')) {
-    // User is logged in
-}
-
-// Remove session data
-req.session.set('user', null);
+        if (success) {
+            return req.redirect('/dashboard');
+        }
 
-// Get all session data
-const allData = req.session.all();
+        return req.view('Auth/Login', {
+            error: 'Invalid credentials'
+        });
+    }
 
-// Regenerate session (security - after login)
-req.session.regenerate();
+    static async logout(req, res) {
+        await req.auth.logout();
 
-// Flash messages (one-time)
-req.session.flash('message', 'Success!');
-const message = req.session.getFlash('message');
+        return res.redirect('/');
+    }
+}
 
-// CSRF token
-const token = req.session.getCsrfToken();
+// Check authentication
+if (req.auth.check()) {
+    const user = await req.auth.user();
+}
 ```
 
-## Authentication
-
-Built-in authentication system (request-based):
+## Session
 
 ```javascript
-// Attempt login (inside controller or middleware)
-const success = await req.auth.attempt({
-    email: 'admin@example.com',
-    password: 'secret'
-});
-// veya belirli bir guard ile:
-// const success = await req.auth.guard('user').attempt({ email, password });
+// Set value
+req.session.set('key', 'value');
 
-// Kullanıcıya erişim
-const user = await req.auth.user();
-// veya
-// const user = await req.auth.guard('user').user();
+// Get value
+const value = req.session.get('key');
 
-// Giriş yapmış mı?
-if (req.auth.check()) {
-    // Authenticated
-}
+// Flash messages (one-time)
+req.session.flash('success', 'Profile updated!');
+const message = req.session.getFlash('success');
+
+// All data
+const data = req.session.all();
+
+// Regenerate session ID (after login)
+req.session.regenerate();
 
-// Çıkış
-await req.auth.logout();
-// veya
-// await req.auth.guard('user').logout();
+// CSRF token
+const token = req.session.getCsrfToken();
 ```
 
 ## Validation
@@ -360,9 +354,10 @@ await req.auth.logout();
 import { Validator } from '@nitronjs/framework';
 
 const validation = Validator.make(req.body, {
+    name: 'required|string|min:2|max:100',
     email: 'required|email',
     password: 'required|string|min:8',
-    age: 'required|numeric|min:18'
+    age: 'numeric|min:18'
 });
 
 if (validation.fails()) {
@@ -372,58 +367,141 @@ if (validation.fails()) {
 }
 ```
 
-## Environment Variables
+## Middleware
 
-Create a `.env` file in your project root:
+Create custom middleware:
 
-```env
-APP_NAME=nitronjs
-APP_DEV=true
-APP_DEBUG=true
-APP_PORT=3000
-APP_URL=http://localhost
+```javascript
+// app/Middlewares/CheckAge.js
+class CheckAge {
+    static async handler(req, res) {
+        if (req.query.age < 18) {
+            return res.status(403).send('Access denied');
+        }
+        // No return = continue to next handler
+    }
+}
 
-DATABASE_DRIVER=mysql
-DATABASE_HOST=127.0.0.1
-DATABASE_PORT=3306
-DATABASE_NAME=nitronjs
-DATABASE_USERNAME=root
-DATABASE_PASSWORD=
+export default CheckAge;
 ```
 
-## Response Methods
+Register in `app/Kernel.js`:
 
 ```javascript
-// Render view
-return res.view('Site/Home', { title: 'Welcome' });
+export default {
+    routeMiddlewares: {
+        'check-age': CheckAge,
+        'auth': AuthMiddleware,
+    }
+};
+```
 
-// JSON response
-return res.json({ success: true, data: users });
+Apply to routes:
+
+```javascript
+Route.middleware('check-age').get('/restricted', Controller.method);
+Route.middleware('auth', 'check-age').get('/admin', AdminController.index);
+```
 
-// Redirect
-return res.redirect('/dashboard');
+## CSS & Tailwind
 
-// Status code
-return res.status(404).send('Not Found');
+Put your CSS files in `resources/css/`. Tailwind CSS is automatically detected and processed.
 
-// Download file
-return res.download('/path/to/file.pdf');
+```css
+/* resources/css/app.css */
+@import "tailwindcss";
 ```
 
-## Testing Your Application
+CSS files are automatically linked in your views:
 
-Build and run in production mode:
+```tsx
+// CSS from resources/css/ is available at /storage/css/
+<link rel="stylesheet" href="/storage/css/app.css" />
+```
+
+## CLI Commands
 
 ```bash
-npm run build
-npm run start
+# Development
+npm run dev              # Start dev server with HMR
+npm run build            # Build for production
+npm run start            # Start production server
+
+# Database
+npm run migrate          # Run migrations
+npm run migrate:fresh    # Fresh migration
+npm run seed             # Run seeders
+
+# Code Generation
+npm run make:controller <name>
+npm run make:model <name>
+npm run make:middleware <name>
+npm run make:migration <name>
+npm run make:seeder <name>
+
+# Utilities
+npm run storage:link     # Create storage symlink
+```
+
+## Project Structure
+
+```
+my-app/
+├── app/
+│   ├── Controllers/     # Request handlers
+│   ├── Middlewares/     # Custom middleware
+│   └── Models/          # Database models
+├── config/              # Configuration files
+│   ├── app.js
+│   ├── database.js
+│   └── server.js
+├── database/
+│   ├── migrations/      # Database migrations
+│   └── seeders/         # Database seeders
+├── public/              # Static assets
+├── resources/
+│   ├── css/             # Stylesheets
+│   └── views/           # React components (TSX)
+├── routes/
+│   └── web.js           # Route definitions
+├── storage/             # File storage
+└── .env                 # Environment variables
+```
+
+## Configuration
+
+Access configuration values:
+
+```javascript
+import { Config } from '@nitronjs/framework';
+
+const appName = Config.get('app.name');
+const dbHost = Config.get('database.host', 'localhost'); // with default
+```
+
+Environment variables in `.env`:
+
+```env
+APP_NAME=MyApp
+APP_DEV=true
+APP_PORT=3000
+
+DATABASE_HOST=127.0.0.1
+DATABASE_PORT=3306
+DATABASE_NAME=myapp
+DATABASE_USERNAME=root
+DATABASE_PASSWORD=
 ```
 
 ## Requirements
 
-- Node.js 18.x or higher
+- Node.js 18+
 - MySQL 5.7+ or MariaDB 10.3+
 
+## Documentation
+
+Full documentation available at [nitronjs.dev](https://nitronjs.dev/docs)
+
 ## License
 
 ISC

package/lib/Database/Migration/MigrationRepository.js

@@ -5,12 +5,8 @@ class MigrationRepository {
     static table = 'migrations';
 
     static async tableExists() {
-        try {
-            await DB.table(this.table).limit(1).get();
-            return true;
-        } catch {
-            return false;
-        }
+        const [rows] = await DB.rawQuery(`SHOW TABLES LIKE '${this.table}'`);
+        return rows.length > 0;
     }
 
     static async getExecuted() {

package/lib/Database/Model.js

@@ -2,7 +2,6 @@ import DB from './DB.js';
 
 class Model {
     static table = null;
-    static primaryKey = 'id';
 
     constructor(attrs = {}) {
         Object.defineProperty(this, '_attributes', { value: {}, writable: true });
@@ -63,7 +62,7 @@ class Model {
             throw new Error(`Model ${this.name} must define a static 'table' property`);
         }
 
-        const row = await DB.table(this.table).where(this.primaryKey, id).first();
+        const row = await DB.table(this.table).where("id", id).first();
 
         if (!row) return null;
 
@@ -112,15 +111,15 @@ class Model {
         const data = {};
 
         for (const [key, value] of Object.entries(this._attributes)) {
-            if (value !== undefined && (key !== constructor.primaryKey || !this._exists)) {
+            if (value !== undefined && (key !== "id" || !this._exists)) {
                 data[key] = value;
             }
         }
 
         if (this._exists) {
-            const primaryKeyValue = this._attributes[constructor.primaryKey];
+            const primaryKeyValue = this._attributes["id"];
             await DB.table(constructor.table)
-                .where(constructor.primaryKey, primaryKeyValue)
+                .where("id", primaryKeyValue)
                 .update(data);
             
             Object.assign(this._attributes, data);
@@ -128,7 +127,7 @@ class Model {
         }
         else {
             const id = await DB.table(constructor.table).insert(data);
-            this._attributes[constructor.primaryKey] = id;
+            this._attributes["id"] = id;
             
             this._original = { ...this._attributes };
             this._exists = true;
@@ -139,14 +138,14 @@ class Model {
 
     async delete() {
         const constructor = this.constructor;
-        const primaryKeyValue = this._attributes[constructor.primaryKey];
+        const primaryKeyValue = this._attributes["id"];
         
         if (!this._exists) {
             throw new Error('Cannot delete a model that does not exist');
         }
 
         await DB.table(constructor.table)
-            .where(constructor.primaryKey, primaryKeyValue)
+            .where("id", primaryKeyValue)
             .delete();
 
         this._exists = false;

package/lib/Database/Seeder/SeederRepository.js

@@ -5,12 +5,8 @@ class SeederRepository {
     static table = 'seeders';
 
     static async tableExists() {
-        try {
-            await DB.table(this.table).limit(1).get();
-            return true;
-        } catch {
-            return false;
-        }
+        const [rows] = await DB.rawQuery(`SHOW TABLES LIKE '${this.table}'`);
+        return rows.length > 0;
     }
 
     static async getExecuted() {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nitronjs/framework",
-	"version": "0.2.0",
+	"version": "0.2.2",
 	"description": "NitronJS is a modern and extensible Node.js MVC framework built on Fastify. It focuses on clean architecture, modular structure, and developer productivity, offering built-in routing, middleware, configuration management, CLI tooling, and native React integration for scalable full-stack applications.",
 	"bin": {
 		"njs": "./cli/njs.js"

package/skeleton/app/Controllers/HomeController.js

@@ -1,31 +1,7 @@
 class HomeController {
-    
+
     static async index(req, res) {
-        return res.view("Site/Home", {
-            title: "Welcome to NitronJS",
-            features: [
-                {
-                    icon: "⚡",
-                    title: "Lightning Fast",
-                    description: "Server-side rendering with React for blazing fast page loads"
-                },
-                {
-                    icon: "🔥",
-                    title: "Hot Module Reload",
-                    description: "See your changes instantly without losing application state"
-                },
-                {
-                    icon: "🛡️",
-                    title: "Secure by Default",
-                    description: "Built-in CSRF protection, secure sessions, and CSP headers"
-                },
-                {
-                    icon: "📦",
-                    title: "MVC Architecture",
-                    description: "Clean separation of concerns with Models, Views, and Controllers"
-                }
-            ]
-        });
+        return res.view("Site/Home");
     }
 
 }

package/skeleton/resources/views/Site/Home.tsx

@@ -1,290 +1,86 @@
-type Feature = {
-    icon: string;
-    title: string;
-    description: string;
-};
-
 type HomeProps = {
-    title?: string;
-    features?: Feature[];
+    version?: string;
 };
 
-export default function Home({ title = "Welcome to NitronJS", features = [] }: HomeProps) {
+export default function Home({ version = "0.2.0" }: HomeProps) {
     return (
         <main style={{
             minHeight: "100vh",
-            background: "linear-gradient(135deg, #0f0f23 0%, #1a1a3e 50%, #0f172a 100%)",
-            fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif",
+            background: "#0a0a0a",
+            fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
             color: "#e4e4e7",
-            overflow: "hidden"
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: "2rem",
+            boxSizing: "border-box"
         }}>
-            {/* Background decoration */}
             <div style={{
-                position: "fixed",
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                background: "radial-gradient(circle at 20% 20%, rgba(99, 102, 241, 0.15) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 50%)",
-                pointerEvents: "none"
-            }} />
-
-            {/* Hero Section */}
-            <section style={{
-                minHeight: "100vh",
+                width: 64,
+                height: 64,
+                background: "#fff",
+                borderRadius: 14,
                 display: "flex",
-                flexDirection: "column",
                 alignItems: "center",
                 justifyContent: "center",
-                padding: "2rem",
-                position: "relative",
-                textAlign: "center"
+                marginBottom: "2rem"
             }}>
-                {/* Logo */}
-                <div style={{
-                    width: 80,
-                    height: 80,
-                    background: "linear-gradient(135deg, #6366f1, #8b5cf6)",
-                    borderRadius: 20,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                    marginBottom: "2rem",
-                    boxShadow: "0 20px 60px rgba(99, 102, 241, 0.4)"
-                }}>
-                    <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="#fff" strokeWidth="2">
-                        <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
-                    </svg>
-                </div>
-
-                {/* Title */}
-                <h1 style={{
-                    fontSize: "clamp(2.5rem, 8vw, 4.5rem)",
-                    fontWeight: 800,
-                    margin: 0,
-                    background: "linear-gradient(135deg, #fff 0%, #a1a1aa 100%)",
-                    WebkitBackgroundClip: "text",
-                    WebkitTextFillColor: "transparent",
-                    letterSpacing: "-0.02em",
-                    lineHeight: 1.1
-                }}>
-                    {title}
-                </h1>
+                <svg width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="#0a0a0a" strokeWidth="2.5">
+                    <path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/>
+                </svg>
+            </div>
 
-                {/* Subtitle */}
-                <p style={{
-                    fontSize: "clamp(1rem, 2.5vw, 1.25rem)",
-                    color: "#71717a",
-                    maxWidth: 600,
-                    margin: "1.5rem 0 2.5rem",
-                    lineHeight: 1.7
-                }}>
-                    Build modern, full-stack web applications with React SSR, 
-                    MVC architecture, and developer-friendly tooling.
-                </p>
+            <h1 style={{
+                fontSize: "2.5rem",
+                fontWeight: 700,
+                margin: 0,
+                color: "#fff",
+                letterSpacing: "-0.02em"
+            }}>
+                Welcome to NitronJS
+            </h1>
 
-                {/* CTA Buttons */}
-                <div style={{
-                    display: "flex",
-                    gap: "1rem",
-                    flexWrap: "wrap",
-                    justifyContent: "center"
-                }}>
-                    <a href="https://nitronjs.dev/docs" style={{
-                        display: "inline-flex",
-                        alignItems: "center",
-                        gap: "0.5rem",
-                        padding: "0.875rem 1.75rem",
-                        background: "linear-gradient(135deg, #6366f1, #8b5cf6)",
-                        color: "#fff",
-                        textDecoration: "none",
-                        fontWeight: 600,
-                        fontSize: "0.95rem",
-                        borderRadius: 12,
-                        boxShadow: "0 4px 20px rgba(99, 102, 241, 0.4)",
-                        transition: "transform 0.2s, box-shadow 0.2s"
-                    }}>
-                        Get Started
-                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                            <path d="M5 12h14M12 5l7 7-7 7"/>
-                        </svg>
-                    </a>
-                    <a href="https://github.com/nicatdursunlu/nitronjs" style={{
-                        display: "inline-flex",
-                        alignItems: "center",
-                        gap: "0.5rem",
-                        padding: "0.875rem 1.75rem",
-                        background: "rgba(255, 255, 255, 0.05)",
-                        color: "#e4e4e7",
-                        textDecoration: "none",
-                        fontWeight: 600,
-                        fontSize: "0.95rem",
-                        borderRadius: 12,
-                        border: "1px solid rgba(255, 255, 255, 0.1)",
-                        transition: "background 0.2s, border-color 0.2s"
-                    }}>
-                        <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-                            <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
-                        </svg>
-                        GitHub
-                    </a>
-                </div>
+            <p style={{
+                fontSize: "1.1rem",
+                color: "#71717a",
+                maxWidth: 400,
+                margin: "1.5rem 0 2rem",
+                lineHeight: 1.6,
+                textAlign: "center"
+            }}>
+                Your application is ready. Start building by editing the files in <code style={{ color: "#a1a1aa", background: "#1a1a1a", padding: "2px 6px", borderRadius: 4 }}>resources/views</code>
+            </p>
 
-                {/* Scroll indicator */}
-                <div style={{
-                    position: "absolute",
-                    bottom: "2rem",
-                    display: "flex",
-                    flexDirection: "column",
+            <a
+                href="https://nitronjs.dev/docs"
+                style={{
+                    display: "inline-flex",
                     alignItems: "center",
                     gap: "0.5rem",
-                    color: "#52525b",
-                    fontSize: "0.75rem"
-                }}>
-                    <span>Scroll to explore</span>
-                    <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
-                        <path d="M12 5v14M5 12l7 7 7-7"/>
-                    </svg>
-                </div>
-            </section>
-
-            {/* Features Section */}
-            <section style={{
-                padding: "6rem 2rem",
-                maxWidth: 1200,
-                margin: "0 auto"
-            }}>
-                <h2 style={{
-                    fontSize: "clamp(1.75rem, 4vw, 2.5rem)",
-                    fontWeight: 700,
-                    textAlign: "center",
-                    margin: "0 0 1rem",
-                    color: "#fff"
-                }}>
-                    Why NitronJS?
-                </h2>
-                <p style={{
-                    textAlign: "center",
-                    color: "#71717a",
-                    maxWidth: 500,
-                    margin: "0 auto 4rem",
-                    fontSize: "1.1rem"
-                }}>
-                    Everything you need to build production-ready applications
-                </p>
+                    padding: "0.75rem 1.5rem",
+                    background: "#fff",
+                    color: "#0a0a0a",
+                    textDecoration: "none",
+                    fontWeight: 600,
+                    fontSize: "0.9rem",
+                    borderRadius: 8
+                }}
+            >
+                Documentation
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5">
+                    <path d="M5 12h14M12 5l7 7-7 7"/>
+                </svg>
+            </a>
 
-                <div style={{
-                    display: "grid",
-                    gridTemplateColumns: "repeat(auto-fit, minmax(260px, 1fr))",
-                    gap: "1.5rem"
-                }}>
-                    {features.map((feature, index) => (
-                        <div key={index} style={{
-                            padding: "2rem",
-                            background: "linear-gradient(145deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01))",
-                            border: "1px solid rgba(255,255,255,0.06)",
-                            borderRadius: 16,
-                            transition: "transform 0.2s, border-color 0.2s"
-                        }}>
-                            <div style={{
-                                width: 48,
-                                height: 48,
-                                background: "linear-gradient(135deg, rgba(99,102,241,0.2), rgba(139,92,246,0.1))",
-                                borderRadius: 12,
-                                display: "flex",
-                                alignItems: "center",
-                                justifyContent: "center",
-                                fontSize: "1.5rem",
-                                marginBottom: "1.25rem"
-                            }}>
-                                {feature.icon}
-                            </div>
-                            <h3 style={{
-                                fontSize: "1.125rem",
-                                fontWeight: 600,
-                                margin: "0 0 0.75rem",
-                                color: "#fff"
-                            }}>
-                                {feature.title}
-                            </h3>
-                            <p style={{
-                                fontSize: "0.9rem",
-                                color: "#71717a",
-                                margin: 0,
-                                lineHeight: 1.6
-                            }}>
-                                {feature.description}
-                            </p>
-                        </div>
-                    ))}
-                </div>
-            </section>
-
-            {/* Code Example Section */}
-            <section style={{
-                padding: "4rem 2rem 6rem",
-                maxWidth: 800,
-                margin: "0 auto"
-            }}>
-                <h2 style={{
-                    fontSize: "clamp(1.5rem, 3vw, 2rem)",
-                    fontWeight: 700,
-                    textAlign: "center",
-                    margin: "0 0 2rem",
-                    color: "#fff"
-                }}>
-                    Start Building
-                </h2>
-                <div style={{
-                    background: "#0d0d1a",
-                    border: "1px solid rgba(255,255,255,0.08)",
-                    borderRadius: 16,
-                    overflow: "hidden"
-                }}>
-                    <div style={{
-                        padding: "1rem 1.25rem",
-                        borderBottom: "1px solid rgba(255,255,255,0.06)",
-                        display: "flex",
-                        alignItems: "center",
-                        gap: "0.5rem"
-                    }}>
-                        <span style={{ width: 12, height: 12, borderRadius: "50%", background: "#ef4444" }} />
-                        <span style={{ width: 12, height: 12, borderRadius: "50%", background: "#fbbf24" }} />
-                        <span style={{ width: 12, height: 12, borderRadius: "50%", background: "#4ade80" }} />
-                        <span style={{ marginLeft: "auto", color: "#52525b", fontSize: "0.8rem" }}>Terminal</span>
-                    </div>
-                    <pre style={{
-                        margin: 0,
-                        padding: "1.5rem",
-                        fontSize: "0.9rem",
-                        lineHeight: 1.8,
-                        overflowX: "auto"
-                    }}>
-                        <code style={{ color: "#a1a1aa" }}>
-                            <span style={{ color: "#71717a" }}># Create a new project</span>{"\n"}
-                            <span style={{ color: "#4ade80" }}>npx</span> @nitronjs/framework my-app{"\n\n"}
-                            <span style={{ color: "#71717a" }}># Start development server</span>{"\n"}
-                            <span style={{ color: "#4ade80" }}>cd</span> my-app{"\n"}
-                            <span style={{ color: "#4ade80" }}>npm</span> run dev
-                        </code>
-                    </pre>
-                </div>
-            </section>
-
-            {/* Footer */}
-            <footer style={{
-                padding: "3rem 2rem",
-                borderTop: "1px solid rgba(255,255,255,0.05)",
-                textAlign: "center"
+            <div style={{
+                position: "fixed",
+                bottom: "1.5rem",
+                color: "#3f3f46",
+                fontSize: "0.8rem"
             }}>
-                <p style={{
-                    margin: 0,
-                    color: "#52525b",
-                    fontSize: "0.875rem"
-                }}>
-                    Built with ⚡ NitronJS — The Modern Full-Stack Framework
-                </p>
-            </footer>
+                v{version}
+            </div>
         </main>
     );
 }