Neumorphic_Industrial_Sitemap

<div class="min-h-screen bg-gray-200 dark:bg-gray-800 p-8 flex items-center justify-center font-sans transition-colors duration-300">
  <div class="container mx-auto p-6 rounded-3xl shadow-neumorphic-light-xl dark:shadow-neumorphic-dark-xl bg-gray-200 dark:bg-gray-800 transition-all duration-300 max-w-7xl relative">

    <!-- Title -->
    <h2 class="text-4xl md:text-5xl font-bold text-gray-700 dark:text-gray-300 mb-10 text-center relative tracking-wide drop-shadow-md pb-4">
      Industrial Site Map
      <span class="absolute bottom-0 left-1/2 -translate-x-1/2 w-24 h-1 rounded-full bg-gray-400 dark:bg-gray-600 shadow-inner-neumorphic-light dark:shadow-inner-neumorphic-dark"></span>
    </h2>

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

      <!-- Column 1: Company -->
      <div class="p-6 rounded-2xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-800 transition-all duration-300">
        <h3 class="text-2xl font-semibold text-gray-700 dark:text-gray-300 mb-4 pb-2 border-b border-gray-300 dark:border-gray-700">Company</h3>
        <ul class="space-y-3">
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">About Us</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Our Mission</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Leadership</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Careers</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">News & Press</a></li>
        </ul>
      </div>

      <!-- Column 2: Products & Services -->
      <div class="p-6 rounded-2xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-800 transition-all duration-300">
        <h3 class="text-2xl font-semibold text-gray-700 dark:text-gray-300 mb-4 pb-2 border-b border-gray-300 dark:border-gray-700">Products & Services</h3>
        <ul class="space-y-3">
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Automation Systems</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Robotics Solutions</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Industrial IoT</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Consulting & Design</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Support & Maintenance</a></li>
        </ul>
      </div>

      <!-- Column 3: Industries -->
      <div class="p-6 rounded-2xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-800 transition-all duration-300">
        <h3 class="text-2xl font-semibold text-gray-700 dark:text-gray-300 mb-4 pb-2 border-b border-gray-300 dark:border-gray-700">Industries Served</h3>
        <ul class="space-y-3">
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Automotive</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Electronics</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Pharmaceutical</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Food & Beverage</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Heavy Machinery</a></li>
        </ul>
      </div>

      <!-- Column 4: Resources & Contact -->
      <div class="p-6 rounded-2xl shadow-neumorphic-light dark:shadow-neumorphic-dark bg-gray-200 dark:bg-gray-800 transition-all duration-300">
        <h3 class="text-2xl font-semibold text-gray-700 dark:text-gray-300 mb-4 pb-2 border-b border-gray-300 dark:border-gray-700">Resources & Contact</h3>
        <ul class="space-y-3">
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Blog</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Case Studies</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Downloads</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">FAQ</a></li>
          <li><a href="#" class="block text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 hover:scale-105 active:shadow-inner-neumorphic-light dark:active:shadow-inner-neumorphic-dark transition-all duration-200 py-1.5 px-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-600">Contact Us</a></li>
        </ul>
      </div>

    </div>

    <!-- Placeholder for an industrial icon/logo (e.g., gear) mimicking neumorphic style -->
    <div class="absolute bottom-8 right-8 w-16 h-16 md:w-20 md:h-20 rounded-full bg-gray-300 dark:bg-gray-700 shadow-neumorphic-light-inverse dark:shadow-neumorphic-dark-inverse flex items-center justify-center pointer-events-none opacity-80">
        <!-- Tailwind doesn't have native icon support, so this is a conceptual placeholder. An SVG would go here. -->
        <svg class="w-10 h-10 md:w-12 md:h-12 text-gray-500 dark:text-gray-400" fill="currentColor" viewBox="0 0 24 24">
            <path d="M12 1L9 5H3L1 11L6 18H18L23 11L21 5H15L12 1ZM12 4.09L13.88 7H10.12L12 4.09ZM5.6 9L7.2 6H16.8L18.4 9H5.6ZM15 15H9V12H15V15ZM6.5 16H17.5L15.5 19H8.5L6.5 16Z"></path>
        </svg>
    </div>

  </div>
</div>

<style>
  /* Base styles for neumorphism shadows */
  .shadow-neumorphic-light {
    box-shadow: 6px 6px 12px #a3b1c6, -6px -6px 12px #ffffff;
  }
  .dark .shadow-neumorphic-dark {
    box-shadow: 6px 6px 12px #3c4046, -6px -6px 12px #26292c;
  }

  .shadow-neumorphic-light-xl {
    box-shadow: 20px 20px 40px #a3b1c6, -20px -20px 40px #ffffff;
  }
  .dark .shadow-neumorphic-dark-xl {
    box-shadow: 20px 20px 40px #3c4046, -20px -20px 40px #26292c;
  }

  /* Inner shadow for active/pressed state */
  .active\:shadow-inner-neumorphic-light:active {
    box-shadow: inset 2px 2px 5px #a3b1c6, inset -2px -2px 5px #ffffff;
  }
  .dark .active\:shadow-inner-neumorphic-dark:active {
    box-shadow: inset 2px 2px 5px #3c4046, inset -2px -2px 5px #26292c;
  }

  /* Inverse shadow for the bottom right element */
  .shadow-neumorphic-light-inverse {
    box-shadow: -6px -6px 12px #a3b1c6, 6px 6px 12px #ffffff;
  }
  .dark .shadow-neumorphic-dark-inverse {
    box-shadow: -6px -6px 12px #3c4046, 6px 6px 12px #26292c;
  }

  /* Custom shadow for the title underline for a subtle recessed look */
  .shadow-inner-neumorphic-light {
    box-shadow: inset 2px 2px 3px #a3b1c6, inset -2px -2px 3px #ffffff;
  }
  .dark .shadow-inner-neumorphic-dark {
    box-shadow: inset 2px 2px 3px #3c4046, inset -2px -2px 3px #26292c;
  }
</style>