404.html

---
layout: default
title: "404 - Page Not Found"
description: "The page you were looking for could not be found."
permalink: /404.html
---

<section class="min-h-screen bg-white flex flex-col items-center justify-center px-6 md:px-8">
    <div class="container mx-auto max-w-6xl text-center">
        <div class="space-y-8">
            <!-- 404 Number -->
            <div class="space-y-4">
                <h1 class="text-8xl md:text-9xl font-bold text-gray-200 select-none" style="font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;">
                    404
                </h1>
                <div class="w-24 h-1 bg-gray-300 mx-auto rounded-full"></div>
            </div>

            <!-- Error Message -->
            <div class="space-y-4 max-w-2xl mx-auto">
                <h2 class="text-3xl md:text-4xl font-semibold text-gray-900" style="font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;">
                    Page Not Found
                </h2>
                <p class="text-lg text-gray-600 leading-relaxed" style="font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;">
                    We're sorry, but the page you're looking for doesn't exist. It may have been moved, deleted, or you may have entered the wrong URL.
                </p>
            </div>

            <!-- Helpful Links -->
            <div class="space-y-6 pt-8">
                <div class="flex flex-col sm:flex-row gap-4 justify-center items-center">
                    <a href="{{ '/' | relative_url }}" class="inline-flex items-center space-x-2 bg-gray-900 text-white px-6 py-3 rounded-lg font-medium hover:bg-white hover:text-black border border-black transition-colors" style="font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;">
                        <i data-lucide="home" class="h-4 w-4"></i>
                        <span>Go Home</span>
                    </a>
                    <!-- <a href="{{ '/about/' | relative_url }}" class="inline-flex items-center space-x-2 bg-orange-500 text-white hover:text-orange-500 px-6 py-3 border border-orange-500 hover:bg-white rounded-lg font-medium  transition-colors" style="font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;">
                        <i data-lucide="info" class="h-4 w-4"></i>
                        <span>About Us</span>
                    </a> -->
                </div>

                <!-- Quick Navigation -->
                <div class="pt-8 border-t border-gray-100">
                    <p class="text-sm text-gray-500 mb-4" style="font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;">
                        Or explore these sections:
                    </p>
                    <div class="flex flex-wrap justify-center gap-4 text-sm">
                        <a href="{{ '/open-gin/' | relative_url }}" class="text-gray-600 hover:text-gray-900 transition-colors" style="font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;">
                            OpenGin
                        </a>
                        <span class="text-orange-500">•</span>
                        <a href="{{ '/about/' | relative_url }}" class="text-gray-600 hover:text-gray-900 transition-colors" style="font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;">
                            About Us
                        </a>
                        <span class="text-orange-500">•</span>
                        <a href="{{ '/information-hub/' | relative_url }}" class="text-gray-600 hover:text-gray-900 transition-colors" style="font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;">
                            Information Hub
                        </a>
                        <span class="text-orange-500">•</span>
                        <a href="{{ '/contribute/' | relative_url }}" class="text-gray-600 hover:text-gray-900 transition-colors" style="font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;">
                            Contribute
                        </a>
                        <span class="text-orange-500">•</span>
                        <a href="{{ '/blog/' | relative_url }}" class="text-gray-600 hover:text-gray-900 transition-colors" style="font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif;">
                            Blog
                        </a>
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Initialize Lucide icons
    if (typeof lucide !== 'undefined') {
        lucide.createIcons();
    }
    
    // Optional: Simple search functionality
    const searchInput = document.querySelector('input[placeholder="Search our site..."]');
    const searchButton = document.querySelector('button');
    
    if (searchInput && searchButton) {
        searchButton.addEventListener('click', function() {
            const query = searchInput.value.trim();
            if (query) {
                // Redirect to search page or Google site search
                window.location.href = `{{ '/' | relative_url }}?search=${encodeURIComponent(query)}`;
            }
        });
        
        searchInput.addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                searchButton.click();
            }
        });
    }
});
</script>