hds-web 1.13.3 → 1.13.4

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 +2 -2
  2. package/dist/index.es.css +2 -2
  3. package/dist/index.es.js +4 -4
  4. package/dist/index.js +4 -4
  5. package/package.json +1 -1
  6. package/src/HDS/components/Cards/Link/link.js +17 -17
  7. package/src/HDS/components/Hero/h3.js +170 -118
  8. package/src/HDS/modules/TextCard/textCard.js +6 -1
  9. package/src/HDS/modules/navCard/index.js +2 -1
  10. package/src/HDS/modules/navCard/navTabCard.js +93 -0
  11. package/src/styles/tailwind.css +18 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hds-web",
3
- "version": "1.13.3",
3
+ "version": "1.13.4",
4
4
  "private": false,
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.es.js",
package/src/HDS/components/Cards/Link/link.js CHANGED
@@ -15,16 +15,16 @@ export default function LinkCard(props) {
15
15
  {props.brandImageUrl ?
16
16
  (
17
17
  <div className="flex flex-col">
18
- <div className="flex justify-end items-end">
19
- {props.iconArrowVariant &&
20
- (<Icon
18
+ {props.iconArrowVariant &&
19
+ <div className="flex justify-end items-end">
20
+ <Icon
21
21
  height={'w-6 h-6 stroke-[1.5px] stroke-blue-400'}
22
22
  variant={props.iconArrowVariant}
23
23
  strokeColor={props.iconArrowStrokeColor}
24
24
  strokeClass={HDSColor(props.iconArrowStrokeClass)}
25
- />)
26
- }
27
- </div>
25
+ />
26
+ </div>
27
+ }
28
28
  <img src={props.brandImageUrl} alt={props.brandImageAlt} />
29
29
 
30
30
  </div>
@@ -60,14 +60,14 @@ export default function LinkCard(props) {
60
60
  {props.description &&
61
61
  (
62
62
  <div>
63
-
64
- <Typography
65
- textStyle="body3"
66
- className={`${HDSColor(props.descTextColor)} mt-2`}>
67
- {props.description}
68
- </Typography>
69
- </div>
70
-
63
+
64
+ <Typography
65
+ textStyle="body3"
66
+ className={`${HDSColor(props.descTextColor)} mt-2`}>
67
+ {props.description}
68
+ </Typography>
69
+ </div>
70
+
71
71
  )}
72
72
  </>
73
73
  )
@@ -78,10 +78,10 @@ export default function LinkCard(props) {
78
78
  }
79
79
 
80
80
  LinkCard.defaultProps = {
81
- descTextColor:'',
82
- titleTextColor:'',
81
+ descTextColor: '',
82
+ titleTextColor: '',
83
83
  brandImageUrl: '',
84
- brandImageAlt:'',
84
+ brandImageAlt: '',
85
85
  linkUrl: '#',
86
86
  iconVariant: 'videorecorder',
87
87
  iconStrokeColor: 'blue-500',
package/src/HDS/components/Hero/h3.js CHANGED
@@ -4,165 +4,217 @@ import { Typography } from '../../foundation/Typography';
4
4
  import { HDSButton } from '../../components/Buttons';
5
5
  import { HDSColor } from '../../foundation/ColorPalette';
6
6
  import { Tab } from '../../components/Tabs';
7
- import PropTypes from 'prop-types';
8
7
  import { LinkCard } from '../Cards/Link';
9
8
 
10
9
  const tabCard = (Content) => (
11
10
  <>
12
- <div className='tb:px-3'>
13
- {Content.title &&
14
- <Typography
15
- textStyle='h2'
16
- className={HDSColor(Content.titleTextColor)}>
17
- {Content.title}
18
- </Typography>}
11
+ <div className='tb:px-3'>
12
+ {Content.title &&
13
+ <Typography
14
+ textStyle='h2'
15
+ as="h2"
16
+ className={`${HDSColor(Content.titleTextColor)}`}>
17
+ {Content.title}
18
+ </Typography>}
19
19
 
20
- {Content.subTitle &&
21
- <Typography
22
- textStyle='sub2'
23
- className={`mt-2 ${HDSColor(Content.subTitleTextColor)}`}>
24
- {Content.subTitle}
25
- </Typography>}
26
- </div>
27
- {Content.btnLabel &&
28
- <div className='flex pl-3 pt-6'>
29
- <HDSButton
30
- label={Content.btnLabel}
31
- type='secondary'
20
+ {Content.subTitle &&
21
+ <Typography
22
+ textStyle='sub2'
23
+ className={`mt-2 ${HDSColor(Content.subTitleTextColor)}`}>
24
+ {Content.subTitle}
25
+ </Typography>}
26
+ </div>
27
+ <div className='flex items-center flex-wrap flex-row gap-[38px]'>
28
+ {Content.buttons &&
29
+
30
+ Content.buttons.map((btn, index) => (
31
+ <React.Fragment key={index}>
32
+ {btn.cta_link && btn.cta_text && btn.cta_type && (
33
+ <a href={btn.cta_link} key={index} className='flex pl-3 pt-6'>
34
+ <HDSButton
35
+ label={btn.cta_text}
36
+ type={btn.cta_type}
32
37
  leftIconVariant='none'
33
38
  rightIconVariant='none'
34
39
  state='default'
35
- size='sm'
40
+ size='md'
36
41
  rightAnimatedArrow={true}
37
- rightAnimatedArrowColor='#1E56E3'
38
- animatedHoverStroke='group-hover:stroke-blue-600'
42
+ rightAnimatedArrowColor='#FFFFFF'
43
+ animatedHoverStroke='group-hover:stroke-neutral-0'
39
44
  className='flex'
40
- btnTextColorClass='text-blue-600'
41
- />
42
- </div>
45
+ btnTextColorClass={HDSColor('text-neutral-0')}
46
+ />
47
+ </a>)}
48
+ </React.Fragment>
49
+ ))
50
+
43
51
  }
52
+ </div>
44
53
 
45
54
  </>
46
55
  )
47
56
 
48
57
  export default function HeroCapability(props) {
49
- const {
50
- heroData,
51
- activeTab,
52
- onTabChange
53
- } = props;
54
- let currentTab;
55
- if(activeTab.activeTab){
56
- currentTab = activeTab.activeTab;
57
- }
58
- if (!heroData) {
59
- return <div></div>; // Replace with your loading indicator or fallback UI
60
- }
61
-
58
+ const [showVideo, setShowVideo] = useState(false);
59
+ const {
60
+ heroData,
61
+ activeTab,
62
+ onTabChange,
63
+ firstTab
64
+ } = props;
65
+ let currentTab;
66
+ if (activeTab.activeTab) {
67
+ currentTab = activeTab.activeTab;
68
+ }
69
+ if (!heroData) {
70
+ return <div></div>; // Replace with your loading indicator or fallback UI
71
+ }
62
72
  const LinkCardsFn = (heroData) => {
63
- return (
64
- heroData.linkCards && (
65
- <div className="flex px-8 tb:px-0 tb:justify-center overflow-auto scrollbar-hide flex-row mt-16 gap-6 tb:flex-row ">
66
- {heroData.linkCards.map((card, index) => (
67
- <div key={index} className={`${HDSColor(card.cardBorderClass)} border rounded-2xl w-full pb-2 min-w-[11.5rem] max-w-[22.313rem]`}>
68
- <LinkCard
69
- titleTextColor= {card.titleTextColor}
70
- descTextColor={card.descTextColor}
71
- linkUrl={card.linkUrl}
72
- cardBgColor={card.cardBgColor}
73
- cardHoverBg={card.cardHoverBg}
74
- iconVariant={card.iconVariant}
75
- iconStrokeClass={card.iconStrokeColor}
76
- iconArrowVariant={card.iconArrowVariant}
77
- iconArrowStrokeClass={card.iconArrowStrokeColor}
78
- title={card.title}
79
- description={card.description}
80
- />
81
- </div>
82
- ))}
83
- </div>
84
- )
85
- );
86
- };
73
+ return (
74
+ heroData.linkCards && (
75
+ <div className="flex px-8 tb:px-0 tb:justify-center overflow-auto db:overflow-visible scrollbar-hide flex-row mt-16 gap-6 tb:flex-row ">
76
+ {heroData.linkCards.map((card, index) => (
77
+ <div key={index} className={`${HDSColor(card.cardBorderClass)} ${HDSColor(card.cardBgColor)} ${HDSColor(card.cardHoverBg)} transition-all ease-out duration-300 hover:shadow-2xl hover:border-opacity-0 border rounded-2xl w-full min-w-[11.5rem] max-w-[22.313rem]`}>
78
+ <LinkCard
79
+ titleTextColor={card.titleTextColor}
80
+ descTextColor={card.descTextColor}
81
+ linkUrl={card.linkUrl}
82
+ iconVariant={card.iconVariant}
83
+ iconStrokeClass={card.iconStrokeColor}
84
+ iconArrowVariant={card.iconArrowVariant}
85
+ iconArrowStrokeClass={card.iconArrowStrokeColor}
86
+ title={card.title}
87
+ description={card.description}
88
+ />
89
+ </div>
90
+ ))}
91
+ </div>
92
+ )
93
+ );
94
+ };
87
95
 
88
96
 
89
97
  const handleTabClick = (tab) => {
90
- if (tab.name) {
91
- const nameCheck = tab.name.replace(/\s/g, ''); // Remove spaces from tab name
92
- onTabChange(nameCheck);
93
- }
94
- else return;
95
- // Perform any other actions based on the clicked tab
98
+ if (tab.name) {
99
+ const nameCheck = tab.name.replace(/\s/g, ''); // Remove spaces from tab name
100
+ onTabChange(nameCheck);
101
+
102
+ }
103
+ else return;
104
+ // Perform any other actions based on the clicked tab
96
105
  }
97
106
  let heroBgColorClass = '';
98
107
  let bgTabClass = '';
99
108
  let videoUrl = '';
100
109
  let videoPoster = '';
101
110
  let img_url = '';
102
- let pillColorClass= '';
103
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['heroBgColor']){
104
- heroBgColorClass = HDSColor(props.heroData.tabContent[currentTab]['heroBgColor'])
111
+ let pillColorClass = '';
112
+ if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['heroBgColor']) {
113
+ heroBgColorClass = HDSColor(props.heroData.tabContent[currentTab]['heroBgColor'])
105
114
  }
106
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['bgColorTab']){
107
- bgTabClass = HDSColor(props.heroData.tabContent[currentTab]['bgColorTab'])
115
+ if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['bgColorTab']) {
116
+ bgTabClass = HDSColor(props.heroData.tabContent[currentTab]['bgColorTab'])
108
117
  }
109
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['videoUrl']){
110
- videoUrl = props.heroData.tabContent[currentTab]['videoUrl']
118
+ if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['videoUrl']) {
119
+ videoUrl = props.heroData.tabContent[currentTab]['videoUrl']
111
120
  }
112
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['videoPoster']){
113
- videoPoster = props.heroData.tabContent[currentTab]['videoPoster']
121
+ if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['videoPoster']) {
122
+ videoPoster = props.heroData.tabContent[currentTab]['videoPoster']
114
123
  }
115
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['img_url']){
116
- img_url = props.heroData.tabContent[currentTab]['img_url']
124
+ if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['img_url']) {
125
+ img_url = props.heroData.tabContent[currentTab]['img_url']
117
126
  }
118
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['pillColor']){
119
- pillColorClass = props.heroData.tabContent[currentTab]['pillColor']
127
+ if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['pillColor']) {
128
+ pillColorClass = props.heroData.tabContent[currentTab]['pillColor']
120
129
  }
121
- if(props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['bgColorTab']){
122
- bgTabClass = HDSColor(props.heroData.tabContent[currentTab]['bgColorTab']);
130
+ if (props.heroData && props.heroData.tabContent && props.heroData.tabContent[currentTab] && props.heroData.tabContent[currentTab]['bgColorTab']) {
131
+ bgTabClass = HDSColor(props.heroData.tabContent[currentTab]['bgColorTab']);
123
132
  }
124
133
 
125
134
  return (
126
- <div className={`${(heroBgColorClass)} -mt-[81px] pt-[81px] tb:mt-0 tb:pt-0 max-w-7xl rounded-b-3xl tb:rounded-3xl`} >
127
- {/* <div className={`${(heroBgColorClass)} max-w-7xl rounded-3xl bg-gradient-to-br from-green-500 to-green-900`} > */}
128
- {props.heroData.navTabs &&
135
+ <div className={`${(heroBgColorClass)} -mt-[81px] pt-[81px] transition ease-in-out duration-700 tb:mt-0 tb:pt-0 max-w-7xl rounded-b-3xl tb:rounded-3xl`} >
136
+ {/* <div className={`${(heroBgColorClass)} max-w-7xl rounded-3xl bg-gradient-to-br from-green-500 to-green-900`} > */}
137
+ {props.heroData.navTabs &&
129
138
 
130
- <div className='py-5 db:p-20 tb:p-10 flex flex-col shadow rounded-2xl'>
139
+ <div className='pt-5 pb-14 tb:px-10 db:p-20 tb:pt-[60px] tb:pb-20 tb-l:px-20 flex flex-col shadow rounded-2xl'>
131
140
 
132
- <div className='flex px-8 tb:px-0 overflow-scroll scrollbar-hide tb-l:justify-center justify-start'>
133
- <div className={`${bgTabClass} bg-opacity-30 p-1 rounded-[32px]`}>
134
- <Tab
135
- onTabClick={handleTabClick}
136
- tabs={props.heroData.navTabs}
137
- bgColorTab={props.heroData.bgColorTab}
138
- pillColor={pillColorClass}
139
- />
140
- </div>
141
- </div>
142
- <div className='flex flex-col-reverse pt-6 px-8 tb:px-0 tb:flex tb:flex-row tb:items-center tb:pt-10 tb:justify-between'>
143
- <div className=' mt-3 db:max-w-[488px] tb:w-1/2'>
144
- {props.heroData.tabContent &&
145
- props.heroData.tabContent[currentTab] &&
146
- tabCard(props.heroData.tabContent[currentTab])}
147
- </div>
148
- <div className=' db:max-w-[540px] tb:w-1/2 '>
149
- <MediaBox
150
- video_url = {videoUrl}
151
- video_poster = {videoPoster}
152
-
153
- />
154
- </div>
141
+ <div className='flex px-8 tb:px-0 overflow-scroll scrollbar-hide tb-l:justify-center justify-start'>
142
+ <div className={`${bgTabClass} bg-opacity-30 p-1 rounded-[32px]`}>
143
+ <Tab
144
+ onTabClick={handleTabClick}
145
+ tabs={props.heroData.navTabs}
146
+ bgColorTab={props.heroData.bgColorTab}
147
+ pillColor={pillColorClass}
148
+ initialTab={firstTab}
149
+ />
150
+ </div>
151
+ </div>
152
+ <div className='flex flex-col-reverse pt-6 px-8 tb:px-0 tb:flex tb:flex-row tb:pt-20 tb:justify-between min-h-[384px]'>
153
+ <div className=' mt-3 db:max-w-[535px] tb:w-1/2'>
154
+ {props.heroData.tabContent &&
155
+ props.heroData.tabContent[currentTab] &&
156
+ tabCard(props.heroData.tabContent[currentTab])}
157
+ </div>
158
+ <div className='grid items-center relative db:max-w-[500px] tb:w-1/2 transition-opacity duration-700 ease-linear '>
159
+ {
160
+ showVideo ? (
161
+ <video
162
+ id="hero_vid"
163
+ controls={false}
164
+ autoPlay
165
+ muted
166
+ playsInline
167
+ width="500"
168
+ height="500"
169
+ className="tb:w-full w-full rounded-3xl"
170
+ src={heroData.video_url}
171
+ >
172
+ </video>
173
+ ) : (
174
+ <div className="relative">
175
+ {
176
+ heroData.img_url && (
177
+ <img src={heroData.img_url} alt="Illustration" />
178
+ )
179
+ }
180
+ {
181
+ heroData.video_url && (
182
+ <div className="w-14 h-14 cursor-pointer video-play-btn before:bg-blue-700 after:bg-blue-700 rounded-full flex items-center justify-center bg-blue-700 absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 shadow-neutral-1000 shadow-2xl"
183
+ onClick={() => setShowVideo(true)}
184
+ >
185
+ <Icon variant='play' height='h-6 w-6 ml-1' strokeClass='stroke-neutral-0' />
186
+ </div>
187
+ )
188
+ }
155
189
  </div>
190
+ )
191
+ }
156
192
 
157
- <div className=''>
158
- {props.heroData.tabContent[currentTab] &&
159
- LinkCardsFn(props.heroData.tabContent[currentTab])}
160
- </div>
161
- </div>
162
193
 
163
- }
164
194
 
165
- </div>
195
+
196
+ {/*
197
+ // (
198
+ // <div
199
+ // onClick={() => setShowVideo(true)}
200
+ // className='w-14 h-14 cursor-pointer video-play-btn before:bg-blue-700 after:bg-blue-700 rounded-full flex items-center absolute justify-center bg-blue-700 left-1/2 top-1/2 shadow-neutral-1000 shadow-2xl'>
201
+ // <Icon variant='play' height='h-6 w-6 ml-1' strokeClass='stroke-neutral-0' />
202
+ // </div>
203
+
204
+ // )} */}
205
+
206
+ </div>
207
+ </div>
208
+
209
+ <div className=''>
210
+ {props.heroData.tabContent[currentTab] &&
211
+ LinkCardsFn(props.heroData.tabContent[currentTab])}
212
+ </div>
213
+ </div>
214
+
215
+ }
216
+
217
+ </div>
166
218
  )
167
219
  }
168
220
 
package/src/HDS/modules/TextCard/textCard.js CHANGED
@@ -59,6 +59,11 @@ export default function TextCard(props) {
59
59
  }
60
60
  </div>
61
61
  )
62
+ }
63
+ {props.addiDescription && (
64
+ <Typography textStyle='body1' className='text-neutral-700'>{props.addiDescription}</Typography>
65
+ )
66
+
62
67
  }
63
68
  {
64
69
  props.feature_cards_links && (
@@ -131,7 +136,7 @@ export default function TextCard(props) {
131
136
  </div>
132
137
  )
133
138
  }
134
-
139
+
135
140
  {props.button &&
136
141
  <div className="flex gap-6 items-center">
137
142
  {props.button.map((btn, index) => (
package/src/HDS/modules/navCard/index.js CHANGED
@@ -1 +1,2 @@
1
- export {default as NavCard} from './navCard'
1
+ export {default as NavCard} from './navCard'
2
+ export { default as NavTabCard } from './navTabCard'
package/src/HDS/modules/navCard/navTabCard.js ADDED
@@ -0,0 +1,93 @@
1
+ import React from 'react';
2
+ import { Typography} from '../../foundation/Typography';
3
+ import NavCard from './navCard';
4
+
5
+ export default function NavTabCard(props){
6
+ return (
7
+ <div className="flex tb-l:flex-row flex-col justify-between">
8
+ <div>
9
+ <Typography textStyle='h4' className='text-neutral-1000'>{props.title}</Typography>
10
+ <Typography textStyle='body1' className='mt-4 text-neutral-700 max-w-[430px]'>
11
+ {props.description}
12
+ </Typography>
13
+ </div>
14
+ <div className="max-w-[583px] pt-8 tb-l:pt-0">
15
+ <NavCard
16
+ navTabs={[
17
+ {
18
+ current: '[Circular]',
19
+ href: '',
20
+ name: 'Performance'
21
+ },
22
+ {
23
+ current: '[Circular]',
24
+ href: '',
25
+ name: 'Company'
26
+ },
27
+ {
28
+ current: '[Circular]',
29
+ href: '',
30
+ name: 'Authorization'
31
+ },
32
+ {
33
+ current: '[Circular]',
34
+ href: '',
35
+ name: 'Observability'
36
+ },
37
+ {
38
+ current: '[Circular]',
39
+ href: '',
40
+ name: 'API Security'
41
+ }
42
+ ]}
43
+ tabContent={{
44
+ 'API Security': {
45
+ img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
46
+ subTitle: 'Hasura simplifies data access and reduces latency for optimizing performance via a Haskell core, JIT query compiler, predicate pushdown, and application-level caching out of the box.',
47
+ title: '5Get blazing-fast APIs without the extra work',
48
+ video_poster: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
49
+ video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1683307555/hasura-con-2023/tg_hascon23_homepage_ue29jn.mp4'
50
+ },
51
+ Authorization: {
52
+ img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
53
+ subTitle: 'Hasura simplifies data access and reduces latency for optimizing performance via a Haskell core, JIT query compiler, predicate pushdown, and application-level caching out of the box.',
54
+ title: '3Get blazing-fast APIs without the extra work',
55
+ video_poster: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
56
+ video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1683307555/hasura-con-2023/tg_hascon23_homepage_ue29jn.mp4'
57
+ },
58
+ Company: {
59
+
60
+ img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
61
+ subTitle: 'Hasura simplifies data access and reduces latency for optimizing performance via a Haskell core, JIT query compiler, predicate pushdown, and application-level caching out of the box.',
62
+ title: '2Get blazing-fast APIs without the extra work',
63
+ video_poster: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
64
+ video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1683307555/hasura-con-2023/tg_hascon23_homepage_ue29jn.mp4'
65
+ },
66
+ Observability: {
67
+ img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
68
+ subTitle: 'Hasura simplifies data access and reduces latency for optimizing performance via a Haskell core, JIT query compiler, predicate pushdown, and application-level caching out of the box.',
69
+ title: '4Get blazing-fast APIs without the extra work',
70
+ video_poster: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
71
+ video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1683307555/hasura-con-2023/tg_hascon23_homepage_ue29jn.mp4'
72
+ },
73
+ Performance: {
74
+ img_url: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
75
+ readMore_cta: 'Read More About Performance',
76
+ subTitle: 'Hasura simplifies data access and reduces latency for optimizing performance via a Haskell core, JIT query compiler, predicate pushdown, and application-level caching out of the box.',
77
+ title: '1Get blazing-fast APIs without the extra work',
78
+ video_poster: 'https://res.cloudinary.com/dh8fp23nd/image/upload/v1683311269/hasura-con-2023/hascon23_fallback_homepage_tg5sgv.jpg',
79
+ video_url: 'https://res.cloudinary.com/dh8fp23nd/video/upload/v1683307555/hasura-con-2023/tg_hascon23_homepage_ue29jn.mp4'
80
+ }
81
+ }}
82
+ />
83
+ </div>
84
+ </div>
85
+ )
86
+ }
87
+
88
+ NavTabCard.defaultProps={
89
+ title:'Build any supergraph topology',
90
+ description: `Build a supergraph using Hasura, use Hasura to implement a GraphQL gateway pattern or use Hasura to federate existing resources into another supergraph. Hasura allows you to shape any supergraph topology that works for you. 
91
+
92
+ Check out some of the Federation architecture patterns implemented by our users.`
93
+ }
package/src/styles/tailwind.css CHANGED
@@ -1937,6 +1937,14 @@ select{
1937
1937
  max-width: min-content;
1938
1938
  }
1939
1939
 
1940
+ .max-w-\[430px\]{
1941
+ max-width: 430px;
1942
+ }
1943
+
1944
+ .max-w-\[583px\]{
1945
+ max-width: 583px;
1946
+ }
1947
+
1940
1948
  .flex-1{
1941
1949
  flex: 1 1 0%;
1942
1950
  }
@@ -1992,6 +2000,12 @@ select{
1992
2000
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
1993
2001
  }
1994
2002
 
2003
+ .-translate-y-1\/2{
2004
+ --tw-translate-y: -50%;
2005
+ -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2006
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2007
+ }
2008
+
1995
2009
  .translate-x-0{
1996
2010
  --tw-translate-x: 0px;
1997
2011
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -2028,12 +2042,6 @@ select{
2028
2042
  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2029
2043
  }
2030
2044
 
2031
- .-translate-y-1\/2{
2032
- --tw-translate-y: -50%;
2033
- -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2034
- transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
2035
- }
2036
-
2037
2045
  .-rotate-45{
2038
2046
  --tw-rotate: -45deg;
2039
2047
  -webkit-transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -10852,6 +10860,10 @@ select{
10852
10860
  padding-left: 2rem;
10853
10861
  }
10854
10862
 
10863
+ .tb-l\:pt-0{
10864
+ padding-top: 0px;
10865
+ }
10866
+
10855
10867
  .tb-l\:text-left{
10856
10868
  text-align: left;
10857
10869
  }