hds-web 1.7.4 → 1.7.6
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.
- package/dist/index.css +2 -2
- package/dist/index.es.css +2 -2
- package/dist/index.es.js +5 -5
- package/dist/index.js +6 -6
- package/package.json +2 -1
- package/src/HDS/components/Buttons/button.js +7 -4
- package/src/HDS/components/Cards/BrandCard/brandCard.js +37 -13
- package/src/HDS/components/Cards/Misc/iconCard.js +44 -14
- package/src/HDS/components/Headers/v3Header.js +168 -25
- package/src/HDS/components/Hero/h2.js +2 -2
- package/src/HDS/components/Hero/heroIntegration.js +163 -0
- package/src/HDS/components/Hero/index.js +2 -1
- package/src/HDS/components/Pre-footers/index.js +0 -0
- package/src/HDS/components/Pre-footers/linkImagePF.js +69 -0
- package/src/HDS/components/index.js +2 -1
- package/src/HDS/modules/TextCard/textCard.js +82 -70
- package/src/index.css +176 -0
- package/src/styles/tailwind.css +368 -7
- package/tailwind.config.js +4 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "hds-web",
|
|
3
|
-
"version": "1.7.
|
|
3
|
+
"version": "1.7.6",
|
|
4
4
|
"private": false,
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.es.js",
|
|
@@ -11,6 +11,7 @@
|
|
|
11
11
|
"@testing-library/jest-dom": "^5.16.5",
|
|
12
12
|
"@testing-library/react": "^13.4.0",
|
|
13
13
|
"@testing-library/user-event": "^13.5.0",
|
|
14
|
+
"framer-motion": "^10.12.16",
|
|
14
15
|
"prismjs": "^1.29.0",
|
|
15
16
|
"prop-types": "^15.8.1",
|
|
16
17
|
"react": "^17.0.1",
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import PropTypes from 'prop-types';
|
|
3
3
|
import { Icon } from '../common-components/Icon';
|
|
4
|
+
import { HDSColor } from '../../foundation/ColorPalette';
|
|
4
5
|
|
|
5
6
|
const ANIMATED_ARR_CLASSES = {
|
|
6
7
|
'icon1':{
|
|
@@ -66,7 +67,7 @@ const Buttonclasses = {
|
|
|
66
67
|
'primaryLink': {
|
|
67
68
|
'default': {
|
|
68
69
|
'base': 'db:w-fit tb:w-fit w-full justify-center ',
|
|
69
|
-
'hover': '
|
|
70
|
+
'hover': '',
|
|
70
71
|
'focus': 'focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none focus:text-blue-600',
|
|
71
72
|
},
|
|
72
73
|
'disabled': 'text-neutral-300',
|
|
@@ -115,6 +116,7 @@ const Buttonclasses = {
|
|
|
115
116
|
export default function Button(props) {
|
|
116
117
|
const {
|
|
117
118
|
btnTextColorClass,
|
|
119
|
+
btnTextHoverClass,
|
|
118
120
|
btnBgColorClass,
|
|
119
121
|
rightIconVariant,
|
|
120
122
|
rightIconColor,
|
|
@@ -155,7 +157,8 @@ export default function Button(props) {
|
|
|
155
157
|
Buttonclasses['buttonSizes'][`${sizeType}`][`${size}`],
|
|
156
158
|
'group',
|
|
157
159
|
defaultClasses,
|
|
158
|
-
className
|
|
160
|
+
className,
|
|
161
|
+
HDSColor(btnTextHoverClass)
|
|
159
162
|
|
|
160
163
|
].join(' ');
|
|
161
164
|
|
|
@@ -179,7 +182,7 @@ export default function Button(props) {
|
|
|
179
182
|
)}
|
|
180
183
|
{label}
|
|
181
184
|
|
|
182
|
-
{rightAnimatedArrow && rightAnimatedArrow !== 'none' && type
|
|
185
|
+
{rightAnimatedArrow && rightAnimatedArrow !== 'none' && type!=='iconOnly' && (
|
|
183
186
|
<div className={ `group-hover:transition-all ${animatedHoverStroke}`}>
|
|
184
187
|
<Icon className='z-10 stroke-2 group-hover:translate-x-[0.15rem] group-hover:transition-all group-hover:duration-300' height={`${ANIMATED_ARR_CLASSES['icon1'][`${size}`]} ${animatedHoverStroke}`} variant={'chevronright'} strokeColor={rightAnimatedArrowColor} />
|
|
185
188
|
|
|
@@ -217,11 +220,11 @@ Button.defaultProps = {
|
|
|
217
220
|
rightIconVariant: 'home3',
|
|
218
221
|
rightIconColor: '#FFFFFF',
|
|
219
222
|
leftIconColor: '#FFFFFF',
|
|
220
|
-
animatedHoverStroke:'#FFFFFF',
|
|
221
223
|
state: 'default',
|
|
222
224
|
label: 'Button',
|
|
223
225
|
rightAnimatedArrow: 'True' ,
|
|
224
226
|
rightAnimatedArrowColor: '#FFFFFF',
|
|
225
227
|
animatedHoverStroke: 'group-hover:stroke-neutral-0',
|
|
228
|
+
btnTextHoverClass: 'hover:text-neutral-0'
|
|
226
229
|
|
|
227
230
|
};
|
|
@@ -8,26 +8,50 @@ import PropTypes from 'prop-types';
|
|
|
8
8
|
export default function BrandCard(props) {
|
|
9
9
|
return (
|
|
10
10
|
<>
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
<
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
11
|
+
{false ?
|
|
12
|
+
(<div>
|
|
13
|
+
<div className="pt-10 db:pt-20">
|
|
14
|
+
<Typography textStyle="h6" as="h6" className="pb-6 db:pb-10 text-center text-neutral-400 uppercase">40+ of the fortune100 companies use hasura</Typography>
|
|
15
|
+
<div className=" grid grid-cols-2 tb:grid-cols-4 db:grid-cols-4 db:gap-x-8 db:gap-y-2"
|
|
16
|
+
>
|
|
17
|
+
{
|
|
18
|
+
props.imgArray.map((brand, index) => (
|
|
19
|
+
<div key={index}>
|
|
20
|
+
<img src={brand.imgSrc} alt={brand.imgAlt} />
|
|
21
|
+
</div>
|
|
22
|
+
))
|
|
23
|
+
}
|
|
24
|
+
</div>
|
|
23
25
|
</div>
|
|
24
26
|
</div>
|
|
25
|
-
|
|
27
|
+
)
|
|
28
|
+
:
|
|
29
|
+
(
|
|
30
|
+
<>
|
|
31
|
+
<div className="pt-10 db:pt-20">
|
|
32
|
+
<Typography textStyle="h6" as="h6" className="pb-6 db:pb-10 text-center text-neutral-400 uppercase">40+ of the fortune100 companies use hasura</Typography>
|
|
33
|
+
<div className="gridAutoClass"
|
|
34
|
+
>
|
|
35
|
+
{props.imgArray.map((brand, index) => (
|
|
36
|
+
<div key={index} className='border'>
|
|
37
|
+
<img src={brand.imgSrc} alt={brand.imgAlt} />
|
|
38
|
+
</div>
|
|
39
|
+
))
|
|
40
|
+
|
|
41
|
+
}
|
|
42
|
+
</div>
|
|
43
|
+
</div>
|
|
44
|
+
</>
|
|
45
|
+
)
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
}
|
|
26
49
|
</>
|
|
27
50
|
)
|
|
28
51
|
}
|
|
29
52
|
|
|
30
53
|
BrandCard.defaultProps = {
|
|
54
|
+
rotate: 'false',
|
|
31
55
|
imgArray: [
|
|
32
56
|
{ imgSrc: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1682487186/hasura-con-2023/costco_eb2lmu.png', imgAlt: '' },
|
|
33
57
|
{ imgSrc: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1682487186/hasura-con-2023/verizon_sj4rgc.png', imgAlt: '' },
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
import PropTypes from 'prop-types';
|
|
2
3
|
import { Icon } from "../../common-components/Icon";
|
|
3
4
|
import { HDSColor } from '../../../foundation/ColorPalette'
|
|
4
5
|
import { Typography } from '../../../foundation/Typography'
|
|
@@ -71,26 +72,52 @@ export default function IconCard(props) {
|
|
|
71
72
|
{props.description}
|
|
72
73
|
</ReactMarkdown>
|
|
73
74
|
</Typography>
|
|
75
|
+
{props.readMoreBtn && (
|
|
76
|
+
<a href={props.readMoreBtn.cta_link} className='flex'>
|
|
77
|
+
<HDSButton
|
|
78
|
+
label={props.readMoreBtn.cta_text}
|
|
79
|
+
type='secondaryLink'
|
|
80
|
+
leftIconVariant='none'
|
|
81
|
+
rightIconVariant='none'
|
|
82
|
+
state='default'
|
|
83
|
+
size='sm'
|
|
84
|
+
rightAnimatedArrow={true}
|
|
85
|
+
rightAnimatedArrowColor='#3970FD'
|
|
86
|
+
animatedHoverStroke='#3970FD'
|
|
87
|
+
btnTextColorClass='text-blue-500'
|
|
88
|
+
btnTextHoverClass=''
|
|
89
|
+
className=' mt-4'
|
|
90
|
+
/>
|
|
91
|
+
</a>
|
|
92
|
+
)
|
|
93
|
+
|
|
94
|
+
}
|
|
74
95
|
</>
|
|
75
96
|
)
|
|
76
97
|
}
|
|
77
98
|
</div>
|
|
78
99
|
</div>
|
|
79
|
-
{props.
|
|
80
|
-
<div className="flex
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
100
|
+
{props.button &&
|
|
101
|
+
<div className="flex gap-2">
|
|
102
|
+
{props.button.map((btn, index) => (
|
|
103
|
+
<a href={btn.cta_link} key={index} className="flex self-end mt-7">
|
|
104
|
+
<HDSButton
|
|
105
|
+
label={btn.cta_text}
|
|
106
|
+
type={btn.cta_type || 'secondary'}
|
|
107
|
+
leftIconVariant='none'
|
|
108
|
+
rightIconVariant='none'
|
|
109
|
+
state='default'
|
|
110
|
+
size='sm'
|
|
111
|
+
rightAnimatedArrow={true}
|
|
112
|
+
rightAnimatedArrowColor={btn.rightAnimatedArrowColor ||'#3970FD'}
|
|
113
|
+
btnBgColorClass={btn.btnBg}
|
|
114
|
+
btnTextHoverClass={btn.btnTextColorClass}
|
|
115
|
+
animatedHoverStroke={btn.animatedHoverStroke}
|
|
116
|
+
/>
|
|
117
|
+
</a>))
|
|
118
|
+
}
|
|
92
119
|
</div>
|
|
93
|
-
|
|
120
|
+
}
|
|
94
121
|
|
|
95
122
|
|
|
96
123
|
|
|
@@ -101,4 +128,7 @@ export default function IconCard(props) {
|
|
|
101
128
|
IconCard.defaultProps = {
|
|
102
129
|
cardType: 'withoutButton',
|
|
103
130
|
iconStrokeClass: 'stroke-neutral-1000'
|
|
131
|
+
}
|
|
132
|
+
Icon.propTypes = {
|
|
133
|
+
cardType: PropTypes.oneOf(['withoutButton', 'withButton', 'sm']),
|
|
104
134
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {useState} from 'react';
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
2
|
import { Fragment } from 'react';
|
|
3
3
|
import { Popover, Transition } from '@headlessui/react';
|
|
4
4
|
import { Icon } from '../common-components/Icon';
|
|
@@ -33,16 +33,16 @@ function classNames(...classes) {
|
|
|
33
33
|
}
|
|
34
34
|
|
|
35
35
|
export default function V3Header(props) {
|
|
36
|
-
|
|
36
|
+
const [mobileNavOpen, toggleMobileNav] = useState(false);
|
|
37
37
|
const [isShowing, setIsShowing] = useState(false)
|
|
38
38
|
|
|
39
39
|
const dropdown = (solutions) => (
|
|
40
40
|
<Transition
|
|
41
41
|
as={Fragment}
|
|
42
42
|
enter="transition ease-out duration-300"
|
|
43
|
-
enterFrom="opacity-0 translate-y-
|
|
44
|
-
enterTo="opacity-100 translate-y-
|
|
45
|
-
leave="transition ease-in duration-
|
|
43
|
+
enterFrom="opacity-0 -translate-y-[0px] "
|
|
44
|
+
enterTo="opacity-100 translate-y-[0px]"
|
|
45
|
+
leave="transition ease-in-out duration-300"
|
|
46
46
|
leaveFrom="opacity-100 translate-y-0"
|
|
47
47
|
leaveTo="opacity-0 translate-y-1"
|
|
48
48
|
>
|
|
@@ -117,7 +117,7 @@ export default function V3Header(props) {
|
|
|
117
117
|
<>
|
|
118
118
|
{HEADER_LIST.map((item, index) => (
|
|
119
119
|
<Popover className="relative" key={index}>
|
|
120
|
-
{({ open
|
|
120
|
+
{({ open }) => (
|
|
121
121
|
<>
|
|
122
122
|
<Popover.Button
|
|
123
123
|
className={classNames(
|
|
@@ -126,17 +126,17 @@ export default function V3Header(props) {
|
|
|
126
126
|
)}
|
|
127
127
|
onMouseEnter={() => setIsShowing(true)}
|
|
128
128
|
onMouseLeave={() => setIsShowing(false)}
|
|
129
|
-
|
|
129
|
+
|
|
130
130
|
>
|
|
131
131
|
<div className='flex flex-col items-center'>
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
132
|
+
<Typography textStyle='body3c-medium' className=''>{`${item['title']}`}</Typography>
|
|
133
|
+
{open && (
|
|
134
|
+
<div className='absolute z-20 top-8'>
|
|
135
|
+
{/* <Icon variant='triangle' height='h-4 w-4' strokeClass='stroke-neutral-1000' /> */}
|
|
136
|
+
|
|
137
|
+
</div>
|
|
138
|
+
|
|
139
|
+
)}
|
|
140
140
|
</div>
|
|
141
141
|
</Popover.Button>
|
|
142
142
|
<div className=''>
|
|
@@ -152,9 +152,23 @@ export default function V3Header(props) {
|
|
|
152
152
|
</>
|
|
153
153
|
)
|
|
154
154
|
|
|
155
|
+
let class1;
|
|
156
|
+
let class2;
|
|
157
|
+
let class3;
|
|
158
|
+
if (mobileNavOpen) {
|
|
159
|
+
class1 = "rotate-45 ";
|
|
160
|
+
class2 = "opacity-0 ";
|
|
161
|
+
class3 = "-rotate-45 ";
|
|
162
|
+
}
|
|
163
|
+
if (!mobileNavOpen) {
|
|
164
|
+
class1 = "-translate-y-1.5 ";
|
|
165
|
+
class2 = "";
|
|
166
|
+
class3 = "translate-y-1.5 ";
|
|
167
|
+
}
|
|
168
|
+
|
|
155
169
|
return (
|
|
156
170
|
<Popover className="relative">
|
|
157
|
-
<div className={`flex items-center ${HDSColor(props.headerBg)} justify-between
|
|
171
|
+
<div className={`flex items-center ${HDSColor(props.headerBg)} justify-between py-4 pl-6 tb:px-8 db:px-[100px] db:py-6 tb-l:justify-between tb-l:space-x-6`}>
|
|
158
172
|
<div className='flex items-center'>
|
|
159
173
|
<a href={props.headerUrl} className="flex items-center">
|
|
160
174
|
<Icon height='w-[103px] h-[33px]' variant={'hasuraPrimary'} strokeColor={''} />
|
|
@@ -172,7 +186,7 @@ export default function V3Header(props) {
|
|
|
172
186
|
<div>
|
|
173
187
|
|
|
174
188
|
</div>
|
|
175
|
-
<a href='' className='hidden tb:flex'>
|
|
189
|
+
<a href='#' className='hidden tb:flex'>
|
|
176
190
|
<Typography textStyle='body3c-medium' className='text-neutral-800'>
|
|
177
191
|
Contact Sales
|
|
178
192
|
</Typography>
|
|
@@ -207,19 +221,99 @@ export default function V3Header(props) {
|
|
|
207
221
|
|
|
208
222
|
|
|
209
223
|
</div>
|
|
210
|
-
<div className="tb-l:hidden flex items-center">
|
|
211
|
-
<Popover.Button className="inline-flex items-center justify-center rounded-md bg-white pl-6 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
|
|
212
|
-
<span className="sr-only">Open menu</span>
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
224
|
+
<div className="tb-l:hidden overflow-auto flex items-center">
|
|
225
|
+
{/* <Popover.Button className="inline-flex items-center justify-center rounded-md bg-white pl-6 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
|
|
226
|
+
<span className="sr-only">Open menu</span> */}
|
|
227
|
+
|
|
228
|
+
<div className="tb:hidden absolute right-4 top-1/2 block w-5 h-5 z-[60]" onClick={() => toggleMobileNav(!mobileNavOpen)}>
|
|
229
|
+
<div aria-hidden="true" className={`${class1}block absolute h-0.5 w-5 bg-neutral-800 transform transition duration-500 ease-in-out`}></div>
|
|
230
|
+
<div aria-hidden="true" className={`${class2}block absolute h-0.5 w-5 bg-neutral-800 transform transition duration-500 ease-in-out`}></div>
|
|
231
|
+
<div aria-hidden="true" className={`${class3}block absolute h-0.5 w-5 bg-neutral-800 transform transition duration-500 ease-in-out`}></div>
|
|
232
|
+
</div>
|
|
233
|
+
|
|
234
|
+
<div className={"overflow-y-auto z-50 bg-neutral-100 tb:hidden block fixed w-full tb:max-w-[240px] tb:left-auto tb:right-4 mx-auto left-4 top-0 transform transition duration-500 ease-in-out h-[calc(100%-1px)]" + ((mobileNavOpen) ? " translate-x-0" : " translate-x-[1240px]")}>
|
|
235
|
+
<div className="bg-neutral-100 grid rounded-2xl h-screen ">
|
|
236
|
+
<div className="flex flex-col justify-between">
|
|
237
|
+
<div className="flex flex-col justify-between rounded-2xl h-full">
|
|
238
|
+
<div className=" mt-20 flex flex-col gap-6 ml-4">
|
|
239
|
+
<div className='flex flex-col mr-8 items-center'>
|
|
240
|
+
<img
|
|
241
|
+
className="inline-block w-full "
|
|
242
|
+
src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1683015500/hasura-con-2023/engage_clgotb.png"
|
|
243
|
+
alt=""
|
|
244
|
+
/>
|
|
245
|
+
</div>
|
|
246
|
+
|
|
247
|
+
<nav className="grid divide-y mr-8 bg-neutral-0 divide-neutral-200 border border-neutral-200 rounded-3xl ">
|
|
248
|
+
{props.HEADER_LIST.map((item) => (
|
|
249
|
+
<a
|
|
250
|
+
key={item['title']}
|
|
251
|
+
href='#'
|
|
252
|
+
className="flex justify-between items-center p-4"
|
|
253
|
+
>
|
|
254
|
+
|
|
255
|
+
<div className="flex items-center justify-center gap-2 ">
|
|
256
|
+
|
|
257
|
+
<Icon height='h-5 w-5' variant={'home03'} strokeColor={'#3970FD'} />
|
|
258
|
+
|
|
259
|
+
|
|
260
|
+
<Typography textStyle='body3c-medium' className='text-neutral-900'>
|
|
261
|
+
{`${item['title']}`}
|
|
262
|
+
</Typography>
|
|
263
|
+
</div>
|
|
264
|
+
|
|
265
|
+
<Icon height='h-5 w-5 stroke-[1.5px]' variant={'chevronright'} strokeClass='stroke-neutral-500' />
|
|
266
|
+
</a>
|
|
267
|
+
))}
|
|
268
|
+
</nav>
|
|
269
|
+
</div>
|
|
270
|
+
<div className="py-6 shadow-sh1 bg-neutral-0 px-5 mr-2 self-end w-full">
|
|
271
|
+
<div className="">
|
|
272
|
+
<div className='flex flex-row justify-around'>
|
|
273
|
+
<div className='w-full flex gap-2'>
|
|
274
|
+
<div className='w-1/2'>
|
|
275
|
+
<HDSButton
|
|
276
|
+
label="Log In"
|
|
277
|
+
type='tonal'
|
|
278
|
+
leftIconVariant='none'
|
|
279
|
+
rightIconVariant='none'
|
|
280
|
+
state='default'
|
|
281
|
+
size='sm'
|
|
282
|
+
rightAnimatedArrow='true'
|
|
283
|
+
rightAnimatedArrowColor='#3970FD'
|
|
284
|
+
animatedHoverStroke='group-hover:stroke-neutral-0'
|
|
285
|
+
|
|
286
|
+
|
|
287
|
+
/>
|
|
288
|
+
</div>
|
|
289
|
+
<div className='w-1/2'>
|
|
290
|
+
<HDSButton
|
|
291
|
+
label="Sign up"
|
|
292
|
+
type='primary'
|
|
293
|
+
leftIconVariant='none'
|
|
294
|
+
rightIconVariant='none'
|
|
295
|
+
state='default'
|
|
296
|
+
size='sm'
|
|
297
|
+
rightAnimatedArrow='true'
|
|
298
|
+
rightAnimatedArrowColor='#ffffff'
|
|
299
|
+
animatedHoverStroke='group-hover:stroke-neutral-0'
|
|
300
|
+
/>
|
|
301
|
+
</div>
|
|
302
|
+
</div>
|
|
303
|
+
</div>
|
|
304
|
+
</div>
|
|
305
|
+
</div>
|
|
306
|
+
</div>
|
|
307
|
+
</div>
|
|
216
308
|
</div>
|
|
217
|
-
</
|
|
309
|
+
</div>
|
|
310
|
+
|
|
218
311
|
</div>
|
|
219
312
|
</div>
|
|
220
313
|
|
|
221
314
|
</div>
|
|
222
315
|
|
|
316
|
+
{/* mobile menu */}
|
|
223
317
|
<Transition
|
|
224
318
|
as={Fragment}
|
|
225
319
|
enter="duration-200 ease-out"
|
|
@@ -252,7 +346,7 @@ export default function V3Header(props) {
|
|
|
252
346
|
{props.HEADER_LIST.map((item) => (
|
|
253
347
|
<a
|
|
254
348
|
key={item['title']}
|
|
255
|
-
|
|
349
|
+
href='#'
|
|
256
350
|
className="flex justify-between items-center p-4"
|
|
257
351
|
>
|
|
258
352
|
|
|
@@ -311,6 +405,7 @@ export default function V3Header(props) {
|
|
|
311
405
|
</div>
|
|
312
406
|
</Popover.Panel>
|
|
313
407
|
</Transition>
|
|
408
|
+
{/* mobile menu */}
|
|
314
409
|
</Popover>
|
|
315
410
|
)
|
|
316
411
|
}
|
|
@@ -388,6 +483,54 @@ V3Header.defaultProps = {
|
|
|
388
483
|
},
|
|
389
484
|
]
|
|
390
485
|
},
|
|
486
|
+
{
|
|
487
|
+
|
|
488
|
+
title: 'Pricing',
|
|
489
|
+
titleDropdown: [
|
|
490
|
+
{
|
|
491
|
+
name: 'Analytics',
|
|
492
|
+
description: 'Get a better understanding of where your traffic is coming from.',
|
|
493
|
+
href: '#',
|
|
494
|
+
icon: 'home03',
|
|
495
|
+
},
|
|
496
|
+
{
|
|
497
|
+
name: 'Engagement',
|
|
498
|
+
description: 'Speak directly to your customers in a more meaningful way.',
|
|
499
|
+
href: '#',
|
|
500
|
+
icon: 'home03',
|
|
501
|
+
},
|
|
502
|
+
{
|
|
503
|
+
name: 'Security',
|
|
504
|
+
description: 'Your customers’ data will be safe and secure.',
|
|
505
|
+
href: '#',
|
|
506
|
+
icon: 'home03'
|
|
507
|
+
},
|
|
508
|
+
]
|
|
509
|
+
},
|
|
510
|
+
{
|
|
511
|
+
|
|
512
|
+
title: 'Pricing',
|
|
513
|
+
titleDropdown: [
|
|
514
|
+
{
|
|
515
|
+
name: 'Analytics',
|
|
516
|
+
description: 'Get a better understanding of where your traffic is coming from.',
|
|
517
|
+
href: '#',
|
|
518
|
+
icon: 'home03',
|
|
519
|
+
},
|
|
520
|
+
{
|
|
521
|
+
name: 'Engagement',
|
|
522
|
+
description: 'Speak directly to your customers in a more meaningful way.',
|
|
523
|
+
href: '#',
|
|
524
|
+
icon: 'home03',
|
|
525
|
+
},
|
|
526
|
+
{
|
|
527
|
+
name: 'Security',
|
|
528
|
+
description: 'Your customers’ data will be safe and secure.',
|
|
529
|
+
href: '#',
|
|
530
|
+
icon: 'home03'
|
|
531
|
+
},
|
|
532
|
+
]
|
|
533
|
+
},
|
|
391
534
|
|
|
392
535
|
],
|
|
393
536
|
headerUrl: 'https://hasura.io/'
|
|
@@ -112,7 +112,7 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
|
|
|
112
112
|
|
|
113
113
|
{heroData.buttons[0] &&
|
|
114
114
|
<HDSButton
|
|
115
|
-
type="secondary"
|
|
115
|
+
type={heroData.buttons[0].cta_type || "secondary"}
|
|
116
116
|
btnTextColorClass={HDSColor('text-neutral-0')}
|
|
117
117
|
leftIconVariant='none'
|
|
118
118
|
rightIconVariant='none'
|
|
@@ -124,7 +124,7 @@ export default function HeroSecondary({ heroData, logo, scrollArrow, fontSize })
|
|
|
124
124
|
/>
|
|
125
125
|
}
|
|
126
126
|
{heroData.buttons[1] && <HDSButton
|
|
127
|
-
type="primaryLink"
|
|
127
|
+
type={heroData.buttons[0].cta_type || "primaryLink"}
|
|
128
128
|
btnTextColorClass={HDSColor('text-neutral-0')}
|
|
129
129
|
leftIconVariant='none'
|
|
130
130
|
rightIconVariant='none'
|