update hero company on homepage and add enterprise highlight section

src/components/BaseCTAEnterpriseHighlight/index.js

@@ -0,0 +1,26 @@
+import BaseCTAProductHighlight from '../BaseCTAProductHighlight';
+
+const BaseCTAEnterpriseHighlight = () => {
+  return (
+    <BaseCTAProductHighlight
+      ctaTargertURL="/products/overview"
+      ctaTargertCopy="Explore Enterprise Solutions"
+      darkMode={true}
+      sectionId="product-overview-enterprise"
+      subtitle="Advanced Security and Efficiency"
+      title="Empowering Enterprises"
+    >
+      <p>
+        For enterprises aiming to bolster their security infrastructure and
+        streamline operational processes, BoxyHQ presents a powerful suite of
+        solutions. Our Enterprise Single Sign-On (SSO), Directory Sync, and
+        Audit Logs services are tailored to meet complex organizational demands.
+        These tools not only enhance security but also reinforce your
+        enterprise's compliance with industry standards, elevating trust and
+        reputation in a competitive market.
+      </p>
+    </BaseCTAProductHighlight>
+  );
+};
+
+export default BaseCTAEnterpriseHighlight;

src/components/BaseCTAProductHighlight/base-cta-product-highlight.css

@@ -2,6 +2,11 @@
   padding: var(--spacing-wide) var(--spacing-medium);
 }
 
+.product-highlight.dark {
+  background-color: var(--color-neutral-90);
+  color: var(--color-neutral-inverted);
+}
+
 .product-highlight-content {
   margin: 0 auto;
   max-width: 40rem;

src/components/BaseCTAProductHighlight/index.js

@@ -1,27 +1,35 @@
+import clsx from 'clsx';
+
 import './base-cta-product-highlight.css';
 
 const BaseCTAProductHighlight = ({
   children,
   ctaTargertURL,
   ctaTargertCopy,
+  darkMode = false,
   icon = 'boxy',
   sectionId,
   subtitle,
   targetNewWindow = false,
   title,
 }) => {
   return (
-    <section aria-labelledby={`${sectionId}-title`} class="product-highlight">
-      <header class="feature-header">
-        <h2 class="feature-header-title" id={`${sectionId}-title`}>
+    <section
+      aria-labelledby={`${sectionId}-title`}
+      className={clsx('product-highlight', darkMode && 'dark')}
+    >
+      <header className="feature-header">
+        <h2 className="feature-header-title" id={`${sectionId}-title`}>
           {title}
         </h2>
-        <h3 class="feature-header-subtitle linear-gradient-text">{subtitle}</h3>
+        <h3 className="feature-header-subtitle linear-gradient-text">
+          {subtitle}
+        </h3>
       </header>
-      <div class="product-highlight-content">
+      <div className="product-highlight-content">
         {children}
         <a
-          class={`button button-secondary-filled with-icon base-icon-pseudo icon-${icon}`}
+          className={`button button-secondary-filled with-icon base-icon-pseudo icon-${icon}`}
           href={ctaTargertURL}
           target={targetNewWindow ? '_blank' : '_self'}
         >

src/components/heroes/HeroHome/index.js

@@ -9,9 +9,10 @@ const HeroHome = () => {
     >
       <p>
         Reduce Time to Market without sacrificing your security posture!
-        BoxyHQ's suite of APIs for security and privacy helps engineering teams
-        build and ship compliant cloud applications faster. From NPM to
-        self-hosting or SaaS, BoxyHQ adjusts to fit your needs.
+        BoxyHQ’s suite of APIs for security and privacy helps engineering teams
+        build and ship compliant cloud applications faster. With features like
+        Enterprise Single Sign-On and Directory Sync to Audit Logs and a privacy
+        vault, BoxyHQ keeps you and your data safe and secure.
       </p>
       <ul className="reset-list button-container">
         <li>

src/pages/index.js

@@ -1,6 +1,7 @@
 import Layout from '@theme/Layout';
 
 import BaseProductFeatureSpotlight from '../components/BaseProductFeatureSpotlight';
+import BaseCTAEnterpriseHighlight from '../components/BaseCTAEnterpriseHighlight';
 import CTAProductOverview from '../components/CTAProductOverview';
 import CustomersAndPartners from '../components/CustomersAndPartners';
 import HeroHome from '../components/heroes/HeroHome';
@@ -48,6 +49,7 @@ const IndexPage = () => {
           </a>
         </BaseProductFeatureSpotlight>
         <CTAProductOverview />
+        <BaseCTAEnterpriseHighlight />
         <Testimonials />
         <CustomersAndPartners />
       </main>