offline docs

offline-docs/daisyui/hero.md

@@ -0,0 +1,89 @@
+# daisyUI Documentation - Hero Component
+
+Hero is a component for displaying a large box or image with a title and description.
+
+## Classes and Usage
+
+### Core Classes:
+- **hero** - The main hero component
+- **hero-content** - Content container inside hero
+- **hero-overlay** - Overlay for hero background
+- **hero-center** - Centers content in hero
+- **hero-start** - Aligns content to start
+- **hero-end** - Aligns content to end
+- **hero-text** - Text content styling
+- **hero-image** - Image container styling
+
+## Examples
+
+### Basic Hero
+
+```html
+<div class="hero bg-base-200">
+  <div class="hero-content text-center">
+    <div class="max-w-md">
+      <h1 class="text-5xl font-bold">Welcome to daisyUI!</h1>
+      <p class="py-6">Providing useful component class names to help you write less code and build faster.</p>
+      <button class="btn btn-primary">Get Started</button>
+    </div>
+  </div>
+</div>
+```
+
+### Hero with Image
+
+```html
+<div class="hero bg-base-200">
+  <div class="hero-content flex-col lg:flex-row">
+    <div class="lg:w-1/2">
+      <img src="https://img.daisyui.com/images/stock/photo-1635805737707-57588507996c.webp" class="rounded-lg shadow-2xl" />
+    </div>
+    <div class="lg:w-1/2">
+      <h1 class="text-5xl font-bold">Your Title Here!</h1>
+      <p class="py-6">With the Hero component, you can easily create a large banner area with text and images.</p>
+      <button class="btn btn-primary">Get Started</button>
+    </div>
+  </div>
+</div>
+```
+
+### Hero with Overlay
+
+```html
+<div class="hero bg-base-200">
+  <div class="hero-overlay bg-opacity-60"></div>
+  <div class="hero-content text-center text-neutral-content">
+    <div class="max-w-md">
+      <h1 class="text-5xl font-bold">Welcome!</h1>
+      <p class="py-6">This hero has an overlay to make the text more readable.</p>
+      <button class="btn btn-primary">Get Started</button>
+    </div>
+  </div>
+</div>
+```
+
+### Hero with Background Image
+
+```html
+<div class="hero bg-[url('https://img.daisyui.com/images/stock/photo-1635805737707-57588507996c.webp')] bg-cover">
+  <div class="hero-overlay bg-base-200 bg-opacity-60"></div>
+  <div class="hero-content text-center text-neutral-content">
+    <div class="max-w-md">
+      <h1 class="text-5xl font-bold">Background Image Hero</h1>
+      <p class="py-6">This hero uses a background image with overlay.</p>
+      <button class="btn btn-primary">Get Started</button>
+    </div>
+  </div>
+</div>
+```
+
+## Features
+
+- Large banner area for showcasing content
+- Responsive design that works on all screen sizes
+- Can include images and text
+- Supports overlays for better readability
+- Flexible layout options (flex-col, lg:flex-row)
+- Customizable with Tailwind classes
+
+This component is useful for creating attention-grabbing introductory sections on websites.