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.
- Preview
- Code
import CTADiscord from '@repo/ui/blocks/cta/CTADiscord'
import SectionWrapper from '@repo/ui/blocks/others/SectionWrapper'
import ctaDiscordData from '@/assets/data/ctaDiscordData'
const Component = () => {
return (
<SectionWrapper className='...'>
<CTADiscord
image={ctaDiscordData.image}
title={ctaDiscordData.title}
description={ctaDiscordData.description}
button={ctaDiscordData.button}
/>
</SectionWrapper>
)
}
export default Component
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.
- Preview
- Code
import CTABuyNow from '@repo/ui/blocks/cta/CTABuyNow'
import SectionWrapper from '@repo/ui/blocks/others/SectionWrapper'
import ctaBuyNowData from '@/assets/data/ctaBuyNowData'
const Component = () => {
return (
<SectionWrapper className='...'>
<CTABuyNow
logo={ctaBuyNowData.logo}
content={ctaBuyNowData.content}
button={ctaBuyNowData.button}
image={ctaBuyNowData.image}
/>
</SectionWrapper>
)
}
export default Component