Setting hero/splash section as a blog post

I have a hero section on the homepage of my blog that I’d like to be the main post and thereafter more posts with a different styles underneath, see below layout: .

I’m not sure how to really approach this and need some guidance in the best way to port this into WordPress. Here is the code I have so far in my index.php file. I have managed to output the posts below the hero but not sure how to approach the main post in the hero/splash section.

<div id="main">

    <!-- hero starts here --> 

        <div class="hero">
                <div class="hero-wrapper">
                    <div class="article-info">
                        <p class="topic"><a href="">Culture</a></p> 
                        <h1 class="hero-title"><a href="">Title</a></h1>
                    </div>
                </div>
         </div>


    <!-- Hero end here --> 


    <div class="main-container">

     <!-- Posts starts here -->
        <div class="posts">

            <div class="posts__post">
                <article>

                  <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
                    <a class="posts__post--preview" href=""><img src="https://placeimg.com/470/310/tech" /></a>
                    <a class="posts__post--tag" href=""><p>Motivation</p></a>
                    <a class="posts__post--title" href="" ><h1>A Good Autoresponder, some more text here</h1></a>
                    <p class="posts__post--meta"> 10 days ago</p>
                </article>

              <?php endwhile; else : ?>
              <p><?php _e( 'Sorry, no posts matched your criteria.' ); ?></p>
              <?php endif; ?>

            </div>

   </div>

    <!-- Posts ends here -->

    <!-- Main ends here -->

Things i’m thinking about:

1. What happens if I add a new main post? Will the previous post be
   pushed underneath?

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: