section {
class: "uiux-wrap ghost-grid pad"
header { class: "header"
span { class: "emoji"; text: "🎨" }
div {
h2 { class: "title"; text: "UI/UX Customization" }
p { class: "sub"; text: "We extend front-end components with bespoke HTML, JS, and delightful micro-interactions — tuned to your brand, CMS, and performance goals." }
}
span { class: "chip"; text: "CMS, Web Apps, Design Systems" }
}
div { class: "hero pad"
canvas { id: "confetti"; class: "hero-canvas" }
div { class: "hero-inner pad"
div {
h3 { text: "Pixel-perfect meets production-ready" }
p { text: "From theme overhauls and interactive docs to high-performing component libraries, we craft interfaces that feel fast and alive." }
div { class: "cta"
button { class: "btn"; id: "sparkBtn"; text: "Trigger Delight ✨" }
button { class: "btn alt"; id: "themeBtn"; text: "Toggle Theme" }
span { class: "toggle"
html {
}
}
}
}
div { class: "ba"
div { class: "frame"
html {
}
div { class: "range"
html { }
}
}
}
}
}
div { class: "grid"
div { class: "card"
h4 { text: "Component Theming" }
p { text: "Tokens, dark mode, density, and motion tuned per brand." }
div { class: "mini"
span { text: "Design Tokens" }
span { text: "Dark/Light" }
span { text: "Motion Curves" }
}
}
div { class: "card"
h4 { text: "Interactive Patterns" }
p { text: "Tabs, drawers, riff-on-hover, type-ahead, live previews." }
div { class: "mini"
span { text: "ARIA+WCAG" }
span { text: "Micro-copy" }
span { text: "Latency < 100ms" }
}
}
div { class: "card"
h4 { text: "CMS-Ready Snippets" }
p { text: "Drop-in blocks for ConcreteCMS, WordPress, and headless." }
div { class: "mini"
span { text: "ConcreteCMS" } span { text: "WP/Gutenberg" } span { text: "Headless" }
}
}
}
section { class: "tabs"
div { class: "tabbar"
button { id: "tab-1"; class: "active"; text: "Playground" }
button { id: "tab-2"; text: "Patterns" }
button { id: "tab-3"; text: "Case Studies" }
button { id: "tab-4"; text: "Code & Copy" }
}
div { id: "panel-1"; class: "tab active"
div { class: "play"
div { class: "ctrls"
h4 { text: "Tune the look" }
label { html { Font size } }
label { html { Corner radius } }
label { html { Shadow depth } }
div { class: "mini"
span { text: "Live variables" }
span { id: "varDump"; text: "--radius: 16px" }
}
}
div { class: "demo"
h4 { text: "Live Preview" }
p { text: "Buttons, chips, and cards pick up your settings instantly." }
button { class: "sample-btn"; id: "boomBtn"; text: "Primary Button" }
div { class: "mini"
span { class: "chip"; text: "Chip" }
span { class: "chip"; text: "Badge" }
span { class: "chip"; text: "Tokenized" }
}
}
}
}
div { id: "panel-2"; class: "tab"
div { class: "grid"
div { class: "card"
h4 { text: "Accessible Tabs" }
p { text: "Roving tabindex, keyboard nav, and ARIA markup baked in." }
}
div { class: "card"
h4 { text: "Command Palette" }
p { text: "Cmd/Ctrl+K quick search and actions across your UI." }
}
div { class: "card"
h4 { text: "Async Feedback" }
p { text: "Optimistic updates, skeletons, and toasts for perceived speed." }
}
}
div { class: "marquee"
div { class: "row"
span { class: "chip"; text: "Tooltips" }
span { class: "chip"; text: "Drawers" }
span { class: "chip"; text: "Accordions" }
span { class: "chip"; text: "Context Menus" }
span { class: "chip"; text: "Data Grids" }
span { class: "chip"; text: "Onboarding" }
span { class: "chip"; text: "Loaders" }
span { class: "chip"; text: "Empty States" }
span { class: "chip"; text: "Undo" }
span { class: "chip"; text: "Locale" }
span { class: "chip"; text: "i18n" }
span { class: "chip"; text: "RTL" }
}
}
}
div { id: "panel-3"; class: "tab"
div { class: "carousel"
div { class: "slides"; id: "slides"
div { class: "slide"
h4 { text: "Design System Lift" }
p { text: "Scaled to 45+ apps with tokens, theming, and lintable patterns." }
}
div { class: "slide"
h4 { text: "Interactive Docs" }
p { text: "Live examples, copy-paste code, and automated QA previews." }
}
div { class: "slide"
h4 { text: "E-commerce UX" }
p { text: "Checkout drop-off cut 18% via micro-copy and layout refactors." }
}
}
div { class: "dots"
button { class: "dot active"; data-index: "0" }
button { class: "dot"; data-index: "1" }
button { class: "dot"; data-index: "2" }
}
}
}
div { id: "panel-4"; class: "tab"
h4 { text: "Grab a starter button" }
pre { id: "codeBlock"
html {
<button class="btn">Call to Action</button>
<style>
.btn{padding:12px 16px;border-radius:14px;background:linear-gradient(180deg,#72f3c5,#2dd4a5);color:#062317;border:0;font-weight:800}
</style>
}
}
button { class: "btn alt"; id: "copyBtn"; text: "Copy HTML" }
}
}
section { class: "cta-panel"
h4 { text: "Have a component or page in mind?" }
p { class: "sub"; text: "Send a quick note with your goals and a link or screenshot. We’ll reply with options and a starter mock." }
form { id: "ctaForm"
html {
}
}
}
}