content scaffolded for licneses

src/layouts/Layout.astro

@@ -201,7 +201,7 @@ const { title } = Astro.props;
     line-height: 130%;
     letter-spacing: -0.035rem;
   }
-  span.tag {
+  .tag {
     display: block;
     font-family: 'Plus Jakarta Sans', Arial, Helvetica, sans-serif;
     font-size: 1.5rem;

src/pages/licenses.astro

@@ -1,6 +1,15 @@
 ---
 import Layout from '../layouts/Layout.astro';
 import Section from '../components/Section.astro';
+import Button from '../components/Button.astro';
+import { Image } from 'astro:assets';
+
+import FSL from '../assets/licenses/FSL-initials.png';
+import Licenses1 from '../assets/licenses/licenses-1.png';
+import True from '../assets/grid/truthy.png';
+import False from '../assets/grid/false.png';
+import IsTrue from '/images/grid/true.svg?raw';
+import IsFalse from '/images/grid/false.svg?raw';
 
 ---
 
@@ -22,9 +31,134 @@ import Section from '../components/Section.astro';
         <h3>We have vetted and approved the following licenses and approaches as fitting our Fair Source Values. While other licenses and approaches may also fit our values, these are the ones we recommend for adoption.</h3>
       </div>
     </div>
-    <div class="w-12/12 relative flex flex-wrap justify-around">
-      <div></div>
-      <div></div>
+    <div class="w-12/12 relative flex flex-wrap">
+      <div class="w-12/12 xl:w-5/12">
+        <Image src={Licenses1} alt="Fair Source License" />
+      </div>
+      <div class="w-12/12 xl:w-1/12"></div>
+      <div class="w-12/12 xl:w-6/12">
+        <div class="border border-borderGray rounded-small h-[100%]">
+          <div class="w-12/12">
+            <Image src={FSL} alt="Functional Source License" />
+          </div>
+          <div class="w-12/12 px-[1rem] xl:px-[2rem]">
+            <span class="tag text-teal mt-[-3rem]">Recommended</span>
+            <h3 class="text-[1.75rem] text-[#000000] leading-[120%] tracking-[-0.04375rem] font-[500]">Functional Source License <span class="font-[400]">(FSL)</span></h3>
+            <p class="mb-[0.62rem]">A simple non-compete license with eventual Open Source conversion after two years. This is the flagship Fair Source license.</p>
+            <Button url="https://fsl.software/" cta="Visit Website">Thing</Button>
+          </div>
+        </div>
+
+      </div>
+    </div>
+    <div class="w-12/12 relative flex flex-wrap">
+      <div class="w-12/12 pb-[3rem]">
+        <h3 class="tag text-orange">Alternate Fair Source Licenses</h3>
+        <p>These licenses provide different terms and features, catering to specific project needs. They are useful alternatives for projects requiring unique conversion timelines or feature restrictions, offering flexibility beyond our main recommendation.</p>
+      </div>
+      <div class="w-12/12 xl:w-6/12 mb-[1.25rem] xl:pr-[0.72rem]">
+        <div class="border border-borderGray rounded-small px-[1rem] py-[1.5rem] xl:px-[2rem] xl:py-[3rem] h-[100%]">
+          <h4>Fair Core Licence (FCL)</h4>
+          <p>A simple non-compete license with two-year delayed conversion to Open Source. Recommended for monetizing self-hosted software.</p>
+        </div>
+      </div>
+      <div class="w-12/12 xl:w-6/12 mb-[1.25rem] xl:pl-[0.72rem]">
+        <div class="border border-borderGray rounded-small px-[1rem] py-[1.5rem] xl:px-[2rem] xl:py-[3rem] h-[100%]">
+          <h4>Business Source License (BUSL or BSL)</h4>
+          <p>A complex non-compete license with eventual Open Source conversion after a certain amount of time, usually four years.</p>
+        </div>
+      </div>
+      <div class="w-12/12 xl:w-6/12 mb-[1.25rem] xl:pr-[0.72rem]">
+        <div class="border border-borderGray rounded-small px-[1rem] py-[1.5rem] xl:px-[2rem] xl:py-[3rem] h-[100%]">
+          <h4>Server Side Public License (SSPL)</h4>
+          <p>A complex license derived from the GNU General Public License (GPL), designed to extend the share-alike principle to its maximum extent.</p>
+        </div>
+      </div>
+      <div class="w-12/12 xl:w-6/12 mb-[1.25rem] xl:pl-[0.72rem]">
+        <div class="border border-borderGray rounded-small px-[1rem] py-[1.5rem] xl:px-[2rem] xl:py-[3rem] h-[100%]">
+          <h4>Elastic License (EL)</h4>
+          <p>A simple non-compete license allowing feature restriction through license keys, suitable for various monetization models.</p>
+        </div>
+      </div>
+    </div>
+    <div>
+      <h3 class="tag text-tangerine">Approaches</h3>
+      <p>We differentiate Fair Source licensing approaches based on two factors. First, does the producer utilize eventual Open Source? Second, does the producer limit the features of its Fair Source product relative to other editions of the software? Limiting features is called “Fair Core,” because the core functionality is available under a Fair Source license, while an extended feature set is not. This amounts to whether the company’s business model includes monetizing self-hosted usage.</p>
+      <div class="w-full">
+        <div class="flex flex-wrap w-12/12 px-[2rem]">
+          <div class="w-2/12">
+            <span class="block text-[1.375rem] font-[600] leading-[120%] tracking-[-0.03438rem]">Tier</span>
+          </div>
+          <div class="w-3/12">
+            <span class="block text-[1.375rem] font-[600] leading-[120%] tracking-[-0.03438rem]">Eventual OSS</span>
+          </div>
+          <div class="w-3/12">
+            <span class="block text-[1.375rem] font-[600] leading-[120%] tracking-[-0.03438rem]">Feautre Complete</span>
+          </div>
+          <div class="w-3/12">
+            <span class="block text-[1.375rem] font-[600] leading-[120%] tracking-[-0.03438rem]">Examples</span>
+          </div>
+        </div>
+        <div class="flex flex-wrap w-12/12 px-[2rem] items-center">
+          <div class="w-2/12">
+            1
+          </div>
+          <div class="w-3/12">
+            <Fragment set:html={IsTrue} />
+          </div>
+          <div class="w-3/12">
+            <Fragment set:html={IsTrue} />
+          </div>
+          <div class="w-3/12">
+            <span>FSL, BUSL<sup>†</sup></span>
+          </div>
+        </div>
+        <div class="flex flex-wrap w-12/12 px-[2rem] items-center">
+          <div class="w-2/12">
+            2
+          </div>
+          <div class="w-3/12">
+            <Fragment set:html={IsTrue} />
+          </div>
+          <div class="w-3/12">
+            <Fragment set:html={IsFalse} />
+          </div>
+          <div class="w-3/12">
+            <span>FCL</span>
+          </div>
+        </div>
+        <div class="flex flex-wrap w-12/12 px-[2rem] items-center">
+          <div class="w-2/12">
+            3
+          </div>
+          <div class="w-3/12">
+            <Fragment set:html={IsFalse} />
+          </div>
+          <div class="w-3/12">
+            <Fragment set:html={IsTrue} />
+          </div>
+          <div class="w-3/12">
+            <span>SSPL, ELv2<sup>†</sup>, BUSL<sup>†</sup></span>
+          </div>
+        </div>
+        <div class="flex flex-wrap w-12/12 px-[2rem] items-center">
+          <div class="w-2/12">
+            4
+          </div>
+          <div class="w-3/12">
+            <Fragment set:html={IsFalse} />
+          </div>
+          <div class="w-3/12">
+            <Fragment set:html={IsFalse} />
+          </div>
+          <div class="w-3/12">
+            <span>ELv2<sup>†</sup>, BUSL<sup>†</sup></span>
+          </div>
+        </div>
+
+      </div>
+
+
     </div>
 
 

tailwind.config.mjs

@@ -11,6 +11,7 @@ export default {
       teal: '#0A9396',
       orange: '#FF763E',
       ltOrange: '#EE9B00',
+      tangerine: '#FFA229',
       lightGray: '#A5A5A5',
       midnight: '#1E1E1E',
       taupe: '#E8E3DC',