CCHub Logo CCHub Tailwind Collection
구성 요소 사이트 맵 Industrial_Site_Map_Component

Industrial_Site_Map_Component

따뜻한 중립을 사용하는 산업 디자인 미학이 있는 농업/농업 웹사이트를 위한 사이트 맵 구성 요소입니다. 반응형 레이아웃, 다크 모드 지원 및 대화형 링크 섹션이 특징입니다.

미리 보기

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">

관련 구성 요소

사이트 맵 구성 요소

어두운 UI와 흙색 색 구성표를 사용하는 엔터테인먼트/미디어 플랫폼을 위한 반응형 사이트맵 구성 요소로, 여러 섹션과 바닥글이 있으며 어두운 모드를 지원합니다.

열다

사이트 맵 구성 요소

종이/인쇄물에서 영감을 받은 디자인과 유사한 색 구성표를 갖춘 간단하고 반응이 빠른 사이트 맵 구성 요소로, 다크 모드 지원을 포함하여 제조/산업 웹 사이트에 적합합니다.

열다

사이트 맵 구성 요소

반응형 디자인과 다크 모드를 지원하는 3D 스타일 사이트 맵 구성 요소입니다. 깊이와 참여를 위한 3차원 요소가 특징이며, 무작위 자리 표시자 이미지와 아바타를 사용합니다.

열다