Skip to content

Commit 1dc7376

Browse files
vinckrjonas-jonas
vinckr
and
jonas-jonas
authored
feat: adjust Ory Network CTA to match new-ish colors (#2082)
--------- Co-authored-by: Jonas Hungershausen <[email protected]>
1 parent b853c68 commit 1dc7376

File tree

7 files changed

+860
-4312
lines changed

7 files changed

+860
-4312
lines changed

‎docusaurus.config.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -178,6 +178,16 @@ const config: Config = {
178178
svgrConfig: {},
179179
},
180180
],
181+
async function tailwindcss(context, options) {
182+
return {
183+
name: "docusaurus-tailwindcss",
184+
configurePostCss(postcssOptions) {
185+
// Use the new PostCSS plugin for Tailwind CSS
186+
postcssOptions.plugins.push(require("@tailwindcss/postcss"))
187+
return postcssOptions
188+
},
189+
}
190+
},
181191
],
182192
presets: [
183193
[

‎package-lock.json

Lines changed: 630 additions & 4290 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,8 +71,10 @@
7171
"@playwright/test": "1.49.1",
7272
"@swc/core": "1.4.8",
7373
"@swc/jest": "0.2.36",
74+
"@tailwindcss/postcss": "^4.0.17",
7475
"@types/jest": "29.5.12",
7576
"@types/node-fetch": "2.6.11",
77+
"autoprefixer": "10.4.20",
7678
"axios-retry": "4.1.0",
7779
"fast-xml-parser": "^4.5.1",
7880
"jasmine-fail-fast": "2.0.1",
@@ -85,6 +87,8 @@
8587
"prettier": "3.2.5",
8688
"prettier-plugin-packagejson": "2.4.12",
8789
"raw-loader": "4.0.2",
90+
"sharp": "0.33.3",
91+
"tailwindcss": "4.0.17",
8892
"text-runner": "6.0.0",
8993
"wait-on": "7.2.0",
9094
"yaml": "2.4.1"

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

Lines changed: 173 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -6,36 +6,189 @@ const ctaVariants = [
66
title: "Ory Network",
77
content: (
88
<>
9-
The most flexible and scalable way to manage identi&shy;ties,
10-
authen&shy;tication, autho&shy;rization and access control.
9+
The best way to manage identities, authentication, authorization, and
10+
access control—designed for speed, security, and compliance.
1111
</>
1212
),
13-
cta: "Explore Ory Network",
14-
href: "https://www.ory.sh/network/?mtm_campaign=Docs-SideCta&mtm_kwd=variant-0",
13+
cta: "Sign up for a free account",
14+
href: "https://console.ory.sh/?mtm_campaign=Docs-SideCta&mtm_kwd=variant-0",
1515
},
1616
]
1717

1818
export const OryNetworkCta = () => {
1919
const { cta, content, title, href } = ctaVariants[0]
2020

2121
return (
22-
<a href={href} target="_blank" className="ory-network-cta">
23-
<div className="ory-network-cta__background">
24-
<div className="ory-network-cta__grid"></div>
25-
<div className="ory-network-cta__gradient"></div>
22+
<div className="bg-cyan-950 hidden p-6 flex-col items-center rounded-lg mt-4 xl:flex">
23+
<div className="lg:p-6">
24+
<Logo className="max-w-20 lg:max-w-32" />
2625
</div>
27-
<div className="ory-network-cta__content">
28-
<div className="ory-network-cta__title-and-paragraph">
29-
<em className="ory-network-cta__title">{title}</em>
30-
<p className="ory-network-cta__paragraph">
31-
{content}
32-
<span className="ory-network-cta__inline-get-started">
33-
{cta} <span aria-hidden>-‍&gt;</span>
34-
</span>
35-
</p>
36-
</div>
37-
<div className="ory-network-cta__button">{cta}</div>
26+
<div className="flex flex-col gap-2d">
27+
<h3 className="!text-white text-xl font-semibold">{title}</h3>
28+
<p className="text-gray-100 text-sm lg:text-base">{content}</p>
29+
<a
30+
href={href}
31+
target="_blank"
32+
className="font-bold !text-white hover:!text-gray-50"
33+
>
34+
{cta}
35+
</a>
3836
</div>
39-
</a>
37+
</div>
38+
)
39+
}
40+
41+
function Logo({ className }: { className?: string }) {
42+
return (
43+
<svg
44+
width="100%"
45+
height="100%"
46+
viewBox="0 0 206 239"
47+
fill="none"
48+
xmlns="http://www.w3.org/2000/svg"
49+
className={className}
50+
>
51+
<path
52+
d="M103.09 1V119.366M103.09 119.366L1 178.548M103.09 119.366L205.181 178.548"
53+
stroke="#67E8F9"
54+
stroke-width="1.275"
55+
stroke-linejoin="round"
56+
/>
57+
<path
58+
opacity="0.6"
59+
d="M205.181 60.1828L103.09 1L1 60.1828V178.548L103.09 237.731L205.181 178.548V60.1828Z"
60+
fill="#155E75"
61+
/>
62+
<path
63+
d="M103.089 72.0547V123.055M103.089 123.055L59.1016 148.555M103.089 123.055L147.077 148.555"
64+
stroke="#06B6D4"
65+
stroke-width="0.6375"
66+
stroke-linejoin="round"
67+
/>
68+
<path
69+
opacity="0.6"
70+
d="M147.077 97.5547L103.089 72.0547L59.1016 97.5547V148.555L103.089 174.055L147.077 148.555V97.5547Z"
71+
fill="#A5F3FC"
72+
/>
73+
<path
74+
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"
75+
stroke="#06B6D4"
76+
stroke-width="0.6375"
77+
stroke-linejoin="round"
78+
/>
79+
<path
80+
d="M54.6379 100.102V151.102M54.6379 151.102L10.6504 176.602M54.6379 151.102L98.6254 176.602"
81+
stroke="#06B6D4"
82+
stroke-width="0.6375"
83+
stroke-linejoin="round"
84+
/>
85+
<path
86+
opacity="0.6"
87+
d="M98.6254 125.602L54.6379 100.102L10.6504 125.602V176.602L54.6379 202.102L98.6254 176.602V125.602Z"
88+
fill="#A5F3FC"
89+
/>
90+
<path
91+
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"
92+
stroke="#06B6D4"
93+
stroke-width="0.6375"
94+
stroke-linejoin="round"
95+
/>
96+
<path
97+
d="M151.537 100.102V151.102M151.537 151.102L107.55 176.602M151.537 151.102L195.525 176.602"
98+
stroke="#06B6D4"
99+
stroke-width="0.6375"
100+
stroke-linejoin="round"
101+
/>
102+
<path
103+
opacity="0.6"
104+
d="M195.525 125.602L151.537 100.102L107.55 125.602V176.602L151.537 202.102L195.525 176.602V125.602Z"
105+
fill="#A5F3FC"
106+
/>
107+
<path
108+
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"
109+
stroke="#06B6D4"
110+
stroke-width="0.6375"
111+
stroke-linejoin="round"
112+
/>
113+
<path
114+
d="M103.089 128.156V179.156M103.089 179.156L59.1016 204.656M103.089 179.156L147.077 204.656"
115+
stroke="#06B6D4"
116+
stroke-width="0.6375"
117+
stroke-linejoin="round"
118+
/>
119+
<path
120+
opacity="0.6"
121+
d="M147.077 153.656L103.089 128.156L59.1016 153.656V204.656L103.089 230.156L147.077 204.656V153.656Z"
122+
fill="#A5F3FC"
123+
/>
124+
<path
125+
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"
126+
stroke="#06B6D4"
127+
stroke-width="0.6375"
128+
stroke-linejoin="round"
129+
/>
130+
<path
131+
d="M10.6504 116.536L103.088 62.9492L195.525 116.536"
132+
stroke="#155E75"
133+
stroke-width="0.6375"
134+
stroke-linecap="round"
135+
stroke-linejoin="round"
136+
/>
137+
<path
138+
d="M103.088 12.0547V62.9484"
139+
stroke="#155E75"
140+
stroke-width="0.6375"
141+
stroke-linecap="round"
142+
stroke-linejoin="round"
143+
/>
144+
<g opacity="0.6">
145+
<path
146+
d="M103.088 170.122L10.6504 116.535H195.525L103.088 170.122Z"
147+
fill="#22D3EE"
148+
/>
149+
<path
150+
d="M10.6504 116.534V65.6406L195.525 65.6406V116.534H10.6504Z"
151+
fill="#22D3EE"
152+
/>
153+
<path
154+
d="M195.525 65.6416L103.088 12.0547L10.6504 65.6417L195.525 65.6416Z"
155+
fill="#22D3EE"
156+
/>
157+
</g>
158+
<path
159+
d="M10.6504 116.535L103.088 170.122L195.525 116.535"
160+
stroke="#155E75"
161+
stroke-width="0.6375"
162+
stroke-linecap="round"
163+
stroke-linejoin="round"
164+
/>
165+
<path
166+
d="M103.088 119.227V170.12"
167+
stroke="#155E75"
168+
stroke-width="0.6375"
169+
stroke-linecap="round"
170+
stroke-linejoin="round"
171+
/>
172+
<path
173+
d="M10.6504 65.6406V116.534M195.525 116.534V65.6406"
174+
stroke="#155E75"
175+
stroke-width="0.6375"
176+
stroke-linecap="round"
177+
stroke-linejoin="round"
178+
/>
179+
<path
180+
d="M103.088 12.0547L195.525 65.6416L103.088 119.229L10.6504 65.6417L103.088 12.0547Z"
181+
stroke="#155E75"
182+
stroke-width="0.6375"
183+
stroke-linecap="round"
184+
stroke-linejoin="round"
185+
/>
186+
<path
187+
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"
188+
stroke="#0891B2"
189+
stroke-width="1.275"
190+
stroke-linejoin="round"
191+
/>
192+
</svg>
40193
)
41194
}

‎src/css/theme.css

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,25 @@
1+
@import "tailwindcss";
2+
3+
@config '../../tailwind.config.js';
4+
5+
/*
6+
The default border color has changed to `currentColor` in Tailwind CSS v4,
7+
so we've added these compatibility styles to make sure everything still
8+
looks the same as it did with Tailwind CSS v3.
9+
10+
If we ever want to remove these styles, we need to add an explicit border
11+
color utility to any element that depends on these defaults.
12+
*/
13+
@layer base {
14+
*,
15+
::after,
16+
::before,
17+
::backdrop,
18+
::file-selector-button {
19+
border-color: var(--color-gray-200, currentColor);
20+
}
21+
}
22+
123
:root {
224
--ifm-font-family-base-fallback: sans-serif;
325
--ifm-font-family-monospace-fallback: monospace;

‎src/theme/faq.module.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import "./faq.module.gen.css";
2+
13
.pills,
24
.tabs {
35
font-weight: var(--ifm-font-weight-bold);
@@ -79,5 +81,3 @@ p {
7981
div.question {
8082
display: none;
8183
}
82-
83-
@import "faq.module.gen.css";

‎tailwind.config.js

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
/** @type {import('tailwindcss').Config} */
2+
module.exports = {
3+
content: [
4+
"./src/**/*.html",
5+
"./src/**/*.js",
6+
"./src/**/*.jsx",
7+
"./src/**/*.ts",
8+
"./src/**/*.tsx",
9+
"./docs/**/*.mdx",
10+
],
11+
theme: {
12+
extend: {},
13+
},
14+
plugins: [],
15+
corePlugins: {
16+
preflight: false,
17+
},
18+
blocklist: ["container"],
19+
}

0 commit comments

Comments
 (0)