Merge pull request #32 from elijames-codecov/STAT-899-companies-hero-…

…image

STAT-899 companies hero image

src/layouts/Layout.astro

@@ -277,7 +277,6 @@ const canonicalURL = `https://fair.io/${seoSlug}`;
 
   a.emphasized.branded {
     color: white;
-    font-size: 22px;
     font-weight: 500;
     padding: 0.25rem 1.1875rem 0.4375rem 0.75rem;
     line-height: 1.7875rem;
@@ -296,14 +295,30 @@ const canonicalURL = `https://fair.io/${seoSlug}`;
   }
   a.emphasized.github::before {
     content: url('/images/icons/gitHub-logo.svg');
-    transform: translateY(4px);
+    transform: translateY(7px);
   }
   a.emphasized.twitter {
     background-color: #1E1E1E;
   }
   a.emphasized.twitter:before {
     content: url('/images/icons/twitter-logo.svg');
-    transform: translateY(3px);
+    transform: translateY(5px);
+  }
+
+  @media (min-width: 768px) {
+    a.emphasized.github::before {
+      transform: translateY(6px);
+    }
+  }
+
+  @media (min-width: 1024px) {
+    a.emphasized.twitter::before {
+      transform: translateY(3px);
+    }
+
+    a.emphasized.github::before {
+      transform: translateY(4px);
+    }
   }
   a.emphasized.external::after {
     content: url('/images/icons/external-link-icon.svg');

src/pages/about.astro

@@ -1,7 +1,6 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import Section from '../components/Section.astro';
-import Button from '../components/Button.astro';
 import GeoLeft from '/images/background-images/geo-left.svg?raw';
 import GeoRight from '/images/background-images/geo-right.svg?raw';
 

src/pages/companies.astro

@@ -4,6 +4,8 @@ import Section from '../components/Section.astro';
 import companies from '../data/companies.json';
 import Button from '../components/Button.astro';
 import CarouselCard from '../components/CarouselCard';
+import GeoLeft from '/images/background-images/geo-left.svg?raw';
+import GeoRight from '/images/background-images/geo-right.svg?raw';
 
 const seoMetaData = {
   description: 'Read the announcements from companies that have adopted Fair Source.',
@@ -14,7 +16,7 @@ const seoMetaData = {
 
 <Layout title="Fair Source Companies" seo={seoMetaData}>
   <header class="relative flex flex-wrap justify-center items-center">
-    <div class="container w-12/12 lg:w-8/12 text-center lg:pt-[12.19rem] z-10">
+    <div class="container w-12/12 pt-[3rem] px-[0.5rem] sm:px-[1rem] md:px-[1.5rem] lg:w-8/12 text-center lg:pt-[12.19rem] z-10">
       <h1>Fair Source Companies</h1>
       <p class="mb-[1.5rem] text-[1.75rem] text-black font-[500] leading-[130%] tracking-[-0.035rem]">
         Read in their own words what companies have to say about adopting Fair Source.
@@ -23,9 +25,15 @@ const seoMetaData = {
         <Button url="/join" type="primary" cta="Join Fair Source"></Button>
       </div>
     </div>
-    <div class="relative min-w-full overflow-visible z-0">
-      <div class="absolute bg-[url('/images/background-images/companiesHero-left.svg')] bg-contain bg-no-repeat bg-left-bottom min-h-[30rem] lg:min-h-[53.5rem] w-7/12 left-0 bottom-[-7rem] md:bottom-[-12rem] lg:bottom-[-27rem] xl:bottom-[-35rem]"></div>
-      <div class="absolute bg-[url('/images/background-images/companiesHero-right.svg')] bg-contain bg-no-repeat bg-right-bottom min-h-[30rem] lg:min-h-[53.5rem] w-5/12 right-0 bottom-[-3rem] md:bottom-[-5rem] lg:bottom-[-13rem] xl:bottom-[-20rem]"></div>
+    <div class="image z-0 w-auto hidden sm:block absolute top-[10rem] left-0 right-0 bottom-[5rem] sm:top-[17rem] md:top-[18rem] md:bottom-[-12rem] md:left-0 md:right-0 lg:top-[20rem] lg:left:-0 lg:right-0 xl:bottom-[-40rem] xl:left-0 xl:right-0 2xl:top-[19rem] 3xl:top-[18rem] 3xl:left-0 3xl:right-0 3xl:bottom-[-8rem]">
+      <div class="flex items-top justify-center w-[100%] relative mx-auto columns-2 md:gap-[4rem] z-0 xl:max-h-[30rem] 2xl:max-h-[40rem] 3xl:max-h-[60rem] overflow-clip">
+        <div class="w-6/12 pt-[2rem]">
+          <Fragment set:html={GeoLeft} />
+        </div>
+        <div class="w-6/12">
+          <Fragment set:html={GeoRight} />
+        </div>
+      </div>
     </div>
   </header>
   <main>
@@ -51,7 +59,7 @@ const seoMetaData = {
           <div class="absolute bg-[url('/images/background-images/companiesWantTo-left.svg')] bg-contain bg-no-repeat bg-left-bottom min-h-[15rem] w-1/3 lg:w-1/2 left-0 bottom-0"></div>
           <div class="absolute bg-[url('/images/background-images/companiesWantTo-right.svg')] hidden md:block bg-no-repeat bg-contain bg-right-bottom h-[20rem] lg:h-full w-1/2 right-0 bottom-0"></div>
         </div>
-        <div class="flex-col w-12/12 md:w-10/12 lg:w-8/12 text-center justify-center lg:py-[12rem] z-10">
+        <div class="flex-col w-12/12 max-w-[25rem] md:w-10/12 lg:w-8/12 lg:max-w-none text-center justify-center lg:py-[12rem] z-10">
           <h2>Want to list your company?</h2>
           <div class="justify-center flex">
             <Button url="/join" type="secondary" color="black" cta="Join Fair Source"></Button>