From 67ebf61a2c6d5882804a9f553d5603f248e3e187 Mon Sep 17 00:00:00 2001 From: naingoolwin Date: Wed, 20 Aug 2025 16:17:57 -0400 Subject: [PATCH] Completed Features pages --- features/collaboration.mdx | 132 ++++++++++++++++ features/custom-domain.mdx | 209 ++++++++++++++++++++++++++ features/dev-mode.mdx | 248 ++++++++++++++++++++++++++++++ features/overview.mdx | 148 +++++------------- features/publish.mdx | 287 +++++++++++++++++++++++++++++++++++ features/visual-edits.mdx | 298 +++++++++++++++++++++++++++++++++++++ integrations/overview.mdx | 2 +- introduction/welcome.mdx | 19 +-- mint.json | 9 +- 9 files changed, 1222 insertions(+), 130 deletions(-) create mode 100644 features/collaboration.mdx create mode 100644 features/custom-domain.mdx create mode 100644 features/dev-mode.mdx create mode 100644 features/publish.mdx create mode 100644 features/visual-edits.mdx 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" ] }, {