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.
296 lines (270 loc) • 7.33 kB
Markdown
**Yes, users can create websites exactly the way they want!** With Zyros SSG, every aspect of your website can be customized through simple JSON configuration - no coding required.
- **Logo**: Text, image, size, position
- **Navigation**: Menu items, dropdowns, icons, badges
- **Call-to-Action Button**: Text, style, size, icon
- **Search Bar**: Enable/disable
- **Theme Toggle**: Light/dark mode switcher
- **Layout**: Spread, centered, left, right alignment
- **Background**: Solid colors, gradients, blur effects
- **Borders**: Style, width, color
- **Height**: Compact, normal, tall
- **Style**: Minimal, modern, classic, bold
- **Layout**: Columns, centered, split, stacked
- **Content**: Copyright, links, columns
- **Newsletter**: Signup form
- **Social Media**: Custom links with icons and colors
- **Custom Sections**: Mission statements, CTAs, contact info
- **Background**: Solid, gradient, or image backgrounds
- **Spacing**: Compact, normal, spacious
- **Style**: Minimal, modern, classic, bold
- **Multi-level Menus**: Unlimited dropdown levels
- **Icons**: Add emojis or icons to menu items
- **Badges**: "New", "Popular", custom badges
- **External Links**: Link to external websites
- **Mobile Menu**: Slide, overlay, or push styles
```json
{
"header": {
"logo": {
"text": "Jane Doe",
"size": "medium",
"position": "left"
},
"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"
}
}
```
```json
{
"header": {
"logo": {
"text": "StyleShop",
"image": "/logo.svg",
"size": "large"
},
"navigation": [
{
"title": "Women",
"href": "/women",
"children": [
{
"title": "Dresses",
"href": "/women/dresses"
},
{
"title": "Tops",
"href": "/women/tops"
}
]
},
{
"title": "Men",
"href": "/men"
},
{
"title": "Sale",
"href": "/sale",
"badge": "50% OFF"
}
],
"cta": {
"text": "Shop Now",
"href": "/shop",
"style": "gradient",
"icon": "🛍️"
},
"search": true,
"style": "modern"
}
}
```
```json
{
"header": {
"logo": {
"text": "AGENCY PRO",
"size": "large"
},
"navigation": [
{
"title": "SERVICES",
"href": "/services"
},
{
"title": "WORK",
"href": "/work"
},
{
"title": "CONTACT",
"href": "/contact"
}
],
"cta": {
"text": "START PROJECT",
"href": "/start",
"style": "primary",
"size": "large"
},
"style": "bold",
"height": "tall",
"background": {
"type": "solid",
"color": "#000000"
}
}
}
```
```json
{
"footer": {
"copyright": "© 2025 Your Company. All rights reserved.",
"columns": [
{
"title": "Products",
"links": [
{
"title": "Web Apps",
"href": "/products/web"
},
{
"title": "Mobile Apps",
"href": "/products/mobile"
}
]
},
{
"title": "Company",
"links": [
{
"title": "About",
"href": "/about"
},
{
"title": "Careers",
"href": "/careers"
}
]
}
],
"newsletter": true,
"social": true,
"socialLinks": [
{
"platform": "Twitter",
"url": "https://twitter.com/yourcompany",
"icon": "🐦",
"color": "#1DA1F2"
},
{
"platform": "LinkedIn",
"url": "https://linkedin.com/company/yourcompany",
"icon": "💼",
"color": "#0077B5"
}
],
"customSections": [
{
"id": "mission",
"title": "Our Mission",
"content": "Building the future of web development.",
"position": "left"
}
],
"background": {
"type": "gradient",
"gradient": {
"from": "#1a202c",
"to": "#2d3748",
"direction": "diagonal"
}
},
"style": "modern",
"layout": "columns"
}
}
```
- **Minimal**: Clean, simple design
- **Modern**: Sleek with gradients and effects
- **Classic**: Traditional, professional look
- **Bold**: High-contrast, attention-grabbing
- **Columns**: Traditional multi-column layout
- **Centered**: Everything centered
- **Split**: Left/right split layout
- **Stacked**: Vertical stacking
- **Solid**: Single color backgrounds
- **Gradient**: Beautiful color transitions
- **Blur**: Glassmorphism effect
- **Image**: Custom background images
Perfect for designers, developers, photographers:
- Minimal header with portfolio navigation
- Clean, centered footer
- Focus on showcasing work
Ideal for online shops:
- Product category navigation with dropdowns
- Shopping-focused CTAs
- Comprehensive footer with customer service links
Great for service businesses:
- Bold, attention-grabbing design
- Service-focused navigation
- Professional footer with company info
Perfect for publishers:
- Search-enabled header
- Category-based navigation
- Newsletter signup in footer
1. **Keep it Simple**: Start with minimal design and add complexity as needed
2. **Brand Consistency**: Use your brand colors in backgrounds and social links
3. **Mobile First**: All layouts are automatically mobile-responsive
4. **User Experience**: Use badges and icons to guide user attention
5. **Performance**: Gradients and effects are CSS-based for fast loading
6. **Accessibility**: All components follow accessibility best practices
1. **Copy** any example configuration above
2. **Modify** the text, links, and colors to match your brand
3. **Save** to your `site.json` file
4. **Build** your site - changes appear instantly!
**No coding knowledge required** - just edit the JSON configuration and watch your website transform!
---
*Want to see more examples? Check out our [customization examples file](/customization-examples.json) for complete site configurations.*