@redocly/marketing-pages 0.1.32 → 0.1.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import e,{useEffect as
|
|
1
|
+
import e,{useEffect as V}from"react";import l from"styled-components";import{breakpoints as o}from"@redocly/theme/core/utils";import{Tooltip as M}from"@redocly/theme/components/Tooltip/Tooltip";import{Extras as i,Period as P,Plan as O,Product as a}from"../../pricing/types/types";import{periodsList as L,pricePerProject as F,productItems as I}from"../../pricing/pricingData/data";import{Currency as f,PriceAndCurrency as x,StyledBadge as W,TextPer as g}from"../../pricing/components/PlansSection";import{chooseProduct as u,choosePeriod as z,choosePlan as B}from"../../pricing/calculations";import{Switcher as h}from"./Switcher";import{PlanSwitcherControl as N}from"./PlanSwitcher";import{changeExtrasValue as s,inputValueMap as d,isFocusedMap as r}from"../calculations/changeExtrasValue";const ve=({calculatorProperties:t,setCalculatorProperties:c})=>(V(()=>{r[i.SEATS]||(d[i.SEATS]=t.numOfSeats.toString()),r[i.PAGES]||(d[i.PAGES]=t.numOfPages.toString()),r[i.PROJECTS]||(d[i.PROJECTS]=t.projectsNumber.toString())},[t.numOfSeats,t.numOfPages,t.projectsNumber]),e.createElement(ce,null,e.createElement(de,null,e.createElement(p,null,"Customize your plan"),e.createElement(N,{value:t.plan,onChange:n=>B(c,n)})),e.createElement(te,null,e.createElement(ae,null,e.createElement("p",null,"Seats"),e.createElement(oe,null,e.createElement(m,{placeholder:"40",pattern:"\\d+(\\.\\d+)?",value:r[i.SEATS]?d[i.SEATS]:t.numOfSeats.toString(),onChange:n=>s(c,n,i.SEATS),onFocus:n=>{r[i.SEATS]=!0,n.target.select()},onBlur:()=>{r[i.SEATS]=!1,d[i.SEATS]=""}}),e.createElement(le,{tip:"Seats count for users who have the OWNER, MEMBER, or COMMITTER roles. Additional roles such as BILLING and VIEWER are users that do not count towards your seat limits.",width:"fit-content",children:e.createElement("img",{src:require("../images/tooltip.svg"),style:{maxWidth:"14px"}})}))),e.createElement(ne,null,e.createElement(re,null,L.map(n=>e.createElement(ie,{key:n,onClick:()=>z(c,n,t.plan),selected:t.period===n},e.createElement(k,null,n,"ly")))),t.period===P.MONTH&&e.createElement(W,{src:require("../images/save-one-month-badge.svg")}))),e.createElement(ee,null,e.createElement(p,null,"Products"),e.createElement(_,null,e.createElement(Y,{className:t.coreProducts.includes(a.REALM)||t.coreProducts.length===3?"selected":""},e.createElement(X,{gap:"4px"},e.createElement(Q,{className:t.coreProducts.includes(a.REALM)||t.coreProducts.length===3?"selected":""},a.REALM),e.createElement(K,null,"All combined (Redoc + Revel + Reef)")),e.createElement(h,{onClick:()=>u(c,a.REALM,t.coreProducts),activeColor:"linear-gradient(90deg, #1677ff 0%, #08c7e0 100%)",isActive:t.coreProducts.includes(a.REALM)||t.coreProducts.length===3})),e.createElement(U,null,I.map((n,R)=>n.title!==a.REALM&&e.createElement(J,{key:R,className:t.coreProducts.includes(n.title)||t.coreProducts.length===3?"selected":"",bgColor:n.bgColor},e.createElement($,{className:t.coreProducts.includes(n.title)||t.coreProducts.length===3?"selected":"",bgImage:n.title===a.REDOC&&`url(${require("../images/redoc-bg.svg")})`||n.title===a.REEF&&`url(${require("../images/reef-bg.svg")})`||n.title===a.REVEL&&`url(${require("../images/revel-bg.svg")})`||"",bgColor:n.bgColor},e.createElement(G,{textColor:n.titleColor},n.title),e.createElement(q,null,n.features&&n.features.map((T,H)=>e.createElement(D,{primaryColor:n.titleColor,key:H},e.createElement("svg",{width:"14",height:"14",viewBox:"0 0 14 14",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("path",{d:"M5.6875 10.5L1.75 6.56247L2.36863 5.94385L5.6875 9.26228L11.6314 3.31885L12.25 3.93747L5.6875 10.5Z",fill:"inherit"})),e.createElement("p",null,T)))),e.createElement(h,{onClick:()=>u(c,n.title,t.coreProducts),activeColor:n.titleColor,isActive:t.coreProducts.includes(n.title)||t.coreProducts.length===3}))))))),e.createElement(j,null,e.createElement(p,null,"Extras"),e.createElement(Z,null,e.createElement(S,null,e.createElement(A,null,e.createElement(C,null,"Pages"),e.createElement(y,null,e.createElement(m,{style:{maxWidth:"409px",width:"100%"},placeholder:"40",pattern:"\\d+(\\.\\d+)?",value:r[i.PAGES]?d[i.PAGES]:t.numOfPages.toString(),onChange:n=>s(c,n,i.PAGES),onFocus:n=>{r[i.PAGES]=!0,n.target.select()},onBlur:()=>{r[i.PAGES]=!1,d[i.PAGES]=""}}),e.createElement(v,null,e.createElement(x,null,e.createElement(b,null,"$0.12"),e.createElement(f,null,"USD"),e.createElement(g,null,"per extra page / month")),e.createElement(w,null,"Number of pages in your website (keep in mind each API operation is a page). Price tiers down with volume.",e.createElement("br",null),t.plan===O.PRO?`100 pages included with ${t.plan}`:`500 pages included with ${t.plan}`,"."))),e.createElement(E,null,e.createElement("svg",{width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("rect",{width:"40",height:"40",rx:"20",fill:"#EBFAF3"}),e.createElement("path",{d:"M26.0625 15.8125L21.6875 11.4375C21.5625 11.3125 21.4375 11.25 21.25 11.25H15C14.3125 11.25 13.75 11.8125 13.75 12.5V27.5C13.75 28.1875 14.3125 28.75 15 28.75H25C25.6875 28.75 26.25 28.1875 26.25 27.5V16.25C26.25 16.0625 26.1875 15.9375 26.0625 15.8125ZM21.25 12.75L24.75 16.25H21.25V12.75ZM25 27.5H15V12.5H20V16.25C20 16.9375 20.5625 17.5 21.25 17.5H25V27.5Z",fill:"#06A192"}),e.createElement("path",{d:"M23.75 23.75H16.25V25H23.75V23.75Z",fill:"#06A192"}),e.createElement("path",{d:"M23.75 20H16.25V21.25H23.75V20Z",fill:"#06A192"}))))),e.createElement(S,null,e.createElement(A,null,e.createElement(C,null,"Projects"),e.createElement(y,null,e.createElement(m,{style:{maxWidth:"409px",width:"100%"},placeholder:"40",pattern:"\\d+(\\.\\d+)?",value:r[i.PROJECTS]?d[i.PROJECTS]:t.projectsNumber.toString(),onChange:n=>s(c,n,i.PROJECTS),onFocus:n=>{r[i.PROJECTS]=!0,n.target.select()},onBlur:()=>{r[i.PROJECTS]=!1,d[i.PROJECTS]=""}}),e.createElement(v,null,e.createElement(x,null,e.createElement(b,null,"$",F),e.createElement(f,null,"USD"),e.createElement(g,null,"per extra project / month")),e.createElement(w,null,"A project results in a website. Each project can have its own custom domain.",e.createElement("br",null),"1 project included."))),e.createElement(E,null,e.createElement("svg",{width:"40",height:"40",viewBox:"0 0 40 40",fill:"none",xmlns:"http://www.w3.org/2000/svg"},e.createElement("rect",{width:"40",height:"40",rx:"20",fill:"#FFF4E8"}),e.createElement("path",{d:"M18.75 21.25H15V22.5H18.75V21.25Z",fill:"#FF5722"}),e.createElement("path",{d:"M21.25 23.75H15V25H21.25V23.75Z",fill:"#FF5722"}),e.createElement("path",{d:"M26.25 12.5H13.75C13.4186 12.5004 13.1009 12.6322 12.8666 12.8666C12.6322 13.1009 12.5004 13.4186 12.5 13.75V26.25C12.5004 26.5814 12.6322 26.8991 12.8666 27.1334C13.1009 27.3678 13.4186 27.4996 13.75 27.5H26.25C26.5814 27.4996 26.8991 27.3678 27.1334 27.1334C27.3678 26.8991 27.4996 26.5814 27.5 26.25V13.75C27.4996 13.4186 27.3678 13.1009 27.1334 12.8666C26.8991 12.6322 26.5814 12.5004 26.25 12.5ZM21.25 13.75V16.25H18.75V13.75H21.25ZM13.75 26.25V13.75H17.5V17.5H22.5V13.75H26.25L26.2507 26.25H13.75Z",fill:"#FF5722"}))))))))),E=l.div`
|
|
2
2
|
position: absolute;
|
|
3
3
|
right: 4px;
|
|
4
4
|
top: 4px;
|
|
@@ -10,7 +10,7 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
|
|
|
10
10
|
line-height: 20px;
|
|
11
11
|
|
|
12
12
|
margin: 0;
|
|
13
|
-
`,
|
|
13
|
+
`,w=l.p`
|
|
14
14
|
color: #555761;
|
|
15
15
|
|
|
16
16
|
font-family: var(--font-family);
|
|
@@ -19,12 +19,12 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
|
|
|
19
19
|
line-height: 22px;
|
|
20
20
|
|
|
21
21
|
margin: 0;
|
|
22
|
-
`,
|
|
22
|
+
`,v=l.div`
|
|
23
23
|
display: flex;
|
|
24
24
|
flex-direction: column;
|
|
25
25
|
align-items: flex-start;
|
|
26
26
|
gap: 8px;
|
|
27
|
-
`,
|
|
27
|
+
`,y=l.div`
|
|
28
28
|
display: flex;
|
|
29
29
|
flex-direction: column;
|
|
30
30
|
align-items: flex-start;
|
|
@@ -38,7 +38,7 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
|
|
|
38
38
|
line-height: 24px;
|
|
39
39
|
|
|
40
40
|
margin: 0;
|
|
41
|
-
|
|
41
|
+
`,S=l.div`
|
|
42
42
|
border-radius: 16px;
|
|
43
43
|
background: linear-gradient(90deg, #fbfbfc 60%, transparent 50%);
|
|
44
44
|
width: 100%;
|
|
@@ -60,24 +60,52 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
|
|
|
60
60
|
border-radius: 16px;
|
|
61
61
|
|
|
62
62
|
height: 100%;
|
|
63
|
-
|
|
63
|
+
|
|
64
|
+
/* Extend bottom border to cover bottom-right corner */
|
|
65
|
+
&::after {
|
|
66
|
+
content: '';
|
|
67
|
+
position: absolute;
|
|
68
|
+
bottom: -1px;
|
|
69
|
+
right: 0;
|
|
70
|
+
width: 20px;
|
|
71
|
+
height: 20px;
|
|
72
|
+
border-bottom: 1px solid #ededf2;
|
|
73
|
+
border-right: 1px solid #ededf2;
|
|
74
|
+
border-bottom-right-radius: 16px;
|
|
75
|
+
pointer-events: none;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* Extend left border to cover top-left corner intersection, but stop before concave */
|
|
79
|
+
&::before {
|
|
80
|
+
content: '';
|
|
81
|
+
position: absolute;
|
|
82
|
+
top: 0;
|
|
83
|
+
left: -1px;
|
|
84
|
+
width: 20px;
|
|
85
|
+
height: 20px;
|
|
86
|
+
border-left: 1px solid #ededf2;
|
|
87
|
+
border-top: 1px solid #ededf2;
|
|
88
|
+
border-top-left-radius: 16px;
|
|
89
|
+
pointer-events: none;
|
|
90
|
+
}
|
|
91
|
+
`,Z=l.div`
|
|
64
92
|
display: flex;
|
|
65
93
|
flex-direction: column;
|
|
66
94
|
gap: 16px;
|
|
67
95
|
|
|
68
|
-
@media screen and (min-width: ${
|
|
96
|
+
@media screen and (min-width: ${o.small}) {
|
|
69
97
|
flex-direction: row;
|
|
70
98
|
}
|
|
71
|
-
`,
|
|
99
|
+
`,j=l.div`
|
|
72
100
|
display: flex;
|
|
73
101
|
flex-direction: column;
|
|
74
102
|
align-items: flex-start;
|
|
75
103
|
gap: 16px;
|
|
76
|
-
`,
|
|
104
|
+
`,q=l.div`
|
|
77
105
|
display: flex;
|
|
78
106
|
gap: 4px 12px;
|
|
79
107
|
flex-wrap: wrap;
|
|
80
|
-
`,
|
|
108
|
+
`,D=l.div`
|
|
81
109
|
display: flex;
|
|
82
110
|
align-items: center;
|
|
83
111
|
gap: 4px;
|
|
@@ -112,7 +140,7 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
|
|
|
112
140
|
&.selected {
|
|
113
141
|
background: ${({bgColor:t})=>`linear-gradient(90deg, ${t} 60%, transparent 50%)`};
|
|
114
142
|
}
|
|
115
|
-
|
|
143
|
+
`,$=l.div`
|
|
116
144
|
display: flex;
|
|
117
145
|
padding: 16px 20px;
|
|
118
146
|
flex-direction: column;
|
|
@@ -128,17 +156,53 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
|
|
|
128
156
|
border-bottom: 1px solid #ededf2;
|
|
129
157
|
height: 100%;
|
|
130
158
|
|
|
159
|
+
/* Extend bottom border to cover bottom-right corner */
|
|
160
|
+
&::after {
|
|
161
|
+
content: '';
|
|
162
|
+
position: absolute;
|
|
163
|
+
bottom: -1px;
|
|
164
|
+
right: 0;
|
|
165
|
+
width: 20px;
|
|
166
|
+
height: 20px;
|
|
167
|
+
border-bottom: 1px solid #ededf2;
|
|
168
|
+
border-right: 1px solid #ededf2;
|
|
169
|
+
border-bottom-right-radius: 16px;
|
|
170
|
+
pointer-events: none;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
/* Extend left border to cover top-left corner intersection, but stop before concave */
|
|
174
|
+
&::before {
|
|
175
|
+
content: '';
|
|
176
|
+
position: absolute;
|
|
177
|
+
top: 0;
|
|
178
|
+
left: -1px;
|
|
179
|
+
width: 20px;
|
|
180
|
+
height: 20px;
|
|
181
|
+
border-left: 1px solid #ededf2;
|
|
182
|
+
border-top: 1px solid #ededf2;
|
|
183
|
+
border-top-left-radius: 16px;
|
|
184
|
+
pointer-events: none;
|
|
185
|
+
}
|
|
186
|
+
|
|
131
187
|
&.selected {
|
|
132
188
|
background-image: ${({bgImage:t})=>t};
|
|
133
189
|
border-left: ${({bgColor:t})=>`1px solid ${t}`};
|
|
134
190
|
border-bottom: ${({bgColor:t})=>`1px solid ${t}`};
|
|
191
|
+
|
|
192
|
+
&::after {
|
|
193
|
+
display: none;
|
|
194
|
+
}
|
|
195
|
+
|
|
196
|
+
&::before {
|
|
197
|
+
display: none;
|
|
198
|
+
}
|
|
135
199
|
}
|
|
136
200
|
`,U=l.div`
|
|
137
201
|
display: flex;
|
|
138
202
|
flex-direction: column;
|
|
139
203
|
gap: 16px;
|
|
140
204
|
|
|
141
|
-
@media screen and (min-width: ${
|
|
205
|
+
@media screen and (min-width: ${o.small}) {
|
|
142
206
|
flex-direction: row;
|
|
143
207
|
}
|
|
144
208
|
`,K=l.p`
|
|
@@ -171,12 +235,12 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
|
|
|
171
235
|
flex-direction: column;
|
|
172
236
|
gap: ${({gap:t})=>t};
|
|
173
237
|
flex: 1 0 0;
|
|
174
|
-
`,Y=l(
|
|
238
|
+
`,Y=l($)`
|
|
175
239
|
&.selected {
|
|
176
240
|
background-image: url(${require("../images/realm-bg.svg")}),
|
|
177
241
|
url(${require("../../pricing/images/bg-realm-circle.svg")});
|
|
178
242
|
border-bottom: 0;
|
|
179
|
-
border-left:
|
|
243
|
+
border-left: 0;
|
|
180
244
|
}
|
|
181
245
|
`,_=l.div`
|
|
182
246
|
display: flex;
|
|
@@ -197,7 +261,7 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
|
|
|
197
261
|
justify-content: space-between;
|
|
198
262
|
margin-top: 32px;
|
|
199
263
|
|
|
200
|
-
@media screen and (min-width: ${
|
|
264
|
+
@media screen and (min-width: ${o.small}) {
|
|
201
265
|
flex-direction: row;
|
|
202
266
|
}
|
|
203
267
|
`,ne=l.div`
|
|
@@ -206,14 +270,14 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
|
|
|
206
270
|
align-items: flex-end;
|
|
207
271
|
margin-top: 40px;
|
|
208
272
|
|
|
209
|
-
@media screen and (min-width: ${
|
|
273
|
+
@media screen and (min-width: ${o.small}) {
|
|
210
274
|
margin-top: 0;
|
|
211
275
|
}
|
|
212
|
-
`,le=l(
|
|
276
|
+
`,le=l(M)`
|
|
213
277
|
span {
|
|
214
278
|
min-width: 400px;
|
|
215
279
|
}
|
|
216
|
-
`,
|
|
280
|
+
`,k=l.p`
|
|
217
281
|
color: var(--segmented-buttons-content-color);
|
|
218
282
|
font-family: var(--font-family);
|
|
219
283
|
font-size: 14px;
|
|
@@ -228,7 +292,7 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
|
|
|
228
292
|
align-items: center;
|
|
229
293
|
width: 50%;
|
|
230
294
|
|
|
231
|
-
${
|
|
295
|
+
${k} {
|
|
232
296
|
font-weight: ${({selected:t})=>t&&"500"};
|
|
233
297
|
color: ${({selected:t})=>t&&"var(--segmented-buttons-content-color-active)"};
|
|
234
298
|
background-color: ${({selected:t})=>t&&"var(--color-white)"};
|
|
@@ -244,10 +308,10 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
|
|
|
244
308
|
border-radius: 6px;
|
|
245
309
|
background: var(--segmented-buttons-bg-color-main);
|
|
246
310
|
|
|
247
|
-
@media screen and (min-width: ${
|
|
311
|
+
@media screen and (min-width: ${o.small}) {
|
|
248
312
|
z-index: 1;
|
|
249
313
|
}
|
|
250
|
-
`,
|
|
314
|
+
`,m=l.input`
|
|
251
315
|
padding: 0 12px;
|
|
252
316
|
border: 1px solid var(--color-warm-grey-3);
|
|
253
317
|
border-radius: 6px;
|
|
@@ -262,14 +326,14 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
|
|
|
262
326
|
border: 1px solid var(--color-blue-6);
|
|
263
327
|
}
|
|
264
328
|
|
|
265
|
-
@media screen and (min-width: ${
|
|
329
|
+
@media screen and (min-width: ${o.small}) {
|
|
266
330
|
max-width: 93px;
|
|
267
331
|
}
|
|
268
|
-
`,
|
|
332
|
+
`,oe=l.div`
|
|
269
333
|
display: flex;
|
|
270
334
|
align-items: center;
|
|
271
335
|
gap: 4px;
|
|
272
|
-
`,
|
|
336
|
+
`,ae=l.div`
|
|
273
337
|
display: flex;
|
|
274
338
|
flex-direction: column;
|
|
275
339
|
gap: 8px;
|
|
@@ -278,48 +342,11 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
|
|
|
278
342
|
margin: 0;
|
|
279
343
|
}
|
|
280
344
|
|
|
281
|
-
@media screen and (min-width: ${
|
|
345
|
+
@media screen and (min-width: ${o.small}) {
|
|
282
346
|
flex-direction: row;
|
|
283
347
|
align-items: center;
|
|
284
348
|
}
|
|
285
|
-
`,
|
|
286
|
-
display: flex;
|
|
287
|
-
padding: 8px 24px;
|
|
288
|
-
flex-direction: column;
|
|
289
|
-
justify-content: center;
|
|
290
|
-
align-items: center;
|
|
291
|
-
flex: 1 0 0;
|
|
292
|
-
|
|
293
|
-
border-radius: 8px;
|
|
294
|
-
background: ${({isSelected:t})=>t?"#2A2B33":"transparent"};
|
|
295
|
-
|
|
296
|
-
&:hover {
|
|
297
|
-
background: ${({isSelected:t})=>t?"#2A2B33":"#F3F3F6"};
|
|
298
|
-
}
|
|
299
|
-
|
|
300
|
-
p {
|
|
301
|
-
color: ${({isSelected:t})=>t?"#FFF":"#3B3C45"};
|
|
302
|
-
font-family: 'Red Hat Display';
|
|
303
|
-
font-size: 20px;
|
|
304
|
-
font-weight: 600;
|
|
305
|
-
line-height: 28px;
|
|
306
|
-
|
|
307
|
-
margin: 0;
|
|
308
|
-
}
|
|
309
|
-
`,ce=l.div`
|
|
310
|
-
display: flex;
|
|
311
|
-
flex-direction: column;
|
|
312
|
-
padding: 4px;
|
|
313
|
-
gap: 4px;
|
|
314
|
-
border-radius: 12px;
|
|
315
|
-
border: 1px solid #ededf2;
|
|
316
|
-
background: #fff;
|
|
317
|
-
cursor: pointer;
|
|
318
|
-
|
|
319
|
-
@media screen and (min-width: ${a.small}) {
|
|
320
|
-
flex-direction: row;
|
|
321
|
-
}
|
|
322
|
-
`,f=l.p`
|
|
349
|
+
`,p=l.p`
|
|
323
350
|
color: #1a1c21;
|
|
324
351
|
text-align: center;
|
|
325
352
|
|
|
@@ -330,15 +357,15 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
|
|
|
330
357
|
|
|
331
358
|
margin: 0;
|
|
332
359
|
|
|
333
|
-
@media screen and (min-width: ${
|
|
360
|
+
@media screen and (min-width: ${o.small}) {
|
|
334
361
|
text-align: left;
|
|
335
362
|
}
|
|
336
|
-
`,
|
|
363
|
+
`,de=l.div`
|
|
337
364
|
display: flex;
|
|
338
365
|
flex-direction: column;
|
|
339
366
|
gap: 16px;
|
|
340
367
|
width: 100%;
|
|
341
|
-
`,
|
|
368
|
+
`,ce=l.div`
|
|
342
369
|
display: flex;
|
|
343
370
|
flex-direction: column;
|
|
344
371
|
align-items: center;
|
|
@@ -346,11 +373,11 @@ import e,{useEffect as P}from"react";import l from"styled-components";import{bre
|
|
|
346
373
|
max-width: 914px;
|
|
347
374
|
padding: 0 16px 48px 16px;
|
|
348
375
|
|
|
349
|
-
@media screen and (min-width: ${
|
|
376
|
+
@media screen and (min-width: ${o.small}) {
|
|
350
377
|
padding: 0 96px 48px 96px;
|
|
351
378
|
}
|
|
352
|
-
@media screen and (min-width: ${
|
|
379
|
+
@media screen and (min-width: ${o.medium}) {
|
|
353
380
|
padding: 0 0 64px 0;
|
|
354
381
|
margin: 0 auto;
|
|
355
382
|
}
|
|
356
|
-
`;export{
|
|
383
|
+
`;export{ve as CalculatorWrapper};
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import r,{useEffect as f,useMemo as u,useState as b}from"react";import i from"styled-components";import{breakpoints as d}from"@redocly/theme/core/utils";import{plansList as n}from"../../pricing/pricingData/data";const D=({value:e,onChange:a,transitionMs:p=250})=>{const o=u(()=>Math.max(0,n.findIndex(t=>t.name===e)),[e]),[c,x]=b(o);f(()=>{x(o)},[o]);const m=t=>{const s=n.length-1;if(t.key==="ArrowRight"||t.key==="ArrowDown"){t.preventDefault();const l=Math.min(s,o+1);a(n[l].name)}else if(t.key==="ArrowLeft"||t.key==="ArrowUp"){t.preventDefault();const l=Math.max(0,o-1);a(n[l].name)}};return r.createElement(w,{role:"tablist","aria-label":"Select plan",tabIndex:0,onKeyDown:m},r.createElement(y,{count:n.length,style:{"--index":c,transitionDuration:`${p}ms`}}),n.map((t,s)=>r.createElement(g,{as:"button",type:"button",key:t.name,role:"tab","aria-selected":e===t.name,"aria-controls":`plan-panel-${t.name}`,isSelected:e===t.name,isVisuallySelected:s===c,onClick:()=>a(t.name)},r.createElement(h,null,t.name))))},h=i.p`
|
|
2
|
+
color: inherit;
|
|
3
|
+
font-family: 'Red Hat Display';
|
|
4
|
+
font-size: 20px;
|
|
5
|
+
font-weight: 600;
|
|
6
|
+
line-height: 28px;
|
|
7
|
+
margin: 0;
|
|
8
|
+
position: relative;
|
|
9
|
+
z-index: 2;
|
|
10
|
+
`,g=i.div`
|
|
11
|
+
display: flex;
|
|
12
|
+
padding: 8px 24px;
|
|
13
|
+
flex-direction: column;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
align-items: center;
|
|
16
|
+
flex: 1 0 0;
|
|
17
|
+
|
|
18
|
+
border-radius: 8px;
|
|
19
|
+
background: transparent;
|
|
20
|
+
position: relative;
|
|
21
|
+
color: ${({isVisuallySelected:e})=>e?"#FFF":"#3B3C45"};
|
|
22
|
+
border: none;
|
|
23
|
+
outline: none;
|
|
24
|
+
cursor: pointer;
|
|
25
|
+
|
|
26
|
+
&::before {
|
|
27
|
+
content: '';
|
|
28
|
+
position: absolute;
|
|
29
|
+
inset: 0;
|
|
30
|
+
border-radius: 8px;
|
|
31
|
+
background: transparent;
|
|
32
|
+
z-index: 0;
|
|
33
|
+
transition: background 0.2s ease;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
&:hover::before {
|
|
37
|
+
background: ${({isSelected:e})=>e?"transparent":"#F3F3F6"};
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&:focus-visible {
|
|
41
|
+
box-shadow: 0 0 0 2px rgba(22, 119, 255, 0.4) inset;
|
|
42
|
+
}
|
|
43
|
+
`,w=i.div`
|
|
44
|
+
display: flex;
|
|
45
|
+
flex-direction: column;
|
|
46
|
+
padding: 4px;
|
|
47
|
+
gap: 4px;
|
|
48
|
+
border-radius: 12px;
|
|
49
|
+
border: 1px solid #ededf2;
|
|
50
|
+
background: #fff;
|
|
51
|
+
cursor: pointer;
|
|
52
|
+
position: relative;
|
|
53
|
+
overflow: hidden;
|
|
54
|
+
|
|
55
|
+
@media screen and (min-width: ${d.small}) {
|
|
56
|
+
flex-direction: row;
|
|
57
|
+
}
|
|
58
|
+
`,y=i.div`
|
|
59
|
+
position: absolute;
|
|
60
|
+
border-radius: 8px;
|
|
61
|
+
background: #2a2b33;
|
|
62
|
+
z-index: 1;
|
|
63
|
+
pointer-events: none;
|
|
64
|
+
transition-property: transform, width, height;
|
|
65
|
+
transition-timing-function: ease;
|
|
66
|
+
|
|
67
|
+
/* mobile: vertical */
|
|
68
|
+
top: 4px;
|
|
69
|
+
left: 4px;
|
|
70
|
+
width: calc(100% - 8px);
|
|
71
|
+
height: calc((100% - 8px - ((${({count:e})=>e}) - 1) * 4px) / ${({count:e})=>e});
|
|
72
|
+
transform: translateY(calc(var(--index) * (100% + 4px)));
|
|
73
|
+
|
|
74
|
+
@media screen and (min-width: ${d.small}) {
|
|
75
|
+
/* desktop: horizontal */
|
|
76
|
+
top: 4px;
|
|
77
|
+
left: 4px;
|
|
78
|
+
width: calc((100% - 8px - ((${({count:e})=>e}) - 1) * 4px) / ${({count:e})=>e});
|
|
79
|
+
height: calc(100% - 8px);
|
|
80
|
+
transform: translateX(calc(var(--index) * (100% + 4px)));
|
|
81
|
+
}
|
|
82
|
+
`;export{D as PlanSwitcherControl};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
<svg width="
|
|
2
|
-
<mask id="path-1-inside-
|
|
3
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 0C7.16344 0 0 7.16345 0 16V70C0 78.8366 7.16342 86 16
|
|
1
|
+
<svg width="914" height="86" viewBox="0 0 914 86" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<mask id="path-1-inside-1_16_2" fill="white">
|
|
3
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 0C7.16344 0 0 7.16345 0 16V70C0 78.8366 7.16342 86 16 86H898C906.837 86 914 78.8366 914 70V42C914 35.3726 908.627 30 902 30H882C873.163 30 866 22.8366 866 14V12C866 5.37258 860.627 0 854 0H16Z"/>
|
|
4
4
|
</mask>
|
|
5
|
-
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 0C7.16344 0 0 7.16345 0 16V70C0 78.8366 7.16342 86 16
|
|
6
|
-
<path d="M1 16C1 7.71573 7.71573 1 16 1V-1C6.61116 -1 -1 6.61116 -1 16H1ZM1 70V16H-1V70H1ZM16 85C7.7157 85 1 78.2843 1 70H-1C-1 79.3888 6.61113 87 16
|
|
5
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M16 0C7.16344 0 0 7.16345 0 16V70C0 78.8366 7.16342 86 16 86H898C906.837 86 914 78.8366 914 70V42C914 35.3726 908.627 30 902 30H882C873.163 30 866 22.8366 866 14V12C866 5.37258 860.627 0 854 0H16Z" fill="none"/>
|
|
6
|
+
<path d="M1 16C1 7.71573 7.71573 1 16 1V-1C6.61116 -1 -1 6.61116 -1 16H1ZM1 70V16H-1V70H1ZM16 85C7.7157 85 1 78.2843 1 70H-1C-1 79.3888 6.61113 87 16 87V85ZM898 85H16V87H898V85ZM913 70C913 78.2843 906.284 85 898 85V87C907.389 87 915 79.3888 915 70H913ZM913 42V70H915V42H915ZM902 29H882V31H902V29ZM882 29C873.716 29 867 22.2843 867 14H865C865 23.3888 872.611 31 882 31V29ZM867 14V12H865V14H867ZM16 1H854V-1H16V1ZM867 12C867 4.8203 861.18 -1 854 -1V1C860.075 1 865 5.92486 865 12H867ZM915 42C915 34.8203 909.18 29 902 29V31C908.075 31 913 35.9249 913 42H915Z" fill="url(#paint0_linear_17_10)" fill-opacity="0.2" mask="url(#path-1-inside-1_16_2)"/>
|
|
7
7
|
<defs>
|
|
8
|
-
<linearGradient id="paint0_linear_17_10" x1="0" y1="43" x2="
|
|
8
|
+
<linearGradient id="paint0_linear_17_10" x1="0" y1="43" x2="914" y2="43" gradientUnits="userSpaceOnUse">
|
|
9
9
|
<stop stop-color="#1677FF"/>
|
|
10
10
|
<stop offset="1" stop-color="#08C7E0"/>
|
|
11
11
|
</linearGradient>
|