Merge pull request #46 from elijames-codecov/STAT-931-fair-io-create-…

…standard-hero-component

STAT-931 - Create reusable hero component for all pages

src/components/Button.astro

@@ -1,8 +1,8 @@
 ---
 const {type, cta, url, color, target, background = 'transparent'} = Astro.props;
 
-const anchorTagClassList = `no-underline flex grow basis-[100%] lg:grow-0 lg:basis-auto lg:table-cell no-underline`;
-const commonClassList = `px-6 py-4 rounded-small text-[1.25rem] font-[600] leading-[130%] tracking-[-0.025rem] w-full xl:w-auto`;
+const anchorTagClassList = `no-underline flex grow md:flex-[1 1 50%] lg:grow-0 lg:basis-auto lg:table-cell no-underline`;
+const commonClassList = `px-[1.125rem] py-[0.78125rem] lg:px-6 md:py-[0.9375rem]lg:py-4 rounded-small text-[0.875rem] sm:text-[1rem] lg:text-[1.1875rem] 2xl:text-[1.25rem] font-[600] leading-[130%] tracking-[-0.025rem] w-full xl:w-auto`;
 const primaryClassList = `bg-black border-2 border-black ${commonClassList} text-white hover:opacity-80`;
 const secondaryClassList = `${commonClassList} bg-${background} border-2 border-${color} text-${color} hover:opacity-80`;
 const buttonTaupeClassList = `${commonClassList} bg-taupe text-black hover:opacity-80`;

src/components/Hero.astro

@@ -0,0 +1,24 @@
+---
+import Button from './Button.astro';
+import { Image } from 'astro:assets';
+
+const { headline, subhead, buttonsData = [], heroImage, bottomMargin = '' } = Astro.props;
+
+const containerClasses = `container flex flex-col flex-wrap mx-auto px-[0.5rem] sm:px-[1rem] md:px-[1.5rem] md:flex-row lg:px-[2rem] xl:px-[1.5rem] 2xl:px-[3.62rem] 3xl:px-[6.62rem] ${bottomMargin}`;
+---
+<div class={containerClasses}>
+  <div class="w-12/12 md:order-last md:w-1/2">
+      <Image class="w-[30rem] mx-auto md:w-full" src={heroImage} alt={headline} densities={[1, 2, 3, 4]} />
+  </div>
+  <div class="w-12/12 mb-[1.5rem] mt-[0.78375rem] md:my-auto md:pr-[2.02625rem] md:w-1/2">
+    <h1 class="leading-[120%] mb-[1rem] text-[1.75rem] sm:text-[2rem] lg:text-[2.375rem] 2xl:text-[2.5rem] text-black md:tracking-[-0.06rem]">{headline}</h1>
+    <p class="text-balance text-black text-[1rem] sm:text-[1.125rem] lg:text-[1.3125rem] 2xl:text-[1.375rem] md:tracking-[-0.0275rem] leading-[130%] font-sans font-[500]" set:html={subhead} />
+    {buttonsData.length > 0 && (
+      <div class="flex flex-wrap gap-[0.5rem] mt-6 md:gap-[1rem]">
+       { buttonsData.map((button) => (
+          <Button type={button.type} url={button.link} color={button.color} cta={button.text} />
+        ))}
+      </div>
+    )}
+  </div>
+</div>

src/pages/about.astro

@@ -1,43 +1,35 @@
 ---
-import { Image } from 'astro:assets';
-
 import Button from '../components/Button.astro';
 import Layout from '../layouts/Layout.astro';
 import Section from '../components/Section.astro';
-import GeoLeft from '/images/background-images/geo-left.svg?raw';
-import GeoRight from '/images/background-images/geo-right.svg?raw';
+import Hero from '../components/Hero.astro';
 
-import dospImage from '../assets/about/dosp.webp';
+import heroImage from '../assets/about/aboutHeroImage.png';
 
 const seoMetaData = {
   description: 'Fair Source is an alternative to closed source, allowing you to safely share access to your core products. Fair Source Software (FSS) can be used with minimal restrictions, and becomes Open Source after a period of time.',
   slug: 'about/'
 };
 
+const heroData = {
+  headline: "About Fair Source",
+  subhead: 'Learn the what, why, and who of Fair Source Software.',
+  heroImage: heroImage
+}
+
 ---
 
 <Layout title="About Fair Source" seo={seoMetaData}>
-  <header class="w-full relative overflow-x-clip z-0">
-    <div class="flex flex-wrap justify-center container mx-auto z-10 relative 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]">
-      <div class="w-10/12 lg:w-9/12 xl:w-8/12 py-[3rem] lg:py-[6rem] 2xl:pt-[12.19rem] 2xl:pb-[8rem] 3xl:pt-[8rem] flex-col justify-center text-center z-1">
-        <h1>About Fair Source</h1>
-        <p class="text-[1.75rem] font-[500] leading-[130%] tracking-[-0.035rem] mb-[1.5rem]">Learn the what, why, and who of Fair Source Software.</p>
-      </div>
-    </div>
-    <div class="image z-0 w-auto hidden sm:block absolute top-[10rem] left-0 right-0 bottom-[5rem] sm:top-[6rem] md:top-[6rem] md:bottom-[-12rem] md:left-[-2rem] md:right-0 lg:top-[5rem] lg:top-[-14rem] lg:left:-0 lg:right-0 xl:bottom-[-40rem] xl:left-0 xl:right-0 2xl:top-[15rem] 3xl:top-[8rem] 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>
+    <Hero
+      headline={heroData.headline}
+      subhead={heroData.subhead}
+      heroImage={heroData.heroImage}
+      bottomMargin="2xl:mb-[-1.75rem]"
+    />
   </header>
   <main>
-    <Section sectionStyles="py-[3rem] px-[5rem] xl:pt-[5.5rem] xl:pb-[11.25rem] xl:px-[14.25rem]">
+    <Section sectionStyles="py-[3rem] px-[5rem] xl:pt-[5.5rem] xl:pb-[11.25rem] xl:px-[14.25rem]" isFirst>
       <div>
         <h2>Fair Source Definition</h2>
         <p

src/pages/companies.astro

@@ -3,41 +3,43 @@ import Layout from '../layouts/Layout.astro';
 import Section from '../components/Section.astro';
 import companies from '../data/companies.json';
 import Button from '../components/Button.astro';
+import Hero from '../components/Hero.astro';
+import heroImage from '../assets/companies/companiesHeroImage.png';
 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 joined Fair Source.',
   slug: 'companies/'
 };
+
+const heroData = {
+  headline: "Fair Source Companies",
+  subhead: ' Read in their own words what companies have to say about joining Fair Source.',
+  heroImage: heroImage,
+  buttons: [
+    {
+      text: 'Join Fair Source',
+      link: '/join',
+      type: 'primary',
+      color: 'black'
+    }
+  ]
+}
 ---
 
 
 <Layout title="Fair Source Companies" seo={seoMetaData}>
-  <header class="relative flex flex-wrap justify-center items-center">
-    <div class="container w-8/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 joining Fair Source.
-      </p>
-      <div class="flex flex-wrap flex-col md:flex-row w-12/12 mb-[11.44rem] gap-[1rem] justify-center">
-        <Button url="/join" type="primary" cta="Join Fair Source"></Button>
-      </div>
-    </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>
+    <Hero
+      headline={heroData.headline}
+      subhead={heroData.subhead}
+      heroImage={heroData.heroImage}
+      buttonsData={heroData.buttons}
+      bottomMargin="2xl:-mb-12"
+    />
   </header>
   <main>
-    <Section>
+    <Section isFirst>
       <div class="company-list w-full flex flex-wrap">
         <h2 class="pl-[3rem] pt-[3rem] mb-0 text-[1.5rem] font-[500] leading-[125%] mb-[2.62rem] justify-self-start w-1/2">
           All Fair Source Announcements

src/pages/faq.astro

@@ -1,32 +1,36 @@
 ---
-import { Image } from 'astro:assets';
-
 import heroImage from '../assets/faq/faqHeroImage.png';
 
 import Layout from '../layouts/Layout.astro';
 import Section from '../components/Section.astro';
 import Collapse from '../components/Collapse.astro';
+import Hero from '../components/Hero.astro';
 
 const seoMetaData = {
   description: 'Read on to understand Fair Source and what it has to offer companies and developers.',
   slug: 'faq/'
 };
 
+const heroData = {
+  headline: "Frequently Asked Questions",
+  subhead: 'Read on to understand Fair Source and what it has to offer companies and developers.',
+  heroImage: heroImage
+}
+
 ---
 
 
 <Layout title="Frequently Asked Questions" seo={seoMetaData}>
-  <header class="relative container-spill mx-auto flex flex-wrap pl-[0.5rem] sm:pl-[1rem] md:pl-[1.5rem] lg:pl-[2rem] xl:pl-[1.5rem] 2xl:pl-[3.62rem] 3xl:pl-[6.62rem]">
-    <div class="block relative mx-auto w-12/12 lg:w-1/2 lg:order-12 lg:absolute lg:right-[-2rem] lg:left-[calc(50% + 4rem)] xl:top-0 2xl:w-7/12 2xl:bottom-[-2rem]">
-      <Image src={heroImage} alt="hero image" densities={[1.5, 2]} class="relative w-[100%] h-auto"/>
-    </div>
-    <div class="relative w-12/12  py-[3rem] lg:w-1/2 lg:py-[1.5rem] lg:pr-[4rem] xl:pb-[8.62rem] xl:pt-[6rem] 2xl:pb-[8rem] 2xl:pt-[12rem] 2xl:w-5/12 2xl:pr-[2rem]">
-      <h1 class="text-balance mb-[1rem]">Frequently Asked Questions</h1>
-      <p class="text-[1.75rem] font-[500] leading-[130%] tracking-[0.035rem]">Read on to understand Fair Source and what it has to offer companies and developers.</p>
-    </div>
+  <header>
+    <Hero
+      headline={heroData.headline}
+      subhead={heroData.subhead}
+      heroImage={heroData.heroImage}
+      bottomMargin="2xl:-mb-2"
+    />
   </header>
   <main>
-    <Section backgroundStyling="py-[3rem] px-[3rem]">
+    <Section backgroundStyling="py-[3rem] px-[3rem]" isFirst>
       <div class="w-full">
         <Collapse title="What is Fair Source?" collapseID="fair-source-defined">
           <div class="relative flex flex-wrap">

src/pages/index.astro

@@ -3,6 +3,7 @@ import Layout from '../layouts/Layout.astro';
 import Section from '../components/Section.astro';
 import Button from '../components/Button.astro';
 import Carousel from '../components/Carousel.jsx';
+import Hero from '../components/Hero.astro';
 import companies from '../data/companies.json';
 import { Image } from 'astro:assets';
 
@@ -18,27 +19,35 @@ const mobileSectionBackgroundImageClasses = 'h-[12.31rem] top-0 left-0 sm:bottom
 const mobileSectionCenteredBackground = 'top-0 left-0 sm:bottom-0 md:left-[1rem] md:right-[1rem] md:bottom-[1rem]';
 const mobileSectionContentClasses = 'z-10 pt-[1.5rem] pb-[1rem] relative w-12/12 px-[1rem] bg-white sm:border sm:border-borderGray sm:rounded-small sm:p-[2rem] lg:border-0 lg:rounded-none lg:bg-transparent';
 
+const heroData = {
+  headline: "Software Sharing for Modern Businesses",
+  subhead: "Fair Source is an alternative to closed source, allowing you to safely share access to your core products.",
+  heroImage: heroImage,
+  buttons: [
+    {
+      text: "Join Fair Source",
+      link: "/join/",
+      color: "teal",
+      type: "primary"
+    },
+    {
+      text: "Learn More",
+      link: "/about/",
+      color: "black",
+      type: "secondary"
+    }
+  ]
+}
 ---
 
 <Layout title="Software Sharing for Modern Companies" seo={seoMeta}>
   <header>
-    <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] 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 Businesses
-        </h1>
-        <p class="text-balance text-black text-[1.5rem] xl:text-[2rem] leading-[130%] font-sans font-[500] mb-6">Fair Source is an alternative to closed source, allowing you to safely share access to your core products.</p>
-        <div class="flex flex-wrap gap-4">
-          <Button type="primary" url='/join/' color="teal" cta="Join Fair Source" />
-          <Button type="secondary" url='/about/' color="black" cta="Learn More" />
-        </div>
-      </div>
-    </div>
+    <Hero
+      headline={heroData.headline}
+      subhead={heroData.subhead}
+      heroImage={heroData.heroImage}
+      buttonsData={heroData.buttons}
+    />
   </header>
   <main>
     {

src/pages/join.astro

@@ -1,12 +1,12 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import Section from '../components/Section.astro';
+import Hero from '../components/Hero.astro';
 import { Image } from 'astro:assets';
 
 import auditForSecretsImage from '../assets/adopt/auditforsecrets.png';
 import publishYourRepoImage from '../assets/adopt/publishyourrepo.png';
 import adoptHeroImage from '../assets/adopt/adoptHeroImage.png';
-import adoptHeroImageDesktop from '../assets/adopt/adoptHeroImageDesktop.png';
 
 const mobileSectionCommonClasses = 'z-0 pb-0 pt-[12.31rem] sm:pt-[9.12rem] sm:pb-[1.56rem] sm:px-[3rem] md:pt-[6.69rem] md:pb-[7.44rem]';
 const mobileSectionBackgroundImageClasses = 'h-[12.31rem] top-0 left-0 sm:bottom-0 sm:h-auto md:top-[1rem] md:bottom-[1rem] md:left-[1rem] md:w-auto md:h-auto';
@@ -17,19 +17,21 @@ const seoMetaData = {
   description: `Here's how to adopt Fair Source at your company.`,
   slug: 'join/'
 };
+
+const heroData = {
+  headline: "Join Fair Source",
+  subhead: 'Sold on the <a href="/faq" class="underline">benefits</a>? Here\'s how to adopt Fair Source at your company.',
+  heroImage: adoptHeroImage
+}
 ---
 <Layout title="Join Fair Source" seo={seoMetaData}>
-  <header class="container 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="hidden relative lg:block lg:absolute lg:right-[2rem] lg:bottom-0 lg:top-0 lg:w-1/2 xl:right-[2rem] 2xl:right-[3.62rem] 3xl:right-[6.62rem]">
-      <Image src={adoptHeroImageDesktop} alt="How to adopt fair source" densities={[1, 2, 3]} class="w-[100%] h-auto"/>
-    </div>
-    <div class="block relative lg:hidden lg:absolute lg:right-[2rem] lg:bottom-0 lg:top-0 lg:w-1/2 xl:right-[2rem] 2xl:right-[3.62rem] 3xl:right-[6.62rem]">
-      <Image src={adoptHeroImage} alt="How to adopt fair source" densities={[1, 2, 3]} class="w-[100%] h-auto"/>
-    </div>
-    <div class="w-12/12 py-[3rem] lg:w-5/12 lg:py-[8rem] xl:pb-[15.25rem] xl:pt-[12.38rem]">
-      <h1 class="text-balance mb-[1rem]">Join Fair Source</h1>
-      <p class="text-[1.75rem] font-[500] leading-[130%] tracking-[0.035rem]">Sold on the <a href="/faq" class="underline">benefits</a>? Here's how to adopt Fair Source at your company.</p>
-    </div>
+  <header>
+    <Hero
+      headline={heroData.headline}
+      subhead={heroData.subhead}
+      heroImage={heroData.heroImage}
+      bottomMargin="2xl:-mb-8"
+    />
   </header>
   <main>
     <Section sectionStyles="px-[1.5rem] py-[3rem] gap-[2rem] xl:py-[8rem] xl:gap-x-[4.25rem]" isFirst itemsTop>

src/pages/licenses.astro

@@ -1,6 +1,7 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import Section from '../components/Section.astro';
+import Hero from '../components/Hero.astro';
 import { Image } from 'astro:assets';
 
 import HeroImage from '../assets/licenses/licenses-hero-image.png';
@@ -14,28 +15,28 @@ const seoMetaData = {
 };
 const mobileSectionCommonClasses = 'z-0 pb-0 pt-[12.31rem] sm:pt-[9.12rem] sm:pb-[1.56rem] sm:px-[3rem] md:pt-[6.69rem] md:pb-[7.44rem] lg:px-0 lg:py-0';
 const mobileSectionBackgroundImageClasses = 'absolute h-[12.31rem] top-0 left-0 sm:bottom-0 sm:h-auto sm:bottom-0 sm:right-0 md:top-[1rem] md:bottom-[1rem] md:left-[1rem] md:w-auto md:h-auto lg:right-0 lg:bottom-0 lg:left-0 lg:top-0';
-const mobileCardClasses = `z-10`;
 const card = 'border border-borderGray rounded-small px-[1rem] py-[1.5rem] xl:px-[2rem] xl:py-[3rem] h-[100%]';
 const cardTitleClasses = `font-sans text-[1.375rem] font-[500] color-black leading-[120%] tracking-[-0.03438rem] flex items-center mb-[0.62rem]`;
+
+const heroData = {
+  headline: "Fair Source Licenses",
+  subhead: 'Our licenses encode our values: user freedom and developer sustainability.',
+  heroImage: HeroImage
+}
 ---
 
 
 <Layout title="Fair Source Licenses" seo={seoMetaData}>
 <header>
-  <div class="relative container-spill pl-[0.5rem] sm:pl-[1rem] md:pl-[1.5rem] lg:pl-[2rem] xl:pl-[1.5rem] 2xl:pl-[3.62rem] 3xl:pl-[6.62rem]">
-    <div class="block relative w-12/12 lg:absolute lg:right-0 lg:bottom-0 lg:top-0 xl:bottom-[-10rem] lg:w-7/12 ">
-      <Image src={HeroImage} alt="How to adopt fair source" densities={[1, 2, 3]}/>
-    </div>
-    <div class="relative flex">
-      <div class="w-12/12 py-[2rem] lg:py-[7rem] 2xl:pt-[12rem] 2xl:pb-[17.56rem] lg:w-4/12">
-        <h1>Fair Source Licenses</h1>
-        <p class="text-[1.75rem] font-[500] leading-[130%] tracking-[0.035rem]">Our licenses encode our values: user freedom and developer sustainability.</p>
-      </div>
-    </div>
-  </div>
+  <Hero
+    headline={heroData.headline}
+    subhead={heroData.subhead}
+    heroImage={heroData.heroImage}
+    bottomMargin="2xl:-mb-6"
+  />
 </header>
 <main>
-  <Section sectionStyles="px-[1.5rem] xl:px-[3.5rem] py-[2.75rem] xl:py-[5.5rem]">
+  <Section sectionStyles="px-[1.5rem] xl:px-[3.5rem] py-[2.75rem] xl:py-[5.5rem]" isFirst>
     <div class="w-12/12 relative flex flex-wrap justify-start pb-[3rem] xl:pb-[6.25rem]">
       <div class="w-12/12 xl:w-9/12">
         <h3 class="text-[2.5rem] font-[500] leading-[125%] tracking-[-0.05rem]">The following licenses fit the <a href="/about/">Fair Source Definition</a>.</h3>