home.component.html

<div class="flex-col brightness-90 bg-gray-100">
    <div>
        <navbar></navbar>
    </div>
    <div>
        <section class="container mx-auto px-10 p-4 items-center">
            <h2 class="text-4xl font-bold text-center text-gray-800 mb-8">
              The Office US Comedy
            </h2>
            <div class="flex items-center mb-10">
              <div class="w-full md:w-1/2">
                <h4 class="text-3xl text-gray-800 font-bold mb-3 hover:text-red-500 hover:" [routerLink]="['/officeEpisodes']" style="margin: auto; cursor: pointer;">Episodes</h4>
                <p class="text-gray-600 mb-3">Our Website Includes all the Episodes from the US Hit Comedy "The Office". Each Episode includes the Name, Season, Episode Number, Cover Image and a Short Description about the Episode.</p>
              </div>
            </div>
          
            <div class="flex items-center mb-10">
              <div class=" md:w-1/2">
                <h4 class="text-3xl text-gray-800 font-bold mb-3 hover:text-red-500" [routerLink]="['/userProfile']" style="margin: auto; cursor: pointer;">Users</h4>
                <p class="text-gray-600 mb-3">Sign up to be able to Leave Reviews on any Episode of your Choice. You can also Access your Profile once you Sign up.</p>
              </div>
            </div>
          
            <div class="flex items-center mb-10">
                <div class="w-full md:w-1/2">
                    <h4 class="text-3xl text-gray-800 font-bold mb-3">Reviews</h4>
                    <p class="text-gray-600 mb-3">Each episode includes reviews left by other users. Have an opinion on an episode? Sign up and Leave your Own Review. If you Change your Mind you can always Delete or Update the Review</p>
                </div>  
            </div>
          </section>
    </div>
    <footer></footer>
</div>