@birdycom/omniaui-blocks 0.0.0-stage → 0.11.0

package/blocks/hero-orbit.html

@@ -0,0 +1,38 @@
+<!-- OmniaUI block: hero-orbit - Landing hero with a code window and product marks that slowly orbit around it. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     File: packages/blocks/blocks/hero-orbit.html | Map: section -> container + split -> copy (eyebrow, display, lead, buttons) -> visual (ring with marks + center window)
+     Class API: .oc-block-orbit-visual (square stage), -ring (turning circle), -mark (style="--oc-orbit-angle: 60deg"),
+       -center (the code window or any visual). --oc-orbit-duration sets the speed (default 60s). Reduced motion: no orbit.
+       Copy uses the showcase classes (.oc-eyebrow, .oc-display, .oc-text-gradient, .oc-lead, .oc-btn--gradient / --glass).
+-->
+<section class="oc-block-orbit oc-section-pad">
+  <div class="oc-container oc-split">
+    <div>
+      <p class="oc-eyebrow">Software studio &middot; since 2012</p>
+      <h1 class="oc-display">One team for all your <span class="oc-text-gradient">software</span>.</h1>
+      <p class="oc-lead">Business apps, websites and desktop tools. We design, build and maintain them, and stay your single point of contact.</p>
+      <div class="flex flex-wrap gap-1 mt-2">
+        <a class="oc-btn oc-btn--gradient oc-btn--lg" href="#products">See our products &rarr;</a>
+        <a class="oc-btn oc-btn--glass oc-btn--lg" href="#contact">Start a project</a>
+      </div>
+    </div>
+    <div class="oc-block-orbit-visual">
+      <div class="oc-block-orbit-ring" aria-hidden="true">
+        <span class="oc-block-orbit-mark" style="--oc-orbit-angle: 0deg;"><span class="oc-product-mark oc-product-mark--sm oc-accent--green">&#9670;</span></span>
+        <span class="oc-block-orbit-mark" style="--oc-orbit-angle: 60deg;"><span class="oc-product-mark oc-product-mark--sm oc-accent--violet">&#9673;</span></span>
+        <span class="oc-block-orbit-mark" style="--oc-orbit-angle: 120deg;"><span class="oc-product-mark oc-product-mark--sm oc-accent--orange">&#9650;</span></span>
+        <span class="oc-block-orbit-mark" style="--oc-orbit-angle: 180deg;"><span class="oc-product-mark oc-product-mark--sm oc-accent--cyan">&#9733;</span></span>
+        <span class="oc-block-orbit-mark" style="--oc-orbit-angle: 240deg;"><span class="oc-product-mark oc-product-mark--sm oc-accent--red">&#9829;</span></span>
+        <span class="oc-block-orbit-mark" style="--oc-orbit-angle: 300deg;"><span class="oc-product-mark oc-product-mark--sm oc-accent--yellow">&#9728;</span></span>
+      </div>
+      <div class="oc-code-window oc-block-orbit-center">
+        <div class="oc-code-window__bar"><i></i><i></i><i></i><span class="oc-code-window__title">products.php</span></div>
+<pre class="oc-code-window__body">return [
+  'erp'    => AcmeDesk::class,
+  'shop'   => AcmeShop::class,
+  'design' => AcmeDesign::class,
+  'next'   => YourProject::class,
+];</pre>
+      </div>
+    </div>
+  </div>
+</section>

package/blocks/hero-split.html

@@ -0,0 +1,12 @@
+<!-- OmniaUI block: hero-split — Hero with text left and visual right. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS. -->
+<div class="oc-block-hero-split">
+  <div>
+    <h1>Ship products, not CSS</h1>
+    <p>Stop writing repetitive styles. Use pre-built utilities and components to move fast.</p>
+    <div class="oc-block-hero-actions justify-start">
+      <button class="oc-btn">Start building</button>
+      <button class="oc-btn oc-btn--ghost">Learn more</button>
+    </div>
+  </div>
+  <div class="oc-block-hero-visual">Preview / Image placeholder</div>
+</div>

package/blocks/hero.html

@@ -0,0 +1,10 @@
+<!-- OmniaUI block: hero — Centered hero with badge, headline, text and actions. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS. -->
+<div class="oc-block-hero">
+  <span class="oc-block-hero-badge">New in v0.1.6</span>
+  <h1>Build faster with OmniaCSS</h1>
+  <p>A utility-first CSS framework with component primitives and pre-composed blocks for modern web apps.</p>
+  <div class="oc-block-hero-actions">
+    <button class="oc-btn oc-btn--lg">Get started</button>
+    <button class="oc-btn oc-btn--outline oc-btn--lg">View docs</button>
+  </div>
+</div>

package/blocks/login-01.html

@@ -0,0 +1,41 @@
+<!-- OmniaUI block: login-01 - Centered sign-in card with e-mail, password and a link to sign up. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-block-authpage: Page wrapper that centers one card. Modifier: --plain (page background instead of muted)
+       .oc-block-authcard: Card column. Modifiers: --flat (no card chrome), --wide
+       .oc-block-authcard-logo: Icon tile above the title
+       .oc-block-authcard-head / -title / -text: Centered heading block, title and description
+       .oc-block-authcard-fields / -row: Field stack and a justified row (remember me / forgot password)
+       .oc-block-authcard-submit: Full-width submit button
+       .oc-block-authcard-foot / -legal / -hint: Switch-form line, legal line, small helper text
+       .oc-block-authcard-center: Centered column (OTP input)
+       .oc-block-authsocial: Auto-fit grid of social buttons
+       .oc-block-authduo: Split layout root (container query: two columns from 42rem of its own width). Modifier: --reverse
+       .oc-block-authduo-grid / -panel / -form: Grid, brand panel (modifiers --image, --muted) and form column
+       .oc-block-authduo-logo / -quote: Panel logo and quote
+       .oc-block-authmin: Minimal centered column without a card
+       .oc-separator-text: Divider with centered text (separator component)
+-->
+<div class="oc-block-authpage oc-block-authpage--plain">
+  <form class="oc-block-authcard" action="#" method="post">
+    <span class="oc-block-authcard-logo"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg></span>
+    <div class="oc-block-authcard-head">
+      <h1 class="oc-block-authcard-title">Login to your account</h1>
+      <p class="oc-block-authcard-text">Enter your e-mail below to login</p>
+    </div>
+    <div class="oc-block-authcard-fields">
+      <div class="oc-field">
+        <label class="oc-field-label" for="oc-login01-email">E-mail</label>
+        <input class="oc-input" id="oc-login01-email" name="email" type="email" autocomplete="username" required placeholder="name@company.com">
+      </div>
+      <div class="oc-field">
+        <label class="oc-field-label" for="oc-login01-password">Password</label>
+        <div class="oc-input-reveal">
+          <input class="oc-input" id="oc-login01-password" name="oc-login01-password" type="password" autocomplete="current-password" required>
+          <button class="oc-input-reveal-button" type="button" aria-pressed="false" aria-label="Toggle password visibility">Show</button>
+        </div>
+      </div>
+      <button class="oc-btn oc-block-authcard-submit" type="submit">Login</button>
+    </div>
+    <p class="oc-block-authcard-foot">Don't have an account? <a href="#">Sign up</a></p>
+  </form>
+</div>

package/blocks/login-02.html

@@ -0,0 +1,55 @@
+<!-- OmniaUI block: login-02 - Two columns: image/brand panel with a quote and the form on the other side; the panel hides when the block is narrow. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-block-authpage: Page wrapper that centers one card. Modifier: --plain (page background instead of muted)
+       .oc-block-authcard: Card column. Modifiers: --flat (no card chrome), --wide
+       .oc-block-authcard-logo: Icon tile above the title
+       .oc-block-authcard-head / -title / -text: Centered heading block, title and description
+       .oc-block-authcard-fields / -row: Field stack and a justified row (remember me / forgot password)
+       .oc-block-authcard-submit: Full-width submit button
+       .oc-block-authcard-foot / -legal / -hint: Switch-form line, legal line, small helper text
+       .oc-block-authcard-center: Centered column (OTP input)
+       .oc-block-authsocial: Auto-fit grid of social buttons
+       .oc-block-authduo: Split layout root (container query: two columns from 42rem of its own width). Modifier: --reverse
+       .oc-block-authduo-grid / -panel / -form: Grid, brand panel (modifiers --image, --muted) and form column
+       .oc-block-authduo-logo / -quote: Panel logo and quote
+       .oc-block-authmin: Minimal centered column without a card
+       .oc-separator-text: Divider with centered text (separator component)
+-->
+<div class="oc-block-authduo">
+  <div class="oc-block-authduo-grid">
+    <aside class="oc-block-authduo-panel oc-block-authduo-panel--image">
+      <a class="oc-block-authduo-logo" href="#"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg> OmniaDesk</a>
+      <blockquote class="oc-block-authduo-quote">
+        <p>&ldquo;This workspace saved me hours of admin every week.&rdquo;</p>
+        <footer>Sofia Davis, operations lead</footer>
+      </blockquote>
+    </aside>
+    <div class="oc-block-authduo-form">
+      <form class="oc-block-authcard oc-block-authcard--flat" action="#" method="post">
+        <div class="oc-block-authcard-head">
+          <h1 class="oc-block-authcard-title">Welcome back</h1>
+          <p class="oc-block-authcard-text">Sign in to your workspace</p>
+        </div>
+        <div class="oc-block-authcard-fields">
+          <div class="oc-field">
+            <label class="oc-field-label" for="oc-login02-email">E-mail</label>
+            <input class="oc-input" id="oc-login02-email" name="email" type="email" autocomplete="username" required placeholder="name@company.com">
+          </div>
+          <div class="oc-field">
+            <label class="oc-field-label" for="oc-login02-password">Password</label>
+            <div class="oc-input-reveal">
+              <input class="oc-input" id="oc-login02-password" name="oc-login02-password" type="password" autocomplete="current-password" required>
+              <button class="oc-input-reveal-button" type="button" aria-pressed="false" aria-label="Toggle password visibility">Show</button>
+            </div>
+          </div>
+          <div class="oc-block-authcard-row">
+            <label><input class="oc-checkbox" type="checkbox" name="remember"> Remember me</label>
+            <a class="oc-link" href="#">Forgot password?</a>
+          </div>
+          <button class="oc-btn oc-block-authcard-submit" type="submit">Sign in</button>
+        </div>
+        <p class="oc-block-authcard-foot">No account yet? <a href="#">Create one</a></p>
+      </form>
+    </div>
+  </div>
+</div>

package/blocks/login-03.html

@@ -0,0 +1,47 @@
+<!-- OmniaUI block: login-03 - Card on a muted page with social sign-in buttons above the e-mail form. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-block-authpage: Page wrapper that centers one card. Modifier: --plain (page background instead of muted)
+       .oc-block-authcard: Card column. Modifiers: --flat (no card chrome), --wide
+       .oc-block-authcard-logo: Icon tile above the title
+       .oc-block-authcard-head / -title / -text: Centered heading block, title and description
+       .oc-block-authcard-fields / -row: Field stack and a justified row (remember me / forgot password)
+       .oc-block-authcard-submit: Full-width submit button
+       .oc-block-authcard-foot / -legal / -hint: Switch-form line, legal line, small helper text
+       .oc-block-authcard-center: Centered column (OTP input)
+       .oc-block-authsocial: Auto-fit grid of social buttons
+       .oc-block-authduo: Split layout root (container query: two columns from 42rem of its own width). Modifier: --reverse
+       .oc-block-authduo-grid / -panel / -form: Grid, brand panel (modifiers --image, --muted) and form column
+       .oc-block-authduo-logo / -quote: Panel logo and quote
+       .oc-block-authmin: Minimal centered column without a card
+       .oc-separator-text: Divider with centered text (separator component)
+-->
+<div class="oc-block-authpage">
+  <form class="oc-block-authcard" action="#" method="post">
+    <span class="oc-block-authcard-logo"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg></span>
+    <div class="oc-block-authcard-head">
+      <h1 class="oc-block-authcard-title">Welcome back</h1>
+      <p class="oc-block-authcard-text">Login with your Apple or Google account</p>
+    </div>
+    <div class="oc-block-authsocial">
+      <button class="oc-btn oc-btn--outline" type="button">Apple</button>
+      <button class="oc-btn oc-btn--outline" type="button">Google</button>
+    </div>
+    <div class="oc-separator-text">Or continue with</div>
+    <div class="oc-block-authcard-fields">
+      <div class="oc-field">
+        <label class="oc-field-label" for="oc-login03-email">E-mail</label>
+        <input class="oc-input" id="oc-login03-email" name="email" type="email" autocomplete="username" required placeholder="name@company.com">
+      </div>
+      <div class="oc-field">
+        <label class="oc-field-label" for="oc-login03-password">Password</label>
+        <div class="oc-input-reveal">
+          <input class="oc-input" id="oc-login03-password" name="oc-login03-password" type="password" autocomplete="current-password" required>
+          <button class="oc-input-reveal-button" type="button" aria-pressed="false" aria-label="Toggle password visibility">Show</button>
+        </div>
+      </div>
+      <button class="oc-btn oc-block-authcard-submit" type="submit">Login</button>
+    </div>
+    <p class="oc-block-authcard-foot">Don't have an account? <a href="#">Sign up</a></p>
+    <p class="oc-block-authcard-legal">By clicking continue, you agree to our <a href="#">Terms of Service</a> and <a href="#">Privacy Policy</a>.</p>
+  </form>
+</div>

package/blocks/module-header.html

@@ -0,0 +1,24 @@
+<!-- OmniaUI block: module-header - Page header with icon tile, title, intro, meta badges and action row. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-block-modulehead: Wrapper
+       .oc-block-modulehead-band: Tinted band with icon and text
+       .oc-block-modulehead-icon: Icon tile
+       .oc-block-modulehead-title / -intro: Title and intro
+       .oc-block-modulehead-meta: Row for badges under the title (optional)
+       .oc-block-modulehead-actions: Row for buttons below the band (optional)
+     Slots: icon, title, intro, meta, actions
+-->
+<header class="oc-block-modulehead">
+  <div class="oc-block-modulehead-band">
+    <span class="oc-block-modulehead-icon" aria-hidden="true"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="9" cy="8" r="4"/><path d="M2 21c0-4 3-6 7-6s7 2 7 6"/></svg></span>
+    <div class="oc-block-modulehead-body">
+      <h1 class="oc-block-modulehead-title">Contacts</h1>
+      <p class="oc-block-modulehead-intro">Manage customers, suppliers and the people who work there.</p>
+      <div class="oc-block-modulehead-meta"><span class="oc-badge oc-badge--info">Pro</span><span class="oc-badge oc-badge--success">Synced</span></div>
+    </div>
+  </div>
+  <div class="oc-block-modulehead-actions">
+    <a class="oc-back-link" href="#">Back to CRM</a>
+    <button class="oc-btn" type="button">New contact</button>
+  </div>
+</header>

package/blocks/otp-01.html

@@ -0,0 +1,36 @@
+<!-- OmniaUI block: otp-01 - Verification card: six-digit code, verify button and a resend link. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-block-authpage: Page wrapper that centers one card. Modifier: --plain (page background instead of muted)
+       .oc-block-authcard: Card column. Modifiers: --flat (no card chrome), --wide
+       .oc-block-authcard-logo: Icon tile above the title
+       .oc-block-authcard-head / -title / -text: Centered heading block, title and description
+       .oc-block-authcard-fields / -row: Field stack and a justified row (remember me / forgot password)
+       .oc-block-authcard-submit: Full-width submit button
+       .oc-block-authcard-foot / -legal / -hint: Switch-form line, legal line, small helper text
+       .oc-block-authcard-center: Centered column (OTP input)
+       .oc-block-authsocial: Auto-fit grid of social buttons
+       .oc-block-authduo: Split layout root (container query: two columns from 42rem of its own width). Modifier: --reverse
+       .oc-block-authduo-grid / -panel / -form: Grid, brand panel (modifiers --image, --muted) and form column
+       .oc-block-authduo-logo / -quote: Panel logo and quote
+       .oc-block-authmin: Minimal centered column without a card
+       .oc-separator-text: Divider with centered text (separator component)
+       .oc-otp: Code input drawn as cells (component); set --oc-otp-length and maxlength
+-->
+<div class="oc-block-authpage oc-block-authpage--plain">
+  <form class="oc-block-authcard" action="#" method="post">
+    <span class="oc-block-authcard-logo"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 3 4 6v6c0 5 3.5 8 8 9 4.5-1 8-4 8-9V6z"/></svg></span>
+    <div class="oc-block-authcard-head">
+      <h1 class="oc-block-authcard-title">Enter verification code</h1>
+      <p class="oc-block-authcard-text">We sent a 6-digit code to your e-mail</p>
+    </div>
+    <div class="oc-block-authcard-fields">
+      <div class="oc-field">
+        <label class="oc-field-label" for="oc-otp01-code">Verification code</label>
+        <input class="oc-otp" id="oc-otp01-code" name="code" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" pattern="[0-9]*" style="--oc-otp-length: 6">
+        <p class="oc-field-description">Enter the 6-digit code we sent to name@company.com.</p>
+      </div>
+      <button class="oc-btn oc-block-authcard-submit" type="submit">Verify</button>
+    </div>
+    <p class="oc-block-authcard-foot">Didn't receive the code? <a href="#">Resend</a></p>
+  </form>
+</div>

package/blocks/otp-02.html

@@ -0,0 +1,46 @@
+<!-- OmniaUI block: otp-02 - Verification form beside a brand panel (container-query split). Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-block-authpage: Page wrapper that centers one card. Modifier: --plain (page background instead of muted)
+       .oc-block-authcard: Card column. Modifiers: --flat (no card chrome), --wide
+       .oc-block-authcard-logo: Icon tile above the title
+       .oc-block-authcard-head / -title / -text: Centered heading block, title and description
+       .oc-block-authcard-fields / -row: Field stack and a justified row (remember me / forgot password)
+       .oc-block-authcard-submit: Full-width submit button
+       .oc-block-authcard-foot / -legal / -hint: Switch-form line, legal line, small helper text
+       .oc-block-authcard-center: Centered column (OTP input)
+       .oc-block-authsocial: Auto-fit grid of social buttons
+       .oc-block-authduo: Split layout root (container query: two columns from 42rem of its own width). Modifier: --reverse
+       .oc-block-authduo-grid / -panel / -form: Grid, brand panel (modifiers --image, --muted) and form column
+       .oc-block-authduo-logo / -quote: Panel logo and quote
+       .oc-block-authmin: Minimal centered column without a card
+       .oc-separator-text: Divider with centered text (separator component)
+       .oc-otp: Code input drawn as cells (component); set --oc-otp-length and maxlength
+-->
+<div class="oc-block-authduo">
+  <div class="oc-block-authduo-grid">
+    <aside class="oc-block-authduo-panel oc-block-authduo-panel--muted">
+      <a class="oc-block-authduo-logo" href="#"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m12 3 9 5-9 5-9-5z"/><path d="m3 13 9 5 9-5"/></svg> OmniaDesk</a>
+      <blockquote class="oc-block-authduo-quote">
+        <p>&ldquo;Two-step verification keeps our client data where it belongs.&rdquo;</p>
+        <footer>Security team</footer>
+      </blockquote>
+    </aside>
+    <div class="oc-block-authduo-form">
+      <form class="oc-block-authcard oc-block-authcard--flat" action="#" method="post">
+        <div class="oc-block-authcard-head">
+          <h1 class="oc-block-authcard-title">Verify your login</h1>
+          <p class="oc-block-authcard-text">Enter the code from your authenticator app</p>
+        </div>
+        <div class="oc-block-authcard-fields">
+          <div class="oc-field">
+            <label class="oc-field-label" for="oc-otp02-code">Verification code</label>
+            <input class="oc-otp" id="oc-otp02-code" name="code" type="text" inputmode="numeric" autocomplete="one-time-code" maxlength="6" pattern="[0-9]*" style="--oc-otp-length: 6" value="482">
+            <p class="oc-field-description">Enter the 6-digit code we sent to your authenticator app.</p>
+          </div>
+          <button class="oc-btn oc-block-authcard-submit" type="submit">Verify</button>
+        </div>
+        <p class="oc-block-authcard-foot">Lost your device? <a href="#">Use a recovery code</a></p>
+      </form>
+    </div>
+  </div>
+</div>

package/blocks/page-hero.html

@@ -0,0 +1,10 @@
+<!-- OmniaUI block: page-hero — Page header (the oc-hero used on every docs page): eyebrow, title, text, actions. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS. -->
+<section class="oc-hero">
+  <span class="oc-hero-eyebrow">Components</span>
+  <h1 class="oc-hero-title">Build interfaces with native HTML</h1>
+  <p class="oc-hero-text">Dialogs, menus and accordions without JavaScript — styled with OmniaCSS.</p>
+  <div class="oc-hero-actions">
+    <a class="oc-btn" href="#start">Get started</a>
+    <a class="oc-btn oc-btn--outline" href="#docs">Documentation</a>
+  </div>
+</section>

package/blocks/portfolio-grid.html

@@ -0,0 +1,31 @@
+<!-- OmniaUI block: portfolio-grid - Portfolio section: heading with an "all projects" link and a grid of project cards. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     File: packages/blocks/blocks/portfolio-grid.html | Map: section -> container -> head (eyebrow, title, lead, link) -> grid of .oc-project-card
+     Class API: .oc-block-portfolio (modifier --two: wider cards), -head, -lead, -grid (--oc-portfolio-min sets the card width).
+       Cards are the project-card component; give each an .oc-accent--* preset for its placeholder.
+-->
+<section class="oc-block-portfolio oc-section-pad" aria-labelledby="oc-portfolio-title">
+  <div class="oc-container">
+    <div class="oc-block-portfolio-head">
+      <div>
+        <p class="oc-eyebrow">Our work</p>
+        <h2 class="oc-display oc-display--md" id="oc-portfolio-title">Selected <span class="oc-text-gradient">projects</span></h2>
+        <p class="oc-block-portfolio-lead">Websites and apps we designed, built and still maintain.</p>
+      </div>
+      <a class="oc-link-arrow" href="#projects">All projects</a>
+    </div>
+    <div class="oc-block-portfolio-grid">
+      <a class="oc-project-card oc-accent--green" href="#p1">
+        <span class="oc-project-card__frame"><span class="oc-project-card__bar" aria-hidden="true"><i></i><i></i><i></i></span><span class="oc-project-card__shot" role="img" aria-label="Northwind Bakery, screenshot"></span></span>
+        <span class="oc-project-card__body"><span class="oc-project-card__type">Website</span><span class="oc-project-card__name">Northwind Bakery</span><span class="oc-project-card__meta">Food &amp; retail &middot; Antwerp</span><span class="oc-project-card__more">View project</span></span>
+      </a>
+      <a class="oc-project-card oc-accent--violet" href="#p2">
+        <span class="oc-project-card__frame"><span class="oc-project-card__bar" aria-hidden="true"><i></i><i></i><i></i></span><span class="oc-project-card__shot" role="img" aria-label="Fjord Interiors, screenshot"></span></span>
+        <span class="oc-project-card__body"><span class="oc-project-card__type">Web app</span><span class="oc-project-card__name">Fjord Interiors</span><span class="oc-project-card__meta">Interior design &middot; Ghent</span><span class="oc-project-card__more">View project</span></span>
+      </a>
+      <a class="oc-project-card oc-accent--orange" href="#p3">
+        <span class="oc-project-card__frame"><span class="oc-project-card__bar" aria-hidden="true"><i></i><i></i><i></i></span><span class="oc-project-card__shot" role="img" aria-label="Harbor Logistics, screenshot"></span></span>
+        <span class="oc-project-card__body"><span class="oc-project-card__type">Desktop tool</span><span class="oc-project-card__name">Harbor Logistics</span><span class="oc-project-card__meta">Transport &middot; Rotterdam</span><span class="oc-project-card__more">View project</span></span>
+      </a>
+    </div>
+  </div>
+</section>

package/blocks/pricing.html

@@ -0,0 +1,42 @@
+<!-- OmniaUI block: pricing — Pricing cards with a featured plan. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS. -->
+<div class="oc-block-pricing">
+  <h2>Simple, transparent pricing</h2>
+  <p>Choose the plan that fits your needs.</p>
+  <div class="oc-block-pricing-grid">
+    <div class="oc-block-pricing-card">
+      <p class="oc-block-pricing-name">Free</p>
+      <p class="oc-block-pricing-desc">For personal projects</p>
+      <p class="oc-block-pricing-price">&euro;0 <span>/month</span></p>
+      <ul class="oc-block-pricing-features">
+        <li>Core utilities</li>
+        <li>5 components</li>
+        <li>Community support</li>
+      </ul>
+      <button class="oc-btn oc-btn--outline" style="width:100%;">Get started</button>
+    </div>
+    <div class="oc-block-pricing-card oc-block-pricing-card--featured">
+      <p class="oc-block-pricing-name">Pro</p>
+      <p class="oc-block-pricing-desc">For teams and businesses</p>
+      <p class="oc-block-pricing-price">&euro;29 <span>/month</span></p>
+      <ul class="oc-block-pricing-features">
+        <li>All utilities + responsive</li>
+        <li>All components</li>
+        <li>All blocks</li>
+        <li>Priority support</li>
+      </ul>
+      <button class="oc-btn" style="width:100%;">Subscribe</button>
+    </div>
+    <div class="oc-block-pricing-card">
+      <p class="oc-block-pricing-name">Enterprise</p>
+      <p class="oc-block-pricing-desc">Custom solutions</p>
+      <p class="oc-block-pricing-price">Custom</p>
+      <ul class="oc-block-pricing-features">
+        <li>Everything in Pro</li>
+        <li>Custom adapters</li>
+        <li>Dedicated support</li>
+        <li>SLA guarantee</li>
+      </ul>
+      <button class="oc-btn oc-btn--outline" style="width:100%;">Contact sales</button>
+    </div>
+  </div>
+</div>

package/blocks/process.html

@@ -0,0 +1,19 @@
+<!-- OmniaUI block: process — Numbered steps (CSS counter) + an endless marquee of technologies. Needs @birdycom/omniaui. -->
+<section class="oc-section-pad">
+  <div class="oc-container">
+    <p class="oc-eyebrow">How we work</p>
+    <h2 class="oc-display oc-display--md">From idea to <span class="oc-text-gradient">support</span>, one point of contact.</h2>
+    <ol class="oc-steps">
+      <li><h3>Listen</h3><p>We start with your workflow, not with technology.</p></li>
+      <li><h3>Design</h3><p>Screens and data model, approved before we build.</p></li>
+      <li><h3>Build</h3><p>Short iterations you can test along the way.</p></li>
+      <li><h3>Support</h3><p>Updates, hosting and help - for years.</p></li>
+    </ol>
+    <div class="oc-marquee mt-4" aria-label="Technologies">
+      <div class="oc-marquee__track">
+        <span class="oc-marquee__item">PHP 8.4</span><span class="oc-marquee__item">MySQL</span><span class="oc-marquee__item">OmniaCSS</span><span class="oc-marquee__item">WordPress</span><span class="oc-marquee__item">.NET</span><span class="oc-marquee__item">npm</span>
+        <span class="oc-marquee__item" aria-hidden="true">PHP 8.4</span><span class="oc-marquee__item" aria-hidden="true">MySQL</span><span class="oc-marquee__item" aria-hidden="true">OmniaCSS</span><span class="oc-marquee__item" aria-hidden="true">WordPress</span><span class="oc-marquee__item" aria-hidden="true">.NET</span><span class="oc-marquee__item" aria-hidden="true">npm</span>
+      </div>
+    </div>
+  </div>
+</section>

package/blocks/product-grid.html

@@ -0,0 +1,37 @@
+<!-- OmniaUI block: product-grid — Section title + grid of product cards, each with its own accent color. Needs @birdycom/omniaui. -->
+<section class="oc-section-pad">
+  <div class="oc-container">
+    <p class="oc-eyebrow">Software</p>
+    <h2 class="oc-display oc-display--md">Products, custom work and tools. <span class="oc-text-gradient">All our own work.</span></h2>
+    <div class="oc-card-grid">
+      <a class="oc-product-card oc-accent--green" href="#">
+        <div class="oc-product-card__top"><span class="oc-icon-tile" aria-hidden="true">&#9670;</span><span class="oc-pill">Own product</span></div>
+        <h3 class="oc-product-card__name">OmniaDesk</h3>
+        <p class="oc-product-card__tagline">Modular ERP for small businesses</p>
+        <p class="oc-product-card__summary">CRM, sales, invoicing, bookkeeping and stock in one web application.</p>
+        <span class="oc-product-card__more">Discover OmniaDesk</span>
+      </a>
+      <a class="oc-product-card oc-accent--orange" href="#">
+        <div class="oc-product-card__top"><span class="oc-icon-tile" aria-hidden="true">&#9874;</span><span class="oc-pill">Custom work</span></div>
+        <h3 class="oc-product-card__name">Korrekt Hub</h3>
+        <p class="oc-product-card__tagline">Custom platform for interior builders</p>
+        <p class="oc-product-card__summary">Work orders, projects, quotes, stock, planning and HR in one app.</p>
+        <span class="oc-product-card__more">Discover Korrekt Hub</span>
+      </a>
+      <a class="oc-product-card oc-accent--violet" href="#">
+        <div class="oc-product-card__top"><span class="oc-icon-tile" aria-hidden="true">&#9673;</span><span class="oc-pill">Framework</span></div>
+        <h3 class="oc-product-card__name">OmniaCSS</h3>
+        <p class="oc-product-card__tagline">The design system behind our apps</p>
+        <p class="oc-product-card__summary">Utility-first CSS with ready components, blocks and more than 10,000 icons.</p>
+        <span class="oc-product-card__more">Discover OmniaCSS</span>
+      </a>
+      <a class="oc-product-card oc-accent--cyan" href="#">
+        <div class="oc-product-card__top"><span class="oc-icon-tile" aria-hidden="true">&#9638;</span><span class="oc-pill">Tool</span></div>
+        <h3 class="oc-product-card__name">HistoryTabs</h3>
+        <p class="oc-product-card__tagline">Never lose your tabs again</p>
+        <p class="oc-product-card__summary">A Windows tool that brings back browser windows with all their tabs.</p>
+        <span class="oc-product-card__more">Discover HistoryTabs</span>
+      </a>
+    </div>
+  </div>
+</section>

package/blocks/profile-header.html

@@ -0,0 +1,27 @@
+<!-- OmniaUI block: profile-header - Channel / profile header: banner, overhanging avatar, name, meta, actions and a tab bar. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     File: packages/blocks/blocks/profile-header.html | Map: section.oc-block-profile -> banner -> bar (avatar, info, actions) -> nav tabs
+     Class API: .oc-block-profile (modifier --compact: low banner, smaller avatar), -banner (style="--oc-profile-banner: url(…)",
+       default gradient from the .oc-accent--* preset), -bar, -avatar (on an .oc-avatar), -info, -name, -meta, -bio, -actions,
+       -tabs (nav), -tab (link; aria-current="page" marks the active tab).
+-->
+<section class="oc-block-profile oc-accent--violet" aria-labelledby="oc-profile-name">
+  <div class="oc-block-profile-banner" aria-hidden="true"></div>
+  <div class="oc-block-profile-bar">
+    <span class="oc-avatar oc-block-profile-avatar" aria-hidden="true">AS</span>
+    <div class="oc-block-profile-info">
+      <h1 class="oc-block-profile-name" id="oc-profile-name">Acme Studio</h1>
+      <p class="oc-block-profile-meta">@acmestudio &middot; 12.4K followers &middot; 86 videos</p>
+      <p class="oc-block-profile-bio">Short tutorials about web design, CSS and building small business apps.</p>
+    </div>
+    <div class="oc-block-profile-actions">
+      <button class="oc-btn" type="button">Follow</button>
+      <button class="oc-btn oc-btn--outline" type="button">Share</button>
+    </div>
+  </div>
+  <nav class="oc-block-profile-tabs" aria-label="Profile sections">
+    <a class="oc-block-profile-tab" href="#home" aria-current="page">Home</a>
+    <a class="oc-block-profile-tab" href="#videos">Videos</a>
+    <a class="oc-block-profile-tab" href="#playlists">Playlists</a>
+    <a class="oc-block-profile-tab" href="#about">About</a>
+  </nav>
+</section>

package/blocks/reset-password.html

@@ -0,0 +1,45 @@
+<!-- OmniaUI block: reset-password - Choose a new password: password with reveal, confirmation, a rules hint and submit. Needs @birdycom/omniaui-blocks + @birdycom/omniaui CSS.
+     Class API (modifiers are extra classes / attributes on the same element):
+       .oc-block-authpage: Page wrapper that centers one card. Modifier: --plain (page background instead of muted)
+       .oc-block-authcard: Card column. Modifiers: --flat (no card chrome), --wide
+       .oc-block-authcard-logo: Icon tile above the title
+       .oc-block-authcard-head / -title / -text: Centered heading block, title and description
+       .oc-block-authcard-fields / -row: Field stack and a justified row (remember me / forgot password)
+       .oc-block-authcard-submit: Full-width submit button
+       .oc-block-authcard-foot / -legal / -hint: Switch-form line, legal line, small helper text
+       .oc-block-authcard-center: Centered column (OTP input)
+       .oc-block-authsocial: Auto-fit grid of social buttons
+       .oc-block-authduo: Split layout root (container query: two columns from 42rem of its own width). Modifier: --reverse
+       .oc-block-authduo-grid / -panel / -form: Grid, brand panel (modifiers --image, --muted) and form column
+       .oc-block-authduo-logo / -quote: Panel logo and quote
+       .oc-block-authmin: Minimal centered column without a card
+       .oc-separator-text: Divider with centered text (separator component)
+-->
+<div class="oc-block-authpage oc-block-authpage--plain">
+  <form class="oc-block-authcard" action="#" method="post">
+    <span class="oc-block-authcard-logo"><svg class="" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="4" y="11" width="16" height="10" rx="2"/><path d="M8 11V7a4 4 0 0 1 8 0v4"/></svg></span>
+    <div class="oc-block-authcard-head">
+      <h1 class="oc-block-authcard-title">Set a new password</h1>
+      <p class="oc-block-authcard-text">Your new password must differ from earlier ones</p>
+    </div>
+    <div class="oc-block-authcard-fields">
+      <div class="oc-field">
+        <label class="oc-field-label" for="oc-reset-password">New password</label>
+        <div class="oc-input-reveal">
+          <input class="oc-input" id="oc-reset-password" name="oc-reset-password" type="password" autocomplete="new-password" required>
+          <button class="oc-input-reveal-button" type="button" aria-pressed="false" aria-label="Toggle password visibility">Show</button>
+        </div>
+      </div>
+      <div class="oc-field">
+        <label class="oc-field-label" for="oc-reset-confirm">Confirm password</label>
+        <div class="oc-input-reveal">
+          <input class="oc-input" id="oc-reset-confirm" name="oc-reset-confirm" type="password" autocomplete="new-password" required>
+          <button class="oc-input-reveal-button" type="button" aria-pressed="false" aria-label="Toggle password visibility">Show</button>
+        </div>
+      </div>
+      <p class="oc-block-authcard-hint">At least 8 characters, with a number and a symbol.</p>
+      <button class="oc-btn oc-block-authcard-submit" type="submit">Reset password</button>
+    </div>
+    <p class="oc-block-authcard-foot"><a href="#">Back to sign in</a></p>
+  </form>
+</div>

package/blocks/showcase.html

@@ -0,0 +1,27 @@
+<!-- OmniaUI block: showcase — Portfolio grid: project cards with a browser frame around the screenshot. Needs @birdycom/omniaui. -->
+<section class="oc-section-pad">
+  <div class="oc-container">
+    <p class="oc-eyebrow">Work</p>
+    <h2 class="oc-display oc-display--md">Websites made to measure. <span class="oc-text-gradient">Different for every client.</span></h2>
+    <div class="oc-card-grid" style="--oc-card-min: 26rem;">
+      <a class="oc-product-card oc-accent--green p-0 overflow-hidden" href="#">
+        <span class="oc-browser-frame m-1"><span class="oc-browser-frame__bar"><i></i><i></i><i></i></span><span class="oc-browser-frame__body" style="background: linear-gradient(135deg, var(--color-green-40), var(--color-teal-80));"></span></span>
+        <span class="grid gap-0.5 p-1.5 pt-0">
+          <span class="oc-pill oc-pill--accent">Website with CMS</span>
+          <span class="oc-product-card__name">Verdavita</span>
+          <span class="oc-product-card__summary">Garden design and maintenance</span>
+          <span class="oc-product-card__more">View the project</span>
+        </span>
+      </a>
+      <a class="oc-product-card oc-accent--blue p-0 overflow-hidden" href="#">
+        <span class="oc-browser-frame m-1"><span class="oc-browser-frame__bar"><i></i><i></i><i></i></span><span class="oc-browser-frame__body" style="background: linear-gradient(135deg, var(--color-vividblue-60), var(--color-blue-40));"></span></span>
+        <span class="grid gap-0.5 p-1.5 pt-0">
+          <span class="oc-pill oc-pill--accent">Custom website</span>
+          <span class="oc-product-card__name">Kenis-Geerts</span>
+          <span class="oc-product-card__summary">Plumbing and central heating</span>
+          <span class="oc-product-card__more">View the project</span>
+        </span>
+      </a>
+    </div>
+  </div>
+</section>