feat: updated boxyhq vs workos page (#380)

* feat: updated boxyhq vs workos page

This adds the new BoxyHQ vs WorkOS page with a new design and slightly updated copy.

fix #363

* update meta description

* reconfigure structure

* reduce hero

* remove old page and fix reduced header

* table responsiveness

src/components/BaseCTAProductHighlight/index.js

@@ -28,13 +28,15 @@ const BaseCTAProductHighlight = ({
       </header>
       <div className="product-highlight-content">
         {children}
-        <a
-          className={`button button-secondary-filled with-icon base-icon-pseudo icon-${icon}`}
-          href={ctaTargertURL}
-          target={targetNewWindow ? '_blank' : '_self'}
-        >
-          {ctaTargertCopy}
-        </a>
+        {ctaTargertURL && ctaTargertCopy && (
+          <a
+            className={`button button-secondary-filled with-icon base-icon-pseudo icon-${icon}`}
+            href={ctaTargertURL}
+            target={targetNewWindow ? '_blank' : '_self'}
+          >
+            {ctaTargertCopy}
+          </a>
+        )}
       </div>
     </section>
   );

src/components/heroes/BaseHero/base-hero.css

@@ -11,6 +11,11 @@
   padding: var(--spacing-medium);
 }
 
+.hero.reduced p,
+.girdle.hero.reduced p {
+  margin-bottom: 0;
+}
+
 @media only screen and (min-width: 63.9375rem) {
   .hero,
   .girdle.hero {

src/components/heroes/HeroBoxyHQWorkOS/index.js

@@ -0,0 +1,25 @@
+import BaseHero from '../BaseHero';
+import DemoCTA from '../../ctas/DemoCTA';
+import SignupCTA from '../../ctas/SignupCTA';
+
+const HeroBoxyHQWorkOS = () => {
+  return (
+    <BaseHero reduced={true} sectionId="boxyhq-workos" title="BoxyHQ vs WorkOS">
+      <p>
+        BoxyHQ is a flexible, secure, open-source alternative to WorkOS that
+        brings enterprise readiness capabilities to your SaaS applications. It
+        integrates with your tech stack no matter how bespoke.
+      </p>
+      <ul className="reset-list button-container">
+        <li>
+          <DemoCTA />
+        </li>
+        <li>
+          <SignupCTA campaign="homepage" />
+        </li>
+      </ul>
+    </BaseHero>
+  );
+};
+
+export default HeroBoxyHQWorkOS;

src/css/atoms/feature-comparison-table.css

@@ -0,0 +1,31 @@
+.feature-comparison-table {
+  display: table;
+  margin: 0 auto;
+  width: 90%;
+}
+
+@media only screen and (min-width: 63.9375rem) {
+  .feature-comparison-table {
+    padding: 0 var(--spacing-default);
+    width: 95%;
+  }
+}
+
+@media only screen and (min-width: 83.6875rem) {
+  .feature-comparison-table {
+    width: 100%;
+  }
+}
+
+.feature-comparison-table th {
+  text-align: left;
+  width: calc(100% / 3);
+}
+
+.feature-comparison-table .icon-check::before {
+  background-color: var(--color-teal-50);
+}
+
+.feature-comparison-table .icon-cross::before {
+  background-color: var(--color-red-50);
+}

src/css/base.css

@@ -9,6 +9,11 @@ body {
   font: 100% / var(--typography-body-line-height) var(--typography-body-family);
 }
 
+.marketing-site a:not(.button) {
+  color: var(--color-teal-70);
+  text-decoration: underline;
+}
+
 a:hover,
 a:focus {
   text-decoration: none;

src/pages/boxyhq-vs-workos/boxyhq-vs-workos.css

@@ -0,0 +1,8 @@
+.girdle.compare-features {
+  margin: var(--spacing-wide) auto;
+}
+
+.compare-features-heading {
+  margin-bottom: var(--spacing-medium);
+  text-align: center;
+}