I encountered a strange issue when I used the component separately. Here's how the code looked like:
<>
<Head>
<title>Staycation | Home</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<meta name="description" content="We provide what you need to enjoy your holiday with family. House, Villa, Resort booking administration." />
<meta name="og:title" content="Staycation | Home" />
<meta name="og:description" content="We provide what you need to enjoy your holiday with family. House, Villa, Resort booking administration." />
</Head>
<div className="min-h-screen">
<NavbarComponent />
<HeroSection />
<MostPickedSection />
<CategoriesSection />
<TestimonialSection />
<FooterComponent />
</div>
</>
https://i.sstatic.net/6L8qB.png
However, when I directly included the component without separating it, the results were good:
<Head>
<title>Staycation | Home</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
<meta name="description" content="We provide what you need to enjoy your holiday with family. House, Villa, Resort booking administration." />
<meta name="og:title" content="Staycation | Home" />
<meta name="og:description" content="We provide what you need to enjoy your holiday with family. House, Villa, Resort booking administration." />
</Head>
<div className="min-h-screen">
<NavbarComponent />
<div className="flex flex-col-reverse md:flex-row container-item mt-4 md:mt-16">
<div className="flex flex-col justify-between flex-1">
<div className="flex md:block flex-col items-center">
<h1 className="mt-5 md:mt-0 font-bold text-center md:text-left text-2xl md:text-5xl text-primaryColor" style={{ lineHeight: '170%' }}>
FORGOT BUSY WORK,
<br />
START NEXT VACATION
</h1>
<p className="w-4/5 md:w-2/5 mx-auto md:mx-0 mt-2 font-light text-center md:text-left text-xs md:text-base text-greyColor" style={{ lineHeight: '170%' }}>
We provide what you need to enjoy your holiday with family. Time to make another memorable moments.
</p>
<button type="button" className="w-4/5 md:w-1/3 py-4 md:py-4 mt-3 md:mt-8 md:font-medium text-xs md:text-base rounded-md shadow-2xl transition-all duration-75 hover:opacity-80 text-whiteColor bg-secondaryColor">
Show Me Now
</button>
</div>
<div className="hidden md:flex justify-between items-center w-2/3">
<HeroItem icon="/icons/Travellers.svg" title="10.203" description="Travellers" />
<HeroItem icon="/icons/Treasures.svg" title="781" description="Treasures" />
<HeroItem icon="/icons/Cities.svg" title="1.492" description="Cities" />
</div>
</div>
<div className="flex justify-end flex-1">
<img src="../images/Hero.png" alt="Hero" className="w-full md:w-4/5 mt-2 md:mt-0" />
</div>
</div>
<MostPickedSection />
<CategoriesSection />
<TestimonialSection />
<FooterComponent />
</div>
https://i.sstatic.net/szilo.png
After changing the code back from the non-separated to separated components again (which resulted in a good outcome), I realized the significant difference.
I hope this clarifies the confusion I faced while working on this project.