CTA

The CTA component is a reusable Angular component designed to highlight a call-to-action with engaging text and a checkout button.

Features

Engaging Design: Features bold headings and a dynamic call-to-action message.
Customizable Background: Includes a gradient overlay and background image for visual appeal.
Responsive Layout: Adapts seamlessly to various screen sizes.
Integrated Button: Includes a checkout button for immediate action.

Usage

Step 1: Import the Component

Add the CtaComponent to your Angular project by including it in your module or component imports array.

import { CtaComponent } from "src/app/components/cta/cta.component";
 
@Component({
  ...
  imports: [..., CtaComponent],
  ...
})

Step 2: Add the Template

Include the Cta component in your template:

<cta></cta>

Component Structure

HTML Template

The default structure includes:

Heading: A bold, eye-catching title encouraging action.
Subtext: A smaller paragraph reinforcing the call-to-action.
Checkout Button: A central button for immediate engagement.

Example Template

<div
  class="cta-section surface-50 py-6 md:py-8 flex flex-column text-center px-2"
  style="
    background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)),
      url('assets/images/cta-bg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  "
>
  <h1
    class="text-center text-4xl lg:text-6xl font-semibold line-height-3 letter-spacing-neg-04 flex flex-column mb-2 align-items-center mt-2"
  >
    Stop Struggling,
    <span
      class="text-white px-2 py-1 w-min white-space-nowrap bg-primary"
      style="transform: rotate(-1.1deg)"
      >Start Earning!</span
    >
  </h1>
  <p class="cta-p p-mb-4">
    No more complex setups. DevRocket streamlines everything, so you can focus
    on making money online.
  </p>
  <checkout-button class="center"></checkout-button>
</div>

Notes

The Cta component is designed to grab user attention and drive conversions with a strong message and an integrated checkout button.
The background image and text content can be easily customized for different use cases.

CTA

On this page