hds-web 1.21.1 → 1.21.3
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 +1 -1
- package/dist/index.es.css +1 -1
- package/dist/index.es.js +2 -2
- package/dist/index.js +2 -2
- package/package.json +1 -1
- package/src/HDS/components/Cards/StoryCard/index.js +2 -0
- package/src/HDS/components/Cards/StoryCard/storysm.js +113 -0
- package/src/HDS/components/Cards/StoryCard/storyxl.js +140 -0
- package/src/HDS/components/Cards/index.js +2 -1
- package/src/HDS/components/Carousels/customerStories.js +180 -0
- package/src/HDS/components/Carousels/index.js +2 -1
- package/src/HDS/helpers/AlgoliaSearch/searchwrapper.js +2 -2
- package/src/index.css +33 -0
- package/src/styles/tailwind.css +196 -5
package/package.json
CHANGED
@@ -0,0 +1,113 @@
|
|
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 { motion } from "framer-motion";
|
7
|
+
import { HDSButton } from '../../Buttons'
|
8
|
+
|
9
|
+
export default function StoryCard(props) {
|
10
|
+
return (
|
11
|
+
<>
|
12
|
+
<a
|
13
|
+
href={props.linkUrl}
|
14
|
+
className={`rounded-2xl hover:shadow-xl p-8 h-full flex flex-col justify-between group/sc border border-neutral-200 hover:border-opacity-0 min-h-[260px] group`}
|
15
|
+
>
|
16
|
+
|
17
|
+
<>
|
18
|
+
<div className='flex items-center justify-between'>
|
19
|
+
{props.brandImageUrl && props.brandImageAlt && (
|
20
|
+
<div className="max-w-[190px]">
|
21
|
+
<img src={props.brandImageUrl} alt={props.brandImageAlt} className='max-w-[100px]' />
|
22
|
+
</div>
|
23
|
+
)
|
24
|
+
|
25
|
+
}
|
26
|
+
{props.iconVariant &&
|
27
|
+
(
|
28
|
+
<div className="flex flex-row relative ">
|
29
|
+
<div className="group-hover/sc:opacity-0 left-0 absolute">
|
30
|
+
{/* <Icon
|
31
|
+
height={'w-6 h-6 stroke-[1.5px] stroke-blue-400'}
|
32
|
+
variant={props.iconArrowVariant}
|
33
|
+
strokeColor={props.iconArrowStrokeColor}
|
34
|
+
strokeClass={HDSColor(props.iconArrowStrokeClass)}
|
35
|
+
/> */}
|
36
|
+
</div>
|
37
|
+
{props.iconTag &&
|
38
|
+
(
|
39
|
+
<div className=" gap-2 transition-all duration-300 group-hover/sc:opacity-100 inline-flex flex-row translate-x-0 group-hover/sc:-translate-x-5">
|
40
|
+
<Icon
|
41
|
+
height={'w-6 h-6 stroke-[1.5px] stroke-blue-400'}
|
42
|
+
variant={props.iconArrowVariant}
|
43
|
+
strokeColor={props.iconArrowStrokeColor}
|
44
|
+
strokeClass={HDSColor(props.iconArrowStrokeClass)}
|
45
|
+
/>
|
46
|
+
<div
|
47
|
+
className=" opacity-0 group-hover/sc:opacity-100 transition-opacity duration-300 ">
|
48
|
+
<Typography textStyle='body3c' className='hidden group-hover/sc:block'>{props.iconTag}</Typography>
|
49
|
+
</div>
|
50
|
+
</div>
|
51
|
+
)
|
52
|
+
}
|
53
|
+
</div>
|
54
|
+
|
55
|
+
)
|
56
|
+
}
|
57
|
+
</div>
|
58
|
+
{props.description &&
|
59
|
+
(
|
60
|
+
<div>
|
61
|
+
<div className="translate-y-10 group-hover/sc:translate-y-0 duration-300 transition-all">
|
62
|
+
<Typography
|
63
|
+
textStyle="body3"
|
64
|
+
className={`${HDSColor(props.descTextColor)} mt-2`}>
|
65
|
+
{props.description}
|
66
|
+
</Typography>
|
67
|
+
</div>
|
68
|
+
<div className="translate-y-8 transition-all group-hover/sc:translate-y-0 opacity-0 group-hover/sc:opacity-100 duration-300 group-hover/sc:flex">
|
69
|
+
<div className="flex">
|
70
|
+
<HDSButton
|
71
|
+
label={props.readMoreBtn.cta_text}
|
72
|
+
type='secondaryLink'
|
73
|
+
leftIconVariant='none'
|
74
|
+
rightIconVariant='none'
|
75
|
+
state='default'
|
76
|
+
size='sm'
|
77
|
+
rightAnimatedArrow={true}
|
78
|
+
rightAnimatedArrowColor='#3970FD'
|
79
|
+
animatedHoverStroke='#3970FD'
|
80
|
+
btnTextColorClass='text-blue-500'
|
81
|
+
btnTextHoverClass=''
|
82
|
+
className=' mt-[14px]'
|
83
|
+
/>
|
84
|
+
</div>
|
85
|
+
|
86
|
+
</div>
|
87
|
+
</div>
|
88
|
+
|
89
|
+
)}
|
90
|
+
</>
|
91
|
+
|
92
|
+
</a>
|
93
|
+
</>
|
94
|
+
)
|
95
|
+
}
|
96
|
+
|
97
|
+
StoryCard.defaultProps = {
|
98
|
+
descTextColor: '',
|
99
|
+
iconTag: 'Customer Stories',
|
100
|
+
titleTextColor: '',
|
101
|
+
brandImageUrl: 'https://res.cloudinary.com/hasura-cms-uploads/image/upload/v1687778913/image_16_a725262c4e.png',
|
102
|
+
brandImageAlt: 'pipe',
|
103
|
+
linkUrl: '#',
|
104
|
+
iconVariant: 'videorecorder',
|
105
|
+
iconStrokeColor: 'blue-500',
|
106
|
+
iconArrowVariant: 'arrownarrowupright',
|
107
|
+
iconArrowStrokeColor: 'blue-400',
|
108
|
+
title: 'Webinar',
|
109
|
+
description: 'Model Level Authorization System for GraphQL with Hasura Model Level Authorization System for GraphQL with Hasura Model Level Authorization System for GraphQL with Hasura',
|
110
|
+
readMoreBtn: {
|
111
|
+
cta_text: 'Read More'
|
112
|
+
}
|
113
|
+
};
|
@@ -0,0 +1,140 @@
|
|
1
|
+
import React from "react";
|
2
|
+
import { Typography } from '../../../foundation/Typography'
|
3
|
+
import { HDSButton } from '../../Buttons';
|
4
|
+
import { Icon } from "../../common-components";
|
5
|
+
|
6
|
+
export default function StoryCardXL(props) {
|
7
|
+
return (
|
8
|
+
<>
|
9
|
+
<div className="flex flex-col-reverse px-6 py-10 db-s:px-0 db-s:py-0 db-s:flex-row db:gap-[132px]">
|
10
|
+
|
11
|
+
<div className="flex flex-col db-s:pl-20 db-s:pt-20 db-s:pb-[74px]">
|
12
|
+
{
|
13
|
+
props.tagline && (
|
14
|
+
<Typography textStyle='h6' className='text-blue-400 db-s:block uppercase mb-2 hidden '>{props.tagline}</Typography>
|
15
|
+
)
|
16
|
+
}
|
17
|
+
{props.brandImageURL &&
|
18
|
+
props.brandImageAlt && (
|
19
|
+
<>
|
20
|
+
<img src={props.brandImageURL} alt={props.brandImageAlt} className="max-w-[140px] db-s:block hidden " />
|
21
|
+
</>
|
22
|
+
)
|
23
|
+
|
24
|
+
}
|
25
|
+
{props.title &&
|
26
|
+
(
|
27
|
+
<div className="flex pt-6 flex-col gap-6">
|
28
|
+
<Typography textStyle='h3' className='text-neutral-1000 db-s:block hidden'>{props.title}</Typography>
|
29
|
+
{props.heroList &&
|
30
|
+
(
|
31
|
+
<div>
|
32
|
+
<div className="flex flex-col gap-4">
|
33
|
+
{props.heroList.map((value, index)=>(
|
34
|
+
<div key={index} className='flex gap-5'>
|
35
|
+
<Icon
|
36
|
+
height='h-8 w-8 stroke-2' variant={value.heroIconVariant} strokeClass='stroke-neutral-800' />
|
37
|
+
<Typography
|
38
|
+
textStyle='sub2' className='text-neutral-700' >
|
39
|
+
{value.heroListTitle}
|
40
|
+
</Typography>
|
41
|
+
</div>
|
42
|
+
|
43
|
+
))
|
44
|
+
|
45
|
+
|
46
|
+
}
|
47
|
+
|
48
|
+
</div>
|
49
|
+
</div>
|
50
|
+
)
|
51
|
+
}
|
52
|
+
</div>
|
53
|
+
)}
|
54
|
+
{props.CTA &&
|
55
|
+
<div className="mt-16 tb:mt-10 tb:flex">
|
56
|
+
<a href={props.CTA['url']}>
|
57
|
+
<HDSButton
|
58
|
+
label={props.CTA['text']}
|
59
|
+
type={props.CTA['type'] || 'secondary'}
|
60
|
+
size='md'
|
61
|
+
rightAnimatedArrowColor="#3970FD"
|
62
|
+
/>
|
63
|
+
</a>
|
64
|
+
</div>}
|
65
|
+
</div>
|
66
|
+
{(props.heroImageURL &&
|
67
|
+
props.heroImageAlt) ?
|
68
|
+
(
|
69
|
+
<div className="flex mt-4 tb:mt-0 justify-start db-s:justify-end db-s:pt-20 tb:max-w-[600px]">
|
70
|
+
<img src={props.heroImageURL} alt={props.heroImageAlt} className="rounded-xl db-s:rounded-none db-s:rounded-br-3xl db-s:rounded-tl-3xl max-w-[280px] tb:max-w-[400px] db-s:max-w-[522px] " />
|
71
|
+
</div>
|
72
|
+
)
|
73
|
+
:
|
74
|
+
(
|
75
|
+
<>
|
76
|
+
{props.video_url && (
|
77
|
+
<div className="flex mt-4 tb:mt-0 tb:items-end tb:max-w-[600px] db-s:min-w-[550px]">
|
78
|
+
<video
|
79
|
+
autoPlay
|
80
|
+
loop
|
81
|
+
playsInline
|
82
|
+
muted
|
83
|
+
src={props.video_url}
|
84
|
+
className=" rounded-xl db-s:rounded-none db-s:rounded-br-3xl db-s:rounded-tl-3xl"
|
85
|
+
/>
|
86
|
+
</div>)}
|
87
|
+
</>
|
88
|
+
)}
|
89
|
+
|
90
|
+
<div className="db-s:hidden pb-6">
|
91
|
+
{props.brandImageURL &&
|
92
|
+
props.brandImageAlt && (
|
93
|
+
<>
|
94
|
+
<img src={props.brandImageURL} alt={props.brandImageAlt} className="max-w-[140px] pb-6 " />
|
95
|
+
</>
|
96
|
+
)
|
97
|
+
|
98
|
+
}
|
99
|
+
<Typography textStyle='h3' className='text-neutral-1000'>{props.title}</Typography>
|
100
|
+
</div>
|
101
|
+
{
|
102
|
+
props.tagline && (
|
103
|
+
<Typography textStyle='h6' className='text-blue-400 db-s:hidden uppercase'>{props.tagline}</Typography>
|
104
|
+
)
|
105
|
+
}
|
106
|
+
</div>
|
107
|
+
|
108
|
+
</>
|
109
|
+
)
|
110
|
+
}
|
111
|
+
|
112
|
+
StoryCardXL.defaultProps = {
|
113
|
+
heroImageURL: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1690373781/website%20v3/optum_geyxv3.png',
|
114
|
+
heroImageAlt: 'optum',
|
115
|
+
heroIconVariant: 'calendar',
|
116
|
+
heroIconStrokeClass: 'stroke-neutral-1000',
|
117
|
+
heroListTitle: '100 days from concept to production',
|
118
|
+
brandImageURL: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1679302131/main-web/roadshow/optum_koz0nf.svg',
|
119
|
+
brandImageAlt: 'optum',
|
120
|
+
title: 'Healthcare giant Optum goes from concept to production in 100 days with Hasura',
|
121
|
+
description: 'description1',
|
122
|
+
CTA: {
|
123
|
+
text: 'Button Label',
|
124
|
+
},
|
125
|
+
heroList:[
|
126
|
+
{
|
127
|
+
heroIconVariant:'calendar',
|
128
|
+
heroListTitle:'100 days from concept to production'
|
129
|
+
},
|
130
|
+
{
|
131
|
+
heroIconVariant:'database03',
|
132
|
+
heroListTitle:'Vastly improved access to relevant data'
|
133
|
+
},
|
134
|
+
{
|
135
|
+
heroIconVariant:'settings01',
|
136
|
+
heroListTitle:'Simpler data and API management'
|
137
|
+
}
|
138
|
+
]
|
139
|
+
// video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1654760488/samples/sea-turtle.mp4'
|
140
|
+
}
|
@@ -0,0 +1,180 @@
|
|
1
|
+
import React, { useState, useEffect } from 'react';
|
2
|
+
import { AnimatePresence, motion } from 'framer-motion';
|
3
|
+
import { Icon } from '../common-components';
|
4
|
+
|
5
|
+
const Carousels = ({ components, variants }) => {
|
6
|
+
const [FlowDirection, setFlowDirection] = useState(true);
|
7
|
+
const [CenterId, setCenterId] = useState(0);
|
8
|
+
const [LeftId, setLeftId] = useState(components.length - 1);
|
9
|
+
const [RightId, setRightId] = useState(1);
|
10
|
+
|
11
|
+
const [activeSlide, setActiveSlide] = useState(0);
|
12
|
+
const [isAutoSliding, setIsAutoSliding] = useState(true);
|
13
|
+
|
14
|
+
const handleAutoSlide = () => {
|
15
|
+
if (isAutoSliding) {
|
16
|
+
nextBtn();
|
17
|
+
}
|
18
|
+
};
|
19
|
+
|
20
|
+
useEffect(() => {
|
21
|
+
const intervalId = setInterval(handleAutoSlide, 5000);
|
22
|
+
return () => clearInterval(intervalId);
|
23
|
+
}, [CenterId, isAutoSliding]);
|
24
|
+
|
25
|
+
|
26
|
+
|
27
|
+
const nextBtn = () => {
|
28
|
+
if (LeftId === components.length - 1) {
|
29
|
+
setLeftId(0);
|
30
|
+
} else {
|
31
|
+
setLeftId(LeftId + 1);
|
32
|
+
}
|
33
|
+
if (CenterId === components.length - 1) {
|
34
|
+
setCenterId(0);
|
35
|
+
} else {
|
36
|
+
setCenterId(CenterId + 1);
|
37
|
+
}
|
38
|
+
|
39
|
+
if (RightId === components.length - 1) {
|
40
|
+
setRightId(0);
|
41
|
+
} else {
|
42
|
+
setRightId(RightId + 1);
|
43
|
+
}
|
44
|
+
setFlowDirection(true);
|
45
|
+
setActiveSlide((prevIndex) => (prevIndex === components.length - 1 ? 0 : prevIndex + 1));
|
46
|
+
|
47
|
+
setFlowDirection(true);
|
48
|
+
};
|
49
|
+
|
50
|
+
const prevBtn = () => {
|
51
|
+
setFlowDirection(false);
|
52
|
+
if (LeftId === 0) {
|
53
|
+
setLeftId(components.length - 1);
|
54
|
+
} else {
|
55
|
+
setLeftId(LeftId - 1);
|
56
|
+
}
|
57
|
+
if (CenterId === 0) {
|
58
|
+
setCenterId(components.length - 1);
|
59
|
+
} else {
|
60
|
+
setCenterId(CenterId - 1);
|
61
|
+
}
|
62
|
+
if (RightId === 0) {
|
63
|
+
setRightId(components.length - 1);
|
64
|
+
} else {
|
65
|
+
setRightId(RightId - 1);
|
66
|
+
}
|
67
|
+
setActiveSlide((prevIndex) => (prevIndex === 0 ? components.length - 1 : prevIndex - 1));
|
68
|
+
|
69
|
+
setFlowDirection(false);
|
70
|
+
};
|
71
|
+
|
72
|
+
const handleMouseEnter = () => {
|
73
|
+
setIsAutoSliding(false);
|
74
|
+
};
|
75
|
+
|
76
|
+
const handleMouseLeave = () => {
|
77
|
+
setIsAutoSliding(true);
|
78
|
+
};
|
79
|
+
|
80
|
+
return (
|
81
|
+
<div
|
82
|
+
className='h-full'
|
83
|
+
onMouseEnter={handleMouseEnter}
|
84
|
+
onMouseLeave={handleMouseLeave}
|
85
|
+
>
|
86
|
+
<div
|
87
|
+
className="hidden db-s:grid relative h-full"
|
88
|
+
>
|
89
|
+
<motion.div className=" ">
|
90
|
+
<AnimatePresence initial={false}>
|
91
|
+
<motion.div
|
92
|
+
key={LeftId}
|
93
|
+
variants={variants}
|
94
|
+
initial={FlowDirection ? 'center' : 'leftHidden'}
|
95
|
+
animate="left"
|
96
|
+
exit={'leftHidden'}
|
97
|
+
className="carousel-item"
|
98
|
+
>
|
99
|
+
{components[LeftId]}
|
100
|
+
</motion.div>
|
101
|
+
<motion.div
|
102
|
+
variants={variants}
|
103
|
+
key={CenterId}
|
104
|
+
initial={FlowDirection ? 'right' : 'left'}
|
105
|
+
animate="center"
|
106
|
+
className="carousel-item"
|
107
|
+
>
|
108
|
+
{components[CenterId]}
|
109
|
+
</motion.div>
|
110
|
+
<motion.div
|
111
|
+
key={RightId}
|
112
|
+
variants={variants}
|
113
|
+
initial={FlowDirection ? 'rightHidden' : 'center'}
|
114
|
+
animate="right"
|
115
|
+
exit={'rightHidden'}
|
116
|
+
className="carousel-item"
|
117
|
+
>
|
118
|
+
{components[RightId]}
|
119
|
+
</motion.div>
|
120
|
+
</AnimatePresence>
|
121
|
+
</motion.div>
|
122
|
+
{/* slider bar */}
|
123
|
+
{/* <div className="flex justify-center mt-4">
|
124
|
+
{components.map((_, index) => (
|
125
|
+
<div
|
126
|
+
key={index}
|
127
|
+
className={`w-4 h-4 rounded-full mx-1 ${activeSlide === index ? 'bg-blue-500' : 'bg-gray-300'
|
128
|
+
}`}
|
129
|
+
></div>
|
130
|
+
))}
|
131
|
+
</div> */}
|
132
|
+
</div>
|
133
|
+
<div className="mt-12 ">
|
134
|
+
<div className="gap-4 w-full h-full flex justify-center">
|
135
|
+
<motion.button
|
136
|
+
initial={{ opacity: 0, scale: 0 }}
|
137
|
+
animate={{ opacity: 1, scale: 1 }}
|
138
|
+
transition={{
|
139
|
+
type: 'spring',
|
140
|
+
duration: 0.5,
|
141
|
+
}}
|
142
|
+
whileHover={{ scale: 1.1 }}
|
143
|
+
whileTap={{ scale: 0.8 }}
|
144
|
+
|
145
|
+
className=" w-12 h-12 bg-neutral-0 shadow hover:bg-neutral-100 rounded-full flex justify-center items-center active:bg-neutral-200 "
|
146
|
+
onClick={prevBtn}
|
147
|
+
>
|
148
|
+
<Icon height={'h-6 w-6'} variant={'chevronleft'} strokeClass='stroke-neutral-800' />
|
149
|
+
</motion.button>
|
150
|
+
<motion.button
|
151
|
+
initial={{ opacity: 0, scale: 0 }}
|
152
|
+
animate={{ opacity: 1, scale: 1 }}
|
153
|
+
transition={{
|
154
|
+
type: 'spring',
|
155
|
+
duration: 0.5,
|
156
|
+
}}
|
157
|
+
whileHover={{ scale: 1.1 }}
|
158
|
+
whileTap={{ scale: 0.8 }}
|
159
|
+
className="w-12 h-12 bg-neutral-0 shadow hover:bg-neutral-100 rounded-full flex justify-center items-center active:bg-neutral-200"
|
160
|
+
onClick={nextBtn}
|
161
|
+
>
|
162
|
+
<Icon height={'h-6 w-6'} variant={'chevronright'} strokeClass='stroke-neutral-800' />
|
163
|
+
</motion.button>
|
164
|
+
</div>
|
165
|
+
</div>
|
166
|
+
<div className='db-s:hidden flex flex-row overflow-scroll scrollbar-hide gap-2 mb-m:gap-4 tb-m:gap-10'>
|
167
|
+
{components.map((component, index) => (
|
168
|
+
<React.Fragment key={index}>
|
169
|
+
<div className='tb-xl:min-w-[800px] tb-l:min-w-[700px] tb:min-w-[500px] mb-s:min-w-[350px]'>
|
170
|
+
{component}
|
171
|
+
</div>
|
172
|
+
</React.Fragment>
|
173
|
+
))}
|
174
|
+
</div>
|
175
|
+
</div>
|
176
|
+
);
|
177
|
+
};
|
178
|
+
|
179
|
+
|
180
|
+
export default Carousels;
|
@@ -2,4 +2,5 @@ export {default as Carousel} from './carousel';
|
|
2
2
|
export {default as CarouselCard} from './carouselCard';
|
3
3
|
export {default as CarouselB} from './carouselB';
|
4
4
|
export {default as HomepageCarouselPrimary} from './homeCarousel';
|
5
|
-
export {default as CustomCarousel} from './customCarousel';
|
5
|
+
export {default as CustomCarousel} from './customCarousel';
|
6
|
+
export {default as CustomerStories} from './customerStories';
|
@@ -70,7 +70,7 @@ const IndexTypeFilter = ({ activeIndexTypes, setActiveIndexTypes }) => {
|
|
70
70
|
<div className="tb-m:min-w-[182px] static tb-m:sticky top-[116px] self-start">
|
71
71
|
<ul className="hds-hidden tb-m:block bg-neutral-0 shadow-md p-4 rounded-2xl">
|
72
72
|
{Object.values(INDEX_TYPES).map((index) => (
|
73
|
-
<li key={index} className="flex items-center mb-2 last:mb-0 tb-m:mr-0">
|
73
|
+
<li key={index} className="flex items-center mb-2 last:mb-0 tb-m:mr-0 py-0">
|
74
74
|
<button
|
75
75
|
onClick={() => handleOnClick(index)}
|
76
76
|
className={`capitalize cursor-pointer py-1 px-3 w-full text-left rounded-full text-neutral-500 ${(activeIndexTypes[index] && index === 'All') ? "bg-blue-500 " : ""
|
@@ -92,7 +92,7 @@ const IndexTypeFilter = ({ activeIndexTypes, setActiveIndexTypes }) => {
|
|
92
92
|
<div className="relative hds-hidden-tbm">
|
93
93
|
<button
|
94
94
|
onClick={() => setShowDropdown(!showDropdown)}
|
95
|
-
className="capitalize cursor-pointer py-1 px-3 w-full border border-neutral-
|
95
|
+
className="capitalize cursor-pointer py-1 px-3 w-full border border-neutral-800 text-left rounded-full text-neutral-800 bg-transparent"
|
96
96
|
>
|
97
97
|
{Object.values(INDEX_TYPES).find((index) => activeIndexTypes[index]) || "All"}
|
98
98
|
|
package/src/index.css
CHANGED
@@ -821,3 +821,36 @@ position: absolute;
|
|
821
821
|
opacity: 0;
|
822
822
|
}
|
823
823
|
}
|
824
|
+
|
825
|
+
|
826
|
+
|
827
|
+
.carousel-wrapper {
|
828
|
+
display: grid;
|
829
|
+
place-content: center;
|
830
|
+
border-radius: 2rem;
|
831
|
+
|
832
|
+
}
|
833
|
+
|
834
|
+
.carousel-content {
|
835
|
+
position: relative;
|
836
|
+
|
837
|
+
}
|
838
|
+
|
839
|
+
.carousel-item {
|
840
|
+
position: absolute;
|
841
|
+
background-position: center;
|
842
|
+
background-size: cover;
|
843
|
+
background-repeat: no-repeat;
|
844
|
+
|
845
|
+
}
|
846
|
+
|
847
|
+
.carousel-btns {
|
848
|
+
|
849
|
+
display: flex;
|
850
|
+
justify-content: center;
|
851
|
+
gap: 1rem;
|
852
|
+
z-index: 6;
|
853
|
+
|
854
|
+
|
855
|
+
}
|
856
|
+
|