Benefit access landing page

Fixes #2048

src/PolicyEngine.jsx

@@ -44,6 +44,10 @@ import CountryIdLayout from "./routing/CountryIdLayout";
 import RedirectBlogPost from "./routing/RedirectBlogPost";
 import { StatusPage } from "./pages/StatusPage";
 import ManifestosComparison from "./applets/ManifestosComparison";
+import BenefitAccess from "./pages/solutions/BenefitAccess";
+import Education from "./pages/solutions/Education";
+import ArtificialIntelligence from "./pages/solutions/ArtificialIntelligence";
+import MicrosimulationModel from "./pages/solutions/MicrosimulationModel";
 
 const PolicyPage = lazy(() => import("./pages/PolicyPage"));
 const HouseholdPage = lazy(() => import("./pages/HouseholdPage"));
@@ -280,7 +284,7 @@ export default function PolicyEngine() {
         token: {
           borderRadius: 0,
           colorPrimary: style.colors.BLUE,
-          fontFamily: "Roboto Serif",
+          fontFamily: "Roboto",
         },
       }}
     >
@@ -296,6 +300,16 @@ export default function PolicyEngine() {
           <Route path="jobs" element={<Jobs />} />
           <Route path="testimonials" element={<Testimonials />} />
           <Route path="calculator" element={<CalculatorInterstitial />} />
+          <Route
+            path="solutions/microsimulation-model"
+            element={<MicrosimulationModel />}
+          />
+          <Route path="solutions/education" element={<Education />} />
+          <Route path="solutions/benefit-access" element={<BenefitAccess />} />
+          <Route
+            path="solutions/artificial-intelligence"
+            element={<ArtificialIntelligence />}
+          />
           <Route path="simulations" element={<SimulationsPage />} />
           <Route path="research" element={<Outlet />}>
             <Route index={true} element={<Research />} />

src/layout/ShowcaseItem.jsx

@@ -13,9 +13,16 @@ export default function ShowcaseItem({
   borderColor,
   color,
   imageIsMissing,
+  imageShrinkPercentage,
 }) {
   const displayCategory = useDisplayCategory();
 
+  const imageWidth = imageShrinkPercentage
+    ? `${imageShrinkPercentage}%`
+    : displayCategory === "desktop"
+      ? 400
+      : "100%";
+
   return (
     <div
       style={{
@@ -25,6 +32,8 @@ export default function ShowcaseItem({
         paddingBottom: 50,
         borderBottom: `1px solid ${borderColor || style.colors.WHITE}`,
         alignItems: "center",
+        justifyContent:
+          displayCategory === "desktop" ? "space-between" : "flex-start", // Conditional justifyContent
       }}
     >
       <div
@@ -69,7 +78,7 @@ export default function ShowcaseItem({
       ) : (
         <img
           src={image}
-          width={displayCategory === "desktop" ? 400 : "100%"}
+          width={imageWidth}
           height="100%"
           style={{
             objectFit: "contain",

src/pages/Donate.jsx

@@ -32,7 +32,7 @@ export default function Donate() {
 
         <Section
           backgroundColor={style.colors.LIGHT_GRAY}
-          title="The Difference Your Support Makes"
+          title="The difference your support makes"
         >
           <div
             style={{
@@ -44,22 +44,22 @@ export default function Donate() {
           >
             <ul style={{ fontFamily: style.fonts.BODY_FONT }}>
               <li>
-                <b>Comprehensive Policy Analysis:</b> Funds enhance our ability
+                <b>Comprehensive policy analysis:</b> Funds enhance our ability
                 to create robust policy simulations that align policymaking with
                 societal goals.
               </li>
               <li>
-                <b>Streamlined Benefit Access:</b> Your support simplifies the
+                <b>Streamlined benefit access:</b> Your support simplifies the
                 process of determining eligibility, ensuring vital benefits
                 reach those in need.
               </li>
               <li>
-                <b>Open-Source Development:</b> Contributions support a
+                <b>Open-source development:</b> Contributions support a
                 transparent, collaborative approach, amplifying the impact of
                 each donation.
               </li>
               <li>
-                <b>Global Impact:</b> Donations fuel our work across the US and
+                <b>Global impact:</b> Donations fuel our work across the US and
                 the UK, with plans to grow our policy tools globally.
               </li>
             </ul>
@@ -69,7 +69,7 @@ export default function Donate() {
         {/* Donate Online Section */}
         <Section
           backgroundColor={style.colors.BLUE_PRIMARY}
-          title="How to Donate"
+          title="How to donate"
         >
           <div
             style={{

src/pages/Home.jsx

@@ -11,6 +11,7 @@ import HomeQuoteCarousel from "./home/HomeQuoteCarousel";
 import { Helmet } from "react-helmet";
 import useCountryId from "../hooks/useCountryId";
 import HomeElectionBanner from "./home/HomeElectionBanner";
+import HomeSolutions from "./home/HomeSolutions";
 
 export default function Home() {
   const countryId = useCountryId();
@@ -24,13 +25,14 @@ export default function Home() {
         <Header />
         <HomeLanding />
         {countryId === "uk" && <HomeElectionBanner />}
+        <HomeSolutions />
         <HomeUsedBy />
         <HomeBlogPreview />
-        <HomeSubscribe />
         <HomeCallToAction />
         <HomePolicyEngineFeatures />
         <HomeQuoteCarousel />
         <HomeTransparency />
+        <HomeSubscribe />
         <Footer />
       </div>
     </>

src/pages/home/HomeLanding.jsx

@@ -50,7 +50,7 @@ export default function HomeLanding() {
           style={{
             display: "flex",
             alignItems: "center",
-            justifyContent: "between",
+            justifyContent: "space-between",
             flexDirection: mobile || tablet ? "column" : "row",
             gap: mobile || tablet ? 50 : 30,
             height: "100%",
@@ -69,13 +69,23 @@ export default function HomeLanding() {
             <h1
               style={{
                 color: "white",
-                fontSize: mobile || tablet ? 40 : 55,
+                fontSize: mobile || tablet ? 36 : 48,
                 alignItems: "center",
                 margin: 0,
               }}
             >
-              Computing Public Policy for Everyone
+              Democratizing Public Policy Analysis
             </h1>
+            <p
+              style={{
+                color: "white",
+                fontSize: mobile || tablet ? 18 : 24,
+                marginTop: 20,
+              }}
+            >
+              Leveraging cutting-edge technology to make policy analysis
+              accessible, transparent, and impactful for everyone.
+            </p>
           </div>
           <div
             style={{
@@ -86,13 +96,8 @@ export default function HomeLanding() {
             }}
           >
             <LinkButton
-              text="Compute my taxes and benefits"
-              link={`/${countryId}/household`}
-              width="100%"
-            />
-            <LinkButton
-              text="Compute policy reform impacts"
-              link={`/${countryId}/policy`}
+              text="Explore Our Solutions"
+              link="/solutions"
               width="100%"
             />
           </div>

src/pages/home/HomeSolutions.jsx

@@ -0,0 +1,51 @@
+import React from "react";
+import Section from "../../layout/Section";
+import ShowcaseItem from "../../layout/ShowcaseItem";
+import style from "../../style";
+import BenefitAccessImage from "../../images/home/benefit-access.png";
+import EducationImage from "../../images/home/education.png";
+import ArtificialIntelligenceImage from "../../images/home/artificial-intelligence.png";
+import MicrosimulationModelImage from "../../images/home/microsimulation.png";
+
+export default function HomeSolutions() {
+  return (
+    <Section title="Our solutions" backgroundColor={style.colors.WHITE}>
+      <ShowcaseItem
+        title="Microsimulation model"
+        description="Dive deep into the mechanics of our microsimulation model and understand how it works."
+        linkTitle="Learn More"
+        link="/solutions/microsimulation-model"
+        image={MicrosimulationModelImage}
+        altText="Microsimulation model"
+        imageShrinkPercentage={20}
+      />
+      <ShowcaseItem
+        title="Benefit access"
+        description="Streamline and simplify the process of accessing government benefits with our intuitive tools."
+        linkTitle="Learn More"
+        link="/solutions/benefit-access"
+        image={BenefitAccessImage}
+        altText="Benefit access"
+        imageShrinkPercentage={20}
+      />
+      <ShowcaseItem
+        title="Education"
+        description="Empowering educators to bring economic policy lessons to life."
+        linkTitle="Learn More"
+        link="/solutions/education"
+        image={EducationImage}
+        altText="Education"
+        imageShrinkPercentage={20}
+      />
+      <ShowcaseItem
+        title="Artificial intelligence"
+        description="Harness the power of AI to explain results of sophisticated economic models in plain language."
+        linkTitle="Learn More"
+        link="/solutions/artificial-intelligence"
+        image={ArtificialIntelligenceImage}
+        altText="Artificial intelligence"
+        imageShrinkPercentage={20}
+      />
+    </Section>
+  );
+}

src/pages/home/HomeTransparency.jsx

@@ -11,30 +11,30 @@ export default function HomeTransparency() {
   return (
     <Section backgroundColor={style.colors.LIGHT_GRAY} title="Transparency">
       <ShowcaseItem
-        title="We're fully open source"
-        description="All PolicyEngine models, code, and data are open source and available in their latest form on GitHub, with code, documentation and validation from over fifty open-source contributors. This is our real-time, unfiltered development."
-        linkTitle="See our GitHub activity"
+        title="Building in the open"
+        description="We develop and publish all our models, code, and data open source on GitHub, with contributions from over a hundred experts from around the world."
+        linkTitle="See Our GitHub Activity"
         link={`https://github.com/policyengine`}
         image={githubScreenshot}
-        altText="Screenshot of PolicyEngine's GitHub activity"
+        altText="GitHub Activity"
         borderColor={style.colors.BLACK}
       />
       <ShowcaseItem
-        title="Our models are tested extensively"
-        description="PolicyEngine's software undergoes thousands of automated tests every day to ensure our simulations produce accurate results."
-        linkTitle="Explore the documentation"
+        title="Extensive testing and validation"
+        description="PolicyEngine's software undergoes thousands of automated tests every day to ensure accurate results."
+        linkTitle="Explore Documentation"
         link={`https://policyengine.github.io/policyengine-${countryId}`}
         image={testingScreenshot}
-        altText="Screenshot of PolicyEngine's test coverage"
+        altText="Test Coverage"
         borderColor={style.colors.BLACK}
       />
       <ShowcaseItem
-        title="PolicyEngine's API computes policy impacts"
-        description="Instantly compute taxes and benefits for any household under current or reformed policy rules, using the PolicyEngine REST API, reproducing any result in the web app."
-        linkTitle="Explore the documentation"
+        title="Replicability through APIs"
+        description="Instantly compute taxes and benefits for any household under current or reformed policy rules using our REST and Python APIs."
+        linkTitle="Explore Documentation"
         link={`/${countryId}/api`}
         image={apiScreenshot}
-        altText="Screenshot of PolicyEngine's API documentation"
+        altText="API Documentation"
         borderColor={style.colors.BLACK}
       />
     </Section>

src/pages/solutions/ArtificialIntelligence.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+export default function ArtificialIntelligence() {
+  return (
+    <div>
+      <h1>Benefit Access</h1>
+      <p>Details about Benefit Access solution...</p>
+    </div>
+  );
+}

src/pages/solutions/BenefitAccess.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+export default function BenefitAccess() {
+  return (
+    <div>
+      <h1>Benefit Access</h1>
+      <p>Details about Benefit Access solution...</p>
+    </div>
+  );
+}

src/pages/solutions/Education.jsx

@@ -0,0 +1,10 @@
+import React from "react";
+
+export default function Education() {
+  return (
+    <div>
+      <h1>Benefit Access</h1>
+      <p>Details about Benefit Access solution...</p>
+    </div>
+  );
+}