Hero: centered with fade-up animation

What you receive in Webflow

• 8 native elements and 8 classes.
• Breakpoints: mobile landscape (767px).
• 4 GSAP animations paste as Webflow Interactions.
• No Embed elements. Everything is native.

How to paste it

1. Click Copy for Webflow.
2. Open your page in the Webflow Designer.
3. Press ⌘V or Ctrl+V.

HTML

<section class="hero1">
  <div class="hero1-inner">
    <div class="hero1-eyebrow">New · Version 2.0 is here</div>
    <h1 class="hero1-title">Build beautiful websites, faster than ever</h1>
    <p class="hero1-text">Everything your team needs to design, launch and grow, in one place. No code required.</p>
    <div class="hero1-actions"><a href="#" class="hero1-btn">Start for free</a><a href="#" class="hero1-btn hero1-btn-ghost">Watch demo</a></div>
  </div>
</section>
<style>
.hero1 { font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif; background:#0b1020; color:#fff; padding:120px 24px; text-align:center; }
.hero1-inner { max-width:820px; margin:0 auto; }
.hero1-eyebrow { display:inline-block; padding:6px 14px; border:1px solid rgba(255,255,255,.18); border-radius:999px; font-size:14px; color:#c7cdfb; margin-bottom:24px; }
.hero1-title { font-size:64px; line-height:1.05; margin:0 0 20px; letter-spacing:-0.02em; }
.hero1-text { font-size:20px; line-height:1.5; color:#aab2d5; margin:0 0 36px; }
.hero1-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.hero1-btn { background:#4353ff; color:#fff; padding:14px 24px; border-radius:10px; text-decoration:none; font-weight:600; font-size:16px; }
.hero1-btn-ghost { background:transparent; border:1px solid rgba(255,255,255,.25); }
@media (max-width:767px) { .hero1 { padding:80px 20px; } .hero1-title { font-size:40px; } .hero1-text { font-size:17px; } }
</style>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script>
gsap.from(".hero1-eyebrow", { opacity: 0, y: 20, duration: 0.6 });
gsap.from(".hero1-title", { opacity: 0, y: 40, duration: 0.8, delay: 0.1 });
gsap.from(".hero1-text", { opacity: 0, y: 30, duration: 0.8, delay: 0.25 });
gsap.from(".hero1-actions", { opacity: 0, y: 20, duration: 0.8, delay: 0.4 });
</script>