diff --git a/README.md b/README.md index 5abc12b..560f069 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ npm run build # Generates production files ## Roadmap 🛣️ -- [x] Blueprint server blocks +- [ ] Blueprint server blocks - [ ] Blueprint live editor - [ ] Blueprint components diff --git a/src/about.bp b/src/about.bp new file mode 100644 index 0000000..74809bd --- /dev/null +++ b/src/about.bp @@ -0,0 +1,57 @@ +page(favicon:"/favicon.ico") { + title { "Blueprint - About" } + description { "A modern, declarative UI framework for building beautiful web interfaces" } + keywords { "blueprint, ui, framework, web development" } + author { "Blueprint Team" } +} + +navbar { + horizontal { + link(href:index) { text(bold) { "Blueprint Live" } } + links { + link(href:index) { "Home" } + link(href:components) { "Components" } + link(href:about) { "About" } + link(href:contact) { "Contact" } + } + } +} + +section(wide) { + title { "About Blueprint" } + text(subtle) { "A modern UI compiler with live reload support" } + + vertical { + card { + title { "Our Story" } + text { "Blueprint was created to make UI development faster and more enjoyable. With live reload support, you can see your changes instantly without manual refreshing." } + } + + card { + title { "Features" } + vertical { + horizontal { + badge { "New" } + text { "Live Reload Support" } + } + horizontal { + badge { "✨" } + text { "Modern Dark Theme" } + } + horizontal { + badge { "🚀" } + text { "Fast Development" } + } + } + } + + card { + title { "Get Started" } + text { "Try Blueprint now with our development server:" } + codeblock { + "bun dev" + } + link(text:"Get Help") { "Contact" } + } + } +} \ No newline at end of file diff --git a/src/components.bp b/src/components.bp new file mode 100644 index 0000000..4867679 --- /dev/null +++ b/src/components.bp @@ -0,0 +1,152 @@ +page(favicon:"/favicon.ico") { + title { "Blueprint - Components" } + description { "A modern, declarative UI framework for building beautiful web interfaces" } + keywords { "blueprint, ui, framework, web development" } + author { "Blueprint Team" } +} + +navbar { + horizontal { + link(href:index) { text(bold) { "Blueprint Live" } } + links { + link(href:index) { "Home" } + link(href:components) { "Components" } + link(href:about) { "About" } + link(href:contact) { "Contact" } + } + } +} + +section(wide, centered) { + title(huge) { "Modern UI Components" } + text(large, subtle) { "A showcase of beautiful, dark-themed UI elements" } +} + +section(wide) { + title { "Form Elements" } + + grid(columns:2) { + card { + title { "Text Inputs" } + vertical { + text(subtle) { "Regular input:" } + input { "Type something..." } + + text(subtle) { "Textarea:" } + textarea { "Multiple lines of text..." } + + text(subtle) { "Select dropdown:" } + select { + "Option 1" + "Option 2" + "Option 3" + } + } + } + + card { + title { "Toggle Controls" } + vertical { + horizontal { + checkbox { } + text { "Enable notifications" } + } + + horizontal { + radio { } + text { "Light theme" } + } + + horizontal { + radio { } + text { "Dark theme" } + } + + horizontal { + switch { } + text { "Airplane mode" } + } + } + } + } +} + +section(wide) { + title { "Progress Elements" } + + grid(columns:2) { + card { + title { "Progress Indicators" } + vertical { + text(subtle) { "Download progress:" } + progress(value:75, max:100) { } + + text(subtle) { "Volume control:" } + slider(value:50, min:0, max:100) { } + } + } + + card { + title { "Status Indicators" } + vertical { + horizontal(spaced) { + badge { "New" } + badge { "Updated" } + badge { "Popular" } + } + + alert { "✨ Welcome to the new UI Kit!" } + + horizontal { + tooltip(data-tooltip:"Click to learn more") { + text { "Hover me" } + } + } + } + } + } +} + +section(wide) { + title { "Button Variations" } + + grid(columns:3) { + card { + title { "Primary Actions" } + vertical { + button(prominent) { "Save Changes" } + button { "Cancel" } + } + } + + card { + title { "Button Groups" } + horizontal { + button(prominent) { "Previous" } + button(prominent) { "Next" } + } + } + + card { + title { "Icon Buttons" } + horizontal { + button(compact) { "👍" } + button(compact) { "❤️" } + button(compact) { "🔔" } + } + } + } +} + +section(wide, alternate) { + title(centered) { "Ready to Build?" } + + vertical(centered) { + text(large, subtle) { "Start creating your own modern UI today" } + + horizontal(centered, spaced) { + button(prominent) { "Get Started" } + button(prominent) { "View Documentation" } + } + } +} \ No newline at end of file diff --git a/src/contact.bp b/src/contact.bp new file mode 100644 index 0000000..4503613 --- /dev/null +++ b/src/contact.bp @@ -0,0 +1,54 @@ +page(favicon:"/favicon.ico") { + title { "Blueprint - Contact" } + description { "A modern, declarative UI framework for building beautiful web interfaces" } + keywords { "blueprint, ui, framework, web development" } + author { "Blueprint Team" } +} + +navbar { + horizontal { + link(href:index) { text(bold) { "Blueprint Live" } } + links { + link(href:index) { "Home" } + link(href:components) { "Components" } + link(href:about) { "About" } + link(href:contact) { "Contact" } + } + } +} + +section(vertical, centered) { + card(width:100) { + title { "Contact Us" } + text(subtle) { "Get in touch with the Blueprint team" } + + vertical { + text(subtle) { "Name" } + input { "Your name" } + + text(subtle) { "Email" } + input { "you@example.com" } + + text(subtle) { "Message" } + textarea { "Type your message here..." } + + horizontal { + checkbox { } + text { "Subscribe to updates" } + } + + link(href:submit) { button { "Send Message (this does not do anything)" } } + } + } + + horizontal(centered) { + text(subtle) { "Or connect with us on social media:" } + } + + horizontal(centered) { + link(href:twitter) { button-compact { "𝕏" } } + link(href:facebook) { button-compact { "📘" } } + link(href:linkedin) { button-compact { "💼" } } + link(href:instagram) { button-compact { "📱" } } + } +} \ No newline at end of file diff --git a/src/index.bp b/src/index.bp index 4c5cd79..22a0dae 100644 --- a/src/index.bp +++ b/src/index.bp @@ -1,15 +1,50 @@ - page(favicon:"/favicon.ico") { - title { "Blueprint - Modern Web UI Language" } - description { "It works!" } - keywords { "blueprint, language, web, ui, modern" } - author { "Epilogue Team" } +page(favicon:"/favicon.ico") { + title { "Blueprint - Modern UI Framework" } + description { "A modern, declarative UI framework for building beautiful web interfaces" } + keywords { "blueprint, ui, framework, web development" } + author { "Blueprint Team" } } +navbar { + horizontal { + link(href:index) { text(bold) { "Blueprint Live" } } + links { + link(href:index) { "Home" } + link(href:components) { "Components" } + link(href:about) { "About" } + link(href:contact) { "Contact" } + } + } +} section(wide, centered) { vertical(centered,wide) { - title(huge) { "It works!" } - text(subtle, large) { "Start using Blueprint at src/" } - text(small) { "Find examples at examples/" } + title(huge) { "Welcome to blueprint" } + text(subtle) { "You can now edit files in the src/ directory" } + } + + horizontal(centered) { + link(href:index) { button { "Get started" } } + link(href:about) { button-light { "About" } } } } + +section(wide) { + grid(columns:3) { + card { + title { "Live Reloads" } + text { "Changes appear instantly in your browser" } + link(href:https://github.com/epilogueteam/blueprint) { button-secondary { "Try Blueprint" } } + } + card { + title { "Modern Design" } + text { "Beautiful dark theme with consistent styling" } + link(href:about) { button-secondary { "About" } } + } + card { + title { "Easy to Use" } + text { "Simple, declarative syntax for building UIs" } + link(href:contact) { button-secondary { "Contact" } } + } + } +} \ No newline at end of file