tutuca 0.9.39 → 0.9.41

package/skill/margaui/components/hero.md

@@ -0,0 +1,135 @@
+# hero
+
+_full-width banner section (centered or with figure)_
+
+## What it does
+
+Full-width banner section, optionally with a figure beside the text or an overlay image.
+
+## When to use
+
+- Marketing landing pages, top-of-page banners.
+
+## Core classes
+
+`hero`; inner `hero-content`, `hero-overlay`.
+
+## Examples
+
+### Centered hero
+
+Source: `playground/components/hero/centered-hero.html`
+
+```html
+<div class="hero bg-base-200 min-h-screen">
+  <div class="hero-content text-center">
+    <div class="max-w-md">
+      <h1 class="text-5xl font-bold">Hello there</h1>
+      <p class="py-6">
+        Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
+        quasi. In deleniti eaque aut repudiandae et a id nisi.
+      </p>
+      <button class="btn btn-primary">Get Started</button>
+    </div>
+  </div>
+</div>
+```
+
+### Hero with figure but reverse order
+
+Source: `playground/components/hero/hero-with-figure-but-reverse-order.html`
+
+```html
+<div class="hero bg-base-200 min-h-screen">
+  <div class="hero-content flex-col lg:flex-row-reverse">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp"
+      class="max-w-sm rounded-lg shadow-2xl"
+    />
+    <div>
+      <h1 class="text-5xl font-bold">Box Office News!</h1>
+      <p class="py-6">
+        Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
+        quasi. In deleniti eaque aut repudiandae et a id nisi.
+      </p>
+      <button class="btn btn-primary">Get Started</button>
+    </div>
+  </div>
+</div>
+```
+
+### Hero with figure
+
+Source: `playground/components/hero/hero-with-figure.html`
+
+```html
+<div class="hero bg-base-200 min-h-screen">
+  <div class="hero-content flex-col lg:flex-row">
+    <img
+      src="https://img.daisyui.com/images/stock/photo-1635805737707-575885ab0820.webp"
+      class="max-w-sm rounded-lg shadow-2xl"
+    />
+    <div>
+      <h1 class="text-5xl font-bold">Box Office News!</h1>
+      <p class="py-6">
+        Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
+        quasi. In deleniti eaque aut repudiandae et a id nisi.
+      </p>
+      <button class="btn btn-primary">Get Started</button>
+    </div>
+  </div>
+</div>
+```
+
+### Hero with form
+
+Source: `playground/components/hero/hero-with-form.html`
+
+```html
+<div class="hero bg-base-200 min-h-screen">
+  <div class="hero-content flex-col lg:flex-row-reverse">
+    <div class="text-center lg:text-left">
+      <h1 class="text-5xl font-bold">Login now!</h1>
+      <p class="py-6">
+        Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
+        quasi. In deleniti eaque aut repudiandae et a id nisi.
+      </p>
+    </div>
+    <div class="card bg-base-100 w-full max-w-sm shrink-0 shadow-2xl">
+      <div class="card-body">
+        <fieldset class="fieldset">
+          <label class="label">Email</label>
+          <input type="email" class="input" placeholder="Email" />
+          <label class="label">Password</label>
+          <input type="password" class="input" placeholder="Password" />
+          <div><a class="link link-hover">Forgot password?</a></div>
+          <button class="btn btn-neutral mt-4">Login</button>
+        </fieldset>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+### Hero with overlay image
+
+Source: `playground/components/hero/hero-with-overlay-image.html`
+
+```html
+<div
+  class="hero min-h-screen"
+  style="background-image: url(https://img.daisyui.com/images/stock/photo-1507358522600-9f71e620c44e.webp);"
+>
+  <div class="hero-overlay"></div>
+  <div class="hero-content text-neutral-content text-center">
+    <div class="max-w-md">
+      <h1 class="mb-5 text-5xl font-bold">Hello there</h1>
+      <p class="mb-5">
+        Provident cupiditate voluptatem et in. Quaerat fugiat ut assumenda excepturi exercitationem
+        quasi. In deleniti eaque aut repudiandae et a id nisi.
+      </p>
+      <button class="btn btn-primary">Get Started</button>
+    </div>
+  </div>
+</div>
+```

package/skill/margaui/components/hover-3d.md

@@ -0,0 +1,129 @@
+# hover-3d
+
+_3D tilt effect on hover (cards / images)_
+
+## What it does
+
+CSS-only 3D tilt-on-hover for cards and images.
+
+## When to use
+
+- Showcase product cards, portfolio tiles.
+
+## Examples
+
+### 3d card hover effect
+
+Source: `playground/components/hover-3d/3d-card-hover-effect.html`
+
+```html
+<a href="#" class="hover-3d my-12 mx-2 cursor-pointer">
+  
+  <!-- content -->
+  <div class="card w-96 bg-black text-white bg-[radial-gradient(circle_at_bottom_left,#ffffff04_35%,transparent_36%),radial-gradient(circle_at_top_right,#ffffff04_35%,transparent_36%)] bg-size-[4.95em_4.95em]">
+    <div class="card-body">
+      <div class="flex justify-between mb-10">
+        <div class="font-bold">BANK OF LATVERIA</div>
+        <div class="text-5xl opacity-10">❁</div>
+      </div>
+      <div class="text-lg mb-4 opacity-40">0210 8820 1150 0222</div>
+      <div class="flex justify-between">
+        <div>
+          <div class="text-xs opacity-20">CARD HOLDER</div>
+          <div>VICTOR VON D.</div>
+        </div>
+        <div>
+          <div class="text-xs opacity-20">EXPIRES</div>
+          <div>29/08</div>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <!-- 8 empty divs needed for the 3D effect -->
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</a>
+```
+
+### 3d hover effect for image gallery
+
+Source: `playground/components/hover-3d/3d-hover-effect-for-image-gallery.html`
+
+```html
+<div class="hover-3d">
+  <!-- content -->
+  <figure class="w-60 rounded-2xl">
+    <img src="https://img.daisyui.com/images/stock/card-1.webp?x" alt="Tailwind CSS 3D card" />
+  </figure>
+  <!-- 8 empty divs needed for the 3D effect -->
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="hover-3d">
+  <!-- content -->
+  <figure class="w-60 rounded-2xl">
+    <img src="https://img.daisyui.com/images/stock/card-2.webp?x" alt="Tailwind CSS 3D hover" />
+  </figure>
+  <!-- 8 empty divs needed for the 3D effect -->
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+
+<div class="hover-3d">
+  <!-- content -->
+  <figure class="w-60 rounded-2xl">
+    <img src="https://img.daisyui.com/images/stock/card-3.webp?x" alt="Tailwind CSS 3D hover" />
+  </figure>
+  <!-- 8 empty divs needed for the 3D effect -->
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+```
+
+### 3d image hover effect
+
+Source: `playground/components/hover-3d/3d-image-hover-effect.html`
+
+```html
+<div class="hover-3d">
+  <!-- content -->
+  <figure class="max-w-100 rounded-2xl">
+    <img src="https://img.daisyui.com/images/stock/creditcard.webp" alt="3D card" />
+  </figure>
+  <!-- 8 empty divs needed for the 3D effect -->
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+  <div></div>
+</div>
+```

package/skill/margaui/components/hover-gallery.md

@@ -0,0 +1,49 @@
+# hover-gallery
+
+_swap images by hovering across regions_
+
+## What it does
+
+Image gallery that swaps the displayed image based on the horizontal hover position.
+
+## When to use
+
+- Product image galleries on listing pages.
+- For user-paced slideshows, use **carousel**.
+
+## Examples
+
+### Hover gallery
+
+Source: `playground/components/hover-gallery/hover-gallery.html`
+
+```html
+<figure class="hover-gallery max-w-60">
+  <img src="https://img.daisyui.com/images/stock/daisyui-hat-1.webp" />
+  <img src="https://img.daisyui.com/images/stock/daisyui-hat-2.webp" />
+  <img src="https://img.daisyui.com/images/stock/daisyui-hat-3.webp" />
+  <img src="https://img.daisyui.com/images/stock/daisyui-hat-4.webp" />
+</figure>
+```
+
+### Hover gallery in a card
+
+Source: `playground/components/hover-gallery/hover-gallery-in-a-card.html`
+
+```html
+<div class="card card-sm bg-base-200 max-w-60 shadow">
+  <figure class="hover-gallery">
+    <img src="https://img.daisyui.com/images/stock/daisyui-hat-1.webp" />
+    <img src="https://img.daisyui.com/images/stock/daisyui-hat-2.webp" />
+    <img src="https://img.daisyui.com/images/stock/daisyui-hat-3.webp" />
+    <img src="https://img.daisyui.com/images/stock/daisyui-hat-4.webp" />
+  </figure>
+  <div class="card-body">
+    <h2 class="card-title flex justify-between">
+      daisyUI Hat
+      <span class="font-normal">$25</span>
+    </h2>
+    <p>High Quality classic cap hat with stitch logo</p>
+  </div>
+</div>
+```

package/skill/margaui/components/indicator.md

@@ -0,0 +1,265 @@
+# indicator
+
+_wrap an element to overlay a badge / status / button at a corner_
+
+## What it does
+
+Wrapper that positions a child element (typically a **badge**, **status**, or small button) at one of nine alignment points relative to its content.
+
+## When to use
+
+- Notification counters on icons, presence dots on avatars, 'new' tags on cards.
+
+## Core classes
+
+`indicator`; child has `indicator-item` plus position `indicator-top|middle|bottom` and `indicator-start|center|end`.
+
+## Examples
+
+### A button as an indicator for a card
+
+Source: `playground/components/indicator/a-button-as-an-indicator-for-a-card.html`
+
+```html
+<div class="indicator">
+  <div class="indicator-item indicator-bottom">
+    <button class="btn btn-primary">Apply</button>
+  </div>
+  <div class="card border-base-300 border shadow-sm">
+    <div class="card-body">
+      <h2 class="card-title">Job Title</h2>
+      <p>Rerum reiciendis beatae tenetur excepturi</p>
+    </div>
+  </div>
+</div>
+```
+
+### Badge as indicator
+
+Source: `playground/components/indicator/badge-as-indicator.html`
+
+```html
+<div class="indicator">
+  <span class="indicator-item badge badge-primary">New</span>
+  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
+</div>
+```
+
+### For an input
+
+Source: `playground/components/indicator/for-an-input.html`
+
+```html
+<div class="indicator">
+  <span class="indicator-item badge">Required</span>
+  <input type="text" placeholder="Your email address" class="input input-bordered" />
+</div>
+```
+
+### For avatar
+
+Source: `playground/components/indicator/for-avatar.html`
+
+```html
+<div class="avatar indicator">
+  <span class="indicator-item badge badge-secondary">Justice</span>
+  <div class="h-20 w-20 rounded-lg">
+    <img
+      alt="Tailwind CSS examples"
+      src="https://img.daisyui.com/images/profile/demo/batperson@192.webp"
+    />
+  </div>
+</div>
+```
+
+### For button
+
+Source: `playground/components/indicator/for-button.html`
+
+```html
+<div class="indicator">
+  <span class="indicator-item badge badge-secondary">12</span>
+  <button class="btn">inbox</button>
+</div>
+```
+
+### For tab
+
+Source: `playground/components/indicator/for-tab.html`
+
+```html
+<div class="tabs tabs-lift">
+  <a class="tab">Messages</a>
+  <a class="indicator tab tab-active">
+    Notifications
+    <span class="indicator-item badge">8</span>
+  </a>
+  <a class="tab">Requests</a>
+</div>
+```
+
+### In center of an image
+
+Source: `playground/components/indicator/in-center-of-an-image.html`
+
+```html
+<div class="indicator">
+  <span class="indicator-item indicator-center indicator-middle">
+    Only available for Pro users
+  </span>
+  <img
+    alt="Tailwind CSS examples"
+    src="https://img.daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.webp"
+  />
+</div>
+```
+
+### Indicator bottom indicator center
+
+Source: `playground/components/indicator/indicator-bottom-indicator-center.html`
+
+```html
+<div class="indicator">
+  <span
+    class="indicator-item indicator-bottom indicator-center badge badge-secondary"
+  ></span>
+  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
+</div>
+```
+
+### Indicator bottom indicator end default
+
+Source: `playground/components/indicator/indicator-bottom-indicator-end-default.html`
+
+```html
+<div class="indicator">
+  <span class="indicator-item indicator-bottom badge badge-secondary"></span>
+  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
+</div>
+```
+
+### Indicator bottom indicator start
+
+Source: `playground/components/indicator/indicator-bottom-indicator-start.html`
+
+```html
+<div class="indicator">
+  <span
+    class="indicator-item indicator-bottom indicator-start badge badge-secondary"
+  ></span>
+  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
+</div>
+```
+
+### Indicator middle indicator center
+
+Source: `playground/components/indicator/indicator-middle-indicator-center.html`
+
+```html
+<div class="indicator">
+  <span
+    class="indicator-item indicator-middle indicator-center badge badge-secondary"
+  ></span>
+  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
+</div>
+```
+
+### Indicator middle indicator end default
+
+Source: `playground/components/indicator/indicator-middle-indicator-end-default.html`
+
+```html
+<div class="indicator">
+  <span class="indicator-item indicator-middle badge badge-secondary"></span>
+  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
+</div>
+```
+
+### Indicator middle indicator start
+
+Source: `playground/components/indicator/indicator-middle-indicator-start.html`
+
+```html
+<div class="indicator">
+  <span
+    class="indicator-item indicator-middle indicator-start badge badge-secondary"
+  ></span>
+  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
+</div>
+```
+
+### Indicator top default indicator center
+
+Source: `playground/components/indicator/indicator-top-default-indicator-center.html`
+
+```html
+<div class="indicator">
+  <span class="indicator-item indicator-center badge badge-secondary"></span>
+  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
+</div>
+```
+
+### Indicator top default indicator end default
+
+Source: `playground/components/indicator/indicator-top-default-indicator-end-default.html`
+
+```html
+<div class="indicator">
+  <span class="indicator-item badge badge-secondary"></span>
+  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
+</div>
+```
+
+### Indicator top default indicator start
+
+Source: `playground/components/indicator/indicator-top-default-indicator-start.html`
+
+```html
+<div class="indicator">
+  <span class="indicator-item indicator-start badge badge-secondary"></span>
+  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
+</div>
+```
+
+### Multiple indicators
+
+Source: `playground/components/indicator/multiple-indicators.html`
+
+```html
+<div class="indicator">
+  <span class="indicator-item indicator-top indicator-start badge">↖︎</span>
+  <span class="indicator-item indicator-top indicator-center badge">↑</span>
+  <span class="indicator-item indicator-top indicator-end badge">↗︎</span>
+  <span class="indicator-item indicator-middle indicator-start badge">←</span>
+  <span class="indicator-item indicator-middle indicator-center badge">●</span>
+  <span class="indicator-item indicator-middle indicator-end badge">→</span>
+  <span class="indicator-item indicator-bottom indicator-start badge">↙︎</span>
+  <span class="indicator-item indicator-bottom indicator-center badge">↓</span>
+  <span class="indicator-item indicator-bottom indicator-end badge">↘︎</span>
+  <div class="bg-base-300 grid h-32 w-60 place-items-center">Box</div>
+</div>
+```
+
+### Responsive
+
+Source: `playground/components/indicator/responsive.html`
+
+```html
+<div class="indicator">
+  <span
+    class="indicator-item indicator-start sm:indicator-middle md:indicator-bottom lg:indicator-center xl:indicator-end badge badge-secondary"
+  ></span>
+  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
+</div>
+```
+
+### Status indicator
+
+Source: `playground/components/indicator/status-indicator.html`
+
+```html
+<div class="indicator">
+  <span class="indicator-item status status-success"></span>
+  <div class="bg-base-300 grid h-32 w-32 place-items-center">content</div>
+</div>
+```