Web Sections
Back to OverviewHero Section with Animated CTA
Component Overview
A modern hero section with animated call-to-action buttons, gradient backgrounds, and responsive design for landing pages. This component is perfect for creating an impactful first impression on your website visitors.
Key Features
- Animated gradient background with subtle motion effects
- Responsive design that works on all device sizes
- Animated call-to-action buttons with hover effects
- Customizable headline, subheadline, and button text
- Optional background pattern or image support
- Accessibility-focused with proper contrast and semantic HTML
Implementation Example
import { motion } from 'framer-motion';
export default function HeroSection() {
return (
<div className="relative overflow-hidden bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-700">
{/* Background animation */}
<div className="absolute inset-0 opacity-20">
<motion.div
className="absolute inset-0 bg-[url('/grid-pattern.svg')]"
animate={{
x: [0, 10, 0],
y: [0, 15, 0]
}}
transition={{
repeat: Infinity,
duration: 20,
ease: "easeInOut"
}}
/>
</div>
<div className="container mx-auto px-4 py-24 md:py-32 relative z-10">
<div className="max-w-3xl mx-auto text-center">
<motion.h1
className="text-4xl md:text-6xl font-bold text-white mb-6"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
>
Build Beautiful Web Experiences
</motion.h1>
<motion.p
className="text-xl text-purple-100 mb-10"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.2 }}
>
Create stunning, responsive websites with our modern Next.js components
and accelerate your development workflow.
</motion.p>
<motion.div
className="flex flex-col sm:flex-row gap-4 justify-center"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.4 }}
>
<button className="px-8 py-3 bg-white text-purple-900 rounded-full font-medium hover:bg-opacity-90 transition-all transform hover:scale-105">
Get Started
</button>
<button className="px-8 py-3 bg-transparent border-2 border-white text-white rounded-full font-medium hover:bg-white hover:bg-opacity-10 transition-all">
View Demo
</button>
</motion.div>
</div>
</div>
</div>
);
}Usage Guidelines
This hero section is designed to be placed at the top of your landing page or homepage. It works best when:
- You need to make a strong first impression
- Your primary goal is to drive conversions through clear CTAs
- You want to establish your brand's visual identity immediately
- You need to communicate your value proposition concisely
Customization Options
This component can be easily customized to match your brand and specific needs:
- Change the gradient colors to match your brand palette
- Adjust animation timing and effects
- Modify the background pattern or replace with an image
- Customize button styles and hover effects
- Add additional elements like a logo or social proof