{"id":7682,"date":"2026-07-07T23:10:47","date_gmt":"2026-07-07T23:10:47","guid":{"rendered":"https:\/\/demos.ahaplugins.com\/prev-next\/?page_id=7682"},"modified":"2026-07-08T01:43:49","modified_gmt":"2026-07-08T01:43:49","slug":"aha-next-prev-home","status":"publish","type":"page","link":"https:\/\/demos.ahaplugins.com\/prev-next\/","title":{"rendered":"Aha Next Prev &#8211; Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7682\" class=\"elementor elementor-7682\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0f70439 e-con-full e-flex e-con e-parent\" data-id=\"0f70439\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-f5cc438 e-con-full e-flex e-con e-child\" data-id=\"f5cc438\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e488180 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"e488180\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t <style>\r\n    html {\r\n      scroll-behavior: smooth !important;\r\n    }\r\n\r\n    body {\r\n      margin: 0;\r\n      background: #05050c;\r\n      scroll-behavior: smooth !important;\r\n    }\r\n\r\n    \/* Explicit Specificity Override to protect against theme stylesheet styles *\/\r\n    .apn-lp-wrapper h1,\r\n    .apn-lp-wrapper h2,\r\n    .apn-lp-wrapper h3,\r\n    .apn-lp-wrapper h4,\r\n    .apn-lp-wrapper h5,\r\n    .apn-lp-wrapper h6 {\r\n      color: #ffffff !important;\r\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;\r\n    }\r\n\r\n    .apn-lp-wrapper p,\r\n    .apn-lp-wrapper span {\r\n      color: inherit;\r\n    }\r\n\r\n\r\n    \/* ============================================================\r\n       RESET & BASE STYLE\r\n       ============================================================ *\/\r\n    .apn-lp-wrapper,\r\n    .apn-lp-wrapper *,\r\n    .apn-lp-wrapper *::before,\r\n    .apn-lp-wrapper *::after {\r\n      box-sizing: border-box;\r\n      margin: 0;\r\n      padding: 0;\r\n    }\r\n\r\n    .apn-lp-wrapper {\r\n      scroll-behavior: smooth;\r\n      font-size: 16px !important;\r\n    }\r\n\r\n    .apn-lp-wrapper section[id] {\r\n      scroll-margin-top: 80px;\r\n    }\r\n\r\n    .apn-lp-wrapper {\r\n      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;\r\n      background: #05050c !important;\r\n      color: #e2e2ee !important;\r\n      line-height: 1.6 !important;\r\n      overflow-x: hidden;\r\n    }\r\n\r\n    .apn-lp-wrapper a {\r\n      color: inherit !important;\r\n      text-decoration: none !important;\r\n    }\r\n\r\n    \/* ============================================================\r\n       DESIGN TOKENS\r\n       ============================================================ *\/\r\n    :root {\r\n      --cyan: #00f0ff;\r\n      --indigo: #6366f1;\r\n      --bg-dark: #05050c;\r\n      --bg-dark2: #0b0b17;\r\n      --card-dark: rgba(255, 255, 255, 0.03);\r\n      --border-dark: rgba(255, 255, 255, 0.08);\r\n      --muted: #8e90a6;\r\n      --grad: linear-gradient(135deg, #00f0ff 0%, #6366f1 100%);\r\n    }\r\n\r\n    \/* ============================================================\r\n       UTILITIES & LAYOUT\r\n       ============================================================ *\/\r\n    .apn-lp-wrapper .apn-container {\r\n      max-width: 1180px !important;\r\n      margin: 0 auto !important;\r\n      padding: 0 2rem !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-text-grad {\r\n      background: var(--grad) !important;\r\n      -webkit-background-clip: text;\r\n      -webkit-text-fill-color: transparent;\r\n      background-clip: text;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-tag {\r\n      display: inline-flex !important;\r\n      align-items: center !important;\r\n      gap: .45rem !important;\r\n      background: rgba(0, 240, 255, .06) !important;\r\n      border: 1px solid rgba(0, 240, 255, .2) !important;\r\n      color: var(--cyan) !important;\r\n      font-size: .72rem !important;\r\n      font-weight: 700;\r\n      letter-spacing: .14em;\r\n      text-transform: uppercase;\r\n      padding: .4rem 1.1rem !important;\r\n      border-radius: 2rem !important;\r\n      margin-bottom: 1.5rem;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-btn {\r\n      display: inline-flex !important;\r\n      align-items: center !important;\r\n      justify-content: center !important;\r\n      padding: .85rem 1.8rem !important;\r\n      border-radius: .5rem !important;\r\n      font-size: .95rem !important;\r\n      font-weight: 600;\r\n      cursor: pointer;\r\n      transition: all .25s ease;\r\n      border: none !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-btn-primary {\r\n      background: var(--grad) !important;\r\n      color: #05050c !important;\r\n      box-shadow: 0 4px 20px rgba(0, 240, 255, 0.25) !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-btn-primary:hover {\r\n      transform: translateY(-2px);\r\n      box-shadow: 0 6px 25px rgba(0, 240, 255, 0.4) !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-btn-secondary {\r\n      background: rgba(255, 255, 255, 0.05) !important;\r\n      color: #fff !important;\r\n      border: 1px solid var(--border-dark) !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-btn-secondary:hover {\r\n      background: rgba(255, 255, 255, 0.1) !important;\r\n      transform: translateY(-2px);\r\n    }\r\n\r\n    \/* ============================================================\r\n       HEADER\r\n       ============================================================ *\/\r\n    .apn-lp-wrapper .apn-header {\r\n      position: fixed !important;\r\n      top: 0 !important;\r\n      left: 0 !important;\r\n      right: 0 !important;\r\n      height: 80px !important;\r\n      background: rgba(5, 5, 12, 0.75) !important;\r\n      backdrop-filter: blur(12px);\r\n      -webkit-backdrop-filter: blur(12px);\r\n      border-bottom: 1px solid var(--border-dark);\r\n      z-index: 1000;\r\n      display: flex !important;\r\n      align-items: center !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-header .apn-container {\r\n      display: flex !important;\r\n      justify-content: space-between !important;\r\n      align-items: center !important;\r\n      width: 100% !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-logo {\r\n      font-size: 1.45rem !important;\r\n      font-weight: 800;\r\n      letter-spacing: -0.02em;\r\n      display: flex !important;\r\n      align-items: center !important;\r\n      gap: .5rem !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-logo span {\r\n      font-weight: 300;\r\n      color: var(--cyan) !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-nav-links {\r\n      display: flex !important;\r\n      align-items: center !important;\r\n      gap: 2rem !important;\r\n      list-style: none;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-nav-links a {\r\n      font-size: .92rem !important;\r\n      color: var(--muted) !important;\r\n      transition: color .2s;\r\n      font-weight: 500;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-nav-links a:hover {\r\n      color: #fff !important;\r\n    }\r\n\r\n    \/* ============================================================\r\n       HERO SECTION\r\n       ============================================================ *\/\r\n    .apn-lp-wrapper .apn-hero {\r\n      padding: 10rem 0 6rem !important;\r\n      text-align: center;\r\n      position: relative !important;\r\n      overflow: hidden;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-hero::before {\r\n      content: '';\r\n      position: absolute !important;\r\n      top: -30% !important;\r\n      left: 50% !important;\r\n      transform: translateX(-50%);\r\n      width: 600px !important;\r\n      height: 600px !important;\r\n      background: radial-gradient(circle, rgba(99, 102, 241, 0.15) 0%, transparent 70%) !important;\r\n      pointer-events: none;\r\n      z-index: -1;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-hero h1 {\r\n      font-size: 3.5rem !important;\r\n      font-weight: 800;\r\n      line-height: 1.15 !important;\r\n      letter-spacing: -0.03em;\r\n      max-width: 800px !important;\r\n      margin: 0 auto 1.5rem !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-hero p {\r\n      font-size: 1.2rem !important;\r\n      color: var(--muted) !important;\r\n      max-width: 600px !important;\r\n      margin: 0 auto 2.5rem !important;\r\n      font-weight: 400;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-hero-actions {\r\n      display: flex !important;\r\n      justify-content: center !important;\r\n      gap: 1rem !important;\r\n    }\r\n\r\n    \/* ============================================================\r\n       INTERACTIVE DEMO\r\n       ============================================================ *\/\r\n    .apn-lp-wrapper .apn-demo-section {\r\n      padding: 4rem 0 6rem !important;\r\n      background: var(--bg-dark2) !important;\r\n      border-top: 1px solid var(--border-dark);\r\n      border-bottom: 1px solid var(--border-dark);\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-section-title {\r\n      text-align: center;\r\n      margin-bottom: 3.5rem;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-section-title h2 {\r\n      font-size: 2.2rem !important;\r\n      font-weight: 800;\r\n      letter-spacing: -0.02em;\r\n      margin-bottom: .8rem;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-section-title p {\r\n      color: var(--muted) !important;\r\n      font-size: 1.05rem !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-demo-container {\r\n      display: flex !important;\r\n      flex-direction: column !important;\r\n      gap: 1.5rem !important;\r\n      background: #0d0d1f !important;\r\n      border: 1px solid var(--border-dark) !important;\r\n      border-radius: 1rem !important;\r\n      padding: 4rem !important;\r\n      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3) !important;\r\n      position: relative !important;\r\n    }\r\n    @media (max-width: 900px) {\r\n      .apn-lp-wrapper .apn-demo-container {\r\n        padding: 1.25rem !important;\r\n        gap: 1.25rem !important;\r\n      }\r\n    }    .apn-lp-wrapper .apn-demo-position-bar {\r\n      display: flex !important;\r\n      align-items: center !important;\r\n      justify-content: space-between !important;\r\n      gap: 1.5rem !important;\r\n      background: rgba(255, 255, 255, 0.02) !important;\r\n      border: 1px solid rgba(255, 255, 255, 0.04) !important;\r\n      border-radius: 0.75rem !important;\r\n      padding: 1.25rem 2rem !important;\r\n    }\r\n    @media (max-width: 900px) {\r\n      .apn-lp-wrapper .apn-demo-position-bar {\r\n        flex-direction: column !important;\r\n        align-items: flex-start !important;\r\n        gap: 1.25rem !important;\r\n        padding: 1.25rem !important;\r\n      }\r\n    }\r\n    .apn-lp-wrapper .apn-demo-position-bar h3 {\r\n      font-size: .85rem !important;\r\n      text-transform: uppercase;\r\n      letter-spacing: .08em;\r\n      color: var(--muted) !important;\r\n      margin-bottom: 0 !important;\r\n      flex-shrink: 0 !important;\r\n    }\r\n    .apn-lp-wrapper .apn-control-btn-row {\r\n      display: flex !important;\r\n      gap: 1rem !important;\r\n      overflow-x: auto !important;\r\n      scrollbar-width: none !important;\r\n      width: auto !important;\r\n      justify-content: flex-end !important;\r\n    }\r\n    @media (max-width: 900px) {\r\n      .apn-lp-wrapper .apn-control-btn-row {\r\n        width: 100% !important;\r\n        justify-content: flex-start !important;\r\n        padding-bottom: 4px !important;\r\n      }\r\n    }\r\n    .apn-lp-wrapper .apn-control-btn-row::-webkit-scrollbar {\r\n      display: none !important;\r\n    }\r\n    .apn-lp-wrapper .apn-control-btn {\r\n      background: rgba(255, 255, 255, 0.04) !important;\r\n      border: 1px solid rgba(255, 255, 255, 0.05) !important;\r\n      color: #fff !important;\r\n      padding: .65rem 1.2rem !important;\r\n      border-radius: .38rem !important;\r\n      font-size: .88rem !important;\r\n      cursor: pointer;\r\n      transition: all .2s;\r\n      font-weight: 500;\r\n      white-space: nowrap !important;\r\n      flex-shrink: 0 !important;\r\n      text-align: center !important;\r\n    }\r\n    .apn-lp-wrapper .apn-control-btn:hover {\r\n      background: rgba(255, 255, 255, 0.08) !important;\r\n    }\r\n    .apn-lp-wrapper .apn-control-btn.apn-active {\r\n      background: rgba(0, 240, 255, 0.1) !important;\r\n      border-color: rgba(0, 240, 255, 0.3) !important;\r\n      color: var(--cyan) !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .toggle-control {\r\n      display: flex !important;\r\n      align-items: center !important;\r\n      justify-content: space-between !important;\r\n      cursor: pointer;\r\n      user-select: none;\r\n      font-size: .88rem !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .toggle-switch {\r\n      position: relative !important;\r\n      width: 44px !important;\r\n      height: 22px !important;\r\n      background: rgba(255, 255, 255, 0.1) !important;\r\n      border-radius: 12px !important;\r\n      transition: background .2s;\r\n    }\r\n\r\n    .apn-lp-wrapper .toggle-switch::after {\r\n      content: '';\r\n      position: absolute !important;\r\n      top: 2px !important;\r\n      left: 2px !important;\r\n      width: 18px !important;\r\n      height: 18px !important;\r\n      border-radius: 50% !important;\r\n      background: #fff !important;\r\n      transition: transform .2s;\r\n    }\r\n\r\n    .apn-lp-wrapper .toggle-control.apn-active .toggle-switch {\r\n      background: var(--cyan) !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .toggle-control.apn-active .toggle-switch::after {\r\n      transform: translateX(22px);\r\n    }\r\n\r\n    .apn-lp-wrapper .color-picker-row {\r\n      display: flex !important;\r\n      gap: .5rem !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .color-dot {\r\n      width: 32px !important;\r\n      height: 32px !important;\r\n      border-radius: 50% !important;\r\n      border: 2px solid transparent !important;\r\n      cursor: pointer;\r\n      transition: all .2s;\r\n    }\r\n\r\n    .apn-lp-wrapper .color-dot.apn-active {\r\n      border-color: #fff !important;\r\n      transform: scale(1.1);\r\n    }\r\n\r\n    \/* Demo Sandbox screen *\/\r\n    .apn-lp-wrapper .apn-demo-sandbox {\r\n      background: #06060e !important;\r\n      border: 1px solid rgba(255, 255, 255, 0.03) !important;\r\n      border-radius: .75rem !important;\r\n      padding: 2.5rem !important;\r\n      position: relative !important;\r\n      overflow: hidden;\r\n      display: flex !important;\r\n      flex-direction: column !important;\r\n      justify-content: space-between !important;\r\n      min-height: 480px;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-sandbox-article {\r\n      max-width: 600px !important;\r\n      margin: 0 auto !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-sandbox-article h2 {\r\n      font-size: 1.8rem !important;\r\n      font-weight: 700;\r\n      margin-bottom: .8rem;\r\n      color: #fff !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-sandbox-article p {\r\n      color: var(--muted) !important;\r\n      font-size: .92rem !important;\r\n      margin-bottom: .8rem;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-sandbox-divider {\r\n      border: none !important;\r\n      height: 1px !important;\r\n      background: rgba(255, 255, 255, 0.08) !important;\r\n      margin: 2rem 0 !important;\r\n    }\r\n\r\n    \/* Below Content Layout Styles *\/\r\n    .apn-lp-wrapper .apn-demo-nav-below {\r\n      display: flex;\r\n      gap: 1rem !important;\r\n      width: 100% !important;\r\n      justify-content: center;\r\n      align-items: center;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-demo-card {\r\n      background: #151525 !important;\r\n      border-radius: 8px !important;\r\n      padding: 1.2rem !important;\r\n      display: flex !important;\r\n      align-items: center !important;\r\n      gap: 1rem !important;\r\n      transition: transform .25s ease, background .25s ease;\r\n      cursor: pointer;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-demo-card:hover {\r\n      transform: translateY(-2px);\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-demo-thumb {\r\n      width: 64px !important;\r\n      height: 64px !important;\r\n      border-radius: 6px !important;\r\n      object-fit: cover;\r\n      background: #252535 !important;\r\n      flex-shrink: 0;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-demo-text {\r\n      display: flex !important;\r\n      flex-direction: column !important;\r\n      gap: .25rem !important;\r\n      width: 100% !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-demo-label {\r\n      font-size: .68rem !important;\r\n      text-transform: uppercase;\r\n      font-weight: 700;\r\n      color: var(--muted) !important;\r\n      letter-spacing: .08em;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-demo-card-title {\r\n      font-size: .88rem !important;\r\n      font-weight: 600;\r\n      color: #fff !important;\r\n      white-space: nowrap;\r\n      overflow: hidden;\r\n      text-overflow: ellipsis;\r\n      max-width: 180px !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-demo-card-price {\r\n      font-size: .82rem !important;\r\n      font-weight: 700;\r\n      color: #00f0ff !important;\r\n      margin-top: .15rem;\r\n    }\r\n\r\n    \/* ============================================================\r\n       FEATURES SECTION\r\n       ============================================================ *\/\r\n    .apn-lp-wrapper .apn-features {\r\n      padding: 6rem 0 !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-features-grid {\r\n      display: grid !important;\r\n      grid-template-columns: repeat(3, 1fr);\r\n      gap: 2rem !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-feature-card {\r\n      background: var(--card-dark) !important;\r\n      border: 1px solid var(--border-dark) !important;\r\n      border-radius: 1rem !important;\r\n      padding: 2.2rem !important;\r\n      transition: all .25s ease;\r\n      cursor: pointer;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-feature-card:hover {\r\n      border-color: rgba(0, 240, 255, 0.25) !important;\r\n      transform: translateY(-4px);\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-feature-icon {\r\n      width: 44px !important;\r\n      height: 44px !important;\r\n      border-radius: .5rem !important;\r\n      background: rgba(0, 240, 255, 0.08) !important;\r\n      color: var(--cyan) !important;\r\n      display: flex !important;\r\n      align-items: center !important;\r\n      justify-content: center !important;\r\n      font-size: 1.25rem !important;\r\n      margin-bottom: 1.5rem;\r\n      font-weight: 700;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-feature-card h3 {\r\n      font-size: 1.2rem !important;\r\n      font-weight: 700;\r\n      margin-bottom: .8rem;\r\n      color: #fff !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-feature-card p {\r\n      color: var(--muted) !important;\r\n      font-size: .92rem !important;\r\n      line-height: 1.6 !important;\r\n    }\r\n\r\n    \/* ============================================================\r\n       HOW IT WORKS\r\n       ============================================================ *\/\r\n    .apn-lp-wrapper .apn-steps-section {\r\n      padding: 6rem 0 !important;\r\n      background: var(--bg-dark2) !important;\r\n      border-top: 1px solid var(--border-dark);\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-steps-grid {\r\n      display: grid !important;\r\n      grid-template-columns: repeat(3, 1fr);\r\n      gap: 3rem !important;\r\n      position: relative !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-step-card {\r\n      text-align: center;\r\n      position: relative !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-step-num {\r\n      width: 56px !important;\r\n      height: 56px !important;\r\n      border-radius: 50% !important;\r\n      background: rgba(99, 102, 241, 0.1) !important;\r\n      border: 1px solid rgba(99, 102, 241, 0.25) !important;\r\n      color: var(--indigo) !important;\r\n      display: flex !important;\r\n      align-items: center !important;\r\n      justify-content: center !important;\r\n      font-size: 1.4rem !important;\r\n      font-weight: 800;\r\n      margin: 0 auto 1.5rem !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-step-card h3 {\r\n      font-size: 1.15rem !important;\r\n      font-weight: 700;\r\n      margin-bottom: .8rem;\r\n      color: #fff !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-step-card p {\r\n      color: var(--muted) !important;\r\n      font-size: .92rem !important;\r\n    }\r\n\r\n    \/* ============================================================\r\n       FAQ SECTION\r\n       ============================================================ *\/\r\n    .apn-lp-wrapper .apn-faq-section {\r\n      padding: 6rem 0 !important;\r\n      border-top: 1px solid var(--border-dark);\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-faq-list {\r\n      max-width: 720px !important;\r\n      margin: 0 auto !important;\r\n      display: flex !important;\r\n      flex-direction: column !important;\r\n      gap: 1rem !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-faq-item {\r\n      background: var(--card-dark) !important;\r\n      border: 1px solid var(--border-dark) !important;\r\n      border-radius: .75rem !important;\r\n      overflow: hidden;\r\n      transition: border-color .2s;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-faq-item:hover {\r\n      border-color: rgba(255, 255, 255, 0.15) !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-faq-question {\r\n      padding: 1.25rem 1.5rem !important;\r\n      display: flex !important;\r\n      justify-content: space-between !important;\r\n      align-items: center !important;\r\n      cursor: pointer;\r\n      font-weight: 600;\r\n      font-size: .98rem !important;\r\n      color: #fff !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-faq-answer {\r\n      padding: 0 1.5rem 1.25rem !important;\r\n      color: var(--muted) !important;\r\n      font-size: .92rem !important;\r\n      display: none !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-faq-toggle-icon {\r\n      font-size: 1.2rem !important;\r\n      transition: transform .2s;\r\n      color: var(--cyan) !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-faq-item.apn-active .apn-faq-toggle-icon {\r\n      transform: rotate(45deg);\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-faq-item.apn-active .apn-faq-answer {\r\n      display: block !important;\r\n    }\r\n\r\n    \/* ============================================================\r\n       FOOTER\r\n       ============================================================ *\/\r\n    .apn-lp-wrapper .apn-footer {\r\n      border-top: 1px solid var(--border-dark);\r\n      padding: 4rem 0 !important;\r\n      text-align: center;\r\n      background: var(--bg-dark2) !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-footer-logo {\r\n      font-size: 1.3rem !important;\r\n      font-weight: 800;\r\n      margin-bottom: 1.2rem;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-footer-links {\r\n      display: flex !important;\r\n      justify-content: center !important;\r\n      gap: 2rem !important;\r\n      list-style: none;\r\n      margin-bottom: 2rem;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-footer-links a {\r\n      font-size: .9rem !important;\r\n      color: var(--muted) !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-footer-links a:hover {\r\n      color: #fff !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-footer-copy {\r\n      font-size: .8rem !important;\r\n      color: rgba(255, 255, 255, 0.25) !important;\r\n    }\r\n\r\n    \/* ============================================================\r\n       RESPONSIVE\r\n       ============================================================ *\/\r\n    @media (max-width: 900px) {\r\n      .apn-lp-wrapper .apn-container {\r\n        padding: 0 1.25rem !important;\r\n      }\r\n\r\n      .apn-lp-wrapper .apn-features-grid {\r\n        grid-template-columns: 1fr !important;\r\n      }\r\n\r\n      .apn-lp-wrapper .apn-steps-grid {\r\n        grid-template-columns: 1fr !important;\r\n        gap: 2rem !important;\r\n      }\r\n\r\n      .apn-lp-wrapper .apn-hero h1 {\r\n        font-size: 2.2rem !important;\r\n      }\r\n\r\n      .apn-lp-wrapper .apn-nav-links {\r\n        display: none !important;\r\n      }\r\n\r\n      .apn-lp-wrapper .apn-logo {\r\n        font-size: 1.15rem !important;\r\n      }\r\n\r\n      .apn-lp-wrapper .apn-header .apn-btn-secondary {\r\n        padding: .4rem .8rem !important;\r\n        font-size: .75rem !important;\r\n      }\r\n\r\n      .apn-lp-wrapper .apn-hero-actions {\r\n        flex-direction: column !important;\r\n        align-items: stretch !important;\r\n        gap: 0.75rem !important;\r\n      }\r\n\r\n      .apn-lp-wrapper .apn-hero-actions .apn-btn {\r\n        width: 100% !important;\r\n      }\r\n    }    .apn-lp-wrapper .apn-demo-customization-row {\r\n      display: grid !important;\r\n      grid-template-columns: repeat(3, 1fr) !important;\r\n      gap: 1.5rem !important;\r\n      margin-top: 0.5rem !important;\r\n    }\r\n\r\n    @media (max-width: 900px) {\r\n      .apn-lp-wrapper .apn-demo-customization-row {\r\n        grid-template-columns: 1fr !important;\r\n        gap: 1rem !important;\r\n      }\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-customization-card {\r\n      background: rgba(255, 255, 255, 0.02) !important;\r\n      border: 1px solid rgba(255, 255, 255, 0.04) !important;\r\n      border-radius: 0.75rem !important;\r\n      padding: 1.5rem !important;\r\n      display: flex !important;\r\n      gap: 1rem !important;\r\n      align-items: flex-start !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-customization-icon {\r\n      font-size: 1.3rem !important;\r\n      flex-shrink: 0 !important;\r\n      margin-top: 0.1rem !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-customization-text h4 {\r\n      display: block !important;\r\n      font-size: 0.95rem !important;\r\n      font-weight: 700 !important;\r\n      color: #fff !important;\r\n      margin-bottom: 0.25rem !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-customization-text p {\r\n      font-size: 0.82rem !important;\r\n      color: var(--muted) !important;\r\n      line-height: 1.4 !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-demo-cta-box {\r\n      margin-top: 3.5rem !important;\r\n      background: rgba(255, 255, 255, 0.02) !important;\r\n      border: 1px solid rgba(255, 255, 255, 0.05) !important;\r\n      border-radius: 1rem !important;\r\n      padding: 2.5rem !important;\r\n      display: flex !important;\r\n      align-items: center !important;\r\n      justify-content: space-between !important;\r\n      gap: 2rem !important;\r\n      scroll-margin-top: 120px !important;\r\n    }\r\n\r\n    @media (max-width: 900px) {\r\n      .apn-lp-wrapper .apn-demo-cta-box {\r\n        flex-direction: column !important;\r\n        text-align: center !important;\r\n        padding: 2rem !important;\r\n      }\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-demo-cta-text {\r\n      max-width: 600px !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-demo-cta-text h3 {\r\n      font-size: 1.4rem !important;\r\n      font-weight: 700;\r\n      color: #fff !important;\r\n      margin-bottom: 0.5rem !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-demo-cta-text p {\r\n      font-size: 0.95rem !important;\r\n      color: var(--muted) !important;\r\n      line-height: 1.5 !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-demo-cta-buttons {\r\n      display: flex !important;\r\n      gap: 1rem !important;\r\n      flex-shrink: 0 !important;\r\n    }\r\n\r\n    @media (max-width: 600px) {\r\n      .apn-lp-wrapper .apn-demo-cta-buttons {\r\n        flex-direction: column !important;\r\n        width: 100% !important;\r\n      }\r\n\r\n      .apn-lp-wrapper .apn-demo-cta-buttons .apn-btn {\r\n        width: 100% !important;\r\n      }\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-btn-icon {\r\n      margin-right: 0.5rem !important;\r\n    }\r\n\r\n    .apn-lp-wrapper .apn-code-text {\r\n      font-family: monospace !important;\r\n      background: rgba(255, 255, 255, 0.08) !important;\r\n      padding: 0.15rem 0.4rem !important;\r\n      border-radius: 4px !important;\r\n      font-size: 0.9em !important;\r\n      color: var(--cyan) !important;\r\n    }\r\n\r\n    \/* Force transitions even if prefers-reduced-motion is active in the OS *\/\r\n    @media (prefers-reduced-motion: reduce) {\r\n\r\n      .apn-lp-wrapper .apn-btn,\r\n      .apn-lp-wrapper .apn-btn:hover,\r\n      .apn-lp-wrapper .apn-demo-card,\r\n      .apn-lp-wrapper .apn-faq-toggle-icon,\r\n      .apn-lp-wrapper .apn-faq-item,\r\n      .apn-lp-wrapper .apn-control-btn {\r\n        transition-duration: 0.25s !important;\r\n        transition-delay: 0s !important;\r\n      }\r\n    }\r\n  <\/style>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-93c0f60 elementor-widget__width-inherit elementor-widget elementor-widget-html\" data-id=\"93c0f60\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t  <div class=\"apn-lp-wrapper\">\r\n\r\n\r\n    <!-- HEADER -->\r\n    <header class=\"apn-header\">\r\n      <div class=\"apn-container\">\r\n        <a href=\"#\" class=\"apn-logo\">Aha <span>Prev Next<\/span><\/a>\r\n        <ul class=\"apn-nav-links\">\r\n          <li><a href=\"#features\">Features<\/a><\/li>\r\n          <li><a href=\"#live-demos\">Live Demo<\/a><\/li>\r\n          <li><a href=\"#how-it-works\">How It Works<\/a><\/li>\r\n          <li><a href=\"#faq\">FAQ<\/a><\/li>\r\n        <\/ul>\r\n        <a href=\"https:\/\/ahaplugins.com\/product\/aha-prev-next\/\" target=\"_blank\" rel=\"noopener\"\r\n          class=\"apn-btn apn-btn-secondary\" style=\"padding: .5rem 1.2rem; font-size: .85rem;\">\r\n          Download for Free\r\n        <\/a>\r\n      <\/div>\r\n    <\/header>\r\n\r\n    <!-- HERO SECTION -->\r\n    <section class=\"apn-hero\">\r\n      <div class=\"apn-container\">\r\n        <span class=\"apn-tag\">\ud83d\ude80 100% Free WordPress Plugin<\/span>\r\n        <h1>Visual Post Navigation Cards That Boost Engagement<\/h1>\r\n        <p>Replaces default text links with beautiful responsive preview cards. Enhance page transitions, increase\r\n          session time, and reduce bounce rate instantly.<\/p>\r\n        <div class=\"apn-hero-actions\">\r\n          <a href=\"#live-demos\" class=\"apn-btn apn-btn-primary\">See Live Demo<\/a>\r\n          <a href=\"https:\/\/ahaplugins.com\/product\/aha-prev-next\/\" target=\"_blank\" rel=\"noopener\"\r\n            class=\"apn-btn apn-btn-secondary\">Get Free Plugin<\/a>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- INTERACTIVE DEMO -->\r\n    <section id=\"demo\" class=\"apn-demo-section\">\r\n      <div class=\"apn-container\">\r\n        <div class=\"apn-section-title\">\r\n          <h2>Experience the Layout Styles<\/h2>\r\n          <p>Interactive preview sandbox. Click options above to see how navigation cards fit your theme.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"apn-demo-container\">\r\n          <!-- Layout Position Row (Top) -->\r\n          <div class=\"apn-demo-position-bar\">\r\n            <h3>Layout Position<\/h3>\r\n            <div class=\"apn-control-btn-row\">\r\n              <button class=\"apn-control-btn apn-active\" onclick=\"setLayout('below')\">After Content<\/button>\r\n              <button class=\"apn-control-btn\" onclick=\"setLayout('above')\">Before Content<\/button>\r\n              <button class=\"apn-control-btn\" onclick=\"setLayout('woo')\">WooCommerce Hook<\/button>\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- Sandbox Screen (Middle) -->\r\n          <div class=\"apn-demo-sandbox\" id=\"sandbox-screen\">\r\n            <div class=\"apn-sandbox-article\" id=\"demo-article\">\r\n              <h2>The Importance of Inner Linking<\/h2>\r\n              <p>Once a reader completes your article, their next action determines if they stay or leave. Text\r\n                navigation links like \"\u00ab Previous\" are easily missed. Aha Prev Next provides graphical navigation cards\r\n                that naturally draw visual focus and keep readers clicking deeper into your catalog.<\/p>\r\n              <p>Customize card colors, choose thumbnails, restrict lengths, and pick your active layout in minutes.<\/p>\r\n            <\/div>\r\n\r\n            <hr class=\"apn-sandbox-divider\" id=\"demo-divider\">\r\n\r\n            <!-- Below Content Mockup Container -->\r\n            <div class=\"apn-demo-nav-below\" id=\"nav-below\" style=\"width: 100%;\">\r\n              <img decoding=\"async\"\r\n                src=\"https:\/\/demos.ahaplugins.com\/prev-next\/wp-content\/uploads\/sites\/7\/2026\/07\/prev-next-img-post-desktop.png\"\r\n                id=\"demo-cards-image\"\r\n                data-img-posts-desktop=\"https:\/\/demos.ahaplugins.com\/prev-next\/wp-content\/uploads\/sites\/7\/2026\/07\/prev-next-img-post-desktop.png\"\r\n                data-img-posts-mobile=\"https:\/\/demos.ahaplugins.com\/prev-next\/wp-content\/uploads\/sites\/7\/2026\/07\/prev-next-img-post-mobile.png\"\r\n                data-img-products-desktop=\"https:\/\/demos.ahaplugins.com\/prev-next\/wp-content\/uploads\/sites\/7\/2026\/07\/prev-next-product-desktop.png\"\r\n                data-img-products-mobile=\"https:\/\/demos.ahaplugins.com\/prev-next\/wp-content\/uploads\/sites\/7\/2026\/07\/prev-next-product-mobile.png\"\r\n                alt=\"Aha Prev Next Cards Demonstration\"\r\n                style=\"width: 100%; border-radius: 8px; display: block; border: 1px solid rgba(255, 255, 255, 0.08);\">\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <!-- Customization Row (Bottom) -->\r\n          <div class=\"apn-demo-customization-row\">\r\n            <div class=\"apn-customization-card\">\r\n              <span class=\"apn-customization-icon\">\ud83c\udfa8<\/span>\r\n              <div class=\"apn-customization-text\">\r\n                <h4>Custom Colors<\/h4>\r\n                <p>Fully personalize background, title, and label colors to match your brand.<\/p>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"apn-customization-card\">\r\n              <span class=\"apn-customization-icon\">\ud83d\uddbc\ufe0f<\/span>\r\n              <div class=\"apn-customization-text\">\r\n                <h4>Show\/Hide Images<\/h4>\r\n                <p>Choose whether to display post thumbnails on the navigation cards.<\/p>\r\n              <\/div>\r\n            <\/div>\r\n            <div class=\"apn-customization-card\">\r\n              <span class=\"apn-customization-icon\">\ud83d\udecd\ufe0f<\/span>\r\n              <div class=\"apn-customization-text\">\r\n                <h4>WooCommerce Price<\/h4>\r\n                <p>When displaying WooCommerce products, the price is automatically shown.<\/p>\r\n              <\/div>\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n\r\n        <!-- Live Demo Site Links CTA -->\r\n        <div class=\"apn-demo-cta-box\" id=\"live-demos\">\r\n          <div class=\"apn-demo-cta-text\">\r\n            <h3>Want to test the plugin on a live site?<\/h3>\r\n            <p>Visit our live demonstrations to see the cards in action. Select any post or product and navigate through\r\n              them to experience the smooth transitions.<\/p>\r\n          <\/div>\r\n          <div class=\"apn-demo-cta-buttons\">\r\n            <a href=\"https:\/\/demos.ahaplugins.com\/prev-next\/blog\/\" target=\"_blank\" rel=\"noopener\"\r\n              class=\"apn-btn apn-btn-primary\">\r\n              <span class=\"apn-btn-icon\">\u270d\ufe0f<\/span> View Blog Demos (Posts)\r\n            <\/a>\r\n            <a href=\"https:\/\/demos.ahaplugins.com\/prev-next\/store\/\" target=\"_blank\" rel=\"noopener\"\r\n              class=\"apn-btn apn-btn-secondary\">\r\n              <span class=\"apn-btn-icon\">\ud83d\udecd\ufe0f<\/span> View Store Demos (Products)\r\n            <\/a>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- FEATURES -->\r\n    <section id=\"features\" class=\"apn-features\">\r\n      <div class=\"apn-container\">\r\n        <div class=\"apn-section-title\">\r\n          <h2>Features Out of the Box<\/h2>\r\n          <p>Lightweight and powerful navigation. Designed for performance and style.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"apn-features-grid\">\r\n          <div class=\"apn-feature-card\">\r\n            <div class=\"apn-feature-icon\">\ud83d\udcd0<\/div>\r\n            <h3>Two Layout Positions<\/h3>\r\n            <p>Choose inline before-content cards, or after-content cards depending on your post type design needs.<\/p>\r\n          <\/div>\r\n          <div class=\"apn-feature-card\">\r\n            <div class=\"apn-feature-icon\">\ud83d\uddbc\ufe0f<\/div>\r\n            <h3>Post Thumbnail Support<\/h3>\r\n            <p>Pulls in the post's featured image to create highly visual, click-friendly navigational blocks.<\/p>\r\n          <\/div>\r\n          <div class=\"apn-feature-card\">\r\n            <div class=\"apn-feature-icon\">\ud83c\udfa8<\/div>\r\n            <h3>Full Color Controls<\/h3>\r\n            <p>Easily edit backgrounds, post title colors, and labels using pickers directly in the settings page.<\/p>\r\n          <\/div>\r\n          <div class=\"apn-feature-card\">\r\n            <div class=\"apn-feature-icon\">\ud83d\udecd\ufe0f<\/div>\r\n            <h3>WooCommerce Hook support<\/h3>\r\n            <p>Choose a standard WooCommerce product hook position to render links outside of tabs automatically.<\/p>\r\n          <\/div>\r\n          <div class=\"apn-feature-card\">\r\n            <div class=\"apn-feature-icon\">\u26a1<\/div>\r\n            <h3>SEO &amp; Performance Built-in<\/h3>\r\n            <p>Designed lightweight, rendering navigation dynamically with zero complex heavy javascript.<\/p>\r\n          <\/div>\r\n          <div class=\"apn-feature-card\">\r\n            <div class=\"apn-feature-icon\">\ud83e\udde9<\/div>\r\n            <h3>Shortcode Fallback<\/h3>\r\n            <p>Auto-inserts into Posts\/Pages, but also exposes <span\r\n                class=\"apn-code-text\"><span>[<\/span>aha_prev_next<span>]<\/span><\/span> for manually placing links.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- HOW IT WORKS -->\r\n    <section id=\"how-it-works\" class=\"apn-steps-section\">\r\n      <div class=\"apn-container\">\r\n        <div class=\"apn-section-title\">\r\n          <h2>Three Simple Steps<\/h2>\r\n          <p>Aha Prev Next is configured in minutes.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"apn-steps-grid\">\r\n          <div class=\"apn-step-card\">\r\n            <div class=\"apn-step-num\">1<\/div>\r\n            <h3>Install &amp; Activate<\/h3>\r\n            <p>Upload the plugin zip file to your WordPress dashboard and click activate.<\/p>\r\n          <\/div>\r\n          <div class=\"apn-step-card\">\r\n            <div class=\"apn-step-num\">2<\/div>\r\n            <h3>Customize Layout<\/h3>\r\n            <p>Pick your colors, position style, character limits, and select active post types.<\/p>\r\n          <\/div>\r\n          <div class=\"apn-step-card\">\r\n            <div class=\"apn-step-num\">3<\/div>\r\n            <h3>Watch Engagement Grow<\/h3>\r\n            <p>Engagement increases naturally as readers browse successive content pages.<\/p>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- FAQ -->\r\n    <section id=\"faq\" class=\"apn-faq-section\">\r\n      <div class=\"apn-container\">\r\n        <div class=\"apn-section-title\">\r\n          <h2>Frequently Asked Questions<\/h2>\r\n          <p>Have questions about post link cards? Check out the answers below.<\/p>\r\n        <\/div>\r\n\r\n        <div class=\"apn-faq-list\">\r\n          <div class=\"apn-faq-item\">\r\n            <div class=\"apn-faq-question\" onclick=\"toggleFaq(this)\">\r\n              Does this plugin work with custom post types?\r\n              <span class=\"apn-faq-toggle-icon\">+<\/span>\r\n            <\/div>\r\n            <div class=\"apn-faq-answer\">\r\n              Yes. By default, the plugin supports WordPress Posts and Pages. If you have portfolios, directories, or\r\n              WooCommerce products, developers can add support using the <code>aha_prev_next_allowed_post_types<\/code>\r\n              filter.\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"apn-faq-item\">\r\n            <div class=\"apn-faq-question\" onclick=\"toggleFaq(this)\">\r\n              How does it work with WooCommerce?\r\n              <span class=\"apn-faq-toggle-icon\">+<\/span>\r\n            <\/div>\r\n            <div class=\"apn-faq-answer\">\r\n              Aha Prev Next integrates with WooCommerce product pages by letting you choose exactly where links render\r\n              using standard action hooks (like before\/after product details or description tabs). This prevents\r\n              navigation links from appearing inside tabs, and it dynamically displays the product price inside the\r\n              cards!\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"apn-faq-item\">\r\n            <div class=\"apn-faq-question\" onclick=\"toggleFaq(this)\">\r\n              Is there a paid version of the plugin?\r\n              <span class=\"apn-faq-toggle-icon\">+<\/span>\r\n            <\/div>\r\n            <div class=\"apn-faq-answer\">\r\n              No. Aha Prev Next is 100% free with no licenses, subscription keys, or hidden premium limitations. All\r\n              styling variables, layouts, and filters are fully unlocked.\r\n            <\/div>\r\n          <\/div>\r\n\r\n          <div class=\"apn-faq-item\">\r\n            <div class=\"apn-faq-question\" onclick=\"toggleFaq(this)\">\r\n              Can I insert the navigation links manually?\r\n              <span class=\"apn-faq-toggle-icon\">+<\/span>\r\n            <\/div>\r\n            <div class=\"apn-faq-answer\">\r\n              Yes! In addition to automatic insertion, you can place the shortcode <span\r\n                class=\"apn-code-text\"><span>[<\/span>aha_prev_next<span>]<\/span><\/span> inside\r\n              page builder widgets or block templates (like Elementor or Gutenberg) with override parameters.\r\n            <\/div>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/section>\r\n\r\n    <!-- FOOTER -->\r\n    <footer class=\"apn-footer\">\r\n      <div class=\"apn-container\">\r\n        <div class=\"apn-footer-logo\">Aha Prev Next<\/div>\r\n        <ul class=\"apn-footer-links\">\r\n          <li><a href=\"https:\/\/ahaplugins.com\/\" target=\"_blank\" rel=\"noopener\">Aha Plugins Home<\/a><\/li>\r\n          <li><a href=\"https:\/\/ahaplugins.com\/documentation\" target=\"_blank\" rel=\"noopener\">Documentation<\/a><\/li>\r\n          <li><a href=\"https:\/\/ahaplugins.com\/support\" target=\"_blank\" rel=\"noopener\">Support<\/a><\/li>\r\n        <\/ul>\r\n        <p class=\"apn-footer-copy\">\u00a9 2026 Aha Plugins. Distributed under GPLv2 or later.<\/p>\r\n      <\/div>\r\n    <\/footer>\r\n\r\n    <!-- DYNAMIC DEMO SCRIPT -->\r\n    <script>\r\n      let activeLayout = 'below';\r\n\r\n\r\n      function setLayout(layout) {\r\n        activeLayout = layout;\r\n\r\n        const sandbox = document.getElementById('sandbox-screen');\r\n        const article = document.getElementById('demo-article');\r\n        const divider = document.getElementById('demo-divider');\r\n        const navBelow = document.getElementById('nav-below');\r\n        const cardsImage = document.getElementById('demo-cards-image');\r\n\r\n        \/\/ Update control buttons apn-active class\r\n        const btns = document.querySelectorAll('.apn-demo-position-bar .apn-control-btn');\r\n        btns.forEach(btn => btn.classList.remove('apn-active'));\r\n\r\n        const labelText = {\r\n          'above': 'Before Content',\r\n          'below': 'After Content',\r\n          'woo': 'WooCommerce Hook'\r\n        }[layout];\r\n\r\n        btns.forEach(btn => {\r\n          if (btn.textContent.trim() === labelText) {\r\n            btn.classList.add('apn-active');\r\n          }\r\n        });\r\n\r\n        const isMobile = window.innerWidth <= 768;\r\n\r\n        if (layout === 'above') {\r\n          sandbox.insertBefore(navBelow, article);\r\n          sandbox.insertBefore(divider, article);\r\n          divider.style.display = 'block';\r\n          cardsImage.src = cardsImage.getAttribute(isMobile ? 'data-img-posts-mobile' : 'data-img-posts-desktop');\r\n        } else if (layout === 'below') {\r\n          sandbox.appendChild(divider);\r\n          sandbox.appendChild(navBelow);\r\n          divider.style.display = 'block';\r\n          cardsImage.src = cardsImage.getAttribute(isMobile ? 'data-img-posts-mobile' : 'data-img-posts-desktop');\r\n        } else if (layout === 'woo') {\r\n          sandbox.appendChild(divider);\r\n          sandbox.appendChild(navBelow);\r\n          divider.style.display = 'block';\r\n          cardsImage.src = cardsImage.getAttribute(isMobile ? 'data-img-products-mobile' : 'data-img-products-desktop');\r\n        }\r\n      }\r\n\r\n      window.addEventListener('resize', () => {\r\n        setLayout(activeLayout);\r\n      });\r\n\r\n      document.addEventListener('DOMContentLoaded', () => {\r\n        setLayout('below');\r\n      });\r\n\r\n      \/\/ Customization controls simplified, options explained in the info box above\r\n\r\n      function toggleFaq(element) {\r\n        const faqItem = element.parentElement;\r\n        faqItem.classList.toggle('apn-active');\r\n      }\r\n    <\/script>\r\n\r\n  <\/div><!-- .apn-lp-wrapper -->\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Aha Prev Next Features Live Demo How It Works FAQ Download for Free \ud83d\ude80 100% Free WordPress Plugin Visual Post Navigation Cards That Boost Engagement Replaces default text links with beautiful responsive preview cards. Enhance page transitions, increase session time, and reduce bounce rate instantly. See Live Demo Get Free Plugin Experience the Layout Styles [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"full-width-container","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-7682","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/demos.ahaplugins.com\/prev-next\/wp-json\/wp\/v2\/pages\/7682","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/demos.ahaplugins.com\/prev-next\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/demos.ahaplugins.com\/prev-next\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/demos.ahaplugins.com\/prev-next\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/demos.ahaplugins.com\/prev-next\/wp-json\/wp\/v2\/comments?post=7682"}],"version-history":[{"count":34,"href":"https:\/\/demos.ahaplugins.com\/prev-next\/wp-json\/wp\/v2\/pages\/7682\/revisions"}],"predecessor-version":[{"id":7727,"href":"https:\/\/demos.ahaplugins.com\/prev-next\/wp-json\/wp\/v2\/pages\/7682\/revisions\/7727"}],"wp:attachment":[{"href":"https:\/\/demos.ahaplugins.com\/prev-next\/wp-json\/wp\/v2\/media?parent=7682"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}