Composants Plan du site Industrial_Site_Map_Component

Industrial_Site_Map_Component

Un composant de plan de site pour les sites Web agricoles/agricoles avec une esthétique de design industriel, utilisant des neutres chauds. Dispose d’une mise en page réactive, d’une prise en charge du mode sombre et de sections de liens interactifs.

Aperçu

HTML Code

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

Composants associés

Composant de plan du site

Un composant de plan de site réactif conçu selon les principes de Material Design, avec des mises en page basées sur une grille, des ombres et la prise en charge du mode sombre.

Ouvrir

Composant de plan du site

Un composant de plan de site de style rétro/vintage avec des effets réactifs et une prise en charge du thème sombre.

Ouvrir

Composant de plan du site

Composant de plan de site avec design minimaliste/plat, effets réactifs et prise en charge du thème sombre.

Ouvrir