GradientHero

import React from 'react';
import './GradientHero.css';

interface GradientHeroProps {
  title: string;
  subtitle: string;
  ctaText: string;
  ctaLink: string;
}

const GradientHero: React.FC<GradientHeroProps> = ({ title, subtitle, ctaText, ctaLink }) => {
  return (
    <div className="gradient-hero" style={{ height: '100vh', background: '#0A0A0A', display: 'flex', justifyContent: 'center', alignItems: 'center', flexDirection: 'column' }}>
      <div className="mesh" />
      <h1 className="title" style={{ color: '#C9A84C' }}>{title}</h1>
      <p className="subtitle" style={{ color: '#F5F5F0' }}>{subtitle}</p>
      <a href={ctaLink} className="cta" style={{ backgroundColor: '#C9A84C', color: '#0A0A0A' }}>{ctaText}</a>
    </div>
  );
};

export default GradientHero;

Component info

Dependencies

About

A stunning full-screen hero component with an animated gradient mesh background, featuring a striking combination of Empire gold and black. Ideal for drawing attention, this component includes a prominent call-to-action button to drive user engagement. Built with TypeScript and optimized for performance, ensuring a seamless user experience. Perfect for websites, landing pages, and marketing campaigns requiring a bold, eye-catching introduction.