Added architecture diagram and what if tests to home page

website/src/pages/index.js

@@ -12,7 +12,16 @@ const textContent = {
   Write Pester tests that encode your organization's business and security policies.<br/><br/>
   <strong>Apply modern DevSecOps practices</strong> and continously monitor critical aspects of your Microsoft cloud.
   `,
+  whatIf: `
+  Avoid creating loopholes in your conditional access policies and test to see the impact of a policy change before it is applied.<br/><br/>
 
+  <strong>Identity is the new control plane!</strong> Create iron-clad tests to ensure your tenant's posture is always secure as your access policies evolve.
+  `,
+  maesterArchitecture: `
+  Maester is built on top of Pester, the PowerShell test framework and <strong>super charges</strong> it with cloud capabilities and user friendly reports.<br/><br/>
+  Quickly set up Maester in your environment by following the step-by-step guides we've built for you.<br/><br/>
+  Bring the ease of writing tests in PowerShell to your Microsoft 365 tenant with Maester!<br/><br/>
+  `,
   maesterReport: `
 Get a quick snapshot of your tenant's security posture with the report generated by Maester.<br/><br/>
 <strong>The interactive click-through</strong> report lets you drill down to the details of
@@ -202,6 +211,48 @@ function CustomTests() {
   );
 }
 
+function WhatIf() {
+  return (
+    <Section className="CrossPlatform">
+      <TwoColumns
+        columnOne={
+          <TextColumn
+            title="Conditional Access What-If"
+            text={textContent.whatIf}
+          />
+        }
+        columnTwo={
+          <img className="FeatureImageRight"
+          alt="Code sample of a what if test" src="img/home/conditional-access-policywhat-if-test.png" />
+        }
+      />
+    </Section>
+  );
+}
+
+function MaesterArchitecture() {
+  return (
+    <Section className="CrossPlatform" background="tint">
+      <TwoColumns
+        reverse
+        columnOne={
+          <TextColumn
+            title="Maester Test Framework"
+            text={textContent.maesterArchitecture}
+          />
+        }
+        columnTwo={
+          <img
+            className="FeatureImageLeft"
+            alt="Architecture diagram of Maester test framework"
+            src="img/home/maester-architecture.png"
+          />
+        }
+      />
+    </Section>
+  );
+}
+
 function MaesterReport() {
   return (
     <Section className="CrossPlatform">
@@ -331,6 +382,8 @@ export default function Home() {
         <HomepageFeatures />
       </main>
       <CustomTests />
+      <WhatIf />
+      <MaesterArchitecture />
       <MaesterReport />
       <QuickRemediation />
       <Eidsca />