php - Why is paginate_links giving me a blank /page/2 result? -

i have blog roll on homepage of website (on front-page.php) shows 12 posts per "page" - when click on next paginated page, want show next 12 posts in place of first 12.

my loop displays paginated links below blog roll, when click on "page 2" load more posts, brings empty /page/2 page references index.php file.

how fix it's not returning blank page? , there way load next 12 posts in exact place of original 12 on front-page.php layout (and not routing through index.php)?

here's wp_query code:

<?php     $paged = ( get_query_var( 'page' ) ) ? get_query_var( 'page' ) : 1;      // query includes custom post type 'song'     $the_query = new wp_query(array('post_type'=>array('post', 'song')));      if ( $the_query->have_posts() ) :     while ( $the_query->have_posts() ) : $the_query->the_post();   ?>  <div class="jd-box">   <a href="<?php the_permalink(); ?>">     <?php the_post_thumbnail( ); ?>     <div class="jd-overlay"></div>     <div class="jd-overlay-text">       <?php the_title(); ?>     </div>   </a> </div>  <?php endwhile; ?> </section> <?php        $big = 999999999;        $translated = __( 'page', 'mytextdomain' );         echo paginate_links( array(             'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),             'format' => '?paged=%#%',             'current' => max( 1, get_query_var('page') ),             'total' => $the_query->max_num_pages,                   'before_page_number' => '<span class="">'.$translated.' </span>'           ) );        wp_reset_postdata(); ?>  <?php else:  ?> <p><?php _e( 'sorry, no posts matched criteria.' ); ?></p> <?php endif; ?> 

and website right here. ideas?