feat: adjust Ory Network CTA to match new-ish colors

docusaurus.config.ts

@@ -178,6 +178,16 @@ const config: Config = {
         svgrConfig: {},
       },
     ],
+    async function tailwindcss(context, options) {
+      return {
+        name: "docusaurus-tailwindcss",
+        configurePostCss(postcssOptions) {
+          // Use the new PostCSS plugin for Tailwind CSS
+          postcssOptions.plugins.push(require("@tailwindcss/postcss"))
+          return postcssOptions
+        },
+      }
+    },
   ],
   presets: [
     [

package.json

@@ -71,8 +71,10 @@
     "@playwright/test": "1.49.1",
     "@swc/core": "1.4.8",
     "@swc/jest": "0.2.36",
+    "@tailwindcss/postcss": "^4.0.17",
     "@types/jest": "29.5.12",
     "@types/node-fetch": "2.6.11",
+    "autoprefixer": "10.4.20",
     "axios-retry": "4.1.0",
     "fast-xml-parser": "^4.5.1",
     "jasmine-fail-fast": "2.0.1",
@@ -85,6 +87,8 @@
     "prettier": "3.2.5",
     "prettier-plugin-packagejson": "2.4.12",
     "raw-loader": "4.0.2",
+    "sharp": "0.33.3",
+    "tailwindcss": "4.0.17",
     "text-runner": "6.0.0",
     "wait-on": "7.2.0",
     "yaml": "2.4.1"

src/components/OryNetworkCta/ory-network-cta.tsx

@@ -6,36 +6,189 @@ const ctaVariants = [
     title: "Ory Network",
     content: (
       <>
-        The most flexible and scalable way to manage identi&shy;ties,
-        authen&shy;tication, autho&shy;rization and access control.
+        The best way to manage identities, authentication, authorization, and
+        access control—designed for speed, security, and compliance.
       </>
     ),
-    cta: "Explore Ory Network",
-    href: "https://www.ory.sh/network/?mtm_campaign=Docs-SideCta&mtm_kwd=variant-0",
+    cta: "Sign up for a free account",
+    href: "https://console.ory.sh/?mtm_campaign=Docs-SideCta&mtm_kwd=variant-0",
   },
 ]
 
 export const OryNetworkCta = () => {
   const { cta, content, title, href } = ctaVariants[0]
 
   return (
-    <a href={href} target="_blank" className="ory-network-cta">
-      <div className="ory-network-cta__background">
-        <div className="ory-network-cta__grid"></div>
-        <div className="ory-network-cta__gradient"></div>
+    <div className="bg-cyan-950 hidden p-6 flex-col items-center rounded-lg mt-4 xl:flex">
+      <div className="lg:p-6">
+        <Logo className="max-w-20 lg:max-w-32" />
       </div>
-      <div className="ory-network-cta__content">
-        <div className="ory-network-cta__title-and-paragraph">
-          <em className="ory-network-cta__title">{title}</em>
-          <p className="ory-network-cta__paragraph">
-            {content}
-            <span className="ory-network-cta__inline-get-started">
-              {cta} <span aria-hidden>-‍&gt;</span>
-            </span>
-          </p>
-        </div>
-        <div className="ory-network-cta__button">{cta}</div>
+      <div className="flex flex-col gap-2d">
+        <h3 className="text-white text-xl font-semibol">{title}</h3>
+        <p className="text-gray-100 text-sm lg:text-base">{content}</p>
+        <a
+          href={href}
+          target="_blank"
+          className="font-bold text-white hover:text-gray-50"
+        >
+          {cta}
+        </a>
       </div>
-    </a>
+    </div>
+  )
+}
+
+function Logo({ className }: { className?: string }) {
+  return (
+    <svg
+      width="100%"
+      height="100%"
+      viewBox="0 0 206 239"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        d="M103.09 1V119.366M103.09 119.366L1 178.548M103.09 119.366L205.181 178.548"
+        stroke="#67E8F9"
+        stroke-width="1.275"
+        stroke-linejoin="round"
+      />
+      <path
+        opacity="0.6"
+        d="M205.181 60.1828L103.09 1L1 60.1828V178.548L103.09 237.731L205.181 178.548V60.1828Z"
+        fill="#155E75"
+      />
+      <path
+        d="M103.089 72.0547V123.055M103.089 123.055L59.1016 148.555M103.089 123.055L147.077 148.555"
+        stroke="#06B6D4"
+        stroke-width="0.6375"
+        stroke-linejoin="round"
+      />
+      <path
+        opacity="0.6"
+        d="M147.077 97.5547L103.089 72.0547L59.1016 97.5547V148.555L103.089 174.055L147.077 148.555V97.5547Z"
+        fill="#A5F3FC"
+      />
+      <path
+        d="M147.077 97.5547L103.089 72.0547L59.1016 97.5547M147.077 97.5547L103.089 123.055M147.077 97.5547V148.555L103.089 174.055M103.089 123.055L59.1016 97.5547M103.089 123.055V174.055M59.1016 97.5547V148.555L103.089 174.055"
+        stroke="#06B6D4"
+        stroke-width="0.6375"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M54.6379 100.102V151.102M54.6379 151.102L10.6504 176.602M54.6379 151.102L98.6254 176.602"
+        stroke="#06B6D4"
+        stroke-width="0.6375"
+        stroke-linejoin="round"
+      />
+      <path
+        opacity="0.6"
+        d="M98.6254 125.602L54.6379 100.102L10.6504 125.602V176.602L54.6379 202.102L98.6254 176.602V125.602Z"
+        fill="#A5F3FC"
+      />
+      <path
+        d="M98.6254 125.602L54.6379 100.102L10.6504 125.602M98.6254 125.602L54.6379 151.102M98.6254 125.602V176.602L54.6379 202.102M54.6379 151.102L10.6504 125.602M54.6379 151.102V202.102M10.6504 125.602V176.602L54.6379 202.102"
+        stroke="#06B6D4"
+        stroke-width="0.6375"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M151.537 100.102V151.102M151.537 151.102L107.55 176.602M151.537 151.102L195.525 176.602"
+        stroke="#06B6D4"
+        stroke-width="0.6375"
+        stroke-linejoin="round"
+      />
+      <path
+        opacity="0.6"
+        d="M195.525 125.602L151.537 100.102L107.55 125.602V176.602L151.537 202.102L195.525 176.602V125.602Z"
+        fill="#A5F3FC"
+      />
+      <path
+        d="M195.525 125.602L151.537 100.102L107.55 125.602M195.525 125.602L151.537 151.102M195.525 125.602V176.602L151.537 202.102M151.537 151.102L107.55 125.602M151.537 151.102V202.102M107.55 125.602V176.602L151.537 202.102"
+        stroke="#06B6D4"
+        stroke-width="0.6375"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M103.089 128.156V179.156M103.089 179.156L59.1016 204.656M103.089 179.156L147.077 204.656"
+        stroke="#06B6D4"
+        stroke-width="0.6375"
+        stroke-linejoin="round"
+      />
+      <path
+        opacity="0.6"
+        d="M147.077 153.656L103.089 128.156L59.1016 153.656V204.656L103.089 230.156L147.077 204.656V153.656Z"
+        fill="#A5F3FC"
+      />
+      <path
+        d="M147.077 153.656L103.089 128.156L59.1016 153.656M147.077 153.656L103.089 179.156M147.077 153.656V204.656L103.089 230.156M103.089 179.156L59.1016 153.656M103.089 179.156V230.156M59.1016 153.656V204.656L103.089 230.156"
+        stroke="#06B6D4"
+        stroke-width="0.6375"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M10.6504 116.536L103.088 62.9492L195.525 116.536"
+        stroke="#155E75"
+        stroke-width="0.6375"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M103.088 12.0547V62.9484"
+        stroke="#155E75"
+        stroke-width="0.6375"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <g opacity="0.6">
+        <path
+          d="M103.088 170.122L10.6504 116.535H195.525L103.088 170.122Z"
+          fill="#22D3EE"
+        />
+        <path
+          d="M10.6504 116.534V65.6406L195.525 65.6406V116.534H10.6504Z"
+          fill="#22D3EE"
+        />
+        <path
+          d="M195.525 65.6416L103.088 12.0547L10.6504 65.6417L195.525 65.6416Z"
+          fill="#22D3EE"
+        />
+      </g>
+      <path
+        d="M10.6504 116.535L103.088 170.122L195.525 116.535"
+        stroke="#155E75"
+        stroke-width="0.6375"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M103.088 119.227V170.12"
+        stroke="#155E75"
+        stroke-width="0.6375"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M10.6504 65.6406V116.534M195.525 116.534V65.6406"
+        stroke="#155E75"
+        stroke-width="0.6375"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M103.088 12.0547L195.525 65.6416L103.088 119.229L10.6504 65.6417L103.088 12.0547Z"
+        stroke="#155E75"
+        stroke-width="0.6375"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M205.181 60.1828L103.09 1L1 60.1828M205.181 60.1828L103.09 119.366M205.181 60.1828V178.548L103.09 237.731M103.09 119.366L1 60.1828M103.09 119.366V237.731M1 60.1828V178.548L103.09 237.731"
+        stroke="#0891B2"
+        stroke-width="1.275"
+        stroke-linejoin="round"
+      />
+    </svg>
   )
 }

src/css/theme.css

@@ -1,3 +1,25 @@
+@import "tailwindcss";
+
+@config '../../tailwind.config.js';
+
+/*
+  The default border color has changed to `currentColor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentColor);
+  }
+}
+
 :root {
   --ifm-font-family-base-fallback: sans-serif;
   --ifm-font-family-monospace-fallback: monospace;

src/theme/faq.module.css

@@ -1,3 +1,5 @@
+@import "./faq.module.gen.css";
+
 .pills,
 .tabs {
   font-weight: var(--ifm-font-weight-bold);
@@ -79,5 +81,3 @@ p {
 div.question {
   display: none;
 }
-
-@import "faq.module.gen.css";

tailwind.config.js

@@ -0,0 +1,19 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.html",
+    "./src/**/*.js",
+    "./src/**/*.jsx",
+    "./src/**/*.ts",
+    "./src/**/*.tsx",
+    "./docs/**/*.mdx",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+  corePlugins: {
+    preflight: false,
+  },
+  blocklist: ["container"],
+}