47 lines
4.6 KiB
Handlebars
47 lines
4.6 KiB
Handlebars
<section class="home-hero px-5 sm:px-6 py-6 md:py-8 relative" data-home-hero="">
|
|
<div class="max-w-content mx-auto flex gap-6">
|
|
<div class="home-hero__content z-2 flex-2 flex flex-col gap-2 items-center justify-center text-center">
|
|
<h1 class="text-xl md:text-2xl font-semibold text-balance leading-[1.125]">
|
|
Ideas <em>published</em> for meaningful conversation, <em>discussed</em> and shaped by the community
|
|
</h1>
|
|
<p class="text-base text-balance text-typ-tone max-w-md leading-snug">A modern Ghost theme for curated, community-driven publishing, where members join the conversation.</p>
|
|
<form class="group relative flex w-full max-w-xs flex-col items-start mt-1" data-members-form="subscribe">
|
|
<fieldset class="w-full flex gap-2 flex-wrap text-sm">
|
|
<legend class="sr-only">Personal information</legend>
|
|
<input data-members-email="" class="text-sm bg-bgr-tone border border-brd text-typ flex-2 py-1.5 px-3 rounded-md focus:ring-0 focus:bg-bgr" type="email" autocomplete="email" placeholder="Your email" aria-label="Your email" required="" aria-required="true">
|
|
<button class="flex-1 px-3 py-1.5 text-bgr font-medium rounded-md hover:opacity-90 bg-gradient-to-b from-typ/75 to-typ/95 border border-typ cursor-pointer" type="submit">
|
|
<span class="hidden group-[.loading]:flex items-center justify-center">
|
|
<i class="icon icon-loader size-5 [&_svg]:animate-spin stroke-2" role="presentation">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<path d="M12 3a9 9 0 1 0 9 9"></path>
|
|
</svg>
|
|
</i>
|
|
</span>
|
|
<span class="group-[.loading]:hidden">Subscribe</span>
|
|
</button>
|
|
</fieldset>
|
|
<div data-notification="" class="absolute left-0 -bottom-16 z-50 invisible opacity-0 -translate-y-4 transition-all text-[0.8rem] text-left font-medium leading-none flex items-center w-full max-w-md rounded-md gap-2 bg-white text-black p-3 shadow-lg group-[.success]:opacity-100 group-[.success]:visible group-[.success]:translate-y-0 group-[.error]:opacity-100 group-[.error]:visible group-[.error]:translate-y-0">
|
|
<div class="hidden group-[.success]:flex items-center gap-2 flex-1">
|
|
<i class="icon icon-success size-6 text-emerald-600 fill-current" role="presentation">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<path d="M17 3.34a10 10 0 1 1 -14.995 8.984l-.005 -.324l.005 -.324a10 10 0 0 1 14.995 -8.336zm-1.293 5.953a1 1 0 0 0 -1.32 -.083l-.094 .083l-3.293 3.292l-1.293 -1.292l-.094 -.083a1 1 0 0 0 -1.403 1.403l.083 .094l2 2l.094 .083a1 1 0 0 0 1.226 0l.094 -.083l4 -4l.083 -.094a1 1 0 0 0 -.083 -1.32z"></path>
|
|
</svg>
|
|
</i>
|
|
<p>Great! Check your inbox and click the link.</p>
|
|
</div>
|
|
<div class="hidden group-[.error]:flex items-center gap-2 flex-1">
|
|
<i class="icon icon-error size-6 text-red-600 fill-current" role="presentation">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
|
|
<path stroke="none" d="M0 0h24v24H0z" fill="none"></path>
|
|
<path d="M12 1.67c.955 0 1.845 .467 2.39 1.247l.105 .16l8.114 13.548a2.914 2.914 0 0 1 -2.307 4.363l-.195 .008h-16.225a2.914 2.914 0 0 1 -2.582 -4.2l.099 -.185l8.11 -13.538a2.914 2.914 0 0 1 2.491 -1.403zm.01 13.33l-.127 .007a1 1 0 0 0 0 1.986l.117 .007l.127 -.007a1 1 0 0 0 0 -1.986l-.117 -.007zm-.01 -7a1 1 0 0 0 -.993 .883l-.007 .117v4l.007 .117a1 1 0 0 0 1.986 0l.007 -.117v-4l-.007 -.117a1 1 0 0 0 -.993 -.883z"></path>
|
|
</svg>
|
|
</i>
|
|
<p>Sorry, something went wrong. Please try again.</p>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</section> |