Бруталистская навигация по нижнему колонтитулу электронной коммерции

<footer class="bg-gray-900 text-purple-200 dark:bg-black dark:text-purple-300 py-12 px-6 font-mono border-t-8 border-purple-600 dark:border-purple-800">
    <div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 lg:grid-cols-5 gap-12">
        
        <!-- About Section -->
        <div class="col-span-1 lg:col-span-2">
            <h3 class="text-3xl font-bold mb-6 text-purple-400">BRUTALIST SHOP</h3>
            <p class="text-lg leading-relaxed mb-6">Unapologetically bold and raw, we bring you an e-commerce experience unlike any other. Industrial aesthetics meet cutting-edge commerce.</p>
            <div class="flex space-x-6">
                <a href="#" class="text-purple-200 hover:text-purple-500 transition duration-300 text-3xl"><i class="fab fa-facebook-f"></i></a>
                <a href="#" class="text-purple-200 hover:text-purple-500 transition duration-300 text-3xl"><i class="fab fa-twitter"></i></a>
                <a href="#" class="text-purple-200 hover:text-purple-500 transition duration-300 text-3xl"><i class="fab fa-instagram"></i></a>
                <a href="#" class="text-purple-200 hover:text-purple-500 transition duration-300 text-3xl"><i class="fab fa-linkedin-in"></i></a>
            </div>
        </div>

        <!-- Navigation Links 1 -->
        <div>
            <h3 class="text-xl font-bold mb-6 text-purple-400">SHOP</h3>
            <ul class="space-y-4 text-lg">
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">New Arrivals</a></li>
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">Bestsellers</a></li>
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">Unisex Collection</a></li>
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">Clearance</a></li>
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">Limited Editions</a></li>
            </ul>
        </div>

        <!-- Navigation Links 2 -->
        <div>
            <h3 class="text-xl font-bold mb-6 text-purple-400">CUSTOMER CARE</h3>
            <ul class="space-y-4 text-lg">
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">Contact Us</a></li>
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">FAQs</a></li>
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">Shipping & Returns</a></li>
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">Order Tracking</a></li>
                <li><a href="#" class="hover:text-purple-500 transition duration-300 border-b border-dashed border-purple-600 pb-1">Privacy Policy</a></li>
            </ul>
        </div>

        <!-- Newsletter Signup & Payment Methods -->
        <div>
            <h3 class="text-xl font-bold mb-6 text-purple-400">STAY RAW</h3>
            <p class="text-lg mb-6">Subscribe for irregular updates and exclusive drops directly to your inbox.</p>
            <form class="flex mb-6">
                <input type="email" placeholder="YOUR EMAIL..." class="px-5 py-3 w-full bg-gray-800 dark:bg-black border-2 border-purple-600 dark:border-purple-800 text-purple-200 dark:text-purple-300 focus:outline-none focus:border-purple-400 placeholder-purple-400" />
                <button type="submit" class="bg-purple-600 hover:bg-purple-700 text-white dark:bg-purple-800 dark:hover:bg-purple-900 px-6 py-3 font-bold transition duration-300 border-2 border-purple-600 dark:border-purple-800">JOIN</button>
            </form>
            
            <h4 class="text-xl font-bold mb-4 text-purple-400">ACCEPTED METHODS</h4>
            <div class="flex flex-wrap gap-4 text-4xl">
                <i class="fab fa-cc-visa text-purple-300"></i>
                <i class="fab fa-cc-mastercard text-purple-300"></i>
                <i class="fab fa-cc-amex text-purple-300"></i>
                <i class="fab fa-paypal text-purple-300"></i>
            </div>
        </div>

    </div>

    <div class="text-center mt-12 pt-8 border-t-4 border-purple-700 dark:border-purple-900 text-purple-400 text-lg">
        <p>&copy; <span id="currentYear"></span> BRUTALIST SHOP. All Rights Reserved. Embrace the Grit.</p>
    </div>
</footer>

<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">