$pages_files = [
  'home' => 'home.php',

convert home page for this home.php


  <style>
    @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700&display=swap');

    /* Reset */
    * {
      box-sizing: border-box;
    }

    body, html {
      margin: 0;
      padding: 0;
      height: 100%;
      font-family: 'Poppins', sans-serif;
      background: #0f0f1a;
      display: flex;
      justify-content: center;
      align-items: center;
      overflow: hidden;
      color: white;
    }

    /* 3D Container */
    .hero-section {
      perspective: 1500px;
      perspective-origin: center center;
      width: 100%;
      max-width: 900px;
      padding: 40px 20px;
      text-align: center;
    }

    .hero-inner {
      background: linear-gradient(135deg, #1f2235 0%, #272a40 100%);
      border-radius: 20px;
      padding: 60px 40px 80px;
      box-shadow:
        0 10px 30px rgba(0,0,0,0.8),
        0 0 40px #4455ff88;
      transform-style: preserve-3d;
      animation: float 6s ease-in-out infinite;
    }

    /* Floating animation */
    @keyframes float {
      0%, 100% {
        transform: translateY(0) rotateX(1deg) rotateY(-2deg);
        box-shadow:
          0 10px 30px rgba(0,0,0,0.8),
          0 0 40px #4455ff88;
      }
      50% {
        transform: translateY(-15px) rotateX(-1deg) rotateY(2deg);
        box-shadow:
          0 20px 40px rgba(0,0,0,0.9),
          0 0 60px #4466ffbb;
      }
    }

    /* Hero headline */
    .hero-title {
      font-size: 3.2rem;
      font-weight: 700;
      margin-bottom: 1rem;
      text-shadow:
        0 0 15px #4455ffcc,
        0 2px 5px rgba(0,0,0,0.6);
      letter-spacing: 0.05em;
    }

    .hero-subtitle {
      font-weight: 600;
      font-size: 1.1rem;
      color: #a3a9d1;
      margin-bottom: 40px;
      text-shadow: 0 1px 3px rgba(0,0,0,0.4);
    }

    /* Search bar container */
    .search-bar {
      display: flex;
      justify-content: center;
      align-items: center;
      background:
        linear-gradient(270deg, #4455ff, #00ffc8, #4455ff);
      background-size: 600% 600%;
      animation: gradientShift 12s ease infinite;
      border-radius: 50px;
      padding: 6px;
      box-shadow:
        0 0 15px #4455ff88,
        0 0 20px #00ffc888;
      perspective: 1000px;
      max-width: 600px;
      margin: auto;
      will-change: transform;
      transition: box-shadow 0.3s ease;
    }

    @keyframes gradientShift {
      0% {
        background-position: 0% 50%;
      }
      50% {
        background-position: 100% 50%;
      }
      100% {
        background-position: 0% 50%;
      }
    }

    /* The input with floating 3D effect on focus */
    .search-bar input[type="search"] {
      flex-grow: 1;
      border: none;
      outline: none;
      font-size: 1.25rem;
      padding: 18px 30px;
      border-radius: 50px;
      background: #0f0f1a;
      box-shadow:
        inset 0 0 12px #223355,
        inset 0 1px 8px #4455ff88;
      color: #dde2ff;
      transition:
        all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
      transform-style: preserve-3d;
      transform-origin: left center;
      will-change: transform, box-shadow, color;
      font-weight: 600;
      letter-spacing: 0.03em;
    }

    .search-bar input[type="search"]::placeholder {
      color: #667799aa;
      font-weight: 500;
      transition: color 0.3s ease;
    }

    .search-bar input[type="search"]:focus {
      background: #1a1e3a;
      box-shadow:
        inset 0 0 20px #6677ffcc,
        0 0 15px #4455ffcc;
      color: #e0e7ff;
      letter-spacing: 0.05em;
      transform: scale(1.05) translateZ(30px);
    }

    .search-bar input[type="search"]:focus::placeholder {
      color: transparent;
    }

    /* Search button with 3D pressed effect */
    .search-bar button {
      background: linear-gradient(145deg, #223366, #1c2768);
      border: none;
      outline: none;
      margin-left: 12px;
      padding: 18px 28px;
      border-radius: 50px;
      cursor: pointer;
      font-weight: 700;
      font-size: 1.15rem;
      color: white;
      box-shadow:
        0 6px 9px #112244,
        inset 0 -3px 5px #1a2a5a;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      transition:
        box-shadow 0.3s ease,
        transform 0.15s ease;
      transform-style: preserve-3d;
      position: relative;
      will-change: transform, box-shadow;
      user-select: none;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .search-bar button:hover {
      box-shadow:
        0 9px 12px #3344cc99,
        inset 0 -3px 6px #2a3a8a;
      transform: translateZ(8px) scale(1.05);
    }

    .search-bar button:active {
      box-shadow:
        inset 0 3px 6px #2a3a8a,
        0 0 1px #112244;
      transform: translateZ(2px) scale(0.97);
    }

    /* Search icon for button */
    .search-bar button svg {
      width: 22px;
      height: 22px;
      fill: #dde2ff;
      filter: drop-shadow(0 0 1px #0009);
      transition: transform 0.3s ease;
    }

    .search-bar button:hover svg {
      transform: scale(1.15);
    }

    /* Responsive */
    @media (max-width: 600px) {
      .hero-title {
        font-size: 2.2rem;
      }

      .hero-inner {
        padding: 40px 20px 60px;
      }

      .search-bar input[type="search"] {
        font-size: 1rem;
        padding: 14px 22px;
      }

      .search-bar button {
        padding: 14px 22px;
        font-size: 1rem;
      }
    }

  </style>

<body>
  <section class="hero-section" aria-label="Search Journals">
    <div class="hero-inner" role="banner">
      <h1 class="hero-title">Discover the World of Journals</h1>
      <p class="hero-subtitle">Search across thousands of academic and research journals</p>
      <form class="search-bar" role="search" aria-label="Journal search form" onsubmit="event.preventDefault(); alert('Search submitted. You entered: ' + this.query.value);">
        <input
          type="search"
          name="query"
          placeholder="Search journals, articles, authors..."
          aria-label="Journal search input"
          autocomplete="off"
          required
          spellcheck="false"
          />
        <button type="submit" aria-label="Submit search">
          <svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">
            <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16a6.471 6.471 0 0 0 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0A4.5 4.5 0 1 1 14 9.5 4.5 4.5 0 0 1 9.5 14z"/>
          </svg>
        </button>
      </form>
    </div>
  </section>
</body>