ヒーローブロック

Heroコンポーネントは、ReactとTypeScriptで構築された完全にカスタマイズ可能でアクセシブルなヒーローセクションです。モダンなデザインパターン、画像表示、柔軟なカスタマイズオプションを備えた完全なヒーローインターフェースを提供します。

---

🚀 インストール

npm install @nodeblocks/frontend-hero-block@0.1.1

---

📖 使用法

import {Hero} from '@nodeblocks/frontend-hero-block';

基本的な使用法

function BasicHero() {
  return (
    <Hero
      buttonText="始める"
      byline="私たちのプラットフォームへようこそ"
      imageUrl="/img/undraw_docusaurus_mountain.svg"
      onClickButton={() => {
        console.log('ヒーローボタンがクリックされました');
      }}>
      <Hero.HeroContent>
        <Hero.HeroContent.HeroByline style={{color: 'black'}} />
        <Hero.HeroContent.ActionButton />
      </Hero.HeroContent>
      <Hero.HeroImg />
    </Hero>
  );
}

高度な使用法

function AdvancedHero() {
  return (
    <Hero
      buttonText="始める"
      byline="私たちのプラットフォームへようこそ"
      imageUrl="/img/undraw_docusaurus_mountain.svg"
      onClickButton={() => {
        console.log('ヒーローボタンがクリックされました');
      }}
      secondaryText="業務を効率化し、生産性を向上させます"
      tertiaryText="30日間無料トライアル • クレジットカード不要">
      {({ defaultBlocks, defaultBlockOrder }) => ({
        blocks: {
          ...defaultBlocks,
          
          // 🖼️ プロパティオーバーライド付きカスタムヒーロー画像
          heroImg: {
            ...defaultBlocks.heroImg,
            props: {
              ...defaultBlocks.heroImg.props,
              className: "custom-hero-image",
              style: {
                borderRadius: '12px',
                boxShadow: '0 10px 30px rgba(0,0,0,0.2)',
                transform: 'scale(1.05)',
                transition: 'all 0.3s ease',
                padding: '16px'
              },
              width: 500,
              height: 350
            },
          },
          
          // 📝 完全なコンポーネントオーバーライド付きリッチヒーローコンテンツ
          heroContent: (
            <div style={{ 
              padding: '40px',
              backgroundColor: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
              borderRadius: '16px',
              color: 'white',
              textAlign: 'center'
            }}>
              <div style={{ marginBottom: '30px' }}>
                <h1 style={{ 
                  fontSize: '3.5rem',
                  fontWeight: 'bold',
                  marginBottom: '15px',
                  color: 'black'
                }}>
                  🚀 ビジネスを変革する
                </h1>
                <p style={{ 
                  fontSize: '1.2rem',
                  opacity: 0.9,
                  marginBottom: '0',
                  color: 'black'
                }}>
                  生産性向上のために設計された最先端プラットフォームのパワーを体験してください
                </p>
              </div>
              
              <div style={{ marginBottom: '20px' }}>
                <button 
                  style={{ 
                    backgroundColor: '#ff6b6b',
                    color: 'white',
                    border: 'none',
                    padding: '15px 30px',
                    fontSize: '1.1rem',
                    borderRadius: '50px',
                    cursor: 'pointer',
                    fontWeight: 'bold',
                    boxShadow: '0 4px 15px rgba(255,107,107,0.4)',
                    transition: 'all 0.3s ease'
                  }}
                  onMouseOver={(e) => {
                    e.target.style.transform = 'translateY(-2px)';
                    e.target.style.boxShadow = '0 6px 20px rgba(255,107,107,0.6)';
                  }}
                  onMouseOut={(e) => {
                    e.target.style.transform = 'translateY(0)';
                    e.target.style.boxShadow = '0 4px 15px rgba(255,107,107,0.4)';
                  }}
                >
                  🎯 無料トライアルを開始
                </button>
              </div>
              
              <div style={{ 
                display: 'flex',
                justifyContent: 'center',
                gap: '20px',
                fontSize: '0.9rem',
                opacity: 0.8,
                color: 'black'
              }}>
                <span>✅ クレジットカード不要</span>
                <span>✅ 30日間無料トライアル</span>
                <span>✅ いつでもキャンセル可能</span>
              </div>
            </div>
          ),
        },
        blockOrder: defaultBlockOrder,
      })}
    </Hero>
  );
}

---

🔧 プロパティリファレンス

メインコンポーネントプロパティ

プロパティ	型	デフォルト	説明
buttonText	string	必須	アクションボタンに表示するテキスト
byline	ReactNode	必須	ヒーローセクションのメインヘッドラインテキスト
imageUrl	string	必須	ヒーローセクションに表示する画像のURL
onClickButton	() => void	必須	アクションボタンがクリックされたときにトリガーされるコールバック関数
secondaryText	ReactNode	undefined	バイラインの下に表示されるセカンダリテキスト
tertiaryText	ReactNode	undefined	アクションボタンの近くに表示されるターシャリテキスト
className	string	undefined	ヒーローコンテナのスタイリング用の追加CSSクラス名
children	BlocksOverride	undefined	デフォルトレンダリングをオーバーライドするカスタムブロックコンポーネント

注意: メインコンポーネントはすべてのHTML div要素プロパティを継承します。

サブコンポーネント

Heroコンポーネントは複数のサブコンポーネントを提供します。すべてのサブコンポーネントは、メインコンポーネントのコンテキストからデフォルト値を受け取り、プロパティを通じてこれらの値をオーバーライドできます。

Hero.HeroImg

プロパティ	型	デフォルト	説明
src	string	コンテキストのimageUrl	表示する画像のURL（コンテキストのimageUrlをオーバーライド）

注意: このコンポーネントはすべてのHTML img要素プロパティを継承します。

Hero.HeroContent

このコンポーネントはコンテナとして機能し、カスタム子要素が提供されない限り、ネストされたコンテンツコンポーネントを自動的にレンダリングします。

注意: このコンポーネントはすべてのHTML div要素プロパティを継承します。

Hero.HeroContent.HeroByline

プロパティ	型	デフォルト	説明
children	ReactNode	コンテキストのbyline	メインヘッドラインとして表示するコンテンツ（コンテキストのbylineをオーバーライド）

注意: このコンポーネントはすべてのHTML h6要素プロパティを継承します。

Hero.HeroContent.SecondaryText

プロパティ	型	デフォルト	説明
children	ReactNode	コンテキストのsecondaryText	セカンダリテキストとして表示するコンテンツ（コンテキストのsecondaryTextをオーバーライド）

注意: このコンポーネントはすべてのHTML h3要素プロパティを継承します。

Hero.HeroContent.ActionButton

プロパティ	型	デフォルト	説明
children	ReactNode	コンテキストのbuttonText	ボタンコンテンツ/テキスト（コンテキストのbuttonTextをオーバーライド）
onClick	() => void	コンテキストのonClickButton	アクションボタンのクリックハンドラー（コンテキストのonClickButtonをオーバーライド）

注意: このコンポーネントはすべてのHTML button要素プロパティを継承します。

Hero.HeroContent.TertiaryText

プロパティ	型	デフォルト	説明
children	ReactNode	コンテキストのtertiaryText	ターシャリテキストとして表示するコンテンツ（コンテキストのtertiaryTextをオーバーライド）

注意: このコンポーネントはすべてのHTML span要素プロパティを継承します。

---

🔧 TypeScriptサポート

包括的な型定義による完全なTypeScriptサポート：

import {Hero} from '@nodeblocks/frontend-hero-block';
import {ComponentProps, ReactNode} from 'react';

// メインコンポーネントインターフェース
interface HeroProps extends Omit<ComponentProps<'div'>, 'children'> {
  buttonText: string;
  byline: ReactNode;
  onClickButton: () => void;
  imageUrl: string;
  secondaryText?: ReactNode;
  tertiaryText?: ReactNode;
  className?: string;
}

// 包括的なヒーロー設定の例
function CustomHero() {
  const handleButtonClick = () => {
    console.log('ヒーローボタンがクリックされました！');
    // ナビゲーションやアクションを処理
  };

  return (
    <Hero
      buttonText="今すぐ始める"
      byline="私たちのプラットフォームでビジネスを変革"
      imageUrl="/assets/hero-image.jpg"
      onClickButton={handleButtonClick}
      secondaryText="業務を効率化し、生産性を向上させます"
      tertiaryText="30日間無料トライアル • クレジットカード不要"
      className="custom-hero-section"
      style={{ minHeight: '600px' }}
      id="hero-section">
      <Hero.HeroContent className="hero-content-custom">
        <div>
          <Hero.HeroContent.HeroByline 
            className="custom-headline"
            style={{ fontSize: '3rem', fontWeight: 'bold' }}
          />
          <Hero.HeroContent.SecondaryText 
            className="custom-subtext"
            style={{ color: '#666', marginTop: '1rem' }}
          />
        </div>
        <div>
          <Hero.HeroContent.ActionButton 
            className="custom-cta-button"
            type="button"
            disabled={false}
          >
            🚀 無料トライアル開始
          </Hero.HeroContent.ActionButton>
          <Hero.HeroContent.TertiaryText 
            className="custom-disclaimer"
            style={{ fontSize: '0.9rem', opacity: 0.8 }}
          />
        </div>
      </Hero.HeroContent>
      <Hero.HeroImg 
        className="hero-image-custom"
        alt="ヒーロー背景画像"
        width={600}
        height={400}
        loading="lazy"
      />
    </Hero>
  );
}

---

React、TypeScript、モダンWebスタンダードを使用して❤️で構築されました。