<Content
  title="私たちのサービス"
  subtitle="お客様の満足を追求"
  tagline="品質と信頼性"
  content="<p>私たちは品質と信頼性を最優先に考えています。</p>"
  callToAction={{
    text: '詳細を見る',
    href: '/details'
  }}
  items={[
    {
      title: '高品質なサービス',
      description: '私たちのサービスは業界最高水準です。'
    },
    {
      title: '顧客満足',
      description: 'お客様のニーズに応えるために努力しています。'
    }
  ]}
  columns={2}
  image={{
    src: '/images/content.jpg',
    alt: 'コンテンツ画像'
  }}
  isReversed={false}
  isAfterContent={true}
/>

<Features
  id="features-section"
  title="私たちのサービス"
  subtitle="最高の機能を提供"
  tagline="私たちが提供する特別なサービス"
  items={[
    {
      title: '高速かつ安定',
      description: '高速なロード時間と最適化されたパフォーマンス。',
      icon: 'tabler:speedboat'
    },
    {
      title: 'レスポンシブデザイン',
      description: 'すべてのデバイスで完璧に表示されるデザイン。',
      icon: 'tabler:device-desktop'
    }
  ]}
  columns={2}
  defaultIcon="tabler:circle-check"
  isDark={false}
  classes={{ container: 'my-custom-class' }}
  bg="#f0f0f0"
/>

<Features2
  id="features2-section"
  title="私たちの特徴"
  subtitle="私たちが提供するもの"
  tagline="特別なサービス"
  items={[
    {
      title: '迅速な対応',
      description: '迅速かつ効率的なサービス提供。',
      icon: 'tabler:alarm'
    },
    {
      title: '革新的なソリューション',
      description: '最新の技術を駆使したソリューション。',
      icon: 'tabler:atom'
    },
    {
      title: '顧客重視',
      description: '顧客のニーズに合わせたカスタマイズ。',
      icon: 'tabler:award'
    }
  ]}
  columns={3}
  defaultIcon="tabler:circle-check"
  isDark={false}
  classes={{ container: 'my-custom-class' }}
  bg="#f0f0f0"
/>

<Features3
  title="革新的な特徴"
  subtitle="最先端のテクノロジー"
  tagline="未来を形作る"
  items={[
    {
      title: '特徴1',
      description: '説明1',
      icon: 'tabler:check'
    },
    {
      title: '特徴2',
      description: '説明2',
      icon: 'tabler:check'
    }
  ]}
  image={{
    src: '/images/feature3-image.png',
    alt: 'カラフルなイメージ'
  }}
  columns={3}
  defaultIcon="tabler:check"
  isBeforeContent={false}
  isAfterContent={true}
  bg={{
    src: '/images/features3-bg.jpg',
    alt: '背景画像'
  }}
/>

<Hero
  id="hero-section"
  title="ウェルカム トゥ アワ サイト"
  subtitle="あなたの旅はここから始まります"
  tagline="次世代のウェブ体験"
  content="<p>ここに詳細な説明を入れます。</p>"
  actions={[
    {
      text: 'もっと見る',
      href: '/about',
      variant: 'primary'
    }
  ]}
  image={{
    src: '/images/hero.jpg',
    alt: 'ヒーロー画像'
  }}
/>

<Hero2
  title={<Fragment slot="title">ウェルカム トゥ アワ サイト</Fragment>}
  subtitle={<Fragment slot="subtitle">あなたの旅はここから始まります</Fragment>}
  tagline="次世代のウェブ体験"
  content={<Fragment slot="content"><p>ここに詳細な説明を入れます。</p></Fragment>}
  actions={[
    {
      text: 'もっと見る',
      href: '/about',
      variant: 'primary'
    }
  ]}
  image={{
    src: '/images/hero.jpg',
    alt: 'ヒーロー画像'
  }}
/>

<HeroText
  title="ウェルカム トゥ アワ サイト"
  subtitle="あなたの旅はここから始まります"
  tagline="次世代のウェブ体験"
  content="<p>ここに詳細な説明を入れます。</p>"
  callToAction={{
    text: 'もっと見る',
    href: '/about'
  }}
/>

<Steps
  id="steps-section"
  title="スタートガイド"
  subtitle="初めての方へ"
  tagline="簡単な3ステップ"
  items={[
    {
      title: 'ステップ1: 登録',
      description: '無料でアカウントを作成します。',
      icon: 'tabler:user-plus'
    },
    {
      title: 'ステップ2: 設定',
      description: 'プロフィール情報を設定します。',
      icon: 'tabler:settings'
    },
    {
      title: 'ステップ3: 開始',
      description: 'サービスを利用し始めます。',
      icon: 'tabler:play'
    }
  ]}
  image={{
    src: '/images/steps.jpg',
    alt: 'ステップ画像'
  }}
  isReversed={false}
/>

<Steps2
  title="お問い合わせプロセス"
  subtitle="お気軽にお問い合わせください"
  tagline="簡単3ステップでお問い合わせ"
  items={[
    {
      title: 'ステップ1: フォーム入力',
      description: '必要情報をフォームに入力してください。',
      icon: 'tabler:edit'
    },
    {
      title: 'ステップ2: 内容確認',
      description: '入力内容を確認してください。',
      icon: 'tabler:check'
    },
    {
      title: 'ステップ3: 送信',
      description: 'フォームを送信して完了です。',
      icon: 'tabler:send'
    }
  ]}
  callToAction={{
    text: 'お問い合わせ',
    href: '/contact'
  }}
  isReversed={false}
/>

<CallToAction
  title={<Fragment slot="title">アクションを起こす</Fragment>}
  subtitle={<Fragment slot="subtitle">今すぐ始めよう</Fragment>}
  tagline="特別オファー"
  actions={[
    {
      text: '詳細はこちら',
      href: '/details',
      variant: 'primary'
    }
  ]}
  bg={{
    src: '/images/cta-bg.jpg',
    alt: '背景画像'
  }}
/>

<FAQs
  title="よくある質問"
  subtitle="ご不明点を解消しましょう"
  tagline="お客様からの一般的な質問"
  items={[
    {
      title: '商品の返品方法は？',
      description: '商品到着後30日以内であれば、無条件で返品が可能です。'
    },
    {
      title: '支払い方法にはどのようなものがありますか？',
      description: 'クレジットカード、PayPal、銀行振込をご利用いただけます。'
    }
  ]}
  columns={2}
  bg={{
    src: '/images/faq-bg.jpg',
    alt: '背景画像'
  }}
/>

<Testimonials
  title="お客様の声"
  subtitle="私たちを選んだ理由"
  tagline="実際のユーザーの体験談"
  testimonials={[
    {
      testimonial: 'この製品は私の日常を変えました。非常に使いやすく、効果的です。',
      name: '山田太郎',
      job: 'マーケティングマネージャー',
      image: {
        src: '/images/user1.jpg',
        alt: '山田太郎'
      }
    },
    {
      testimonial: 'サービスの質に満足しています。顧客サポートも素晴らしい。',
      name: '佐藤花子',
      job: '起業家',
      image: {
        src: '/images/user2.jpg',
        alt: '佐藤花子'
      }
    }
  ]}
  callToAction={{
    text: 'もっと声を聞く',
    href: '/testimonials'
  }}
  bg={{
    src: '/images/testimonials-bg.jpg',
    alt: '背景画像'
  }}
/>

<Contact
  title="お問い合わせ"
  subtitle="ご質問やコメントはこちら"
  tagline="お気軽にご連絡ください"
  inputs={[
    {
      type: 'text',
      name: 'name',
      placeholder: 'お名前'
    },
    {
      type: 'email',
      name: 'email',
      placeholder: 'メールアドレス'
    }
  ]}
  textarea={{
    name: 'message',
    placeholder: 'メッセージ'
  }}
  disclaimer="個人情報の取り扱いについて"
  button={{
    text: '送信'
  }}
  description="24時間以内にご返信いたします。"
/>

<Brands
  title="パートナーブランド"
  subtitle="私たちと協力する企業"
  tagline="信頼と協力"
  icons={[
    { name: 'brand1' },
    { name: 'brand2' }
  ]}
  images={[
    { src: '/images/logo1.png', alt: 'ブランド1' },
    { src: '/images/logo2.png', alt: 'ブランド2' }
  ]}
  isDark={false}
  classes={{ container: 'my-custom-class' }}
  bg={{
    src: '/images/brands-bg.jpg',
    alt: '背景画像'
  }}
/>

<Pricing
  title="プランと価格"
  subtitle="あなたにぴったりのプランを選ぼう"
  tagline="お得なオプションをご用意"
  prices={[
    {
      title: 'ベーシック',
      price: '9.99',
      period: '月額',
      features: ['機能1', '機能2'],
      callToAction: {
        text: '選ぶ',
        href: '/buy-basic'
      }
    },
    {
      title: 'プレミアム',
      price: '19.99',
      period: '月額',
      features: ['機能1', '機能2', '機能3'],
      callToAction: {
        text: '選ぶ',
        href: '/buy-premium'
      }
    }
  ]}
  bg={{
    src: '/images/pricing-bg.jpg',
    alt: '背景画像'
  }}
/>

<Stats
  title="私たちの成果"
  subtitle="数字で見る成功のストーリー"
  tagline="成長と実績"
  stats={[
    {
      amount: '10K+',
      title: 'ユーザー数',
      icon: 'tabler:user'
    },
    {
      amount: '98%',
      title: '顧客満足度',
      icon: 'tabler:thumbs-up'
    },
    {
      amount: '50+',
      title: '提携企業',
      icon: 'tabler:building'
    }
  ]}
  bg={{
    src: '/images/stats-bg.jpg',
    alt: '背景画像'
  }}
/>

<Note
  text="新しいアップデートがあります！"
  icon="tabler:alert-circle"
/>

<Announcement
  title="重要なお知らせ"
  content="<p>新製品がリリースされました！</p>"
  actions={[
    {
      text: '詳細を見る',
      href: '/new-product',
      variant: 'primary'
    }
  ]}
  bg={{
    src: '/images/announcement-bg.jpg',
    alt: '背景画像'
  }}
/>

<Header
  id="header"
  links={[
    { text: 'ホーム', href: '/' },
    { text: '製品', href: '/products' },
    { text: 'サービス', href: '/services' }
  ]}
  actions={[
    { text: 'お問い合わせ', href: '/contact' }
  ]}
  isSticky={true}
  isDark={false}
  isFullWidth={false}
  showToggleTheme={false}
  showRssFeed={false}
/>

<Footer
  links={[
    {
      title: '製品',
      links: [{ text: '新製品', href: '/new-products' }]
    },
    {
      title: '企業情報',
      links: [{ text: '私たちについて', href: '/about' }]
    }
  ]}
  secondaryLinks={[
    { text: 'プライバシーポリシー', href: '/privacy' },
    { text: '利用規約', href: '/terms' }
  ]}
  socialLinks={[
    { icon: 'tabler:facebook', href: '<https://facebook.com>' },
    { icon: 'tabler:twitter', href: '<https://twitter.com>' }
  ]}
  footNote="© 2024 My Website"
  theme="dark"
/>