hds-web 1.10.8 → 1.11.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 (14) hide show
  1. package/dist/index.css +2 -2
  2. package/dist/index.es.css +2 -2
  3. package/dist/index.es.js +4 -4
  4. package/dist/index.js +6 -6
  5. package/package.json +1 -1
  6. package/src/HDS/components/Buttons/button.js +1 -1
  7. package/src/HDS/components/Cards/Misc/iconCard.js +172 -73
  8. package/src/HDS/components/Cards/Misc/imageBadgeCard.js +226 -22
  9. package/src/HDS/components/Cards/VideoCard/homeVC.js +2 -2
  10. package/src/HDS/components/Carousels/customCarousel.js +1 -1
  11. package/src/HDS/components/Carousels/homeCarousel.js +2 -1
  12. package/src/HDS/components/Footers/v3Footer.js +5 -5
  13. package/src/HDS/modules/TextCard/textIconCard.js +44 -37
  14. package/src/styles/tailwind.css +6 -82
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.10.8",
3
+ "version": "1.11.0",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/HDS/components/Buttons/button.js CHANGED
@@ -39,7 +39,7 @@ const Buttonclasses = {
39
39
  'default': {
40
40
  'base': 'db:w-fit tb:w-fit w-full justify-center border-2 border-blue-500 text-blue-500',
41
41
 
42
- 'hover': 'hover:text-neutral-0 hover:bg-blue-700 hover:border-2 hover:border-blue-700 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-300',
42
+ 'hover': 'hover:text-neutral-0 hover:bg-blue-700 hover:border-2 hover:border-blue-700 hover:shadow-md hover:shadow hover:transition-all hover:ease-out hover:duration-200 ',
43
43
 
44
44
  'focus': 'focus:bg-blue-200 focus:text-blue-500 focus:border-2 border-blue-500 focus:shadow-[0px_0px_0px_4px_#DFE8FF] focus:outline-none focus:text-blue-500',
45
45
  },
package/src/HDS/components/Cards/Misc/iconCard.js CHANGED
@@ -38,91 +38,190 @@ const cardVariant = {
38
38
  export default function IconCard(props) {
39
39
  const iconBG = HDSColor(props.iconBg);
40
40
  return (
41
- <div
42
- className={`bg-neutral-0 grid h-full transition-all ease-in-out rounded-3xl ${cardVariant[props.cardType]['cardStyle']} ` + ((props.cardBorder) ? props.cardBorder : 'shadow') + ((props.readMoreBtn || props.button) ? ' hover:shadow-lg' : '')}
43
- >
44
- <div className=" self-start">
45
- <div
46
- className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 flex items-center justify-center rounded-full mb-6`}
47
- >
48
- <Icon
49
- height={`stroke-[1.5px] ${cardVariant[props.cardType]['iconStyle']}`}
50
- variant={props.iconVariant}
51
- strokeColor={props.iconStroke}
52
- strokeClass={HDSColor(props.iconStrokeClass)} />
53
- </div>
54
- <div
55
- className="flex-1">
56
-
57
- {props.cardType &&
58
- (
59
- <>
60
- <Typography
61
- textStyle={cardVariant[props.cardType]['titleTextStyle']}
62
- className={cardVariant[props.cardType]['titleClasses']}
63
- >
64
- {props.title}
65
- </Typography>
66
-
67
- <Typography
68
- textStyle={cardVariant[props.cardType]['descTextStyle']}
69
- className={`${cardVariant[props.cardType]['descClasses']} [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600`}
70
- >
71
- <ReactMarkdown>
72
- {props.description}
73
- </ReactMarkdown>
74
- </Typography>
75
- {props.readMoreBtn && (
76
- <a href={props.readMoreBtn.cta_link} className='flex'>
41
+ <>
42
+ {
43
+ ((props.readMoreBtn && props.button) || (props.button && props.button.length > 1)) ? (
44
+ <div
45
+ className={`bg-neutral-0 grid h-full transition-all ease-in-out rounded-3xl ${cardVariant[props.cardType]['cardStyle']} ` + ((props.cardBorder) ? props.cardBorder : 'shadow') + ((props.readMoreBtn || props.button) ? ' hover:shadow-lg' : '')}
46
+ >
47
+ <div className=" self-start">
48
+ <div
49
+ className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 flex items-center justify-center rounded-full mb-6`}
50
+ >
51
+ <Icon
52
+ height={`stroke-[1.5px] ${cardVariant[props.cardType]['iconStyle']}`}
53
+ variant={props.iconVariant}
54
+ strokeColor={props.iconStroke}
55
+ strokeClass={HDSColor(props.iconStrokeClass)} />
56
+ </div>
57
+ <div
58
+ className="flex-1">
59
+
60
+ {props.cardType &&
61
+ (
62
+ <>
63
+ <Typography
64
+ textStyle={cardVariant[props.cardType]['titleTextStyle']}
65
+ className={cardVariant[props.cardType]['titleClasses']}
66
+ >
67
+ {props.title}
68
+ </Typography>
69
+
70
+ <Typography
71
+ textStyle={cardVariant[props.cardType]['descTextStyle']}
72
+ className={`${cardVariant[props.cardType]['descClasses']} [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600`}
73
+ >
74
+ <ReactMarkdown>
75
+ {props.description}
76
+ </ReactMarkdown>
77
+ </Typography>
78
+ {props.readMoreBtn && (
79
+ <a href={props.readMoreBtn.cta_link} className='flex'>
80
+ <HDSButton
81
+ label={props.readMoreBtn.cta_text}
82
+ type='secondaryLink'
83
+ leftIconVariant='none'
84
+ rightIconVariant='none'
85
+ state='default'
86
+ size='sm'
87
+ rightAnimatedArrow={true}
88
+ rightAnimatedArrowColor='#3970FD'
89
+ animatedHoverStroke='#3970FD'
90
+ btnTextColorClass='text-blue-500'
91
+ btnTextHoverClass=''
92
+ className=' mt-4'
93
+ />
94
+ </a>
95
+ )
96
+
97
+ }
98
+ </>
99
+ )
100
+ }
101
+ </div>
102
+ </div>
103
+ {props.button &&
104
+ <div className="flex gap-2">
105
+ {props.button.map((btn, index) => (
106
+ <a href={btn.cta_link} key={index} className="flex self-end mt-7">
77
107
  <HDSButton
78
- label={props.readMoreBtn.cta_text}
79
- type='secondaryLink'
108
+ label={btn.cta_text}
109
+ type={btn.cta_type || 'secondary'}
80
110
  leftIconVariant='none'
81
111
  rightIconVariant='none'
82
112
  state='default'
83
113
  size='sm'
84
114
  rightAnimatedArrow={true}
85
- rightAnimatedArrowColor='#3970FD'
86
- animatedHoverStroke='#3970FD'
87
- btnTextColorClass='text-blue-500'
88
- btnTextHoverClass=''
89
- className=' mt-4'
115
+ rightAnimatedArrowColor={btn.rightAnimatedArrowColor || '#3970FD'}
116
+ btnBgColorClass={btn.btnBg}
117
+ btnTextHoverClass={btn.btnTextColorClass}
118
+ animatedHoverStroke={btn.animatedHoverStroke}
119
+ btnTextColorClass={btn.btnTextColorClass}
90
120
  />
91
- </a>
92
- )
93
-
121
+ </a>))
94
122
  }
95
- </>
96
- )
97
- }
98
- </div>
99
- </div>
100
- {props.button &&
101
- <div className="flex gap-2">
102
- {props.button.map((btn, index) => (
103
- <a href={btn.cta_link} key={index} className="flex self-end mt-7">
104
- <HDSButton
105
- label={btn.cta_text}
106
- type={btn.cta_type || 'secondary'}
107
- leftIconVariant='none'
108
- rightIconVariant='none'
109
- state='default'
110
- size='sm'
111
- rightAnimatedArrow={true}
112
- rightAnimatedArrowColor={btn.rightAnimatedArrowColor ||'#3970FD'}
113
- btnBgColorClass={btn.btnBg}
114
- btnTextHoverClass={btn.btnTextColorClass}
115
- animatedHoverStroke={btn.animatedHoverStroke}
116
- btnTextColorClass={btn.btnTextColorClass}
117
- />
118
- </a>))
123
+ </div>
119
124
  }
120
- </div>
121
- }
122
125
 
123
126
 
124
127
 
125
- </div>
128
+ </div>
129
+ ) :
130
+
131
+ (
132
+ <div>
133
+
134
+
135
+ <a href={((props.readMoreBtn && !props.button) ? props.readMoreBtn['cta_link'] : props.button[0]['cta_link'])}
136
+ className={`bg-neutral-0 group grid h-full transition-all ease-in-out rounded-3xl ${cardVariant[props.cardType]['cardStyle']} ` + ((props.cardBorder) ? props.cardBorder : 'shadow') + ((props.readMoreBtn || props.button) ? ' hover:shadow-lg' : '')}
137
+ >
138
+ <div className=" self-start">
139
+ <div
140
+ className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 flex items-center justify-center rounded-full mb-6`}
141
+ >
142
+ <Icon
143
+ height={`stroke-[1.5px] ${cardVariant[props.cardType]['iconStyle']}`}
144
+ variant={props.iconVariant}
145
+ strokeColor={props.iconStroke}
146
+ strokeClass={HDSColor(props.iconStrokeClass)} />
147
+ </div>
148
+ <div
149
+ className="flex-1">
150
+
151
+ {props.cardType &&
152
+ (
153
+ <>
154
+ <Typography
155
+ textStyle={cardVariant[props.cardType]['titleTextStyle']}
156
+ className={cardVariant[props.cardType]['titleClasses']}
157
+ >
158
+ {props.title}
159
+ </Typography>
160
+
161
+ <Typography
162
+ textStyle={cardVariant[props.cardType]['descTextStyle']}
163
+ className={`${cardVariant[props.cardType]['descClasses']} [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600`}
164
+ >
165
+ <ReactMarkdown>
166
+ {props.description}
167
+ </ReactMarkdown>
168
+ </Typography>
169
+ {props.readMoreBtn && (
170
+ <a href={props.readMoreBtn.cta_link} className='flex'>
171
+ <HDSButton
172
+ label={props.readMoreBtn.cta_text}
173
+ type='secondaryLink'
174
+ leftIconVariant='none'
175
+ rightIconVariant='none'
176
+ state='default'
177
+ size='sm'
178
+ rightAnimatedArrow={true}
179
+ rightAnimatedArrowColor='#3970FD'
180
+ animatedHoverStroke='#3970FD'
181
+ btnTextColorClass='text-blue-500'
182
+ btnTextHoverClass=''
183
+ className=' mt-4'
184
+ />
185
+ </a>
186
+ )
187
+
188
+ }
189
+ </>
190
+ )
191
+ }
192
+ </div>
193
+ </div>
194
+ {props.button &&
195
+ <div className="flex gap-2">
196
+ {props.button.map((btn, index) => (
197
+ <a href={btn.cta_link} key={index} className="flex self-end mt-7">
198
+ <HDSButton
199
+ label={btn.cta_text}
200
+ type={btn.cta_type || 'secondary'}
201
+ leftIconVariant='none'
202
+ rightIconVariant='none'
203
+ state='default'
204
+ size='sm'
205
+ rightAnimatedArrow={true}
206
+ rightAnimatedArrowColor={btn.rightAnimatedArrowColor || '#3970FD'}
207
+ btnBgColorClass={btn.btnBg}
208
+ btnTextHoverClass={btn.btnTextColorClass}
209
+ animatedHoverStroke={btn.animatedHoverStroke}
210
+ btnTextColorClass={btn.btnTextColorClass}
211
+ />
212
+ </a>))
213
+ }
214
+ </div>
215
+ }
216
+
217
+
218
+
219
+ </a>
220
+ </div>
221
+ )
222
+
223
+ }
224
+ </>
126
225
  )
127
226
  }
128
227
 
package/src/HDS/components/Cards/Misc/imageBadgeCard.js CHANGED
@@ -1,30 +1,234 @@
1
- import React from "react"
2
- import { HDSColor } from "../../../foundation/ColorPalette"
3
- import { Typography } from "../../../foundation/Typography"
4
- import {Badges} from "../../BadgesCaption"
5
- export default function ImageBadgeCard(card) {
1
+ import React from "react";
2
+ import PropTypes from 'prop-types';
3
+ import { Icon } from "../../common-components/Icon";
4
+ import { HDSColor } from '../../../foundation/ColorPalette'
5
+ import { Typography } from '../../../foundation/Typography'
6
+ import { HDSButton } from "../../Buttons";
7
+ import ReactMarkdown from "react-markdown";
8
+ const cardVariant = {
9
+ "withButton": {
10
+ 'cardStyle': 'p-10 ',
11
+ 'iconWidthStyle': 'h-20 w-20',
12
+ 'iconStyle': 'h-10 w-10',
13
+ 'titleTextStyle': 'h4',
14
+ 'titleClasses': 'mb-1 text-blue-800 text-hds-m-h4 tb:text-hds-t-h4 db:text-hds-d-h4',
15
+ 'descTextStyle': 'body1c',
16
+ 'descClasses': 'text-neutral-1000 text-hds-m-body1c tb:text-hds-t-body1c db:text-hds-d-body1c'
17
+ },
18
+ "withoutButton": {
19
+ 'cardStyle': 'p-6',
20
+ 'iconWidthStyle': 'h-12 w-12',
21
+ 'iconStyle': 'h-6 w-6',
22
+ 'titleTextStyle': 'h5',
23
+ 'titleClasses': 'mb-1 text-blue-600 text-hds-m-h5 tb:text-hds-t-h5 db:text-hds-d-h5',
24
+ 'descTextStyle': 'body1',
25
+ 'descClasses': 'text-neutral-1000 text-hds-m-body1 tb:text-hds-t-body1 db:text-hds-d-body1'
26
+ },
27
+ "sm": {
28
+ 'cardStyle': 'p-6',
29
+ 'iconWidthStyle': 'h-12 w-12',
30
+ 'iconStyle': 'h-6 w-6',
31
+ 'titleTextStyle': 'body3c',
32
+ 'titleClasses': 'mb-1 text-neutral-800 text-hds-m-body3c-bold tb:text-hds-t-body3c-bold db:text-hds-d-body3c-bold',
33
+ 'descTextStyle': 'body3',
34
+ 'descClasses': 'text-neutral-800 text-hds-m-body3 tb:text-hds-t-body3 db:text-hds-d-body3'
35
+ }
36
+ }
6
37
 
38
+ export default function IconCard(props) {
39
+ const iconBG = HDSColor(props.iconBg);
7
40
  return (
8
41
  <>
9
- <div className={`${HDSColor(card.cardBg)}bg-neutral-0 hover:shadow-lg hover:transition-all hover:ease-in-out hover:duration-300 hover:border-opacity-0 min-h-[443px] min-w-[312px] tb:max-w-[763px] tb:min-h-[245px] rounded-3xl tb:p-8 p-4`}>
10
- <a href={card.sliderLink}>
11
- <div className='flex flex-col-reverse tb:flex-row justify-between gap-4 items-center'>
12
- <div className='tb:max-w-[393px] mt-8 tb:mt-0'>
13
- <Badges
14
- color={card.badge.color}
15
- children={card.badge.label}
16
- text_color='text-neutral-0'
17
- />
18
- <Typography textStyle='h4' className='mt-2 text-neutral-1000 max-w-[326px]'>{card.title}</Typography>
19
- <Typography textStyle='sub2' className='mt-2 text-neutral-600'>{card.subTitle}</Typography>
20
- </div>
21
- <div className="flex justify-center h-full items-center">
22
- <img src={card.imageUrl} alt={card.title} className='tb:max-w-[290px] rounded-lg flex items-center justify-center tb:max-h-[181px]' />
42
+ {
43
+ (props.readMoreBtn || props.button || props.button.length > 1) ? (
44
+ <div
45
+ className={`bg-neutral-0 grid h-full transition-all ease-in-out rounded-3xl ${cardVariant[props.cardType]['cardStyle']} ` + ((props.cardBorder) ? props.cardBorder : 'shadow') + ((props.readMoreBtn || props.button) ? ' hover:shadow-lg' : '')}
46
+ >
47
+ <div className=" self-start">
48
+ <div
49
+ className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 flex items-center justify-center rounded-full mb-6`}
50
+ >
51
+ <Icon
52
+ height={`stroke-[1.5px] ${cardVariant[props.cardType]['iconStyle']}`}
53
+ variant={props.iconVariant}
54
+ strokeColor={props.iconStroke}
55
+ strokeClass={HDSColor(props.iconStrokeClass)} />
56
+ </div>
57
+ <div
58
+ className="flex-1">
59
+
60
+ {props.cardType &&
61
+ (
62
+ <>
63
+ <Typography
64
+ textStyle={cardVariant[props.cardType]['titleTextStyle']}
65
+ className={cardVariant[props.cardType]['titleClasses']}
66
+ >
67
+ {props.title}
68
+ </Typography>
69
+
70
+ <Typography
71
+ textStyle={cardVariant[props.cardType]['descTextStyle']}
72
+ className={`${cardVariant[props.cardType]['descClasses']} [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600`}
73
+ >
74
+ <ReactMarkdown>
75
+ {props.description}
76
+ </ReactMarkdown>
77
+ </Typography>
78
+ {props.readMoreBtn && (
79
+ <a href={props.readMoreBtn.cta_link} className='flex'>
80
+ <HDSButton
81
+ label={props.readMoreBtn.cta_text}
82
+ type='secondaryLink'
83
+ leftIconVariant='none'
84
+ rightIconVariant='none'
85
+ state='default'
86
+ size='sm'
87
+ rightAnimatedArrow={true}
88
+ rightAnimatedArrowColor='#3970FD'
89
+ animatedHoverStroke='#3970FD'
90
+ btnTextColorClass='text-blue-500'
91
+ btnTextHoverClass=''
92
+ className=' mt-4'
93
+ />
94
+ </a>
95
+ )
23
96
 
97
+ }
98
+ </>
99
+ )
100
+ }
101
+ </div>
24
102
  </div>
103
+ {props.button &&
104
+ <div className="flex gap-2">
105
+ {props.button.map((btn, index) => (
106
+ <a href={btn.cta_link} key={index} className="flex self-end mt-7">
107
+ <HDSButton
108
+ label={btn.cta_text}
109
+ type={btn.cta_type || 'secondary'}
110
+ leftIconVariant='none'
111
+ rightIconVariant='none'
112
+ state='default'
113
+ size='sm'
114
+ rightAnimatedArrow={true}
115
+ rightAnimatedArrowColor={btn.rightAnimatedArrowColor || '#3970FD'}
116
+ btnBgColorClass={btn.btnBg}
117
+ btnTextHoverClass={btn.btnTextColorClass}
118
+ animatedHoverStroke={btn.animatedHoverStroke}
119
+ btnTextColorClass={btn.btnTextColorClass}
120
+ />
121
+ </a>))
122
+ }
123
+ </div>
124
+ }
125
+
126
+
127
+
128
+ </div>
129
+ ) :
130
+
131
+ (
132
+ <div>
133
+
134
+
135
+ <a href={((props.readMoreBtn && !props.button) ? props.readMoreBtn : props.button[0]['cta_link'])}
136
+ className={`bg-neutral-0 group grid h-full transition-all ease-in-out rounded-3xl ${cardVariant[props.cardType]['cardStyle']} ` + ((props.cardBorder) ? props.cardBorder : 'shadow') + ((props.readMoreBtn || props.button) ? ' hover:shadow-lg' : '')}
137
+ >
138
+ <div className=" self-start">
139
+ <div
140
+ className={`${iconBG} ${cardVariant[props.cardType]['iconWidthStyle']} w-12 h-12 flex items-center justify-center rounded-full mb-6`}
141
+ >
142
+ <Icon
143
+ height={`stroke-[1.5px] ${cardVariant[props.cardType]['iconStyle']}`}
144
+ variant={props.iconVariant}
145
+ strokeColor={props.iconStroke}
146
+ strokeClass={HDSColor(props.iconStrokeClass)} />
147
+ </div>
148
+ <div
149
+ className="flex-1">
150
+
151
+ {props.cardType &&
152
+ (
153
+ <>
154
+ <Typography
155
+ textStyle={cardVariant[props.cardType]['titleTextStyle']}
156
+ className={cardVariant[props.cardType]['titleClasses']}
157
+ >
158
+ {props.title}
159
+ </Typography>
160
+
161
+ <Typography
162
+ textStyle={cardVariant[props.cardType]['descTextStyle']}
163
+ className={`${cardVariant[props.cardType]['descClasses']} [&>p]:pb-2 last:[&>p]:pb-0 [&>ul]:ps-4 [&>ul>li]:list-disc [&>ul>li]:pb-2 last:[&>ul>li]:pb-0 [&>p>a]:text-blue-600`}
164
+ >
165
+ <ReactMarkdown>
166
+ {props.description}
167
+ </ReactMarkdown>
168
+ </Typography>
169
+ {props.readMoreBtn && (
170
+ <a href={props.readMoreBtn.cta_link} className='flex'>
171
+ <HDSButton
172
+ label={props.readMoreBtn.cta_text}
173
+ type='secondaryLink'
174
+ leftIconVariant='none'
175
+ rightIconVariant='none'
176
+ state='default'
177
+ size='sm'
178
+ rightAnimatedArrow={true}
179
+ rightAnimatedArrowColor='#3970FD'
180
+ animatedHoverStroke='#3970FD'
181
+ btnTextColorClass='text-blue-500'
182
+ btnTextHoverClass=''
183
+ className=' mt-4'
184
+ />
185
+ </a>
186
+ )
187
+
188
+ }
189
+ </>
190
+ )
191
+ }
25
192
  </div>
26
- </a>
27
- </div>
28
- </>
193
+ </div>
194
+ {props.button &&
195
+ <div className="flex gap-2">
196
+ {props.button.map((btn, index) => (
197
+ <a href={btn.cta_link} key={index} className="flex self-end mt-7">
198
+ <HDSButton
199
+ label={btn.cta_text}
200
+ type={btn.cta_type || 'secondary'}
201
+ leftIconVariant='none'
202
+ rightIconVariant='none'
203
+ state='default'
204
+ size='sm'
205
+ rightAnimatedArrow={true}
206
+ rightAnimatedArrowColor={btn.rightAnimatedArrowColor || '#3970FD'}
207
+ btnBgColorClass={btn.btnBg}
208
+ btnTextHoverClass={btn.btnTextColorClass}
209
+ animatedHoverStroke={btn.animatedHoverStroke}
210
+ btnTextColorClass={btn.btnTextColorClass}
211
+ />
212
+ </a>))
213
+ }
214
+ </div>
215
+ }
216
+
217
+
218
+
219
+ </a>
220
+ </div>
221
+ )
222
+
223
+ }
224
+ </>
29
225
  )
226
+ }
227
+
228
+ IconCard.defaultProps = {
229
+ cardType: 'withoutButton',
230
+ iconStrokeClass: 'stroke-neutral-1000'
231
+ }
232
+ Icon.propTypes = {
233
+ cardType: PropTypes.oneOf(['withoutButton', 'withButton', 'sm']),
30
234
  }
package/src/HDS/components/Cards/VideoCard/homeVC.js CHANGED
@@ -34,7 +34,7 @@ export default function HomeVC(props) {
34
34
  </div>
35
35
 
36
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'>
37
+ <div className='max-[375]:h-[684px] h-[600px] rounded flex flex-col items-center justify-cente overflow-hidden'>
38
38
 
39
39
  <div className=''>
40
40
  <div className=''>
@@ -48,7 +48,7 @@ export default function HomeVC(props) {
48
48
  />
49
49
 
50
50
  </div>
51
- <div className='absolute max-[365px]:h-[657px] h-[600px] z-50 top-[72px] px-4'>
51
+ <div className='absolute max-[365px]:h-[657px] h-[600px] z-50 top-[72px]'>
52
52
  <div className=''>
53
53
  < FeedbackCard
54
54
  brandImgUrl={props.testimonial.card.title_img}
package/src/HDS/components/Carousels/customCarousel.js CHANGED
@@ -206,7 +206,7 @@ export default function CustomCarousel(props) {
206
206
  {props.cards.map((item, i) => (
207
207
  // <div className="max-[1140px]:snap-always tb:snap-always mx-5 max-[1140px]:shrink-0" key={i} ref={refs[i]}>
208
208
  <div className=" snap-center mx-5 shrink-0 py-1" key={i} ref={refs[i]}>
209
- <div className="w-full select-none rounded-3xl object-contain shadow">
209
+ <div className="w-full select-none rounded-3xl object-contain">
210
210
  {React.createElement(props.component, item)}
211
211
  </div>
212
212
 
package/src/HDS/components/Carousels/homeCarousel.js CHANGED
@@ -255,7 +255,8 @@ export default function HomePageCarousePrimary(props) {
255
255
  </div>
256
256
  </div>
257
257
  </div>
258
- <div className="max-[369px]:mt-8 min-[400px]:-mt-20 min-[699px]:hidden">
258
+ {/* mobile */}
259
+ <div className="max-[369px]:mt-8 min-[400px]:-mt-[10rem] min-[699px]:hidden">
259
260
 
260
261
  <div className="flex w-screen gap-6 justify-center ">
261
262
 
package/src/HDS/components/Footers/v3Footer.js CHANGED
@@ -73,15 +73,15 @@ export default function V3Footer(props) {
73
73
  return (
74
74
  <div>
75
75
  <div className='db-s:flex justify-between gap-10 db-s:gap-20 db:gap-40'>
76
- <div className='max-w-[125px] pb-10 db-s:pb-0'>
76
+ <div className='pb-10 db-s:pb-0 px-4 tb:px-0'>
77
77
  <a href={props.brandLink} className=''>
78
- <img src={props.brandUrl} alt={props.brandAlt} />
78
+ <img className="max-w-[125px]" src={props.brandUrl} alt={props.brandAlt} />
79
79
  </a>
80
80
  </div>
81
- <div className='flex justify-between tb:justify-start tb-l:justify-between flex-1 flex-wrap gap-y-10 tb:gap-y-16'>
81
+ <div className='flex justify-between px-4 tb:px-0 tb:justify-start tb-l:justify-between flex-1 flex-wrap gap-y-10 tb:gap-y-16'>
82
82
  {
83
83
  props.footerLinks.map((footerLink, index) =>(
84
- <div key={index} className='min-w-[140px] db-s:min-w-fit'>
84
+ <div key={index} className='min-w-[130px] db-s:min-w-fit'>
85
85
  <Typography textStyle='body3c-semi-bold' className='text-neutral-600'>{footerLink.title}</Typography>
86
86
  {
87
87
  footerLink.links.map((link, subIndex) => (
@@ -301,4 +301,4 @@ V3Footer.defaultProps = {
301
301
  ]
302
302
  },
303
303
  ],
304
- }
304
+ }