Merge pull request #21 from elijames-codecov/STAT-883-Fair-io-Home-QA…

…-Items Stat 883 fair io home qa items
elijames-codecov · Aug 3, 2024 · 8af379e · 8af379e
2 parents 4b7758c + c3d1fc2
commit 8af379e
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 12 deletions.
diff --git a/src/assets/home/homeHeroImage.png b/src/assets/home/homeHeroImage.png
diff --git a/src/components/Carousel.jsx b/src/components/Carousel.jsx
@@ -40,6 +40,12 @@ const Carousel = ({companies}) => {
     if (carousel !== null && carousel.current !== null) {
       carousel.current.scrollLeft = movement * currentIndex;
     }
+    const carouselWrapper = document.querySelectorAll('.carousel-wrapper')[0];
+    if (currentIndex > 0) {
+      carouselWrapper.classList.add('carousel-wrapper-left');
+    } else {
+      carouselWrapper.classList.remove('carousel-wrapper-left');
+    }
   }, [currentIndex]);
 
   useEffect(() => {
@@ -84,7 +90,7 @@ const Carousel = ({companies}) => {
           </a>
         </div>
       </div>
-      <div className="relative container-spill xl:pl-[3rem]">
+      <div className="relative container-spill xl:pl-[3rem] carousel-wrapper carousel-wrapper-right">
         <div
           ref={carousel}
           className="carousel-container no-scrollbar overflow-auto touch-pan-x relative flex gap-[1rem] scroll-smooth snap-x snap-mandatory z-0"

diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -122,7 +122,7 @@ const canonicalURL = `https://fair.io/${seoSlug}`;
   body {
     overflow-x: clip;
   }
-  .container-spill{
+  .container-spill {
     margin-left: 0;
     width: 100%;
     margin: auto;
@@ -281,4 +281,34 @@ const canonicalURL = `https://fair.io/${seoSlug}`;
   .text-balance {
     white-space: balance;
   }
+  .carousel-wrapper-right::after {
+	  z-index: 1;
+	  content: '';
+	  position: absolute;
+	  top: 0;
+	  right: 0;
+	  width: 8rem;
+	  bottom: 0;
+	  flex-shrink: 0;
+	  background: linear-gradient(
+		  270deg,
+		  #F2F0ED 7.69%,
+		  rgba(31, 22, 51, 0) 92.31%
+	  );
+  }
+  .carousel-wrapper-left::before {
+	  z-index: 1;
+	  content: '';
+	  position: absolute;
+	  top: 0;
+	  left: 0;
+	  width: 8rem;
+	  bottom: 0;
+	  flex-shrink: 0;
+	  background: linear-gradient(
+		  90deg,
+		  #F2F0ED 7.69%,
+		  rgba(31, 22, 51, 0) 92.31%
+	  );
+  }
 </style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -7,6 +7,7 @@ import companies from '../data/companies.json';
 import { Image } from 'astro:assets';
 
 import fairSourceImage from '../assets/home/fairsource.png';
+import heroImage from '../assets/home/homeHeroImage.png';
 
 const seoMeta = {
   description: 'Whether you’re a developer looking to contribute or a business aiming to innovate, we the provide steps to successfully implement Fair Source in your projects. Join the community of ethical and innovative software sharing, balancing collaboration with control for everyone involved.',
@@ -16,9 +17,8 @@ const seoMeta = {
 ---
 
 <Layout title="Software Sharing for Modern Companies" seo={seoMeta}>
-  <header class="relative container-spill md:pl-[1.5rem] lg:pl-[3rem]">
-    <div class="bg-[url('/images/background-images/homeHeroImage.svg')] absolute lg:right-0 lg:top-0 lg:bottom-0 lg:w-1/2 lg:bg-no-repeat" />
-    <div class="relative flex">
+  <header class="relative container-spill md:pl-[1.5rem] lg:pl-[3rem] overflow-x-clip">
+    <div class="relative flex 3xl:pb-[6rem]">
       <div class="w-12/12 lg:w-6/12 lg:py-[7.19rem] flex items-center">
         <div>
           <h1 class="text-black mb-4">
@@ -31,8 +31,9 @@ const seoMeta = {
           </div>
         </div>
       </div>
-      <div class="w-12/12 lg:w-7/12">
-      </div>
+    </div>
+    <div class="absolute w-0 lg:w-[47%] 3xl:w-[48%] top-0 right-0 3xl:top-[-1rem] 3xl:right-[-3rem] 2xl:right-[-1rem] xl:right-[-4rem] xl:top-[2rem] lg:right-[-3.5rem]">
+      <Image src={heroImage} alt="hero image" densities={[1, 1.5, 2, 3, 4]} class="relative"/>
     </div>
   </header>
 	<main>
@@ -41,11 +42,11 @@ const seoMeta = {
         <Carousel companies={companies} client:load client:only="react" />
       </section>
     }
-    <Section sectionStyles="px-[1.5rem] lg:px-[3.5rem]" backgroundStyling="bg-[url('/images/background-images/embraceFairSource.svg')] w-full top-0 left-0 right-0 min-h-[20rem] bottom-[75%] md:bottom-[60%] lg:bottom-[55%] lg:bg-cover xl:bg-no-repeat xl:bg-auto xl:left-1/2 xl:w-1/2 xl:bottom-0 xl:right-0 xl:bg-[right_100%_bottom] 2xl:bg-[right_300%_bottom] 3xl:bg-[90%]">
-      <div class="relative w-12/12 p-[25%] xl:p-[10%] xl:w-1/2 flex justify-center justify-center items-center xl:order-12">
-        <Image src={fairSourceImage} alt="Adopt Fair Source" densities={[1, 1.5, 2, 3, 4]} class="relative px-[5%]" />
+    <Section sectionStyles="px-[1.5rem] lg:px-[3.5rem]" backgroundStyling="bg-[url('/images/background-images/embraceFairSource.svg')] w-full top-0 left-0 right-0 min-h-[20rem] bottom-[75%] md:bottom-[60%] md:left-[8%] md:bg-[right_-200%_bottom] md:bg-no-repeat lg:bottom-[55%] lg:bg-cover xl:bg-no-repeat xl:bg-auto xl:left-1/2 xl:w-1/2 xl:bottom-0 xl:right-0 xl:bg-[right_100%_bottom] 2xl:bottom-0 2xl:bg-[right_280%_bottom] 2xl:scale-[1.0125] 3xl:bg-[right_-140%_bottom]">
+      <div class="relative w-12/12 p-[25%] xl:p-[10%] xl:w-1/2 flex justify-center items-center xl:order-12 lg:p-[25%]">
+        <Image src={fairSourceImage} alt="Adopt Fair Source" densities={[1, 1.5, 2, 3, 4]} class="absolute xl:w-[75%] xl:top-[-4.5rem] xl:left-[7rem] 2xl:w-[65%] 2xl:top-[-3.5rem] 2xl:left-[9.5rem]" />
       </div>
-      <div class="w-12/12 xl:w-1/2 xl:order-1">
+      <div class="relative w-12/12 xl:w-1/2 xl:order-1">
         <div class="py-[3rem] md:py-[3rem] lg:py-[4rem] xl:py-[6rem] 2xl:py-[6.9rem]">
           <span class="text-teal tag">Embrace Fair Source</span>
           <h2>Learn how to adopt Fair Source at your company</h2>
@@ -54,7 +55,7 @@ const seoMeta = {
         </div>
       </div>
     </Section>
-    <Section sectionStyles="px-[1.5rem] lg:px-[3.5rem]" backgroundStyling="bg-[url('/images/background-images/learnfairsource.svg')] w-full top-0 left-0 right-0 min-h-[20rem] bottom-[80%] md:bottom-[60%] lg:bottom-[55%] lg:bg-cover lg:bottom-0 lg:bg-cover xl:h-auto xl:w-1/2 xl:bottom-0 xl:bg-[top-20%_left] xl:h-auto">
+    <Section sectionStyles="px-[1.5rem] lg:px-[3.5rem]" backgroundStyling="bg-[url('/images/background-images/learnfairsource.svg')] w-full top-0 left-[-5rem] right-0 min-h-[20rem] bottom-[80%] md:bottom-[60%] md:bg-no-repeat md:left-[0] lg:bottom-[55%] lg:bg-cover lg:bottom-0 lg:bg-cover xl:h-auto xl:w-1/2 xl:bottom-0 3xl:bg-[top_20%_left] xl:h-auto">
       <div class="w-12/12 xl:w-1/2 h-auto min-h-[20rem] xl:h-full flex items-center justify-center">
         <div class="relative w-1/2 xl:block xl:absolute xl:bottom-0 xl:left-0 xl:w-12/12 xl:w-1/2">
         </div>