Setting hero/splash section as a blog post

Code below loop through posts to find a post with ID == 1, then prints it. Second loop show latest 6 posts (hero post will be not shown again because of if block)

<div id="main">

    <!-- hero starts here -->

    <?php
    global $post;
    $args = array("posts_per_page" => -1);
    $the_query = new WP_Query($args);

    while ( $the_query->have_posts() ) :   $the_query->the_post();
      if ($post->ID == 1 ): ?>
        <div class="hero">
          <div class="hero-wrapper">
            <div class="article-info">
              <p class="topic"><a href="https://wordpress.stackexchange.com/questions/239911/">Culture</a></p>
              <h1 class="hero-title"><a href="">Hero post: <?php the_title(); ?></a></h1>
            </div>
          </div>
        </div>
      <?php endif; ?>
    <?php endwhile;

    wp_reset_postdata(); ?>

    <div class="main-container">

   <!-- Posts starts here -->
    <div class="posts">
      <div class="posts__post">
        <?php $args = array("posts_per_page" => 6);
        $the_query = new WP_Query($args);
          while ( $the_query->have_posts() ) :   $the_query->the_post();
            if($post->ID !== 1): ?>
            <article>
              <a class="posts__post--preview" href="https://wordpress.stackexchange.com/questions/239911/"><img src="<?php the_post_thumbnail_url(); ?>"></a>
              <a class="posts__post--title" href="" ><h2>Non hero: <?php the_title(); ?></h2></a>
              <p class="posts__post--excerpt"><?php the_excerpt(); ?></p>
              <?php echo "<p>post ID: " . $post->ID . "</p>"; ?>
            </article>
            <?php endif;
          endwhile; ?>
      </div>

    </div>
  </div>
</div>

P.S. Sorry I misundersood your question, now it should be okay.
P.S.2 You should not edit “index.php” file, if you want to do this right way read about template hierarchy etc.
Useful scheme: