CCHub Logo CCHub Tailwind Collection
コンポーネント サイトマップ Industrial_Site_Map_Component

Industrial_Site_Map_Component

温かみのあるニュートラルを使用した、工業デザインの美学を備えた農業/農業Webサイト用のサイトマップコンポーネント。レスポンシブレイアウト、ダークモードのサポート、インタラクティブリンクセクションを備えています。

プレビュー

HTMLコード 

<section class="bg-stone-50 text-stone-800 py-16 dark:bg-stone-900 dark:text-stone-200 transition-colors duration-300">
  <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
    <h2 class="text-4xl sm:text-5xl font-extrabold text-center mb-12 uppercase tracking-wide border-b-4 border-b-amber-500 pb-4 dark:border-b-amber-600">
      Site Map
    </h2>

    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">

      <!-- Column 1: Company Info -->
      <div class="bg-white p-8 rounded-lg shadow-xl border-t-4 border-amber-400 dark:bg-stone-800 dark:border-amber-700 transition-all duration-300 transform hover:scale-105">
        <h3 class="text-2xl font-bold mb-6 text-amber-700 dark:text-amber-500 border-b-2 border-stone-200 pb-3 dark:border-stone-700">Our Farm</h3>
        <ul class="space-y-3 ">
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-seedling mr-2 text-amber-500"></i> About Us</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-award mr-2 text-amber-500"></i> Our Heritage</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-tractor mr-2 text-amber-500"></i> Farming Practices</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-users mr-2 text-amber-500"></i> Meet the Team</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-map-marker-alt mr-2 text-amber-500"></i> Contact Us</a></li>
        </ul>
      </div>

      <!-- Column 2: Products & Services -->
      <div class="bg-white p-8 rounded-lg shadow-xl border-t-4 border-amber-400 dark:bg-stone-800 dark:border-amber-700 transition-all duration-300 transform hover:scale-105">
        <h3 class="text-2xl font-bold mb-6 text-amber-700 dark:text-amber-500 border-b-2 border-stone-200 pb-3 dark:border-stone-700">Crops & Goods</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-wheat-alt mr-2 text-amber-500"></i> Grains & Cereals</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-apple-alt mr-2 text-amber-500"></i> Fruits & Vegetables</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-leaf mr-2 text-amber-500"></i> Organic Produce</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-mortar-pestle mr-2 text-amber-500"></i> Processed Goods</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-truck-moving mr-2 text-amber-500"></i> Delivery Services</a></li>
        </ul>
      </div>

      <!-- Column 3: Resources & Insights -->
      <div class="bg-white p-8 rounded-lg shadow-xl border-t-4 border-amber-400 dark:bg-stone-800 dark:border-amber-700 transition-all duration-300 transform hover:scale-105">
        <h3 class="text-2xl font-bold mb-6 text-amber-700 dark:text-amber-500 border-b-2 border-stone-200 pb-3 dark:border-stone-700">Resources</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-newspaper mr-2 text-amber-500"></i> Blog & News</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-book-open mr-2 text-amber-500"></i> Research & Reports</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-cogs mr-2 text-amber-500"></i> Farm Technology</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-question-circle mr-2 text-amber-500"></i> FAQs</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-map mr-2 text-amber-500"></i> Sitemap</a></li>
        </ul>
      </div>

      <!-- Column 4: Legal & Policies -->
      <div class="bg-white p-8 rounded-lg shadow-xl border-t-4 border-amber-400 dark:bg-stone-800 dark:border-amber-700 transition-all duration-300 transform hover:scale-105">
        <h3 class="text-2xl font-bold mb-6 text-amber-700 dark:text-amber-500 border-b-2 border-stone-200 pb-3 dark:border-stone-700">Legal & Privacy</h3>
        <ul class="space-y-3">
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-file-contract mr-2 text-amber-500"></i> Terms of Service</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-user-shield mr-2 text-amber-500"></i> Privacy Policy</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-cookie-bite mr-2 text-amber-500"></i> Cookie Policy</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-gavel mr-2 text-amber-500"></i> Legal Disclaimer</a></li>
          <li><a href="#" class="text-stone-700 hover:text-amber-600 dark:text-stone-300 dark:hover:text-amber-400 transition-colors duration-200 text-lg"><i class="fas fa-sitemap mr-2 text-amber-500"></i> XML Sitemap</a></li>
        </ul>
      </div>

    </div>

    <div class="mt-16 text-center text-stone-600 dark:text-stone-400">
      <p>&copy; 2023 AgroFarm Inc. All rights reserved. Cultivating the future, responsibly.</p>
    </div>
  </div>
</section>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">

関連コンポーネント

サイトマップコンポーネント

Tailwind CSSを使用してダークモードで設計されたレスポンシブサイトマップコンポーネント。

開ける

サイトマップコンポーネント

鮮やかな色とマイクロインタラクション、ダークモードのサポートを備えた、eコマースサイト向けのシンプルでレスポンシブなサイトマップコンポーネント。

開ける

サイトマップコンポーネント

ダークモードUIとレインボーグラデーションアクセントを備えたテクノロジー/ SaaSアプリケーション用のシンプルでレスポンシブなサイトマップコンポーネント。最小限の要素と明確なナビゲーションに最適化されています。

開ける