heronavigationctatailwindanimatedresponsive
Responsive Landing Hero with Header Nav and Animated CTA

Адаптивный Hero-блок с навигацией и анимированной кнопкой CTA. Идеально для лендингов, сайтов-портфолио и продуктовых страниц. Создан на Tailwind CSS.
Live Preview
Prompt

<section class="relative w-full sm:px-6 md:px-10 max-w-7xl mt-12 mr-auto mb-12 ml-auto pr-4 pl-4">
  <!-- Meta row -->
  <header class="w-full">
    <header class="flex gap-4 w-full mb-8 items-center justify-between">
      <div class="flex items-center gap-3">
        <span class="text-lg font-semibold text-black tracking-tight font-sans">RELAY</span>
      </div>
      <nav class="hidden md:flex items-center gap-6 text-sm text-neutral-700">
        <a href="#work" class="hover:text-black transition-colors font-medium font-sans" style="">Work</a>
        <a href="#services" class="hover:text-black transition-colors font-medium font-sans" style="">Services</a>
        <a href="#approach" class="hover:text-black transition-colors font-medium font-sans" style="">Approach</a>
        <a href="#contact" class="hover:text-black transition-colors font-medium font-sans" style="">Contact</a>
      </nav>
      <div class="flex gap-3 items-center">
        <button class="md:hidden inline-flex items-center justify-center h-10 w-10 rounded-lg ring-1 ring-black/20 bg-black text-white hover:bg-neutral-800 transition-colors" aria-label="Open menu">
      <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" data-lucide="menu" class="lucide lucide-menu w-5 h-5" style="stroke-width: 1.5"><path d="M4 12h16" class=""></path><path d="M4 18h16" class=""></path><path d="M4 6h16" class=""></path></svg>
    </button>
        <button class="hidden md:inline-flex cursor-pointer flex-col leading-none outline-none overflow-hidden no-underline align-baseline whitespace-nowrap select-none transition-all duration-150 hover:opacity-85 focus:outline-none focus:ring-4 focus:ring-black/50 max-sm:h-12 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] text-sm text-white text-center bg-gradient-to-b from-neutral-700 to-neutral-900 border-0 rounded-full pt-3 pr-8 pb-3 pl-8 items-center justify-center" role="button">Get Started</button>
      </div>
    </header>
  </header>

  <!-- Headline -->
  <h1
    class="max-w-3xl sm:text-5xl md:text-6xl lg:text-8xl leading-[1.05] text-4xl font-medium text-black tracking-tighter font-bricolage">
    We design<img alt="Product UI" class="inline-block align-middle h-10 w-14 sm:h-12 sm:w-20 md:h-16 md:w-28 object-cover rounded-xl mr-2 ml-2 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]" style="" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/0c07c30e-40d3-4e44-b2b4-f36565320508_800w.jpg"> brands, products, and websites that ship.
    <img alt="Brand system" class="inline-block align-middle h-10 w-12 sm:h-12 sm:w-16 md:h-16 md:w-24 object-cover rounded-xl mr-2 ml-2 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]" style="" src="https://hoirqrkdgbmvpwutwuwj-all.supabase.co/storage/v1/object/public/assets/assets/75013a1d-ac6c-4409-9764-7d4b6db81eb3_320w.jpg">
  </h1>

  <!-- Subcopy -->
  <p class="sm:text-3xl max-w-3xl text-base text-black mt-4" style="">
    Relay is a design and engineering studio partnering with ambitious teams to build category-defining experiences—from
    zero-to-one to scale. Senior-only, outcome-first, fast by default.
  </p>

  <!-- Feature badges -->
  <div class="flex flex-wrap gap-2.5 mt-24">
    <span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border-white/20 border rounded-full pt-1.5 pr-3 pb-1.5 pl-3" style="backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);">
      <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" data-lucide="pen-tool" class="lucide lucide-pen-tool w-[14px] h-[14px] text-white/90" style="stroke-width: 1.5"><path d="M15.707 21.293a1 1 0 0 1-1.414 0l-1.586-1.586a1 1 0 0 1 0-1.414l5.586-5.586a1 1 0 0 1 1.414 0l1.586 1.586a1 1 0 0 1 0 1.414z" class=""></path><path d="m18 13-1.375-6.874a1 1 0 0 0-.746-.776L3.235 2.028a1 1 0 0 0-1.207 1.207L5.35 15.879a1 1 0 0 0 .776.746L13 18" class=""></path><path d="m2.3 2.3 7.286 7.286" class=""></path><circle cx="11" cy="11" r="2" class=""></circle></svg>
      Product Design
    </span>
    <span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border border-white/20 rounded-full pt-1.5 pr-3 pb-1.5 pl-3 font-sans" style="backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);">
      <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" data-lucide="shapes" class="lucide lucide-shapes w-[14px] h-[14px] text-white/90" style="stroke-width: 1.5"><path d="M8.3 10a.7.7 0 0 1-.626-1.079L11.4 3a.7.7 0 0 1 1.198-.043L16.3 8.9a.7.7 0 0 1-.572 1.1Z" class=""></path><rect x="3" y="14" width="7" height="7" rx="1" class=""></rect><circle cx="17.5" cy="17.5" r="3.5" class=""></circle></svg>
      Brand Systems
    </span>
    <span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border border-white/20 rounded-full pt-1.5 pr-3 pb-1.5 pl-3 font-sans" style="backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);">
      <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" data-lucide="code-2" class="lucide lucide-code-2 w-[14px] h-[14px] text-white/90" style="stroke-width: 1.5"><path d="m18 16 4-4-4-4" class=""></path><path d="m6 8-4 4 4 4" class=""></path><path d="m14.5 4-5 16" class=""></path></svg>
      Design Engineering
    </span>
    <span class="inline-flex items-center gap-2 text-xs text-white/90 bg-white/10 border border-white/20 rounded-full pt-1.5 pr-3 pb-1.5 pl-3 font-sans" style="backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);">
      <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" data-lucide="film" class="lucide lucide-film w-[14px] h-[14px] text-white/90" style="stroke-width: 1.5"><rect width="18" height="18" x="3" y="3" rx="2" class=""></rect><path d="M7 3v18" class=""></path><path d="M3 7.5h4" class=""></path><path d="M3 12h18" class=""></path><path d="M3 16.5h4" class=""></path><path d="M17 3v18" class=""></path><path d="M17 7.5h4" class=""></path><path d="M17 16.5h4" class=""></path></svg>
      Motion &amp; 3D
    </span>
  </div>

  <!-- CTAs -->
  <div class="flex flex-col sm:flex-row gap-3 sm:gap-4 mt-8">
    <button type="button" class="button shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)]">
<div class="points_wrapper">
<i class="point"></i>
<i class="point"></i>
<i class="point"></i>
<i class="point"></i>
<i class="point"></i>
<i class="point"></i>
<i class="point"></i>
<i class="point"></i>
<i class="point"></i>
<i class="point"></i>
</div>

<span class="inner font-sans">Get Started<svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
<path d="M5 12h14" class=""></path>
<path d="m12 5 7 7-7 7" class=""></path>
</svg></span>
<style>
.button {
cursor: pointer;
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
transition: all 0.25s ease;
background: radial-gradient(65.28% 65.28% at 50% 100%,
    rgba(255, 165, 0, 0.8) 0%,
    rgba(255, 165, 0, 0) 100%),
  linear-gradient(0deg, #f97316, #f97316);
border-radius: 9999px;
border: none;
outline: none;
padding: 12px 24px;
min-height: 48px;
min-width: 102px;
}

.button::before,
.button::after {
content: "";
position: absolute;
transition: all 0.5s ease-in-out;
z-index: 0;
}

.button::before {
inset: 1px;
background: linear-gradient(177.95deg,
    rgba(255, 255, 255, 0.19) 0%,
    rgba(255, 255, 255, 0) 100%);
border-radius: 9999px;
}

.button::after {
inset: 2px;
background: radial-gradient(65.28% 65.28% at 50% 100%,
    rgba(255, 165, 0, 0.8) 0%,
    rgba(255, 165, 0, 0) 100%),
  linear-gradient(0deg, #f97316, #f97316);
border-radius: 9999px;
}

.button:active {
transform: scale(0.95);
}

.points_wrapper {
overflow: hidden;
width: 100%;
height: 100%;
pointer-events: none;
position: absolute;
z-index: 1;
}

.points_wrapper .point {
bottom: -10px;
position: absolute;
animation: floating-points infinite ease-in-out;
pointer-events: none;
width: 2px;
height: 2px;
background-color: #fff;
border-radius: 9999px;
}

@keyframes floating-points {
0% {
  transform: translateY(0);
}

85% {
  opacity: 0;
}

100% {
  transform: translateY(-55px);
  opacity: 0;
}
}

.points_wrapper .point:nth-child(1) {
left: 10%;
opacity: 1;
animation-duration: 2.35s;
animation-delay: 0.2s;
}

.points_wrapper .point:nth-child(2) {
left: 30%;
opacity: 0.7;
animation-duration: 2.5s;
animation-delay: 0.5s;
}

.points_wrapper .point:nth-child(3) {
left: 25%;
opacity: 0.8;
animation-duration: 2.2s;
animation-delay: 0.1s;
}

.points_wrapper .point:nth-child(4) {
left: 44%;
opacity: 0.6;
animation-duration: 2.05s;
}

.points_wrapper .point:nth-child(5) {
left: 50%;
opacity: 1;
animation-duration: 1.9s;
}

.points_wrapper .point:nth-child(6) {
left: 75%;
opacity: 0.5;
animation-duration: 1.5s;
animation-delay: 1.5s;
}

.points_wrapper .point:nth-child(7) {
left: 88%;
opacity: 0.9;
animation-duration: 2.2s;
animation-delay: 0.2s;
}

.points_wrapper .point:nth-child(8) {
left: 58%;
opacity: 0.8;
animation-duration: 2.25s;
animation-delay: 0.2s;
}

.points_wrapper .point:nth-child(9) {
left: 98%;
opacity: 0.6;
animation-duration: 2.6s;
animation-delay: 0.1s;
}

.points_wrapper .point:nth-child(10) {
left: 65%;
opacity: 1;
animation-duration: 2.5s;
animation-delay: 0.2s;
}

.inner {
z-index: 2;
gap: 6px;
position: relative;
width: 100%;
color: white;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 500;
line-height: 1.5;
transition: color 0.2s ease-in-out;
}

.inner svg.icon {
width: 18px;
height: 18px;
transition: transform 0.3s ease;
stroke: white;
fill: none;
}

.button:hover svg.icon {
transform: translateX(2px);
}

.button:hover svg.icon path {
animation: dash 0.8s linear forwards;
}

@keyframes dash {
0% {
  stroke-dasharray: 0, 20;
  stroke-dashoffset: 0;
}

50% {
  stroke-dasharray: 10, 10;
  stroke-dashoffset: -5;
}

100% {
  stroke-dasharray: 20, 0;
  stroke-dashoffset: -10;
}
}
</style>
</button>
    <a href="#work"
      class="inline-flex items-center justify-center hover:bg-white/10 text-base font-medium text-white/90 bg-black/20 border-white/10 border rounded-full pt-3 pr-6 pb-3 pl-6 shadow-[0_2.8px_2.2px_rgba(0,_0,_0,_0.034),_0_6.7px_5.3px_rgba(0,_0,_0,_0.048),_0_12.5px_10px_rgba(0,_0,_0,_0.06),_0_22.3px_17.9px_rgba(0,_0,_0,_0.072),_0_41.8px_33.4px_rgba(0,_0,_0,_0.086),_0_100px_80px_rgba(0,_0,_0,_0.12)] backdrop-blur"
      style="backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);">
      See our work
    </a>
  </div>

  <!-- Footer bar in badge -->

</section>
All Prompts