121 lines
6.2 KiB
Markdown
121 lines
6.2 KiB
Markdown
<div class="w-full -mt-10">
|
|
<section class="relative py-20 overflow-hidden border-b border-base-200/30 text-center flex flex-col items-center">
|
|
<div class="relative z-10 max-w-5xl mx-auto px-6 flex flex-col items-center">
|
|
<div class="flex justify-center mb-10 text-secondary">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-48 h-48 md:w-64 md:h-64 drop-shadow-2xl" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="0.8">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M21 7.5l-9-5.25L3 7.5m18 0l-9 5.25m9-5.25v9l-9 5.25M3 7.5l9 5.25M3 7.5v9l9 5.25m0-5.25v9" />
|
|
</svg>
|
|
</div>
|
|
<h1 class="text-7xl md:text-9xl font-black tracking-tighter mb-4 bg-clip-text text-transparent bg-linear-to-r from-secondary via-accent to-primary !text-center w-full">SigPro UI beta (W.I.P.)</h1>
|
|
<div class="text-2xl md:text-3xl font-bold text-base-content/90 mb-4 !text-center w-full">Reactive Design System for SigPro</div>
|
|
<div class="text-xl text-base-content/60 max-w-3xl mx-auto mb-10 leading-relaxed italic text-balance font-light !text-center w-full">"Atomic components for high-performance interfaces. Zero-boilerplate, pure reactivity."</div>
|
|
<div class="flex flex-wrap justify-center gap-4 w-full">
|
|
<a href="#/install" class="btn btn-secondary btn-lg shadow-xl shadow-secondary/20 group px-10 border-none text-secondary-content">View Components <span class="group-hover:translate-x-1 transition-transform inline-block">→</span></a>
|
|
<button onclick="window.open('https://github.com/natxocc/sigpro-ui')" class="btn btn-outline btn-lg border-base-300 hover:bg-base-300 hover:text-base-content">GitHub</button>
|
|
</div>
|
|
</div>
|
|
<div class="absolute top-0 left-1/2 -translate-x-1/2 w-full h-full -z-0 opacity-10 pointer-events-none">
|
|
<div class="absolute top-10 right-1/4 w-96 h-96 bg-secondary filter blur-3xl rounded-full animate-pulse"></div>
|
|
<div class="absolute bottom-10 left-1/4 w-96 h-96 bg-primary filter blur-3xl rounded-full animate-pulse" style="animation-delay: 2s"></div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<section class="max-w-6xl mx-auto px-6 py-16">
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 items-stretch">
|
|
<div class="card bg-base-200/30 border border-base-300 hover:border-secondary/40 transition-all p-1">
|
|
<div class="card-body p-6">
|
|
<h3 class="card-title text-xl font-black text-secondary italic">SIGPRO NATIVE</h3>
|
|
<p class="text-sm opacity-70">Direct integration with SigPro signals. No wrappers, no context, just pure atomic reactivity.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card bg-base-200/30 border border-base-300 hover:border-accent/40 transition-all p-1">
|
|
<div class="card-body p-6">
|
|
<h3 class="card-title text-xl font-black text-accent italic">ZERO CONFIG</h3>
|
|
<p class="text-sm opacity-70">Import and build immediately. Designed for developers who hate configuration files.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card bg-base-200/30 border border-base-300 hover:border-primary/40 transition-all p-1">
|
|
<div class="card-body p-6">
|
|
<h3 class="card-title text-xl font-black text-primary italic">REACTIVE BY DESIGN</h3>
|
|
<p class="text-sm opacity-70">Every component is a high-order function optimized for SigPro's fine-grained updates.</p>
|
|
</div>
|
|
</div>
|
|
<div class="card bg-base-200/30 border border-base-300 hover:border-base-content/20 transition-all p-1">
|
|
<div class="card-body p-6">
|
|
<h3 class="card-title text-xl font-black italic text-base-content">READY-TO-GO</h3>
|
|
<p class="text-sm opacity-70">60+ atomic components. Semantic, accessible, and production-ready.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
## The UI Powerhouse
|
|
|
|
SigPro-UI isn't just a library; it's a **Functional Design System**.
|
|
|
|
It eliminates the gap between your data (Signals) and your UI components. Each component is a high-order function optimized for the SigPro core, ensuring that your interface only updates where it matters.
|
|
|
|
| Requirement | Value | Why? |
|
|
| :--- | :--- | :--- |
|
|
| **Engine** | **SigPro** | Atomic reactivity without V-DOM. |
|
|
| **Components** | **SigPro-UI** | 60+ semantic, reactive components. |
|
|
| **Styling** | **daisyUI v5** | Beautiful, accessible, themeable. |
|
|
| **Learning Curve** | **Zero** | If you know JS and HTML, you know SigPro-UI. |
|
|
|
|
### Semantic Functionalism
|
|
Stop writing endless HTML strings. Use semantic JavaScript constructors that return live, reactive DOM nodes.
|
|
|
|
```javascript
|
|
// Pure SigPro-UI: Clean, Reactive, Type-Safe
|
|
Modal({
|
|
open: isVisible,
|
|
title: "Precision Engineering"
|
|
}, () =>
|
|
Div({ class: "space-y-4" }, [
|
|
P("SigPro-UI provides instant reactivity out of the box."),
|
|
Button({
|
|
class: "btn-primary",
|
|
onclick: () => isVisible(false)
|
|
}, "Confirm")
|
|
])
|
|
)
|
|
```
|
|
|
|
---
|
|
|
|
## Technical Stack Requirements
|
|
|
|
To achieve the performance promised by SigPro-UI, your environment must be equipped with:
|
|
|
|
### 1. SigPro Core
|
|
|
|
The atomic heart. SigPro-UI requires the SigPro runtime (`$`, `Watch`, `Tag`, etc.) to be present in the global scope or provided as a module.
|
|
|
|
### 2. daisyUI v5
|
|
|
|
The visual DNA. All components are mapped to daisyUI v5 semantic classes, providing access to dozens of themes and accessible UI patterns without writing a single line of custom CSS.
|
|
|
|
### 3. Modern Browser
|
|
|
|
SigPro-UI uses modern Web APIs and requires no polyfills for evergreen browsers.
|
|
|
|
---
|
|
|
|
<div class="bg-base-200/50 rounded-3xl p-10 my-16 border border-base-300 shadow-inner">
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8 items-center">
|
|
<div class="lg:col-span-2">
|
|
<h2 class="text-4xl font-black mb-4 mt-0 tracking-tight italic text-secondary">Reactive at Runtime.</h2>
|
|
<p class="text-xl opacity-80 leading-relaxed">
|
|
Combine the best of both worlds: <strong>SigPro</strong> for logic and
|
|
<strong>daisyUI v5</strong> for beauty. Build interfaces that feel as fast as they look,
|
|
with components that react instantly to your data changes.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text-center py-10 opacity-30 font-mono text-xs tracking-widest uppercase">
|
|
Atomic UI System — Built for SigPro — NatxoCC
|
|
</div>
|