1+ <!DOCTYPE html> < html lang ="en " class ="scroll-smooth "> < head > < meta charset ="UTF-8 "> < meta name ="description " content ="Explore real-world examples of SigmOS in action "> < meta name ="viewport " content ="width=device-width, initial-scale=1.0 "> < link rel ="icon " type ="image/svg+xml " href ="/sigmos/favicon.svg "> < meta name ="generator " content ="Astro v4.16.18 "> <!-- Fonts --> < link rel ="preconnect " href ="https://fonts.googleapis.com "> < link rel ="preconnect " href ="https://fonts.gstatic.com " crossorigin > < link href ="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap " rel ="stylesheet "> <!-- SEO --> < meta property ="og:title " content ="Examples - SigmOS "> < meta property ="og:description " content ="Explore real-world examples of SigmOS in action "> < meta property ="og:type " content ="website "> < meta property ="og:url " content ="https://copyleftdev.github.io/sigmos/ "> < meta name ="twitter:card " content ="summary_large_image "> < meta name ="twitter:title " content ="Examples - SigmOS "> < meta name ="twitter:description " content ="Explore real-world examples of SigmOS in action "> < title > Examples - SigmOS</ title > < link rel ="stylesheet " href ="/sigmos/_astro/examples.BgpvPAWO.css "> < script type ="module "> document . addEventListener ( "DOMContentLoaded" , function ( ) { const r = { threshold :.1 , rootMargin :"0px 0px -50px 0px" } , o = new IntersectionObserver ( e => { e . forEach ( t => { t . isIntersecting && t . target . classList . add ( "animate-slide-up" ) } ) } , r ) ; document . querySelectorAll ( "section, .feature-card, .example-card" ) . forEach ( e => { o . observe ( e ) } ) } ) ;
2+ </ script > </ head > < body class ="bg-gray-950 text-white antialiased "> <!-- Background Effects --> < div class ="fixed inset-0 -z-10 "> < div class ="absolute inset-0 bg-gradient-to-br from-primary-950 via-gray-950 to-accent-950 "> </ div > < div class ="absolute inset-0 bg-[radial-gradient(circle_at_30%_20%,rgba(99,102,241,0.1),transparent_50%)] "> </ div > < div class ="absolute inset-0 bg-[radial-gradient(circle_at_70%_80%,rgba(217,70,239,0.1),transparent_50%)] "> </ div > < div class ="absolute inset-0 bg-[url('data:image/svg+xml,%3Csvg%20width%3D%2260%22%20height%3D%2260%22%20viewBox%3D%220%200%2060%2060%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%3E%3Cg%20fill%3D%22%23ffffff%22%20fill-opacity%3D%220.02%22%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2230%22%20r%3D%221%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E')] "> </ div > </ div > <!-- Navigation --> < nav class ="fixed top-0 w-full z-50 bg-gray-950/80 backdrop-blur-md border-b border-gray-800/50 "> < div class ="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 "> < div class ="flex justify-between items-center h-16 "> < div class ="flex items-center space-x-2 "> < div class ="w-8 h-8 bg-gradient-to-br from-primary-500 to-accent-500 rounded-lg flex items-center justify-center "> < span class ="text-white font-bold text-sm "> Σ</ span > </ div > < span class ="text-xl font-bold bg-gradient-to-r from-primary-400 to-accent-400 bg-clip-text text-transparent ">
3+ SigmOS
4+ </ span > </ div > < div class ="hidden md:flex items-center space-x-8 "> < a href ="/sigmos/ " class ="text-gray-300 hover:text-white transition-colors "> Home</ a > < a href ="/sigmos/docs " class ="text-gray-300 hover:text-white transition-colors "> Docs</ a > < a href ="/sigmos/examples " class ="text-gray-300 hover:text-white transition-colors "> Examples</ a > < a href ="https://github.com/copyleftdev/sigmos " class ="text-gray-300 hover:text-white transition-colors "> GitHub</ a > < a href ="/sigmos/docs/getting-started " class ="bg-gradient-to-r from-primary-600 to-accent-600 text-white px-4 py-2 rounded-lg hover:from-primary-500 hover:to-accent-500 transition-all duration-200 font-medium ">
5+ Get Started
6+ </ a > </ div > </ div > </ div > </ nav > <!-- Main Content --> < main class ="pt-16 "> < section class ="py-20 relative "> < div class ="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 "> < div class ="text-center mb-16 "> < h1 class ="text-4xl md:text-6xl font-bold mb-6 bg-gradient-to-r from-primary-400 to-accent-400 bg-clip-text text-transparent ">
7+ Examples
8+ </ h1 > < p class ="text-xl text-gray-400 max-w-3xl mx-auto leading-relaxed ">
9+ Explore real-world examples of SigmOS in action. Each example demonstrates different aspects of the language.
10+ </ p > </ div > </ div > </ section > < section class ="py-12 relative "> < div class ="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 "> < h2 class ="text-3xl font-bold mb-12 text-center text-white "> 🤖 Basic Examples</ h2 > < div class ="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-16 "> <!-- AI Agent Example --> < div class ="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800/50 overflow-hidden "> < div class ="p-6 border-b border-gray-800/50 "> < h3 class ="text-xl font-semibold text-white mb-2 "> AI Agent</ h3 > < p class ="text-gray-400 "> A simple AI agent with personality and conversation capabilities.</ p > </ div > < pre class ="p-6 text-sm font-mono text-gray-300 overflow-x-auto bg-gray-950/50 "> < code > < span class ="text-primary-400 "> spec</ span > < span class ="text-green-400 "> "Agent"</ span > < span class ="text-accent-400 "> v1.0</ span > {
11+ < span class ="text-blue-400 "> description</ span > : < span class ="text-green-400 "> "AI Agent with LLM capabilities"</ span >
12+
13+ < span class ="text-primary-400 "> inputs</ span > :
14+ < span class ="text-blue-400 "> name</ span > : < span class ="text-yellow-400 "> string</ span >
15+ < span class ="text-blue-400 "> tone</ span > : < span class ="text-yellow-400 "> enum</ span > (< span class ="text-green-400 "> "friendly"</ span > , < span class ="text-green-400 "> "hostile"</ span > )
16+
17+ < span class ="text-primary-400 "> actions</ span > :
18+ < span class ="text-blue-400 "> respond</ span > : < span class ="text-yellow-400 "> prompt</ span > {
19+ < span class ="text-blue-400 "> system</ span > : < span class ="text-green-400 "> "You are {{name}} with {{tone}} personality."</ span >
20+ < span class ="text-blue-400 "> user</ span > : < span class ="text-green-400 "> "{{input.message}}"</ span >
21+ < span class ="text-blue-400 "> model</ span > : < span class ="text-green-400 "> "gpt-4"</ span >
22+ }
23+ }</ code > </ pre > </ div > <!-- Content Pipeline --> < div class ="bg-gray-900/50 backdrop-blur-sm rounded-2xl border border-gray-800/50 overflow-hidden "> < div class ="p-6 border-b border-gray-800/50 "> < h3 class ="text-xl font-semibold text-white mb-2 "> Content Pipeline</ h3 > < p class ="text-gray-400 "> AI-powered content generation and validation pipeline.</ p > </ div > < pre class ="p-6 text-sm font-mono text-gray-300 overflow-x-auto bg-gray-950/50 "> < code > < span class ="text-primary-400 "> spec</ span > < span class ="text-green-400 "> "ContentPipeline"</ span > < span class ="text-accent-400 "> v1.0</ span > {
24+ < span class ="text-primary-400 "> inputs</ span > :
25+ < span class ="text-blue-400 "> topic</ span > : < span class ="text-yellow-400 "> string</ span >
26+ < span class ="text-blue-400 "> audience</ span > : < span class ="text-yellow-400 "> enum</ span > (< span class ="text-green-400 "> "technical"</ span > , < span class ="text-green-400 "> "general"</ span > )
27+
28+ < span class ="text-primary-400 "> actions</ span > :
29+ < span class ="text-blue-400 "> generate</ span > : < span class ="text-yellow-400 "> prompt</ span > {
30+ < span class ="text-blue-400 "> system</ span > : < span class ="text-green-400 "> "Expert content creator"</ span >
31+ < span class ="text-blue-400 "> user</ span > : < span class ="text-green-400 "> "Write about {{topic}} for {{audience}}"</ span >
32+ }
33+ }</ code > </ pre > </ div > </ div > </ div > </ section > < section class ="py-12 relative "> < div class ="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 "> < h2 class ="text-3xl font-bold mb-12 text-center text-white "> 🏭 Industry Examples</ h2 > < div class ="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 "> < div class ="group bg-gray-900/50 backdrop-blur-sm rounded-2xl p-6 border border-gray-800/50 hover:border-primary-500/50 transition-all duration-300 "> < div class ="w-12 h-12 bg-gradient-to-br from-red-500 to-pink-500 rounded-xl flex items-center justify-center mb-4 "> < span class ="text-white text-xl "> 🏥</ span > </ div > < h3 class ="text-xl font-semibold mb-3 text-white "> Healthcare</ h3 > < p class ="text-gray-400 mb-4 "> Patient data processing and medical analysis systems.</ p > < a href ="https://github.com/copyleftdev/sigmos/tree/main/examples/healthcare " class ="text-primary-400 hover:text-primary-300 "> View Examples →</ a > </ div > < div class ="group bg-gray-900/50 backdrop-blur-sm rounded-2xl p-6 border border-gray-800/50 hover:border-accent-500/50 transition-all duration-300 "> < div class ="w-12 h-12 bg-gradient-to-br from-green-500 to-emerald-500 rounded-xl flex items-center justify-center mb-4 "> < span class ="text-white text-xl "> 💰</ span > </ div > < h3 class ="text-xl font-semibold mb-3 text-white "> FinTech</ h3 > < p class ="text-gray-400 mb-4 "> Risk assessment and fraud detection systems.</ p > < a href ="https://github.com/copyleftdev/sigmos/tree/main/examples/fintech " class ="text-accent-400 hover:text-accent-300 "> View Examples →</ a > </ div > < div class ="group bg-gray-900/50 backdrop-blur-sm rounded-2xl p-6 border border-gray-800/50 hover:border-primary-500/50 transition-all duration-300 "> < div class ="w-12 h-12 bg-gradient-to-br from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center mb-4 "> < span class ="text-white text-xl "> 🛒</ span > </ div > < h3 class ="text-xl font-semibold mb-3 text-white "> E-Commerce</ h3 > < p class ="text-gray-400 mb-4 "> Product recommendations and inventory management.</ p > < a href ="https://github.com/copyleftdev/sigmos/tree/main/examples/ecommerce " class ="text-primary-400 hover:text-primary-300 "> View Examples →</ a > </ div > </ div > </ div > </ section > < section class ="py-20 relative "> < div class ="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center "> < div class ="bg-gradient-to-r from-primary-900/50 to-accent-900/50 backdrop-blur-sm rounded-3xl p-12 border border-gray-800/50 "> < h2 class ="text-3xl font-bold mb-6 text-white "> Ready to build?</ h2 > < p class ="text-xl text-gray-300 mb-8 "> Start with our examples and create something amazing.</ p > < a href ="/sigmos/docs/getting-started " class ="bg-gradient-to-r from-primary-600 to-accent-600 text-white px-8 py-4 rounded-xl font-semibold text-lg hover:from-primary-500 hover:to-accent-500 transition-all duration-300 ">
34+ Get Started Now →
35+ </ a > </ div > </ div > </ section > </ main > <!-- Footer --> < footer class ="bg-gray-900/50 border-t border-gray-800/50 mt-20 "> < div class ="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 "> < div class ="grid grid-cols-1 md:grid-cols-4 gap-8 "> < div class ="col-span-1 md:col-span-2 "> < div class ="flex items-center space-x-2 mb-4 "> < div class ="w-8 h-8 bg-gradient-to-br from-primary-500 to-accent-500 rounded-lg flex items-center justify-center "> < span class ="text-white font-bold text-sm "> Σ</ span > </ div > < span class ="text-xl font-bold bg-gradient-to-r from-primary-400 to-accent-400 bg-clip-text text-transparent ">
36+ SigmOS
37+ </ span > </ div > < p class ="text-gray-400 mb-4 max-w-md ">
38+ A next-generation Domain-Specific Language designed to define, orchestrate, and execute AI-native, composable, reactive, and multimodal systems.
39+ </ p > < div class ="flex space-x-4 "> < a href ="https://github.com/copyleftdev/sigmos " class ="text-gray-400 hover:text-white transition-colors "> < svg class ="w-6 h-6 " fill ="currentColor " viewBox ="0 0 24 24 "> < path d ="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z "> </ path > </ svg > </ a > </ div > </ div > < div > < h3 class ="text-white font-semibold mb-4 "> Documentation</ h3 > < ul class ="space-y-2 text-gray-400 "> < li > < a href ="/sigmos/docs/getting-started " class ="hover:text-white transition-colors "> Getting Started</ a > </ li > < li > < a href ="/sigmos/docs/user-guide " class ="hover:text-white transition-colors "> User Guide</ a > </ li > < li > < a href ="/sigmos/docs/api-reference " class ="hover:text-white transition-colors "> API Reference</ a > </ li > < li > < a href ="/sigmos/examples " class ="hover:text-white transition-colors "> Examples</ a > </ li > </ ul > </ div > < div > < h3 class ="text-white font-semibold mb-4 "> Community</ h3 > < ul class ="space-y-2 text-gray-400 "> < li > < a href ="https://github.com/copyleftdev/sigmos " class ="hover:text-white transition-colors "> GitHub</ a > </ li > < li > < a href ="https://github.com/copyleftdev/sigmos/issues " class ="hover:text-white transition-colors "> Issues</ a > </ li > < li > < a href ="https://github.com/copyleftdev/sigmos/discussions " class ="hover:text-white transition-colors "> Discussions</ a > </ li > </ ul > </ div > </ div > < div class ="border-t border-gray-800/50 mt-8 pt-8 text-center text-gray-400 "> < p > © 2024 SigmOS. Built with ❤️ by Lead Sigma.</ p > </ div > </ div > </ footer > </ body > </ html >
0 commit comments