hds-web 1.1.3 → 1.1.5
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 +6 -6
- package/dist/index.js +6 -6
- package/package.json +1 -1
- package/src/HDS/components/Cards/BrandCard/brandCard.js +41 -0
- package/src/HDS/components/Cards/BrandCard/index.js +1 -0
- package/src/HDS/components/Cards/Dropdown/index.js +0 -0
- package/src/HDS/components/Cards/Link/resources.js +0 -1
- package/src/HDS/components/Cards/Misc/talkCard.js +10 -5
- package/src/HDS/components/Cards/index.js +6 -1
- package/src/HDS/components/Carousels/carousel.js +0 -1
- package/src/HDS/components/Carousels/carouselCard.js +4 -4
- package/src/HDS/components/Headers/v3Header.js +164 -159
- package/src/HDS/components/Snippet/CodeSnippet.js +0 -1
- package/src/HDS/components/Tables/tableB.js +92 -74
- package/src/HDS/foundation/ColorPalette/color.js +0 -1
- package/src/HDS/modules/TextCard/textCard.js +0 -1
- package/src/styles/tailwind.css +29 -9
package/package.json
CHANGED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Icon } from "../../common-components/Icon";
|
|
3
|
+
import { HDSColor } from '../../../foundation/ColorPalette';
|
|
4
|
+
import { Typography } from '../../../foundation/Typography';
|
|
5
|
+
import PropTypes from 'prop-types';
|
|
6
|
+
|
|
7
|
+
|
|
8
|
+
export default function BrandCard(props) {
|
|
9
|
+
return (
|
|
10
|
+
<>
|
|
11
|
+
<div>
|
|
12
|
+
<div className="pt-10 db:pt-20">
|
|
13
|
+
<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>
|
|
14
|
+
<div className=" grid grid-cols-2 tb:grid-cols-4 db:grid-cols-4 db:gap-x-8 db:gap-y-2"
|
|
15
|
+
>
|
|
16
|
+
{
|
|
17
|
+
props.imgArray.map((brand, index) => (
|
|
18
|
+
<div key={index}>
|
|
19
|
+
<img src={brand.imgSrc} alt={brand.imgAlt} />
|
|
20
|
+
</div>
|
|
21
|
+
))
|
|
22
|
+
}
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
</>
|
|
27
|
+
)
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
BrandCard.defaultProps = {
|
|
31
|
+
imgArray: [
|
|
32
|
+
{ imgSrc: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1682487186/hasura-con-2023/costco_eb2lmu.png', imgAlt: '' },
|
|
33
|
+
{ imgSrc: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1682487186/hasura-con-2023/verizon_sj4rgc.png', imgAlt: '' },
|
|
34
|
+
{ imgSrc: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1682487186/hasura-con-2023/costco_eb2lmu.png', imgAlt: '' },
|
|
35
|
+
{ imgSrc: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1682487186/hasura-con-2023/costco_eb2lmu.png', imgAlt: '' },
|
|
36
|
+
{ imgSrc: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1682487186/hasura-con-2023/costco_eb2lmu.png', imgAlt: '' },
|
|
37
|
+
{ imgSrc: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1682487186/hasura-con-2023/costco_eb2lmu.png', imgAlt: '' },
|
|
38
|
+
{ imgSrc: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1682487186/hasura-con-2023/costco_eb2lmu.png', imgAlt: '' },
|
|
39
|
+
{ imgSrc: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1682487186/hasura-con-2023/costco_eb2lmu.png', imgAlt: '' },
|
|
40
|
+
]
|
|
41
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {default as BrandCard} from './brandCard';
|
|
File without changes
|
|
@@ -6,14 +6,16 @@ import { Time } from "../../../helpers/Time";
|
|
|
6
6
|
import { HDSButton } from '../../Buttons'
|
|
7
7
|
|
|
8
8
|
export default function TalkCard(props) {
|
|
9
|
+
let CardClass = ''
|
|
10
|
+
if (props.speakerSet === undefined && props.eventTime === undefined){
|
|
11
|
+
CardClass = 'flex';
|
|
12
|
+
}
|
|
13
|
+
else CardClass = 'grid shadow';
|
|
9
14
|
return (
|
|
10
15
|
|
|
11
16
|
<div className=" ">
|
|
12
|
-
|
|
13
|
-
<div className="grid rounded-3xl shadow bg-neutral-0 grid-cols-1 tb:grid-cols-2 border border-neutral-200 w-full max-w-[882px] ">
|
|
17
|
+
<div className={`${CardClass} rounded-3xl bg-neutral-0 grid-cols-1 tb:grid-cols-2 border border-neutral-200 w-full max-w-[882px]`}>
|
|
14
18
|
<div className="px-8 py-6 border-b border-b-neutral-150 tb:border-0 tb:border-r tb:border-r-neutral-150" >
|
|
15
|
-
|
|
16
|
-
|
|
17
19
|
<Badges
|
|
18
20
|
size={props.badges.size}
|
|
19
21
|
color={props.badges.color}
|
|
@@ -26,6 +28,9 @@ export default function TalkCard(props) {
|
|
|
26
28
|
<Typography className='my-2 text-neutral-700' textStyle='body1'>{props.para}</Typography>
|
|
27
29
|
</div>
|
|
28
30
|
|
|
31
|
+
{props.speakerSet &&
|
|
32
|
+
props.eventTime &&
|
|
33
|
+
|
|
29
34
|
<div className="flex flex-col pt-0 tb:pt-[2.875rem] justify-between">
|
|
30
35
|
{
|
|
31
36
|
props.speakerSet && (
|
|
@@ -57,7 +62,7 @@ export default function TalkCard(props) {
|
|
|
57
62
|
label=''
|
|
58
63
|
/>
|
|
59
64
|
</div>
|
|
60
|
-
</div>
|
|
65
|
+
</div>}
|
|
61
66
|
</div>
|
|
62
67
|
</div>
|
|
63
68
|
|
|
@@ -22,10 +22,10 @@ export default function Carouseltest(props) {
|
|
|
22
22
|
}, 0);
|
|
23
23
|
setTotalContainerWidth(totalCardsWidth);
|
|
24
24
|
const noOfcardsinaview = (visibleCardsContainerWidth/cardWidth);
|
|
25
|
-
|
|
25
|
+
|
|
26
26
|
const cardLength = props.length;
|
|
27
27
|
setTotalCards(cardLength);
|
|
28
|
-
|
|
28
|
+
|
|
29
29
|
setTotalClick(2*(cardLength/noOfcardsinaview));
|
|
30
30
|
|
|
31
31
|
|
|
@@ -68,7 +68,7 @@ export default function Carouseltest(props) {
|
|
|
68
68
|
};
|
|
69
69
|
|
|
70
70
|
const nextCard = () => {
|
|
71
|
-
|
|
71
|
+
|
|
72
72
|
if (currentCard >= totalCards-1 || currentCard > totalClick+1) {
|
|
73
73
|
scrollToCard(0);
|
|
74
74
|
} else {
|
|
@@ -94,7 +94,7 @@ export default function Carouseltest(props) {
|
|
|
94
94
|
// let y = (totalContainerWidth/(noOfcardsinaview*visibleCardsContainerWidth))*(noOfcardsinaview*(currentCard+1));
|
|
95
95
|
|
|
96
96
|
// }
|
|
97
|
-
|
|
97
|
+
|
|
98
98
|
let slider1 = (384/(totalCards*cardWidth)) * (328)* (currentCard+noOfcardsinaview);
|
|
99
99
|
if(slider1>384){
|
|
100
100
|
slider1 = 384;
|
|
@@ -24,41 +24,92 @@ const solutions = [
|
|
|
24
24
|
href: '#',
|
|
25
25
|
icon: 'home03'
|
|
26
26
|
},
|
|
27
|
-
{
|
|
28
|
-
name: 'Integrations',
|
|
29
|
-
description: "Connect with third-party tools that you're already using.",
|
|
30
|
-
href: '#',
|
|
31
|
-
icon: 'home03',
|
|
32
|
-
},
|
|
33
|
-
{
|
|
34
|
-
name: 'Automations',
|
|
35
|
-
description: 'Build strategic funnels that will drive your customers to convert',
|
|
36
|
-
href: '#',
|
|
37
|
-
icon: 'home03',
|
|
38
|
-
},
|
|
39
|
-
{
|
|
40
|
-
name: 'Reports',
|
|
41
|
-
description: 'Get detailed reports that will help you make more informed decisions ',
|
|
42
|
-
href: '#',
|
|
43
|
-
icon: 'home03',
|
|
44
|
-
},
|
|
45
|
-
]
|
|
46
|
-
const resources = [
|
|
47
|
-
{
|
|
48
|
-
name: 'Help Center',
|
|
49
|
-
description: 'Get all of your questions answered in our forums or contact support.',
|
|
50
|
-
href: '#',
|
|
51
|
-
},
|
|
52
|
-
{ name: 'Guides', description: 'Learn how to maximize our platform to get the most out of it.', href: '#' },
|
|
53
|
-
{ name: 'Events', description: 'See what meet-ups and other events we might be planning near you.', href: '#' },
|
|
54
|
-
{ name: 'Security', description: 'Understand how we take your privacy seriously.', href: '#' },
|
|
55
27
|
]
|
|
56
28
|
|
|
57
29
|
function classNames(...classes) {
|
|
58
30
|
return classes.filter(Boolean).join(' ')
|
|
59
31
|
}
|
|
60
32
|
|
|
61
|
-
export default function
|
|
33
|
+
export default function V3Header(props) {
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
const dropdown = (solutions) => (
|
|
37
|
+
<Transition
|
|
38
|
+
as={Fragment}
|
|
39
|
+
enter="transition ease-out duration-300"
|
|
40
|
+
enterFrom="opacity-0 translate-y-1"
|
|
41
|
+
enterTo="opacity-100 translate-y-0"
|
|
42
|
+
leave="transition ease-in duration-150"
|
|
43
|
+
leaveFrom="opacity-100 translate-y-0"
|
|
44
|
+
leaveTo="opacity-0 translate-y-1"
|
|
45
|
+
>
|
|
46
|
+
<Popover.Panel className="absolute z-10 -ml-4 mt-3 w-screen max-w-md transform lg:max-w-3xl">
|
|
47
|
+
<div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
|
|
48
|
+
<div className="relative grid gap-6 bg-neutral-0 px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2">
|
|
49
|
+
{solutions.map((item) => (
|
|
50
|
+
<a
|
|
51
|
+
key={item.name}
|
|
52
|
+
href={item.href}
|
|
53
|
+
className="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50"
|
|
54
|
+
>
|
|
55
|
+
<div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
|
56
|
+
|
|
57
|
+
{/* <item.icon className="h-6 w-6" aria-hidden="true" /> */}
|
|
58
|
+
</div>
|
|
59
|
+
<div className="ml-4">
|
|
60
|
+
<p className="text-base font-medium text-gray-900">{item.name}</p>
|
|
61
|
+
<p className="mt-1 text-sm text-gray-500">{item.description}</p>
|
|
62
|
+
</div>
|
|
63
|
+
</a>
|
|
64
|
+
))}
|
|
65
|
+
</div>
|
|
66
|
+
<div className="bg-gray-50 p-5 sm:p-8">
|
|
67
|
+
<a href="#" className="-m-3 flow-root rounded-md p-3 hover:bg-gray-100">
|
|
68
|
+
<div className="flex items-center">
|
|
69
|
+
<div className="text-base font-medium text-gray-900">Enterprise</div>
|
|
70
|
+
<span className="ml-3 inline-flex items-center rounded-full bg-indigo-100 px-3 py-0.5 text-xs font-medium leading-5 text-indigo-800">
|
|
71
|
+
New
|
|
72
|
+
</span>
|
|
73
|
+
</div>
|
|
74
|
+
<p className="mt-1 text-sm text-gray-500">
|
|
75
|
+
Empower your entire team with even more advanced tools.
|
|
76
|
+
</p>
|
|
77
|
+
</a>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
</Popover.Panel>
|
|
81
|
+
</Transition>
|
|
82
|
+
)
|
|
83
|
+
|
|
84
|
+
const headerListfn = (HEADER_LIST) =>
|
|
85
|
+
(
|
|
86
|
+
<>
|
|
87
|
+
{HEADER_LIST.map((item, index) => (
|
|
88
|
+
<Popover className="relative">
|
|
89
|
+
{({ open }) => (
|
|
90
|
+
<>
|
|
91
|
+
<Popover.Button
|
|
92
|
+
className={classNames(
|
|
93
|
+
open ? 'text-pink-800' : 'text-gray-500',
|
|
94
|
+
'group inline-flex items-center rounded-md bg-white hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'
|
|
95
|
+
)}
|
|
96
|
+
>
|
|
97
|
+
<Typography textStyle='body3c-medium' className=''>{`${item['title']}`}</Typography>
|
|
98
|
+
{/* <Icon height='h-5' variant={'home03'} strokeColor={'#1EA7FD'} /> */}
|
|
99
|
+
</Popover.Button>
|
|
100
|
+
<div className='block'>
|
|
101
|
+
{dropdown(item['titleDropdown'])}
|
|
102
|
+
</div>
|
|
103
|
+
|
|
104
|
+
</>
|
|
105
|
+
)}
|
|
106
|
+
</Popover>
|
|
107
|
+
)
|
|
108
|
+
)
|
|
109
|
+
}
|
|
110
|
+
</>
|
|
111
|
+
)
|
|
112
|
+
|
|
62
113
|
return (
|
|
63
114
|
<Popover className="relative bg-white">
|
|
64
115
|
<div className="flex items-center bg-neutral-50 justify-between p-6 md:justify-start md:space-x-6">
|
|
@@ -78,132 +129,7 @@ export default function v3Header() {
|
|
|
78
129
|
</div>
|
|
79
130
|
<div className="hidden md:flex md:flex-1 md:items-center md:justify-between">
|
|
80
131
|
<Popover.Group as="nav" className="flex space-x-6">
|
|
81
|
-
|
|
82
|
-
{({ open }) => (
|
|
83
|
-
<>
|
|
84
|
-
<Popover.Button
|
|
85
|
-
className={classNames(
|
|
86
|
-
open ? 'text-gray-900' : 'text-gray-500',
|
|
87
|
-
'group inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'
|
|
88
|
-
)}
|
|
89
|
-
>
|
|
90
|
-
<span>Platform</span>
|
|
91
|
-
{/* <Icon variant={'home03'}
|
|
92
|
-
className={classNames(
|
|
93
|
-
open ? 'text-gray-600' : 'text-gray-400',
|
|
94
|
-
'ml-2 h-5 w-5 group-hover:text-gray-500'
|
|
95
|
-
)}
|
|
96
|
-
aria-hidden="true"
|
|
97
|
-
/> */}
|
|
98
|
-
<Icon variant={'home03'} strokeColor={'#1EA7FD'} />
|
|
99
|
-
</Popover.Button>
|
|
100
|
-
|
|
101
|
-
<Transition
|
|
102
|
-
as={Fragment}
|
|
103
|
-
enter="transition ease-out duration-200"
|
|
104
|
-
enterFrom="opacity-0 translate-y-1"
|
|
105
|
-
enterTo="opacity-100 translate-y-0"
|
|
106
|
-
leave="transition ease-in duration-150"
|
|
107
|
-
leaveFrom="opacity-100 translate-y-0"
|
|
108
|
-
leaveTo="opacity-0 translate-y-1"
|
|
109
|
-
>
|
|
110
|
-
<Popover.Panel className="absolute z-10 -ml-4 mt-3 w-screen max-w-md transform lg:max-w-3xl">
|
|
111
|
-
<div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
|
|
112
|
-
<div className="relative grid gap-6 bg-neutral-0 px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2">
|
|
113
|
-
{solutions.map((item) => (
|
|
114
|
-
<a
|
|
115
|
-
key={item.name}
|
|
116
|
-
href={item.href}
|
|
117
|
-
className="-m-3 flex items-start rounded-lg p-3 hover:bg-gray-50"
|
|
118
|
-
>
|
|
119
|
-
<div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
|
|
120
|
-
|
|
121
|
-
{/* <item.icon className="h-6 w-6" aria-hidden="true" /> */}
|
|
122
|
-
</div>
|
|
123
|
-
<div className="ml-4">
|
|
124
|
-
<p className="text-base font-medium text-gray-900">{item.name}</p>
|
|
125
|
-
<p className="mt-1 text-sm text-gray-500">{item.description}</p>
|
|
126
|
-
</div>
|
|
127
|
-
</a>
|
|
128
|
-
))}
|
|
129
|
-
</div>
|
|
130
|
-
<div className="bg-gray-50 p-5 sm:p-8">
|
|
131
|
-
<a href="#" className="-m-3 flow-root rounded-md p-3 hover:bg-gray-100">
|
|
132
|
-
<div className="flex items-center">
|
|
133
|
-
<div className="text-base font-medium text-gray-900">Enterprise</div>
|
|
134
|
-
<span className="ml-3 inline-flex items-center rounded-full bg-indigo-100 px-3 py-0.5 text-xs font-medium leading-5 text-indigo-800">
|
|
135
|
-
New
|
|
136
|
-
</span>
|
|
137
|
-
</div>
|
|
138
|
-
<p className="mt-1 text-sm text-gray-500">
|
|
139
|
-
Empower your entire team with even more advanced tools.
|
|
140
|
-
</p>
|
|
141
|
-
</a>
|
|
142
|
-
</div>
|
|
143
|
-
</div>
|
|
144
|
-
</Popover.Panel>
|
|
145
|
-
</Transition>
|
|
146
|
-
</>
|
|
147
|
-
)}
|
|
148
|
-
</Popover>
|
|
149
|
-
<a href="#" className="text-base font-medium text-gray-500 hover:text-gray-900">
|
|
150
|
-
Developers
|
|
151
|
-
</a>
|
|
152
|
-
<a href="#" className="text-base font-medium text-gray-500 hover:text-gray-900">
|
|
153
|
-
Customers
|
|
154
|
-
</a>
|
|
155
|
-
<a href="#" className="text-base font-medium text-gray-500 hover:text-gray-900">
|
|
156
|
-
Company
|
|
157
|
-
</a>
|
|
158
|
-
<a href="#" className="text-base font-medium text-gray-500 hover:text-gray-900">
|
|
159
|
-
Pricing
|
|
160
|
-
</a>
|
|
161
|
-
|
|
162
|
-
<Popover className="relative">
|
|
163
|
-
{({ open }) => (
|
|
164
|
-
<>
|
|
165
|
-
<Popover.Button
|
|
166
|
-
className={classNames(
|
|
167
|
-
open ? 'text-gray-900' : 'text-gray-500',
|
|
168
|
-
'group inline-flex items-center rounded-md bg-white text-base font-medium hover:text-gray-900 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2'
|
|
169
|
-
)}
|
|
170
|
-
>
|
|
171
|
-
<span>More</span>
|
|
172
|
-
<Icon variant='home03'
|
|
173
|
-
className={classNames(
|
|
174
|
-
open ? 'text-gray-600' : 'text-gray-400',
|
|
175
|
-
'ml-2 h-5 w-5 group-hover:text-gray-500'
|
|
176
|
-
)}
|
|
177
|
-
aria-hidden="true"
|
|
178
|
-
/>
|
|
179
|
-
<Icon variant={'home03'} strokeColor={'#1EA7FD'} />
|
|
180
|
-
</Popover.Button>
|
|
181
|
-
|
|
182
|
-
<Transition
|
|
183
|
-
as={Fragment}
|
|
184
|
-
enter="transition ease-out duration-200"
|
|
185
|
-
enterFrom="opacity-0 translate-y-1"
|
|
186
|
-
enterTo="opacity-100 translate-y-0"
|
|
187
|
-
leave="transition ease-in duration-150"
|
|
188
|
-
leaveFrom="opacity-100 translate-y-0"
|
|
189
|
-
leaveTo="opacity-0 translate-y-1"
|
|
190
|
-
>
|
|
191
|
-
<Popover.Panel className="absolute left-1/2 z-10 mt-3 w-screen max-w-xs -translate-x-1/2 transform px-2 sm:px-0">
|
|
192
|
-
<div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
|
|
193
|
-
<div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8">
|
|
194
|
-
{resources.map((item) => (
|
|
195
|
-
<a key={item.name} href={item.href} className="-m-3 block rounded-md p-3 hover:bg-gray-50">
|
|
196
|
-
<p className="text-base font-medium text-gray-900">{item.name}</p>
|
|
197
|
-
<p className="mt-1 text-sm text-gray-500">{item.description}</p>
|
|
198
|
-
</a>
|
|
199
|
-
))}
|
|
200
|
-
</div>
|
|
201
|
-
</div>
|
|
202
|
-
</Popover.Panel>
|
|
203
|
-
</Transition>
|
|
204
|
-
</>
|
|
205
|
-
)}
|
|
206
|
-
</Popover>
|
|
132
|
+
{headerListfn(props.HEADER_LIST)}
|
|
207
133
|
</Popover.Group>
|
|
208
134
|
|
|
209
135
|
|
|
@@ -269,10 +195,10 @@ export default function v3Header() {
|
|
|
269
195
|
</div>
|
|
270
196
|
|
|
271
197
|
<nav className="grid gap-8 p-6">
|
|
272
|
-
{
|
|
198
|
+
{props.HEADER_LIST.map((item) => (
|
|
273
199
|
<a
|
|
274
|
-
key={item
|
|
275
|
-
|
|
200
|
+
key={item['title']}
|
|
201
|
+
|
|
276
202
|
className="-m-3 bg-blue-100 flex items-center rounded-2xl px-6 py-4"
|
|
277
203
|
>
|
|
278
204
|
|
|
@@ -281,7 +207,9 @@ export default function v3Header() {
|
|
|
281
207
|
<Icon height='h-5 w-5' variant={'home03'} strokeColor={'#3970FD'} />
|
|
282
208
|
|
|
283
209
|
</div>
|
|
284
|
-
|
|
210
|
+
<Typography textStyle='body3c-medium' className=''>
|
|
211
|
+
{`${item['title']}`}
|
|
212
|
+
</Typography>
|
|
285
213
|
</a>
|
|
286
214
|
))}
|
|
287
215
|
</nav>
|
|
@@ -349,3 +277,80 @@ export default function v3Header() {
|
|
|
349
277
|
</Popover>
|
|
350
278
|
)
|
|
351
279
|
}
|
|
280
|
+
|
|
281
|
+
V3Header.defaultProps = {
|
|
282
|
+
HEADER_LIST: [
|
|
283
|
+
{
|
|
284
|
+
title: 'Platform',
|
|
285
|
+
titleDropdown: [
|
|
286
|
+
{
|
|
287
|
+
name: 'Analytics',
|
|
288
|
+
description: 'Get a better understanding of where your traffic is coming from.',
|
|
289
|
+
href: '#',
|
|
290
|
+
icon: 'home03',
|
|
291
|
+
},
|
|
292
|
+
{
|
|
293
|
+
name: 'Engagement',
|
|
294
|
+
description: 'Speak directly to your customers in a more meaningful way.',
|
|
295
|
+
href: '#',
|
|
296
|
+
icon: 'home03',
|
|
297
|
+
},
|
|
298
|
+
{
|
|
299
|
+
name: 'Security',
|
|
300
|
+
description: 'Your customers’ data will be safe and secure.',
|
|
301
|
+
href: '#',
|
|
302
|
+
icon: 'home03'
|
|
303
|
+
},
|
|
304
|
+
],
|
|
305
|
+
},
|
|
306
|
+
{
|
|
307
|
+
|
|
308
|
+
title: 'Developer',
|
|
309
|
+
titleDropdown: [
|
|
310
|
+
{
|
|
311
|
+
name: 'Analytics',
|
|
312
|
+
description: 'Get a better understanding of where your traffic is coming from.',
|
|
313
|
+
href: '#',
|
|
314
|
+
icon: 'home03',
|
|
315
|
+
},
|
|
316
|
+
{
|
|
317
|
+
name: 'Engagement',
|
|
318
|
+
description: 'Speak directly to your customers in a more meaningful way.',
|
|
319
|
+
href: '#',
|
|
320
|
+
icon: 'home03',
|
|
321
|
+
},
|
|
322
|
+
{
|
|
323
|
+
name: 'Security',
|
|
324
|
+
description: 'Your customers’ data will be safe and secure.',
|
|
325
|
+
href: '#',
|
|
326
|
+
icon: 'home03'
|
|
327
|
+
},
|
|
328
|
+
],
|
|
329
|
+
},
|
|
330
|
+
{
|
|
331
|
+
|
|
332
|
+
title: 'Pricing',
|
|
333
|
+
titleDropdown: [
|
|
334
|
+
{
|
|
335
|
+
name: 'Analytics',
|
|
336
|
+
description: 'Get a better understanding of where your traffic is coming from.',
|
|
337
|
+
href: '#',
|
|
338
|
+
icon: 'home03',
|
|
339
|
+
},
|
|
340
|
+
{
|
|
341
|
+
name: 'Engagement',
|
|
342
|
+
description: 'Speak directly to your customers in a more meaningful way.',
|
|
343
|
+
href: '#',
|
|
344
|
+
icon: 'home03',
|
|
345
|
+
},
|
|
346
|
+
{
|
|
347
|
+
name: 'Security',
|
|
348
|
+
description: 'Your customers’ data will be safe and secure.',
|
|
349
|
+
href: '#',
|
|
350
|
+
icon: 'home03'
|
|
351
|
+
},
|
|
352
|
+
]
|
|
353
|
+
},
|
|
354
|
+
|
|
355
|
+
]
|
|
356
|
+
}
|