Hero

Heroes 464

About

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

Code

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

Usage.tsx

import * as React from 'react';
import { EthicalHero } from '@/components/ui/hero-5'; // Adjust path as needed

// --- Demo Data ---

const heroData = {
  title: (
    <>
      Invest in companies
      <br />
      and industries that share your{' '}
      <span className="text-primary">ethical values.</span>
    </>
  ),
  subtitle:
    'GOODFOLIO is a simple and transparent investment platform designed for experienced and aspiring socially responsible investors.',
  ctaLabel: 'Join the waitlist',
  ctaHref: '#',
  features: [
    {
      id: 'deforestation',
      title: 'Fight deforestation',
      imageUrl:
        'https://cdn.21st.dev/assets/mirror/74/74a07192af29bb6bc50ebbec887dc453ac755cc69309a2cb202dce8445eff90e.jpg',
      href: '#',
    },
    {
      id: 'ocean-health',
      title: 'Invest in ocean health',
      imageUrl:
        'https://cdn.21st.dev/assets/mirror/5e/5e62b7a44f562c32bd7720c63a60c87a941a0e7c9b6bc30931b748e01901fda8.jpg',
      href: '#',
    },
    {
      id: 'animal-welfare',
      title: 'Support animal welfare',
      imageUrl:
        'https://cdn.21st.dev/assets/mirror/13/1384be6c41b273a2435216d23cd2d6a83e1fcb552ab2d91a40e43c47c82b2da9.jpg',
      href: '#',
    },
  ],
};

// --- Demo Component ---

export default function EthicalHeroDemo() {
  return (
    <div className="w-full bg-background">
      <EthicalHero
        title={heroData.title}
        subtitle={heroData.subtitle}
        ctaLabel={heroData.ctaLabel}
        ctaHref={heroData.ctaHref}
        features={heroData.features}
      />
    </div>
  );
}