@@ -39,22 +39,22 @@ export const Home = () => {
3939 < Typography
4040 bgcolor = '#0045BE'
4141 color = '#e3e3e3'
42+ fontFamily = 'Lab Grotesque'
4243 fontSize = { 28 }
4344 fontWeight = { 700 }
4445 pt = { 3 }
4546 px = { 2 }
4647 pb = { 1 }
4748 sx = { {
4849 backgroundImage : 'linear-gradient(to right, rgb(0,0,153), rgb(0,70,190) 30%)' ,
49- fontFamily :
50- 'var(--ifm-font-family-headings, var(--ifm-font-family-base, "Lab Grotesque", "Segoe UI", Roboto, Helvetica, Arial, sans-serif))' ,
5150 } }
5251 textAlign = 'center'
5352 >
5453 < Box
5554 component = { SumoLogicDocsLogo }
56- role = 'img'
57- aria-label = 'Sumo Logic Docs logo'
55+ alt = "Sumo Logic Docs logo"
56+ role = "<img>"
57+ aria-hidden = "true"
5858 height = { {
5959 md : 36 ,
6060 xs : 28 ,
@@ -78,8 +78,6 @@ export const Home = () => {
7878 md : '100% 200%' ,
7979 xs : '100% 100%' ,
8080 } ,
81- fontFamily :
82- 'var(--ifm-font-family-base, "Lab Grotesque", "Segoe UI", Roboto, Helvetica, Arial, sans-serif)' ,
8381 } }
8482 height = { {
8583 md : 'auto' ,
@@ -113,23 +111,19 @@ export const Home = () => {
113111 >
114112 < Typography
115113 color = 'white'
114+ fontFamily = 'Lab Grotesque'
116115 fontSize = { 32 }
117116 fontWeight = { 700 }
118117 variant = 'h2'
119- sx = { {
120- fontFamily :
121- 'var(--ifm-font-family-headings, var(--ifm-font-family-base, "Lab Grotesque", "Segoe UI", Roboto, Helvetica, Arial, sans-serif))' ,
122- } }
123118 >
124119 New to Sumo?
125120 </ Typography >
126121 < Typography
127122 color = '#e3e3e3'
123+ fontFamily = 'Lab Grotesque'
128124 pb = { 2 }
129125 textAlign = 'left'
130- component = 'p'
131- variant = 'body1'
132- sx = { { fontFamily : 'inherit' } }
126+ variant = 'p'
133127 >
134128 Get started quickly with our search, visualization, analytics, and security capabilities.
135129 </ Typography >
@@ -157,12 +151,12 @@ export const Home = () => {
157151 border : '.5px solid' ,
158152 borderColor : '#e3e3e3' ,
159153 borderRadius : 2 ,
154+ fontFamily : 'Lab Grotesque' ,
160155 textTransform : 'none' ,
161156 width : {
162157 md : 'auto' ,
163158 xs : '100%' ,
164159 } ,
165- fontFamily : 'inherit' ,
166160 '&:hover' : {
167161 bgcolor : '#0045BE' ,
168162 borderColor : '#0045BE' ,
@@ -207,6 +201,7 @@ export const Home = () => {
207201 >
208202 < Typography
209203 component = 'h2'
204+ fontFamily = 'Lab Grotesque'
210205 fontWeight = { 900 }
211206 mb = { {
212207 md : 'inherit' ,
@@ -215,19 +210,15 @@ export const Home = () => {
215210 } }
216211 textAlign = 'center'
217212 variant = 'h4'
218- sx = { {
219- fontFamily :
220- 'var(--ifm-font-family-headings, var(--ifm-font-family-base, "Lab Grotesque", "Segoe UI", Roboto, Helvetica, Arial, sans-serif))' ,
221- } }
222213 >
223214 Explore our product guides
224215 </ Typography >
225216 < Typography
226217 component = 'p'
218+ fontFamily = 'Lab Grotesque'
227219 mb = { 4 }
228220 textAlign = 'center'
229221 variant = 'subtitle1'
230- sx = { { fontFamily : 'inherit' } }
231222 >
232223 Ensure app reliability and security with modern cloud-native monitoring and observability.
233224 </ Typography >
@@ -277,31 +268,46 @@ export const Home = () => {
277268 {
278269 label : 'Other Solutions' ,
279270 } ,
280- ] . map ( ( { label } , index ) => (
271+ ] . map ( ( { label, ... rest } , index ) => (
281272 < Tab
282273 key = { label }
283- value = { String ( index ) }
284274 label = { label }
285275 sx = { {
286276 color : 'grey.700' ,
277+ fontFamily : 'Lab Grotesque' ,
287278 fontWeight : 'bold' ,
288- fontFamily :
289- 'var(--ifm-font-family-headings, var(--ifm-font-family-base, "Lab Grotesque", "Segoe UI", Roboto, Helvetica, Arial, sans-serif))' ,
290279 } }
280+ value = { String ( index ) }
281+ { ...rest }
291282 />
292283 ) ) }
293284 </ Tabs >
294-
295- { features . map ( ( feature , index ) => (
296- < TabPanel key = { index } value = { String ( index ) } sx = { { px : 0 } } >
297- < Grid container direction = "row" justifyContent = "center" spacing = { 4 } py = { 6 } >
298- { feature . map ( ( config ) => (
299- < Grid item key = { config . link } lg = { 4 } md = { 6 } xs = { 12 } >
300- < Feature length = { feature . length } { ...config } />
301- </ Grid >
302- ) ) }
303- </ Grid >
304- </ TabPanel >
285+ { features . map ( ( feature , index ) => tab === String ( index ) && (
286+ < Grid
287+ component = { TabPanel }
288+ container
289+ direction = 'row'
290+ justifyContent = 'center'
291+ key = { index }
292+ py = { 6 }
293+ spacing = { 4 }
294+ value = { String ( index ) }
295+ >
296+ { feature . map ( ( config ) => (
297+ < Grid
298+ item
299+ key = { config . link }
300+ lg = { 4 }
301+ md = { 6 }
302+ xs = { 12 }
303+ >
304+ < Feature
305+ length = { feature . length }
306+ { ...config }
307+ />
308+ </ Grid >
309+ ) ) }
310+ </ Grid >
305311 ) ) }
306312 </ TabContext >
307313 </ Stack >
0 commit comments