117 lines
6.1 KiB
Markdown
117 lines
6.1 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</h1>
|
|
<div class="text-2xl md:text-3xl font-bold text-base-content/90 mb-4 !text-center w-full">Reactive Design System</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 Tailwind v4 elegance."</div>
|
|
<div class="flex flex-wrap justify-center gap-4 w-full">
|
|
<a href="#/docs" 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">TAILWIND V4</h3>
|
|
<p class="text-sm opacity-70">Built on the latest CSS engine. Lightning fast styles with zero legacy overhead.</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">DAISYUI V5</h3>
|
|
<p class="text-sm opacity-70">Semantic, beautiful and accessible. Professional components out of the box.</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">NATIVE REACTION</h3>
|
|
<p class="text-sm opacity-70">Direct integration with SigPro signals. No wrappers, no context, just speed.</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">Import and build. Designed for developers who hate configuration files.</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 layout (DaisyUI). Each component is a high-order function optimized for the SigPro core, ensuring that your UI only updates where it matters.
|
|
|
|
| Requirement | Value | Why? |
|
|
| :--- | :--- | :--- |
|
|
| **Engine** | **SigPro** | Atomic reactivity without V-DOM. |
|
|
| **Styling** | **Tailwind CSS v4** | Pure CSS performance. |
|
|
| **Components** | **daisyUI v5** | Semantic and clean layouts. |
|
|
| **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 leverages Tailwind v4 for instant styling."),
|
|
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`, `$html`, etc.) to be present in the global scope or provided as a module.
|
|
|
|
### 2\. Tailwind CSS v4 Engine
|
|
|
|
SigPro-UI uses the modern `@theme` and utility engine of Tailwind v4. It is designed to work with the ultra-fast compiler of the new generation.
|
|
|
|
### 3\. 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.
|
|
|
|
-----
|
|
|
|
\<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"\>Design at Runtime.\</h2\>
|
|
\<p class="text-xl opacity-80 leading-relaxed"\>Combine the best of three worlds: \<strong\>SigPro\</strong\> for logic, \<strong\>Tailwind v4\</strong\> for speed, and \<strong\>daisyUI v5\</strong\> for beauty. Build interfaces that feel as fast as they look.\</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\>
|