ServicesWorkInspirationBlogAbouthello@optimaflow.id
← All components

CTA

free

CTA 03

Full-color mint accent CTA card with a serif headline and dual buttons on a deep forest canvas.

Preview

Rooted in Renewal

Grow something that lasts beyond the season.

Join a community restoring soil, sourcing responsibly, and building wellness rituals that give back more than they take.

Copy the code

paste-ready → Designer
<!-- Paste markup into an Embed, or recreate as native elements.
     Styles below map 1:1 to the class names above. -->
<section class="cta_wrap">
  <div class="cta_card">
    <div class="cta_glow"></div>
    <div class="cta_glowb"></div>
    <p class="cta_eyebrow">Rooted in Renewal</p>
    <h2 class="cta_title">Grow something that lasts beyond the season.</h2>
    <p class="cta_sub">Join a community restoring soil, sourcing responsibly, and building wellness rituals that give back more than they take.</p>
    <div class="cta_actions">
      <a class="cta_primary" href="#start">Start your plan</a>
      <a class="cta_secondary" href="#impact">Explore the impact</a>
    </div>
  </div>
</section>

<style>
.cta_wrap {
  width:100%;
  background-color:#07221d;
  padding:96px 24px;
  display:flex;
  justify-content:center;
  box-sizing:border-box;
}

.cta_card {
  position:relative;
  width:100%;
  max-width:1080px;
  overflow:hidden;
  border-radius:32px;
  background-color:#8fe388;
  padding:80px 48px;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  box-sizing:border-box;
}

.cta_glow {
  pointer-events:none;
  position:absolute;
  right:-96px;
  top:-96px;
  height:320px;
  width:320px;
  border-radius:9999px;
  background-color:#b6f2b0;
  filter:blur(80px);
  opacity:0.7;
}

.cta_glowb {
  pointer-events:none;
  position:absolute;
  left:-80px;
  bottom:-96px;
  height:288px;
  width:288px;
  border-radius:9999px;
  background-color:#6fd07f;
  filter:blur(90px);
  opacity:0.5;
}

.cta_eyebrow {
  position:relative;
  z-index:10;
  margin:0 0 24px 0;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:13px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.28em;
  color:#0c3a2e;
}

.cta_title {
  position:relative;
  z-index:10;
  margin:0 0 24px 0;
  max-width:720px;
  font-family:Georgia,'Times New Roman',serif;
  font-size:56px;
  font-weight:400;
  line-height:1.05;
  letter-spacing:-0.02em;
  color:#07221d;
}

.cta_sub {
  position:relative;
  z-index:10;
  margin:0 0 40px 0;
  max-width:520px;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:17px;
  line-height:1.6;
  color:#134034;
}

.cta_actions {
  position:relative;
  z-index:10;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:16px;
}

.cta_primary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9999px;
  background-color:#07221d;
  padding:16px 36px;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  font-weight:600;
  color:#8fe388;
  text-decoration:none;
  border:2px solid #07221d;
  transition:transform 0.2s ease;
}

.cta_secondary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:9999px;
  border:2px solid #0c3a2e;
  background-color:transparent;
  padding:16px 36px;
  font-family:'Helvetica Neue',Arial,sans-serif;
  font-size:16px;
  font-weight:600;
  color:#0c3a2e;
  text-decoration:none;
  transition:background-color 0.2s ease,color 0.2s ease;
}
</style>

One email unlocks copying across the whole library — that's the only ask.

Want the whole site built for you?

Book a free call