hds-web 1.13.4 → 1.13.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.
Files changed (12) hide show
  1. package/dist/index.css +2 -2
  2. package/dist/index.es.css +2 -2
  3. package/dist/index.es.js +2 -2
  4. package/dist/index.js +4 -4
  5. package/package.json +1 -1
  6. package/src/HDS/components/Cards/Feedback/feedback.js +1 -1
  7. package/src/HDS/components/Cards/Misc/iconCardButton.js +2 -2
  8. package/src/HDS/components/Hero/h3.js +118 -170
  9. package/src/HDS/components/Tables/tableD.js +43 -37
  10. package/src/HDS/modules/navCard/navCard.js +1 -1
  11. package/src/index.css +2 -1
  12. package/src/styles/tailwind.css +26 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.13.4",
3
+ "version": "1.13.5",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/HDS/components/Cards/Feedback/feedback.js CHANGED
@@ -39,7 +39,7 @@ export default function FeedbackCard(props) {
39
39
  <Typography textStyle={((props.dividerClass) ? "body2" : "body1")} className='text-neutral-600 pb-1'>{props.blurb}</Typography>
40
40
  <div className="flex">
41
41
  <HDSButton
42
- label='Read case study'
42
+ label='Read the case study'
43
43
  type='secondaryLink'
44
44
  leftIconVariant='none'
45
45
  rightIconVariant='none'
package/src/HDS/components/Cards/Misc/iconCardButton.js CHANGED
@@ -45,8 +45,8 @@ export default function IconCardButton(props) {
45
45
  <div>
46
46
  {
47
47
  props.imgUrl ? (
48
- <div className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 inline-flex p-1 items-center justify-center rounded-full mb-6`}>
49
- <img src={props.imgUrl} alt={props.title} />
48
+ <div className={`${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 inline-flex items-center justify-center rounded-full mb-6`}>
49
+ <img className="w-full" src={props.imgUrl} alt={props.title} />
50
50
  </div>
51
51
  ) : (
52
52
  <div
package/src/HDS/components/Hero/h3.js CHANGED
@@ -4,217 +4,165 @@ import { Typography } from '../../foundation/Typography';
4
4
  import { HDSButton } from '../../components/Buttons';
5
5
  import { HDSColor } from '../../foundation/ColorPalette';
6
6
  import { Tab } from '../../components/Tabs';
7
+ import PropTypes from 'prop-types';
7
8
  import { LinkCard } from '../Cards/Link';
8
9
 
9
10
  const tabCard = (Content) => (
10
11
  <>
11
- <div className='tb:px-3'>
12
- {Content.title &&
13
- <Typography
14
- textStyle='h2'
15
- as="h2"
16
- className={`${HDSColor(Content.titleTextColor)}`}>
17
- {Content.title}
18
- </Typography>}
12
+ <div className='tb:px-3'>
13
+ {Content.title &&
14
+ <Typography
15
+ textStyle='h2'
16
+ className={HDSColor(Content.titleTextColor)}>
17
+ {Content.title}
18
+ </Typography>}
19
19
 
20
- {Content.subTitle &&
21
- <Typography
22
- textStyle='sub2'
23
- className={`mt-2 ${HDSColor(Content.subTitleTextColor)}`}>
24
- {Content.subTitle}
25
- </Typography>}
26
- </div>
27
- <div className='flex items-center flex-wrap flex-row gap-[38px]'>
28
- {Content.buttons &&
29
-
30
- Content.buttons.map((btn, index) => (
31
- <React.Fragment key={index}>
32
- {btn.cta_link && btn.cta_text && btn.cta_type && (
33
- <a href={btn.cta_link} key={index} className='flex pl-3 pt-6'>
34
- <HDSButton
35
- label={btn.cta_text}
36
- type={btn.cta_type}
20
+ {Content.subTitle &&
21
+ <Typography
22
+ textStyle='sub2'
23
+ className={`mt-2 ${HDSColor(Content.subTitleTextColor)}`}>
24
+ {Content.subTitle}
25
+ </Typography>}
26
+ </div>
27
+ {Content.btnLabel &&
28
+ <div className='flex pl-3 pt-6'>
29
+ <HDSButton
30
+ label={Content.btnLabel}
31
+ type='secondary'
37
32
  leftIconVariant='none'
38
33
  rightIconVariant='none'
39
34
  state='default'
40
- size='md'
35
+ size='sm'
41
36
  rightAnimatedArrow={true}
42
- rightAnimatedArrowColor='#FFFFFF'
43
- animatedHoverStroke='group-hover:stroke-neutral-0'
37
+ rightAnimatedArrowColor='#1E56E3'
38
+ animatedHoverStroke='group-hover:stroke-blue-600'
44
39
  className='flex'
45
- btnTextColorClass={HDSColor('text-neutral-0')}
46
- />
47
- </a>)}
48
- </React.Fragment>
49
- ))
50
-
40
+ btnTextColorClass='text-blue-600'
41
+ />
42
+ </div>
51
43
  }
52
- </div>
53
44
 
54
45
  </>
55
46
  )
56
47
 
57
48
  export default function HeroCapability(props) {
58
- const [showVideo, setShowVideo] = useState(false);
59
- const {
60
- heroData,
61
- activeTab,
62
- onTabChange,
63
- firstTab
64
- } = props;
65
- let currentTab;
66
- if (activeTab.activeTab) {
67
- currentTab = activeTab.activeTab;
68
- }
69
- if (!heroData) {
70
- return <div></div>; // Replace with your loading indicator or fallback UI
71
- }
49
+ const {
50
+ heroData,
51
+ activeTab,
52
+ onTabChange
53
+ } = props;
54
+ let currentTab;
55
+ if(activeTab.activeTab){
56
+ currentTab = activeTab.activeTab;
57
+ }
58
+ if (!heroData) {
59
+ return <div></div>; // Replace with your loading indicator or fallback UI
60
+ }
61
+
72
62
  const LinkCardsFn = (heroData) => {
73
- return (
74
- heroData.linkCards && (
75
- <div className="flex px-8 tb:px-0 tb:justify-center overflow-auto db:overflow-visible scrollbar-hide flex-row mt-16 gap-6 tb:flex-row ">
76
- {heroData.linkCards.map((card, index) => (
77
- <div key={index} className={`${HDSColor(card.cardBorderClass)} ${HDSColor(card.cardBgColor)} ${HDSColor(card.cardHoverBg)} transition-all ease-out duration-300 hover:shadow-2xl hover:border-opacity-0 border rounded-2xl w-full min-w-[11.5rem] max-w-[22.313rem]`}>
78
- <LinkCard
79
- titleTextColor={card.titleTextColor}
80
- descTextColor={card.descTextColor}
81
- linkUrl={card.linkUrl}
82
- iconVariant={card.iconVariant}
83
- iconStrokeClass={card.iconStrokeColor}
84
- iconArrowVariant={card.iconArrowVariant}
85
- iconArrowStrokeClass={card.iconArrowStrokeColor}
86
- title={card.title}
87
- description={card.description}
88
- />
89
- </div>
90
- ))}
91
- </div>
92
- )
93
- );
94
- };
63
+ return (
64
+ heroData.linkCards && (
65
+ <div className="flex px-8 tb:px-0 tb:justify-center overflow-auto scrollbar-hide flex-row mt-16 gap-6 tb:flex-row ">
66
+ {heroData.linkCards.map((card, index) => (
67
+ <div key={index} className={`${HDSColor(card.cardBorderClass)} border rounded-2xl w-full pb-2 min-w-[11.5rem] max-w-[22.313rem]`}>
68
+ <LinkCard
69
+ titleTextColor= {card.titleTextColor}
70
+ descTextColor={card.descTextColor}
71
+ linkUrl={card.linkUrl}
72
+ cardBgColor={card.cardBgColor}
73
+ cardHoverBg={card.cardHoverBg}
74
+ iconVariant={card.iconVariant}
75
+ iconStrokeClass={card.iconStrokeColor}
76
+ iconArrowVariant={card.iconArrowVariant}
77
+ iconArrowStrokeClass={card.iconArrowStrokeColor}
78
+ title={card.title}
79
+ description={card.description}
80
+ />
81
+ </div>
82
+ ))}
83
+ </div>
84
+ )
85
+ );
86
+ };
95
87
 
96
88
 
97
89
  const handleTabClick = (tab) => {
98
- if (tab.name) {
99
- const nameCheck = tab.name.replace(/\s/g, ''); // Remove spaces from tab name
100
- onTabChange(nameCheck);
101
-
102
- }
103
- else return;
104
- // Perform any other actions based on the clicked tab
90
+ if (tab.name) {
91
+ const nameCheck = tab.name.replace(/\s/g, ''); // Remove spaces from tab name
92
+ onTabChange(nameCheck);
93
+ }
94
+ else return;
95
+ // Perform any other actions based on the clicked tab
105
96
  }
106
97
  let heroBgColorClass = '';
107
98
  let bgTabClass = '';
108
99
  let videoUrl = '';
109
100
  let videoPoster = '';
110
101
  let img_url = '';
111
- let pillColorClass = '';
112
- if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['heroBgColor']) {
113
- heroBgColorClass = HDSColor(props.heroData.tabContent[currentTab]['heroBgColor'])
102
+ let pillColorClass= '';
103
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['heroBgColor']){
104
+ heroBgColorClass = HDSColor(props.heroData.tabContent[currentTab]['heroBgColor'])
114
105
  }
115
- if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['bgColorTab']) {
116
- bgTabClass = HDSColor(props.heroData.tabContent[currentTab]['bgColorTab'])
106
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['bgColorTab']){
107
+ bgTabClass = HDSColor(props.heroData.tabContent[currentTab]['bgColorTab'])
117
108
  }
118
- if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['videoUrl']) {
119
- videoUrl = props.heroData.tabContent[currentTab]['videoUrl']
109
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['videoUrl']){
110
+ videoUrl = props.heroData.tabContent[currentTab]['videoUrl']
120
111
  }
121
- if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['videoPoster']) {
122
- videoPoster = props.heroData.tabContent[currentTab]['videoPoster']
112
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['videoPoster']){
113
+ videoPoster = props.heroData.tabContent[currentTab]['videoPoster']
123
114
  }
124
- if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['img_url']) {
125
- img_url = props.heroData.tabContent[currentTab]['img_url']
115
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['img_url']){
116
+ img_url = props.heroData.tabContent[currentTab]['img_url']
126
117
  }
127
- if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['pillColor']) {
128
- pillColorClass = props.heroData.tabContent[currentTab]['pillColor']
118
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['pillColor']){
119
+ pillColorClass = props.heroData.tabContent[currentTab]['pillColor']
129
120
  }
130
- if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['bgColorTab']) {
131
- bgTabClass = HDSColor(props.heroData.tabContent[currentTab]['bgColorTab']);
121
+ if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['bgColorTab']){
122
+ bgTabClass = HDSColor(props.heroData.tabContent[currentTab]['bgColorTab']);
132
123
  }
133
124
 
134
125
  return (
135
- <div className={`${(heroBgColorClass)} -mt-[81px] pt-[81px] transition ease-in-out duration-700 tb:mt-0 tb:pt-0 max-w-7xl rounded-b-3xl tb:rounded-3xl`} >
136
- {/* <div className={`${(heroBgColorClass)} max-w-7xl rounded-3xl bg-gradient-to-br from-green-500 to-green-900`} > */}
137
- {props.heroData.navTabs &&
126
+ <div className={`${(heroBgColorClass)} -mt-[81px] pt-[81px] tb:mt-0 tb:pt-0 max-w-7xl rounded-b-3xl tb:rounded-3xl`} >
127
+ {/* <div className={`${(heroBgColorClass)} max-w-7xl rounded-3xl bg-gradient-to-br from-green-500 to-green-900`} > */}
128
+ {props.heroData.navTabs &&
138
129
 
139
- <div className='pt-5 pb-14 tb:px-10 db:p-20 tb:pt-[60px] tb:pb-20 tb-l:px-20 flex flex-col shadow rounded-2xl'>
130
+ <div className='py-5 db:p-20 tb:p-10 flex flex-col shadow rounded-2xl'>
140
131
 
141
- <div className='flex px-8 tb:px-0 overflow-scroll scrollbar-hide tb-l:justify-center justify-start'>
142
- <div className={`${bgTabClass} bg-opacity-30 p-1 rounded-[32px]`}>
143
- <Tab
144
- onTabClick={handleTabClick}
145
- tabs={props.heroData.navTabs}
146
- bgColorTab={props.heroData.bgColorTab}
147
- pillColor={pillColorClass}
148
- initialTab={firstTab}
149
- />
150
- </div>
151
- </div>
152
- <div className='flex flex-col-reverse pt-6 px-8 tb:px-0 tb:flex tb:flex-row tb:pt-20 tb:justify-between min-h-[384px]'>
153
- <div className=' mt-3 db:max-w-[535px] tb:w-1/2'>
154
- {props.heroData.tabContent &&
155
- props.heroData.tabContent[currentTab] &&
156
- tabCard(props.heroData.tabContent[currentTab])}
157
- </div>
158
- <div className='grid items-center relative db:max-w-[500px] tb:w-1/2 transition-opacity duration-700 ease-linear '>
159
- {
160
- showVideo ? (
161
- <video
162
- id="hero_vid"
163
- controls={false}
164
- autoPlay
165
- muted
166
- playsInline
167
- width="500"
168
- height="500"
169
- className="tb:w-full w-full rounded-3xl"
170
- src={heroData.video_url}
171
- >
172
- </video>
173
- ) : (
174
- <div className="relative">
175
- {
176
- heroData.img_url && (
177
- <img src={heroData.img_url} alt="Illustration" />
178
- )
179
- }
180
- {
181
- heroData.video_url && (
182
- <div className="w-14 h-14 cursor-pointer video-play-btn before:bg-blue-700 after:bg-blue-700 rounded-full flex items-center justify-center bg-blue-700 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-neutral-1000 shadow-2xl"
183
- onClick={() => setShowVideo(true)}
184
- >
185
- <Icon variant='play' height='h-6 w-6 ml-1' strokeClass='stroke-neutral-0' />
186
- </div>
187
- )
188
- }
132
+ <div className='flex px-8 tb:px-0 overflow-scroll scrollbar-hide tb-l:justify-center justify-start'>
133
+ <div className={`${bgTabClass} bg-opacity-30 p-1 rounded-[32px]`}>
134
+ <Tab
135
+ onTabClick={handleTabClick}
136
+ tabs={props.heroData.navTabs}
137
+ bgColorTab={props.heroData.bgColorTab}
138
+ pillColor={pillColorClass}
139
+ />
140
+ </div>
141
+ </div>
142
+ <div className='flex flex-col-reverse pt-6 px-8 tb:px-0 tb:flex tb:flex-row tb:items-center tb:pt-10 tb:justify-between'>
143
+ <div className=' mt-3 db:max-w-[488px] tb:w-1/2'>
144
+ {props.heroData.tabContent &&
145
+ props.heroData.tabContent[currentTab] &&
146
+ tabCard(props.heroData.tabContent[currentTab])}
147
+ </div>
148
+ <div className=' db:max-w-[540px] tb:w-1/2 '>
149
+ <MediaBox
150
+ video_url = {videoUrl}
151
+ video_poster = {videoPoster}
152
+
153
+ />
154
+ </div>
189
155
  </div>
190
- )
191
- }
192
-
193
-
194
-
195
-
196
- {/*
197
- // (
198
- // <div
199
- // onClick={() => setShowVideo(true)}
200
- // className='w-14 h-14 cursor-pointer video-play-btn before:bg-blue-700 after:bg-blue-700 rounded-full flex items-center absolute justify-center bg-blue-700 left-1/2 top-1/2 shadow-neutral-1000 shadow-2xl'>
201
- // <Icon variant='play' height='h-6 w-6 ml-1' strokeClass='stroke-neutral-0' />
202
- // </div>
203
-
204
- // )} */}
205
156
 
206
- </div>
207
- </div>
157
+ <div className=''>
158
+ {props.heroData.tabContent[currentTab] &&
159
+ LinkCardsFn(props.heroData.tabContent[currentTab])}
160
+ </div>
161
+ </div>
208
162
 
209
- <div className=''>
210
- {props.heroData.tabContent[currentTab] &&
211
- LinkCardsFn(props.heroData.tabContent[currentTab])}
212
- </div>
213
- </div>
214
-
215
- }
163
+ }
216
164
 
217
- </div>
165
+ </div>
218
166
  )
219
167
  }
220
168
 
package/src/HDS/components/Tables/tableD.js CHANGED
@@ -14,6 +14,7 @@ export default function PricingTableB(props) {
14
14
  TABLE_VALUE,
15
15
  TABLE_HEADER,
16
16
  } = props;
17
+ console.log(TABLE_VALUE)
17
18
  const tableValuesm = (section, keyIndex) => {
18
19
 
19
20
  let columnSize = '';
@@ -35,10 +36,9 @@ export default function PricingTableB(props) {
35
36
  <React.Fragment key={index + keyIndex}>
36
37
  {keyIndex !== null
37
38
  && keyIndex === rowTitleKey
38
- && index != (columnSize - 1)
39
- && index != 0 && (
39
+ && index !== (columnSize - 1)
40
+ && index !== 0 && (
40
41
  <td
41
-
42
42
  className="pl-[30px] border-80 "
43
43
  >
44
44
  <div className=' '>
@@ -47,8 +47,8 @@ export default function PricingTableB(props) {
47
47
  </td>)}
48
48
  {keyIndex !== null
49
49
  && keyIndex === rowTitleKey
50
- && index != (columnSize - 1)
51
- && index == 0 && (
50
+ && index !== (columnSize - 1)
51
+ && index === 0 && (
52
52
  <td
53
53
  className="pl-[30px] border-80 "
54
54
  >
@@ -61,7 +61,7 @@ export default function PricingTableB(props) {
61
61
 
62
62
  {keyIndex !== null
63
63
  && keyIndex === rowTitleKey
64
- && index == (columnSize - 1) && (
64
+ && index === (columnSize - 1) && (
65
65
  <td
66
66
 
67
67
  className="pl-[30px] border-80 "
@@ -73,7 +73,7 @@ export default function PricingTableB(props) {
73
73
 
74
74
  </td>)}
75
75
 
76
- {keyIndex !== null && keyIndex !== rowTitleKey && value[keyIndex] !== null && index != 0 && index != (columnSize - 1) && (
76
+ {keyIndex !== null && keyIndex !== rowTitleKey && value[keyIndex] !== null && index !== 0 && index !== (columnSize - 1) && (
77
77
  <td
78
78
 
79
79
  className="px-8 text-left ml-[30px] border-80 "
@@ -96,7 +96,7 @@ export default function PricingTableB(props) {
96
96
  )}
97
97
  </td>)
98
98
  }
99
- {keyIndex !== null && keyIndex !== rowTitleKey && value[keyIndex] !== null && index == 0 && (
99
+ {keyIndex !== null && keyIndex !== rowTitleKey && value[keyIndex] !== null && index === 0 && (
100
100
  <td
101
101
 
102
102
  className="px-8 text-left ml-[30px] border-80 "
@@ -119,7 +119,7 @@ export default function PricingTableB(props) {
119
119
  )}
120
120
  </td>)
121
121
  }
122
- {keyIndex !== null && keyIndex !== rowTitleKey && value[keyIndex] !== null && index == (columnSize - 1) && (
122
+ {keyIndex !== null && keyIndex !== rowTitleKey && value[keyIndex] !== null && index === (columnSize - 1) && (
123
123
  <td
124
124
 
125
125
  className="px-8 text-left ml-[30px] border-80 "
@@ -161,32 +161,20 @@ export default function PricingTableB(props) {
161
161
  }
162
162
  return (
163
163
  <div className='px-10'>
164
- <div className=" flex justify-around ">
165
- <div className="w-full flex-col items-center flex justify-around tb-l:flex tb-l:flex-col tb-l:items-center">
166
- <div>
167
- {title && (
168
- <Typography
169
- textStyle='h3'
170
- className={HDSColor(title_color)}
171
- >
172
- {title}
173
- </Typography>
174
- )}
175
- {description && (
176
- <Typography
177
- textStyle='body1c'
178
- className={HDSColor(desc_color)}
179
- >
180
- {description}
181
- </Typography>
182
- )}
183
- </div>
184
- </div>
185
- </div>
164
+
186
165
  <div className='hidden tb:block' >
187
- <div className=" mt-[70px] rounded-3xl ">
166
+ <div className=" mt-[70px] rounded-3xl bg-neutral-0">
167
+
168
+ {TABLE_HEADER && TABLE_HEADER[0] && TABLE_HEADER[0]['title'] && (
169
+ <Typography
170
+ textStyle='h3'
171
+ className={`pb-10 pl-8 ${HDSColor(title_color)}`}
172
+ >
173
+ {TABLE_HEADER[0]['title']}
174
+ </Typography>
175
+ )}
188
176
  <table className="rounded-3xl w-full table-fixed ">
189
- <thead>
177
+ {/* <thead>
190
178
  <tr className=' text-left first:pr-20 '>
191
179
  {Object.keys(TABLE_HEADER).map((key, index) => (
192
180
  <th
@@ -255,9 +243,9 @@ export default function PricingTableB(props) {
255
243
  </th>
256
244
  ))}
257
245
  </tr>
258
- </thead>
246
+ </thead> */}
259
247
  {TABLE_VALUE.map((section, index) => (
260
- <tbody key={index} className="border-90">
248
+ <tbody key={index} className="border-90 bg-neutral-0">
261
249
  {Object.keys(section).map((keyIndex) => (
262
250
  <>
263
251
  <tr key={index + keyIndex} className=''>
@@ -265,14 +253,32 @@ export default function PricingTableB(props) {
265
253
  <React.Fragment key={keyIndex2 + keyIndex + index}>
266
254
  {keyIndex2 !== null && (
267
255
  <th
268
- className='bg-neutral-100 first:rounded-l-full last:rounded-r-full px-8'
256
+ className='first:rounded-l-full last:rounded-r-full px-8 sticky top-0 z-10'
269
257
  >
270
258
  <Typography
271
259
  textStyle='h5'
272
260
  className='text-neutral-900 py-3.5 text-left'
273
261
  >
274
262
  {keyIndex2}
263
+
275
264
  </Typography>
265
+ { <div className='flex -mt-2'>
266
+ <HDSButton
267
+ label='Try free'
268
+ type='secondaryLink'
269
+ leftIconVariant='none'
270
+ rightIconVariant='none'
271
+ state='default'
272
+ size='sm'
273
+ rightAnimatedArrow={true}
274
+ rightAnimatedArrowColor='#3970FD'
275
+ animatedHoverStroke='#3970FD'
276
+ btnTextColorClass='text-blue-500'
277
+ btnTextHoverClass=''
278
+ className=' '
279
+ />
280
+ </div>}
281
+
276
282
  </th>
277
283
  )}
278
284
  </React.Fragment>
@@ -292,7 +298,7 @@ export default function PricingTableB(props) {
292
298
  <td></td>
293
299
  {TABLE_HEADER.map((value, index) => (
294
300
  <React.Fragment key={index}>
295
- {index != 0 && value['button_title'] &&
301
+ {index !== 0 && value['button_title'] &&
296
302
  <td key={index} className='px-8'>
297
303
  <a href={value['button_link']}>
298
304
  <HDSButton
package/src/HDS/modules/navCard/navCard.js CHANGED
@@ -60,7 +60,7 @@ export default function NavCard(props) {
60
60
  showVideo ? (
61
61
  <video
62
62
  id="hero_vid"
63
- controls={false}
63
+ controls={true}
64
64
  autoPlay
65
65
  muted
66
66
  playsInline
package/src/index.css CHANGED
@@ -491,11 +491,12 @@
491
491
 
492
492
  .border-90 {
493
493
  position: relative;
494
+ background-color: white;
494
495
  }
495
496
 
496
497
  .border-90::after {
497
498
  content: "";
498
- position: absolute;
499
+ position: absolute;
499
500
  bottom: 0;
500
501
  left: 0;
501
502
  width: 100%;
package/src/styles/tailwind.css CHANGED
@@ -839,6 +839,11 @@ select{
839
839
  position: relative;
840
840
  }
841
841
 
842
+ .sticky{
843
+ position: -webkit-sticky;
844
+ position: sticky;
845
+ }
846
+
842
847
  .inset-0{
843
848
  inset: 0px;
844
849
  }
@@ -1388,6 +1393,14 @@ select{
1388
1393
  margin-top: 70px;
1389
1394
  }
1390
1395
 
1396
+ .-mt-1{
1397
+ margin-top: -0.25rem;
1398
+ }
1399
+
1400
+ .-mt-2{
1401
+ margin-top: -0.5rem;
1402
+ }
1403
+
1391
1404
  .line-clamp-3{
1392
1405
  overflow: hidden;
1393
1406
  display: -webkit-box;
@@ -1899,10 +1912,18 @@ select{
1899
1912
  max-width: 400px;
1900
1913
  }
1901
1914
 
1915
+ .max-w-\[430px\]{
1916
+ max-width: 430px;
1917
+ }
1918
+
1902
1919
  .max-w-\[44\.44rem\]{
1903
1920
  max-width: 44.44rem;
1904
1921
  }
1905
1922
 
1923
+ .max-w-\[583px\]{
1924
+ max-width: 583px;
1925
+ }
1926
+
1906
1927
  .max-w-\[6rem\]{
1907
1928
  max-width: 6rem;
1908
1929
  }
@@ -1937,14 +1958,6 @@ select{
1937
1958
  max-width: min-content;
1938
1959
  }
1939
1960
 
1940
- .max-w-\[430px\]{
1941
- max-width: 430px;
1942
- }
1943
-
1944
- .max-w-\[583px\]{
1945
- max-width: 583px;
1946
- }
1947
-
1948
1961
  .flex-1{
1949
1962
  flex: 1 1 0%;
1950
1963
  }
@@ -6252,6 +6265,10 @@ select{
6252
6265
  padding-left: 1.75rem;
6253
6266
  }
6254
6267
 
6268
+ .pl-8{
6269
+ padding-left: 2rem;
6270
+ }
6271
+
6255
6272
  .pl-\[30px\]{
6256
6273
  padding-left: 30px;
6257
6274
  }
@@ -8275,6 +8292,7 @@ select{
8275
8292
 
8276
8293
  .border-90 {
8277
8294
  position: relative;
8295
+ background-color: white;
8278
8296
  }
8279
8297
 
8280
8298
  .border-90::after {