hds-web 1.9.3 → 1.9.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 +2 -2
- package/package.json +1 -1
- package/src/HDS/components/Cards/Testimonials/testimonial.js +3 -3
- package/src/HDS/components/Cards/VideoCard/homeVC.js +19 -17
- package/src/HDS/components/Carousels/homeCarousel.js +5 -5
- package/src/styles/tailwind.css +138 -257
package/package.json
CHANGED
|
@@ -25,7 +25,7 @@ export default function Testimonial(props) {
|
|
|
25
25
|
const Card1 = () => {
|
|
26
26
|
return (
|
|
27
27
|
<>
|
|
28
|
-
<div className={`${HDSColor(card.cardBg)} bg-neutral-1000
|
|
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 `}>
|
|
29
29
|
<div className="">
|
|
30
30
|
<div className=" pt-8 pl-6">
|
|
31
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 " />
|
|
@@ -53,8 +53,8 @@ export default function Testimonial(props) {
|
|
|
53
53
|
|
|
54
54
|
const Card2 = () => {
|
|
55
55
|
return (
|
|
56
|
-
<div className="
|
|
57
|
-
<div className={`${HDSColor(cardHover.cardBg)}
|
|
56
|
+
<div className="h-[428px]">
|
|
57
|
+
<div className={`${HDSColor(cardHover.cardBg)} rounded-2xl max-w-[221px] justify-between h-[442px] flex flex-col`}>
|
|
58
58
|
<div className=" ">
|
|
59
59
|
<div className="pt-8 pl-6 pr-12 ">
|
|
60
60
|
<img src="https://res.cloudinary.com/dh8fp23nd/image/upload/v1686760719/website%20v3/hascon_t5kwrf.png" alt="Card" className=" inline-block w-full" />
|
|
@@ -1,31 +1,33 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { Testimonial } from '../Testimonials';
|
|
3
3
|
|
|
4
4
|
export default function HomeVC(props) {
|
|
5
5
|
return (
|
|
6
6
|
<>
|
|
7
7
|
<div className='carouselShadow'>
|
|
8
|
-
<div className='w-[
|
|
9
|
-
<div className='
|
|
10
|
-
<div>
|
|
11
|
-
<
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
8
|
+
<div className='w-[620px] h-[476px] bg-base-1000 rounded-2xl border-2 border-neutral-300 flex justify-center items-center'>
|
|
9
|
+
<div className='w-[580px] h-[436px] bg-base-1000 rounded flex flex-col items-center justify-center overflow-hidden'>
|
|
10
|
+
<div className=''>
|
|
11
|
+
<div className=''>
|
|
12
|
+
<video
|
|
13
|
+
autoPlay
|
|
14
|
+
loop
|
|
15
|
+
muted
|
|
16
|
+
className=" object-fill max-w-full max-h-full scale-150"
|
|
17
|
+
src={props.video_url}
|
|
16
18
|
/>
|
|
17
|
-
|
|
18
|
-
|
|
19
|
+
<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>
|
|
22
|
+
</div>
|
|
23
|
+
<div className='fixed top-[24px] left-[375px] bg-neutral-0/40'>
|
|
19
24
|
|
|
20
|
-
|
|
25
|
+
<Testimonial {...props.testimonial} />
|
|
26
|
+
</div>
|
|
21
27
|
</div>
|
|
22
28
|
</div>
|
|
23
29
|
</div>
|
|
24
|
-
|
|
30
|
+
|
|
25
31
|
</div>
|
|
26
32
|
</>)
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
HomeVC.defaultProps= {
|
|
30
|
-
|
|
31
33
|
}
|
|
@@ -131,8 +131,8 @@ const carouselItems2 = [
|
|
|
131
131
|
const video_props =
|
|
132
132
|
[
|
|
133
133
|
{
|
|
134
|
-
|
|
135
|
-
video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1654760488/samples/sea-turtle.mp4',
|
|
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',
|
|
136
136
|
|
|
137
137
|
testimonial: {
|
|
138
138
|
card: {
|
|
@@ -364,11 +364,11 @@ export default function HomePageCarousePrimary(props) {
|
|
|
364
364
|
>
|
|
365
365
|
<div className="w-screen flex justify-center">
|
|
366
366
|
<div className="absolute z-30">
|
|
367
|
-
<div className={`snap-x w-[643px] h-[800px] items-center
|
|
367
|
+
<div className={`snap-x w-[643px] h-[800px] items-center z-10 inline-flex select-none overflow-x-hidden scrollbar-hide`}
|
|
368
368
|
ref={carouselRef}
|
|
369
369
|
>
|
|
370
370
|
{video_props.map((item, i) => (
|
|
371
|
-
<div className=" db:snap-center snap-center tb-m:snap-start mx-5 " key={i
|
|
371
|
+
<div className=" db:snap-center snap-center tb-m:snap-start mx-5 " key={i} ref={refs[i]}>
|
|
372
372
|
<div className=" select-none rounded-3xl object-contain ">
|
|
373
373
|
{React.createElement(VideoCard, item)}
|
|
374
374
|
</div>
|
|
@@ -384,7 +384,7 @@ export default function HomePageCarousePrimary(props) {
|
|
|
384
384
|
>
|
|
385
385
|
|
|
386
386
|
{cards.map((item, i) => {
|
|
387
|
-
|
|
387
|
+
|
|
388
388
|
// toggleBoolean();
|
|
389
389
|
return (
|
|
390
390
|
<>
|