사이트 맵 구성 요소
종이/인쇄물에서 영감을 받은 디자인과 유사한 색 구성표를 갖춘 간단하고 반응이 빠른 사이트 맵 구성 요소로, 다크 모드 지원을 포함하여 제조/산업 웹 사이트에 적합합니다.
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>관련 구성 요소
사이트 맵 구성 요소
소셜 미디어 인터페이스를 위한 머티리얼 디자인 스타일의 사이트맵 구성 요소로, Tailwind CSS를 사용하여 응답성과 다크 모드를 지원합니다. 소셜 네트워킹 플랫폼을 위한 어스 톤과 중간 복잡성을 통합합니다.
Neon_Glow_Sports_Sitemap_Component
네온/글로우 효과와 고대비 색상이 있는 간단하고 반응형 사이트맵 구성 요소로, 스포츠/피트니스 애플리케이션에 맞게 조정됩니다. 다크 모드 지원이 포함됩니다.