hds-web 1.10.4 → 1.10.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.
Files changed (11) hide show
  1. package/dist/index.css +1 -1
  2. package/dist/index.es.css +1 -1
  3. package/dist/index.es.js +4 -4
  4. package/dist/index.js +4 -4
  5. package/package.json +2 -1
  6. package/src/HDS/components/Cards/Testimonials/testimonial.js +6 -8
  7. package/src/HDS/components/Cards/VideoCard/homeVC.js +32 -29
  8. package/src/HDS/components/Carousels/customCarousel.js +43 -13
  9. package/src/HDS/components/Carousels/homeCarousel.js +194 -108
  10. package/src/HDS/modules/Cards/dataSourceCard.js +3 -1
  11. package/src/styles/tailwind.css +123 -77
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.10.4",
3
+ "version": "1.10.6",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
@@ -18,6 +18,7 @@
18
18
  "react-dom": "^17.0.1",
19
19
  "react-markdown": "^8.0.7",
20
20
  "react-scripts": "5.0.1",
21
+ "smoothscroll-polyfill": "^0.4.4",
21
22
  "uuid": "^9.0.0",
22
23
  "web-vitals": "^2.1.4",
23
24
  "yarn": "^1.22.19"
package/src/HDS/components/Cards/Testimonials/testimonial.js 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-2xl max-w-[220px] h-[428px] flex flex-col justify-between `}>
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-2xl max-w-[221px] justify-between h-[428px] flex flex-col`}>
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 ? '' : ''} max-w-[221px] rounded-2xl`}
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] fixed ease-in-out duration-300 ${isHovered ? 'opacity-0 ' : 'opacity-100'}`}>
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 fixed ease-in-out duration-300 ${isHovered ? 'opacity-100' : 'opacity-0'}`}>
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>
package/src/HDS/components/Cards/VideoCard/homeVC.js CHANGED
@@ -5,9 +5,16 @@ import {FeedbackCard} from '../Feedback'
5
5
  export default function HomeVC(props) {
6
6
  return (
7
7
  <>
8
- <div className='carouselShadow overflow-hidden'>
9
- <div className=' hidden w-[620px] h-[476px] bg-base-1000 rounded-2xl border-2 border-neutral-300 tb:flex justify-center items-center'>
10
- <div className='w-[580px] h-[436px] bg-base-1000 rounded flex flex-col items-center justify-center overflow-hidden'>
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 fixed flex-col flex items-center'>
21
- <div className='fixed mx-auto top-[451px] left-[235px] w-[147px] h-[3px] bg-neutral-0/20' />
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
- <div className='overflow-hidden h-[614px] tb:hidden'>
35
- <div className='w-screen h-[348px] bg-base-1000 rounded flex flex-col items-center justify-cente overflow-hidden'>
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='o'>
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
- < FeedbackCard
52
- brandImgUrl={props.testimonial.card.title_img}
53
- brandImgAlt={props.testimonial.card.avatar.name}
54
- description={props.testimonial.card.subtitle}
55
- speakerName={props.testimonial.card.avatar.name}
56
- speakerDesignation={props.testimonial.card.avatar.designation}
57
- speakerImgUrl={props.testimonial.card.avatar.img_url}
58
- blurb={props.testimonial.cardHover.title}
59
- dividerClass='border-b border-neutral-150'
60
- caseStudyUrl={props.testimonial.cardHover.button.cta_text}
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>
package/src/HDS/components/Carousels/customCarousel.js CHANGED
@@ -77,25 +77,55 @@ export default function CustomCarousel(props) {
77
77
 
78
78
  const maxVisibleCards = 6;
79
79
 
80
- const arrowStyle = ' text-2xl z-10 bg-black h-10 ml-6 w-10 rounded-full bg-neutral-0 shadow hover:bg-neutral-0 flex items-center justify-center';
80
+ const arrowStyle = ' text-2xl z-10 bg-black h-10 ml-6 w-10 rounded-full bg-neutral-0 shadow hover:bg-neutral-0 flex items-center justify-center shadow-md';
81
81
 
82
- const sliderControl = isLeft => (
82
+ const disableButton = (current, dir) => {
83
+ if (dir === 'isLeft') {
84
+ if (current === 0) return true;
85
+ else return false
86
+ }
87
+
88
+ if (dir === 'isRight') {
89
+ if (current === 2) return true;
90
+ else return false
91
+ }
92
+
93
+
94
+ }
95
+
96
+ const sliderLeftControl = () => (
83
97
  <button
84
98
  type="button"
85
- onClick={isLeft ? previousCard : nextCard}
86
- className={`flex ${arrowStyle} ${isLeft ? '' : ''}`}
87
99
 
100
+ onClick={() => {
101
+
102
+ previousCard();
103
+ }}
104
+ className={`flex bg-blue-600 ${arrowStyle} disabled:bg-neutral-200 `}
105
+ disabled={disableButton(currentCard, 'isLeft')} // Disable the button if it's the last card
88
106
  >
89
- <span role="img" aria-label={`Arrow ${isLeft ? 'left' : 'right'}`}>
90
- {isLeft ?
91
-
107
+ <span role="img" aria-label={`Arrow left `}>
108
+ {(
92
109
  <Icon height={'h-6 w-6'} variant={'chevronleft'} strokeColor='#00288E' />
110
+ )}
111
+ </span>
112
+ </button>
113
+ );
114
+ const sliderRightControl = () => (
115
+ <button
116
+ type="button"
93
117
 
94
- :
95
-
118
+ onClick={() => {
119
+
120
+ nextCard();
121
+ }}
122
+ className={`flex bg-blue-600 ${arrowStyle} disabled:bg-neutral-200 `}
123
+ disabled={disableButton(currentCard, 'isRight')} // Disable the button if it's the last card
124
+ >
125
+ <span role="img" aria-label={`Arrow right `}>
126
+ {(
96
127
  <Icon height={'h-6 w-6'} variant={'chevronright'} strokeColor='#00288E' />
97
-
98
- }
128
+ )}
99
129
  </span>
100
130
  </button>
101
131
  );
@@ -149,8 +179,8 @@ export default function CustomCarousel(props) {
149
179
  <div className="flex items-center justify-center mt-10">
150
180
  {/* {slider()} */}
151
181
  <div className="flex">
152
- {sliderControl(true)}
153
- {sliderControl()}
182
+ {sliderLeftControl()}
183
+ {sliderRightControl()}
154
184
  </div>
155
185
  </div>
156
186
  <div className="justify-center select-none items-center"
package/src/HDS/components/Carousels/homeCarousel.js CHANGED
@@ -1,8 +1,9 @@
1
1
  import React from "react";
2
- import { useRef, useState } from "react";
2
+ import { useRef, useState, useEffect } from "react";
3
3
  import { Icon } from "../common-components/Icon";
4
4
  import { HDSButton } from "../Buttons";
5
5
  import { VideoCard } from '../Cards/VideoCard'
6
+ import smoothscroll from 'smoothscroll-polyfill';
6
7
  const carouselItems = [
7
8
  [
8
9
  "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687016995/optum_Card_17973d6328.png",
@@ -23,16 +24,30 @@ const SideCard = (item) => (
23
24
  )
24
25
 
25
26
  export default function HomePageCarousePrimary(props) {
26
- let arr = []
27
- let key1, key2;
28
- for (const key in props.data) {
29
- if (props.data.hasOwnProperty(key)) {
30
- key1 = props.data[key].slideLeftImage.data.attributes.url
31
- key2 = props.data[key].slideRightImage.data.attributes.url
32
- arr.push(key1);
33
27
 
34
- }
35
- }
28
+ useEffect(() => {
29
+ smoothscroll.polyfill();
30
+
31
+ }, []);
32
+
33
+ //center carousel
34
+ let arr =
35
+ [
36
+ "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687016994/philips_5bab1602cd.png",
37
+ "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687016996/nutrien_e629b651d5.png",
38
+ "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687016995/optum_Card_17973d6328.png",
39
+
40
+ ]
41
+ // let key1, key2;
42
+ // for (const key in props.data) {
43
+ // if (props.data.hasOwnProperty(key)) {
44
+ // key1 = props.data[key].slideLeftImage.data.attributes.url
45
+ // key2 = props.data[key].slideRightImage.data.attributes.url
46
+ // arr.push(key1);
47
+
48
+ // }
49
+ // }
50
+
36
51
  function extractMappedValues(obj) {
37
52
  return {
38
53
  video_url: obj.video.data.attributes.url || "",
@@ -66,10 +81,13 @@ export default function HomePageCarousePrimary(props) {
66
81
  videoProps.push(videoProp);
67
82
  }
68
83
  }
84
+
85
+ const [isLastCard, setIsLastCard] = useState(false);
69
86
  const [boolean, setBoolean] = React.useState(null);
70
87
  const carouselRef = useRef(null); // Create a ref using useRef
71
88
  const carouselRef2 = useRef(null); // Create a ref using useRef
72
89
  const [currentCard, setCurrentCard] = React.useState(0);
90
+
73
91
  const refs = videoProps.reduce((acc, val, i) => {
74
92
  acc[i] = React.createRef();
75
93
  return acc;
@@ -79,6 +97,8 @@ export default function HomePageCarousePrimary(props) {
79
97
  return acc;
80
98
  }, {});
81
99
 
100
+
101
+
82
102
  const totalCards = arr.length;
83
103
 
84
104
  const nextCard = () => {
@@ -95,8 +115,7 @@ export default function HomePageCarousePrimary(props) {
95
115
  left: carouselRef2.current.scrollLeft + carouselRef2.current.children[0].offsetWidth * scrollByAmount2,
96
116
  behavior: "smooth",
97
117
  });
98
- }
99
- else {
118
+ } else {
100
119
  setCurrentCard(0);
101
120
  carouselRef.current.scrollTo({
102
121
  left: 0,
@@ -106,6 +125,7 @@ export default function HomePageCarousePrimary(props) {
106
125
  left: 0,
107
126
  behavior: "smooth",
108
127
  });
128
+ setIsLastCard(true); // Set the state variable to indicate that it's the last card
109
129
  }
110
130
  };
111
131
 
@@ -122,6 +142,7 @@ export default function HomePageCarousePrimary(props) {
122
142
  left: carouselRef2.current.scrollLeft - carouselRef2.current.children[0].offsetWidth * scrollByAmount2,
123
143
  behavior: "smooth",
124
144
  });
145
+ setIsLastCard(false); // Set the state variable to indicate that it's not the last card
125
146
  } else {
126
147
  const lastCardIndex = totalCards - 1;
127
148
  const scrollLeft = carouselRef.current.scrollWidth - carouselRef.current.children[0].offsetWidth * scrollByAmount;
@@ -132,33 +153,68 @@ export default function HomePageCarousePrimary(props) {
132
153
  });
133
154
  const scrollLeft2 = carouselRef2.current.scrollWidth - carouselRef2.current.children[0].offsetWidth * scrollByAmount2;
134
155
  setCurrentCard(lastCardIndex);
135
- carouselRef2.current.scrollTo({ // Update this line to use carouselRef2
156
+ carouselRef2.current.scrollTo({
136
157
  left: scrollLeft2,
137
158
  behavior: "smooth",
138
159
  });
160
+ setIsLastCard(false); // Set the state variable to indicate that it's not the last card
139
161
  }
140
162
  };
141
163
 
142
- const arrowStyle = ' text-2xl z-10 bg-black h-10 w-10 rounded-full bg-neutral-0 hover:bg-neutral-200 flex items-center justify-center';
164
+ 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
165
 
144
166
  const toggleBoolean = () => {
145
167
  setBoolean((prevBoolean) => !prevBoolean); // Toggle the boolean value
146
168
 
147
169
  };
148
170
 
149
- const sliderControl = (isLeft) => (
171
+
172
+
173
+ const disableButton = (current, dir) => {
174
+ if (dir === 'isLeft') {
175
+ if (current === 0) return true;
176
+ else return false
177
+ }
178
+
179
+ if (dir === 'isRight') {
180
+ if (current === 2) return true;
181
+ else return false
182
+ }
183
+
184
+
185
+ }
186
+
187
+ const sliderLeftControl = () => (
150
188
  <button
151
189
  type="button"
190
+
152
191
  onClick={() => {
153
- toggleBoolean(); // Call the toggleBoolean function
154
- isLeft ? previousCard() : nextCard(); // Call previousCard or nextCard based on the button clicked
192
+ toggleBoolean();
193
+ previousCard();
155
194
  }}
156
- className={`flex ${arrowStyle} ${isLeft ? '' : ''}`}
195
+ className={`flex bg-blue-600 ${arrowStyle} disabled:bg-neutral-200 `}
196
+ disabled={disableButton(currentCard, 'isLeft')} // Disable the button if it's the last card
157
197
  >
158
- <span role="img" aria-label={`Arrow ${isLeft ? 'left' : 'right'}`}>
159
- {isLeft ? (
198
+ <span role="img" aria-label={`Arrow left `}>
199
+ {(
160
200
  <Icon height={'h-6 w-6'} variant={'chevronleft'} strokeColor='#00288E' />
161
- ) : (
201
+ )}
202
+ </span>
203
+ </button>
204
+ );
205
+ const sliderRightControl = () => (
206
+ <button
207
+ type="button"
208
+
209
+ onClick={() => {
210
+ toggleBoolean();
211
+ nextCard();
212
+ }}
213
+ className={`flex bg-blue-600 ${arrowStyle} disabled:bg-neutral-200 `}
214
+ disabled={disableButton(currentCard, 'isRight')} // Disable the button if it's the last card
215
+ >
216
+ <span role="img" aria-label={`Arrow right `}>
217
+ {(
162
218
  <Icon height={'h-6 w-6'} variant={'chevronright'} strokeColor='#00288E' />
163
219
  )}
164
220
  </span>
@@ -166,122 +222,152 @@ export default function HomePageCarousePrimary(props) {
166
222
  );
167
223
  const [isScrollActive, setScrollActive] = useState(false);
168
224
 
169
- const handleMouseEnter = () => {
170
- setScrollActive(true); // Mouse entered, scroll is active
171
- };
172
-
173
- const handleMouseLeave = () => {
174
- setScrollActive(false); // Mouse left, scroll is inactive
175
- };
225
+
176
226
  return (
177
- <div className=""
178
- onMouseEnter={handleMouseEnter}
179
- onMouseLeave={handleMouseLeave}
180
- >
181
227
 
228
+ <div className="min-[699px]:relative block">
229
+
230
+ <div className="mx-auto w-screen"
182
231
 
183
- <div className=" flex flex-col-reverse tb:flex-col-reverse tb:flex items-center">
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()}
232
+ >
233
+ <div className="min-[699px]:relative flex flex-col items-center right-[75ppx] top-[112px]">
234
+ <div className="absolute">
235
+
236
+ {/* <BackCarousel /> */}
189
237
  </div>
238
+
190
239
  </div>
191
- <div className="justify-center select-none items-center"
192
240
 
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>
241
+ <div className=" min-[699px]:relative top-5 rounded-lg">
242
+ <div className=" min-[699px]:absolute">
243
+ <div className=" flex flex-col-reverse tb:flex-col-reverse tb:flex items-center">
244
+ <div className="hidden min-[699px]:flex z-10 min-[699px]:mt-[70px] justify-center items-center">
245
+
246
+ <div className="flex w-screen gap-6 justify-center ">
247
+ <div className="btnDBleft">
204
248
 
249
+ {sliderLeftControl(true)}
205
250
  </div>
206
- ))}
251
+ <div className="btnDBright">
207
252
 
253
+ {sliderRightControl()}
254
+ </div>
255
+ </div>
208
256
  </div>
209
- </div>
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}
257
+ <div className="max-[369px]:mt-8 min-[400px]:-mt-20 min-[699px]:hidden">
258
+
259
+ <div className="flex w-screen gap-6 justify-center ">
212
260
 
213
- >
261
+ {sliderLeftControl(true)}
214
262
 
215
- {arr.map((item, i) => {
216
263
 
217
- // toggleBoolean();
218
- return (
219
- <>
264
+ {sliderRightControl()}
265
+
266
+ </div>
267
+ </div>
268
+ <div className="justify-center select-none items-center"
220
269
 
221
- <div
222
- className={`${isScrollActive ? '' : '-translate-y-36'} transition-all duration-[1500ms] z-[1] snap-center tb-m:snap-start `}
223
- key={i + 'x'}
224
- ref={refs2[i]}
270
+ >
271
+ <div className="w-screen flex justify-center items-center ">
272
+ <div className=" z-30">
273
+ <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`}
274
+ ref={carouselRef}
225
275
  >
226
- <div className="select-none rounded-3xl object-contain">
227
- <div>
228
- {SideCard(item)}
276
+
277
+ {videoProps.map((item, i) => (
278
+ <div className=" db:snap-center snap-center mx-6 " key={i} ref={refs[i]}>
279
+ <div className="select-none rounded-3xl object-contain ">
280
+ {React.createElement(VideoCard, item)}
281
+ </div>
229
282
 
230
283
  </div>
231
- </div>
284
+ ))}
285
+
232
286
  </div>
233
- <div
234
- className={`${isScrollActive ? ' ' : ''} transition-all duration-[1500ms] z-[1] snap-center tb-m:snap-start mx-5 `}
235
- key={i + 'y'}
236
- ref={refs2[i]}
237
- >
238
- <div className="select-none rounded-3xl object-contain">
287
+ </div>
239
288
 
240
- {/* {(i + 2) < arr.length && SideCard(arr[i+2])} */}
241
- {(i + 2) < arr.length ?
242
- <>
243
- {SideCard(arr[i + 2])}
244
- </>
245
- :
246
- <>
247
- {SideCard(arr[0])}
248
- </>
289
+ <div className={`hidden snap-x tb-l:max-w-[1240px] min-[1300px]:max-w-7xl
290
+ gap-[167px]
291
+ items-center min-[1300px]:flex select-none overflow-x-hidden scrollbar-hide absolute z-0`}
292
+ ref={carouselRef2}
249
293
 
250
- }
294
+ >
251
295
 
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
- </div>
296
+ {arr.map((item, i) => {
297
+
298
+
299
+ return (
300
+ <>
301
+
302
+ <div
303
+ className={`${isScrollActive ? '' : ''} transition-all duration-[1500ms] z-[1] snap-center tb-m:snap-start mx-3`}
304
+ key={i + 'x'}
305
+ ref={refs2[i]}
306
+ >
307
+ <div className="select-none rounded-3xl object-contain">
308
+ <div>
309
+ {i == 0 && (
310
+ SideCard(arr[i + 1])
311
+ )
273
312
 
313
+ }
314
+ {i == 1 && (
315
+ SideCard(arr[1])
316
+ )
274
317
 
275
- </>
276
- )
277
- })}
318
+ }
278
319
 
320
+
321
+
322
+ </div>
323
+ </div>
324
+ </div>
325
+ <div
326
+ className={`${isScrollActive ? ' ' : ''} transition-all duration-[1500ms] z-[1] snap-center tb-m:snap-start mx-3 `}
327
+ key={i + 'y'}
328
+ ref={refs2[i]}
329
+ >
330
+ <div className="select-none rounded-3xl object-contain">
331
+
332
+ {SideCard(arr[2])}
333
+
334
+
335
+
336
+ </div>
337
+ </div>
338
+ <div
339
+ className={`${isScrollActive ? '' : ''} transition-all duration-[1500ms] z-[1] snap-center tb-m:snap-start mx-3 `}
340
+ key={i + 'z'}
341
+ ref={refs2[i]}
342
+ >
343
+ <div className="select-none rounded-3xl object-contain">
344
+
345
+ {SideCard(arr[0])}
346
+
347
+ </div>
348
+ </div>
349
+
350
+
351
+ </>
352
+ )
353
+ })}
354
+
355
+ </div>
356
+
357
+
358
+ </div>
359
+ </div>
279
360
  </div>
280
361
  </div>
281
362
  </div>
363
+ <div className=" hidden min-[699px]:flex tb:flex-col items-center">
364
+ <div className="relative -right-[44px]">
365
+ <img alt="tab" src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1687108911/hasura-design-system/Group_2608834_rxnldq.png" className="w-[709px]" />
366
+ </div>
367
+ </div>
282
368
  </div>
283
-
284
369
  </div>
285
370
  );
286
371
  };
287
372
 
373
+