zyros
Version:
A developer-friendly static site generator built with Next.js and Tailwind CSS. Transform a simple JSON file into a beautiful, fast static website.
453 lines (413 loc) • 11.9 kB
Markdown
With Zyros, **every single aspect** of your website can be customized through simple JSON configuration. No coding knowledge required - just edit JSON and watch your website transform instantly.
- **100% Customizable**: Headers, footers, navigation, layouts, colors, spacing - everything
- **No Code Required**: Pure JSON configuration
- **Real-time Changes**: Edit JSON, refresh page, see changes instantly
- **Professional Results**: Beautiful, responsive designs that work on all devices
- **Unlimited Flexibility**: Create any style from minimal portfolios to bold agency sites
```json
"logo": {
"text": "Your Brand Name", // Text-based logo
"image": "/path/to/logo.svg", // Image logo
"url": "/", // Click destination
"size": "small|medium|large", // Logo size
"position": "left|center|right" // Logo position
}
```
```json
"navigation": [
{
"title": "Products",
"href": "/products",
"icon": "📦", // Optional emoji/icon
"badge": "New", // Optional badge
"external": false, // External link?
"children": [ // Dropdown menu
{
"title": "Web Apps",
"href": "/products/web",
"icon": "🌐"
}
]
}
]
```
```json
"cta": {
"text": "Get Started Free",
"href": "/signup",
"style": "primary|secondary|outline|ghost|gradient",
"size": "small|medium|large",
"icon": "🚀"
}
```
```json
"header": {
"search": true, // Show search bar
"themeToggle": true, // Theme switcher
"sticky": true, // Stick to top
"height": "compact|normal|tall", // Header height
"style": "minimal|modern|classic|bold",
"layout": "spread|center|left|right",
"background": {
"type": "solid|gradient|blur",
"color": "#ffffff",
"gradient": {
"from": "#667eea",
"to": "#764ba2",
"direction": "horizontal|vertical|diagonal"
}
},
"border": {
"show": true,
"style": "solid|dashed|dotted",
"width": "thin|medium|thick",
"color": "#e2e8f0"
}
}
```
```json
"footer": {
"layout": "columns|centered|split|stacked",
"style": "minimal|modern|classic|bold",
"spacing": "compact|normal|spacious"
}
```
```json
"columns": [
{
"title": "Products",
"links": [
{
"title": "Web Development",
"href": "/services/web",
"external": false
}
]
}
],
"customSections": [
{
"id": "mission",
"title": "Our Mission",
"content": "Building the future of web development.",
"position": "left|center|right"
}
]
```
```json
"socialLinks": [
{
"platform": "Twitter",
"url": "https://twitter.com/yourcompany",
"icon": "🐦",
"color": "#1DA1F2"
},
{
"platform": "LinkedIn",
"url": "https://linkedin.com/company/yourcompany",
"icon": "💼",
"color": "#0077B5"
}
]
```
```json
"background": {
"type": "solid|gradient|image",
"color": "#1a202c",
"gradient": {
"from": "#1a202c",
"to": "#2d3748",
"direction": "diagonal"
},
"image": "/footer-background.jpg"
}
```
Perfect for: Portfolios, personal sites, clean corporate sites
- Clean typography
- Subtle colors
- Plenty of whitespace
- Simple navigation
Perfect for: Tech companies, startups, SaaS products
- Gradient backgrounds
- Smooth animations
- Contemporary design
- Advanced effects
Perfect for: Traditional businesses, law firms, consulting
- Professional appearance
- Conservative colors
- Traditional layouts
- Timeless design
Perfect for: Creative agencies, fashion brands, entertainment
- High contrast
- Vibrant colors
- Attention-grabbing elements
- Dramatic effects
```json
{
"site": {
"title": "Jane Doe - Designer",
"description": "Creative portfolio showcasing innovative design solutions"
},
"header": {
"logo": {
"text": "Jane Doe",
"size": "medium"
},
"navigation": [
{"title": "Work", "href": "/work", "icon": "💼"},
{"title": "About", "href": "/about", "icon": "👋"},
{"title": "Contact", "href": "/contact", "icon": "📧"}
],
"cta": {
"text": "Hire Me",
"href": "/contact",
"style": "primary"
},
"style": "minimal",
"height": "compact"
},
"footer": {
"copyright": "© 2025 Jane Doe. All rights reserved.",
"style": "minimal",
"layout": "centered",
"socialLinks": [
{"platform": "Dribbble", "url": "https://dribbble.com/janedoe", "icon": "🎨"},
{"platform": "LinkedIn", "url": "https://linkedin.com/in/janedoe", "icon": "💼"}
]
}
}
```
```json
{
"site": {
"title": "StyleShop - Fashion Store",
"description": "Premium fashion and lifestyle products"
},
"header": {
"logo": {
"text": "StyleShop",
"image": "/styleshop-logo.svg",
"size": "large"
},
"navigation": [
{
"title": "Women",
"href": "/women",
"children": [
{"title": "Dresses", "href": "/women/dresses"},
{"title": "Tops", "href": "/women/tops"},
{"title": "Accessories", "href": "/women/accessories"}
]
},
{
"title": "Men",
"href": "/men",
"children": [
{"title": "Shirts", "href": "/men/shirts"},
{"title": "Pants", "href": "/men/pants"}
]
},
{"title": "Sale", "href": "/sale", "badge": "50% OFF"}
],
"cta": {
"text": "Shop Now",
"href": "/shop",
"style": "gradient",
"icon": "🛍️"
},
"search": true,
"style": "modern"
},
"footer": {
"columns": [
{
"title": "Shop",
"links": [
{"title": "New Arrivals", "href": "/new"},
{"title": "Best Sellers", "href": "/bestsellers"},
{"title": "Sale", "href": "/sale"}
]
},
{
"title": "Customer Care",
"links": [
{"title": "Size Guide", "href": "/size-guide"},
{"title": "Returns", "href": "/returns"},
{"title": "Shipping", "href": "/shipping"}
]
}
],
"newsletter": true,
"socialLinks": [
{"platform": "Instagram", "url": "https://instagram.com/styleshop", "icon": "📸"},
{"platform": "Pinterest", "url": "https://pinterest.com/styleshop", "icon": "📌"}
],
"style": "modern",
"layout": "columns"
}
}
```
```json
{
"site": {
"title": "Digital Agency Pro",
"description": "Full-service digital marketing and development agency"
},
"header": {
"logo": {
"text": "AGENCY PRO",
"size": "large"
},
"navigation": [
{
"title": "SERVICES",
"href": "/services",
"children": [
{"title": "Web Development", "href": "/services/web-dev"},
{"title": "Digital Marketing", "href": "/services/marketing"},
{"title": "Branding", "href": "/services/branding"}
]
},
{"title": "WORK", "href": "/work"},
{"title": "TEAM", "href": "/team"},
{"title": "CONTACT", "href": "/contact"}
],
"cta": {
"text": "START PROJECT",
"href": "/start-project",
"style": "primary",
"size": "large"
},
"style": "bold",
"height": "tall",
"background": {
"type": "solid",
"color": "#000000"
}
},
"footer": {
"columns": [
{
"title": "SERVICES",
"links": [
{"title": "WEB DEVELOPMENT", "href": "/services/web"},
{"title": "MOBILE APPS", "href": "/services/mobile"},
{"title": "SEO & MARKETING", "href": "/services/seo"}
]
},
{
"title": "COMPANY",
"links": [
{"title": "ABOUT US", "href": "/about"},
{"title": "CAREERS", "href": "/careers"},
{"title": "PRESS", "href": "/press"}
]
}
],
"customSections": [
{
"id": "cta",
"title": "READY TO DOMINATE?",
"content": "Let's build something that crushes the competition.",
"position": "left"
}
],
"style": "bold",
"background": {
"type": "solid",
"color": "#000000"
},
"socialLinks": [
{"platform": "LinkedIn", "url": "https://linkedin.com/company/agencypro", "icon": "💼"},
{"platform": "Twitter", "url": "https://twitter.com/agencypro", "icon": "🐦"}
]
}
}
```
Pick from minimal, modern, classic, or bold based on your brand
```json
{
"header": {
"logo": {"text": "Your Brand"},
"navigation": [
{"title": "Home", "href": "/"},
{"title": "About", "href": "/about"}
],
"style": "modern"
}
}
```
```json
{
"footer": {
"copyright": "© 2025 Your Brand",
"layout": "columns",
"style": "modern"
}
}
```
Use content blocks, pages, and custom sections
Fine-tune backgrounds, borders, and spacing
1. **Start Simple**: Begin with minimal style, add complexity gradually
2. **Brand Consistency**: Use your brand colors throughout
3. **Mobile First**: All designs are automatically mobile-responsive
4. **User Experience**: Use icons and badges to guide attention
5. **Performance**: All effects are CSS-based for fast loading
1. **Clear Navigation**: Keep menu items descriptive and organized
2. **Strong CTAs**: Use action-oriented button text
3. **Social Proof**: Add social media links and testimonials
4. **Contact Info**: Make it easy for users to reach you
5. **SEO Friendly**: Use descriptive titles and meta descriptions
1. **JSON Validation**: Use a JSON validator to check syntax
2. **Image Optimization**: Compress images for faster loading
3. **Testing**: Test on different devices and browsers
4. **Backup**: Keep backups of your configuration files
5. **Version Control**: Track changes to your site configuration
With this system, users can create:
- **Professional portfolios** that showcase their work beautifully
- **E-commerce stores** with full shopping functionality
- **Corporate websites** that build trust and credibility
- **Creative agency sites** that stand out from the competition
- **Blog and content sites** optimized for engagement
- **Landing pages** designed for conversion
**All without writing a single line of code!**
1. Copy any example above
2. Modify the text, colors, and links for your brand
3. Save to your `site.json` file
4. Build your site and see the magic happen!
**Your dream website is just a JSON file away!**