Add content to pages

docusaurus.config.js

@@ -392,6 +392,7 @@ module.exports = {
         docItemComponent: "@theme/ApiItem",
       },
     ],
+    "docusaurus-tailwindcss-loader",
   ],
   themes: ["@docusaurus/theme-live-codeblock", "docusaurus-theme-openapi-docs"],
 };

package.json

@@ -37,5 +37,11 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.13",
+    "docusaurus-tailwindcss-loader": "file:plugins/docusaurus-tailwindcss-loader"
   }
 }

plugins/docusaurus-tailwindcss-loader/index.js

@@ -0,0 +1,25 @@
+module.exports = function (context, options) {
+  return {
+    name: "postcss-tailwindcss-loader",
+    // https://github.com/facebook/docusaurus/issues/2961#issuecomment-1531243979
+    injectHtmlTags() {
+      return {
+        headTags: [
+          {
+            tagName: "link",
+            attributes: {
+              rel: "stylesheet",
+              href: "https://cdn.jsdelivr.net/npm/tailwindcss/dist/preflight.min.css",
+            },
+          },
+        ],
+      };
+    },
+    configurePostCss(postcssOptions) {
+      // https://github.com/facebook/docusaurus/issues/2961#issuecomment-1531243979
+      postcssOptions.plugins.push(require("tailwindcss"));
+      postcssOptions.plugins.push(require("autoprefixer"));
+      return postcssOptions;
+    },
+  };
+};

src/css/custom.css

@@ -15,6 +15,10 @@
   --ifm-color-primary-lighter: rgb(102, 212, 189);
   --ifm-color-primary-lightest: rgb(146, 224, 208);
 */
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 @import "./helpers.css";
 
 :root {

src/pages/hosting/index.jsx

@@ -2,10 +2,74 @@ import React from "react";
 import Layout from "@theme/Layout";
 import styles from "./styles.module.css";
 import faqStyles from "../../css/faq.module.css";
+import { InlineIcon } from "@iconify/react";
 
 const { trustUsReasonsCol, trustUsReasonsColNumber, callout, calloutHeader } =
   styles;
 
+const features = [
+  {
+    name: "Mission Critical Hosting",
+    description:
+      "Ensure your Identity and Access Management (IAM) services stay online with Phase Two's reliable, high-performance hosting for mission-critical applications. Our hosting solution guarantees uptime and optimal performance, making it perfect for businesses that require non-stop service.",
+  },
+  {
+    name: "Automatic Upgrades",
+    description:
+      "Stay updated with the latest features and security patches. Phase Two handles automatic upgrades for your Keycloak deployment, alerting you to any significant changes or potential issues, ensuring your system is always up-to-date without any disruptions.",
+  },
+  {
+    name: "Free Tier for Keycloak",
+    description:
+      "Get started with Keycloak and Phase Two's IAM hosting for free. Explore our platform, experience seamless hosting, and scale your identity management as your business grows, without upfront costs.",
+  },
+  {
+    name: "Unlimited Team Members and Users",
+    description:
+      "Invite your whole team without worrying about extra costs. Phase Two offers unlimited team members and users per project, charging only by the project, not by the number of users, ensuring predictable and scalable pricing.",
+  },
+  {
+    name: "Proactive Monitoring and Alerts",
+    description:
+      "Phase Two provides proactive monitoring and intelligent alerting to guarantee your IAM services are always running smoothly. Integrate with your preferred monitoring system for full transparency and rapid response times.",
+  },
+  {
+    name: "Global Deployments",
+    description:
+      "Deploy your IAM infrastructure across multiple regions worldwide, reducing latency and improving performance for your global users. Phase Two offers geographically distributed hosting to meet your application’s regional needs.",
+  },
+  {
+    name: "24/7 Support",
+    description:
+      "Receive dedicated, around-the-clock support from Phase Two's expert team. Whether you need troubleshooting, guidance, or solutions, our team is available 24/7 to assist you with your IAM hosting needs.",
+  },
+  {
+    name: "Delightful Extensions Included",
+    description:
+      "Leverage popular Phase Two's popular Keycloak extensions. Our hosting package includes all the our extensions by default and can be customized with additional extensions to meet your unique requirements.",
+  },
+  {
+    name: "Deploy Custom Themes",
+    description:
+      "Have a custom Keycloak theme? Phase Two makes it easy to deploy your custom theme across your identity management cluster, delivering a seamless, branded experience for your users.",
+  },
+  {
+    name: "Custom Domain Integration",
+    description:
+      "Create a unified, professional user experience by bringing your own domain to Phase Two's hosting service. Offer your users a familiar environment by linking your IAM services to a custom domain.",
+  },
+  {
+    name: "Unlimited SSO Connections",
+    description:
+      "Easily connect all your applications with unlimited Single Sign-On (SSO) connections using Keycloak and Phase Two. Manage your identity across multiple apps without the limitations of connection counts.",
+  },
+  {
+    name: "Dedicated Clusters",
+    description:
+      "For premium performance and isolation, Phase Two offers dedicated hosting clusters tailored to your application's unique requirements. Enjoy full control, enhanced security, and optimized resources with our dedicated cluster solutions.",
+  },
+];
+
 export default function Hosted() {
   return (
     <Layout
@@ -17,48 +81,8 @@ export default function Hosted() {
           <div className="pageHeroMsg">
             <h1>Premium Hosting for Keycloak</h1>
           </div>
-          <div className="pageHeroMsgIntro">
-            <p>
-              Identity and Access Management are mission critical to any
-              application. <br />
-              Self-Hosting Keycloak and keeping up to date with version releases
-              is not a simple task. As users of open source software ourselves,
-              we wanted to remove the startup friction that inevitably comes
-              with setting up a new software stack or migrating to Keycloak from
-              another Identity provider. Our <b>Hosted Keycloak</b> offering
-              allows teams to focus on rapidly implementing Identity and Access
-              Management.
-            </p>
-            <div className={`pageHeroCta`}>
-              <a href="mailto:[email protected]">
-                <button className={`btnPrimary`}>Contact Sales</button>
-              </a>
-            </div>
-            <p className="margin-top--md">
-              Looking to Self-Host Keycloak? Learn more about our
-              <a href="mailto:[email protected]" className="margin-left--sm">
-                On-Prem Deployments
-              </a>
-              .
-            </p>
-          </div>
-          <div className={styles.bgImg}>
-            <img src="/img/gradient-bg.webp" alt="Color Gradient" />
-          </div>
-          <div className={`pageHeroBgCircles`}>
-            <img src="/img/circles.svg" alt="Concentric Circles" />
-          </div>
-        </div>
-
-        <div className="contentBlock z-5">
-          <div className="contentBlockHead">
-            <h2>Keycloak as a Service</h2>
-            <h3 className="margin-top--md">
-              Managed Keycloak for the Rest of Us
-            </h3>
-          </div>
-          <div className="contentBlockBody">
-            <div className="row">
+          <div>
+            <div className="row max-w-4xl mx-auto pt-4">
               <div className="col margin-bottom--md">
                 <div className="card card--full-height text--center">
                   <div className="card__header">
@@ -117,6 +141,54 @@ export default function Hosted() {
               </div>
             </div>
           </div>
+          <div className="mt-20">
+            <div className="pageHeroCta flex gap-2 w-full justify-center">
+              <a href="mailto:[email protected]">
+                <button className={`btnSecondary`}>Contact Sales</button>
+              </a>
+              <a href="/dashboard">
+                <button className={`btnPrimary`}>Get Started</button>
+              </a>
+            </div>
+            <p className="margin-top--md">
+              Looking to Self-Host Keycloak? Learn more about our
+              <a href="mailto:[email protected]" className="margin-left--sm">
+                On-Prem Deployments
+              </a>
+              .
+            </p>
+          </div>
+          <div className={styles.bgImg}>
+            <img src="/img/gradient-bg.webp" alt="Color Gradient" />
+          </div>
+          <div className={`pageHeroBgCircles`}>
+            <img src="/img/circles.svg" alt="Concentric Circles" />
+          </div>
+        </div>
+
+        <div className="contentBlock z-5">
+          <div className="contentBlockHead">
+            <h2>Keycloak as a Service</h2>
+            <h3 className="margin-top--md text-p2blue-700">
+              Managed Keycloak for the Rest of Us
+            </h3>
+          </div>
+          <div className="contentBlockBody">
+            <dl className="mx-auto mt-10 max-w-5xl grid grid-cols-1 gap-x-8 gap-y-10 text-base leading-7 text-gray-600 sm:grid-cols-3 lg:gap-y-16 text-left">
+              {features.map((feature) => (
+                <div key={feature.name} className="relative pl-9">
+                  <dt className="font-semibold text-gray-900">
+                    <InlineIcon
+                      icon="akar-icons:check"
+                      className="w-6 h-6 absolute left-0 top-1"
+                    />
+                    {feature.name}
+                  </dt>
+                  <dd className="mt-2">{feature.description}</dd>
+                </div>
+              ))}
+            </dl>
+          </div>
         </div>
         <div className="contentBlock">
           <div className="contentBlockHead">

src/pages/index.jsx

@@ -7,6 +7,7 @@ import useBaseUrl from "@docusaurus/useBaseUrl";
 import styles from "./styles.module.css";
 import CodeBlock from "@theme/CodeBlock";
 import { KeycloakSupportPackages } from "../components/keycloak-support-packages";
+import { InlineIcon } from "@iconify/react";
 
 function requestAccess() {
   window.open(`https://phasetwo.io/dashboard/`, "_blank");
@@ -29,6 +30,63 @@ const CheckMark = () => (
   ></img>
 );
 
+const HostingItems = [
+  {
+    name: "Starter Tier, Predictable Pricing",
+    desc: "A generous free tier to get started. Test out Keycloak. See if you think it will work for your use case (we think it will). When ready to move to a paid tier, you can do so with ease and transparency.",
+    icon: "mdi:cloud-outline",
+    cta: "Get started",
+    href: "https://phasetwo.io/dashboard/",
+  },
+  {
+    name: "Multi-region, High Availability, Dedicated Clusters",
+    desc: "Hosted in multiple regions for high availability and low latency. Deploy in areas to comply with data residency requirements. Ensure uptime and performance.",
+    icon: "gis:globe-alt",
+    cta: "Learn more",
+    href: "https://phasetwo.io/hosting/",
+  },
+  {
+    name: "Customized, Automatically Updated",
+    desc: "Customize your Keycloak instance with extensions and themes. We will keep your instance up to date with the latest Keycloak releases. Spend time on your app, not on maintenance.",
+    icon: "grommet-icons:server-cluster",
+    cta: "Learn more",
+    href: "https://phasetwo.io/hosting/",
+  },
+];
+
+const SupportItems = [
+  {
+    name: "On-premise Deployments",
+    desc: "You have an on-premise installation for data residency requirements.",
+    icon: "mdi:cloud-lock-outline",
+  },
+  {
+    name: "Keycloak Scale and Growth",
+    desc: "Keycloak is working on a test app, staging, or only part of your application portfolio and are expecting large scale with your installation.",
+    icon: "fluent:arrow-growth-20-filled",
+  },
+  {
+    name: "IAM Consolidation to Keycloak",
+    desc: "You are consolidating from many Identity Providers down into Keycloak.",
+    icon: "mdi:consolidate",
+  },
+  {
+    name: "Infrastructure and Code Review",
+    desc: "You need someone to look at what you have already and make sure that it is secure and scalable",
+    icon: "streamline:code-analysis",
+  },
+  {
+    name: "Keycloak Upgrades",
+    desc: "You need help upgrading your Keycloak installation to the newest version.",
+    icon: "solar:server-square-update-broken",
+  },
+  {
+    name: "Custom Keycloak Development",
+    desc: "You need custom development for Keycloak to meet your specific needs in terms of functionality (extensions) or brand experience (theming).",
+    icon: "solar:server-square-update-broken",
+  },
+];
+
 function Home() {
   const context = useDocusaurusContext();
   const { siteConfig = {} } = context;
@@ -252,12 +310,77 @@ function Home() {
                 <p>+ many more</p>
               </div>
             </div>
-            <h1 className="margin-top--lg">Managed Keycloak Hosting</h1>
+          </div>
+        </div>
+
+        <div className="contentBlock">
+          <div className="contentBlockHead">
+            <h1 className="margin-top--xl">Managed Keycloak Hosting</h1>
             <p className={styles.heroIntegrationsCopy}>
               Phase Two provides a modern, open source alternative to fully
               replace or integrate with any IAMs available.
             </p>
           </div>
+          <div className="contentBlockBody">
+            <div className="mx-auto max-w-2xl lg:max-w-none">
+              <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-16 lg:max-w-none lg:grid-cols-3">
+                {HostingItems.map((item) => (
+                  <div key={item.name} className="flex flex-col">
+                    <dt className="flex items-center gap-x-3 text-base font-semibold leading-7 text-gray-900">
+                      <InlineIcon
+                        icon={item.icon}
+                        className="h-8 w-8 text-p2blue-700 self-start"
+                      />
+                      {item.name}
+                    </dt>
+                    <dd className="mt-4 flex flex-auto flex-col text-base leading-7 text-gray-600">
+                      <p className="flex-auto">{item.desc}</p>
+                      <p className="mt-6">
+                        <a
+                          href={item.href}
+                          className="text-sm font-semibold leading-6 text-p2blue-800"
+                        >
+                          {item.cta} <span aria-hidden="true">→</span>
+                        </a>
+                      </p>
+                    </dd>
+                  </div>
+                ))}
+              </dl>
+            </div>
+          </div>
+        </div>
+
+        {/* Enterprise SSO */}
+        <div className={`contentBlock`}>
+          <div className={`contentBlockHead`}>
+            <h2 id="openSourceSSO">Enterprise Keycloak Support</h2>
+            <p>
+              Phase Two's{" "}
+              <a href="https://phasetwo.io/support">Enterprise Support</a> is
+              ideal for many customers already using Keycloak that need to take
+              their implementation to the next level.
+            </p>
+          </div>
+          <div className={`contentBlockBody`}>
+            <div className="mx-auto max-w-2xl lg:max-w-4xl">
+              <dl className="grid max-w-xl grid-cols-1 gap-x-8 gap-y-10 lg:max-w-none lg:grid-cols-2 lg:gap-y-16">
+                {SupportItems.map((item) => (
+                  <div key={item.name} className="relative pl-16">
+                    <dt className="text-base font-semibold leading-7 text-gray-900">
+                      <div className="absolute left-0 top-0 flex h-12 w-12 items-center justify-center rounded-lg bg-p2blue-600 text-white">
+                        <InlineIcon icon={item.icon} className="h-8 w-8" />
+                      </div>
+                      {item.name}
+                    </dt>
+                    <dd className="mt-2 text-base leading-7 text-gray-600">
+                      {item.desc}
+                    </dd>
+                  </div>
+                ))}
+              </dl>
+            </div>
+          </div>
         </div>
 
         {/* Enterprise SSO */}