Merge pull request #36 from elijames-codecov/fix-homepage-section-bg-…

…images

Fix homepage section bg images

src/pages/index.astro

@@ -22,11 +22,13 @@ const mobileSectionContentClasses = 'z-10 pt-[1.5rem] pb-[1rem] relative w-12/12
 
 <Layout title="Software Sharing for Modern Companies" seo={seoMeta}>
   <header>
-    <div class="container-spill relative mx-auto flex flex-wrap px-[0.5rem] sm:px-[1rem] md:px-[1.5rem] lg:px-[2rem] xl:px-[1.5rem] 2xl:px-[3.62rem] 3xl:px-[6.62rem] pb-[0.5rem] pb-[1rem]">
-      <div class="relative block lg:absolute lg:right-0 lg:bottom-0 lg:top-0 lg:w-1/2 xl:w-[45%] xl:right-[2rem] 2xl:right-[3.62rem] 3xl:right-0">
-        <Image src={heroImage} alt="hero image" densities={[1, 1.5, 2, 3, 4]} class="relative"/>
+    <div class="container-spill relative mx-auto flex flex-wrap items-stretch px-[0.5rem] sm:px-[1rem] md:px-[1.5rem] lg:px-[2rem] xl:px-[1.5rem] 2xl:px-[3.62rem] 3xl:px-[6.62rem] pb-[0.5rem] pb-[1rem] items-stretch">
+      <div class="relative w-12/12 mx-auto flex lg:w-6/12 lg:h-[100%] lg:order-12">
+        <div class="">
+         <Image src={heroImage} alt="hero image" densities={[1, 2, 3, 4]}/>
+        </div>
       </div>
-      <div class="w-12/12 py-[3rem] lg:w-6/12 lg:py-[8rem] xl:pb-[4rem] xl:pt-[3rem] 2xl:pb-[7.5rem] 2xl:pt-[6rem]">
+      <div class="w-12/12 py-[3rem] h-[100%] lg:w-6/12 lg:py-[8rem] xl:pb-[4rem] xl:pt-[3rem] 2xl:pb-[7.5rem] 2xl:pt-[6rem]">
         <h1 class="text-black mb-4">
           Software Sharing for Modern Companies
         </h1>
@@ -45,15 +47,15 @@ const mobileSectionContentClasses = 'z-10 pt-[1.5rem] pb-[1rem] relative w-12/12
         </section>
     }
     <Section
-      sectionStyles={`${mobileSectionCommonClasses} lg:p-0 lg:items-end justify-end`}
-      backgroundStyling={`${mobileSectionBackgroundImageClasses} ${mobileSectionCenteredBackground} bg-[url('/images/background-images/embraceFairSource.svg')] w-[100%] bg-cover bg-no-repeat bg-top w-full bottom-0 top-0 left-0 right-0 min-h-[20rem] z-0 lg:bottom-0 lg:right-0 lg:left-auto lg:w-[45%] lg:bg-contain lg:top-0 lg:bg-left xl:bg-cover`}
+      sectionStyles={`${mobileSectionCommonClasses} lg:p-0 lg:items-stretch justify-end`}
+      backgroundStyling={`${mobileSectionBackgroundImageClasses} ${mobileSectionCenteredBackground} bg-[url('/images/background-images/embraceFairSource.svg')] w-[100%] bg-cover bg-no-repeat bg-top w-full bottom-0 top-0 left-0 right-0 min-h-[20rem] z-0 lg:right-0 lg:left-auto lg:w-[50%] lg:bg-contain lg:top-0 lg:bg-right lg:bottom-[26%] xl:w-[45%] xl:bottom-0 xl:bg-[position:center_right] xl:bg-contain`}
     >
       <div class="w-12/12 relative mr-[-0.5rem] lg:w-6/12 lg:order-12 overflow-clip lg:overflow-visible">
-        <div class="hidden lg:flex relative h-auto lg:mt-[1.5rem] lg:ml-[3rem] lg:w-[52%] lg:bottom-[8.5rem] lg:left-[6rem] xl:w-[62%] xl:left-[9rem] xl:bottom-[6.5rem] 2xl:bottom-[6rem] 2xl:w-[62%]">
+        <div class="hidden lg:block lg:absolute h-auto lg:w-[50%] top-[25%] left-[25%] h-auto bottom-[25%]">
           <Image src={fairSourceImage} alt="Adopt Fair Source" densities={[1, 1.5, 2, 3, 4]} class="relative w-[100%] h-auto" />
         </div>
       </div>
-      <div class={`${mobileSectionContentClasses} lg:h-full lg:w-6/12 lg:py-[3rem] lg:pr-[3rem] lg:pt-[2rem] xl:w-6/12 xl:pt-[7rem] xl:pl-[4rem] xl:pb-[7rem]`}>
+      <div class={`${mobileSectionContentClasses} lg:h-full lg:w-6/12 lg:py-[3rem] lg:pr-[3rem] lg:pt-[2rem] xl:w-6/12 xl:pt-[3rem] xl:pl-[4rem] xl:pb-[3rem]`}>
         <span class="text-teal tag">Embrace Fair Source</span>
         <h2>Learn how to adopt Fair Source at your company</h2>
         <div class="section-body-spacing">
@@ -64,10 +66,10 @@ const mobileSectionContentClasses = 'z-10 pt-[1.5rem] pb-[1rem] relative w-12/12
     </Section>
 
     <Section
-      sectionStyles={`${mobileSectionCommonClasses} lg:p-0`}
-      backgroundStyling=`${mobileSectionBackgroundImageClasses} ${mobileSectionCenteredBackground} bg-[url('/images/background-images/learnfairsource.svg')] w-[100%] bg-cover bg-no-repeat bg-top w-full bottom-0 top-0 left-0 right-0 min-h-[20rem] z-0 lg:top-[1.5rem] lg:bottom-0 lg:left-0 lg:right-auto lg:w-[45%] lg:bg-center lg:bg-contain xl:bg-cover xl:top-0 xl:bg-left`
+      sectionStyles={`${mobileSectionCommonClasses} lg:p-0 lg:items-stretch`}
+      backgroundStyling=`${mobileSectionBackgroundImageClasses} ${mobileSectionCenteredBackground} bg-[url('/images/background-images/learnfairsource.svg')] w-[100%] bg-cover bg-no-repeat bg-top w-full bottom-0 top-0 left-0 right-0 min-h-[20rem] z-0 lg:top-0 lg:bottom-0 lg:left-0 lg:right-auto lg:w-[45%] lg:bg-center lg:bg-cover lg:bg-right lg:top-0 xl:bg-cover xl:top-0 xl:bg-right`
     >
-      <div class="w-12/12 relative mr-[-0.5rem] lg:w-6/12 lg:order-12 overflow-clip lg:overflow-visible">
+      <div class="w-12/12 relative mr-[-0.5rem] lg:w-6/12 lg:h-[100%] lg:order-12 overflow-clip lg:overflow-visible">
       </div>
       <div class=`${mobileSectionContentClasses} w-12/12 lg:w-1/2 lg:order-12 lg:py-[2rem] xl:py-[7rem]`>
         <span class="tag text-orange">Understand Fair Source</span>