Componenti Mappa del sito Componente Mappa del sito

Componente Mappa del sito

Un componente semplice e reattivo della mappa del sito con un design ispirato alla carta/stampa e una combinazione di colori analoga, adatto per siti Web manifatturieri/industriali, incluso il supporto della modalità scura.

Anteprima

Codice HTML

<section class="font-sans bg-amber-50 dark:bg-gray-900 text-stone-800 dark:text-gray-200 py-12 px-4 sm:px-6 lg:px-8">
  <div class="max-w-6xl mx-auto bg-white dark:bg-gray-800 shadow-xl rounded-lg overflow-hidden border border-amber-200 dark:border-gray-700">
    <div class="p-6 sm:p-8 lg:p-10 border-b border-amber-100 dark:border-gray-700">
      <h2 class="text-3xl sm:text-4xl font-bold tracking-tight text-stone-900 dark:text-gray-100 mb-2 font-serif">Site Overview</h2>
      <p class="text-amber-700 dark:text-gray-400 text-lg sm:text-xl font-medium">Navigate our operational blueprint.</p>
    </div>

    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-y-8 sm:gap-x-6 sm:gap-y-10 p-6 sm:p-8 lg:p-10">

      <!-- Column 1: Company -->
      <div>
        <h3 class="text-xl font-semibold text-amber-700 dark:text-amber-400 mb-4 tracking-wide border-b pb-2 border-dashed border-amber-300 dark:border-gray-600">Company</h3>
        <nav class="space-y-3">
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">About Us</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Our History</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Leadership</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Careers</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Contact Us</a>
        </nav>
      </div>

      <!-- Column 2: Products -->
      <div>
        <h3 class="text-xl font-semibold text-amber-700 dark:text-amber-400 mb-4 tracking-wide border-b pb-2 border-dashed border-amber-300 dark:border-gray-600">Products</h3>
        <nav class="space-y-3">
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Machinery</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Components</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Raw Materials</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Custom Solutions</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Product Catalog</a>
        </nav>
      </div>

      <!-- Column 3: Services -->
      <div>
        <h3 class="text-xl font-semibold text-amber-700 dark:text-amber-400 mb-4 tracking-wide border-b pb-2 border-dashed border-amber-300 dark:border-gray-600">Services</h3>
        <nav class="space-y-3">
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Maintenance</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Installation</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Consulting</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Training</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Support</a>
        </nav>
      </div>

      <!-- Column 4: Resources -->
      <div>
        <h3 class="text-xl font-semibold text-amber-700 dark:text-amber-400 mb-4 tracking-wide border-b pb-2 border-dashed border-amber-300 dark:border-gray-600">Resources</h3>
        <nav class="space-y-3">
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Case Studies</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Blog</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Downloads</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">FAQs</a>
          <a href="#" class="block text-stone-700 dark:text-gray-300 hover:text-amber-800 dark:hover:text-amber-300 transition-colors duration-200 text-base leading-relaxed">Glossary</a>
        </nav>
      </div>

    </div>
  </div>
</section>

Componenti correlati

Componente Mappa del sito

Un componente reattivo della mappa del sito progettato con glassmorphism, caratterizzato da un effetto traslucido smerigliato simile al vetro e sfocatura per un portfolio che mostra lavori o prodotti. Supporta un tema scuro e utilizza colori complementari pur mantenendo una complessità moderata.

Aperto

Componente Mappa del sito

Un componente sitemap reattivo con microinterazioni, combinazione di colori pastello e supporto per temi scuri, adatto per siti Web di e-commerce. Include un'intestazione, una barra di ricerca e diverse categorie con link.

Aperto

Componente Mappa del sito

Un componente della mappa del sito reattivo progettato per la modalità oscura utilizzando colori pastello, adatto per le dashboard.

Aperto