packages/docs/src/routes/(routes)/components/hero/+page.md
<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>
<div>
<h3 class="text-5xl font-bold">Box Office News!</h3>
<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 class="$$hero bg-base-200 min-h-screen">
<div class="$$hero-content flex-col lg:flex-row">
<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>
<div>
<h3 class="text-5xl font-bold">Box Office News!</h3>
<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 class="$$hero bg-base-200 min-h-screen">
<div class="$$hero-content flex-col lg:flex-row-reverse">
<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>
<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>
<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>
<div
class="$$hero min-h-screen"
style={{
backgroundImage:
"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>