Skip to main content

CTA Sections

JetShip provides two distinct CTA (Call-to-Action) Sections that can be customized to suit your project’s needs. Each CTA section is designed to encourage user interaction, whether for joining a community on Discord or making a purchase. These sections are fully customizable and can be tailored to your design preferences.

Below are the two available CTA sections, each with its own unique style and functionality.


1. CTA Discord Section

The CTA Discord Section is designed to prompt users to join your Discord community. With a modern, clean layout, it features a title, description, and a button that links users directly to your Discord server. The section also includes an image or illustration that can be customized based on your needs.

⚙️ Props

  • title (required): The main title of the CTA section.
  • description (required): A brief description or call-to-action text encouraging users to join your Discord.
  • button (required): The button text or element that directs users to your Discord server.
  • image (optional): Either an image tag (<img src={src} />) or an object with the following properties:
    • srcLight: The image source for light mode.
    • srcDark: The image source for dark mode.
    • alt (optional): Alt text for accessibility.
    • className (optional): Tailwind CSS classes to style the image.
  • className (optional): Tailwind CSS classes to customize the section’s container.
  • buttonClassName (optional): Tailwind CSS classes to style the CTA button.
  • transitionDelay (optional): The delay for transition effects.
  • transitionDuration (optional): The duration for transition effects.

👀 Preview and Code

You can update the data used in the CTA Discord Section from the apps/web/src/assets/data/ctaDiscordData.tsx file, where you can define the content, button, and image data.

CTA Discord Section


2. CTA Buy Now Section

The CTA Buy Now Section is designed to prompt users to make a purchase. It includes a logo, content, and a button that links to the purchase page. The section also features an image that can be customized, and you can adjust the layout to better fit your design.

⚙️ Props

  • logo (optional): The logo of the product or service being promoted.
  • content (required): The main content or description for the CTA section, encouraging users to buy now.
  • button (required): The button text or element that directs users to the purchase page.
  • image (required): Either an image tag (<img src={src} />) or an object with the following properties:
    • srcLight: The image source for light mode.
    • srcDark: The image source for dark mode.
    • alt (optional): Alt text for accessibility.
    • className (optional): Tailwind CSS classes to style the image.
  • imageDirection (optional): Position of the image relative to the content (default is "left").
  • className (optional): Tailwind CSS classes for styling the section’s main container.
  • transitionDelay (optional): The delay for transition effects.
  • transitionDuration (optional): The duration for transition effects.

👀 Preview and Code

You can update the data used in the CTA Buy Now Section from the apps/web/src/assets/data/ctaBuyNowData.tsx file, where you can define the content, button, logo, and image data.

CTA Buy Now Section