CTA

A beautiful call-to-action component with gradient background and decorative elements

Preview

CTA Component

Features

✨ Eye-catching design with gradient background and SVG patterns
🚀 Highlighted and icon-based action buttons
🎭 Responsive design, adaptive to the theme

Usage

Import and use the CTA component in your page:

page.tsx

import Cta from '@/components/cta';
 
export default function Page() {
  return (
    <main>
      {/* Your other components */}
      <Cta />
    </main>
  );
}

Customization Text Content

You can customize the text content by modifying the cta section in your translation files (messages/en.json, etc.):

messages/en.json

{
  "cta": {
    "highlight": "Ready to ship",
    "rest": "your next product?",
    "description": "Start shipping faster and smarter with our platform. Join thousands of satisfied users today.",
    "button": "Get Started"
  }
}

Customization Button Link

You can change the button link by modifying the href attribute in the CTA component:

components/cta.tsx

<Button size="xl" className="text-xl font-bold flex gap-2 mx-auto mt-10" asChild>
  <a href="#your-custom-link">
    <FaRocket />
    {t('button')}
  </a>
</Button>

Customization Button Icon

You can change the button icon by replacing the FaRocket component with any other React icon: