CTABanner

Full-width gradient CTA banner with decorative elements

Marketing & Landingctabannerconversion

Dependencies

shadcn/ui components needed:

npx shadcn@latest add button

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { Button } from '@/components/ui/button';
4import { ArrowRight } from 'lucide-react';
5
6export default function CTABanner() {
7  return (
8    <div className="relative min-h-[500px] flex items-center justify-center overflow-hidden">
9      {/* Gradient background */}
10      <div className="absolute inset-0 bg-gradient-to-r from-violet-600 via-purple-600 to-indigo-600" />
11      
12      {/* Decorative blobs */}
13      <div className="absolute top-0 left-1/4 w-96 h-96 bg-white/10 rounded-full blur-3xl" />
14      <div className="absolute bottom-0 right-1/4 w-80 h-80 bg-purple-400/20 rounded-full blur-3xl" />
15      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[600px] h-[600px] bg-indigo-400/10 rounded-full blur-3xl" />
16      
17      {/* Content */}
18      <div className="relative container mx-auto px-6 text-center z-10">
19        <div className="max-w-3xl mx-auto space-y-8">
20          <h2 className="text-4xl lg:text-6xl font-bold text-white leading-tight">
21            Ready to Transform Your Business?
22          </h2>
23          
24          <p className="text-xl text-white/80 max-w-2xl mx-auto">
25            Join thousands of companies already using our platform to accelerate growth and delight customers.
26          </p>
27          
28          <div className="flex flex-wrap justify-center gap-4 pt-4">
29            <Button
30              size="lg"
31              className="bg-white text-purple-600 hover:bg-white/90 px-8 py-6 text-lg font-semibold shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1"
32            >
33              Start Free Trial
34              <ArrowRight className="ml-2 h-5 w-5" />
35            </Button>
36            <Button
37              size="lg"
38              variant="outline"
39              className="border-2 border-white/30 text-white hover:bg-white/10 px-8 py-6 text-lg font-semibold backdrop-blur-sm transition-all duration-300 hover:-translate-y-1"
40            >
41              Schedule Demo
42            </Button>
43          </div>
44          
45          <p className="text-white/60 text-sm mt-6">
46            No credit card required • 14-day free trial • Cancel anytime
47          </p>
48        </div>
49      </div>
50    </div>
51  );
52}