hds-web 1.10.4 → 1.10.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 +2 -2
- package/dist/index.js +4 -4
- package/package.json +1 -1
- package/src/HDS/components/Cards/Testimonials/testimonial.js +6 -8
- package/src/HDS/components/Cards/VideoCard/homeVC.js +32 -29
- package/src/HDS/components/Carousels/homeCarousel.js +124 -95
package/package.json
CHANGED
|
@@ -23,13 +23,11 @@ export default function Testimonial(props) {
|
|
|
23
23
|
card = card.card;
|
|
24
24
|
return (
|
|
25
25
|
<>
|
|
26
|
-
<div className={` backdrop-blur-lg bg-neutral-1000 bg-opacity-20 rounded-
|
|
27
|
-
<div className="">
|
|
26
|
+
<div className={` backdrop-blur-lg bg-neutral-1000 bg-opacity-20 rounded-[6px] w-[220px] h-[428px] flex flex-col justify-between `}>
|
|
27
|
+
<div className="h-[428px]">
|
|
28
28
|
<div className=" pt-8 pl-6">
|
|
29
29
|
<img src={card.title_img} alt="Card" className=" inline-block w-16 " />
|
|
30
30
|
</div>
|
|
31
|
-
|
|
32
|
-
|
|
33
31
|
{card.subtitle && <div className="mt-6 px-6 font-petrona text-base font-normal text-neutral-0 ">{card.subtitle}</div>}
|
|
34
32
|
</div>
|
|
35
33
|
<div className="pl-6 pb-8">
|
|
@@ -53,7 +51,7 @@ export default function Testimonial(props) {
|
|
|
53
51
|
cardHover = cardHover.cardHover;
|
|
54
52
|
return (
|
|
55
53
|
<div className="h-[428px]">
|
|
56
|
-
<div className={`${HDSColor(cardHover.cardBg)} rounded-
|
|
54
|
+
<div className={`${HDSColor(cardHover.cardBg)} rounded-[6px] w-[220px] justify-between h-[428px] flex flex-col`}>
|
|
57
55
|
<div className=" ">
|
|
58
56
|
<div className="pt-8 pl-6 ">
|
|
59
57
|
<img src={cardHover.img_url} alt="Card" className=" inline-block max-w-[148px]" />
|
|
@@ -80,15 +78,15 @@ export default function Testimonial(props) {
|
|
|
80
78
|
|
|
81
79
|
return (
|
|
82
80
|
<div
|
|
83
|
-
className={` ${isHovered ? '' : ''}
|
|
81
|
+
className={` ${isHovered ? '' : ''} w-[220px] h-[428px] rounded-2xl`}
|
|
84
82
|
onMouseEnter={handleMouseEnter}
|
|
85
83
|
onMouseLeave={handleMouseLeave}
|
|
86
84
|
>
|
|
87
85
|
|
|
88
|
-
<div className={`transition-all max-w-[220px]
|
|
86
|
+
<div className={`transition-all max-w-[220px] absolute left-0 top-0 ease-in-out rounded-[6px] duration-300 ${isHovered ? 'opacity-0 ' : 'opacity-100'}`}>
|
|
89
87
|
<Card1 card={props.card} />
|
|
90
88
|
</div>
|
|
91
|
-
<div className={`transition-al
|
|
89
|
+
<div className={`transition-al absolute left-0 top-0 ease-in-out rounded-[6px] duration-300 ${isHovered ? 'opacity-100' : 'opacity-0'}`}>
|
|
92
90
|
<Card2 cardHover={props.cardHover} />
|
|
93
91
|
</div>
|
|
94
92
|
</div>
|
|
@@ -5,9 +5,16 @@ import {FeedbackCard} from '../Feedback'
|
|
|
5
5
|
export default function HomeVC(props) {
|
|
6
6
|
return (
|
|
7
7
|
<>
|
|
8
|
-
<div className='
|
|
9
|
-
<div className='
|
|
10
|
-
|
|
8
|
+
<div className='relative overflow-hidden'>
|
|
9
|
+
<div className='absolute z-50 right-[4px] rounded-[6px] hidden min-[699px]:block w-[220px] h-[428px] top-[4px] bg-neutral-0/40'>
|
|
10
|
+
|
|
11
|
+
<Testimonial
|
|
12
|
+
card={props.testimonial.card}
|
|
13
|
+
cardHover={props.testimonial.cardHover}
|
|
14
|
+
/>
|
|
15
|
+
</div>
|
|
16
|
+
<div className=' relative hidden w-[580px] h-[436px] rounded-2xl min-[699px]:flex justify-center items-center'>
|
|
17
|
+
<div className='w-[580px] h-[436px] rounded-lg flex flex-col items-center justify-center overflow-hidden'>
|
|
11
18
|
<div className=''>
|
|
12
19
|
<div className=''>
|
|
13
20
|
<video
|
|
@@ -17,48 +24,44 @@ export default function HomeVC(props) {
|
|
|
17
24
|
className=" object-fill max-w-full max-h-full scale-150"
|
|
18
25
|
src={props.video_url}
|
|
19
26
|
/>
|
|
20
|
-
<div className='w-full
|
|
21
|
-
<div className='
|
|
27
|
+
<div className='w-full relative z-50 flex-col flex items-center'>
|
|
28
|
+
<div className='relative top-[55px] left-[0px] w-[147px] h-[3px] bg-neutral-0/20' />
|
|
22
29
|
</div>
|
|
23
30
|
</div>
|
|
24
|
-
<div className='fixed top-[24px] left-[375px] bg-neutral-0/40'>
|
|
25
31
|
|
|
26
|
-
<Testimonial
|
|
27
|
-
card={props.testimonial.card}
|
|
28
|
-
cardHover={props.testimonial.cardHover}
|
|
29
|
-
/>
|
|
30
|
-
</div>
|
|
31
32
|
</div>
|
|
32
33
|
</div>
|
|
33
34
|
</div>
|
|
34
|
-
|
|
35
|
-
|
|
35
|
+
|
|
36
|
+
<div className='overflow-x-hidden w-screen min-[699px]:hidden'>
|
|
37
|
+
<div className=' h-[600px] rounded flex flex-col items-center justify-cente overflow-hidden'>
|
|
36
38
|
|
|
37
39
|
<div className=''>
|
|
38
|
-
<div className='
|
|
39
|
-
<div className=''>
|
|
40
|
+
<div className=''>
|
|
41
|
+
<div className='h-[348px]'>
|
|
40
42
|
<video
|
|
41
43
|
autoPlay
|
|
42
44
|
loop
|
|
43
45
|
muted
|
|
44
|
-
className=" object-fill max-w-full max-h-full scale-[1.7]"
|
|
46
|
+
className=" object-fill max-w-full max-h-full min-[699px]:scale-[1.7]"
|
|
45
47
|
src={props.video_url}
|
|
46
48
|
/>
|
|
47
49
|
|
|
48
50
|
</div>
|
|
49
|
-
<div className='absolute z-50 top-[72px] px-4'>
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
51
|
+
<div className='absolute max-[365px]:h-[657px] h-[600px] z-50 top-[72px] px-4'>
|
|
52
|
+
<div className=''>
|
|
53
|
+
< FeedbackCard
|
|
54
|
+
brandImgUrl={props.testimonial.card.title_img}
|
|
55
|
+
brandImgAlt={props.testimonial.card.avatar.name}
|
|
56
|
+
description={props.testimonial.card.subtitle}
|
|
57
|
+
speakerName={props.testimonial.card.avatar.name}
|
|
58
|
+
speakerDesignation={props.testimonial.card.avatar.designation}
|
|
59
|
+
speakerImgUrl={props.testimonial.card.avatar.img_url}
|
|
60
|
+
blurb={props.testimonial.cardHover.title}
|
|
61
|
+
dividerClass='border-b border-neutral-150'
|
|
62
|
+
caseStudyUrl={props.testimonial.cardHover.button.cta_text}
|
|
63
|
+
/>
|
|
64
|
+
</div>
|
|
62
65
|
</div>
|
|
63
66
|
</div>
|
|
64
67
|
</div>
|
|
@@ -23,6 +23,8 @@ const SideCard = (item) => (
|
|
|
23
23
|
)
|
|
24
24
|
|
|
25
25
|
export default function HomePageCarousePrimary(props) {
|
|
26
|
+
|
|
27
|
+
//center carousel
|
|
26
28
|
let arr = []
|
|
27
29
|
let key1, key2;
|
|
28
30
|
for (const key in props.data) {
|
|
@@ -33,6 +35,7 @@ export default function HomePageCarousePrimary(props) {
|
|
|
33
35
|
|
|
34
36
|
}
|
|
35
37
|
}
|
|
38
|
+
|
|
36
39
|
function extractMappedValues(obj) {
|
|
37
40
|
return {
|
|
38
41
|
video_url: obj.video.data.attributes.url || "",
|
|
@@ -70,6 +73,8 @@ export default function HomePageCarousePrimary(props) {
|
|
|
70
73
|
const carouselRef = useRef(null); // Create a ref using useRef
|
|
71
74
|
const carouselRef2 = useRef(null); // Create a ref using useRef
|
|
72
75
|
const [currentCard, setCurrentCard] = React.useState(0);
|
|
76
|
+
const [leftDisablebtn, setLeftDisablebtn] = React.useState(false);
|
|
77
|
+
const [rightDisablebtn, setRightDisablebtn] = React.useState(false);
|
|
73
78
|
const refs = videoProps.reduce((acc, val, i) => {
|
|
74
79
|
acc[i] = React.createRef();
|
|
75
80
|
return acc;
|
|
@@ -139,7 +144,7 @@ export default function HomePageCarousePrimary(props) {
|
|
|
139
144
|
}
|
|
140
145
|
};
|
|
141
146
|
|
|
142
|
-
const arrowStyle = ' text-2xl z-
|
|
147
|
+
const arrowStyle = ' text-2xl z-50 bg-black h-10 w-10 rounded-full bg-neutral-0 shadow-md hover:bg-neutral-100 hover:shadow-lg bg-blue-600 z-500 flex items-center justify-center';
|
|
143
148
|
|
|
144
149
|
const toggleBoolean = () => {
|
|
145
150
|
setBoolean((prevBoolean) => !prevBoolean); // Toggle the boolean value
|
|
@@ -153,7 +158,7 @@ export default function HomePageCarousePrimary(props) {
|
|
|
153
158
|
toggleBoolean(); // Call the toggleBoolean function
|
|
154
159
|
isLeft ? previousCard() : nextCard(); // Call previousCard or nextCard based on the button clicked
|
|
155
160
|
}}
|
|
156
|
-
className={`flex ${arrowStyle} ${isLeft ? '' : ''}`}
|
|
161
|
+
className={`flex bg-blue-600 ${arrowStyle} ${isLeft ? '' : ''}`}
|
|
157
162
|
>
|
|
158
163
|
<span role="img" aria-label={`Arrow ${isLeft ? 'left' : 'right'}`}>
|
|
159
164
|
{isLeft ? (
|
|
@@ -166,121 +171,145 @@ export default function HomePageCarousePrimary(props) {
|
|
|
166
171
|
);
|
|
167
172
|
const [isScrollActive, setScrollActive] = useState(false);
|
|
168
173
|
|
|
169
|
-
|
|
170
|
-
setScrollActive(true); // Mouse entered, scroll is active
|
|
171
|
-
};
|
|
172
|
-
|
|
173
|
-
const handleMouseLeave = () => {
|
|
174
|
-
setScrollActive(false); // Mouse left, scroll is inactive
|
|
175
|
-
};
|
|
174
|
+
console.log(videoProps)
|
|
176
175
|
return (
|
|
177
|
-
<div className=""
|
|
178
|
-
onMouseEnter={handleMouseEnter}
|
|
179
|
-
onMouseLeave={handleMouseLeave}
|
|
180
|
-
>
|
|
181
176
|
|
|
177
|
+
<div className="min-[699px]:relative block">
|
|
182
178
|
|
|
183
|
-
<div className="
|
|
184
|
-
<div className="flex z-50 justify-center items-center">
|
|
185
|
-
{/* {slider()} */}
|
|
186
|
-
<div className="flex w-screen gap-6 justify-center ">
|
|
187
|
-
{sliderControl(true)}
|
|
188
|
-
{sliderControl()}
|
|
189
|
-
</div>
|
|
190
|
-
</div>
|
|
191
|
-
<div className="justify-center select-none items-center"
|
|
192
|
-
|
|
193
|
-
>
|
|
194
|
-
<div className="w-screen flex justify-center">
|
|
195
|
-
<div className="db:absolute z-30">
|
|
196
|
-
<div className={`snap-x w-screen tb:w-[643px] bg-neutral-100 tb:h-[513px] db:h-[800px] items-center z-10 inline-flex select-none overflow-x-hidden scrollbar-hide`}
|
|
197
|
-
ref={carouselRef}
|
|
198
|
-
>
|
|
199
|
-
{videoProps.map((item, i) => (
|
|
200
|
-
<div className=" db:snap-center snap-center tb-m:snap-start mx-5 " key={i} ref={refs[i]}>
|
|
201
|
-
<div className="select-none rounded-3xl object-contain ">
|
|
202
|
-
{React.createElement(VideoCard, item)}
|
|
203
|
-
</div>
|
|
179
|
+
<div className="mx-auto w-screen"
|
|
204
180
|
|
|
205
|
-
|
|
206
|
-
|
|
181
|
+
>
|
|
182
|
+
<div className="min-[699px]:relative flex flex-col items-center right-[75ppx] top-[112px]">
|
|
183
|
+
<div className="absolute">
|
|
207
184
|
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
<div className={`hidden snap-x w-screen tb-l:max-w-[980px] min-[1300px]:max-w-7xl h-[675px] items-center db:flex min-[1300px]:gap-[160px] select-none overflow-x-hidden scrollbar-hide relative top-[90px]`}
|
|
211
|
-
ref={carouselRef2}
|
|
185
|
+
{/* <BackCarousel /> */}
|
|
186
|
+
</div>
|
|
212
187
|
|
|
213
|
-
|
|
188
|
+
</div>
|
|
214
189
|
|
|
215
|
-
|
|
190
|
+
<div className=" min-[699px]:relative top-5 rounded-lg">
|
|
191
|
+
<div className=" min-[699px]:absolute">
|
|
192
|
+
<div className=" flex flex-col-reverse tb:flex-col-reverse tb:flex items-center">
|
|
193
|
+
<div className="hidden min-[699px]:flex z-10 min-[699px]:mt-[70px] justify-center items-center">
|
|
216
194
|
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
195
|
+
<div className="flex w-screen gap-6 justify-center ">
|
|
196
|
+
{sliderControl(true)}
|
|
197
|
+
{sliderControl()}
|
|
198
|
+
</div>
|
|
199
|
+
</div>
|
|
200
|
+
<div className="max-[369px]:mt-8 min-[400px]:-mt-20 min-[699px]:hidden">
|
|
220
201
|
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
<div>
|
|
228
|
-
{SideCard(item)}
|
|
202
|
+
<div className="flex w-screen gap-6 justify-center ">
|
|
203
|
+
{sliderControl(true)}
|
|
204
|
+
{sliderControl()}
|
|
205
|
+
</div>
|
|
206
|
+
</div>
|
|
207
|
+
<div className="justify-center select-none items-center"
|
|
229
208
|
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
<div
|
|
234
|
-
|
|
235
|
-
key={i + 'y'}
|
|
236
|
-
ref={refs2[i]}
|
|
209
|
+
>
|
|
210
|
+
<div className="w-screen flex justify-center items-center ">
|
|
211
|
+
<div className=" z-30">
|
|
212
|
+
<div className={`snap-x max-[699px]:w-screen bg-neutral-00 tb:w-[580px] items-center z-20 inline-flex select-none overflow-x-hidden scrollbar-hide`}
|
|
213
|
+
ref={carouselRef}
|
|
237
214
|
>
|
|
238
|
-
<div className="select-none rounded-3xl object-contain">
|
|
239
215
|
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
{
|
|
244
|
-
|
|
245
|
-
:
|
|
246
|
-
<>
|
|
247
|
-
{SideCard(arr[0])}
|
|
248
|
-
</>
|
|
216
|
+
{videoProps.map((item, i) => (
|
|
217
|
+
<div className=" db:snap-center snap-center mx-6 " key={i} ref={refs[i]}>
|
|
218
|
+
<div className="select-none rounded-3xl object-contain ">
|
|
219
|
+
{React.createElement(VideoCard, item)}
|
|
220
|
+
</div>
|
|
249
221
|
|
|
250
|
-
|
|
222
|
+
</div>
|
|
223
|
+
))}
|
|
251
224
|
|
|
252
|
-
</div>
|
|
253
|
-
</div>
|
|
254
|
-
<div
|
|
255
|
-
className={`${isScrollActive ? '' : 'translate-y-36'} transition-all duration-[1500ms] z-[1] snap-center tb-m:snap-start mx-5 `}
|
|
256
|
-
key={i + 'z'}
|
|
257
|
-
ref={refs2[i]}
|
|
258
|
-
>
|
|
259
|
-
<div className="select-none rounded-3xl object-contain">
|
|
260
|
-
|
|
261
|
-
{(i + 1) < arr.length ?
|
|
262
|
-
<>
|
|
263
|
-
{SideCard(arr[i + 1])}
|
|
264
|
-
</>
|
|
265
|
-
:
|
|
266
|
-
<>
|
|
267
|
-
{SideCard(arr[0])}
|
|
268
|
-
</>
|
|
269
|
-
|
|
270
|
-
}
|
|
271
|
-
</div>
|
|
272
225
|
</div>
|
|
226
|
+
</div>
|
|
273
227
|
|
|
228
|
+
<div className={`hidden snap-x tb-l:max-w-[1240px] min-[1300px]:max-w-7xl
|
|
229
|
+
gap-[167px]
|
|
230
|
+
items-center min-[1300px]:flex select-none overflow-x-hidden scrollbar-hide absolute z-0`}
|
|
231
|
+
ref={carouselRef2}
|
|
232
|
+
|
|
233
|
+
>
|
|
234
|
+
|
|
235
|
+
{arr.map((item, i) => {
|
|
236
|
+
|
|
237
|
+
// toggleBoolean();
|
|
238
|
+
return (
|
|
239
|
+
<>
|
|
240
|
+
|
|
241
|
+
<div
|
|
242
|
+
className={`${isScrollActive ? '' : ''} transition-all duration-[1500ms] z-[1] snap-center tb-m:snap-start mx-3`}
|
|
243
|
+
key={i + 'x'}
|
|
244
|
+
ref={refs2[i]}
|
|
245
|
+
>
|
|
246
|
+
<div className="select-none rounded-3xl object-contain">
|
|
247
|
+
<div>
|
|
248
|
+
{SideCard(item)}
|
|
249
|
+
|
|
250
|
+
</div>
|
|
251
|
+
</div>
|
|
252
|
+
</div>
|
|
253
|
+
<div
|
|
254
|
+
className={`${isScrollActive ? ' ' : ''} transition-all duration-[1500ms] z-[1] snap-center tb-m:snap-start mx-3 `}
|
|
255
|
+
key={i + 'y'}
|
|
256
|
+
ref={refs2[i]}
|
|
257
|
+
>
|
|
258
|
+
<div className="select-none rounded-3xl object-contain">
|
|
259
|
+
|
|
260
|
+
{/* {(i + 2) < arr.length && SideCard(arr[i+2])} */}
|
|
261
|
+
{(i + 2) < arr.length ?
|
|
262
|
+
<>
|
|
263
|
+
{SideCard(arr[i + 2])}
|
|
264
|
+
</>
|
|
265
|
+
:
|
|
266
|
+
<>
|
|
267
|
+
{SideCard(arr[0])}
|
|
268
|
+
</>
|
|
269
|
+
|
|
270
|
+
}
|
|
271
|
+
|
|
272
|
+
</div>
|
|
273
|
+
</div>
|
|
274
|
+
<div
|
|
275
|
+
className={`${isScrollActive ? '' : ''} transition-all duration-[1500ms] z-[1] snap-center tb-m:snap-start mx-3 `}
|
|
276
|
+
key={i + 'z'}
|
|
277
|
+
ref={refs2[i]}
|
|
278
|
+
>
|
|
279
|
+
<div className="select-none rounded-3xl object-contain">
|
|
280
|
+
|
|
281
|
+
{(i + 1) < arr.length ?
|
|
282
|
+
<>
|
|
283
|
+
{SideCard(arr[i + 1])}
|
|
284
|
+
</>
|
|
285
|
+
:
|
|
286
|
+
<>
|
|
287
|
+
{SideCard(arr[0])}
|
|
288
|
+
</>
|
|
289
|
+
|
|
290
|
+
}
|
|
291
|
+
</div>
|
|
292
|
+
</div>
|
|
293
|
+
|
|
294
|
+
|
|
295
|
+
</>
|
|
296
|
+
)
|
|
297
|
+
})}
|
|
298
|
+
|
|
299
|
+
</div>
|
|
274
300
|
|
|
275
|
-
</>
|
|
276
|
-
)
|
|
277
|
-
})}
|
|
278
301
|
|
|
302
|
+
</div>
|
|
303
|
+
</div>
|
|
279
304
|
</div>
|
|
280
305
|
</div>
|
|
281
306
|
</div>
|
|
307
|
+
<div className=" hidden min-[699px]:flex tb:flex-col items-center">
|
|
308
|
+
<div className="relative -right-[44px]">
|
|
309
|
+
<img alt="tab" src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1687108911/hasura-design-system/Group_2608834_rxnldq.png" className="w-[709px]" />
|
|
310
|
+
</div>
|
|
311
|
+
</div>
|
|
282
312
|
</div>
|
|
283
|
-
|
|
284
313
|
</div>
|
|
285
314
|
);
|
|
286
315
|
};
|