diff --git a/features/collaboration.mdx b/features/collaboration.mdx
new file mode 100644
index 0000000..9d1ff4f
--- /dev/null
+++ b/features/collaboration.mdx
@@ -0,0 +1,132 @@
+---
+title: 'Collaboration'
+description: 'Work together with your team in real-time to build applications faster'
+---
+
+## Real-Time Team Collaboration
+
+Astrio makes teamwork seamless with built-in collaboration features that let your entire team work together on projects without conflicts or delays.
+
+## Key Features
+
+### Real-Time Editing
+Multiple team members can work on the same project simultaneously. See changes appear instantly as your teammates make edits, with live cursors showing who's working where.
+
+### Project Visibility Controls
+Fine-tune who can access your projects with granular permission settings:
+
+
+
+ Keep sensitive projects restricted to specific team members
+
+
+ Share with your entire organization or specific teams
+
+
+ Make projects visible to anyone with the link
+
+
+ Grant view-only permissions for stakeholders and reviewers
+
+
+
+### Role-Based Permissions
+
+Assign different roles to team members based on their responsibilities:
+
+| Role | Permissions |
+|------|-------------|
+| **Owner** | Full control including billing and team management |
+| **Admin** | Manage projects, users, and settings |
+| **Editor** | Create and modify projects |
+| **Viewer** | Read-only access to projects |
+
+### Team Management
+
+
+
+ Send invitations via email or shareable links
+
+
+ Assign roles and project access levels
+
+
+ Track team activity with detailed audit logs
+
+
+
+## Collaboration Features
+
+### Comment System
+Add comments directly to components and pages. Tag team members with `@mentions` to get their attention and keep discussions contextual.
+
+### Version History
+Never lose work with automatic version tracking. See who made what changes and when, with the ability to restore previous versions.
+
+### Live Presence
+See who's currently working on the project with live presence indicators. Avoid conflicts by knowing where your teammates are editing.
+
+### Shared Assets
+Upload and manage shared assets like images, fonts, and brand resources that the entire team can access.
+
+## Use Cases
+
+
+
+ Designers and developers work together seamlessly without handoff delays
+
+
+ Share progress with clients and gather feedback in real-time
+
+
+ Collaborate effectively across time zones with async-friendly tools
+
+
+ Scale collaboration across large organizations with advanced permissions
+
+
+
+## Getting Started
+
+
+
+ Set up your organization and invite the first team members
+
+
+ Create your first collaborative project
+
+
+ Add team members and set their permissions
+
+
+ Start building your application with real-time collaboration
+
+
+
+
+Always review permissions before sharing sensitive projects. Once shared, data access follows the permissions you've set.
+
diff --git a/features/custom-domain.mdx b/features/custom-domain.mdx
new file mode 100644
index 0000000..3d5b696
--- /dev/null
+++ b/features/custom-domain.mdx
@@ -0,0 +1,209 @@
+---
+title: 'Custom Domain'
+description: 'Connect your own domain to any Astrio project for a professional branded experience'
+---
+
+## Professional Branding with Custom Domains
+
+Transform your Astrio projects with custom domains to create a professional, branded experience for your users. No technical expertise required.
+
+## Key Benefits
+
+
+
+ Use your own domain to build trust and brand recognition
+
+
+ Improve search engine rankings with your own domain authority
+
+
+ Remove Astrio branding for a completely custom experience
+
+
+ Automatic SSL certificates for secure, encrypted connections
+
+
+
+## Supported Domain Types
+
+### Root Domains
+Connect your main domain (e.g., `yourcompany.com`) directly to your Astrio project.
+
+### Subdomains
+Use subdomains like `app.yourcompany.com` or `demo.yourcompany.com` for different projects or environments.
+
+### Multiple Domains
+Connect multiple domains to the same project or use different domains for different projects.
+
+## Setup Process
+
+
+
+ Buy your domain from any registrar (GoDaddy, Namecheap, Google Domains, etc.)
+
+
+ Navigate to Project Settings β Custom Domain and enter your domain
+
+
+ Update your domain's DNS settings with the provided records
+
+
+ Astrio will automatically verify and provision SSL certificates
+
+
+
+## DNS Configuration
+
+### For Root Domains (yoursite.com)
+
+Add these DNS records at your domain registrar:
+
+```
+Type: A
+Name: @
+Value: 76.76.19.123
+
+Type: CNAME
+Name: www
+Value: cname.astrio.build
+```
+
+### For Subdomains (app.yoursite.com)
+
+Add this DNS record:
+
+```
+Type: CNAME
+Name: app (or your chosen subdomain)
+Value: cname.astrio.build
+```
+
+
+DNS changes can take up to 48 hours to propagate worldwide, though they usually take effect within a few hours.
+
+
+## SSL Certificates
+
+### Automatic SSL
+Astrio automatically provisions and manages SSL certificates for all custom domains using Let's Encrypt.
+
+### Features
+- **Free SSL certificates** - No additional cost
+- **Auto-renewal** - Certificates renew automatically before expiration
+- **Wildcard support** - Covers all subdomains when applicable
+- **Modern encryption** - TLS 1.3 support for maximum security
+
+## Domain Management
+
+### Domain Dashboard
+Monitor all your custom domains from a centralized dashboard:
+
+- **Status monitoring** - See which domains are active, pending, or have issues
+- **Certificate status** - Check SSL certificate validity and renewal dates
+- **Traffic analytics** - View domain-specific traffic and performance metrics
+
+### Domain Validation
+Astrio validates domain ownership through:
+- DNS record verification
+- HTTP file validation (when applicable)
+- Email verification for certain domain types
+
+## Advanced Features
+
+### Redirects
+Set up automatic redirects:
+- **www to non-www** or vice versa
+- **HTTP to HTTPS** (enabled by default)
+- **Custom redirect rules** for specific paths
+
+### CDN Integration
+All custom domains benefit from Astrio's global CDN:
+- **Edge caching** for faster load times worldwide
+- **DDoS protection** against malicious traffic
+- **Image optimization** for better performance
+
+## Troubleshooting
+
+### Common Issues
+
+
+
+ **Check DNS settings**: Ensure DNS records are correctly configured
+
+ **Wait for propagation**: DNS changes can take up to 48 hours
+
+ **Verify domain spelling**: Double-check for typos in domain name
+
+
+
+ **Domain validation**: Ensure domain is properly validated
+
+ **Clear browser cache**: Try accessing the site in incognito mode
+
+ **Check certificate status**: View certificate details in domain dashboard
+
+
+
+ **Check redirect settings**: Ensure no conflicting redirect rules
+
+ **DNS configuration**: Verify CNAME records are pointing correctly
+
+ **Browser cache**: Clear cache and cookies for the domain
+
+
+
+## Best Practices
+
+
+
+ Always use HTTPS for security and SEO benefits
+
+
+ Regular check domain performance and SSL status
+
+
+ Keep records of your DNS settings
+
+
+ Test your domain from different locations and devices
+
+
+
+## Pricing
+
+Custom domains are included in all Astrio plans:
+- **Free Plan**: 1 custom domain per project
+- **Pro Plan**: Unlimited custom domains
+- **Enterprise**: Unlimited domains with priority support
+
+
+Set up your custom domain early in development to ensure a smooth launch experience.
+
+
+
+Changing custom domains after launch may affect SEO rankings and user bookmarks. Plan your domain strategy carefully.
+
diff --git a/features/dev-mode.mdx b/features/dev-mode.mdx
new file mode 100644
index 0000000..2c0b912
--- /dev/null
+++ b/features/dev-mode.mdx
@@ -0,0 +1,248 @@
+---
+title: 'Dev Mode'
+description: 'View and edit your project code directly in Astrio with a full-featured development environment'
+---
+
+## Full-Stack Development Environment
+
+Dev Mode bridges the gap between no-code simplicity and full development control. Switch seamlessly between visual editing and code editing to customize every aspect of your application.
+
+## Key Features
+
+
+
+ Full-featured IDE with syntax highlighting and auto-completion
+
+
+ See changes instantly as you type with hot reload
+
+
+ Built-in debugger with breakpoints and variable inspection
+
+
+ Git integration with branch management and commit history
+
+
+
+## Development Workflow
+
+### Seamless Mode Switching
+Switch between visual editing and code editing without losing context:
+
+
+
+ Begin with drag-and-drop components in visual mode
+
+
+ Click "Dev Mode" to see the generated code
+
+
+ Make custom modifications and add advanced logic
+
+
+ Return to visual mode to see your changes reflected
+
+
+
+### Code Generation
+Astrio automatically generates clean, readable code:
+- **React/Next.js** for frontend components
+- **TypeScript** for type safety
+- **Tailwind CSS** for styling
+- **API routes** for backend functionality
+
+## Code Editor Features
+
+### Advanced IDE Capabilities
+Experience professional development tools:
+
+- **Intelligent auto-completion** - Context-aware suggestions
+- **Syntax highlighting** - Support for 50+ languages
+- **Error detection** - Real-time linting and error highlighting
+- **Code formatting** - Automatic code beautification
+- **Multi-cursor editing** - Edit multiple locations simultaneously
+
+### File Explorer
+Navigate your project structure with ease:
+- **Tree view** of all project files
+- **Search functionality** to quickly find files
+- **File operations** - create, rename, delete files and folders
+- **Import management** - Automatic import organization
+
+### Terminal Integration
+Access a full terminal within Astrio:
+```bash
+# Install packages
+npm install lodash
+
+# Run custom scripts
+npm run build
+
+# Deploy changes
+npm run deploy
+```
+
+## Debugging and Testing
+
+### Built-in Debugger
+Debug your applications without leaving Astrio:
+
+
+
+ Set breakpoints and step through code execution
+
+
+ Inspect variables and object states at runtime
+
+
+ View console logs and error messages
+
+
+ Monitor API calls and network requests
+
+
+
+### Testing Framework
+Write and run tests directly in Astrio:
+- **Unit tests** for individual components
+- **Integration tests** for API endpoints
+- **E2E tests** for complete user flows
+- **Test coverage** reporting
+
+## Advanced Features
+
+### Custom Components
+Create reusable custom components:
+```jsx
+// Create a custom component
+export function CustomButton({ variant, children, onClick }) {
+ return (
+
+ )
+}
+```
+
+### API Development
+Build custom backend functionality:
+```javascript
+// API route example
+export default async function handler(req, res) {
+ if (req.method === 'POST') {
+ const { data } = req.body
+ // Process data
+ res.status(200).json({ success: true })
+ }
+}
+```
+
+### Database Integration
+Connect to databases and external services:
+- **PostgreSQL** and **MySQL** support
+- **MongoDB** for NoSQL needs
+- **Redis** for caching
+- **External APIs** integration
+
+## Performance Optimization
+
+### Code Analysis
+Astrio analyzes your code for:
+- **Performance bottlenecks** identification
+- **Bundle size optimization** suggestions
+- **Unused code detection** and removal
+- **SEO improvements** recommendations
+
+### Build Optimization
+Automatic optimizations for production:
+- **Code splitting** for faster load times
+- **Tree shaking** to remove unused code
+- **Image optimization** for better performance
+- **CDN deployment** for global distribution
+
+## Git Integration
+
+### Version Control
+Full Git functionality within Astrio:
+
+
+
+ Create a new Git repository for your project
+
+
+ Stage and commit your changes with descriptive messages
+
+
+ Create and switch between feature branches
+
+
+ Push to remote repositories and deploy automatically
+
+
+
+### Collaboration
+Work with external developers:
+- **Pull request integration** with GitHub/GitLab
+- **Code review tools** for team collaboration
+- **Merge conflict resolution** with visual diff viewer
+- **Branch protection** rules and automated checks
+
+## Security Features
+
+### Code Security
+Astrio helps maintain secure code:
+- **Dependency scanning** for vulnerabilities
+- **Secret detection** to prevent credential leaks
+- **Security best practices** enforcement
+- **Automated security updates** for dependencies
+
+## Migration and Export
+
+### Code Export
+Export your code for external development:
+- **Full source code** with all dependencies
+- **Docker containers** for easy deployment
+- **CI/CD configurations** for automated workflows
+- **Documentation** generation
+
+### Import Projects
+Bring existing projects into Astrio:
+- **GitHub repository** import
+- **Zip file** upload
+- **NPM package** integration
+- **Template customization**
+
+
+Use Dev Mode when you need fine-grained control over functionality that's difficult to achieve with visual editing alone.
+
+
+
+Changes made in Dev Mode may not be fully reversible through visual editing. Always commit your work before making major code changes.
+
diff --git a/features/overview.mdx b/features/overview.mdx
index 5d35b0b..5e56d13 100644
--- a/features/overview.mdx
+++ b/features/overview.mdx
@@ -1,5 +1,5 @@
---
-title: 'Features Overview'
+title: 'Overview'
description: 'Discover the powerful features that make Astrio the fastest way to build applications'
---
@@ -7,92 +7,51 @@ description: 'Discover the powerful features that make Astrio the fastest way to
Astrio revolutionizes application development by combining the power of AI with intuitive no-code tools. Build production-ready applications in minutes, not months.
-
+
- Visual drag-and-drop interface for rapid application development
+ Select a component and describe the change
- Intelligent code generation and optimization suggestions
+ View & Edit your projectβs code directly in Astrio
+
+
+ Control the visibility of your projects
+
+
+ Work together with your team in real-time
Deploy to production with automatic scaling and SSL
- Work together with your team in real-time
+ Add your own domain to any Astrio project
-## Core Capabilities
-
-### π¨ Visual Development
-
-Build beautiful, responsive applications using our intuitive visual editor:
-
-- **Drag & Drop Components**: Pre-built UI components for rapid development
-- **Responsive Design**: Automatic mobile optimization
-- **Custom Styling**: Full control over appearance and branding
-- **Theme System**: Light/dark mode and custom themes
-
-### π€ AI Integration
-
-Leverage artificial intelligence to accelerate your development:
-
-- **Smart Code Generation**: AI writes code based on your descriptions
-- **Intelligent Suggestions**: Get recommendations for improvements
-- **Auto-completion**: AI-powered code completion and error detection
-- **Natural Language Queries**: Describe what you want and let AI build it
-
-### π Performance & Scale
-
-Built for performance from day one:
-
-- **Edge Deployment**: Global CDN for lightning-fast load times
-- **Auto-scaling**: Handles traffic spikes automatically
-- **Optimized Builds**: Automatic code splitting and optimization
-- **Real-time Updates**: Instant deployments with zero downtime
-
-### π Enterprise Ready
-
-Secure and reliable for business applications:
-
-- **SOC 2 Compliant**: Enterprise-grade security standards
-- **SSO Integration**: Single sign-on with popular providers
-- **Role-based Access**: Granular permissions and user management
-- **Audit Logs**: Complete activity tracking and compliance
-
-## Development Workflow
-
-
-
- Start with our visual builder or import designs from Figma
-
-
- Add functionality with our component library and AI assistance
-
-
- Integrate with databases, APIs, and third-party services
-
-
- Push to production with one click and automatic optimization
-
-
-
## Feature Comparison
| Feature | Traditional Development | Astrio |
@@ -104,66 +63,31 @@ Secure and reliable for business applications:
| **Maintenance** | Ongoing updates | Managed for you |
| **Team Collaboration** | Git conflicts | Real-time editing |
-## What You Can Build
-
-
-
- - SaaS platforms and dashboards
- - E-commerce stores
- - Content management systems
- - Customer portals
- - Internal tools and admin panels
-
-
-
- - Progressive Web Apps (PWAs)
- - Native mobile applications
- - Cross-platform solutions
- - Mobile-first experiences
-
-
-
- - CRM systems
- - Project management tools
- - Inventory management
- - HR and payroll systems
- - Analytics dashboards
-
-
-
- - RESTful APIs
- - GraphQL endpoints
- - Microservices
- - Webhook handlers
- - Data processing pipelines
-
-
-
## Getting Started
Ready to experience the future of application development?
- See Astrio in action with our interactive demo
+ Follow our quickstart guide to build your first app
- Follow our quickstart guide to build your first app
+ Start building with Astrio for free
- Browse pre-built templates and examples
+ See our answers for frequently asked questions
diff --git a/features/publish.mdx b/features/publish.mdx
new file mode 100644
index 0000000..c653b80
--- /dev/null
+++ b/features/publish.mdx
@@ -0,0 +1,287 @@
+---
+title: 'Publish'
+description: 'Deploy to production with automatic scaling, SSL certificates, and global CDN distribution'
+---
+
+## One-Click Production Deployment
+
+Transform your Astrio project from development to production instantly. Deploy globally with enterprise-grade infrastructure, automatic scaling, and monitoring.
+
+## Deployment Features
+
+
+
+ Deploy to 300+ edge locations worldwide for lightning-fast load times
+
+
+ Automatically handle traffic spikes without configuration
+
+
+ Free SSL certificates with automatic renewal
+
+
+ Deploy updates without service interruption
+
+
+
+## Deployment Process
+
+
+
+ Astrio automatically optimizes your app for production
+
+
+ Run automated tests and performance audits
+
+
+ Push to global edge network in under 30 seconds
+
+
+ Your app is live with monitoring and analytics
+
+
+
+## Infrastructure
+
+### Global Edge Network
+Your applications are deployed to Astrio's global infrastructure:
+
+- **300+ Edge Locations** - Serve content from the closest location to users
+- **Multi-Region Redundancy** - Automatic failover across regions
+- **DDoS Protection** - Enterprise-grade security against attacks
+- **Load Balancing** - Intelligent traffic distribution
+
+### Performance Optimization
+Every deployment includes automatic optimizations:
+
+```javascript
+// Automatic optimizations applied:
+- Code splitting and tree shaking
+- Image compression and WebP conversion
+- CSS and JavaScript minification
+- Gzip and Brotli compression
+- HTTP/2 and HTTP/3 support
+```
+
+## Scaling and Performance
+
+### Automatic Scaling
+Handle any amount of traffic without configuration:
+
+| Traffic Level | Response Time | Scaling Action |
+|---------------|---------------|----------------|
+| **Low** (< 1k users) | < 100ms | Single instance |
+| **Medium** (1k-100k users) | < 200ms | Auto-scale instances |
+| **High** (100k+ users) | < 300ms | Global distribution |
+| **Extreme** (1M+ users) | < 500ms | Enterprise scaling |
+
+### Performance Monitoring
+Real-time insights into your application performance:
+
+
+
+ Monitor LCP, FID, and CLS scores automatically
+
+
+ Get notified of errors with detailed stack traces
+
+
+ Track user behavior and conversion metrics
+
+
+ 99.9% uptime SLA with instant alerts
+
+
+
+## Environment Management
+
+### Multiple Environments
+Manage different stages of your application:
+
+- **Development** - For active development and testing
+- **Staging** - For final testing before production
+- **Production** - Live application serving real users
+
+### Environment Variables
+Securely manage configuration across environments:
+
+```bash
+# Development
+DATABASE_URL=postgres://dev-db.astrio.internal
+API_KEY=dev_key_12345
+
+# Production
+DATABASE_URL=postgres://prod-db.astrio.internal
+API_KEY=prod_key_67890
+```
+
+### Database Management
+Astrio handles database deployments and migrations:
+- **Automatic backups** every 24 hours
+- **Point-in-time recovery** up to 7 days
+- **Schema migrations** with rollback support
+- **Read replicas** for improved performance
+
+## Security and Compliance
+
+### Security Features
+Enterprise-grade security built-in:
+
+
+
+ Web Application Firewall blocks malicious requests
+
+
+ Prevent abuse with configurable rate limits
+
+
+ Restrict access to specific IP addresses
+
+
+ Built-in authentication and authorization
+
+
+
+### Compliance
+Meet regulatory requirements:
+- **GDPR** - European data protection compliance
+- **CCPA** - California privacy rights compliance
+- **SOC 2 Type II** - Security and availability controls
+- **HIPAA** - Healthcare data protection (Enterprise)
+
+## Monitoring and Alerts
+
+### Real-Time Monitoring
+Stay informed about your application's health:
+
+```yaml
+# Automatic monitoring includes:
+- Response time tracking
+- Error rate monitoring
+- Traffic pattern analysis
+- Resource utilization metrics
+- Security event logging
+```
+
+### Alert Channels
+Get notified through your preferred channels:
+- **Email** - Instant email notifications
+- **Slack** - Direct integration with Slack channels
+- **Discord** - Webhook integration for Discord
+- **SMS** - Critical alerts via text message
+- **PagerDuty** - Enterprise incident management
+
+## Deployment Strategies
+
+### Blue-Green Deployment
+Zero-downtime deployments with instant rollback:
+
+
+
+ New version deployed to standby environment
+
+
+ Automated tests verify the new deployment
+
+
+ Traffic gradually moved to new version
+
+
+ Continuous monitoring for any issues
+
+
+
+### Canary Releases
+Gradual rollout to minimize risk:
+- **1%** of traffic to new version initially
+- **10%** after successful health checks
+- **50%** if metrics remain healthy
+- **100%** for full deployment
+
+## Analytics and Insights
+
+### Performance Analytics
+Understand how your application performs:
+
+- **Page Load Times** - Track loading performance across pages
+- **User Flow Analytics** - See how users navigate your app
+- **Conversion Tracking** - Monitor goal completions
+- **A/B Testing** - Test different versions automatically
+
+### Business Metrics
+Track key business indicators:
+- **Daily/Monthly Active Users** - User engagement metrics
+- **Revenue Tracking** - E-commerce and subscription metrics
+- **Customer Acquisition Cost** - Marketing effectiveness
+- **Retention Rates** - User loyalty measurements
+
+## Backup and Recovery
+
+### Automated Backups
+Never lose your work:
+- **Daily snapshots** of your entire application
+- **Database backups** with point-in-time recovery
+- **Asset backups** including images and files
+- **Configuration backups** for easy restoration
+
+### Disaster Recovery
+Enterprise-grade recovery capabilities:
+- **RTO: 15 minutes** - Recovery time objective
+- **RPO: 1 hour** - Recovery point objective
+- **Multi-region backup** - Geographic redundancy
+- **Automated failover** - Seamless service continuation
+
+## Pricing
+
+### Deployment Tiers
+
+| Plan | Traffic | Storage | Features |
+|------|---------|---------|----------|
+| **Free** | 10k visits/month | 1GB | Basic deployment |
+| **Pro** | 100k visits/month | 10GB | Auto-scaling, analytics |
+| **Business** | 1M visits/month | 100GB | Advanced monitoring |
+| **Enterprise** | Unlimited | Unlimited | SLA, dedicated support |
+
+
+Use staging environments to test deployments before pushing to production. This prevents issues from affecting your live users.
+
+
+
+Always test custom domains and SSL certificates in staging before deploying to production to avoid downtime.
+
diff --git a/features/visual-edits.mdx b/features/visual-edits.mdx
new file mode 100644
index 0000000..2003fc3
--- /dev/null
+++ b/features/visual-edits.mdx
@@ -0,0 +1,298 @@
+---
+title: 'Visual Edits'
+description: 'Click on any component, then describe your design change in plain English.'
+---
+
+## AI-Powered Visual Editing
+
+Transform your applications with natural language. Simply select any component and describe the changes you want in plain English. Astrio's AI instantly understands and implements your design vision.
+
+## How It Works
+
+
+
+ Click on any element in your application - buttons, text, images, layouts
+
+
+ Tell Astrio what you want: "Make this button blue" or "Add a shadow effect"
+
+
+ Watch as your changes appear instantly in real-time
+
+
+ Continue iterating with additional natural language commands
+
+
+
+## Visual Editing Features
+
+
+
+ Describe changes in plain English - no technical knowledge required
+
+
+ See changes instantly as you make them
+
+
+ Easily revert changes with full history tracking
+
+
+ Get AI-powered design recommendations
+
+
+
+## What You Can Edit
+
+### Styling and Appearance
+Transform the look and feel of any component:
+
+```text
+Natural Language Examples:
+- "Make this button larger and round"
+- "Change the background to a gradient from blue to purple"
+- "Add a subtle drop shadow to this card"
+- "Make the text bold and center-aligned"
+- "Use a darker color scheme"
+```
+
+### Layout and Positioning
+Adjust layouts without understanding CSS:
+
+```text
+Layout Commands:
+- "Move this sidebar to the right side"
+- "Make these cards display in a 3-column grid"
+- "Add more spacing between these elements"
+- "Stack these items vertically on mobile"
+- "Center this content on the page"
+```
+
+### Content and Text
+Update content dynamically:
+
+```text
+Content Changes:
+- "Change this heading to 'Welcome to Our Store'"
+- "Add a subtitle below this title"
+- "Make this paragraph shorter and more concise"
+- "Add a call-to-action button here"
+- "Insert a contact form below this text"
+```
+
+### Interactive Elements
+Enhance user interactions:
+
+```text
+Interaction Improvements:
+- "Add a hover effect to this button"
+- "Make this image clickable"
+- "Add animation when this appears"
+- "Create a dropdown menu here"
+- "Add a loading spinner to this button"
+```
+
+## Advanced Visual Editing
+
+### Component Libraries
+Choose from pre-built components and customize them:
+
+
+
+ Buttons, inputs, cards, navigation bars
+
+
+ Grids, flexboxes, containers, sections
+
+
+ Tables, lists, charts, dashboards
+
+
+ Images, videos, galleries, carousels
+
+
+ Inputs, selectors, validation, submission
+
+
+ Menus, breadcrumbs, pagination, tabs
+
+
+
+### Design Systems
+Maintain consistency across your application:
+
+- **Color Palettes** - Define and apply consistent color schemes
+- **Typography** - Set font families, sizes, and weights
+- **Spacing** - Standardize margins, padding, and gaps
+- **Border Radius** - Consistent corner radius across components
+- **Shadows** - Unified shadow styles for depth and elevation
+
+### Responsive Design
+Ensure your app looks great on all devices:
+
+```text
+Responsive Commands:
+- "Hide this on mobile devices"
+- "Stack these columns on tablets"
+- "Make this text smaller on phones"
+- "Show a hamburger menu on mobile"
+- "Adjust this layout for desktop screens"
+```
+
+## AI Design Intelligence
+
+### Smart Design Suggestions
+Astrio's AI analyzes your design and suggests improvements:
+
+- **Accessibility** - Recommendations for better color contrast and readability
+- **User Experience** - Suggestions for improved user flows and interactions
+- **Performance** - Optimizations for faster loading and better performance
+- **Design Trends** - Modern design patterns and best practices
+
+### Context-Aware Editing
+The AI understands the context of your changes:
+
+```text
+Contextual Understanding:
+- "Make this more professional" β Applies appropriate styling for business apps
+- "Add some fun colors" β Suggests vibrant, playful color schemes
+- "Make it more minimal" β Reduces visual clutter and simplifies design
+- "Add e-commerce features" β Suggests shopping cart, product cards, etc.
+```
+## Collaboration in Visual Mode
+
+### Real-Time Collaboration
+Multiple team members can edit visually simultaneously:
+
+- **Live cursors** - See where teammates are working
+- **Instant updates** - Changes appear for everyone in real-time
+- **Design comments** - Add feedback directly on components
+- **Version history** - Track all visual changes over time
+
+### Design Review Process
+Streamline design approval workflows:
+
+
+
+ Build your design using visual editing
+
+
+ Send a link to stakeholders for feedback
+
+
+ Reviewers can comment directly on components
+
+
+ Apply feedback using natural language commands
+
+
+
+## Advanced Features
+
+### Animation and Transitions
+Add motion to your designs:
+
+```text
+Animation Commands:
+- "Fade in this element when it appears"
+- "Add a slide-in animation from the left"
+- "Make this button pulse when clicked"
+- "Create a smooth transition between these pages"
+- "Add a loading animation to this content"
+```
+
+### Custom Styling
+For more control, combine visual editing with custom CSS:
+
+```css
+/* Generated from "Make this button more modern" */
+.modern-button {
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+ border-radius: 12px;
+ box-shadow: 0 4px 15px rgba(102, 126, 234, 0.25);
+ transition: all 0.3s ease;
+}
+
+.modern-button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 8px 25px rgba(102, 126, 234, 0.35);
+}
+```
+
+### Integration with Dev Mode
+Seamlessly switch between visual and code editing:
+
+- **Generated code** - See the code behind your visual changes
+- **Code synchronization** - Manual code changes reflect in visual mode
+- **Hybrid editing** - Combine both approaches for maximum flexibility
+
+## Best Practices
+
+### Design Efficiency
+Maximize your productivity with visual editing:
+
+
+
+ Begin with basic layouts and add complexity gradually
+
+
+ Make small changes and test frequently
+
+
+ Design for mobile screens first, then scale up
+
+
+
+### Performance Considerations
+Keep your designs optimized:
+
+- **Image optimization** - Astrio automatically optimizes images you add
+- **CSS efficiency** - Generated styles are optimized for performance
+- **Responsive images** - Different sizes served based on device
+- **Lazy loading** - Images load only when needed
+
+
+Use descriptive language when making requests. Instead of "make it better," try "increase the font size and add more contrast for better readability."
+
+
+
+Major layout changes might affect responsive behavior. Always test your changes on different screen sizes after making significant modifications.
+
diff --git a/integrations/overview.mdx b/integrations/overview.mdx
index f78fba7..5bac443 100644
--- a/integrations/overview.mdx
+++ b/integrations/overview.mdx
@@ -1,5 +1,5 @@
---
-title: 'Integrations Overview'
+title: 'Overview'
description: 'Connect Astrio with your favorite tools and services to build powerful applications'
---
diff --git a/introduction/welcome.mdx b/introduction/welcome.mdx
index 077119c..bbba61b 100644
--- a/introduction/welcome.mdx
+++ b/introduction/welcome.mdx
@@ -10,7 +10,7 @@ Astrio is a powerful platform that transforms your ideas into fully functional a
Get your first Astrio application running in under 5 minutes
@@ -40,14 +40,7 @@ Astrio is a powerful platform that transforms your ideas into fully functional a
## Popular Resources
-
-
- Learn the fundamentals in minutes
-
+
- Start with pre-built solutions
+ See our answers for frequently asked questions
\ No newline at end of file
diff --git a/mint.json b/mint.json
index bb9f6c8..375fb47 100644
--- a/mint.json
+++ b/mint.json
@@ -69,10 +69,11 @@
"group": "Features",
"pages": [
"features/overview",
- "features/no-code-builder",
- "features/ai-assistance",
- "features/deployment",
- "features/collaboration"
+ "features/visual-edits",
+ "features/dev-mode",
+ "features/collaboration",
+ "features/custom-domain",
+ "features/publish"
]
},
{