hds-web 1.9.8 → 1.10.0

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 (18) hide show
  1. package/dist/index.css +2 -2
  2. package/dist/index.es.css +2 -2
  3. package/dist/index.es.js +6 -6
  4. package/dist/index.js +6 -6
  5. package/package.json +1 -1
  6. package/src/HDS/components/Cards/Misc/imageBadgeCard.js +1 -1
  7. package/src/HDS/components/Cards/Testimonials/testimonial.js +24 -25
  8. package/src/HDS/components/Cards/VideoCard/homeVC.js +42 -4
  9. package/src/HDS/components/Carousels/customCarousel.js +2 -2
  10. package/src/HDS/components/Carousels/homeCarousel.js +88 -238
  11. package/src/HDS/helpers/Effects/HoverEffects/card3d.js +74 -0
  12. package/src/HDS/helpers/Effects/HoverEffects/index.js +1 -0
  13. package/src/HDS/helpers/Effects/index.js +1 -0
  14. package/src/HDS/helpers/index.js +1 -0
  15. package/src/HDS/modules/Cards/dataSourceCard.js +7 -7
  16. package/src/HDS/modules/TextCard/textIconCard.js +53 -33
  17. package/src/index.css +36 -0
  18. package/src/styles/tailwind.css +170 -34
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.9.8",
3
+ "version": "1.10.0",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/HDS/components/Cards/Misc/imageBadgeCard.js CHANGED
@@ -6,7 +6,7 @@ export default function ImageBadgeCard (card){
6
6
 
7
7
  return(
8
8
  <>
9
- <div className={`${HDSColor(card.cardBg)}bg-neutral-0 max-w-[700px] min-h-[245px] rounded-3xl p-8`}>
9
+ <div className={`${HDSColor(card.cardBg)}bg-neutral-0 min-w-[312px] tb:max-w-[700px] min-h-[245px] rounded-3xl tb:p-8 p-4`}>
10
10
  <div className='flex flex-col tb:flex-row justify-between gap-4'>
11
11
  <div className='tb:max-w-[400px]'>
12
12
  <Badges
package/src/HDS/components/Cards/Testimonials/testimonial.js CHANGED
@@ -7,11 +7,6 @@ import { HDSButton } from "../../Buttons";
7
7
 
8
8
 
9
9
  export default function Testimonial(props) {
10
- const {
11
- card,
12
- cardHover
13
- } = props;
14
-
15
10
 
16
11
  const [isHovered, setIsHovered] = useState(false);
17
12
 
@@ -22,27 +17,30 @@ export default function Testimonial(props) {
22
17
  const handleMouseLeave = () => {
23
18
  setIsHovered(false);
24
19
  };
25
- const Card1 = () => {
20
+
21
+
22
+ const Card1 = (card) => {
23
+ card = card.card;
26
24
  return (
27
25
  <>
28
- <div className={`${HDSColor(card.cardBg)} backdrop-blur-lg bg-neutral-1000 bg-opacity-20 rounded-2xl max-w-[220px] h-[428px] flex flex-col justify-between `}>
26
+ <div className={` backdrop-blur-lg bg-neutral-1000 bg-opacity-20 rounded-2xl max-w-[220px] h-[428px] flex flex-col justify-between `}>
29
27
  <div className="">
30
28
  <div className=" pt-8 pl-6">
31
- <img src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1686737531/hasura-design-system/icons/optum_zn0bhw.png" alt="Card" className=" inline-block w-16 " />
29
+ <img src={card.title_img} alt="Card" className=" inline-block w-16 " />
32
30
  </div>
33
-
34
-
35
- <div className="mt-6 px-6 font-petrona text-base font-normal text-neutral-0 ">{card.subtitle}</div>
31
+
32
+
33
+ {card.subtitle && <div className="mt-6 px-6 font-petrona text-base font-normal text-neutral-0 ">{card.subtitle}</div>}
36
34
  </div>
37
35
  <div className="pl-6 pb-8">
38
- <img
39
- className={` w-14 h-14 shadow rounded-full ${HDSColor(card.avatar['avatarBgColor'])} rounded inline-block`}
36
+ {card.avatar.img_url && <img
37
+ className={` w-14 h-14 shadow rounded-full ${(card.avatarBgColor ?? 'bg-neutral-0')} rounded inline-block`}
40
38
  alt='avatar'
41
- src={card.img_url}
42
- />
39
+ src={card.avatar.img_url}
40
+ />}
43
41
  <div className=" pt-3">
44
- <Typography textStyle='body2c-bold' className={` text-neutral-0`}>{card.avatar.name}</Typography>
45
- <Typography textStyle='body3c' className={` text-neutral-0 mt-1`}>{card.avatar.designation}</Typography>
42
+ {card.avatar && card.avatar.name && <Typography textStyle='body2c-bold' className={` text-neutral-0`}>{card.avatar.name}</Typography>}
43
+ {card.avatar && card.avatar.designation && <Typography textStyle='body3c' className={` text-neutral-0 mt-1`}>{card.avatar.designation}</Typography>}
46
44
  </div>
47
45
  </div>
48
46
 
@@ -51,13 +49,14 @@ export default function Testimonial(props) {
51
49
  );
52
50
  };
53
51
 
54
- const Card2 = () => {
52
+ const Card2 = (cardHover) => {
53
+ cardHover = cardHover.cardHover;
55
54
  return (
56
55
  <div className="h-[428px]">
57
- <div className={`${HDSColor(cardHover.cardBg)} rounded-2xl max-w-[221px] justify-between h-[442px] flex flex-col`}>
56
+ <div className={`${HDSColor(cardHover.cardBg)} rounded-2xl max-w-[221px] justify-between h-[428px] flex flex-col`}>
58
57
  <div className=" ">
59
- <div className="pt-8 pl-6 pr-12 ">
60
- <img src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1686760719/website%20v3/hascon_t5kwrf.png" alt="Card" className=" inline-block w-full" />
58
+ <div className="pt-8 pl-6 ">
59
+ <img src={cardHover.img_url} alt="Card" className=" inline-block max-w-[148px]" />
61
60
  </div>
62
61
  <div className="mt-6 px-6 text-xl leading-[27px] font-semibold text-neutral-0">{cardHover.title}</div>
63
62
 
@@ -85,12 +84,12 @@ export default function Testimonial(props) {
85
84
  onMouseEnter={handleMouseEnter}
86
85
  onMouseLeave={handleMouseLeave}
87
86
  >
88
-
87
+
89
88
  <div className={`transition-all max-w-[220px] fixed ease-in-out duration-300 ${isHovered ? 'opacity-0 ' : 'opacity-100'}`}>
90
- <Card1 />
89
+ <Card1 card={props.card} />
91
90
  </div>
92
91
  <div className={`transition-al fixed ease-in-out duration-300 ${isHovered ? 'opacity-100' : 'opacity-0'}`}>
93
- <Card2 />
92
+ <Card2 cardHover={props.cardHover} />
94
93
  </div>
95
94
  </div>
96
95
  );
@@ -112,7 +111,7 @@ Testimonial.defaultProps = {
112
111
  },
113
112
  cardHover: {
114
113
  cardBg: 'bg-green-500',
115
- img_url:'',
114
+ img_url: '',
116
115
  img_alt: '',
117
116
  title: 'Optum goes from concept to production in 100 days with Hasura',
118
117
  button: {
package/src/HDS/components/Cards/VideoCard/homeVC.js CHANGED
@@ -1,11 +1,12 @@
1
1
  import React from 'react';
2
2
  import { Testimonial } from '../Testimonials';
3
+ import {FeedbackCard} from '../Feedback'
3
4
 
4
5
  export default function HomeVC(props) {
5
6
  return (
6
7
  <>
7
- <div className='carouselShadow'>
8
- <div className='w-[620px] h-[476px] bg-base-1000 rounded-2xl border-2 border-neutral-300 flex justify-center items-center'>
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'>
9
10
  <div className='w-[580px] h-[436px] bg-base-1000 rounded flex flex-col items-center justify-center overflow-hidden'>
10
11
  <div className=''>
11
12
  <div className=''>
@@ -17,17 +18,54 @@ export default function HomeVC(props) {
17
18
  src={props.video_url}
18
19
  />
19
20
  <div className='w-full fixed flex-col flex items-center'>
20
- <div className='fixed mx-auto top-[451px] w-[147px] h-[3px] bg-neutral-0/20' />
21
+ <div className='fixed mx-auto top-[451px] left-[235px] w-[147px] h-[3px] bg-neutral-0/20' />
21
22
  </div>
22
23
  </div>
23
24
  <div className='fixed top-[24px] left-[375px] bg-neutral-0/40'>
24
25
 
25
- <Testimonial {...props.testimonial} />
26
+ <Testimonial
27
+ card={props.testimonial.card}
28
+ cardHover={props.testimonial.cardHover}
29
+ />
26
30
  </div>
27
31
  </div>
28
32
  </div>
29
33
  </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'>
36
+
37
+ <div className=''>
38
+ <div className='o'>
39
+ <div className=''>
40
+ <video
41
+ autoPlay
42
+ loop
43
+ muted
44
+ className=" object-fill max-w-full max-h-full scale-[1.7]"
45
+ src={props.video_url}
46
+ />
47
+
48
+ </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
+ />
62
+ </div>
63
+ </div>
64
+ </div>
30
65
 
66
+
67
+ </div>
68
+ </div>
31
69
  </div>
32
70
  </>)
33
71
  }
package/src/HDS/components/Carousels/customCarousel.js CHANGED
@@ -101,11 +101,11 @@ export default function CustomCarousel(props) {
101
101
  );
102
102
  return (
103
103
  <div className="">
104
- <div className="block tb:hidden">
104
+ <div className="flex flex-row overflow-scroll scrollbar-hide tb:hidden">
105
105
  {showAllCards
106
106
  ? props.cards.map((item, i) => (
107
107
  <div className="my-5" key={i} ref={refs[i]}>
108
- <div className="rounded-3xl overflow-hidden">
108
+ <div className="rounded-3xl min-w-[312px] overflow-hidden">
109
109
  {React.createElement(props.component, item)}
110
110
  </div>
111
111
  </div>
package/src/HDS/components/Carousels/homeCarousel.js CHANGED
@@ -4,259 +4,86 @@ import { Icon } from "../common-components/Icon";
4
4
  import { HDSButton } from "../Buttons";
5
5
  import { VideoCard } from '../Cards/VideoCard'
6
6
  const carouselItems = [
7
- {
8
- name: "John Smith",
9
- designation: "CEO",
10
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
11
- size: 'w-full'
12
- },
13
- {
14
- name: "Jane Doe",
15
- designation: "CTO",
16
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
17
- size: 'w-full'
18
- },
19
- {
20
- name: "Bob Johnson",
21
- designation: "COO",
22
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
23
- size: 'w-full'
24
- },
25
- {
26
- name: "Gourav",
27
- designation: "SDE",
28
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
29
- size: 'w-full'
30
- },
31
- {
32
- name: "Gourav",
33
- designation: "SDE",
34
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
35
- size: 'w-full'
36
- },
37
- {
38
- name: "Gourav",
39
- designation: "SDE",
40
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
41
- size: 'w-full'
42
- },
43
- {
44
- name: "Bob Johnson",
45
- designation: "COO",
46
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
47
- size: 'w-full'
48
- },
49
- {
50
- name: "Gourav",
51
- designation: "SDE",
52
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
53
- size: 'w-full'
54
- },
55
- {
56
- name: "Gourav",
57
- designation: "SDE",
58
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
59
- size: 'w-full'
60
- },
61
- {
62
- name: "Gourav",
63
- designation: "SDE",
64
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
65
- size: 'w-full'
66
- }
67
- ];
68
- const carouselItems2 = [
69
- {
70
- name: "John Smith",
71
- designation: "CEO",
72
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
73
- size: 'w-full'
74
- },
75
- {
76
- name: "Jane Doe",
77
- designation: "CTO",
78
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
79
- size: 'w-full'
80
- },
81
- {
82
- name: "Bob Johnson",
83
- designation: "COO",
84
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
85
- size: 'w-full'
86
- },
87
- {
88
- name: "Gourav",
89
- designation: "SDE",
90
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
91
- size: 'w-full'
92
- },
93
- {
94
- name: "Gourav",
95
- designation: "SDE",
96
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
97
- size: 'w-full'
98
- },
99
- {
100
- name: "Gourav",
101
- designation: "SDE",
102
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
103
- size: 'w-full'
104
- },
105
- {
106
- name: "Bob Johnson",
107
- designation: "COO",
108
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
109
- size: 'w-full'
110
- },
111
- {
112
- name: "Gourav",
113
- designation: "SDE",
114
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
115
- size: 'w-full'
116
- },
117
- {
118
- name: "Gourav",
119
- designation: "SDE",
120
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
121
- size: 'w-full'
122
- },
123
- {
124
- name: "Gourav",
125
- designation: "SDE",
126
- imageUrl: "https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8aHVtYW58ZW58MHx8MHx8&w=1000&q=80",
127
- size: 'w-full'
128
- }
129
- ];
130
-
131
- const video_props =
132
7
  [
133
- {
134
- video_url: 'https://nutrien-prod-asset.s3.us-east-2.amazonaws.com/s3fs-public/video-thumbnails/2019-05/Nutrien-Banner-Loop-V4.mp4',
135
- //video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1654760488/samples/sea-turtle.mp4',
8
+ "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687016995/optum_Card_17973d6328.png",
9
+ "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687016994/philips_5bab1602cd.png",
10
+ "https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687016996/nutrien_e629b651d5.png",
11
+ ]
136
12
 
137
- testimonial: {
138
- card: {
139
- cardBg: '',
140
- title_img: "Optum",
141
- img_alt: 'optum',
142
- subtitle: '“Optum goes from concept to production in 100 days with Hasura”',
143
- avatar: {
144
- img_url: '',
145
- name: 'Nagaraja Nayak',
146
- designation: 'Optum',
147
- avatarBgColor: 'bg-yellow-400'
148
- }
149
- },
150
- cardHover: {
151
- cardBg: 'bg-green-500',
152
- img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1679302435/main-web/roadshow/nagaraja-nayak_l4xte5.png',
153
- img_alt: '',
154
- title: 'Optum goes from concept to production in 100 days with Hasura',
155
- button: {
156
- cta_text: 'Read the case Study'
157
- }
13
+ ];
158
14
 
159
15
 
160
- }
161
- }
162
- },
163
- {
164
- video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1654760488/samples/sea-turtle.mp4',
16
+ const SideCard = (item) => (
17
+ <div className="h-full">
165
18
 
166
- testimonial: {
167
- card: {
168
- cardBg: '',
169
- title_img: "Optum",
170
- img_alt: 'optum',
171
- subtitle: '“Optum goes from concept to production in 100 days with Hasura”',
172
- avatar: {
173
- img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1679302435/main-web/roadshow/nagaraja-nayak_l4xte5.png',
174
- name: 'Nagaraja Nayak',
175
- designation: 'Optum',
176
- avatarBgColor: 'bg-yellow-400'
177
- }
178
- },
179
- cardHover: {
180
- cardBg: 'bg-green-500',
181
- img_url: '',
182
- img_alt: '',
183
- title: 'Optum goes from concept to production in 100 days with Hasura',
184
- button: {
185
- cta_text: 'Read the case Study'
186
- }
19
+ <div className=' w-[300px] flex flex-col items-center justify-between rounded-3xl h-[338px] '>
20
+ <img src={item} alt='img' className='w-[300px]' />
21
+ </div>
22
+ </div>
23
+ )
187
24
 
25
+ 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);
188
33
 
189
- }
190
- }
191
- },
192
- {
193
- video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1654760488/samples/sea-turtle.mp4',
34
+ }
35
+ }
36
+ function extractMappedValues(obj) {
37
+ return {
38
+ video_url: obj.video.data.attributes.url || "",
194
39
  testimonial: {
195
40
  card: {
196
- cardBg: '',
197
- title_img: "Optum",
198
- img_alt: 'optum',
199
- subtitle: '“Optum goes from concept to production in 100 days with Hasura”',
41
+ title_img: obj.slideLogo?.data?.attributes?.url || "",
42
+ subtitle: obj.slideQuoteText || "",
200
43
  avatar: {
201
- img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1679302435/main-web/roadshow/nagaraja-nayak_l4xte5.png',
202
- name: 'Nagaraja Nayak',
203
- designation: 'Optum',
204
- avatarBgColor: 'bg-yellow-400'
44
+ img_url: obj.slideAuthorImage?.data?.attributes?.url || "",
45
+ name: obj.slideAuthorName || "",
46
+ designation: obj.slideAuthorTitle || ""
205
47
  }
206
48
  },
207
49
  cardHover: {
208
- cardBg: 'bg-green-500',
209
- img_url: '',
210
- img_alt: '',
211
- title: 'Optum goes from concept to production in 100 days with Hasura',
50
+ cardBg: obj.slideHoverColor || "",
51
+ img_url: obj.slideHoverImage?.data?.attributes?.url || "",
52
+ title: obj.slideHoverText || "",
212
53
  button: {
213
- cta_text: 'Read the case Study'
54
+ cta_text: obj.slideCTAText || ""
214
55
  }
215
-
216
-
217
56
  }
218
57
  }
219
- },
220
- ]
221
- const SideCard = () => (
222
- <div className="h-full">
58
+ };
59
+ }
223
60
 
224
- <div className='bg-green-500 w-[300px] flex flex-col items-center justify-between rounded-3xl h-[338px] '>
225
- <div className='w-[300px] flex justify-center'>
226
- <img src='https://res.cloudinary.com/dh8fp23nd/image/upload/v1686737531/hasura-design-system/icons/optum_zn0bhw.png' alt='imgb' className='p-5 ' />
227
- </div>
228
- <div className='w-[300px] flex justify-center'>
229
- <img src='https://res.cloudinary.com/dh8fp23nd/image/upload/v1685596743/website%20v3/capabilities-pre-footer_qxqlon.png' alt='imga' className='p-2 w-[194px]' />
230
- </div>
231
- </div>
232
- </div>
233
- )
234
- export default function HomePageCarousePrimary(props) {
235
- const {
236
- cards = carouselItems,
237
- cards2 = carouselItems2,
238
- } = props;
239
61
 
62
+ const videoProps = [];
63
+ for (const key in props.data) {
64
+ if (props.data.hasOwnProperty(key)) {
65
+ const videoProp = extractMappedValues(props.data[key]);
66
+ videoProps.push(videoProp);
67
+ }
68
+ }
240
69
  const [boolean, setBoolean] = React.useState(null);
241
70
  const carouselRef = useRef(null); // Create a ref using useRef
242
71
  const carouselRef2 = useRef(null); // Create a ref using useRef
243
72
  const [currentCard, setCurrentCard] = React.useState(0);
244
- const refs = cards.reduce((acc, val, i) => {
73
+ const refs = videoProps.reduce((acc, val, i) => {
245
74
  acc[i] = React.createRef();
246
75
  return acc;
247
76
  }, {});
248
- const refs2 = cards2.reduce((acc, val, i) => {
77
+ const refs2 = carouselItems.reduce((acc, val, i) => {
249
78
  acc[i] = React.createRef();
250
79
  return acc;
251
80
  }, {});
252
81
 
253
-
254
-
255
- const totalCards = carouselItems.length;
82
+ const totalCards = arr.length;
256
83
 
257
84
  const nextCard = () => {
258
85
  let scrollByAmount = 1;
259
- let scrollByAmount2 = 5;
86
+ let scrollByAmount2 = 1.5;
260
87
 
261
88
  if (currentCard < totalCards - scrollByAmount) {
262
89
  setCurrentCard(currentCard + scrollByAmount);
@@ -284,7 +111,7 @@ export default function HomePageCarousePrimary(props) {
284
111
 
285
112
  const previousCard = () => {
286
113
  let scrollByAmount = 1;
287
- let scrollByAmount2 = 5;
114
+ let scrollByAmount2 = 1.5;
288
115
  if (currentCard > 0) {
289
116
  setCurrentCard(currentCard - scrollByAmount);
290
117
  carouselRef.current.scrollTo({
@@ -305,18 +132,18 @@ export default function HomePageCarousePrimary(props) {
305
132
  });
306
133
  const scrollLeft2 = carouselRef2.current.scrollWidth - carouselRef2.current.children[0].offsetWidth * scrollByAmount2;
307
134
  setCurrentCard(lastCardIndex);
308
- carouselRef.current.scrollTo({
135
+ carouselRef2.current.scrollTo({ // Update this line to use carouselRef2
309
136
  left: scrollLeft2,
310
137
  behavior: "smooth",
311
138
  });
312
139
  }
313
140
  };
314
141
 
315
- const arrowStyle = ' text-2xl z-10 bg-black h-10 ml-6 w-10 rounded-full bg-neutral-0 hover:bg-neutral-0 flex items-center justify-center';
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';
316
143
 
317
144
  const toggleBoolean = () => {
318
145
  setBoolean((prevBoolean) => !prevBoolean); // Toggle the boolean value
319
- console.log(boolean)
146
+
320
147
  };
321
148
 
322
149
  const sliderControl = (isLeft) => (
@@ -351,10 +178,12 @@ export default function HomePageCarousePrimary(props) {
351
178
  onMouseEnter={handleMouseEnter}
352
179
  onMouseLeave={handleMouseLeave}
353
180
  >
354
- <div className="hidden tb:flex-col-reverse tb:flex items-center">
355
- <div className="flex z-20 justify-center items-center">
181
+
182
+
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">
356
185
  {/* {slider()} */}
357
- <div className="flex w-screen justify-center ">
186
+ <div className="flex w-screen gap-6 justify-center ">
358
187
  {sliderControl(true)}
359
188
  {sliderControl()}
360
189
  </div>
@@ -363,13 +192,13 @@ export default function HomePageCarousePrimary(props) {
363
192
 
364
193
  >
365
194
  <div className="w-screen flex justify-center">
366
- <div className="absolute z-30">
367
- <div className={`snap-x w-[643px] h-[800px] items-center z-10 inline-flex select-none overflow-x-hidden bg-neutral-100 scrollbar-hide`}
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`}
368
197
  ref={carouselRef}
369
198
  >
370
- {video_props.map((item, i) => (
199
+ {videoProps.map((item, i) => (
371
200
  <div className=" db:snap-center snap-center tb-m:snap-start mx-5 " key={i} ref={refs[i]}>
372
- <div className=" select-none rounded-3xl object-contain ">
201
+ <div className="select-none rounded-3xl object-contain ">
373
202
  {React.createElement(VideoCard, item)}
374
203
  </div>
375
204
 
@@ -378,25 +207,27 @@ export default function HomePageCarousePrimary(props) {
378
207
 
379
208
  </div>
380
209
  </div>
381
- <div className={` snap-x w-screen tb-l:max-w-[980px] min-[1300px]:max-w-7xl h-[800px] items-center flex min-[1300px]:gap-[160px] select-none overflow-x-hidden scrollbar-hide`}
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]`}
382
211
  ref={carouselRef2}
383
212
 
384
213
  >
385
214
 
386
- {cards.map((item, i) => {
215
+ {arr.map((item, i) => {
387
216
 
388
217
  // toggleBoolean();
389
218
  return (
390
219
  <>
391
220
 
392
221
  <div
393
- className={`${isScrollActive ? '' : '-translate-y-36'} transition-all duration-[1500ms] z-[1] snap-center tb-m:snap-start `}
222
+ className={`${isScrollActive ? '' : '-translate-y-36'} transition-all duration-[1500ms] z-[1] snap-center tb-m:snap-start `}
394
223
  key={i + 'x'}
395
224
  ref={refs2[i]}
396
225
  >
397
226
  <div className="select-none rounded-3xl object-contain">
398
- <SideCard />
227
+ <div>
228
+ {SideCard(item)}
399
229
 
230
+ </div>
400
231
  </div>
401
232
  </div>
402
233
  <div
@@ -405,7 +236,18 @@ export default function HomePageCarousePrimary(props) {
405
236
  ref={refs2[i]}
406
237
  >
407
238
  <div className="select-none rounded-3xl object-contain">
408
- <SideCard />
239
+
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
+ </>
249
+
250
+ }
409
251
 
410
252
  </div>
411
253
  </div>
@@ -415,8 +257,17 @@ export default function HomePageCarousePrimary(props) {
415
257
  ref={refs2[i]}
416
258
  >
417
259
  <div className="select-none rounded-3xl object-contain">
418
- <SideCard />
419
260
 
261
+ {(i + 1) < arr.length ?
262
+ <>
263
+ {SideCard(arr[i + 1])}
264
+ </>
265
+ :
266
+ <>
267
+ {SideCard(arr[0])}
268
+ </>
269
+
270
+ }
420
271
  </div>
421
272
  </div>
422
273
 
@@ -434,4 +285,3 @@ export default function HomePageCarousePrimary(props) {
434
285
  );
435
286
  };
436
287
 
437
-