Hero Section

Heroes 807

About

Financial Hero This component is a responsive hero section designed for SaaS and financial platforms. It features an animated text section on the left and a dynamic, layered card image display on the right, all set against a modern grid background.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Hero Section to your project and fits it to your theme.

Code

How Hero Section is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import React from 'react';
import { FinancialHero } from '@/components/ui/hero-section'; // Adjust the import path as needed

// Demo component to showcase the FinancialHero
const FinancialHeroDemo = () => {
  return (
    <div className="w-full bg-background">
      <FinancialHero
        title={
          <>
            Ready to Transform Your <br />
            <span className="text-primary">Management?</span>
          </>
        }
        description="Experience the future of finance with our cutting-edge SaaS platform. Start optimizing your financial operations today!"
        buttonText="Download app"
        buttonLink="#"
        imageUrl1="https://cdn.21st.dev/assets/mirror/d7/d7533ad5cde53f489a6fbdc36cccfa46987e961526dcaaad89284f9853767c41.jpg"
        imageUrl2="https://cdn.21st.dev/assets/mirror/00/00f72bf54c03c3849745dc757b127fd8b7828ed3d17045f39da3273618a02529.jpg"
      />
    </div>
  );
};

export default FinancialHeroDemo;