Goal, use react and motion for each page. Each section is going to be its own independant page using react motion to animate.
What I dont understand is how the layout will effect this goal. 



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@700&display=swap" rel="stylesheet">
<style>
</style>
</head>
<body>


<!-- Navbar with Offcanvas for Mobile -->
<nav class="navbar navbar-expand-lg navbar-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">STOB Agency</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>

<div class="collapse navbar-collapse">
<ul class="navbar-nav ms-auto">
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div><!-- .collapse .navbar-collapse -->
</div><!-- .container-fluid -->
</nav>


<!-- Offcanvas menu -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarLabel">Menu</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div><!-- .offcanvas-header -->

<div class="offcanvas-body">
<ul class="navbar-nav">
<li class="nav-item"><a class="nav-link" href="#services">Services</a></li>
<li class="nav-item"><a class="nav-link" href="#portfolio">Portfolio</a></li>
<li class="nav-item"><a class="nav-link" href="#contact">Contact</a></li>
</ul>
</div><!-- .offcanvas-body -->
</div><!-- .offcanvas .offcanvas-start -->


<!-- Header Section with Full Width -->
<header class="container-fluid hero">
<div class="row py-5">

<div class="col-lg-9 hero-left">
<img src="img/agency-02.png" class="img-fluid" alt="Header Image">
<h1 class="caption">Creating Cool Sh*t That Works</h1>
</div><!-- .col-lg-9 .hero-left -->

<div class="col-lg-3 d-none d-md-block hero-right">
<h1>Simple.</h1>
<h1>Effective.</h1>
<h1>No B.S.</h1>
<a href="#contact" class="btn btn-light">Let’s Talk</a>
</div><!-- .col-lg-3 .d-none .d-md-block .hero-right -->

</div><!-- .row .py-5 -->
</header>


<main class="container">


<!-- Services Section -->
<section id="services" class="py-5">
<h2>Services</h2>
<p>Details about the services offered.</p>
</section>


<!-- Portfolio Section -->
<section id="portfolio" class="py-5 bg-light">
<h2>Portfolio</h2>
<p>Showcasing the portfolio here.</p>
</section>


<!-- Contact Form Section -->
<section id="contact" class="py-5">
<h2>Contact Us</h2>
<form>
<div class="mb-3">
<label for="name" class="form-label">Name</label>
<input type="text" class="form-control" id="name" required>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email</label>
<input type="email" class="form-control" id="email" required>
</div>
<div class="mb-3">
<label for="message" class="form-label">Message</label>
<textarea class="form-control" id="message" rows="3" required></textarea>
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</section>


</main>


<!-- Footer -->
<footer class="py-4">
<div class="container text-center"><p>&copy; 2023 Your Company Name. All rights reserved.</p></div>
</footer>


<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>

</body>
</html>