{# @description The hero container: a large block that centres its content, optionally over a dimmed background image. Set the background image with a style attribute, such as style="background-image: url(hero.jpg)". Any further attributes reach the hero element. #}
{# @prop overlay:boolean | description:"Dim the background image with daisyUI's overlay behind the content." #}
{# @prop class:text | description:"Extra classes added to the hero, such as min-h-screen." #}
{# @slot <div class="max-w-md"><h1 class="text-5xl font-bold"><c-text_rotate class="text-5xl" content_class="justify-items-center"><span>Ship faster</span><span>Build smarter</span><span>Launch today</span></c-text_rotate></h1><p class="py-6">We help you <c-text_rotate><span>design</span><span>build</span><span>ship</span></c-text_rotate> better products.</p><div class="grid auto-cols-max grid-flow-col gap-5 py-6 text-center"><div class="flex flex-col"><c-countdown class="font-mono text-4xl" value="15" />days</div><div class="flex flex-col"><c-countdown class="font-mono text-4xl" value="10" />hours</div><div class="flex flex-col"><c-countdown class="font-mono text-4xl" value="24" />min</div><div class="flex flex-col"><c-countdown class="font-mono text-4xl" value="59" />sec</div></div><button class="btn btn-primary">Get started</button></div> — A launch banner: a large centred rotating heading, a sentence with an inline rotating word, a days, hours, minutes and seconds clock of labelled countdowns, and the call to action. #}
{% comment %}
  The container only. A composed hero section (heading, copy, calls to
  action) is the project's markup in the slot. The background image is the
  caller's style attribute, which reaches the root through attrs.
{% endcomment %}
<c-vars overlay="" class />
<div class="hero {{ class }}" {{ attrs }}>{% if overlay %}<div class="hero-overlay" aria-hidden="true"></div>{% endif %}<div class="hero-content">{{ slot }}</div></div>