404.html

---
layout: default
title: Page Not Found
permalink: /404.html
---

<div class="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
  <!-- Hero Section -->
  <div class="relative overflow-hidden">
    <div class="absolute inset-0 bg-grid-slate-100 [mask-image:linear-gradient(0deg,#fff,rgba(255,255,255,0.6))] dark:bg-grid-slate-700/25 dark:[mask-image:linear-gradient(0deg,rgba(255,255,255,0.1),rgba(255,255,255,0.5))]"></div>
    <div class="relative px-4 py-16 sm:px-6 sm:py-24 lg:py-32 lg:px-8">
      <div class="mx-auto max-w-2xl text-center">
        <!-- Animated 404 -->
        <div class="mb-8">
          <div class="text-8xl sm:text-9xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent animate-pulse">
            404
          </div>
          <div class="text-2xl sm:text-3xl font-semibold text-slate-900 mt-4">
            Page Not Found
          </div>
        </div>
        
        <!-- Description -->
        <p class="text-lg text-slate-600 mb-8 max-w-xl mx-auto">
          The page you're looking for doesn't exist or has been moved. Let's help you find what you need.
        </p>
        
        <!-- Search Box -->
        <div class="mb-8">
          <div class="relative max-w-md mx-auto">
            <input 
              type="text" 
              id="404-search" 
              placeholder="Search for resources..."
              class="w-full px-4 py-3 pl-12 text-slate-900 bg-white border-2 border-slate-200 rounded-xl focus:border-blue-500 focus:outline-none focus:ring-4 focus:ring-blue-500/20 transition-all duration-200"
            >
            <div class="absolute inset-y-0 left-0 flex items-center pl-4">
              <svg class="w-5 h-5 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
              </svg>
            </div>
          </div>
          <div id="search-suggestions" class="mt-2 text-sm text-slate-500"></div>
        </div>
        
        <!-- Quick Actions -->
        <div class="flex flex-col sm:flex-row gap-4 justify-center mb-12">
          <a href="/" class="inline-flex items-center px-6 py-3 bg-blue-600 text-white font-semibold rounded-xl hover:bg-blue-700 transition-colors duration-200 shadow-lg hover:shadow-xl">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"></path>
            </svg>
            Go Home
          </a>
          <a href="/en-US/categories/" class="inline-flex items-center px-6 py-3 bg-white text-blue-600 font-semibold rounded-xl border-2 border-blue-600 hover:bg-blue-50 transition-colors duration-200">
            <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"></path>
            </svg>
            Browse Categories
          </a>
        </div>
      </div>
    </div>
  </div>
  
  <!-- Helpful Links Section -->
  <div class="px-4 py-16 mx-auto max-w-7xl sm:px-6 lg:px-8">
    <div class="text-center mb-12">
      <h2 class="text-3xl font-bold text-slate-900 mb-4">Popular Destinations</h2>
      <p class="text-slate-600">Discover our most visited resources and categories</p>
    </div>
    
    <!-- Categories Grid -->
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
      <!-- Academics -->
      <a href="/en-US/academics/" class="group block p-6 bg-white rounded-xl shadow-sm border-2 border-slate-200 hover:border-blue-300 hover:shadow-lg transition-all duration-200">
        <div class="flex items-center mb-4">
          <div class="p-3 bg-blue-100 rounded-lg group-hover:bg-blue-200 transition-colors duration-200">
            <svg class="w-6 h-6 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l9-5-9-5-9 5 9 5z"></path>
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 14l6.16-3.422a12.083 12.083 0 01.665 6.479A11.952 11.952 0 0012 20.055a11.952 11.952 0 00-6.824-2.998 12.078 12.078 0 01.665-6.479L12 14z"></path>
            </svg>
          </div>
          <h3 class="ml-4 text-lg font-semibold text-slate-900">Academics</h3>
        </div>
        <p class="text-sm text-slate-600">Research, publications, and academic resources</p>
      </a>
      
      <!-- Business -->
      <a href="/en-US/business/" class="group block p-6 bg-white rounded-xl shadow-sm border-2 border-slate-200 hover:border-green-300 hover:shadow-lg transition-all duration-200">
        <div class="flex items-center mb-4">
          <div class="p-3 bg-green-100 rounded-lg group-hover:bg-green-200 transition-colors duration-200">
            <svg class="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"></path>
            </svg>
          </div>
          <h3 class="ml-4 text-lg font-semibold text-slate-900">Business</h3>
        </div>
        <p class="text-sm text-slate-600">Entrepreneurship, finance, and management</p>
      </a>
      
      <!-- Development -->
      <a href="/en-US/development/" class="group block p-6 bg-white rounded-xl shadow-sm border-2 border-slate-200 hover:border-purple-300 hover:shadow-lg transition-all duration-200">
        <div class="flex items-center mb-4">
          <div class="p-3 bg-purple-100 rounded-lg group-hover:bg-purple-200 transition-colors duration-200">
            <svg class="w-6 h-6 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"></path>
            </svg>
          </div>
          <h3 class="ml-4 text-lg font-semibold text-slate-900">Development</h3>
        </div>
        <p class="text-sm text-slate-600">Programming, frameworks, and development tools</p>
      </a>
      
      <!-- Design -->
      <a href="/en-US/design/" class="group block p-6 bg-white rounded-xl shadow-sm border-2 border-slate-200 hover:border-pink-300 hover:shadow-lg transition-all duration-200">
        <div class="flex items-center mb-4">
          <div class="p-3 bg-pink-100 rounded-lg group-hover:bg-pink-200 transition-colors duration-200">
            <svg class="w-6 h-6 text-pink-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 21a4 4 0 01-4-4V5a2 2 0 012-2h4a2 2 0 012 2v12a4 4 0 01-4 4zm0 0h12a2 2 0 002-2v-4a2 2 0 00-2-2h-2.343M11 7.343l1.657-1.657a2 2 0 012.828 0l2.829 2.829a2 2 0 010 2.828l-8.486 8.485M7 17v4a2 2 0 002 2h4M11 7h6"></path>
            </svg>
          </div>
          <h3 class="ml-4 text-lg font-semibold text-slate-900">Design</h3>
        </div>
        <p class="text-sm text-slate-600">UI/UX, graphics, and design resources</p>
      </a>
    </div>
    
    <!-- Additional Help -->
    <div class="bg-slate-900 rounded-2xl p-8 text-center">
      <h3 class="text-2xl font-bold text-white mb-4">Still can't find what you're looking for?</h3>
      <p class="text-slate-300 mb-6 max-w-2xl mx-auto">
        Our community is here to help. Report this issue or suggest new content to make our library even better.
      </p>
      <div class="flex flex-col sm:flex-row gap-4 justify-center">
        <a href="/en-US/report-issues/" class="inline-flex items-center px-6 py-3 bg-white text-slate-900 font-semibold rounded-xl hover:bg-slate-100 transition-colors duration-200">
          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.728-.833-2.498 0L4.316 15.5c-.77.833.192 2.5 1.732 2.5z"></path>
          </svg>
          Report Issue
        </a>
        <a href="/en-US/contribute/" class="inline-flex items-center px-6 py-3 bg-blue-600 text-white font-semibold rounded-xl hover:bg-blue-700 transition-colors duration-200">
          <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"></path>
          </svg>
          Suggest Content
        </a>
      </div>
    </div>
  </div>
</div>

<!-- Interactive Search Script -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  const searchInput = document.getElementById('404-search');
  const suggestions = document.getElementById('search-suggestions');
  
  // Popular search terms
  const popularTerms = [
    'JavaScript tutorials',
    'Business templates',
    'Design tools',
    'Academic papers',
    'Marketing guides',
    'Programming courses'
  ];
  
  searchInput.addEventListener('input', function() {
    const query = this.value.toLowerCase();
    if (query.length > 2) {
      const matches = popularTerms.filter(term => 
        term.toLowerCase().includes(query)
      );
      
      if (matches.length > 0) {
        suggestions.innerHTML = `Suggested: ${matches.slice(0, 3).join(', ')}`;
      } else {
        suggestions.innerHTML = 'Try searching for: tutorials, tools, courses, guides';
      }
    } else {
      suggestions.innerHTML = '';
    }
  });
  
  searchInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
      const query = encodeURIComponent(this.value);
      window.location.href = `/en-US/search/?q=${query}`;
    }
  });
});
</script>