Launch: We Are Live Launch Hero
Live launch announcement with CTAs and product mockup
Live today: Saaslandings 2.0
We just launched. Come build your page with us.
After eight months of private beta, Saaslandings is open to everyone. Launch-day pricing ends Sunday at midnight.
Full-width preview
npx shadcn@latest add https://tailkits.com/r/free-launch-1.jsonView HTML code
<section
class="py-16 lg:py-24 overflow-hidden bg-gradient-to-b from-tk-tint-8 via-tk-tint-1 to-background"
>
<div class="max-w-7xl mx-auto px-4 xl:px-0">
<div
data-tk-motion="cascade"
class="flex flex-col items-center text-center"
>
<div
class="items-center justify-center rounded-full text-sm font-medium whitespace-nowrap shadow-tk-md inline-flex bg-background text-secondary-foreground px-2.5 py-1"
>
<span class="mr-2 h-2 w-2 rounded-full bg-tk-success"></span>
Live today: Saaslandings 2.0
</div>
<h2
class="bg-gradient-to-b from-tk-title-start to-tk-title-end bg-clip-text text-3xl font-semibold text-transparent lg:text-5xl mt-6 sm:w-4/5 md:w-3/4 lg:mt-8 lg:w-2/3 lg:leading-tight xl:w-3/5"
>
We just launched. Come build your page with us.
</h2>
<p
class="text-sm font-medium text-tk-ink-soft leading-normal lg:leading-normal lg:text-base mt-4 sm:w-2/3 md:w-1/2 xl:w-2/5"
>
After eight months of private beta, Saaslandings is open to everyone.
Launch-day pricing ends Sunday at midnight.
</p>
<div
class="mt-8 flex flex-wrap items-center justify-center gap-3 lg:mt-10"
>
<a
href="/read-the-launch-post"
title="Read the launch post"
class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm border border-tk-border-soft bg-background text-secondary-foreground hover:border-border hover:bg-accent disabled:border-foreground/5 disabled:bg-tk-surface/30 disabled:text-foreground/20 px-4 py-2.5 rounded-tk flex"
data-tk-hover="press"
>
<svg
class="shrink-0 text-muted-foreground mr-2 h-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M4.125 3C3.089 3 2.25 3.84 2.25 4.875V18a3 3 0 0 0 3 3h15a3 3 0 0 1-3-3V4.875C17.25 3.839 16.41 3 15.375 3H4.125ZM12 9.75a.75.75 0 0 0 0 1.5h1.5a.75.75 0 0 0 0-1.5H12Zm-.75-2.25a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75ZM6 12.75a.75.75 0 0 0 0 1.5h7.5a.75.75 0 0 0 0-1.5H6Zm-.75 3.75a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5H6a.75.75 0 0 1-.75-.75ZM6 6.75a.75.75 0 0 0-.75.75v3c0 .414.336.75.75.75h3a.75.75 0 0 0 .75-.75v-3A.75.75 0 0 0 9 6.75H6Z"
clip-rule="evenodd"
/>
<path
d="M18.75 6.75h1.875c.621 0 1.125.504 1.125 1.125V18a1.5 1.5 0 0 1-3 0V6.75Z"
/>
</svg>
Read the launch post
</a>
<a
href="/sign-up"
title="Start building"
class="items-center justify-center whitespace-nowrap text-sm font-medium transition focus:shadow-tk-focus shadow-tk-sm bg-primary text-primary-foreground hover:bg-tk-primary-hover disabled:bg-primary/30 disabled:text-tk-primary-foreground-muted/70 px-4 py-2.5 rounded-tk flex"
data-tk-hover="press"
>
Start building
<span class="ml-1 text-tk-primary-foreground-faint"> - 30% off</span>
<svg
class="shrink-0 ml-2 h-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
data-slot="icon"
>
<path
fill-rule="evenodd"
d="M12.97 3.97a.75.75 0 0 1 1.06 0l7.5 7.5a.75.75 0 0 1 0 1.06l-7.5 7.5a.75.75 0 1 1-1.06-1.06l6.22-6.22H3a.75.75 0 0 1 0-1.5h16.19l-6.22-6.22a.75.75 0 0 1 0-1.06Z"
clip-rule="evenodd"
/>
</svg>
</a>
</div>
</div>
<figure class="relative mx-auto mt-12 max-w-5xl lg:mt-16">
<img
class="w-full rounded-tk-2xl border-4 border-foreground/5 object-cover object-top shadow-tk-md lg:rounded-tk-3xl"
src="https://tailkits.com/ui/iframe/assets/img/browser-mock-up-1.png"
alt="The Saaslandings editor on launch day"
/>
</figure>
</div>
</section>