hds-web 1.36.7 → 1.36.9
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 +4 -4
- package/dist/index.js +4 -4
- package/package.json +1 -1
- package/src/HDS/components/Cards/Announcement/announcementMd.js +74 -37
- package/src/HDS/components/Cards/Dropdown/v3Dropdown.js +18 -16
- package/src/HDS/components/Cards/Menu/ConnectorsDropdown.js +137 -0
- package/src/HDS/components/Cards/Menu/flyoutA.js +3 -3
- package/src/HDS/components/Cards/Menu/flyoutB.js +138 -121
- package/src/HDS/components/Cards/Menu/flyoutD.js +8 -79
- package/src/HDS/components/Headers/v3Header.js +29 -53
- package/src/styles/tailwind.css +62 -61
package/package.json
CHANGED
|
@@ -1,25 +1,31 @@
|
|
|
1
1
|
import React, { useState, useEffect } from "react";
|
|
2
2
|
import { Typography } from "../../../foundation/Typography";
|
|
3
3
|
import { HDSColor } from "../../../foundation/ColorPalette";
|
|
4
|
-
import { Icon } from
|
|
4
|
+
import { Icon } from "../../../components/common-components/Icon";
|
|
5
5
|
|
|
6
6
|
const tagColorVariants = {
|
|
7
|
-
blue:
|
|
8
|
-
purple:
|
|
9
|
-
pink:
|
|
10
|
-
amber:
|
|
11
|
-
cyan:
|
|
12
|
-
green:
|
|
13
|
-
}
|
|
7
|
+
blue: "bg-neutral-0 tb:bg-blue-500 text-blue-500 tb:text-neutral-0",
|
|
8
|
+
purple: "bg-neutral-0 tb:bg-purple-500 text-purple-500 tb:text-neutral-0",
|
|
9
|
+
pink: "bg-neutral-0 tb:bg-pink-500 text-pink-500 tb:text-neutral-0",
|
|
10
|
+
amber: "bg-neutral-0 tb:bg-amber-500 text-amber-500 tb:text-neutral-0",
|
|
11
|
+
cyan: "bg-neutral-0 tb:bg-cyan-500 text-cyan-500 tb:text-neutral-0",
|
|
12
|
+
green: "bg-neutral-0 tb:bg-green-500 text-green-500 tb:text-neutral-0",
|
|
13
|
+
};
|
|
14
14
|
|
|
15
15
|
const isBrowser = typeof window !== "undefined";
|
|
16
16
|
|
|
17
17
|
export default function AnnouncementMd(props) {
|
|
18
18
|
const [isBannerActive, toggleBanner] = useState(true);
|
|
19
|
-
const bgClass = props.bgColorClass
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
const
|
|
19
|
+
const bgClass = props.bgColorClass
|
|
20
|
+
? HDSColor(props.bgColorClass)
|
|
21
|
+
: "bg-neutral-0";
|
|
22
|
+
const linkTextClass = props.linkTextColorClass
|
|
23
|
+
? HDSColor(props.linkTextColorClass)
|
|
24
|
+
: "text-neutral-600";
|
|
25
|
+
const tagClass = props.tagColor ? props.tagColor : "purple";
|
|
26
|
+
const iconBgClass = props.iconBgColor
|
|
27
|
+
? HDSColor(props.iconBgColor)
|
|
28
|
+
: "bg-blue-200";
|
|
23
29
|
|
|
24
30
|
const [isConsentForm, setIsConsentForm] = useState(false);
|
|
25
31
|
const onCloseBanner = () => {
|
|
@@ -49,40 +55,71 @@ export default function AnnouncementMd(props) {
|
|
|
49
55
|
if (isBannerActive && !isConsentForm) {
|
|
50
56
|
return (
|
|
51
57
|
<div className="py-6">
|
|
52
|
-
<div
|
|
58
|
+
<div
|
|
59
|
+
className={`${bgClass} flex justify-between relative rounded-2xl tb:rounded-full shadow p-3 tb:justify-center tb:items-center`}
|
|
60
|
+
>
|
|
53
61
|
<div className="tb:items-center flex tb:justify-center">
|
|
54
|
-
{
|
|
55
|
-
|
|
56
|
-
<
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
62
|
+
{props.brandImg && (
|
|
63
|
+
<div className="tb:pb-0 tb:pl-14 pr-2">
|
|
64
|
+
<img
|
|
65
|
+
className="mt-[2px] tb:mt-0 min-h-[20px] min-w-[20px] max-w-[20px] max-h-[20px] tb:min-h-[32px] tb:min-w-[32px] tb:max-w-[32px] tb:max-h-[32px]"
|
|
66
|
+
src={props.brandImg}
|
|
67
|
+
alt={props.brandImgAlt}
|
|
68
|
+
/>
|
|
69
|
+
</div>
|
|
70
|
+
)}
|
|
71
|
+
{props.iconBgColor && (
|
|
72
|
+
<div
|
|
73
|
+
className={`${iconBgClass} mt-[2px] tb:mt-0 ml-0 mb-1 tb:mb-0 tb:ml-14 mr-2 w-5 h-5 tb:w-8 tb:h-8 min-w-[20px] tb:min-w-[32px] rounded-full flex items-center justify-center`}
|
|
74
|
+
>
|
|
75
|
+
<Icon
|
|
76
|
+
height={
|
|
77
|
+
"block w-4 h-4 tb:w-5 tb:h-5 stroke-[2px] transition ease-in-out"
|
|
78
|
+
}
|
|
79
|
+
variant={props.iconVariant}
|
|
80
|
+
strokeClass="stroke-neutral-1000"
|
|
81
|
+
/>
|
|
82
|
+
</div>
|
|
83
|
+
)}
|
|
84
|
+
{props.tagText && (
|
|
85
|
+
<Typography
|
|
86
|
+
textStyle="body2-medium"
|
|
87
|
+
className={`inline-flex py-1 px-0 tb:px-3 ml-0 tb:ml-14 tb-m:ml-6 rounded-full mr-4 min-w-fit ${tagColorVariants[tagClass]}`}
|
|
88
|
+
>
|
|
89
|
+
{props.tagText}
|
|
90
|
+
</Typography>
|
|
91
|
+
)}
|
|
73
92
|
<a href={props.linkUrl} className="block pb-0">
|
|
74
|
-
<Typography
|
|
93
|
+
<Typography
|
|
94
|
+
textStyle="body2-medium"
|
|
95
|
+
className={`${linkTextClass} group flex items-center [&>div]:inline-block`}
|
|
96
|
+
>
|
|
75
97
|
{props.linkText}
|
|
76
|
-
<Icon
|
|
98
|
+
<Icon
|
|
99
|
+
height={
|
|
100
|
+
" hds-hidden tb:block w-6 h-6 stroke-[2px] ml-3 transition ease-in-out group-hover:translate-x-[5px]"
|
|
101
|
+
}
|
|
102
|
+
variant="arrownarrowright"
|
|
103
|
+
strokeClass="stroke-blue-500"
|
|
104
|
+
/>
|
|
77
105
|
</Typography>
|
|
78
106
|
</a>
|
|
79
107
|
</div>
|
|
80
|
-
<div
|
|
81
|
-
|
|
108
|
+
<div
|
|
109
|
+
className="static mt-[2px] tb:mt-0 ml-3 tb:ml-0 tb:absolute top-1/2 tb:-translate-y-1/2 tb:left-3 cursor-pointer w-5 h-5 min-w-[20px] tb:w-8 tb:min-w-[32px] tb:h-8 rounded-full bg-neutral-100 flex items-center justify-center"
|
|
110
|
+
onClick={() => onCloseBanner()}
|
|
111
|
+
>
|
|
112
|
+
<Icon
|
|
113
|
+
height={
|
|
114
|
+
"block w-4 h-4 tb:w-6 tb:h-6 stroke-[2px] transition ease-in-out"
|
|
115
|
+
}
|
|
116
|
+
variant="xclose"
|
|
117
|
+
strokeClass="stroke-neutral-800"
|
|
118
|
+
/>
|
|
82
119
|
</div>
|
|
83
120
|
</div>
|
|
84
121
|
</div>
|
|
85
|
-
)
|
|
122
|
+
);
|
|
86
123
|
}
|
|
87
124
|
return null;
|
|
88
125
|
}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import { HDSColor } from "../../../foundation/ColorPalette";
|
|
3
|
-
import { FlyoutB, FlyoutA,
|
|
3
|
+
import { FlyoutB, FlyoutA, FlyoutD } from "../Menu";
|
|
4
|
+
import ConnectorsDropdown from "../Menu/ConnectorsDropdown";
|
|
4
5
|
|
|
5
6
|
export default function DropdownA(props) {
|
|
6
7
|
return (
|
|
@@ -20,15 +21,24 @@ export default function DropdownA(props) {
|
|
|
20
21
|
key={index}
|
|
21
22
|
className={
|
|
22
23
|
"rounded-2xl " + item.card_bg
|
|
23
|
-
? "bg-neutral-0 rounded-2xl"
|
|
24
|
+
? "bg-neutral-0 rounded-2xl shadow"
|
|
24
25
|
: HDSColor(item.card_bg)
|
|
25
26
|
}
|
|
26
27
|
>
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
28
|
+
{item.label === "CONNECTORS" ? (
|
|
29
|
+
<ConnectorsDropdown
|
|
30
|
+
label={item.label}
|
|
31
|
+
childArray={item.childArray}
|
|
32
|
+
// split={item.split}
|
|
33
|
+
split={true}
|
|
34
|
+
/>
|
|
35
|
+
) : (
|
|
36
|
+
<FlyoutA
|
|
37
|
+
label={item.label}
|
|
38
|
+
childArray={item.childArray}
|
|
39
|
+
split={item.split}
|
|
40
|
+
/>
|
|
41
|
+
)}
|
|
32
42
|
</div>
|
|
33
43
|
))}
|
|
34
44
|
</div>
|
|
@@ -52,15 +62,7 @@ export default function DropdownA(props) {
|
|
|
52
62
|
</div>
|
|
53
63
|
</div>
|
|
54
64
|
} */}
|
|
55
|
-
{props.flyoutD &&
|
|
56
|
-
<>
|
|
57
|
-
<div className=" bg-neutral-0 shadow rounded-2xl w-full tb-l:w-[170px] tb-xl:w-[223px] py-6 mt-2 tb-l:mt-0">
|
|
58
|
-
<div>
|
|
59
|
-
<FlyoutD {...props.flyoutD} />
|
|
60
|
-
</div>
|
|
61
|
-
</div>
|
|
62
|
-
</>
|
|
63
|
-
)}
|
|
65
|
+
{props.flyoutD && <FlyoutD />}
|
|
64
66
|
</div>
|
|
65
67
|
</div>
|
|
66
68
|
);
|
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { Icon } from "../../common-components/Icon";
|
|
3
|
+
import { Typography } from "../../../foundation/Typography";
|
|
4
|
+
|
|
5
|
+
export default function FlyoutA(props) {
|
|
6
|
+
const { split } = props;
|
|
7
|
+
|
|
8
|
+
const cardLayout = (label, childArray) => (
|
|
9
|
+
<div className=" group h-full">
|
|
10
|
+
<div className={`w-full h-full ` + (split ? " " : " rounded-2xl")}>
|
|
11
|
+
<div className={`w-full p-6`}>
|
|
12
|
+
{label ? (
|
|
13
|
+
<Typography
|
|
14
|
+
textStyle="h6"
|
|
15
|
+
className=" uppercase group-hover/split:text-neutral-1000 group-hover:text-neutral-1000 group-hover-transition text-neutral-500 mb-4"
|
|
16
|
+
>
|
|
17
|
+
{label}
|
|
18
|
+
</Typography>
|
|
19
|
+
) : (
|
|
20
|
+
<div className="mb-8"></div>
|
|
21
|
+
)}
|
|
22
|
+
<div className={` tb:tb:grid tb:tb:grid-cols-1 tb:min-w-[140px] `}>
|
|
23
|
+
{childArray &&
|
|
24
|
+
childArray.map((item) => (
|
|
25
|
+
<div
|
|
26
|
+
key={item.name}
|
|
27
|
+
className="relative pb-2 flex rounded-lg items-center"
|
|
28
|
+
>
|
|
29
|
+
<a href={item.href} className="w-full">
|
|
30
|
+
<div className="flex group/icon pl-2 py-2 pr-3 hover:pl-[9px] hover:bg-neutral-100 rounded-lg flex-row w-full justify-between tb:min-w-[140px] items-center">
|
|
31
|
+
<div className="flex gap-2 flex-row items-center">
|
|
32
|
+
<div className="flex rounded-lg items-center group-hover:bg-white">
|
|
33
|
+
{item.icon && (
|
|
34
|
+
<Icon
|
|
35
|
+
height={
|
|
36
|
+
"h-5 w-5 stroke-2 " +
|
|
37
|
+
(item.icon === "discord" ||
|
|
38
|
+
item.icon === "octoface" ||
|
|
39
|
+
item.icon === "meetup"
|
|
40
|
+
? ""
|
|
41
|
+
: "group-hover/icon:stroke-blue-500 ")
|
|
42
|
+
}
|
|
43
|
+
variant={item.icon}
|
|
44
|
+
strokeClass={item.strokeClass}
|
|
45
|
+
/>
|
|
46
|
+
)}
|
|
47
|
+
</div>
|
|
48
|
+
<Typography
|
|
49
|
+
textStyle="body3c-medium"
|
|
50
|
+
className="text-neutral-1000 group-hover/icon:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip"
|
|
51
|
+
>
|
|
52
|
+
{item.name}
|
|
53
|
+
</Typography>
|
|
54
|
+
</div>
|
|
55
|
+
<div className="flex group-hover/icon:translate-x-1 transform transition-all duration-200 ease-in-out ">
|
|
56
|
+
<Icon
|
|
57
|
+
height={
|
|
58
|
+
"h-4 w-4 stroke-2 invisible group-hover/icon:visible transition-all ease-in-out "
|
|
59
|
+
}
|
|
60
|
+
variant={"chevronright"}
|
|
61
|
+
strokeClass={"stroke-blue-500"}
|
|
62
|
+
/>
|
|
63
|
+
</div>
|
|
64
|
+
|
|
65
|
+
{/* {item.description &&
|
|
66
|
+
item.description.length > 0 && (
|
|
67
|
+
<Typography
|
|
68
|
+
textStyle='body3c-medium'
|
|
69
|
+
className='text-neutral-700'>
|
|
70
|
+
{item.description}
|
|
71
|
+
</Typography>
|
|
72
|
+
)} */}
|
|
73
|
+
</div>
|
|
74
|
+
</a>
|
|
75
|
+
</div>
|
|
76
|
+
))}
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
<div className="grid grid-cols-2 divide-x bg-gray-50">
|
|
80
|
+
{/* {buttonArray && buttonArray.map((item) => (
|
|
81
|
+
<a
|
|
82
|
+
key={item.name}
|
|
83
|
+
href={item.href}
|
|
84
|
+
className="flex justify-center gap-x-2.5 p-3 font-semibold text-gray-900 hover:bg-gray-100"
|
|
85
|
+
>
|
|
86
|
+
|
|
87
|
+
{item.icon && (
|
|
88
|
+
<Icon
|
|
89
|
+
height={'h-6'}
|
|
90
|
+
variant={item.icon}
|
|
91
|
+
strokeColor={'#6C737F'} />
|
|
92
|
+
)}
|
|
93
|
+
<Typography
|
|
94
|
+
textStyle='h-6'
|
|
95
|
+
className='text-neutral-500'>
|
|
96
|
+
{item.name}
|
|
97
|
+
</Typography>
|
|
98
|
+
</a>
|
|
99
|
+
))} */}
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
);
|
|
104
|
+
|
|
105
|
+
return (
|
|
106
|
+
<>
|
|
107
|
+
{split ? (
|
|
108
|
+
<>
|
|
109
|
+
<div className="hds-hidden tb-l:flex h-full">
|
|
110
|
+
<div className="rounded-l-2xl">
|
|
111
|
+
{cardLayout(
|
|
112
|
+
props.label,
|
|
113
|
+
props.childArray.slice(
|
|
114
|
+
0,
|
|
115
|
+
Math.ceil(props.childArray.length / 2)
|
|
116
|
+
)
|
|
117
|
+
)}
|
|
118
|
+
</div>
|
|
119
|
+
<div className="group/split rounded-r-2xl">
|
|
120
|
+
{cardLayout(
|
|
121
|
+
null,
|
|
122
|
+
props.childArray.slice(Math.ceil(props.childArray.length / 2))
|
|
123
|
+
)}
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
<div className="hds-hidden-tbl h-full rounded-2xl">
|
|
127
|
+
{cardLayout(props.label, props.childArray)}
|
|
128
|
+
</div>
|
|
129
|
+
</>
|
|
130
|
+
) : (
|
|
131
|
+
<div className=" shadow h-full rounded-2xl">
|
|
132
|
+
{cardLayout(props.label, props.childArray)}
|
|
133
|
+
</div>
|
|
134
|
+
)}
|
|
135
|
+
</>
|
|
136
|
+
);
|
|
137
|
+
}
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import { Fragment } from "react";
|
|
3
|
-
import { Popover, Transition } from "@headlessui/react";
|
|
4
2
|
import { Icon } from "../../common-components/Icon";
|
|
5
3
|
import { Typography } from "../../../foundation/Typography";
|
|
4
|
+
|
|
6
5
|
export default function FlyoutA(props) {
|
|
7
6
|
const { split } = props;
|
|
7
|
+
|
|
8
8
|
const cardLayout = (label, childArray) => (
|
|
9
9
|
<div className=" group h-full ">
|
|
10
10
|
<div className={`w-full h-full ` + (split ? " " : " rounded-2xl")}>
|
|
@@ -130,7 +130,7 @@ export default function FlyoutA(props) {
|
|
|
130
130
|
</div>
|
|
131
131
|
</>
|
|
132
132
|
) : (
|
|
133
|
-
<div className="
|
|
133
|
+
<div className=" h-full rounded-2xl">
|
|
134
134
|
{cardLayout(props.label, props.childArray)}
|
|
135
135
|
</div>
|
|
136
136
|
)}
|
|
@@ -1,129 +1,146 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import {
|
|
3
|
-
import { Typography } from '../../../foundation/Typography'
|
|
4
|
-
import { ProfileAvatar } from '../../Avatars'
|
|
5
|
-
import { Time } from "../../../helpers/Time";
|
|
6
|
-
import { HDSButton } from '../../Buttons'
|
|
2
|
+
import { Typography } from "../../../foundation/Typography";
|
|
7
3
|
import { Icon } from "../../common-components";
|
|
8
4
|
|
|
9
5
|
export default function FlyoutB(props) {
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
6
|
+
const {
|
|
7
|
+
iconVariant = "home03",
|
|
8
|
+
strokeColor = "#C6D6FF",
|
|
9
|
+
strokeClass = "stroke-neutral-800",
|
|
10
|
+
primaryBtnLabel = "label1",
|
|
11
|
+
primaryBtnCTA,
|
|
12
|
+
mainDescription = "Choose from our open source community edition, fully managed cloud edition or custom enterprise",
|
|
13
|
+
secondaryBtn = [
|
|
14
|
+
{
|
|
15
|
+
cta_leftVariantIcon: "home03",
|
|
16
|
+
cta_leftVariantIconColor: "#6C737F",
|
|
17
|
+
cta_text: "Button 1",
|
|
18
|
+
},
|
|
19
|
+
],
|
|
20
|
+
tertiaryBtn,
|
|
21
|
+
} = props;
|
|
22
|
+
|
|
23
|
+
return (
|
|
24
|
+
<div className="flex flex-col justify-between w-full h-full shadow rounded-2xl">
|
|
25
|
+
<a
|
|
26
|
+
href={primaryBtnCTA}
|
|
27
|
+
className="group/card cursor-pointer w-full h-full relative transition-all duration-300 ease-out "
|
|
28
|
+
>
|
|
29
|
+
<div className="group-hover/card:bg-neutral-100 ml-2 z-[1] mt-2 w-[calc(100%-16px)] h-[calc(100%-16px)] rounded-xl absolute "></div>
|
|
30
|
+
<div className="px-6 pt-6 pb-4 w-full h-full ">
|
|
31
|
+
<Typography
|
|
32
|
+
textStyle="h6"
|
|
33
|
+
className="uppercase relative z-[2] group-hover/card:text-neutral-1000 text-neutral-500 mb-4"
|
|
34
|
+
>
|
|
35
|
+
PLATFORM
|
|
36
|
+
</Typography>
|
|
37
|
+
<div className="flex items-start lg:pt-2">
|
|
38
|
+
<div className=" flex items-center relative justify-center p-2.5 h-14 w-14 z-[2] group-hover/card:bg-blue-200 bg-neutral-150 rounded-2xl min-w-[56px] mr-6">
|
|
39
|
+
<Icon
|
|
40
|
+
height="h-6 w-6 stroke-2 group-hover/card:stroke-blue-500"
|
|
41
|
+
variant={iconVariant}
|
|
42
|
+
strokeColor={strokeColor}
|
|
43
|
+
strokeClass={strokeClass}
|
|
44
|
+
/>
|
|
45
|
+
</div>
|
|
46
|
+
<div className="relative group/card cursor-pointer items-center z-[2]">
|
|
47
|
+
<Typography
|
|
48
|
+
textStyle="body3c-medium"
|
|
49
|
+
className="text-neutral-1000 group-hover/card:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip"
|
|
50
|
+
>
|
|
51
|
+
{props.primaryBtnLabel}
|
|
52
|
+
</Typography>
|
|
53
|
+
<Typography
|
|
54
|
+
className="mt-1 text-neutral-600 relative z-[2]"
|
|
55
|
+
textStyle="body3"
|
|
56
|
+
>
|
|
57
|
+
{mainDescription}
|
|
58
|
+
</Typography>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
</a>
|
|
63
|
+
<div className="border-t border-neutral-200 pt-6 mx-6" />
|
|
64
|
+
<div className="flex pb-3 gap-2">
|
|
65
|
+
{secondaryBtn.map((btn, index) => (
|
|
66
|
+
<a
|
|
67
|
+
key={index}
|
|
68
|
+
href={btn.cta_link}
|
|
69
|
+
className="group/btn px-2 justify-around cursor-pointer "
|
|
70
|
+
>
|
|
71
|
+
<div className=" flex items-center hover:bg-neutral-100 rounded-xl px-4 ">
|
|
72
|
+
<div className="flex w-full justify-between items-center z-[2] py-2.5">
|
|
73
|
+
<div className="flex rounded-lg gap-2 items-center ">
|
|
74
|
+
{btn.cta_leftVariantIcon && (
|
|
75
|
+
<Icon
|
|
76
|
+
height={
|
|
77
|
+
"h-5 w-5 group-hover/btn:stroke-blue-500 stroke-2 "
|
|
78
|
+
}
|
|
79
|
+
variant={btn.cta_leftVariantIcon}
|
|
80
|
+
strokeClass="stroke-neutral-500"
|
|
81
|
+
/>
|
|
82
|
+
)}
|
|
83
|
+
<Typography
|
|
84
|
+
textStyle="body3c-medium"
|
|
85
|
+
className="text-neutral-1000 group-hover/btn:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip"
|
|
86
|
+
>
|
|
87
|
+
{btn.cta_text}
|
|
88
|
+
</Typography>
|
|
30
89
|
</div>
|
|
31
|
-
<div className="
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
textStyle='body3c-medium'
|
|
40
|
-
className='text-neutral-1000 group-hover/card:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip'>
|
|
41
|
-
{props.primaryBtnLabel}
|
|
42
|
-
</Typography>
|
|
43
|
-
|
|
44
|
-
<div className="flex group-hover/card:translate-x-1 transform transition-all duration-200 ease-in-out ">
|
|
45
|
-
<Icon
|
|
46
|
-
height={'h-4 w-4 stroke-2 invisible group-hover/card:visible transition-all ease-in-out '}
|
|
47
|
-
variant={'chevronright'}
|
|
48
|
-
strokeClass={'stroke-blue-500'}
|
|
49
|
-
/>
|
|
50
|
-
</div>
|
|
51
|
-
</div>
|
|
52
|
-
<Typography className='mt-2 text-neutral-600 relative z-[2]' textStyle='body3'>{mainDescription}</Typography>
|
|
90
|
+
<div className="flex group-hover/btn:translate-x-1 transform transition-all duration-200 ease-in-out ">
|
|
91
|
+
<Icon
|
|
92
|
+
height={
|
|
93
|
+
"h-4 w-4 stroke-2 invisible group-hover/btn:visible transition-all ease-in-out "
|
|
94
|
+
}
|
|
95
|
+
variant={"chevronright"}
|
|
96
|
+
strokeClass={"stroke-blue-500"}
|
|
97
|
+
/>
|
|
53
98
|
</div>
|
|
54
|
-
|
|
55
|
-
<div className="flex flex-col pb-3 gap-2">
|
|
56
|
-
{secondaryBtn.map((btn, index) => (
|
|
57
|
-
<a key={index} href={btn.cta_link} className="group/btn px-2 justify-around cursor-pointer ">
|
|
58
|
-
|
|
59
|
-
<div className=" flex items-center hover:bg-neutral-100 rounded-xl px-4 ">
|
|
60
|
-
<div
|
|
61
|
-
className="flex w-full justify-between items-center z-[2] py-2.5"
|
|
62
|
-
>
|
|
63
|
-
<div
|
|
64
|
-
className="flex rounded-lg gap-2 items-center ">
|
|
65
|
-
{btn.cta_leftVariantIcon && (
|
|
66
|
-
<Icon
|
|
67
|
-
height={'h-5 w-5 group-hover/btn:stroke-blue-500 stroke-2 '}
|
|
68
|
-
variant={btn.cta_leftVariantIcon}
|
|
69
|
-
strokeClass='stroke-neutral-500'
|
|
70
|
-
/>
|
|
71
|
-
)}
|
|
72
|
-
|
|
73
|
-
<Typography
|
|
74
|
-
textStyle='body3c-medium'
|
|
75
|
-
className='text-neutral-1000 group-hover/btn:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip'>
|
|
76
|
-
{btn.cta_text}
|
|
77
|
-
</Typography>
|
|
78
|
-
</div>
|
|
79
|
-
<div className="flex group-hover/btn:translate-x-1 transform transition-all duration-200 ease-in-out ">
|
|
80
|
-
<Icon
|
|
81
|
-
height={'h-4 w-4 stroke-2 invisible group-hover/btn:visible transition-all ease-in-out '}
|
|
82
|
-
variant={'chevronright'}
|
|
83
|
-
strokeClass={'stroke-blue-500'}
|
|
84
|
-
/>
|
|
85
|
-
</div>
|
|
86
|
-
</div>
|
|
87
|
-
</div>
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
</a>))}
|
|
91
|
-
|
|
92
|
-
{tertiaryBtn && tertiaryBtn.map((t, index) => (
|
|
93
|
-
<a key={index} href={t.cta_link} className="group/btn justify-around cursor-pointer px-2 ">
|
|
94
|
-
|
|
95
|
-
<div className=" flex items-center hover:bg-neutral-100 rounded-xl px-4 ">
|
|
96
|
-
<div className="flex w-full justify-between items-center z-[2] py-2.5">
|
|
97
|
-
<div
|
|
98
|
-
className="flex rounded-lg gap-2 items-center ">
|
|
99
|
-
{t.cta_leftVariantIcon && (
|
|
100
|
-
<Icon
|
|
101
|
-
height={'h-5 w-5 group-hover/btn:stroke-blue-500 stroke-2 '}
|
|
102
|
-
variant={t.cta_leftVariantIcon}
|
|
103
|
-
strokeClass='stroke-neutral-500'
|
|
104
|
-
/>
|
|
105
|
-
)}
|
|
106
|
-
|
|
107
|
-
<Typography
|
|
108
|
-
textStyle='body3c-medium'
|
|
109
|
-
className='text-neutral-1000 group-hover/btn:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip'>
|
|
110
|
-
{t.cta_text}
|
|
111
|
-
</Typography>
|
|
112
|
-
</div>
|
|
113
|
-
<div className="flex group-hover/btn:translate-x-1 transform transition-all duration-200 ease-in-out ">
|
|
114
|
-
<Icon
|
|
115
|
-
height={'h-4 w-4 stroke-2 invisible group-hover/btn:visible transition-all ease-in-out '}
|
|
116
|
-
variant={'chevronright'}
|
|
117
|
-
strokeClass={'stroke-blue-500'}
|
|
118
|
-
/>
|
|
119
|
-
</div>
|
|
120
|
-
</div>
|
|
121
|
-
</div>
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
</a>))}
|
|
99
|
+
</div>
|
|
125
100
|
</div>
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
101
|
+
</a>
|
|
102
|
+
))}
|
|
103
|
+
{tertiaryBtn &&
|
|
104
|
+
tertiaryBtn.map((t, index) => (
|
|
105
|
+
<a
|
|
106
|
+
key={index}
|
|
107
|
+
href={t.cta_link}
|
|
108
|
+
className="group/btn justify-around cursor-pointer px-2 "
|
|
109
|
+
>
|
|
110
|
+
<div className=" flex items-center hover:bg-neutral-100 rounded-xl px-4 ">
|
|
111
|
+
<div className="flex w-full justify-between items-center z-[2] py-2.5">
|
|
112
|
+
<div className="flex rounded-lg gap-2 items-center ">
|
|
113
|
+
{t.cta_leftVariantIcon && (
|
|
114
|
+
<Icon
|
|
115
|
+
height={
|
|
116
|
+
"h-5 w-5 group-hover/btn:stroke-blue-500 stroke-2 "
|
|
117
|
+
}
|
|
118
|
+
variant={t.cta_leftVariantIcon}
|
|
119
|
+
strokeClass="stroke-neutral-500"
|
|
120
|
+
/>
|
|
121
|
+
)}
|
|
122
|
+
|
|
123
|
+
<Typography
|
|
124
|
+
textStyle="body3c-medium"
|
|
125
|
+
className="text-neutral-1000 group-hover/btn:text-blue-600 hover:transition-all hover:duration-300 hover:ease-in-out whitespace-nowrap overflow-clip"
|
|
126
|
+
>
|
|
127
|
+
{t.cta_text}
|
|
128
|
+
</Typography>
|
|
129
|
+
</div>
|
|
130
|
+
<div className="flex group-hover/btn:translate-x-1 transform transition-all duration-200 ease-in-out ">
|
|
131
|
+
<Icon
|
|
132
|
+
height={
|
|
133
|
+
"h-4 w-4 stroke-2 invisible group-hover/btn:visible transition-all ease-in-out "
|
|
134
|
+
}
|
|
135
|
+
variant={"chevronright"}
|
|
136
|
+
strokeClass={"stroke-blue-500"}
|
|
137
|
+
/>
|
|
138
|
+
</div>
|
|
139
|
+
</div>
|
|
140
|
+
</div>
|
|
141
|
+
</a>
|
|
142
|
+
))}
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
);
|
|
129
146
|
}
|