Merge pull request #5 from elijames-codecov/STAT-875-fair-io-how-to-b…

…ackground-images

STAT-875 fair io how to background images

src/pages/howto.astro

@@ -1,7 +1,11 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import Section from '../components/Section.astro';
+import { Image } from 'astro:assets';
 
+import auditForSecretsImage from '../assets/adopt/auditforsecrets.png';
+import publishYourRepoImage from '../assets/adopt/publishyourrepo.png';
+import tellTheWorld from '../assets/adopt/telltheworld.png';
 ---
 
 <Layout title="How to Adopt Fair Source">
@@ -74,8 +78,11 @@ import Section from '../components/Section.astro';
         </div>
       </div>
     </Section>
-    <Section sectionStyles="px-[1.5rem] lg:px-[3.5rem]">
-      <div class="w-12/12 xl:w-8/12 py-[3rem] xl:pt-[11rem] xl:pb-[9rem]">
+    <Section
+      sectionStyles="px-[1.5rem] lg:px-[3.5rem]"
+      backgroundStyling="bg-[url('/images/background-images/choosingALicense-top.svg')] bg-contain bg-no-repeat bg-top w-full bottom-0 top-0 left-0 right-0 min-h-[20rem] z-0"
+      backgroundBottomStyling="bg-[url('/images/background-images/choosingALicense-bottom.svg')] bg-contain bg-no-repeat bg-bottom w-full bottom-0 left-0 right-0 min-h-[5rem] z-0 lg:min-h-[5.5rem] xl:min-h-[8rem]">
+      <div class="mt-[4rem] mb-[3rem] w-12/12 z-10 xl:w-8/12 py-[3rem] md:mt-[7rem] xl:my-0 xl:pt-[11rem] xl:pb-[9rem]">
         <span class="tag text-ltOrange">2. Choosing a License</span>
         <h2>Licensing is the heart of Fair Source</h2>
         <p class="mb-[1rem]">
@@ -89,26 +96,38 @@ import Section from '../components/Section.astro';
         <p>Read more about <a href="/licenses" class="underline">all Fair Source licenses and approaches</a>.</p>
       </div>
     </Section>
-    <Section sectionStyles="lg:px-[3rem]">
-      <div class="w-12/12 xl:w-7/12 xl:pt-[12.19rem] xl:pb-[12.56rem]">
+    <Section
+      sectionStyles="py-[1.5rem] pl-[1.5rem] !justify-end xl:p-0 xl:pl-[3rem] xl:items-end"
+      backgroundStyling="bg-[url('/images/background-images/auditForSecrets.svg')] bg-contain bg-top bg-no-repeat w-full top-[1.5rem] right-auto left-[1.5rem] min-h-[20rem] bottom-[45%] xl:bg-right xl:top-[2.875rem] xl:right-[3.125rem] xl:left-auto xl:bottom-[1.67rem] xl:w-1/2">
+      <div class="relative mb-[2rem] h-full min-h-[20rem] xl:mb-0 xl:min-h-[20rem] xl:w-1/2 flex justify-end items-end xl:order-12">
+        <Image src={auditForSecretsImage} alt="Audit For Secrets" densities={[1.5, 2]} class="relative max-h-[30rem] w-auto xl:max-h-[35rem]" />
+      </div>
+      <div class="relative h-1/2 w-12/12 xl:h-full xl:w-1/2 xl:pt-[12.19rem] xl:pb-[12.56rem]">
         <span class="tag text-rust">3. Audit for Secrets</span>
         <h2>
           Before you publish your code, make sure you don’t have any secrets in your 
           repository.
         </h2>
         <p>Tools such <a href="" class="emphasized">TruffleHog</a> can help with this.</p>
       </div>
-      <div class="w-12/12 xl:w-5/12"></div>
     </Section>
-    <Section sectionStyles="px-[1.5rem] lg:px-[3.5rem]">
-      <div class="w-12/12 xl:w-5/12"></div>
+    <Section
+      sectionStyles="px-[1.5rem] items-stretch xl:pr-[3.5rem] xl:pl-0"
+      backgroundStyling="bg-[url('/images/background-images/publishYourRepo-top.svg')] bg-contain bg-no-repeat bg-right w-full top-0 right-0 xl:right-[4.75rem] min-h-[13rem] z-0"
+      backgroundBottomStyling="bg-[url('/images/background-images/publishYourRepo-bottom.svg')] bg-contain bg-no-repeat bg-center w-1/2 bottom-[30%] left-0 h-full z-0 xl:min-h-[20rem] xl:bg-left xl:bottom-0">
+      <div class="flex items-center mb-[2rem] w-12/12 z-10 xl:w-5/12">
+        <Image src={publishYourRepoImage} alt="Publish Your Repo" densities={[1.5, 2]} class="relative xl:min-w-[30rem]" />
+      </div>
       <div class="w-12/12 xl:w-7/12 xl:py-[13.81rem]">
         <span class="tag text-teal">4. Publish Your Repo</span>
         <h2>This is the fun part. Click the button to make it public and celebrate the moment.</h2>
       </div>
     </Section>
-    <Section sectionStyles="px-[1.5rem] lg:px-[3.5rem]">
-      <div class="w-12/12 xl:w-7/12 xl:pt-[11.62rem] xl:pb-[13.75rem]">
+    <Section
+      sectionStyles="p-[1.5rem] items-stretch xl:px-[3.5rem]"
+      backgroundStyling="bg-[url('/images/background-images/tellTheWorld.svg')] bg-contain bg-no-repeat bg-right w-full top-0 bottom-[60%] right-0 md:bottom-[40%] xl:bottom-0 xl:w-5/15 z-0">
+      <div class="relative flex items-center mb-[2rem] min-h-[20rem] w-full z-10 xl:w-5/12 xl:order-12"></div>
+      <div class="w-12/12 xl:w-7/12 xl:pr-[1rem] xl:pt-[11.62rem] xl:pb-[13.75rem] z-10">
         <span class="tag text-rust">5. Tell the World</span>
         <h2>Let’s spread the word together!</h2>
         <p>Use the fair-source repo topic on
@@ -117,10 +136,12 @@ import Section from '../components/Section.astro';
           link to your blog from our homepage. Welcome aboard!
         </p>
       </div>
-      <div class="w-12/12 xl:w-7/12"></div>
     </Section>
-    <Section sectionStyles="px-[1.5rem] lg:px-[3.5rem]">
-      <div class="w-12/12 xl:w-1/2 xl:py-[13.19rem]">
+    <Section
+      sectionStyles="!bg-taupe px-[1.5rem] min-h-[20rem] lg:px-[3.5rem]"
+      backgroundStyling="bg-[url('/images/background-images/moreHelp-top.svg')] bg-contain bg-no-repeat bg-left h-full top-0 bottom-0 left-0 w-1/2 z-0"
+      backgroundBottomStyling="bg-[url('/images/background-images/moreHelp-bottom.svg')] bg-contain bg-no-repeat bg-right bottom-0 right-0 h-full w-1/2 z-0">
+      <div class="w-12/12 md:w-1/2 xl:py-[13.19rem]">
         <h2 class="text-center">Want some more help?</h2>
         <p class="text-center">Reach out to us at <a href="" target="_BLANK" class="emphasized">Github</a> or <a href="" target="_BLANK" class="emphasized">Twitter</a> if you’ve got more questions. We’re happy to help!</p>
       </div>