Call To Action

Overview

The Call to Action (CTA) Component is designed to engage users at the end of a content piece, prompting them to take the next steps. Whether it's starting a project, learning more about your services, or any other action, this component efficiently combines a compelling message with actionable buttons. Ideal for landing pages, service sections, or any area of your site where you want to encourage user interaction.

Features

• Engaging Presentation: Utilizes a bold title and a concise description to capture the user's attention and convey the message clearly.
• Customizable Buttons: Supports multiple buttons, allowing for different actions (e.g., "Start Now", "Learn More") with primary and secondary styling options.
• Responsive Design: Crafted for optimal viewing on devices of all sizes, ensuring your CTA remains effective and attractive across all platforms.
• Dark Mode Compatibility: Ready for dark mode, ensuring your CTA looks great in both light and dark themes.

Props

The component does not use external props for configuration but instead defines its content and structure internally within the <script setup> section:

• title (String): The main headline of the CTA, designed to be short and engaging.
• description (String): A brief summary or persuasive message encouraging users to take action.
• buttons (Array): An array of objects, each representing a button with the following properties:
• label (String): Text displayed on the button.
• link (String): URL or path the button links to. This can be integrated with router-link or nuxt-link for SPA navigation.
• secondary (Boolean): Determines whether the button is styled as a secondary action (true) or a primary action (false).

Example Usage

Since the component's content is predefined in the script setup, you would use it directly in your template like so:

<CallToActionComponent />

To customize the component for different scenarios, you can modify the title, description, and buttons array directly in the component's script setup section.

Styling

This component is styled with Tailwind CSS, providing a consistent and modern look that's easily adjustable. The design includes a border for distinction, rounded corners for a softer look, and padding adjustments for different screen sizes to maintain readability and attractiveness.

Usage

To integrate this CTA component into your project:

1. Ensure Tailwind CSS is set up in your project to leverage the predefined styles.
2. Copy the component code into a .vue file within your components directory.
3. Import and use the component wherever you need an engaging call to action in your application.

Component Code

<script setup lang="ts">
const title = 'Ready to start?';
const description = 'Start your journey with us and build great stuff today!';
const buttons = [
  {
    label: 'Start Now',
    link: '',
    secondary: false,
  },
  {
    label: 'Learn More',
    link: '',
    secondary: true,
  },
];
</script>

<template>
  <div class="m-lg">
    <div
      class="flex w-full flex-col rounded-lg border-2 border-black p-xs text-black dark:border-primary dark:text-primary sm:p-sm md:p-md"
    >
      <div class="flex flex-col">
        <h2 class="m-auto text-6xl font-bold">
          {{ title }}
        </h2>
        <p class="m-auto text-xl sm:mt-xs md:mt-sm">
          {{ description }}
        </p>
      </div>
      <div class="mx-auto mt-md flex flex-col gap-2 sm:flex-row">
        <div
          v-for="button in buttons"
          :key="button.label"
          class="mx-auto"
        >
          <CoolButton
            :label="button.label"
            :link="button.link"
            :secondary="button.secondary"
          />
        </div>
      </div>
    </div>
  </div>
</template>