Built outside,
not online.

New section

Headline for uno

Supporting copy for this section.

create-a-new-hero-component.tsx

import React from 'react';

interface HeroProps {
  eyebrow?: string;
  headline: string;
  headlineAccent?: string;
  lede?: string;
  ctaPrimary?: {
    label: string;
    href: string;
  };
  ctaSecondary?: {
    label: string;
    href: string;
  };
  className?: string;
}

export const Hero: React.FC<HeroProps> = ({
  eyebrow,
  headline,
  headlineAccent,
  lede,
  ctaPrimary,
  ctaSecondary,
  className = '',
}) => {
  return (
    <section className={`hero ${className}`} role="banner">
      <div className="hero-content">
        {eyebrow && (
          <span className="eyebrow">{eyebrow}</span>
        )}
        
        <h1 className="hero-headline">
          {headline}
          {headlineAccent && (
            <span className="headline-accent"> {headlineAccent}</span>
          )}
        </h1>
        
        {lede && (
          <p className="lede">{lede}</p>
        )}
        
        {(ctaPrimary || ctaSecondary) && (
          <div className="hero-actions">
            {ctaPrimary && (
              <a href={ctaPrimary.href} className="btn btn-primary">
                {ctaPrimary.label}
                <svg 
                  width="16" 
                  height="16" 
                  viewBox="0 0 16 16" 
                  fill="none" 
                  aria-hidden="true"
                  style={{ marginLeft: '0.25rem' }}
                >
                  <path 
                    d="M3 8h10M9 4l4 4-4 4" 
                    stroke="currentColor" 
                    strokeWidth="1.5" 
                    strokeLinecap="round" 
                    strokeLinejoin="round"
                  />
                </svg>
              </a>
            )}
            
            {ctaSecondary && (
              <a href={ctaSecondary.href} className="btn btn-ghost">
                {ctaSecondary.label}
              </a>
            )}
          </div>
        )}
      </div>
    </section>
  );
};

// Enhanced hero variant with visual elements
interface HeroSplitProps extends HeroProps {
  visualType?: 'orbs' | 'grid' | 'minimal';
}

export const HeroSplit: React.FC<HeroSplitProps> = ({
  eyebrow,
  headline,
  headlineAccent,
  lede,
  ctaPrimary,
  ctaSecondary,
  className = '',
  visualType = 'orbs',
}) => {
  const renderVisual = () => {
    switch (visualType) {
      case 'orbs':
        return (
          <div className="hero-visual hero-visual--orbs" aria-hidden="true">
            <div className="hero-orb hero-orb--primary" />
            <div className="hero-orb hero-orb--secondary" />
            <div className="hero-ring" />
          </div>
        );
      case 'grid':
        return (
          <div className="hero-visual hero-visual--grid" aria-hidden="true">
            <div className="hero-grid">
              {Array.from({ length: 12 }).map((_, i) => (
                <div key={i} className="hero-grid-item" />
              ))}
            </div>
          </div>
        );
      case 'minimal':
      default:
        return (
          <div className="hero-visual hero-visual--minimal" aria-hidden="true">
            <div className="hero-accent-bar" />
          </div>
        );
    }
  };

  return (
    <section className={`hero hero--split ${className}`} role="banner">
      <div className="hero-layout">
        <div className="hero-content">
          {eyebrow && (
            <span className="eyebrow">{eyebrow}</span>
          )}
          
          <h1 className="hero-headline">
            {headline}
            {headlineAccent && (
              <span className="headline-accent"> {headlineAccent}</span>
            )}
          </h1>
          
          {lede && (
            <p className="lede">{lede}</p>
          )}
          
          {(ctaPrimary || ctaSecondary) && (
            <div className="hero-actions">
              {ctaPrimary && (
                <a href={ctaPrimary.href} className="btn btn-primary">
                  {ctaPrimary.label}
                  <svg